Shader error on Linux Chrome

Question

Shader error on Linux Chrome

legel opened this issue 9 months ago · 13 comments

The astronaut went incognito!

This is my rendering on my version of Chrome of https://modelviewer.dev/

Attached is my chrome://gpu -- the problem appears to be that my WebGPU is disabled, and the model-viewer breaks if it doesn't have access to WebGPU -- which clearly results in a trash fire.

Attached are my GPU internals:
about-gpu-2024-01-09T20-52-20-483Z.txt

As a developer I'm not even able to figure out how to enable WebGPU and see a bunch of "unsafe" elements around it.
Kind of wondering what happened here -- this stuff used to work.

Problem does not exist when checking on my iPhone. Not sure how long this has been the case.

There absolutely needs to be a more graceful handling of this, worst case a slower rendering on CPU... not destruction of all currently deployed models with model-viewer...

I'm taking model-viewer down from my site in the meantime, but I can't imagine how bad this might be for everyone who may be heavily relying on this, with many users...

Let me know if you can't reproduce / don't see the problem ...

Answer 1 · 2024-01-09T21:25:44.000Z

You're right that this looks like a very serious issue - as such can you please fill in the issue template so that we know what version(s) of which browsers/devices you're seeing this on? I certainly have no repro locally.

We haven't actually switched to WebGPU yet, so those warnings are I think a red herring. Can you do a quick test of other MV versions to see if this is a regression from one release to another? Also modelviewer.dev is pre-release so this may not have made it to a public release at all yet - likely since this is the first we've heard of it.

Answer 2 · 2024-01-09T22:01:23.000Z

Good news: I can confirm that this issue appears to be isolated to my Linux Chrome environment. On a Linux Firefox, as well as on a Macbook Chrome and Macbook Safari, it does not persist.

Here is the problem environment:

Google Chrome | 120.0.6099.216 (Official Build) (64-bit)
-- | --
Revision | c89e9d30198bc4e9e7711e2b90b9602cdd50e448-refs/branch-heads/6099@{#1720}
OS | Linux
JavaScript | V8 12.0.267.14
User Agent | Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Command Line | /usr/bin/google-chrome-stable --desktop-startup-id=gnome-shell/Google Chrome/2350-3-vision_TIME2137073 --origin-trial-disabled-features=WebGPU --restart --restart --flag-switches-begin --enable-webgpu-developer-features --ignore-gpu-blocklist --flag-switches-end

The problem persisted for the following model-viewer versions:

model-viewer: at least v3.1.0 (where I saw it originally) and v3.3.0 (what I updated to, to see if it fixed it)

Browser Affected

OS

Answer 3 · 2024-01-09T22:30:00.000Z

Thanks, that's helpful. Are you sure this is WebGPU-related? If you enable WebGPU does it start working? I think the real problem is this: WebGL: INVALID_OPERATION: useProgram: program not valid. Can you add ?model-viewer-debug-mode to the end of your URL? That will put WebGL into debug mode so that it'll spit out the compile error it got to the console. Please paste that whole error here. Thanks!

Answer 4 · 2024-01-10T20:47:18.000Z

Thanks, I don't know for sure if it's WebGPU related, or how to verify if I've properly enabled WebGPU (I don't think I have been able to yet), but I was able to get a detailed compile error from the debug mode. Here is a look at it (something about Shaders):

Here's also more detail on the original useProgram: program not valid source:

Answer 5 · 2024-01-10T21:11:58.000Z

Thanks, that's close, but please no screenshots! What I need is the text in that red error message that starts with Shader Error 1282. The message is likely several pages long - I need it all! Please copy all of that text from your console and paste it here. That will tell us exactly what line of the shader is giving us trouble, and with that I can probably file a bug on Chromium.

Answer 6 · 2024-01-12T20:52:27.000Z

model-viewer.js:19929 THREE.WebGLProgram: Shader Error 1282 - VALIDATE_STATUS false
Program Info Log: 
U @ model-viewer.js:19929
getUniforms @ model-viewer.js:20000
(anonymous) @ model-viewer.js:29924
renderBufferDirect @ model-viewer.js:28810
Jt @ model-viewer.js:29608
Yt @ model-viewer.js:29577
jt @ model-viewer.js:29438
render @ model-viewer.js:29256
_halfBlur @ model-viewer.js:16455
_blur @ model-viewer.js:16356
_applyPMREM @ model-viewer.js:16337
_fromTexture @ model-viewer.js:16140
fromEquirectangular @ model-viewer.js:16032
get @ model-viewer.js:16846
(anonymous) @ model-viewer.js:29771
renderBufferDirect @ model-viewer.js:28810
Jt @ model-viewer.js:29608
Yt @ model-viewer.js:29577
jt @ model-viewer.js:29438
render @ model-viewer.js:29256
render @ model-viewer.js:56900
(anonymous) @ model-viewer.js:56634
(anonymous) @ model-viewer.js:29126
r @ model-viewer.js:13099
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
model-viewer.js:22858 WebGL: INVALID_OPERATION: useProgram: program not valid
useProgram @ model-viewer.js:22858
(anonymous) @ model-viewer.js:29927
renderBufferDirect @ model-viewer.js:28810
Jt @ model-viewer.js:29608
Yt @ model-viewer.js:29577
jt @ model-viewer.js:29438
render @ model-viewer.js:29256
_halfBlur @ model-viewer.js:16455
_blur @ model-viewer.js:16356
_applyPMREM @ model-viewer.js:16337
_fromTexture @ model-viewer.js:16140
fromEquirectangular @ model-viewer.js:16032
get @ model-viewer.js:16846
(anonymous) @ model-viewer.js:29771
renderBufferDirect @ model-viewer.js:28810
Jt @ model-viewer.js:29608
Yt @ model-viewer.js:29577
jt @ model-viewer.js:29438
render @ model-viewer.js:29256
render @ model-viewer.js:56900
(anonymous) @ model-viewer.js:56634
(anonymous) @ model-viewer.js:29126
r @ model-viewer.js:13099
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101
requestAnimationFrame (async)
r @ model-viewer.js:13101

Answer 7 · 2024-01-12T21:03:13.000Z

That's weird - this is with ?model-viewer-debug-mode? There should be a Program Log Info section down there somewhere...

Answer 8 · 2024-01-12T21:07:44.000Z

That's everything. Yes, confirmed this is with the debug mode set, the Shader error doesn't appear otherwise.
There is just empty space and no further details around the "Program Info Log".

Answer 9 · 2024-01-12T22:49:59.000Z

Thanks, that's super weird - I've contacted Chrome graphics about it. Hopefully we can find a repro.

Answer 10 · 2024-01-13T01:11:18.000Z

What is your Linux environment and version and why are you running with all these flags? /usr/bin/google-chrome-stable --desktop-startup-id=gnome-shell/Google Chrome/2350-3-vision_TIME2137073 --origin-trial-disabled-features=WebGPU --restart --restart --flag-switches-begin --enable-webgpu-developer-features --ignore-gpu-blocklist --flag-switches-end

--ignore-gpu-blocklist concerns me the most; do you have a GPU that Chrome knows isn't supported? Can you reproduce this with a standard Linux Chrome instance?

Answer 11 · 2024-01-16T21:44:04.000Z

I'm running on Ubuntu 22.04.3 LTS.

Those flags were auto-generated by the standard desktop icon button. I just tried to see what happens if I remove some or all of them. Various issues come up. In some cases the https://modelviewer.dev/ only ends up showing floating balls, with or without PBR textures. I'll spare you screenshots as requested...

I tried to look for a remote Linux machine testing service for websites, but could not find one actually.
One hardcore solution could be to spin up something like a AWS / Google Cloud Linux machine with a GPU and streaming desktop, and see if the problem persists there.

At this point it's unclear to me what the source of the problem is, or if it persists across most/all Linux machines or just something quirky about my own. I'm currently running with 2 RTX 3090 GPUs. "Previously" (at least later in 2023) things were rendering properly with my same GPU and OS.

Answer 12 · 2024-01-16T21:49:11.000Z

Great news!

So I see now that floating balls is the default rendering experience at https://modelviewer.dev/ -- and more importantly, all of my 3D rendering with <model-viewer> is now working again!

(I have no idea what the fix was, or potentially if your created issue with Chrome was the solution, but thanks for the troubleshooting support in any case.)

Answer 13 · 2024-01-16T22:27:41.000Z

Glad to hear your setup is working. And thanks for the ping about the floating balls - that was a mistaken push! Fixed shortly...