HTML5: Rendering contains massive artifacts only for web export (GLES3, Chromium)

[voithos]

Godot version

3.3.2.stable

System information

Ubuntu 20.04.2 LTS, NVIDIA GTX 1060

Issue description

I recently made a very quick 3D prototype game, and the HTML5 export contains some very glaring rendering artifacts, whereas everything else seems to be fine. I was testing via Chrome v92. Note, I just tested it with Firefox, and the issue isn't present, so it seems like it's specific to Chromium browsers.

Here is what the game normally looks like:

And here is what the HTML5 export looks like:

Interestingly, the game seems to work OK; it's just the rendering that's messed up.

I was testing via Chrome v92. Here's the console log, in case it's useful:

Godot Engine v3.3.2.stable.mono.official - https://godotengine.org
index.js:9 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
init @ index.js:9
_godot_audio_init @ index.js:9
$func30834 @ 03f2a04a:0x57efb2
$func37244 @ 03f2a04a:0x863e95
$func29626 @ 03f2a04a:0x54f2bb
$func27514 @ 03f2a04a:0x4d8c8e
$func27559 @ 03f2a04a:0x4de051
$Tl @ 03f2a04a:0x28cdd8
$Ul @ 03f2a04a:0x51d28f
Module._main @ index.js:9
callMain @ index.js:9
(anonymous) @ index.js:684
(anonymous) @ index.js:679
Promise.then (async)
(anonymous) @ index.js:678
Promise.then (async)
start @ index.js:657
(anonymous) @ index.js:717
Promise.then (async)
startGame @ index.js:716
(anonymous) @ (index):222
(anonymous) @ (index):242
index.js:9 [Deprecation] The ScriptProcessorNode is deprecated. Use AudioWorkletNode instead. (https://bit.ly/audio-worklet)
create @ index.js:9
_godot_audio_script_create @ index.js:9
$func30676 @ 03f2a04a:0x57c59c
$func30834 @ 03f2a04a:0x57f08a
$func37244 @ 03f2a04a:0x863e95
$func29626 @ 03f2a04a:0x54f2bb
$func27514 @ 03f2a04a:0x4d8c8e
$func27559 @ 03f2a04a:0x4de051
$Tl @ 03f2a04a:0x28cdd8
$Ul @ 03f2a04a:0x51d28f
Module._main @ index.js:9
callMain @ index.js:9
(anonymous) @ index.js:684
(anonymous) @ index.js:679
Promise.then (async)
(anonymous) @ index.js:678
Promise.then (async)
start @ index.js:657
(anonymous) @ index.js:717
Promise.then (async)
startGame @ index.js:716
(anonymous) @ (index):222
(anonymous) @ (index):242
index.js:9 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
registerOrRemoveHandler @ index.js:9
__registerWheelEventCallback @ index.js:9
_emscripten_set_wheel_callback_on_thread @ index.js:9
$func29626 @ 03f2a04a:0x54f405
$func27514 @ 03f2a04a:0x4d8c8e
$func27559 @ 03f2a04a:0x4de051
$Tl @ 03f2a04a:0x28cdd8
$Ul @ 03f2a04a:0x51d28f
Module._main @ index.js:9
callMain @ index.js:9
(anonymous) @ index.js:684
(anonymous) @ index.js:679
index.js:9 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
registerOrRemoveHandler @ index.js:9
__registerTouchEventCallback @ index.js:9
_emscripten_set_touchstart_callback_on_thread @ index.js:9
$func29626 @ 03f2a04a:0x54f45b
$func27514 @ 03f2a04a:0x4d8c8e
$func27559 @ 03f2a04a:0x4de051
$Tl @ 03f2a04a:0x28cdd8
$Ul @ 03f2a04a:0x51d28f
Module._main @ index.js:9
callMain @ index.js:9
(anonymous) @ index.js:684
(anonymous) @ index.js:679
index.js:9 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
registerOrRemoveHandler @ index.js:9
__registerTouchEventCallback @ index.js:9
_emscripten_set_touchmove_callback_on_thread @ index.js:9
$func29626 @ 03f2a04a:0x54f4b1
$func27514 @ 03f2a04a:0x4d8c8e
$func27559 @ 03f2a04a:0x4de051
$Tl @ 03f2a04a:0x28cdd8
$Ul @ 03f2a04a:0x51d28f
Module._main @ index.js:9
callMain @ index.js:9
(anonymous) @ index.js:684
(anonymous) @ index.js:679
index.js:339 OpenGL ES 3.0 Renderer: WebKit WebGL
index.js:339 OpenGL ES Batching: ON
index.js:339  
index.js:354 **WARNING**: Font oversampling does not work in "Viewport" stretch mode, only "2D". To remove this warning, disable Rendering > Quality > Dynamic Fonts > Use Oversampling in the Project Settings.
onPrintError @ index.js:354
put_char @ index.js:9
write @ index.js:9
write @ index.js:9
doWritev @ index.js:9
_fd_write @ index.js:9
$func12965 @ 03f2a04a:0x254741
$func8837 @ 03f2a04a:0x19dda1
$func4495 @ 03f2a04a:0xd53d4
$func28934 @ 03f2a04a:0x50f51a
$func7029 @ 03f2a04a:0x14e6ba
$func28940 @ 03f2a04a:0x50fb50
$func28932 @ 03f2a04a:0x50f41b
$func706 @ 03f2a04a:0x2d00c
$func677 @ 03f2a04a:0x2b747
$func7960 @ 03f2a04a:0x17bb33
$func20358 @ 03f2a04a:0x38260e
$func27348 @ 03f2a04a:0x4d4d88
$Tl @ 03f2a04a:0x28cde1
$Ul @ 03f2a04a:0x51d28f
Module._main @ index.js:9
callMain @ index.js:9
(anonymous) @ index.js:684
(anonymous) @ index.js:679
Promise.then (async)
(anonymous) @ index.js:678
Promise.then (async)
start @ index.js:657
(anonymous) @ index.js:717
Promise.then (async)
startGame @ index.js:716
(anonymous) @ (index):222
(anonymous) @ (index):242
index.js:354    At: scene/main/scene_tree.cpp:1244:_update_root_rect() - Font oversampling does not work in "Viewport" stretch mode, only "2D". To remove this warning, disable Rendering > Quality > Dynamic Fonts > Use Oversampling in the Project Settings.
onPrintError @ index.js:354
put_char @ index.js:9
write @ index.js:9
write @ index.js:9
doWritev @ index.js:9
_fd_write @ index.js:9
$func12965 @ 03f2a04a:0x254741
$func8837 @ 03f2a04a:0x19dda1
$func4495 @ 03f2a04a:0xd53d4
$func28934 @ 03f2a04a:0x50f51a
$func7029 @ 03f2a04a:0x14e6ba
$func28940 @ 03f2a04a:0x50fb78
$func28932 @ 03f2a04a:0x50f41b
$func706 @ 03f2a04a:0x2d00c
$func677 @ 03f2a04a:0x2b747
$func7960 @ 03f2a04a:0x17bb33
$func20358 @ 03f2a04a:0x38260e
$func27348 @ 03f2a04a:0x4d4d88
$Tl @ 03f2a04a:0x28cde1
$Ul @ 03f2a04a:0x51d28f
Module._main @ index.js:9
callMain @ index.js:9
(anonymous) @ index.js:684
(anonymous) @ index.js:679
Promise.then (async)
(anonymous) @ index.js:678
Promise.then (async)
start @ index.js:657
(anonymous) @ index.js:717
Promise.then (async)
startGame @ index.js:716
(anonymous) @ (index):222
(anonymous) @ (index):242
index.js:9 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
requestFullscreen @ index.js:9
_godot_js_display_fullscreen_request @ index.js:9
$func29895 @ 03f2a04a:0x55baa8
$func28104 @ 03f2a04a:0x4f09bc
$func23792 @ 03f2a04a:0x40f494
$func7178 @ 03f2a04a:0x158c52
$func9307 @ 03f2a04a:0x1b16bd
$func3377 @ 03f2a04a:0x9a4b6
$func23082 @ 03f2a04a:0x3e6380
$func64038 @ 03f2a04a:0xd0bf32
$func20482 @ 03f2a04a:0x38547b
$func1721 @ 03f2a04a:0x5de39
$func1117 @ 03f2a04a:0x40c7c
$func20479 @ 03f2a04a:0x3850bb
$func20479 @ 03f2a04a:0x385071
$func6448 @ 03f2a04a:0x135bef
$func53250 @ 03f2a04a:0xb18b22
$Tl @ 03f2a04a:0x28ce05
$Ul @ 03f2a04a:0x51d28f
Module._main @ index.js:9
callMain @ index.js:9
(anonymous) @ index.js:684
(anonymous) @ index.js:679
Promise.then (async)
(anonymous) @ index.js:678
Promise.then (async)
start @ index.js:657
(anonymous) @ index.js:717
Promise.then (async)
startGame @ index.js:716
(anonymous) @ (index):222
(anonymous) @ (index):242
localhost/:1 [.WebGL-0x347a0829ae80] GL_INVALID_OPERATION: It is undefined behaviour to have a used but unbound uniform buffer.
localhost/:1 [.WebGL-0x347a0829ae80] GL_INVALID_OPERATION: It is undefined behaviour to have a used but unbound uniform buffer.
128[.WebGL-0x347a0829ae80] GL_INVALID_FRAMEBUFFER_OPERATION: Draw framebuffer is incomplete
126[.WebGL-0x347a0829ae80] GL_INVALID_OPERATION: Feedback loop formed between Framebuffer and active Texture.
localhost/:1 WebGL: too many errors, no more errors will be reported to the console for this context.
6[Violation] 'requestAnimationFrame' handler took <N>ms

Steps to reproduce

The game prototype can be found here: https://github.com/voithos/neoncycles. It's unfortunately not really a minimum repro, and I probably won't have time to debug further, but the project is fairly small / simple.

To reproduce, just export the project as HTML5, and then attempt to view the result.

Minimal reproduction project

No response

[clayjohn]

My guess is this is from the use of SCREEN_TEXTURE the error indicates a problem with reading the screen texture from the main framebuffer.

[voithos]

Ah interesting, I do have a shader that does that: https://github.com/voithos/neoncycles/blob/main/scenes/glitch.shader#L47

However, it's only used on the main menu scene, whereas the problem persists to the in-level scenes as well. I guess using it in the main menu just messes up rendering throughout?

[voithos]

OK, I think I figured it out; it actually wasn't due to that shader (I removed it and the problem still persisted), but rather the WorldEnvironment in each level. I had enabled some screen space effects (specifically Ss Reflections and Ssao) which seemed to cause the issue. I had to disable both of them to avoid this.

[Calinou]

Duplicate of #45532 (same cause).