Three.js обнаруживает поддержку webgl и возвращает к обычному холсту

Question

Может ли кто-нибудь, кто использовал three.js, рассказать мне, можно ли обнаружить поддержку webgl и, если нет, вернуть резервную копию стандартного Canvas?

Answer 1

Да, это возможно. Вы можете использовать CanvasRenderer вместо WebGLRenderer.

О обнаружении WebGL:

1) Читать эту 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 уже есть детектор WebGL: https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js

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

3) Проверьте также детектор Modernizr: указатель https://github.com/Modernizr/Modernizr/blob/master/feature-detects/webgl.js

Answer 2

Juan Mellado к детектору three.js был супер полезно, но я предпочитаю не доводить весь файл в моем проекте. Итак, вот извлеченная функция Detector.webgl().

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

И он используется аналогично его пример:

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