How to process and update large arrays using webgl?

Question

I have two large Uint8Array. The sizes are: 1024 and 2048

I would like to update these arrays in each frame.

The 1024 length array would fit into 256 vec4 uniforms, or a 16*16 image. But I don't think, it is the right way to do it.

How to send large arrays from javascript to GLSL?

---

Edit

My problem with textures is, that to update the image in each frame, I have to copy the data into an ImageData object. Then I have to draw the imageData onto a canvas. And after that, I have to get the dataURL of the canvas, and change the src attribute of the image

Answer 1

Textures are the appropriate way to work with large datasets in WebGL. You can store your data in a 1D or 2D texture and then use it in your fragment shader.

You can load data into your texture directly from a typed array, you don't need to create an image first, see this answer for more details.

With too many uniforms you can easily run into issues on some GPUs. See webglstats.com for some typical limits on the number of uniforms, specifically MAX_VERTEX_UNIFORM_VECTORS and MAX_FRAGMENT_UNIFORM_VECTORS.