Shader Learn

09 多遍渲染

反馈：用上一帧计算下一帧

生命游戏：每个细胞读取上一帧的 8 个邻居，决定这一帧的生死。按住画布画出新细胞。

(0.50, 0.50)
04
0.050.7
讲解

带下划线的数字可以左右拖动

// 模拟 shader：读上一帧 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：每步交换两张纹理（×  步/帧）[read, write] = [write, read];
ping-pong读 A 写 B，下一帧读 B 写 A。同一张纹理不能同时读写。

片元 shader 不能读自己刚写的像素。把上一帧写进纹理，下一帧再读——两张纹理来回交换（ping-pong）。

试一试

  • 按住画布画出新细胞
  • 速度调到 0，暂停演化
  • 加大初始密度，再看稳定后的图案