Rendering artifacts in WebGL on Chrome

[dellisd]

Describe the bug
WebGL rendering appears to be broken in Chrome(?) on desktop. The output image has artifacts everywhere and flickers.

My graphics drivers are all up to date, and as far as I can tell this only happens in Chrome. The demos work fine in Edge for instance and they also work normally in Chrome on Android.

To Reproduce
Steps to reproduce the behavior:

1. Open WebGL tutorials or demo in Chrome on desktop (v85.0.4183.121) (e.g. https://google.github.io/filament/webgl/suzanne.html)

Expected behavior
The demo should be rendered normally

Screenshots

Desktop (please complete the following information):

• OS: Windows
• GPU: NVIDIA RTX 2070 Super
• Backend: WebGL

Additional context
No errors appear in the console.

[prideout]

Thanks for the bug report! This might be a Windows-only issue, I'm using the same version of Chrome on macOS but I do not see this.

It might be interesting to see what happens with a newer version of Filament -- the public facing demos need to be updated.

[dellisd]

I noticed that the knotess demo works normally for me, but I'm not sure what version of filament that uses compared to the others.

[bejado]

I'm unable to reproduce on Windows with an older NVIDIA GTX 970 (same version of Chrome).

[dellisd]

I reached out to some friends who have a few other different GPUs to see if the issue occurs for them too (all on Windows and Chrome):

GPU	Artifacts?
2070 Super	Yes
2070	Yes
2060	No
1060	No
1650	No

Note: this is a different 2070 Super, not mine

So if I had to guess right now it seems to only happen with RTX cards? Oop looks like it works on the 2060

[dellisd]

A bit more digging and it turns out that the artifacts only occur when using the D3D11 backend for ANGLE in Chrome. Switching the backend to OpenGL or D3D11on12 allows the demos to render fine.

[prideout]

Interesting, thanks for digging deeper! This bug should perhaps be reported to NVIDIA.

[cx20]

I'm having the same issue with a Windows 10 + Chrome 90 + GeForce RTX 2060 environment.
The following was displayed on the console.

[.WebGL-000014380033B500]GL Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, Medium): You could get a better shader compiling performance if you re-write the uniform block(s)
[ FrameUniforms ]
in the FRAGMENT shader.
You could get more details from https://chromium.googlesource.com/angle/angle/+/refs/heads/master/src/libANGLE/renderer/d3d/d3d11/UniformBlockToStructuredBufferTranslation.md

For now, it seems to display correctly in the Firefox 88 environment.

[cx20]

I tested it again in several browsers.
Perhaps Chrome 92.0.4491.6 or later has resolved this issue.

GPU	OS	Browser	result
GeForce RTX 2060	Windows 10	Chrome 90.0.4430.93	❌
GeForce RTX 2060	Windows 10	Chrome 92.0.4491.6 (Dev)	✅
GeForce RTX 2060	Windows 10	Chrome 92.0.4494.0 (Canary)	✅
GeForce RTX 2060	Windows 10	Edge 90.0.818.51 (Chrome 90.0.4430.93)	❌
GeForce RTX 2060	Windows 10	Edge 92.0.873.1 (Dev) (Chrome 92.0.4474.0)	❌
GeForce RTX 2060	Windows 10	Edge 92.0.874.0 (Canary) (Chrome 92.0.4482.0)	❌

Edit 2021.05.10
I am sorry. The above test results were wrong.
When I tested Canary and Dev, the internal GPU was used, which is why the results were displayed correctly.

[pixelflinger]

not actionable / gpu/driver specific

[cx20]

A bit more digging and it turns out that the artifacts only occur when using the D3D11 backend for ANGLE in Chrome. Switching the backend to OpenGL or D3D11on12 allows the demos to render fine.

Unfortunately, setting the ANGLE backend to OpenGL seems to crash in the latest version of Filament.