Three.js detect webgl support and fallback to regular canvas

问题:

Can anyone who has used three.js tell me if its possible to detect webgl support, and, if not present, fallback to a standard Canvas render?

回答1:

Yes, it's possible. You can use CanvasRenderer instead of WebGLRenderer.

About WebGL detection:

1) Read this WebGL wiki article: 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 already has a WebGL detector: https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js

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

3) Check also the Modernizr detector: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/webgl.js

回答2:

Juan Mellado's pointer to the Three.js detector was super useful, but I prefer not to bring the whole file into my project. So here is the extracted Detector.webgl() function.

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

And it is used similar to his example:

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

文章来源: Three.js detect webgl support and fallback to regular canvas