Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 1.3 — The GPU and Why It Is Fast
3D Web · Example 2 of 2

One tiny program per corner, one per pixel

The wave is the vertex program, the colours are the fragment program. Look at the status bar: 1 draw call, 1 shader program.

The GPU is a chip with thousands of small workers that all run the same short program on different data at once. That suits 3D, where the same steps repeat for every corner and every pixel, and it makes the number of draw calls a cost of its own.

Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.

Ready for more? This phase has 5 hands-on exercises with automatic checks.

Practice questions

Write the code in the editor, run it, then open the model answer to compare.

01

A scene shows 1,000 identical trees. Which technique keeps it at one draw call, and what must you give up?

02

In TRIPS, write the one-line change that makes the instanced version draw only the first 100 boxes.

Explain it without notes

01

Why can a scene with 5,000 small separate meshes run slower than a scene with one 5-million-triangle mesh?

02

What are the vertex shader and the fragment shader, and how many times does each run for one triangle?

One tiny program per corner, one per pixel
Press Run to see the page.
idle

Console

Nothing logged yet.

Expected console output

corners sent through the vertex program each frame: 861
triangles: 1600, draw calls: 1, shader programs: 1