Three.js détecte le support webgl et le retour au canevas normal

Question

Quelqu'un qui a utilisé three.js peut-il me dire s'il est possible de détecter le support webgl et, s'il n'est pas présent, de revenir à un rendu Canvas standard?

Answer 1

Oui, c'est possible. Vous pouvez utiliser CanvasRenderer au lieu de WebGLRenderer.

Sur WebGL de détection:

1) Lire ce WebGL article de wiki: 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) Trois.js a déjà un détecteur de WebGL: https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js

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

3) Vérifier également la Modernizr détecteur: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/webgl.js

Answer 2

Le pointeur de Juan Mellado sur le détecteur Three.js était super utile, mais je préfère ne pas intégrer tout le fichier dans mon projet. Voici donc la fonction Detector.webgl () extraite.

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

Et il est utilisé de manière similaire à son exemple:

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