Command Palette

Search for a command to run...

Hectal

Phase 15 · part: Pedals

Post-Processing and Effects

Render targets, the effect chain, selective bloom, anti-aliasing and particles: the headlight glows, the hovered part is outlined, and the bike gets its pedals.

Everything so far drew the scene straight onto the canvas. Effects need the picture first: glow, outlines and smooth edges are made by changing the finished image. This phase starts with the render target, a picture the GPU draws into instead of the screen, and shows what it costs in memory.

Then the effect chain: EffectComposer and its passes on WebGL, the node pipeline on WebGPU, and the colour rules that make a picture dark or pale when one pass is missing or doubled. You make a lamp glow without making a wall glow, bring back the smooth edges a composer loses, and draw hundreds of sparks in one draw call.

The build gives the showroom a glowing headlight, an outline on the part under the pointer, a button to turn the effects off, and this phase's bike part, the pedals.

Phase 15 · the brief from Lumen

Ama, head of design at Lumen Bikes

“On the photos the headlight shines. On our showroom it looks like a grey button. And when I point at a part, it should say so.”

Ama opens the showroom next to the product photos and frowns. In the photos the headlight throws a soft glow into the evening. In the showroom it is a pale disc. "It does not look switched on," she says. And when she moves the mouse over the fork, the part only turns slightly lighter. Tomás wants something clearer for people on touch screens and projectors.

Kofi knows what is missing: effects. The scene must be drawn into a picture, the very bright pixels must glow, and the chosen part must get a line round it. But Lena has warned him: every effect costs memory and time, and her cheap phone is the test. Ravi adds a rule: nothing may flash, and the visitor can turn the effects off.

So the team builds a chain that glows only the headlight, outlines one part at a time, keeps its smooth edges, and has an off switch. While they are at it they add the pedals, the part the bike has been missing since the crankset.

At this station

You will learn

  • Draw a scene into a render target and compute what it costs
  • Build an effect chain that does not wash out or darken the colours
  • Make only the lights glow, and keep smooth edges through a composer
  • Draw many particles in one call without hiding each other

You write code in

In your lumen-3d project (npm run dev) and in the editor on this page

Files you touch

  • src/world/composer.js
  • src/world/loop.js
  • src/objects/bike.js
  • src/systems/picking.js
  • src/ui/panel.js
  • src/main.js
  • index.html
Start with 15.1

Work order · 6 steps

  1. 15.1Render TargetsA render target is a picture the GPU draws into instead of the screen. It becomes a texture you can show on a mirror, a screen inside the scene, or feed to an effect. It costs memory, and it does not resize by itself. 21 min 3 live scenes
  2. 15.2The Effect ChainPost-processing draws the scene into a picture, then changes the picture with a chain of passes. On WebGL that is EffectComposer, and the chain must end with OutputPass once. On WebGPU a node pipeline does the same. 22 min 3 live scenes
  3. 15.3Bloom and GlowBloom makes very bright pixels glow into their surroundings, like a lamp seen through mist. Three numbers control it (threshold, strength, radius), a brightness trick keeps it on the lights only, and it costs a chain of smaller pictures. 22 min 2 live scenes
  4. 15.4Anti-AliasingSlanted edges on a pixel grid look like steps. MSAA smooths them while drawing, FXAA and SMAA smooth the finished picture. The catch: the canvas's MSAA does not reach a composer's pictures unless you ask for it. 21 min 2 live scenes
  5. 15.5Particles and Instanced EffectsSparks, dust and light beams are many small soft shapes. Draw them as one Points object or one InstancedMesh (one draw call), blend them additively, and stop them from writing depth, or they hide each other. 20 min 2 live scenes
  6. 15.6Build: Glow and OutlinebuildThe showroom gets an effect chain: the headlight glows (and nothing else does), the part under the pointer gets an outline, and the bike gets its pedals. A button turns the effects off. 37 min 1 live scene

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.

QC-01Fix the pale orangeThe chain below makes the orange picture pale: it prints orange: 255, 175, ... instead of about 255, 107, 44.IntermediateQC-02A screen in the sceneA plane named screen should show what a second camera sees: the orange cube in photoScene. Right now it is a dark grey plane.IntermediateQC-03Make only the lamp glowThe lamp is three times as bright as white and the orange panel is never above 1. Add an UnrealBloomPass before the OutputPass so the lamp glows and the panel does not.AdvancedQC-04Keep the edges smoothThe renderer asks for antialias: true, but the wedge's edges are steps again once the picture goes through the composer: the page prints soft edge pixels: 0.Advanced