When the scene size is large, the light ripples

Questions
1

image
image.jpg1259Ă—1237 92.5 KB

When I made the skybox bigger, the light rippled, can I avoid this?

    camera.useAutoRotationBehavior = true;
    camera.autoRotationBehavior.idleRotationSpeed;
    camera.lowerRadiusLimit = 15;
    camera.upperRadiusLimit = 8000;

    camera.alpha = 0.8;

and

    var helper = scene.createDefaultEnvironment({
        skyboxSize: 1500,
        groundShadowLevel: 0.5,
    });

If I use millimeters as a unit, can I still guarantee that the lighting is rendered correctly?

How to set it up?

2

What do you mean by “ripple”? Not sure to understand what is wrong in your image

3

Hi DK and ChenX.

I see some circular ripple rings (like when tossing pebble into pond). Ya might need to go to big-view. It sort-of looks like age rings on a crosscut tree stump. Gray-scales vary inconsistently as distance from light-center… increases.

Hey ChenX - what browser and computer are you using? I’m using Firefox 60.7.0 esr on Dell Inspiron Desktop/Windows 7. Maybe we have broken browsers/gfx chips. :open_mouth: I hope not.

If each ring… was consistently a bit darker… in steps… as ring diameters increase… then that would be somewhat understandable. There’s 256 shades of gray, so SOME ring-steps would be normal.

BUT… I am seeing inconsistency… lighter, then darker, then lighter again, then darker again… as the ring diameters increase. Interesting.

ChenX, can you possibly create a playground that shows the same problem? If so, THEN we can view it with many browser types and device types… and see if we can locate problem area. (Wingnut washes his Dell desktop to make sure it is ready for further tests.) :slight_smile:

ChenX… try to test with multiple browsers and multiple devices… at your house, too. Try. Report what you discover, please. Thx!

4

https://www.babylonjs-playground.com/#4VRCU3

My device seems to have the same problem in win10, chrome

5

nod, thx. I adjusted playground… changed to simple hemi-light aiming straight-up… removed some shadow stuff, removed some camera stuff, and did some little camera.radius animating to make rings move. https://www.babylonjs-playground.com/#4VRCU3#2

Nothing learned here, yet. Same symptom in IE, for me. No other devices handy.

This COULD BE normal for webGL… not sure.

Hey forum users with unusual browsers and devices: Do you see the ripple rings? Reports welcome, thx.

6

thx.
If can’t solve this problem, can’t use a large size scene.

7

Hey if I am seeing this properly (i don’t see rings :frowning: )

adjusting nearClipPlane (minZ, line 23) seems to solves this if I am not mistaken. I supposed it has something to do with the clipping of the camera, but to be honest I’ve expected maxZ (FarClipPlane) to be a solution, and I cannot explain why minZ worked instead. But I hope this helps your issue

https://www.babylonjs-playground.com/#4VRCU3#6

8

Oh I see rings. If that’s the issue, my solution is useless :smiley:

9

Thank you for your attempt. It seems that the result is the same on my computer.

10

This is “expected”. We call that the banding effect and it comes from float32 precision issues when computing lighting.

We have some noise effects in place for backgroundMaterial to get rid of that (I should say: to reduce it):
https://www.babylonjs-playground.com/#4VRCU3#7

(check lines #56 and #57)

1 Like
11

Thank you, this effect doesn’t look much better.

Does this mean that we want to avoid large size scenes?

12

Yeah as a rule of thumb, this is a good idea as you will also face depth fighting issues

1 Like
13

This is a question of choice.

Is this problem solved in WebGPU?

I have set a global tolerance value in the design of the CAD program, or some geometry libraries, such as 1e-6. When using larger size units, this tolerance will cause some problems (I think).
But this can’t be solved.

Accept it for the time being.

14

WebGPU will still be limited to 32 bits floats for rendering so ultimately no, it will not help for that issue

1 Like
15

thx,I got it.

1 Like