Three.js обнаруживает поддержку webgl и возвращается к обычному холсту - PullRequest
37 голосов
/ 28 марта 2012

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

Ответы [ 2 ]

61 голосов
/ 28 марта 2012

Да, это возможно. Вы можете использовать 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

12 голосов
/ 06 августа 2014

Указатель Хуана Мелладо на детектор 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();
...