web-dev-qa-db-fra.com

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

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?

javascripthtml5-canvasthree.jswebgl
37
Bachalo

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

À propos de la détection WebGL:

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

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

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

61
Juan Mellado

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é similaire à son exemple:

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