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

问题描述

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

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

有没有办法使用 webgl 做到这一点？最好我不想使用 gl.readPixel 并让一切都在 gpu 上运行模拟。

解决方法

您可以使用点飞溅：

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

在顶点着色器中：

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

在片段着色器中：

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

终于

6. 通过让您的蚂蚁王国工作来获利 ;)

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