11 GPU quirks

Precision: a float is not infinite

Add a big number to the coordinate, then take the fraction. Mathematically nothing changes; on the GPU it does.

Add 10 to the power0.00

Precision

Runs once per pixelDrag numbers, or edit the code

void main() {
  float big = pow(10.0, 0.000);      // 1, 10, 100 ... 10 000 000
  float x = vUv.x * 4.0 + big;             // add a big number
  float saw = fract(x);                    // in theory: a smooth sawtooth
  float line = 1.0 - smoothstep(0.0, 0.012, abs(vUv.y - saw));
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69) * 0.45, saw);
  color = mix(color, vec3(1.0), line);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  float big = pow(10.0, 0.000);      // 1, 10, 100 ... 10 000 000
  float x = vUv.x * 4.0 + big;             // add a big number
  float saw = fract(x);                    // in theory: a smooth sawtooth
  float line = 1.0 - smoothstep(0.0, 0.012, abs(vUv.y - saw));
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69) * 0.45, saw);
  color = mix(color, vec3(1.0), line);
  gl_FragColor = vec4(color, 1.0);
}

JS side

A float has only about 7 significant digits: add a small number to a big one and the fraction is lost. The longer a page is open, the bigger uTime gets.

Try it

Set the magnitude to 6: the sawtooth turns into steps
At 7 there is almost no gradient left
On phones, mediump often breaks at 3–4 already