Shader Learn

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
Explicación

Arrastra los números subrayados a izquierda y derecha

void main() {  vec3 color = vec3(, , );  gl_FragColor = vec4(color, );}
  1. JS envía datos
  2. La GPU calcula colores
  3. El lienzo los muestra
canvasUna superficie de dibujo de mapa de bits en la página
WebGLLa API con la que JS entrega datos y shaders a la GPU
shaderUn pequeño programa escrito en GLSL que se ejecuta en la GPU

Arrastra 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.

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?