How to speed up readPixelsAsync?

Questions
1

Hello,

I want to read pixels in each frame and the original API readPixels is very slow. I find some similar questions like this and this. But these two questions seem have no good approach to read pixels from texture quickly.

Here is my playground: https://playground.babylonjs.com/#ZS6ZGL#10 . It takes about 10~20 ms to read 4x4 pixels. I wonder if there is any approach to speed up read pixels in nowadays.

Thanks!

2

Unfortunately we are using barebone webgl here and I have no other idea on how to boost that process. Data need to go from GPU memory to CPU memory and it is a long trip

Other question maybe: can you avoid that read? maybe do what you need with a shader?

3

Thanks, here is another strange thing. In this playground: https://playground.babylonjs.com/#ZS6ZGL#22 readPixels function seems cost fewer millisecond compare with the old PG. The only different in this PG is a video Texture is used. Why does this happen？

image
image561×1789 101 KB

4

It is unfortunately all Angle and WebGL magic we do not have any control on at the Engine level :frowning: but yes it is pretty strange indeed.

1 Like
5

Anyone reading this nowadays:

The execution time difference comes from the fact, that async reads report larger execution times but they are not stalling the GPU pipeline! The read result might come back after a few other frames rendered. Basically you are measuring not just the pixel reading process (which is quick) but also every other command the GPU performs.

The sync read will stop GPU execution until the pixels are read.

1 Like