Phase 5 · part: Fork and head tube
Materials, Light and Shadow
Why a surface looks the way it does: materials, how light is computed, metal and rough, six light types, shadow maps, colour and tone mapping. Then you light the showroom.
Until now the bike was flat colour. This phase makes it look like a real object. You start with the materials three.js offers and what each costs, then compute one pixel of light by hand with a dot product, and see why metal needs an environment to look like metal.
Then you meet the six kinds of light and their real units, learn how a shadow is made (a second picture drawn from the light's point of view) and fix its classic faults: no shadow, a cut-off shadow, acne. You finish with colour: why the same grey can be 128 or 55, and how tone mapping keeps bright light from burning colours out.
At the end you build the showroom's lighting in src/world/lights.js, give the bike its fork, and the bike casts a soft shadow on the stand.
Phase 5 · the brief from Lumen
Tomás, founder of Lumen Bikes
“The bike looks like a cardboard cut-out. I want people to feel the metal and the paint, with a shadow under it.”
Ama showed Tomás the showroom so far: the stand, the whole frame, turning slowly. It was correct, and it looked dead. The orange was flat, no part had a shine, and the bike seemed to float because nothing touched the ground.
Kofi explained that a bike is not drawn, it is lit. Every pixel is a small calculation: which way the surface faces, where the light is, how rough the paint is, what it reflects. Change the numbers and the same frame turns from plastic to painted metal.
Lena added a worry from her old Android phone: every light and every shadow costs time on every pixel, and a careless point light can cut the frame rate badly. So the team learns the cost along with the look. By the end the bike has its fork, a key light with a real shadow, and a budget Lena can accept.
At this station
You will learn
- Pick the right material for a surface and say what it costs
- Predict a pixel's brightness from the light's direction and the surface normal
- Set up lights and a shadow that works, and fix acne, cut-off and missing shadows
- Explain sRGB, linear colour and tone mapping, and choose settings that keep colours true
You write code in
In your lumen-3d project (npm run dev) and in the editor on this page
Files you touch
- src/world/lights.js
- src/world/renderer.js
- src/objects/bike.js
- src/objects/showroom.js
Work order · 7 steps
- 5.1A Tour of MaterialsA material decides how a surface answers light. three.js has a ladder of them, from Basic (ignores light) to Physical (the most realistic and the most costly). You see all seven side by side and meet the settings that cause most surprises: side, transparent, opacity and wireframe. 19 min 2 live scenes
- 5.2How Light Is ComputedThe GPU finds a pixel's brightness with one multiplication: how directly the surface faces the light (a dot product), times the light's strength. You build the number by hand, compare it with what the GPU drew, and add the shiny spot on top. 18 min 1 live scene
- 5.3PBR: Metalness and RoughnessPhysically based rendering describes a surface with two numbers, metalness and roughness, and lights it with rules from real optics. You learn what each number does, why metal needs something to reflect, and what clearcoat adds for car-style paint. 18 min 2 live scenes
- 5.4Lights and Their Costthree.js has six kinds of light, each with its own unit and cost. You learn what they are for, how a point light fades with distance (the decay), and why twenty point lights is a mistake: each light adds work to every pixel. 19 min 2 live scenes
- 5.5ShadowsA shadow is a second picture, drawn from the light's point of view, that stores how far the nearest surface is. Then every pixel asks: am I farther than that? You learn the five switches that must all be on, and fix the three classic faults: no shadow, a cut-off shadow and acne. 24 min 3 live scenes
- 5.6Colour Management and Tone MappingScreens do not store brightness evenly (sRGB), but light maths needs evenly spaced numbers (linear). three.js converts between them for you, and breaks the picture if you tell it the wrong thing. Tone mapping then squeezes very bright light into what a screen can show. 20 min 3 live scenes
- 5.7Build: The Fork and Showroom LightingbuildThe showroom gets a key light that casts a real shadow, a soft fill, a tone-mapping setting that keeps Lumen orange true, and its sixth bike part, the fork. The bike now looks like painted metal and sits on its stand instead of floating. 23 min 1 live scene
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.
MeshStandardMaterial and the scene shows a black disc.BeginnerQC-02Make a white plate mid-greyA white MeshLambertMaterial plate faces a directional light of intensity π, so its middle is full white.BeginnerQC-03Make the chrome ball shineThe chrome ball has metalness: 1 and one AmbientLight, and it is black.IntermediateQC-04Find the missing shadow switchesThe ball floats above the floor and there is no shadow, with no error.IntermediateQC-05Light the stand like the showroomBuild a small version of the showroom's lighting. Add a DirectionalLight named key-light that casts a shadow with a 1024 × 1024 map, and a HemisphereLight fill.Intermediate