11 Peculiaridades de la GPU

Precisión: un float no es infinito

Suma un número grande a la coordenada y toma la parte fraccionaria. Matemáticamente nada cambia; en la GPU sí.

Sumar 10 elevado a0.00

Precisión

Se ejecuta una vez por píxelArrastra los números o edita el código

void main() {
  float big = pow(10.0, 0.000);      // 1, 10, 100 ... 10 000 000
  float x = vUv.x * 4.0 + big;             // sumar un número grande
  float saw = fract(x);                    // en teoría: un diente de sierra suave
  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;             // sumar un número grande
  float saw = fract(x);                    // en teoría: un diente de sierra suave
  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);
}

Lado JS

Un float solo tiene unas 7 cifras significativas: suma un número pequeño a uno grande y se pierde la fracción. Cuanto más tiempo está abierta la página, mayor es uTime.

Pruébalo

Pon la magnitud en 6: el diente de sierra se convierte en escalones
En 7 apenas queda degradado
En móviles, mediump suele fallar ya en 3–4