Как определить IE11 WebGL совместимость (clearStencil, шейдеры) правильно

Question

В IE11 версии 11.0.9600.16428 и ниже некоторые методы WebGL не работают правильно (как указано здесь: https://github.com/mrdoob/three.js/issues/3600)

Одним из примеров является метод clearStencil. Проблема в том, что метод существует, но он работает неправильно. Я хотел бы обнаружить это и дать пользователю некоторую обратную связь. Я попробовал Detector.js из Three.js, но он проверяет только, поддерживает ли браузер и графическую карту WebGL, а не поддерживает ли они все соответствующие функции.

Я попытался сделать чек WebGL так:

var supportsWebGL=function(){ 
    if(Detector.webgl){ 
     var _canvas = document.createElement('canvas'); 
     var _gl = _canvas.getContext('webgl') || _canvas.getContext('experimental-webgl'); 
     try{ 
      _gl.clearStencil(0); 
     }catch(e){ 
      return false; 
     } 
     return true; 
    }else{ 
     return false; 
    } 
} 

В IE11 (11.0.9600.16428) метод supportsWebGL возвращает истину, но дает мне ошибку вроде этого:

WEBGL11095: INVALID-OPERATION: clearStencil: Метод не в настоящее время поддерживается.

Теперь я хочу, чтобы мой метод supportsWebGL обнаружил эту неспособность и возвращает false. Кто-нибудь знает, как это сделать?

Answer 1

Я нашел способ сделать это с помощью _gl.getError()

var supportsWebGL=function(){ 
    if(Detector.webgl){ 
     var _canvas = document.createElement('canvas'); 
     var _gl = _canvas.getContext('webgl') || _canvas.getContext('experimental-webgl'); 
     var errors=undefined;   
     try{ 
      _gl.clearStencil(0); 
      errors=_gl.getError(); 
     }catch(e){ 
      return false; 
     } 
     return errors==0; 
    }else{ 
     return false; 
    } 
} 

Только если errors равны нулю метод будет возвращать true. Если у вас есть другие методы, которые вы хотите проверить, просто добавьте их в блок try/catch.

Если вам нужно решение, которое работает без Three.js, проверить это:

var supportsWebGL=function(){ 
    if(!window.WebGLRenderingContext)return false; 
    try{ 
     var _canvas = document.createElement('canvas'); 
     var _gl = _canvas.getContext('webgl') || _canvas.getContext('experimental-webgl'); 
     _gl.clearStencil(0); 
     var errors=_gl.getError(); 
     return errors==0; 
    }catch(e){ 
     return false; 
    } 
} 

Answer 2

Лучший способ, о котором я могу сейчас думать, - проверить браузер и его версию.

Возьмите этот код, чтобы получить имя браузера и его версии (только основной):

var browserInformation = (function() { 
var temporal = undefined; 
var userAgent = navigator.userAgent; 
var matches = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; 
if (/trident/i.test(matches[1])) { 
    temporal = /\brv[ :]+(\d+)/g.exec(userAgent) || []; 
    return 'Internet Explorer ' + (temporal[1] || ''); 
} 
if (matches[1] === 'Chrome') { 
    temporal = userAgent.match(/\bOPR\/(\d+)/); 
    if (temporal != null) 
     return 'Opera ' + temporal[1]; 
} 
matches = matches[2] ? [matches[1], matches[2]] : [navigator.appName, navigator.appVersion, '-?']; 
if ((temporal = userAgent.match(/version\/(\d+)/i)) != null) 
    matches.splice(1, 1, temporal[1]); 
return matches.join(' ');})(); 

Этот фрагмент кода возвращает строку в формате [Browsername Version], т.е. Internet Explorer 11.