AssetManager and WebGL2 cause full transparent textures on Android chrome

Questions
1

I have an interesting issue with my game.
If I using AssetManager to load textures and using WebGL2 in my phone (Realme GT Master), the rendered textures are fully transparent.
The issue only appear with chrome browser and only with my mobile, on desktop it works correctly.

If I disable WebGL2, it works fine with WebGL1. But I would like to use WebGL2, because with WebGL1 causing another heightmap issue.

Previously when I created a POC for this game I not used AssetManager, and it worked fine.
Maybe I missed some crucial config parameter or something.

The issue is very specific because with another phone (Realme 9 pro plus) it works well.

Can somebody give me a starting point for what to look at?

Here is a part of the current code:

if (assetUrl.endsWith(".png") || assetUrl.endsWith(".jpg")) {
        const taskName = `task-${AssetLoader.taskCounter++}-${assetName}`;
        const task = this.assetsManager.addTextureTask(taskName, url(assetUrl), true, true, Texture.NEAREST_NEAREST);
        task.onSuccess = (task) => {
          const { texture } = task;

          const material = new StandardMaterial(assetName, store.scene);
          material.diffuseTexture = texture;
          if (assetUrl.endsWith(".png") && options?.hasAlpha) {
            material.diffuseTexture.hasAlpha = true;
          }
          if (options?.disableSpecular) {
            material.specularColor = new Color3(0, 0, 0);
          }
          store.materials[assetName] = material;

          onSuccess?.(task, { material });
        };

And here is a previous code which not used the AssetManager, and worked on my phone:

    this.groundTexture = new B.Texture(groundTextureUrl, this.scene, false, false, undefined, () => {
      this.groundTexture.updateSamplingMode(B.Texture.NEAREST_NEAREST);
    });
    this.groundTexture.uScale = -1;
    this.groundMaterial = new B.StandardMaterial(`groundMaterial-${this.name}`, this.scene);
    this.mesh.material = this.groundMaterial;

And of course all of the textures loaded correctly I checked with the debug layer on mobile.

2

Do you get any console messages when you open on the phone? What browser are you using? I’ll also tag @sebavan who might have a better idea of what’s going on :slight_smile:

3

@robcaa is it fully transparent or is the mesh just invisible ?

it looks like it might be realted to chrome known issue as it works in webgl1: Problems on Chrome Mobile since December 7th, 2023 - #25 by Mickael_PASTOR

You could try either the latest babylon version or use engine.disableUniformBuffers = true; right after the engine creation.

1 Like
4

Thank you very much for your hard work!
Updated the Babylon core solved the issue.

This community is awesome :slight_smile:
I will ask sooner next time.