Shader Learn

00 Prólogo: cómo pinta una GPU

Cuatro decimales se convierten en un color

Salida del fragmento → mezcla → búfer de color → el navegador muestra el lienzo. Solo cuenta la última escritura.

01
01
01
01
Explicación

Arrastra los números subrayados a izquierda y derecha

void main() {  vec3 color = vec3(, , );  gl_FragColor = vec4(color, );}
  1. Decimales RGBA
  2. profundidad / mezcla
  3. búfer de color
  4. lienzo
Bytes de 8 bits escritos en el búfer[245, 110, 77, 255]

gl_FragColor es una salida: asignarle un valor no termina main. El valor que tenga cuando main llegue a } se envía al búfer.

Un fragmento devuelve cuatro números entre 0 y 1; el búfer de color los guarda como bytes de 0 a 255. Solo cuenta la última escritura.

Pruébalo

  • Pon R en 1 y observa cómo el byte pasa a 255
  • Pon A en 0.5: el cuarto byte pasa a 128 y se ve el fondo detrás
  • Activa «Escribir el color otra vez»: la segunda escritura sustituye a la primera