07 Surfaces and light

Stylized: banded light and Fresnel rim

The same sphere with a rewritten lighting formula: banded brightness, glowing edges.

Light bands3

BandingOn

Rim exponent3.00

Rim strength0.70

Runs once per pixelDrag numbers, or edit the code

void main() {
  vec3 N = normalize(vNormal);
  vec3 L = normalize(vec3(-0.6, 0.8, 1.0));
  vec3 V = normalize(uCameraPos - vWorld);
  float diffuse = max(dot(N, L), 0.0);
  float toon = ceil(diffuse * 3.000) / 3.000;      // smooth -> banded
  float level = mix(diffuse, toon, 1.000);
  float rim = pow(1.0 - max(dot(N, V), 0.0), 3.000);  // brighter toward the edge
  vec3 color = vec3(0.96, 0.43, 0.30) * (0.2 + 0.8 * level) + vec3(0.55, 0.85, 1.0) * rim * 0.700;
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec3 N = normalize(vNormal);
  vec3 L = normalize(vec3(-0.6, 0.8, 1.0));
  vec3 V = normalize(uCameraPos - vWorld);
  float diffuse = max(dot(N, L), 0.0);
  float toon = ceil(diffuse * 3.000) / 3.000;      // smooth -> banded
  float level = mix(diffuse, toon, 1.000);
  float rim = pow(1.0 - max(dot(N, V), 0.0), 3.000);  // brighter toward the edge
  vec3 color = vec3(0.96, 0.43, 0.30) * (0.2 + 0.8 * level) + vec3(0.55, 0.85, 1.0) * rim * 0.700;
  gl_FragColor = vec4(color, 1.0);
}

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

Stylizing means rewriting the lighting formula: band the brightness for a cartoon look, and use 1 − dot(N, V) for a rim light.

Try it

Set the bands to 2
Increase the rim strength
Turn banding off and compare with smooth lighting