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. 通过让你的蚂蚁王国工作来获利；(

也就是说，对于模拟部分本身，你不需要写入任意位置，你只需要在两个数据纹理之间来回切换，只有在输出时，你才会想把东西(在这种情况下是蚂蚁(渲染到它们实际所在的位置。