Command Palette

Search for a command to run...

Hectal

Phase 1 · part: Down tube

How a Screen Draws 3D

Pixels, triangles, the GPU and the rendering pipeline: what really happens between your code and the picture, and how to check whether a browser can draw 3D at all.

Before you move a single object, you need a true picture of what a computer does when it "draws 3D". This phase builds it from the bottom: a screen is a grid of pixels, every 3D shape is made of triangles, and a graphics chip (the GPU) turns those triangles into coloured pixels thousands of times faster than the main processor could.

You follow one triangle through the whole rendering pipeline, with real numbers, using an interactive stepper. You also meet the three ways to reach the GPU from a web page (WebGL 2, WebGPU and the libraries built on them) and learn why we use three.js.

The phase ends with the showroom's first real safety feature: before it builds anything, main.js asks the browser whether it can draw 3D. If not, the page shows a friendly message and a picture instead of a blank screen. It also adds the showroom's first bike part, the down tube.

Phase 1 · the brief from Lumen

Lena, QA tester at Lumen Bikes

“I opened the showroom on my old phone and got a white square. No message, nothing. I can't tell if it is broken or just slow.”

The stand turns beautifully on Kofi's laptop. Then Lena, who tests everything on a cheap Android phone, sends a screenshot: a white square where the showroom should be. The page didn't crash. It had nothing to draw with, and said nothing.

Kofi realises he never asked the basic question: can this device draw 3D at all, and how much can it draw? To answer it he has to understand what actually happens between his JavaScript and the pixels: what the screen is, what a triangle is, what the GPU does and what a draw call costs.

By the end of the phase the showroom checks for WebGL 2 before it starts, shows a picture and a clear message when it can't, and has its first bike part, the orange down tube, standing on the stand.

At this station

You will learn

  • Explain pixels, the canvas, CSS size and drawing-buffer size, and why a canvas looks blurry
  • Count the triangles in a shape and say what a draw call costs
  • Follow one triangle through the rendering pipeline with real numbers
  • Check whether a browser supports WebGL 2 or WebGPU, and show a fallback when it does not

You write code in

In the editor on this page (no install); the build adds to your lumen-3d project

Files you touch

  • index.html
  • src/main.js
Start with 1.1

Work order · 6 steps

  1. 1.1Pixels and the CanvasA screen is a grid of coloured dots called pixels, and a web page draws 3D into a <canvas> element. The canvas has two sizes, the box it fills on the page and the grid of pixels it really draws, and when they disagree the picture is blurry. 20 min 2 live scenes
  2. 1.2Everything Is TrianglesEvery 3D shape is a mesh of triangles joined at corner points called vertices. Triangles are used because three points are always flat, and the number of triangles is the first thing that decides how much a scene costs. 21 min 2 live scenes
  3. 1.3The GPU and Why It Is FastThe 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. 22 min 2 live scenes
  4. 1.4The Rendering PipelineThe rendering pipeline is the fixed chain of steps that turns corner positions into coloured pixels: vertex shader, clip space, rasterisation, fragment shader, depth test and the picture. You program two of the steps; the rest are built into the GPU. 23 min 3 live scenes
  5. 1.5WebGL, WebGPU and the LibrariesA web page reaches the GPU through WebGL 2 or the newer WebGPU, and almost nobody uses them directly: libraries such as three.js sit on top. You choose a library by what it costs and gives you, and you must always check that the browser can draw 3D before you try. 19 min 2 live scenes
  6. 1.6Build: A Support CheckbuildThe showroom now asks the browser whether it can draw 3D before it builds anything, and shows a message and a still picture when it can't. It also gets its first bike part: the orange down tube, placed with exact numbers. 25 min 2 live scenes

Quality control · 5 tests

Build it yourself, press Check, and the page tests the scene you made: what is in it, where it sits, what it costs the GPU.

QC-01Make the canvas sharp on a ratio-2 screenThe page draws a cube into a canvas that should look 200 × 100 on the page.BeginnerQC-02A hundred boxes, one draw callThis scene draws 100 boxes as 100 separate meshes: 100 draw calls.BeginnerQC-03Bring the invisible triangle backThis hand-built triangle is in the scene (the renderer even counts it) but nothing appears.BeginnerQC-04Check for WebGL 2 firstThe page needs a <div id="fallback" hidden> with a message, and the code must decide with a function supportsWebGL2() whether to start the scene or to show the fallback.BeginnerQC-05Build the down tubeAdd the bike's down tube to the scene: a cylinder named down-tube, radius 0.022 m, running from the bottom bracket (0, 0.30, 0) to the head tube bottom (0.47, 0.70, 0).Beginner