Question

我正在尝试使用ThreeJS制作一些简单的3D场景，并且到目前为止一直很好。一旦我在一些非常古老且有限的移动设备上尝试我的演示，问题就开始了。

我正在使用最新的ThreeJS CDN版本，一旦演示开始，我会收到以下错误消息：

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.

我的目标浏览器的webglreport说明了这一点：

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

我还发现 WebGLRenderingContext.getShaderPrecisionFormat（）不可用。

我只是尝试将图像作为纹理加载并将其用作我的旋转框的材料。代码的相关部分是不兼容的：

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

那么，回到最初的问题，是否有适用于有限浏览器/设备的ThreeJS版本？或者可能采用不同的方式将纹理应用于更兼容的网格？

Answer 1

我想您可能在旧设备中支持WebGL功能时遇到问题。在这种情况下，您应该使用旧版浏览器应支持的CanvasRenderer。虽然它的性能远低于WebGL。

我们使用一个简单的逻辑来检查浏览器是否支持WebGL：https://stackoverflow.com/a/22953053/8265229然后当浏览器不支持它时，我们使用CanvasRenderer而不是WebGLRenderer。

如何使用ThreeJS支持旧/有限的浏览器/设备？

1 个答案: