ThreeJS로 이전/제한된 브라우저/장치를 지원하는 방법은 무엇입니까?

Question

저는 ThreeJS를 사용하여 간단한 3D 장면을 만들려고하고 있습니다. 정말로 오래되고 제한된 일부 휴대 기기에서 데모를 시도한 후에 문제가 시작되었습니다.

내가 ThreeJS의 최신 CDN 버전을 사용하고 있는데 데모가 시작되면 나는 이러한 오류 메시지가 얻을 : 또한

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 

내가 :

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이 말한다 발견했습니다 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) 브라우저가 지원하지 않는지 확인하는 간단한 로직을 사용하고 있으며 브라우저가 지원하지 않으면 WebGLRenderer 대신 CanvasRenderer를 사용합니다.