Environment mapping only works on Safari after Three.js upgrade

Questions
,
1

I recently upgraded three.js from r89 to r121. Since it’s such a big leap, there has been lots of issues but I have managed to fix most of them.

One of the remaning is that my PBR shader stopped working except on Safari.

This is what it looks on Safari

Screen Shot 2020-11-11 at 3.35.32 PM
Screen Shot 2020-11-11 at 3.35.32 PM958×1288 116 KB

But on Chrome, Chromium, and Firefox, it looks like this

Screen Shot 2020-11-11 at 4.00.07 PM
Screen Shot 2020-11-11 at 4.00.07 PM1024×1332 96.5 KB

As you can see, environment mapping is not working.

What can I check on this situation? What kind of feature only works on Safari?

2

I found that GL_EXT_shader_texture_lod is only defined in Safari. Why don’t Chrome or Firefox have it defined?

3

I found related thread

4

There was this part in the shader

    #ifdef GL_EXT_shader_texture_lod
    vec3 specularEnvColor = m_EnvironmentLightIntensity * RGBEToVec3(textureCubeLodEXT(sSpecularEnvironmentMap, worldR, mipLevel));           
    #else
    vec3 specularEnvColor = diffuseEnvColor;
    #endif

Changed textureCubeLodEXT to textureLod like this

    vec3 specularEnvColor = m_EnvironmentLightIntensity * RGBEToVec3(textureLod(sSpecularEnvironmentMap, worldR, mipLevel));

Now it works on Chrome but not in Safari.

5

Solved

Firefox and Chrome supports WebGL2 therefore has textureLod().
Safari doesn’t support WebGL2 but supports EXT_shader_texture_lod therefore has textureCubeLodEXT().

What I had to do was to use different functions for each cases.

    #ifdef GL_EXT_shader_texture_lod
    vec3 specularEnvColor = m_EnvironmentLightIntensity * RGBEToVec3(textureCubeLodEXT(sSpecularEnvironmentMap, worldR, mipLevel));           
    #else
    vec3 specularEnvColor = m_EnvironmentLightIntensity * RGBEToVec3(textureLod(sSpecularEnvironmentMap, worldR, mipLevel));           
    #endif
1 Like