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
Ejercicio
Arrastra los números subrayados a izquierda y derechaArrastra los números o edita el código
void main() { vec3 color = vec3(, , ); gl_FragColor = vec4(color, );}
- Decimales RGBA
- profundidad / mezcla
- búfer de color
- 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.
Lado JS
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