From bytes to a draw — Parallax Sketchbook

SKETCHBOOK / 02 The geometry desk · 2-week chapter

Page 1 of 3: Upload bytes, then describe them

Storage is not a vertex format

Upload bytes, then describe them

A buffer stores bytes. A vertex attribute declaration explains how a draw interprets some of those bytes: component count, scalar type, normalization, stride, and offset. A VAO retains the vertex-input configuration used for later draws. It does not replace the buffer owner or magically infer the C++ struct layout.

The starter interleaves position and color in a standard-layout Vertex and uses sizeof(Vertex) for stride and offsetof for field offsets. The pointer-looking argument is a byte-offset token into the bound buffer for this API call, not a host pointer that OpenGL should dereference. Keep that API-specific convention localized.

In this baseline, glVertexAttribPointer captures the currently bound array buffer into the VAO’s attribute association. Simply rebinding GL_ARRAY_BUFFER later does not redirect that stored attribute. Enable the intended locations explicitly and keep the GLSL input locations aligned with the C++ description.

TRY IT IN YOUR STUDIO

Trace one vertex’s position and color bytes through their stride and offsets. Change only a color first, then deliberately diagnose one wrong offset.

LOOK CLOSER

// Integration fragment with vao, buffer, and standard-layout Vertex defined.
glBindVertexArray(vao.get());
glBindBuffer(GL_ARRAY_BUFFER, buffer.get());
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, sizeof(Vertex),
                      reinterpret_cast<const void*>(offsetof(Vertex, position)));
glEnableVertexAttribArray(0);

Vertex-input fragment. The native starter supplies validated fixed-size data, explicit GLsizei casts, and complete owners.

From the page to your own work

Your studio assignment.

Turn one triangle into your own indexed exhibit panel.

A finish line you can see

An original four-vertex panel, index-range test, and byte-layout sketch.

Use two triangles with six indices and a deliberate winding.
Explain stride, offsets, and the element-buffer association.
Test one invalid index before any GL upload.

Keep the evidence in your weekly notebook ↗

Explain it like an engineer

Try answering aloud before opening the review notes. Use your own implementation as evidence.

What does a VAO remember about vertex input?

Attribute format, enable state, and captured buffer associations.
The element-buffer binding belongs to the VAO.
Changing the generic array-buffer binding alone does not rewrite an existing attribute.

These prompts support practice; they are not an automatic assessment of your work.

A tip for this exercise

Draw the panel and number its corners before touching buffer code. Keeping geometry, byte layout, and index values on one sheet makes a malformed rectangle much easier to diagnose.

Hints, when you need them.

Try a first step, then reveal as much help as you need. Each hint gets a little more specific.

1Hint 1 · Find a starting point

A rectangle needs four unique corners but two triangles. Label the vertices first, then list which three each triangle uses.

2Hint 2 · Choose an approach

Make a table of position offset, color offset, vertex stride, and index type. Check which buffer associations the intended VAO captures during setup.

3Hint 3 · Check your reasoning

Check that six indices all fall within four vertices. A separate CPU test should reject an invalid index before any upload or draw occurs.

A small creative variation ↗

Give each corner an original palette value and compare interpolation across the diagonal.

Optional. Save it for later if this chapter already feels full.

Coming back after a break? ↩

Return to one triangle and inspect its two active attribute locations.

Books & principles behind this study +

Original Parallax explanations and assignments, with these works for further reading.

YOUR MARGIN NOTES

Leave yourself a good question.

What changed your mind? What would you try next?

Notes for From bytes to a draw

Notes are private to this browser and saved as you write.

A CHECKPOINT, NOT A SCORE

Can you explain the idea and try the exercise yourself?

Completion records your own assessment. It does not compile or test your C++.

Companion source 2 files