Editor Preview is blank

[jmschrack]

Fresh install. v4.0.0-rc3

When I open up a project (or create a new one), the scene view loads for a moment, and then the BabylonJS logo covers the entire screen. When the editor comes back, the preview is blank.

"WebGL Context lost" can be seen in the Console window.

Here's the logs from opening up the developer console.

C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\react-dom\cjs\react-dom.development.js:27773 Download the React DevTools for a better development experience: https://fb.me/react-devtoolsYou might need to use a local HTTP server (instead of file://): https://fb.me/react-devtools-faq

C:/Users/JohnDoe/AppData/Local/Programs/BabylonJS Editor/resources/app.asar/node_modules/litegraph.js/build/litegraph.js:15510 No glmatrix found, some Math3D nodes may not work
(anonymous) @ C:/Users/JohnDoe/AppData/Local/Programs/BabylonJS Editor/resources/app.asar/node_modules/litegraph.js/build/litegraph.js:15510

C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\babylonjs\babylon.max.js:40729 Babylon.js v4.2.0 - WebGL2 - Parallel shader compilation

C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\babylonjs\babylon.max.js:144778 BJS - [21:58:29]: Material not found for mesh c4024c20-1c4f-4be6-9abd-525e2a782174
./Misc/logger.ts.Logger._WarnEnabled @ C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\babylonjs\babylon.max.js:144778

C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\babylonjs\babylon.max.js:144778 BJS - [21:58:29]: Material not found for mesh b87c0751-53e5-4782-88d9-0461e9457fe1
./Misc/logger.ts.Logger._WarnEnabled @ C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\babylonjs\babylon.max.js:144778

C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\babylonjs\babylon.max.js:144778 BJS - [21:58:29]: Material not found for mesh d66c05ad-967f-4f69-a6fb-7d47281b641c
./Misc/logger.ts.Logger._WarnEnabled @ C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\babylonjs\babylon.max.js:144778

C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\babylonjs\babylon.max.js:144778 BJS - [21:58:29]: Material not found for mesh f824df87-ae33-41d9-ba8f-551d2083a2be
./Misc/logger.ts.Logger._WarnEnabled @ C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\babylonjs\babylon.max.js:144778

C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\babylonjs\babylon.max.js:144778 BJS - [21:58:29]: Material not found for mesh b6a89645-0d85-44c1-8bf8-b99b8670c51f
./Misc/logger.ts.Logger._WarnEnabled @ C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\babylonjs\babylon.max.js:144778

C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\babylonjs\babylon.max.js:144778 BJS - [21:58:29]: Material not found for mesh f28c95a8-f3fc-4ff6-8522-26f3cc6d5d4c
./Misc/logger.ts.Logger._WarnEnabled @ C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\babylonjs\babylon.max.js:144778

C:/Users/JohnDoe/AppData/Local/Programs/BabylonJS Editor/resources/app.asar/node_modules/rc-util/lib/warning.js:20 Warning: `children` of Tree is deprecated. Please use `treeData` instead.

warning @ C:/Users/JohnDoe/AppData/Local/Programs/BabylonJS Editor/resources/app.asar/node_modules/rc-util/lib/warning.js:20
editor.html:1 A cookie associated with a cross-site resource at http://editor.babylonjs.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
editor.html:1 WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost

C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\babylonjs\babylon.max.js:144778 BJS - [21:58:31]: WebGL context lost.
./Misc/logger.ts.Logger._WarnEnabled @ C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\babylonjs\babylon.max.js:144778

C:/Users/JohnDoe/AppData/Local/Programs/BabylonJS Editor/resources/app.asar/build/src/renderer/editor/components/console.js:280 WebGL context lost.
Console._addLog @ C:/Users/JohnDoe/AppData/Local/Programs/BabylonJS Editor/resources/app.asar/build/src/renderer/editor/components/console.js:280

C:\Users\JohnDoe\AppData\Local\Programs\BabylonJS Editor\resources\app.asar\node_modules\babylonjs\babylon.max.js:40729 Babylon.js v4.2.0 - WebGL1 - Parallel shader compilation```

Followed  by 324 lines of 
`DevTools failed to parse SourceMap:`

[jmschrack]

chrome://gpu logs:

Graphics Feature Status
Canvas: Hardware accelerated
Flash: Hardware accelerated
Flash Stage3D: Hardware accelerated
Flash Stage3D Baseline profile: Hardware accelerated
Compositing: Hardware accelerated
Multiple Raster Threads: Enabled
Out-of-process Rasterization: Disabled
OpenGL: Enabled
Hardware Protected Video Decode: Hardware accelerated
Rasterization: Hardware accelerated
Skia Renderer: Disabled
Video Decode: Hardware accelerated
Viz Display Compositor: Enabled
WebGL: Hardware accelerated
WebGL2: Hardware accelerated

Driver Bug Workarounds
clear_uniforms_before_first_program_use
decode_encode_srgb_for_generatemipmap
disable_discard_framebuffer
exit_on_context_lost
force_cube_complete
msaa_is_slow
scalarize_vec_and_mat_constructor_args
disabled_extension_GL_KHR_blend_equation_advanced
disabled_extension_GL_KHR_blend_equation_advanced_coherent

Problems Detected
Some drivers are unable to reset the D3D device in the GPU process sandbox
Applied Workarounds: exit_on_context_lost

Clear uniforms before first program use on all platforms: 124764, 349137
Applied Workarounds: clear_uniforms_before_first_program_use

Always rewrite vec/mat constructors to be consistent: 398694
Applied Workarounds: scalarize_vec_and_mat_constructor_args

ANGLE crash on glReadPixels from incomplete cube map texture: 518889
Applied Workarounds: force_cube_complete

On Intel GPUs MSAA performance is not acceptable for GPU rasterization: 527565
Applied Workarounds: msaa_is_slow

Framebuffer discarding can hurt performance on non-tilers: 570897
Applied Workarounds: disable_discard_framebuffer

Disable KHR_blend_equation_advanced until cc shaders are updated: 661715
Applied Workarounds: disable(GL_KHR_blend_equation_advanced), disable(GL_KHR_blend_equation_advanced_coherent)

Decode and Encode before generateMipmap for srgb format textures on Windows: 634519
Applied Workarounds: decode_encode_srgb_for_generatemipmap

[jmschrack]

So it looks like the WebGL context is never getting restored. To confirm this, i downloaded the source from the 4.0.0 branch, and I added these observables in editor.tsx right after the engine is created.

this.engine.onContextLostObservable.add(() => {
            alert("WHOOPS LOST CONTEXT!");
        });

        this.engine.onContextRestoredObservable.add(() => {
            alert("GOT CONTEXT AGAIN!");
        });

Obviously I get a pop-up on losing the context shortly after loading the scene. But I never get a pop-up for context Restored, even if I let it sit there for a while.

On a hunch, I set: disableWebGL2Support: true, in the engine constructor, with this I never lose the WebGL context.

Unfortunately, I get a ton of other errors related to missing features this way.

[jmschrack]

I figured it out! It's a problem with the OEM Intel UHD Graphics driver and Window's "Graphics Performance Setting" I have found two possible solutions, and verified that both of these work on two different laptops.

Option 1: Changing Windows settings

1. Open the Windows settings and search for "Graphics Settings"
2. In the "Graphics Performance Preference", select "Desktop App" in the drop down and then browse to the BabylonJSEditor.exe, you should now see it added to the list.
3. Click on "Babylon JS Editor" in the list and click "Options"
4. Set your preference to "High Performance Mode"
5. Close and reopen the Editor

Option 2: Update the Intel UHD driver

Install the Generic Intel DCH graphics driver (I recommend using the Driver Support Assistant to do this.) Read the caveat, but in short: your default drivers are usually customized by the manufacturer, but this generic driver is not. Obviously you run the risk of screwing something up.

[julien-moreau]

Hi @jmschrack !

Thanks a lot for all these investigations! This problem raised some problems in the Editor like it doesn't take care of WebGL 1 etc.

Do you think the Editor must support WebGL 1 ? It is said that WebGL 2 is supported everywhere except on iOS (for the moment).

[jmschrack]

I don't think the editor should support WebGL1.

The core problem here is a Window's Intel driver bug. I think the better solution would be to hook into the onContextLostObservable event, and display a error message if they are on Windows and the Intel graphics driver is detected.

Something like:

this.engine.onContextLostObservable.add(() => {
            //this is a windows only bug and only occurs on Intel UHD Graphics chips.
            if(process.platform === "win32"){
                var intelPattern= /Intel.*Graphics/g;
                const exec=require("child_process");
                const os = require("os");
                //get a list of all the GPU drivers on the system
                exec("wmic path win32_VideoController get name", (error,stdout,stderr) => {
                    if(error){
                        console.error(stderr);
                    }
                    //filter for Intel Graphics
                    if(intelPattern.exec(stdout)){

                        /*
                        The windows command prompt starts with "name" on the first line, and 2 trailing EOL.
                        So we subtract 3 to determine the number of GPU drivers.

                        If there is more than 1 driver: Windows is (probably) setting the app to Graphics Power Saver mode, 
                            which uses the Intel chip instead of the discrete GPU. This can be fixed by going to
                            settings>Graphics Settings and setting BabylonJS Editor to "High Performance mode"

                        Otherwise, they only have the Intel chip, and the only solution is to update using the 
                            Generic Intel DCH Graphics driver.  

                        */
                        if(stdout.split(os.EOL).length-3>1){
                            alert("WebGL Context lost! We detected multiple video drivers including 'Intel Graphics'. If you continue to see this, Windows may be putting the Editor into Power Save Mode."+
                            "\n Go to Settings>Graphics Settings and set BabylonJS Editor to High Performance Mode. ");
                        }else{
                            alert("WebGL Context lost! We detected you are using Intel Graphics. If this continues to happen, you may need to manually update the Generic Intel DCH Graphics driver.")
                        }

                    }
                });
            }

        });

I'm not super knowledgeable about electron. I assume there are better alternatives for pop-up boxes other than the "alert" function. I also don't know how often context gets lost and then regained normally, so if you go this route, I'd recommend some way of allowing the user to "Ignore future errors" just in case.

I did some digging, and unfortunately there is currently no way to determine if Windows has set your app to "Power Saver Mode" or not, so we just have to assume if the context keeps disappearing and it's a Intel Graphics chip, then it's this bug.

[julien-moreau]

@jmschrack you are awesome, I'm trying it out Also, I have added your solutions in the troubleshooting documenation of the editor.

Thanks a lot !