Assigning a material to be transparent with needDepthPrePass causes a black flash

Bugs
1

Assigning a material to have .visibility of less than 1 and .needDepthPrePass = true seems to cause a black flash on Chromium browsers. This happens on Chrome v103 and Edge v103, but doesn’t seem to happen on Firefox v102.

Demo: Babylon.js Playground
Expected result: model turns transparent without flashing black.
Actual result: model flashes black for a few frames when it is first changed.

Note that this issue doesn’t seem to occur if .visibility is set to a value less than 1 in advance, or if needDepthPrePass isn’t assigned.

2

This is due to parallel shader compilation taking a bit of time, you could disable it like this: https://playground.babylonjs.com/#I3AHLA#1

1 Like