Work on slow WebGL readings

Question

I am trying to use WebGL to speed up calculations when modeling a small quantum circuit, for example, what the Quantum Computing Playground does . The problem I am facing is that readPixels takes ~ 10 ms, but I want to call it several times per frame during animations to get information from gpu-land and on javascript-land.

As an example, here is my specific use case. The following circuit animation was created by computing things about the state between each gate column to show a graphical display of the in-being-on probability inline-with-wire:

As I am calculating these things now, I will need to call readPixels eight times for the above scheme (once after each gate column). This waaaaay is too slow at the moment, easily taking 50 ms when I profile it (bleh).

What are the tricks to speed up readPixels in this case?

• Are there any configuration options that significantly affect the reading speed of Pixels? (e.g. pixel format, size that does not have a depth buffer).
• Should I try to make readPixel calls, will everything happen right after all the rendering calls have been made (maybe this will allow some pipelining)?
• Should I try to combine all the textures I read into one megatag and sort the contents after one big read?
• Should I use a different method to output information from textures?
• Should I avoid getting information at all, and do all the gpu-side layout and rendering (urgh ...)?

Answer 1

Should I try to make all readPixel calls happen immediately after the render calls have been made (perhaps this allows pipelining)?

Yes Yes Yes. readPixels is basically a blocking operation, stopping the pipeline and always killing your performance wherever it happens , because it sends a request for data to the GPU and then waits for an answer that you don’t need to draw ordinary calls.

Make readPixels as small as possible (use one combined buffer to read). Do it as long as possible. Everything else hardly matters.

Should I generally avoid getting information and do all the gpu-side layout and rendering (urgh ...)?

This will give you incredibly better performance.

If your graphics are similar to the one above, you don’t need to do any “layout” at all (which is good, because it would be very inconvenient to implement) - everything except the text is a kind of color or border animation that can be easily performed in the shader, and the entire layout can only be a static vertex buffer (each vertex has attributes that indicate which simulation texel state it should depend on).

The text will be more tedious only because you need to load all the numbers into the texture for use as a sprite and search in it, but this is a standard technique. (Oh, and divide / modulo to get the numbers.)

Answer 2

I don’t know enough about your use case, but I’m just guessing: why do you need to read pixels at all?

First, you do not need to draw text or your static parts of the diagram in WebGL. Place another canvas or svg or img on top of the WebGL canvas, set css so that they overlap. Let the browser unite them. Then you do not have to do it.

Secondly, suppose you have a texture with your calculated results. Can't you just create some geometry that matches the places in your diagram that should have colors and use texture coordinates to find results from the right places in the results texture? Then you do not need to call readPixels at all. This shader can use ramp texture search or any other technique to convert the results to other colors to obscure the animated parts of your chart.

If you want to draw numbers based on the result, you can use a technique such that you make a shader when referencing the result, the shader to look at the value of the result, and then index glyphs from another texture based on this.

Is there any reason?