Rendering bug on Mozilla

CesiumJS
1

Hello,

We are using Cesium as a widget in one of our applications. We are encountering problems to run the widget on Firefox browsers.
The error indicates that the rendering has been stopped due to browser incompatibility. I think it is not a problem with Webgl or the GPU, since it works fine on Edge.

Moreover, we tried to capture that error in order to display a message asking the user to change browser if some problem occur, but the error is still displayed despite surrounding the Cesium code with a try/catch in javascript.

Do you have any idea as to what can cause this problem exactly and how to either solve it or correctly catch it ?

PS : our client has very strong security constraints, so we may not be able to perform certain tests or workarounds, especially if it implies managing their computer configuration.

Thanks in advance,

2

Here is the js code extract :

const showUI = false;
try{
this.viewer = new Cesium.Viewer(‘cesiumContainer’, {
// terrainProvider: Cesium.createWorldTerrain(),

            // Use Cesium World Terrain
            // terrain: Cesium.Terrain.fromWorldTerrain({
            //     requestWaterMask: true,
            //     requestVertexNormals: true,
            // }),

            //TODO: move credit outside view but doesn't seems to place properly on page
            // creditContainer: "creditContainersqd",
            shadows: true,
            targetFrameRate: 30,

            showRenderLoopErrors: true,

            //disable UI element
            animation: showUI,
            baseLayerPicker: showUI,
            geocoder: showUI,
            fullscreenButton: showUI,
            vrButton: showUI,
            homeButton: true,
            infoBox: true,
            sceneModePicker: showUI,
            selectionIndicator: showUI,
            timeline: showUI,
            navigationHelpButton: true,
            navigationInstructionsInitiallyVisible: true,
            projectionPicker: showUI,
        });

        // add offline  layer
        const lLayers = this.viewer.scene.globe.imageryLayers;
        lLayers.remove(lLayers.get(0));
        const lDefaultLayer = new Cesium.ImageryLayer(
            await Cesium.TileMapServiceImageryProvider.fromUrl("static/maps/NaturalEarthII"),
            {}
        );
        lLayers.add(lDefaultLayer, 0);
        // mGlobe = mScene.globe;
        // surement aller chercher dans le nodemodules
        this.viewer.terrainProvider =  new Cesium.EllipsoidTerrainProvider();


        // add rounded corner to cesium canva
        this.viewer.canvas.style.borderRadius = "8px";

        // hide entities that are underground level
        this.viewer.scene.globe.depthTestAgainstTerrain = false;

        this.onPaginationVersionUpdate()
    } catch (e){
        console.error(e);
        this.canDiplay = false;
    }
3

Hi @pkimmel, sorry you’re having issues with the viewer. I’m not able to reproduce any errors using the code you provided in Firefox. Are you able to provide a minimal Sandcastle example that triggers the error? That will help us tracking it down.

Would you also be able to provide the system and browser version information? it’s possible it’s specific to a specific setup.

4

I will try to run sandcastle examples but I’m not sure it will succeed since the environment is very harshly controlled.

As for configuration, here are the informations I have, I can gather more if needed:

  • OS is Windows 10
  • Graphic card is AMD Radeon Vega 6 Graphics
  • Browser is Mozilla Firefox 102.10.0esr

Note that we don’t necessary need the error to be fixed (since it works well on Edge), but we sould really like to be able to catch the error in order to display a more user-friendly message instead.

Thanks,

5

We tried accessing the sandbox, we get the same error

sandbox
sandbox1921×1038 52.6 KB

6

Hi @pkimmel,
Starting off let me confirm my understanding. You are asking about 2 items:
First, that the renderer is not working in Firefox.
And second, that you are not able to capture the error and handle it accordingly.
Is this correct?

To answer the first question about the renderer not working in FF, there is some useful trouble shooting instructions in this thread "Browser supports WebGL, but initialization failed" in Chrome but not FF/Edge - #5 by James_B

On the second question regarding capturing and handling the error, we have a setting which if off by default which when enabled does the following

Exceptions occurring in render are always caught in order to raise the renderError event. If this property is true, the error is rethrown after the event is raised. If this property is false, the render function returns normally after raising the event.

https://cesium.com/learn/ion-sdk/ref-doc/Scene.html?classFilter=scene#rethrowRenderErrors

7

Hello Luc, I’m a colleague of pkimmel, from now on, I’ll take over from him.

Yes, there are actually two different problems. The first one is our main problem. The second one about catching the error is more a workaround to display a nice error message.

Activating WebGl

First, you have to know that our test environment is not exactly the same as our client one, and thought we both get the same error, they may have different sources.

As suggested in the subject you shared, according to WebGL Report WebGL 2 is disabled. Going in about:support we have the follogin:

  • in test env:

Pilote WebGL 2 – Rendu: WebGL creation failed: * AllowWebgl2:false restricts context creation on this system. ()

  • in production:

Pilote WebGL 2 – Rendu : Google Inc. (AMD) – ANGLE (AMD, AMD Radeon™ Vega 6 Graphics Direct3D11 vs_5_0 ps_5_0, D3D11-26.20.11028.8001)

In test env, we manage to make cesium work by forcing webgl activation throuh ‘webgl.force-enabled: true’ flag in the about:config page. However, this solution is not available in production.

So in our test env, Firefox is blocking the card driver, but in production, the card is activated, at least in about:support, yet WebGL is still not working.

catching WebGl render error

Cesium.CesiumWidget.showRenderLoopErrors mislead me, I mixed it up with rethrowRenderErrors. So, I set it to true and it works as expected. I don’t think that the documentation was misleading, but maybe adding a link between these two flags would have helped me.

8

I’m glad the error capture issue is resolved.

For the rendering in Firefox on Windows error, it sounds like WebGL2 is not working in your production environment according to WebGL Report , correct? WebGL is necessary to render any Cesium scene.

Here are a few more troubleshooting steps specific for WebGL2 (apologies if you already tried these):

  • Check if WebGL2 is enabled in Firefox: go to about:config, search for webgl2, and double check that the webgl2 related features are enabled.
  • Check hardware acceleration: Go to about:preferences, under performance check that Use recommended performance settings is checked or that Use hardware acceleration when available is checked
  • Some errors can be resolved by updating video drivers, but that does not seem to be the case here since they are working in your test environment.

You mentioned WebGL2 but not WebGL1, do you have access to WebGL1 context? If so you could at the application level specify use of WebGL1 using the following api properties outlined here.

I hope these steps are helpful, Cesium ultimately needs working WebGL2 (or WebGL1 if you change the settings in the Cesium API shared above) as indicated by WebGLReport.