10 Other fragment outputs

MRT: one draw, two images

One fragment shader with two outputs: colour goes to texture 0, normals to texture 1. A second pass combines them for lighting.

Show

Light direction0.60

-3.143.14

Runs once per pixelDrag numbers, or edit the code

in vec3 vNormal;
in vec3 vWorld;

// two outputs: location picks the texture in the render target
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);           // texture 0: surface colour
  gNormal = vec4(normalize(vNormal) * 0.5 + 0.5, 1.0);     // texture 1: normal encoded as colour
}

in vec3 vNormal;
in vec3 vWorld;

// two outputs: location picks the texture in the render target
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);           // texture 0: surface colour
  gNormal = vec4(normalize(vNormal) * 0.5 + 0.5, 1.0);     // texture 1: normal encoded as colour
}

JS side

In GLSL ES 3.00 outputs are out variables you declare. layout(location = N) lets one draw write several textures at once — deferred rendering is built on it.

Try it

Switch to “Light from both images” and turn the light: this pass reads only the two images and never draws the model
Make gNormal output vWorld * 0.5 + 0.5 and see what image 1 becomes
Delete the gNormal line and look at image 1