All examples · Shaders

Material maps

What this example shows

A model's material can carry up to four extra pictures besides the one it is covered with: its maps, each with a name. Its shader reads one with sampleMap_<name>(uv), wherever it likes. That is how the last consoles of the era combined several textures in one pass, and it is what each of these four needs:

  • Chrome reads an env map of the sky and the ground where the surface would reflect them; envUv(ctx) gives that place.
  • Dissolve burns bricks away through a separate noise map, so the colour stays the brick.
  • Detail repeats a fine map eight times over a coarse picture, so it does not go blurry up close.
  • Water reads its tiles through a moving ripple map that shifts where each pixel looks.

The four effects are built with the shader composer (shaders.ts): composerMapSample('noise', uv) reads a map and composerEnvUv() gives the reflection's place, and compileShader writes each one in both shader languages. Every picture is painted in code (textures.ts). A map the material does not carry reads as white, with a warning in the console.

Starting