needDepthPrePass creates flickering in 8.6.2

Bugs
1

There is a lot of flickering on the mesh, whenever “needDepthPrePass” is enabled.

To test, drag https://test-realtime.lindberg.com/Demo/Flicker.babylon into these sandboxes:

8.6.1 - No flicker: Babylon.js Sandbox - View glTF, glb, obj and babylon files

8.6.2 - Flickering: Babylon.js Sandbox - View glTF, glb, obj and babylon files

I can’t reproduce in playground right now, but I’ll continue trying

1 Like
2

I don’t see any flickering in 8.6.2 with this model (tested in Chrome, Edge and Firefox, Windows 11)?

Try closing/restarting your browser, sometimes strange things happen…

3

I also tried in Windows 11, with Edge, and no flickering on my end either.

4

Just tested Windows 11 and so there was no flickering for me either, but i can still reproduce in both Safari and Chrome on macOS

5

Finally able to reproduce in a PG:

Also confirmed on a co-workers mac

For some wierd reason this only happens:

  • on macOS (Safari and Chrome)
  • when scene.useRightHandedSystem == true
  • when material.needDepthPrePass == true
  • when mesh.position != new Vector3(0, 0, 0)

8.6.1 - No flicker: Babylon.js Playground
8.6.2 - Flickering: Babylon.js Playground

1 Like
6

I don’t see any flickering on my MacBook Air M3.

macOS 15.4.1
Safari 18.4
Chrome 136.0.7103.93 (arm64)

7

Interesting - I’m also on : 15.4.1, 18.4 and 136.0.7103.114

I can also reproduce on iOS 18.4.1

8

Did you try zooming in, like in the videos?

I have reproduced it on my iPhone and 3 different Macs now

9

I can repro on M4/Chrome Version 136.0.7103.114 (Official Build) (arm64)/BJS 8.8.5

Only WebGL is affected.

1 Like
10

BJS 7.54.2 works fine.

Safari, like Chrome, has issues as well with the newest BJS version.

12

Can you check that this PG works for you?

It works for me on my iPhone SE, unlike https://playground.babylonjs.com/#RNWZOX#44.

I will create a PR if that is ok.

1 Like
14

Works for me :wink: Tested both in Chrome and Safari.

15

@Evgeni_Popov
Wait, wait! Something strange just happened. I tried opening the PG a second time, and it started flickering again… What the heck? Let me dig into this.

EDIT – Summary:

Chrome and Brave:

  1. The first run works fine.
  2. Refreshing the PG causes flickering to start again.
  3. I need to quit the browser(s) and restart them to display the mesh without flickering. Closing the tab doesn’t do the job.

Safari:
Works fine, even with multiple refreshes.

Quite interesting…

1 Like
16

Ah! I didn’t realize zooming in would repro this. I see the flickering on my mac now, too, when zooming in.

1 Like
17

Same for me - Fixed in Safari and the first time i launch it in Chrome, but it happens afterwards in Chrome

1 Like
18

Very strange…

At least it improves things overall, so here’s the PR:

https://github.com/BabylonJS/Babylon.js/pull/16668

1 Like
19

shader voodoo :smiley:

1 Like
20

The fix is scary AF :slight_smile: Can you open a bug on webkit to be sure it gets handled one day ?

2 Likes