00 Prólogo: cómo pinta una GPU
¿Dónde aparece el resultado de un shader?
A la izquierda hay un canvas HTML real; la GPU pinta sus colores.
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, );}
- JS envía datos
- La GPU calcula colores
- El lienzo los muestra
canvasUna superficie de dibujo de mapa de bits en la páginaWebGLLa API con la que JS entrega datos y shaders a la GPUshaderUn pequeño programa escrito en GLSL que se ejecuta en la GPUArrastra los números a izquierda y derecha en el propio código; el cuarto es la opacidad. El código de todas las lecciones funciona así; también puedes escribir directamente.
Lado JS
Un canvas es una superficie de dibujo en la página; WebGL permite que la GPU escriba colores en ella.
Pruébalo
- Haz que el lienzo sea rojo puro
- ¿Qué color obtienes cuando los tres números son iguales?