Three.js: WebGL Crash (Maybe due to new PMREM Generator?)

[njarraud]

Description of the problem

I put a new version of my app online based on the development version r113 of Threejs. I was previously using r108. However since the update I keep receiving an increasing amount of requests from users stating that WebGL is crashing and sometimes even freezing and crashing the entire system. This is a hard one because I didn't experience it myself however when I received hundreds of messages on all my communication channels I could not ignore it.

I am using the material node system and the new pmrem generator for environment lighting.
I made them try the official examples for pmrem/nodes and materials/nodes and they have the same issues. So it is not just related to my code. The threejs_org twitter account made one of the user try this example and the result was similar.

From the feedback that I have it happens at least on both systems Windows (7 & 10) and MacOs. It doesn't seem to be related to any particular browser.

One of them posted the following logs:

and

A MacOs user sent me a screenshot of his system. The issue is completely freezing his system.

Don't know if it is related to this issue https://github.com/mrdoob/three.js/issues/18408

I will provide more information as I get them. I may be able to find a pattern among the OS/GPUs.

Three.js version

• [x] Dev
• [x] r112

Browser

• [x] All of them

OS

• [x] Windows
• [x] macOS

[jpmolla]

For what it worth, here is the comment I wrote on the other issue post :)

Once my Windows 10 NVidia drivers updated (for Nvidia GeForce GTX 960M) the issue still remain from this page. Here are the result I noticed on browsers console.

Chrome console (v79.0.3945.130):

Firefox console (v72.0.1):

I also tried on an Ubuntu 19.10 (hardware computer not VM) and there is no issue. Ironically I have an integrated Intel HD Graphic card on it, not the most powerfull.

[Mugen87]

I have now tested the mentioned examples on my personal hardware and I can't produce any crashes.

• iMac (end2014), macOS 10.15.2, AMD Radeon R9 M295X 4 GB
• Gaming Notebook, Windows 10, RTX 2070 MaxQ

On Windows, I do see the DirectX warnings in the browser console. However, no context lost.

A possible approach to find the root cause of this issue is to remove parts of the fragment shader code until the examples work again. If we know the problematic bit, we can isolate the issue and try to rewrite the respective part of the shader.

[Mugen87]

I remember now a similar report here: https://github.com/mrdoob/three.js/issues/18253

It seems a GPU driver update solved the issue.

[njarraud]

From the information I could get from users, it seems to only happen with Intel GPUs.

Someone reported the issue with an Intel HD Graphics 630. I have the same GPU on one of my laptop but I do not have the error myself...

I get the DirectX warning so it is not part of the problem. It is really related to the lost context.

The issue is existing on macOs and Windows.
Asking people with fairly recent PCd and drivers and not much technical skills to update the graphic card which may or may not fix the problem is not a great option especially when user number impacted is not marginal anymore (Who ever updated the drivers on a Mac?).

Most of us here have proper GPUs and up to date drivers so we are probably not as likely as the general public to get this kind of problem.

I really hope I somehow have access to a computer with the issue. It is really the only way to figure it out and fix it.

[Mugen87]

Asking people with fairly recent PCd and drivers and not much technical skills to update the graphic card which may or may not fix the problem is not a great option especially when user number impacted is not marginal anymore

True. It would be good if you get access to an affected device for further testing.

[sciecode]

I tried on all my 3 systems, including a macOS with Intel HD Graphics. Could not replicate on any of them. I'll be on the lookout for a device that presents this behavior.

[moraxy]

Not sure if this is the same issue, but I've got a Linux desktop with an Intel HD 4000 here and the current dev version of the pmrem/nodes example complains about missing extensions

EXT_frag_depth extension not supported.
EXT_shader_texture_lod extension not supported.

but otherwise works fine, if a bit slow.
materials/nodes however complains about the same extensions, but then follows it up with a shader dump and no visuals:

THREE.WebGLProgram: shader error:  0 35715 false gl.getProgramInfoLog invalid shaders  THREE.WebGLShader: gl.getShaderInfoLog() fragment
WARNING: 0:2: 'GL_EXT_shader_texture_lod' : extension is not supported
ERROR: 0:994: 'textureCubeLodEXT' : no matching overloaded function found
ERROR: 0:994: 'GammaToLinear' : no matching overloaded function found
ERROR: 0:994: 'xyz' :  field selection requires structure or vector on left hand side

(rest of dump https://pastebin.com/j4wjaSyg)

Despite the non-graceful exit, there's no actual crash thou, everything stays responsive.

The master versions both complain only about EXT_shader_texture_lod extension not being supported, but both work fine.

[Mugen87]

ERROR: 0:994: 'textureCubeLodEXT' : no matching overloaded function found
ERROR: 0:994: 'GammaToLinear' : no matching overloaded function found
ERROR: 0:994: 'xyz' : field selection requires structure or vector on left hand side

These ones prevent a shader compilation. Can you reproduce this with the official examples?

[moraxy]

On threejs.org both webgl_materials_envmaps_pmrem_nodes and webgl_materials_nodes run fine.
On dev (i.e. raw.githack.com/...) only webgl_materials_nodes breaks and dumps the shader code.
All other examples with 'nodes' in the name work fine as well, on both branches.

[moraxy]

git bisect says it's 31fa4a9c8af2d6c1d176da912591402a3a89c3c3 and its parent dd13ac2cd4439ad8d0b8057378d40be1fbad8cb1 indeed doesn't crash

[Mugen87]

Strange, I can't reproduce this on my system. webgl_materials_nodes (like all other node examples) runs fine on dev. Tested on macOS 10.15.2 with Chrome 79.0.3945.130.

[moraxy]

These comparisons to undefined
https://github.com/mrdoob/three.js/blob/8bf406caac5071070bd077820873036f732390c5/src/renderers/webgl/WebGLPrograms.js#L287-L289
need to compare to null instead, because that's what's extensions.get is returning if an extension is missing
https://github.com/mrdoob/three.js/blob/8bf406caac5071070bd077820873036f732390c5/src/renderers/webgl/WebGLExtensions.js#L44-L52
That fixes webgl_materials_nodes for me - any reason this might screw things up somewhere else?

[Mugen87]

Can you please make a PR with the fix? I'm not sure why undefined is used here. The null check is definitely correct.

[Tom-Batchelder-fishinabottle]

I've been able to replicate OPs issue on a Windows 10 machine with an Intel HD Graphics 620 card.

Unfortunatly in my case, and I imagine quite a few others, there are no longer any driver updates for my card as they are tied to the OEM of my laptop. I appreciate I can circumvent this, but this isn't something all users are going to do.

This also looks to be unrelated to the issue @moraxy has raised, as the same problem occurs on 113 where this has been resolved.

Afraid to say my knowledge of shaders and GPU-related things is limited so I don't think I can offer a fix up for this. But happy to help out if I can in diagnosing if someone knows where to look!

[mrdoob]

@njarraud does the crash still happen after #18935?

[mrdoob]

/ping @njarraud

[njarraud]

I moved the development version of my app to the latest PMREMGenerator. However I don't have access to any computers with this issue so I am waiting until I release it probably in the next week to confirm with my users.

[Tom-Batchelder-fishinabottle]

I can confirm that the device I was using is no longer crashing and everything seems to be working as expected. 👍

[mrdoob]

Thanks! Closing this for now then.

[njarraud]

Feedback from my users is positive. People no longer have this issue. Thanks guys.