How to visualize a two-dimensional array of zeros and ones using a shader.

Question

Good day, dear colleagues.
Please help me with solving one trivial problem.
There is a two-dimensional array of a certain size, filled randomly with zeros and ones. Assume that the size of the array is 1280 by 720 cells. And the screen/window size is the same.
It is required to draw each cell (number) from this array in a certain color (0 - white, 1 - black).
I know how to do this using a loop and drawRect; I know that it is possible to set each pixel of an Image in a loop, put an Image in a texture and draw - but these solutions are slow.
Therefore, I would like to find out how this can be done using a shader.
I understand the basic principles of shaders. However, I could not figure out how to get the coordinates of the current pixel of the screen in the shader program and get the value of the corresponding cell from the array from the position of this pixel (index the array) - this is the only moment that is incomprehensible to me.
I will be very grateful for your help.

Szeged

Answer 1

Populate the image with pixels and pass it to the shader as a texture. Then draw a sprite using that shader.

Cb

Answer 2

How often does the array change? If it's just once (like you load it from a file at launch) then it makes sense to just create the texture in GDScript using set pixel. This is slow to do every frame, but it's fine if it's just once in a while. Doing it in real time in a shader is difficult. You can pass arrays into shaders but this is mostly for small amounts of data, like a color or a few position vectors. I don't think you can make uniforms with millions of values. So the only way to get it into a shader will be with a texture, meaning you need to create the texture on the CPU with set pixel.

Metalinguistic

Answer 3

It'd probably be best to not use an array at all and instead maintain your data directly in the image. When there is a change, you can update the texture using ImageTexture::update(). This will probably be fast enough even on frame-by-frame basis with modern hardware. The thing that's most likely to cause a bottleneck is iterating through the whole image/array on the CPU side every frame. You should avoid doing that.

The main deciding factor in how exactly to approach and optimize this is how often and how many pixels you need to update. Since you haven't shared that it's hard to give more specific advice.

Cb

Answer 4

The method of coloring the image texture pixels and rendering it using a shader is the fastest method of two, that I mentioned.
I'm working on a project close to a cellular automaton. The state of the two-dimensional field changes at each iteration and it is necessary to draw the field as quickly as possible. Thanks to you, I realized how to optimize this process.
Thank you.

Szeged

Answer 5

Well, if it's a simple simulation (like Conway's Game of Life) you could even code the whole thing on the GPU in a shader.

You'd just need to use two Viewports so you could have a ping-pong buffer, since you can't read from other pixel positions directly on the same image.

Metalinguistic