Hello peeps, I’ve got an issue with some run of the mill SSAO implementation on Chromium browsers, but not others.
Here is the playground:
What I have is just your bog standard hemispheric SSAO, and the issue is that it flickers between frames on Chrome (and also Edge which uses Chromium) but not Firefox. If you increase the number of hemisphere depth samples, the flickering increases, but the flickering is always there, even with a low sample count.
I’ve got the depth sampler set to use 32 bit floating point textures. I’ve also tried reducing the camera frustum by a lot, like a nearplane of 5 and a farplane of 10 but it does not help, so I’m not sure it’s about depth precision.
I have tried on two different computers, both with Nvidia dedicated GPUs.
I’m fairly certain this could be something about Babylon.
I hope this is not a known issue, I tried searching here and the Babylonjs Github but could not find anything related
Also thanks to the developers and users for creating and maintaining Babylon! It’s really neat and have a much cooler name than Three, always reminds me of Reggae songs
Flickering does not occur if the mouse hovers the source code instead of the drawing area.
Similarly, if you switch to another tab and come back, there’s no flickering, even if you hover over the drawing area.
Switching to full screen () doesn’t show any flickering either.
Finally, in my tests (Windows 11 + Chrome v108), there were times when there was no flicker at all after a page refresh, meaning that flicker does not occur every time.
Given all of this, I would lean more towards a problem with the browser than with Babylon.js.
Thanks for taking time with testing my case.
This playground is not as flickery as my real use case, which is for my job, and I need to reduce it. Any pointers to what might help with this? Increasing precision (through making the frustum shallower and having 32 bit float textures as depth render target) does not seem to help. I’ve also noticed that if I halt the rendering after one frame, the flickering stops, so it’s not like Chromes DOM stuff is messing with it, it’s something about the WebGL. What is it that occurs when you put it into fullscreen mode and tab into it that might affect this?
Not saying you should go into depth with this, I’m just wondering if you have any ideas on the top of your head?
Should I try to raise this as a bug for the Chrome browser?
For anyone else that hits this issue: it helped to change the near filtering of the depth texture (which you can’t do unless you use the constructor of DepthRenderer and hack it into the scene), anything besides nearest caused the flickering to occur. The downside is that this caused some gnarly splotches to appear (can’t really understand why), but since the result was blurred anyways it looks ok.
Something like this:
this.depthRenderer = new DepthRenderer(scene, textureType, camera, storeNonLinearDepth, Texture.NEAREST_LINEAR);
if (!scene._depthRenderer) {
scene._depthRenderer = {};
}
scene._depthRenderer[camera.id] = this.depthRenderer;
) doesn’t show any flickering either.