10 Otras salidas de fragmento

MRT: un dibujo, dos imágenes

Un shader de fragmentos con dos salidas: el color va a la textura 0; las normales, a la 1. Una segunda pasada las combina para iluminar.

Mostrar

Dirección de la luz0.60

-3.143.14

Se ejecuta una vez por píxelArrastra los números o edita el código

in vec3 vNormal;
in vec3 vWorld;

// dos salidas: location elige la textura del destino de renderizado
layout(location = 0) out vec4 gColor;
layout(location = 1) out vec4 gNormal;

void main() {
  vec3 coral = vec3(0.96, 0.43, 0.30);
  vec3 mint = vec3(0.48, 0.83, 0.69);
  float stripes = step(0.5, fract(vWorld.y * 3.0));
  gColor = vec4(mix(coral, mint, stripes), 1.0);           // textura 0: color de superficie
  gNormal = vec4(normalize(vNormal) * 0.5 + 0.5, 1.0);     // textura 1: normal codificada como color
}

in vec3 vNormal;
in vec3 vWorld;

// dos salidas: location elige la textura del destino de renderizado
layout(location = 0) out vec4 gColor;
layout(location = 1) out vec4 gNormal;

void main() {
  vec3 coral = vec3(0.96, 0.43, 0.30);
  vec3 mint = vec3(0.48, 0.83, 0.69);
  float stripes = step(0.5, fract(vWorld.y * 3.0));
  gColor = vec4(mix(coral, mint, stripes), 1.0);           // textura 0: color de superficie
  gNormal = vec4(normalize(vNormal) * 0.5 + 0.5, 1.0);     // textura 1: normal codificada como color
}

Lado JS

En GLSL ES 3.00 las salidas son variables out que tú declaras. layout(location = N) permite escribir varias texturas a la vez en un solo dibujo: es la base del renderizado diferido.

Pruébalo

Elige «Iluminar con ambas imágenes» y gira la luz: esta pasada solo lee las dos imágenes, sin dibujar el modelo
Haz que gNormal devuelva vWorld * 0.5 + 0.5 y observa en qué se convierte la imagen 1
Borra la línea de gNormal y observa la imagen 1