Todos los ejemplos · Shaders

Mapas de material

Qué enseña este ejemplo

El material de un modelo puede llevar hasta cuatro imágenes extra además de la que lo cubre: sus maps, cada una con un nombre. Su shader lee una con sampleMap_<nombre>(uv), donde quiera. Así combinaban varias texturas en una pasada las últimas consolas de la época, y es lo que necesita cada uno de estos cuatro:

  • Cromo lee un mapa env del cielo y el suelo allí donde la superficie los reflejaría; envUv(ctx) da ese sitio.
  • Disolución quema los ladrillos a través de un mapa noise aparte, así que el color sigue siendo el del ladrillo.
  • Detalle repite un mapa fino ocho veces sobre una imagen gruesa, para que de cerca no se vea borrosa.
  • Agua lee sus azulejos a través de un mapa ripple que se mueve y desplaza dónde mira cada píxel.

Los cuatro efectos se construyen con el compositor de shaders (shaders.ts): composerMapSample('noise', uv) lee un mapa y composerEnvUv() da el sitio del reflejo, y compileShader escribe cada uno en los dos lenguajes de shader. Todas las imágenes se pintan en código (textures.ts). Un mapa que el material no lleva se lee blanco, con un aviso en la consola.

Arrancando