Check the cubemap max texture size

Questions
1

I’ve made a small example using cubemaps (splitted in up/down, left/right and so) and it looks that 2048x2048 works nice in PCs and recent mobiles but looks black in old smartphones.

Is there any way to check if that texture is supported by the device?

Thank you!

2

You could check with engine.getCaps().maxCubemapTextureSize

This will give you the information provided by WebGL.

3

Strange it says “max cube size:4096” but using 2048 renders black (1024 looks ok and 2048 too in almost any other device)

4

Is it the same smartphone having webgl2 issues ???

5

Yes that one

6

Is webgl1 also giving the same results ?

7

weird! it loads ok in webgl1 but fails on a more modern device! (this time is caused by a material or I guess so)

8

Remote debug via USB on the “modern” device Xiaomi redmi note 7, on its bigger brother Xiaomi Mi Mix 2S works perfectly.

        var invisibleMaterial = new BABYLON.StandardMaterial("invisiblemat", scene);
        
        invisibleMaterial.backFaceCulling = false;
        invisibleMaterial.indexOfRefraction = 1.0;
        invisibleMaterial.refractionTexture = textureSource;
        invisibleMaterial.refractionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        invisibleMaterial.invertRefractionY = false;
        invisibleMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
        invisibleMaterial.specularColor = new BABYLON.Color3(0, 0, 0);

image
image.jpg921×389 162 KB

9

It would be amazing if you could share your scene ?

10

I can do it but probably it could be useless I tested it in two tablets, a couple of computers and 10 smartphones including high end devices and really bad ones and it only fails in that Xiaomi one so probably it could be a bug on that chipset or the android layer of Xiaomi.

Definitely it has something to do with materials and WebGL2

        var invisibleMaterial = new BABYLON.StandardMaterial("invisiblemat", scene);
        
        invisibleMaterial.backFaceCulling = false;
        invisibleMaterial.indexOfRefraction = 1.0;
        invisibleMaterial.refractionTexture = textureSource;
        invisibleMaterial.refractionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        invisibleMaterial.invertRefractionY = false;
        invisibleMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
        invisibleMaterial.specularColor = new BABYLON.Color3(0, 0, 0);

That fails but a custom shader that makes more or less the same (cubic environment without lighting shadows etc) works like a charm in all the tested devices.