Ios load GLB will turn black, lost hdr light

Questions
,
1

Hi,
I have encountered a problem, using the env file in the ios webview environment, occasionally there is a problem of hdr lighting loading error, causing the model to become black, I only use hdr lighting, it will appear every time, sometimes it is not pure black, it will become gray, Just close the app and re-enter.

Some info that might be useful:
Babylonjs version: 5.35.1
HDR: Use the env file converted from this page Babylon.js Texture Tools
Model: use glb file + pbr material

Very similar to this issue: No lighting occasionally in Safari (mostly) · Issue #1955 · google/model-viewer · GitHub

And I know that other teams have encountered the same problem when using the playcanvas engine. They used the code of updating hdr and updating the material to improve this problem.

When the model is black, I try to reload the env file to generate a cubeTexture and add it to scene.environmentTexture, the material is still black, and I also try to assign the cubeTexture generated by env to the reflectionTexture of all pbr materials, but it still has no effect.

I’m new to babylon and I’ve been trying for a few days and can’t figure it out, hoping for some help.

2

I’m hoping to do two things:

  1. I can monitor the state of this hdr error
  2. At runtime I can refresh the hdr or refresh the material, fix this error
3

Welcome aboard!

Unfortunately, it seems to be a problem on Apple side…

Something that could help would be to setup a repro. This way, we could see if it’s possible to come up with a workaround.

What you can also test is using WebGL1 instead of WebGL2.

2 Likes
4

Thank you for your reply,
However, here is a solution to alleviate this situation:

    const env = this.assetsManager.addCubeTextureTask('env', './url/xxx.env');
      env.onSuccess = (e) => {
        const data = e.texture.readPixels();
        if (data) {
          data.then((arr) => {
            const isBlack = (arr as any).every((pixel: number) => pixel === 0);
            if (isBlack) {
              window.location.reload();
            }
          });
        }

        this.scene.environmentTexture = e.texture;
      };
      this.assetsManager.load();

Just like the above code, it will bring a big improvement when it is first loaded.

1 Like