Webgl - 你可以在片段着色器中写入纹理的任意位置吗？

Question

我正在考虑使用 webgl 重新创建 this ant colony simulation。

我计划使用其 rgba 通道将所有蚂蚁代理的状态（x，y，方向）存储在单个纹理中。在绘制调用期间，将读取此纹理的每个像素，并根据像素的值写入另一个纹理中的某些位置。

这是使用 webgl 的任何方法吗？最好我不想使用 gl.readPixel 并让所有东西都在 gpu 上运行模拟。

Answer 1

您可以使用点飞溅：

1. 将您的数据纹理绑定为采样器
2. 渲染与纹理中的像素一样多的点，例如使用gl.drawArrays(gl.POINTS,0,antDataTexture.width*antDataTexture.height)

在顶点着色器中：

1. 将 gl_PointSize 设置为您要渲染的精灵的大小（如果您要写入单个像素数据，则设置为 1）
2. 通过读取顶点着色器中的纹理来确定gl_Position
   • 顶点 ID（在 webgl 2 中可用）
   • 预计算坐标

在片段着色器中：

5. 使用gl_PointCoord 对您的精灵进行采样，或者输入您喜欢的任何数据

终于

6. 通过运行您的蚂蚁王国来获利 ;)

对于模拟部分本身，您不需要写入任意位置，您可以在两个数据纹理之间进行乒乓操作，仅用于输出您想要渲染的东西（在这种情况下是蚂蚁）它们实际上在哪里。