如何正确识别IE11 WebGL兼容性（clearStencil，着色器）

Question

In IE11 Version 11.0.9600.16428 and below some WebGL Methods are not working correctly (as mentioned here: https://github.com/mrdoob/three.js/issues/3600 )

One Example is the method clearStencil . The Problem is that the method exists, but it's not working correctly. I would like to detect that and give the user some feedback. I tried the Detector.js from Three.js but it only checks if the browser and graphic card support WebGL and not if they support all relevant features.

I tried to do a WebGL check like this:

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;
    }
}

In IE11 (11.0.9600.16428) the method supportsWebGL returns true, but gives me an Error like this:

WEBGL11095: INVALID-OPERATION: clearStencil: Method not currently supported.

Now I want my Method supportsWebGL to detect that incompability and return false. Does anyone knows how to do that?

Answer 1

I found a way to do this by using _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;
    }
}

Only if errors are equal to zero the method will return true . If you have other methods you want to check for, just add them to the try/catch block.

If you need a solution that works without Three.js, check this out:

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

The best way I can think of for now, is to check the Browser and its version.

Take this code snippet to get the browser name and its version (only major):

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(' ');})();

This snippet will return a string in the format [Browsername Version] , ie Internet Explorer 11 .