Shader Learn

00 Prólogo: cómo pinta una GPU

Escribirás este planeta tú mismo

Lo dibujan un shader de vértices y uno de fragmentos. Arrastra el lienzo para girarlo.

Arrastra para girar
Explicación

Este curso es para quienes conocen JavaScript o C/C++ pero nunca han escrito un shader. Cada lección muestra una imagen en vivo a la izquierda y el código que la dibuja a la derecha: arrastra cualquier número del código o edita el propio código.

  1. 01Fragmentos y datos
  2. 02Dibujar formas con matemáticas
  3. 03Tiempo, interacción y repetición
  4. 04Texturas y ruido
  5. 05Los datos se convierten en vértices
  6. 06Espacio, cámara y profundidad
  7. 07Superficies y luz
  8. 08Lo que Three.js escribe por ti
  9. 09Dibujar en varias pasadas
  10. 10Otras salidas de fragmento
  11. 11Peculiaridades de la GPU
  12. 12De la imagen a la receta
  13. 13Proyecto final
  14. AApéndice

El curso descompone este planeta: datos → vértices → rasterización → fragmentos → salida. En la última lección lo reescribes tú.

Pruébalo

  • Observa las cumbres y el agua: el sombreado tiene bandas, no un degradado suave
  • Empieza por cualquier capítulo del índice; siempre puedes volver

Hecho por @huozhi