Webgl - can you write into arbitrary locations of a texture inside the fragment shader?

Question

I was thinking of recreating this ant colony simulation using webgl.

I was planning of storing the state(x,y,direction) of the all ant agents inside a single texture using its rgba channels. During a draw call, each pixel of this texture would be read, and based on the pixel's values, certain positions in another texture would be written into.

Is this any way to do this using webgl? Preferably I would like not to use gl.readPixel and keep everything running the simulation on the gpu.

Answer 1

You can use point splatting:

1. bind your data texture as a sampler
2. render as many points as you have pixels in your texture using e.g. gl.drawArrays(gl.POINTS,0,antDataTexture.width*antDataTexture.height)

In the vertex shader:

3. set gl_PointSize to the size of the sprite you want to render(or 1 if you want to write a single pixel of data)
4. determine gl_Position by reading the texture in the vertex shader by either using
   • the vertex id (readily available in webgl 2)
   • precomputed coordinates

In the fragment shader:

5. Sample your sprite using gl_PointCoord or put whatever data you like

Finally

6. profit by putting your ant kingdom to work ;)

That being said for the simulation portion itself you wouldn't need to write to arbitrary positions, you can just ping-pong between two data texture, only for output you'd want to render the things(ants in this case) where they actually are.