Three.js가 webgl 지원을 감지하고 일반 캔버스로 대체합니다.

Question

three.js를 사용하는 사람이 webgl 지원을 감지 할 수 있는지 알려주고, 없으면 표준 Canvas로 대체 할 수 있습니까?

Answer 1

예, 가능합니다. WebGLRenderer 대신 CanvasRenderer을 사용할 수 있습니다.

1)이 WebGL을 위키 기사보기 : WebGL을 감지 소개

https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js

renderer = Detector.webgl? new THREE.WebGLRenderer(): new THREE.CanvasRenderer(); 

: http://www.khronos.org/webgl/wiki/FAQ

if (!window.WebGLRenderingContext) { 
    // the browser doesn't even know what WebGL is 
    window.location = "http://get.webgl.org"; 
    } else { 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("webgl"); 
    if (!context) { 
     // browser supports WebGL but initialization failed. 
     window.location = "http://get.webgl.org/troubleshooting"; 
    } 
    } 

2) 이미 Three.js를가 WebGL을 검출기가 있습니다

3) 확인도 모더 나이저 검출기 다음 Three.js를 검출기에 https://github.com/Modernizr/Modernizr/blob/master/feature-detects/webgl.js

Answer 2

후안 Mellado의 포인터는 매우 유용했다,하지만 난 내 프로젝트에 전체 파일을 가지고 있지 선호합니다. 여기에 추출 된 Detector.webgl() 함수가 있습니다.

function webglAvailable() { 
    try { 
     var canvas = document.createElement("canvas"); 
     return !! 
      window.WebGLRenderingContext && 
      (canvas.getContext("webgl") || 
       canvas.getContext("experimental-webgl")); 
    } catch(e) { 
     return false; 
    } 
} 

그리고 자신의 예와 유사한 사용 : 브라우저가 WebGL을 지원하는 경우 실패합니다

renderer = webglAvailable() ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();