07 Surfaces and light

Normals: which way a surface faces

Encode the surface’s facing as an RGB colour.

Model rotation0.50

-3.143.14

Runs once per pixelDrag numbers, or edit the code

void main() {
  vec3 normal = normalize(vNormal);
  vec3 color = normal * 0.5 + 0.5;
  if (uRenderPass > 0.5) color = vec3(0.18, 0.30, 0.34);
  if (uRenderPass > 1.5) {
    if (length(gl_PointCoord - 0.5) > 0.5) discard;
    color = mix(vec3(0.63, 0.86, 0.76), vec3(1.0, 0.65, 0.32), vSelected);
  }
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec3 normal = normalize(vNormal);
  vec3 color = normal * 0.5 + 0.5;
  if (uRenderPass > 0.5) color = vec3(0.18, 0.30, 0.34);
  if (uRenderPass > 1.5) {
    if (length(gl_PointCoord - 0.5) > 0.5) discard;
    color = mix(vec3(0.63, 0.86, 0.76), vec3(1.0, 0.65, 0.32), vSelected);
  }
  gl_FragColor = vec4(color, 1.0);
}

JS sidegl.uniformMatrix4fv(uModel, …) // rotation 0.50 / 0.35

A normal is a direction the surface faces, not a position; mapping −1…1 to 0…1 lets you see it as colour.

Try it

Turn the cube: what colour is the face pointing at you?
Delete * 0.5 + 0.5: negative directions turn black