2

I'm trying to make some simple 3D scenes using ThreeJS and so far so good. The problem started once I tried my demo on some really old and limited mobile devices.

I'm using the latest CDN version of ThreeJS and once the demo starts I get these error messages:

THREE.WebGLRenderer 88
THREE.WebGLRenderer: WEBGL_depth_texture extension not supported.
THREE.WebGLRenderer: OES_texture_float_linear extension not supported.
THREE.WebGLRenderer: OES_texture_half_float extension not supported.
THREE.WebGLRenderer: OES_texture_half_float_linear extension not supported.
THREE.WebGLRenderer: OES_element_index_uint extension not supported.
THREE.WebGLRenderer: ANGLE_instanced_arrays extension not supported.
THREE.WebGLShader: gl.getShaderInfoLog() vertex Success.
THREE.WebGLShader: Shader couldn't compile.
THREE.WebGLProgram: shader error:  0 gl.VALIDATE_STATUS false gl.getProgramInfoLog Link Error: Fragment shader was not successfully compiled.

The webglreport of my target browser says this:

Context Name: experimental-webgl
GL Version: WebGL 1.0 (OpenGL ES 2.0 build 1.7@788837)
Shading Language Version: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.00 build 1.7@788837)
Renderer: WebKit WebGL

I also discovered that WebGLRenderingContext.getShaderPrecisionFormat() is not available.

I'm just trying to load an image as a texture and use it as a material of my spinning box. The relevant part of the code that is incompatible:

// Demo based on https://jsfiddle.net/f2Lommf5/
var texture = new THREE.TextureLoader().load( "10.jpg" );
var material = new THREE.MeshBasicMaterial({map: texture});

So, back to the original question, is there a version of ThreeJS that is indicated for limited browsers/devices? Or maybe a different way of applying textures to meshes that is more compatible?

LJᛃ
  • 5,935
  • 2
  • 20
  • 31
Bill_BsB
  • 194
  • 1
  • 14

1 Answers1

1

I guess that You might have a problem with supporting WebGL functionality in older device. In that case You should use CanvasRenderer which should be supported on older browsers. Although it's performance is much lower than WebGL.

We are using a simple logic of checking if browser supports WebGL like here: https://stackoverflow.com/a/22953053/8265229 and then when browser does not support it, we use CanvasRenderer instead of WebGLRenderer.

Patryk
  • 65
  • 7