ingun37
November 11, 2020, 8:32am
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
But on Chrome, Chromium, and Firefox, it looks like this
As you can see, environment mapping is not working.
What can I check on this situation? What kind of feature only works on Safari?
ingun37
November 11, 2020, 9:02am
2
I found that GL_EXT_shader_texture_lod is only defined in Safari. Why don’t Chrome or Firefox have it defined?
ingun37
November 11, 2020, 9:03am
3
I found related thread
opened 03:15PM - 19 Jul 20 UTC
closed 10:04AM - 20 Jul 20 UTC
I'm working on a PBR Material, extensions.shaderTextureLOD=true works fine on r117, but r118 and later fragment shader fails compilation.
ERROR: 0:253: 'textureCubeLodEXT'...
Question
ingun37
November 11, 2020, 9:08am
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.
ingun37
November 11, 2020, 9:48am
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