11 Peculiaridades de la GPU

Sin printf: depurar con color

Muestra un valor intermedio como color. Cuidado: los negativos, los valores mayores que 1 y NaN te pueden engañar.

Valor que mostrar

Visualización

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

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float d = length(p) - 0.3;       // negativo dentro del círculo
  float value = d;
  vec3 color = vec3(value);                  // los negativos se limitan a 0 (negro)
  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;       // negativo dentro del círculo
  float value = d;
  vec3 color = vec3(value);                  // los negativos se limitan a 0 (negro)
  gl_FragColor = vec4(color, 1.0);
}

Lado JSgl.uniform2f(uResolution, …, …)

Los shaders no tienen printf: muestra el valor como color. Los negativos y los valores mayores que 1 se limitan al rango, y el aspecto de NaN depende del dispositivo.

Pruébalo

Mira d con «Salida directa»: ¿por qué el interior del círculo es negro?
Elige «Marcas fuera de rango»: el azul es negativo
Elige log(d) y observa dónde aparece NaN