Command Palette

Search for a command to run...

Hectal

Phase 6 · part: Front wheel

Textures and Environments

Load pictures onto surfaces without surprises: colour space, repeat, filtering, PBR maps, HDR environments and texture memory. Then build the front wheel.

A material with only a colour looks like plastic. Real surfaces have detail: rubber with a tread, metal with a pattern, a floor with stains. A texture is a picture the GPU reads to colour each point of a surface. This phase teaches the whole life of a texture: loading it (and what to do when it fails), the colour-space rule that decides whether it looks right, how it repeats and moves, how it stays sharp at a distance, and what each PBR map changes.

Then the picture goes the other way round. Shiny metal does not show light: it shows its surroundings. You give the showroom an environment, an HDR image turned into light and reflections, and you see why chrome without one is black. The last topic puts a price on all this: a small photo can take far more GPU memory than its file size suggests.

At the end the showroom gets its front wheel, with a tread made of two real texture files, and a studio environment that makes the metal parts shine.

Phase 6 · the brief from Lumen

Ama, head of design at Lumen Bikes

“The frame is orange and the tubes are right, but the bike looks like a toy. Where is the rubber? Why does the metal look dead?”

Kofi shows Ama the showroom after Phase 5. The tubes have light and shadow, but Ama frowns. A real tyre has a tread you can see and feel; a real hub shines. Here everything is one flat colour, and the chrome bell she asked for would be black.

Lena, testing on her cheap phone, adds a worry. The first texture Kofi tried, a 4096-pixel photo of the floor, loaded in two seconds and made the page crash after a minute. The file was only 600 KB. Nobody could say why a small file ate the phone's memory.

This phase answers both. By the end the front wheel has a real tread, an HDR environment lights the metal, and every texture has a known price in memory, so Lena's phone stays cool.

At this station

You will learn

  • Load textures, handle a failed load and set the right colour space
  • Repeat, move and rotate a texture, and keep it sharp at a distance
  • Say what each PBR map does, and light metal with an HDR environment
  • Work out a texture's GPU memory and free it with dispose()

You write code in

In your lumen-3d project (npm run dev) and in the editor on this page. This phase uses image files from /data/3d/ on this site: copy the ones the build lists into public/data/3d/ of your project.

Files you touch

  • src/objects/bike.js
  • src/world/scene.js
  • src/main.js
Start with 6.1

Work order · 7 steps

  1. 6.1Loading TexturesA texture is a picture the GPU reads. TextureLoader fetches it, but the picture arrives later, it can fail, and a colour picture needs one extra line (colorSpace) or it looks washed out. 20 min 3 live scenes
  2. 6.2UV Wrapping, Repeat and OffsetUV coordinates say which point of the picture lands on which point of the shape. wrapS, wrapT, repeat, offset, rotation and center decide what happens outside 0 to 1 and how the picture is stretched, tiled and moved. 19 min 2 live scenes
  3. 6.3Filtering and MipmapsA screen pixel rarely covers exactly one texel. Filtering decides how texels are blended when the picture is magnified or shrunk. Mipmaps and anisotropy keep a far floor from shimmering or turning to mush. 20 min 2 live scenes
  4. 6.4PBR Texture MapsA material's numbers (colour, roughness, metalness) can each be replaced by a picture. Each map is a different kind of data: colour in sRGB, everything else in plain numbers. A normal map changes how light bounces without changing the shape. 19 min 2 live scenes
  5. 6.5Environment Maps and HDRShiny metal shows its surroundings, not the light. An environment map is a picture of the surroundings, turned by PMREMGenerator into light and reflections. Without one, chrome is black. 21 min 3 live scenes
  6. 6.6Texture MemoryA texture costs width × height × 4 bytes on the GPU, plus a third for mipmaps, whatever its file size. renderer.info.memory.textures counts them, and dispose() frees them. 19 min 2 live scenes
  7. 6.7Build: The Front WheelbuildAdd the front wheel to the bike: a tyre with a real tread (a colour map and a normal map, tiled 30 times round), a rim, a hub and spokes. Then give the showroom a studio environment so the metal shines. 24 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 washed-out photoThe plane photo shows a concrete photo that looks pale and flat. Fix it with one line, so three.js reads the picture as the sRGB colours it holds.BeginnerQC-02Chrome that reflectsThe ball chrome has metalness: 1 and is black with a single highlight. Give the scene an environment so the ball reflects a room.IntermediateQC-03Free the texturesThe card gets a new texture 20 times, as if the user picked 20 colours. The status bar shows 21 textures in memory and rising. Free each old texture when it is replaced.IntermediateQC-04Build a tyre with a treadBuild a torus named tyre (radius 0.33, tube 0.022) with the rubber colour map and normal map from /data/3d/textures/.Intermediate