How to identify IE11 WebGL compatibility (clearStencil,shaders) correctly

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