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

Question

我正在考虑使用 webgl重新创建这个蚁群模拟。

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

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

Answer 1

您可以使用点飞溅：

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

在顶点着色器中：

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

在片段着色器中：

5. gl_PointCoord使用或放置您喜欢的任何数据对您的精灵进行采样

最后

6. 通过让你的蚂蚁王国工作来获利；）

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