How to process and update large arrays using webgl?

Question

I have two big ones Uint8Array. Sizes: 1024and2048

I would like to update these arrays in every frame.

An array of length 1024will fit into a 256 vec4 or 16 * 16 image uniform. But I do not think this is the right way to do this.

How to send large arrays from javascript to GLSL?

---

Edit

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

Answer 1

Textures are a good 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 do not need to create an image first, see this answer for more details .

With too many uniforms, you can easily run into problems on some GPUs. See webglstats.com for some typical uniform restrictions, such as MAX_VERTEX_UNIFORM_VECTORS and MAX_FRAGMENT_UNIFORM_VECTORS.