Another day, another question for the Babylon.js forum
I need to put a chromatic aberration effect on a scene. However, I need that effect to be consistent, i.e. produce more or less same image in different situations (different browsers, display sizes, etc.). Currently, the effect is deeply dependant on display resolution, hardware scaling factor and also window sizes. If you look at Babylon.js Playground and resize either the code frame or the browser window, you’ll see how the color channels change their distance to each other.
Is there any way to prevent this behavior or make it more consistent?
I can more or less stay with the current default of 0.707, there is nothing wrong with it as it is. The trick is to find a scaling factor that adjusts the direction size based on hardware scaling and pixel dimensions. I’ve tried multiplying the aberration distance by the hardware scaling factor, but apparently there is one or more additional factors at play here. There should be some formula, but so far I’ve been unable to find it and random experimentation only gets you so far.
Actually modifying the screen size to ensure it is always the actual screen size looks keeping it fully identical in shape independently of screen size:
This seems to work. However, doesn’t this mean that screen_width and screen_height don’t get updated when canvas size changes, which is a problem that should be solved somewhere in the library code?
To avoid a breaking change, we could update the doc to indicate that the user should update the screen_width and screen_height uniform parameters if the screen sizes change.
Regarding the hardware scaling level, you can take it into account by dividing the direction by the value passed to setHardwareScalingLevel.