Is there any way to make chromatic aberration display consistently?

Questions
1

Another day, another question for the Babylon.js forum :slight_smile:

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?

2

I am guessing you could try to scale the direction property to ensure it is adapting to the screen properties ?

Looking at the shader the screen dependant computation is here:

image
image1537×76 18.6 KB

Where direction of effects fits with the direction parameter.

If it works feel free to ping me back and we could introduce it in standard as a new mode ???

3

I hope I understood what you mean. However, setting

    pipeline.chromaticAberration.direction = new BABYLON.Vector2(0., 0.)

still results in different sizes based on canvas size:

Small

image
image1270×1139 66 KB

Large

image
image1954×1168 87.9 KB

4

0 is unfortunately a special case :slight_smile:

I was more thinking lets say you want 0.5 for 1024 and both height and width.

You could compute a new direction when the size changes like 1 for 2048 and 0.25 for 512. I think this might do the trick

5

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.

6

Let s add @Evgeni_Popov in case he has an idea :slight_smile:

1 Like
7

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:

https://playground.babylonjs.com/#RMZKB5#4

1 Like
8

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?

9

I am not sure as they are supposed to be fixed parameters from the constructor and I am afraid of creating some back compat issues :frowning:

10

Waiting for @Evgeni_Popov or @Deltakosh then :slight_smile:

11

I think @Deltakosh will have to arbitrate this.

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.

https://playground.babylonjs.com/#S8H4AA#1

12

We could also make screen size dynamic if the parameters are left null ??? would that work in this case ?