Soru Three.js, webgl desteğini algılar ve normal tuvallere geri döner


Üç.js kullanan herkes webgl desteğini algılamanın mümkün olup olmadığını ve eğer sunulmuyorsa standart bir Canvas için geri dönüş yapıldığını söyleyebilir mi?


36
2018-03-28 00:59


Menşei




Cevaplar:


Evet mümkün. Kullanabilirsiniz CanvasRenderer yerine WebGLRenderer.

WebGL algılama hakkında:

1) Bu WebGL wiki makalesini okuyun: 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'nin bir WebGL dedektörü zaten var: https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js

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

3) Modernizr dedektörünü de kontrol edin: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/webgl.js


60
2018-03-28 09:46



Yöntem, WebGL'yi destekliyorsa ancak bir sebepten (sürücü kara listeye alınmış gibi) kullanamıyorsa, yöntem 1/3 başarısız olur. Bu nedenle, Yöntem 2, bir try / catch bloğuyla bir işlev kullanır ve aynı zamanda bağlamın gerçekten oluşturulabildiğini de kontrol eder. . - Joan Rieu


Juan Mellado'nun Three.js dedektörüne gösterdiği işaret çok yararlıydı, ancak tüm dosyayı projeme dahil etmemeyi tercih ediyorum. Yani burada ayıklanan Detector.webgl () işlevi.

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

Ve onun örneğine benzer şekilde kullanılır:

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

11
2017-08-06 06:29