11 GPU quirks

Common operations at a glance

A grey gradient is the input. Switch operations and see how each changes it.

Operation

Parameter2.00

0.15

Runs once per pixelDrag numbers, or edit the code

void main() {
  float x = vUv.x;
  float result = pow(x, 2.000);
  float curve = 1.0 - smoothstep(0.0, 0.012, abs(vUv.y - result));
  vec3 color = mix(vec3(result), vec3(0.96, 0.43, 0.30), curve);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  float x = vUv.x;
  float result = pow(x, 2.000);
  float curve = 1.0 - smoothstep(0.0, 0.012, abs(vUv.y - result));
  vec3 color = mix(vec3(result), vec3(0.96, 0.43, 0.30), curve);
  gl_FragColor = vec4(color, 1.0);
}

JS side

abs, clamp, pow, floor, min, max: bend a straight 0–1 line into the shape you need.

Try it

Switch through the operations
Open the pixel debugger and read x and result