11 GPU quirks

No printf: debug with colour

Output an intermediate value as colour. Careful: negatives, values above 1 and NaN all “lie” to you.

Value to show

Display

Runs once per pixelDrag numbers, or edit the code

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float d = length(p) - 0.3;       // negative inside the circle
  float value = d;
  vec3 color = vec3(value);                  // negatives are clamped to 0 (black)
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float d = length(p) - 0.3;       // negative inside the circle
  float value = d;
  vec3 color = vec3(value);                  // negatives are clamped to 0 (black)
  gl_FragColor = vec4(color, 1.0);
}

JS sidegl.uniform2f(uResolution, …, …)

Shaders have no printf: output the value as colour. Negatives and values above 1 get clamped, and what NaN looks like depends on the device.

Try it

Look at d with “Raw output”: why is the inside of the circle all black?
Switch to “Out-of-range marks”: blue is negative
Pick log(d) and see where NaN appears