09 Dibujar en varias pasadas
Realimentación: un fotograma alimenta al siguiente
Juego de la vida: cada celda lee sus 8 vecinas del fotograma anterior para decidir si vive. Pulsa y arrastra en el lienzo para dibujar celdas nuevas.
04
0.050.7
Ejercicio
Arrastra los números subrayados a izquierda y derechaArrastra los números o edita el código
// shader de simulación: leer el fotograma anterior, tPrevfloat n = 0.0;for (int y = -1; y <= 1; y++) for (int x = -1; x <= 1; x++) if (x != 0 || y != 0) n += texture2D(tPrev, vUv + vec2(x, y) * texel).r;float alive = texture2D(tPrev, vUv).r;float next = (n == 3.0 || (alive > 0.5 && n == 2.0)) ? 1.0 : 0.0;// JS: intercambiar las dos texturas en cada paso (x pasos/fotograma)[read, write] = [write, read];
ping-pongLeer A, escribir B; en el siguiente fotograma, leer B y escribir A. Una textura no puede leerse y escribirse a la vez.Lado JS
Un shader de fragmentos no puede leer los píxeles que está escribiendo. Guarda el fotograma anterior en una textura y léelo en el siguiente: dos texturas que se intercambian (ping-pong).
Pruébalo
- Pulsa y arrastra en el lienzo para dibujar celdas nuevas
- Pon la velocidad en 0 para pausar la simulación
- Sube la densidad inicial y observa el patrón cuando se estabilice