Three.js erkennen Webgl-Unterstützung und Fallback auf regulären Canvas

Question

Kann jemand, der Three.js verwendet hat, mir sagen, ob es möglich ist, Webgl-Unterstützung zu erkennen, und, wenn nicht vorhanden, Fallback zu einem Standard-Canvas-Render?

Answer 1

Ja, es ist möglich. Sie können CanvasRenderer anstelle von WebGLRenderer verwenden.

über WebGL-Erkennung:

1) Lesen Sie diesen WebGL Wiki-Artikel: 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 hat bereits einen WebGL-Detektor: https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js

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

3) Überprüfen Sie auch die Modernizr Detektor: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/webgl.js

Answer 2

Juan Mellado den Zeiger auf den Three.js Detektor war super nützlich, aber ich ziehe nicht die ganze Datei in meinem Projekt zu bringen. Hier ist also die extrahierte Funktion Detector.webgl().

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

Und es wird verwendet, ähnlich wie sein Beispiel:

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