PBR Material reflection is not the same on mobile and PC

Questions
1

Hi.

I’ve noticed this in several of my projects and I recreated the issue in the playground.

https://playground.babylonjs.com/#UR0ZVJ#1

You can see that metallic property of the material is 1 and roughness is 0.5. On PC it looks as expected but when the same link is opened via mobile device, reflection behaves like roughness is 0, so “almost” mirror-like. So I am wondering what is going on here.

Thanks.

2

The main issue is HDRTexture rely exclusively on mipmap who might be different depending on DPI.

You should use a preprocessed texture instead : Use a HDR environment (for PBR) - Babylon.js Documentation

3

Okay. So I used the dds image and on mobile it looks completely dark for some reason. (I’ve used same parking image for all examples):

new BABYLON.CubeTexture.CreateFromPrefilteredData("textures/parking.dds, scene);
https://playground.babylonjs.com/#UR0ZVJ#2

So that doesn’t work for me. But this one works just fine.

new BABYLON.CubeTexture(“textures/parking.env”, scene);
https://playground.babylonjs.com/#UR0ZVJ#3

So I believe that’s the workflow I am gonna use. Thank you for the answer

4

Hi. I had the same problem (dark PBR when seen on mobile) The same solution worked for me. I mean, converting my .hdr environment map to .env format (not .dds) following the method explained in Use of HDR environment Thanks

2 Likes