How to support old browsers?

Questions
1

Hello there,

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 weak 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 lines that breaking are:

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

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

I appreciate any help.
Cheers!

2

We just added a new manual page that might help you. It will go live at the next release, but in the meantime you can see it here:

https://rawgit.com/mrdoob/three.js/dev/docs/#manual/introduction/Browser-support

Let me know if you think it’s helpful, or should be changed in some way.

BTW, what you should get out of it is that you may not be able to use the WebGLRenderer on these old devices and may have to fallback to CanvasRenderer or one of the others.

3

HI looeee,

Thanks for the quick and helpful reply! The idea of choosing ThreeJS was to use take advantage of the raw power of WebGL. Since the devices are old, I wanted to make the most out of them so webgl seemed like the best option for fast graphics rendering.

I don’t know anything about WebGL but I can imagine there are a bunch of ways of rendering textures into surfaces so I bet there must be a way that my devices can do that and still be better of than relying on Canvas2D.

It would be awesome if when ThreeJS started, it would output the unavailable features (renderers, materials, shaders, etc…). Similar to what it already does for stuff like THREE.WebGLRenderer: WEBGL_depth_texture extension not supported.. Or maybe this info could be available on the documentation page you indicated. Something like, “THREE.MeshPhongMaterial requires OES_texture_float_linear extension” and so on. (by the way, that was just a random example. I don’t know if both things are related at all ˆ_ˆ")

I’ll play around with different renderers to see if I can make it work.
Do you have any suggestion on what would be the most basic way to render a texture on a surface using ThreeJS with the WebGL Renderer?

Cheers!