Get rendered screen color value?

Hello,
I am working on architectural visualization project.

To make scene exposure adaptable, my code lerps scene exposure whenever the player enters/leaves the building. New exposure value is set by checking player collision with the building shaped volume.

Now I am wondering is there any method to get value of rendered scene color, maybe average of whole screen, or maybe center point of the screen. I think I could make scene exposure more adaptable with this value.

Hi @KyungseokMIN,

You are thinking in the right direction on how eye adaptable exposure works, with the only difference it would be too slow to do that in the CPU/JavaScript side. You will need to read the framebuffer pixels in JS (use the WebGL readPixels method), average them and adapt the scene exposure using that.

Normally graphics engine use a secondary post effect pass where they render a luminosity (grayscale) pass, using a lower mipmap that gives you a nice blurred brightness map of the active viewport. The pixel value at the center is usually the exposure factor you are looking for.

As I said you can’t read that from the JavaScript side, since it’s too slow. So instead that map is being added to the active rendering context and it’s being made available to all shaders as a global uniform. From there you can multiple your active scene exposure with that brightness value.

Some graphics engines take it a step further and add a slightly delay or even a histogram to make the exposure transition simulate the human eye.

This Unreal Engine doc page explains it nicely:

Here is a PlayCanvas sample that has a partially working version of eye adaptation (code is deprecated and not working, so I can’t share):

1 Like