Phase 19 · part: Lumen badge
Interviews and Capstone
3D frontend interview questions with measured answers, debugging rounds for black, slow, leaking and flickering scenes, two system designs, and the finished showroom.
The last station. First the interview: the questions 3D frontend roles ask (the render loop, draw calls, matrices, colour space, disposal, R3F re-renders, WebGPU against WebGL), each answered with a number you measured in this course, not a guess.
Then the two kinds of round that decide senior offers: debugging ("it is black", "it is slow", "it leaks", "it flickers", each with a checklist and a broken scene) and frontend system design (a product configurator with thousands of variants; a 3D data scene with 100,000 points).
The capstone ships the showroom: measured against its budget, the accessibility checklist and the fallback matrix, with what to put in your portfolio. The last part, the Lumen badge, goes on the down tube, just below the head tube.
Phase 19 · the brief from Lumen
Tomás, Lumen Bikes' founder
“The showroom launches on Monday, and Tomás wants to hire a second 3D engineer to grow it.”
Tomás has two lists on his desk. One is the launch checklist: does the showroom stay inside its budget on Lena's cheap phone, can Ravi use it with a screen reader, does it work without WebGPU, without WebGL, after the GPU resets?
The other is a hiring plan. He asks Kofi to write the interview: "Ask what you had to learn. If they can answer what you learned the hard way, they can help."
This phase is both lists. You answer the interview Kofi writes, then you run the launch checklist on your own showroom.
At this station
You will learn
- Answer 3D frontend interview questions with measured numbers
- Debug black, slow, leaking and flickering scenes with a checklist
- Design a product configurator and a 3D data scene, out loud
- Ship the showroom against a budget, an accessibility checklist and a fallback matrix
You write code in
In your lumen-3d project (npm run dev) and in the editor on this page
Files you touch
- src/objects/bike.js
- src/ui/panel.js
- src/main.js
- index.html
- package.json
- tests/scene.test.js
- README.md
Work order · 5 steps
- 19.13D Frontend Interview QuestionsThe questions 3D frontend interviews ask, with model answers built on what you measured in this course: the render loop, draw calls, matrices, normals, colour space, disposal, R3F re-renders, and WebGPU against WebGL. Each answer gives the mechanism, a number, an edge case and a trade-off. 19 min 3 live scenes
- 19.2Debugging RoundsDebugging rounds hand you a broken scene. Five symptoms cover most of them: it is black, it is slow, it leaks, it is blurry, it flickers. Each has a short checklist, and each check is a measurement: a pixel, a triangle count, renderer.info, the pixel ratio, a depth calculation. 21 min 3 live scenes
- 19.3Frontend System Design: A Product ConfiguratorDesign a 3D product configurator for thousands of variants: split the product into parts instead of one model per variant, deliver them from a CDN with fingerprinted names, budget per device class, load progressively with fallbacks, and keep it accessible and measurable. 20 min 2 live scenes
- 19.4Frontend System Design: 3D Data and MapsDesign a 3D view of a lot of data, such as 100,000 bike rentals on a city map: draw them in one call (points or instancing), pick with the GPU or a spatial index, label only what matters, stream tiles, and know when a 2D map is the better answer. 23 min 2 live scenes
- 19.5Capstone: Ship the ShowroombuildThe showroom gets its last part, the Lumen badge, then goes through a launch check: a budget, a priced part list, a text alternative, a fallback picture, named buttons. The same checks live on as the project's own tests, and a README records what you measured, for your portfolio. 118 min 2 live scenes
Quality control · 4 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.
pick(colour) creates a new swatch texture and never frees the old one.AdvancedQC-04Instance the rentals2,000 rentals are drawn as 2,000 meshes: about 2,000 draw calls (the status bar shows it).Advanced