10 片元的其他输出

MRT：一次绘制，写出两张图

同一个片元 shader 有两个输出：颜色写进第 0 张纹理，法线写进第 1 张。第二遍再把它们合起来打光。

显示

灯光方向0.60

-3.143.14

每个像素运行一次拖动数字，或直接改代码

in vec3 vNormal;
in vec3 vWorld;

// 两个输出：location 对应渲染目标里的第几张纹理
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);           // 第 0 张：表面颜色
  gNormal = vec4(normalize(vNormal) * 0.5 + 0.5, 1.0);     // 第 1 张：法线编码成颜色
}

in vec3 vNormal;
in vec3 vWorld;

// 两个输出：location 对应渲染目标里的第几张纹理
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);           // 第 0 张：表面颜色
  gNormal = vec4(normalize(vNormal) * 0.5 + 0.5, 1.0);     // 第 1 张：法线编码成颜色
}

JS 这一侧

GLSL ES 3.00 里输出是自己声明的 out 变量。layout(location = N) 让一次绘制同时写出好几张纹理，延迟渲染就靠它。

试一试

切到「合成光照」，转动灯光：这一步只读两张图，不再画模型
把 gNormal 改成输出 vWorld * 0.5 + 0.5，看第 1 张图变成什么
在代码里删掉 gNormal 那一行，看第 1 张图