Analyzing image data during postprocess pipeline?

Questions
1

My project involves a custom post-processing pipeline that chains together lots of custom shader post-processes. One of the last steps is a Photoshop-style brightness & contrast shader. Before I run that I’d like to get the pixels from the previous post-process’s render target and analyze those to determine the average, min, and max luminance in the image, to set the best brightness/contrast levels.

Does anyone know the simplest way to read those pixels during the pipeline sequence, and (hopefully) analyze them before the next postprocess starts? It’s been a lot of trial and error but no success yet. I’ve gone down rabbit holes learning about multi render targets, PostProcess.onActivate, PrePassRenderers and so on – but I think I might be overcomplicating things.

I created the following PG example that’s a bit like the custom pipeline (just combined some existing examples): https://playground.babylonjs.com/#QCGFI6#33

Thanks in advance for any ideas!

2

Welcome aboard!

Without using compute shaders (so, WebGPU only), you can read back texture data by calling texture.readPixels, but you will get the result one or several frames later. So, you won’t be able to update the pipeline the frame you issued readPixels, but only when you get the data and have analyzed them.

3

Thanks! This project is focused on still image rendering so waiting a few frames isn’t a problem.

I finally got it working. It reads the pixels after the first full render, and completes the analysis by frame 8 or 9. Then it adjusts brightness and contrast parameters and the final image is ready by the next frame.

1 Like