Problem envmap examples with firefox for Android on releases greater than version 57

Description of the problem

Hello,

We’re facing a problem with some envmap using. On firefox for Android, if you try to run (for example) this sample : https://threejs.org/examples/webgl_loader_gltf.html the 3D helmet model will not be rendered.

We did investigations and we noticed than the problem is present from Firefox for Android 57 and until last release (the problem is present on firefox beta too…)

The firefox console displays the following error :

THREE.WebGLRenderer 92
three.js:21172:3
THREE.GLTFLoader: Duplicating UVs to support aoMap.
GLTFLoader.js:2262:7
THREE.WebGLShader: Shader couldn’t compile.
three.js:16089:4
WebGLShader
https://threejs.org/build/three.js:16089:4
WebGLProgram
https://threejs.org/build/three.js:16624:26
WebGLPrograms/this.acquireProgram
https://threejs.org/build/three.js:17052:15
initMaterial
https://threejs.org/build/three.js:22633:15
setProgram
https://threejs.org/build/three.js:22773:5
WebGLRenderer/this.renderBufferDirect
https://threejs.org/build/three.js:21797:18
renderObject
https://threejs.org/build/three.js:22556:5
renderObjects
https://threejs.org/build/three.js:22526:6
WebGLRenderer/this.render
https://threejs.org/build/three.js:22288:33
animate
https://threejs.org/examples/webgl_loader_gltf.html:131:5
THREE.WebGLShader: gl.getShaderInfoLog() fragment WARNING: 0:1: extension ‘GL_EXT_shader_texture_lod’ is not supported
ERROR: 0:117: ‘textureCubeLodEXT’ : no matching overloaded function found
ERROR: 0:117: ‘=’ : cannot convert from ‘const float’ to ‘4-component vector of float’
ERROR: 2 compilation errors. No code generated.

1: #extension GL_OES_standard_derivatives : enable
2: #extension GL_EXT_shader_texture_lod : enable
3: precision highp float;
4: precision highp int;
5: #define SHADER_NAME MeshStandardMaterial
6: #define STANDARD
7: #define GAMMA_FACTOR 2
8: #define USE_MAP
9: #define USE_ENVMAP
10: #define ENVMAP_TYPE_CUBE
11: #define ENVMAP_MODE_REFLECTION
12: #define ENVMAP_BLENDING_MULTIPLY
13: #define USE_AOMAP
14: #define USE_EMISSIVEMAP
15: #define USE_NORMALMAP
16: #define USE_ROUGHNESSMAP
17: #define USE_METALNESSMAP
18: #define TEXTURE_LOD_EXT
19: uniform mat4 viewMatrix;
20: uniform vec3 cameraPosition;
21: #define TONE_MAPPING
22: #ifndef saturate
23: #define saturate(a) clamp( a, 0.0, 1.0 )
24: #endif
25: uniform float toneMappingExposure;
26: uniform float toneMappingWhitePoint;
27: vec3 LinearToneMapping( vec3 color ) {
28: return toneMappingExposure * color;
29: }
30: vec3 ReinhardToneMapping( vec3 color ) {
31: color *= toneMappingExposure;
32: return saturate( color / ( vec3( 1.…
three.js:16095:4
THREE.WebGLProgram: shader error: 0 gl.VALIDATE_STATUS false gl.getProgramInfoLog Must have an compiled fragment shader attached. WARNING: 0:1: extension ‘GL_EXT_shader_texture_lod’ is not supported
ERROR: 0:117: ‘textureCubeLodEXT’ : no matching overloaded function found
ERROR: 0:117: ‘=’ : cannot convert from ‘const float’ to ‘4-component vector of float’
ERROR: 2 compilation errors. No code generated.
three.js:16658:4
Error: WebGL warning: linkProgram: Must have an compiled fragment shader attached.
three.js:16642:3
Error: WebGL warning: useProgram: Program has not been successfully linked.
three.js:19211:5
Error: WebGL: No further warnings will be reported for this WebGL context. (already reported 32 warnings)

The problem seems to be independent of the Android version (reproduced on Android 7 and 8), and no problem on iOS

Three.js version
  • r92
Browser
  • [] All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • [] All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

Author: Fantashit

2 thoughts on “Problem envmap examples with firefox for Android on releases greater than version 57

Comments are closed.