Identifying IE11 WebGL compatibility (specifically clearStencil and shaders) accurately

Question

Identifying IE11 WebGL compatibility (specifically clearStencil and shaders) accurately

Some webGL methods are not functioning properly in IE11 Version 11.0.9600.16428 and older versions, as detailed here: https://github.com/mrdoob/three.js/issues/3600)

For example, the clearStencil method seems to exist but does not work as expected. I am looking for a way to detect this issue and provide feedback to the user. I attempted to use Detector.js from Three.js, but it only checks if the browser and graphics card support WebGL, not if they support all necessary features.

I attempted a WebGL check like so:

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 supportsWebGL method returns true, but throws an error like:

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

Now, I want my supportsWebGL method to recognize this incompatibility and return false. Any suggestions on how to achieve this?

javascript three.js webgl internet-explorer-11 browser-support

Answer 1

Answer №1

I managed to find a solution using the _gl.getError() method.

var checkWebGLSupport=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;
    }
}

The method will only return true if errors is equal to zero. You can add other methods you want to check for in the try/catch block.

If you're looking for a solution that doesn't rely on Three.js, consider this alternative:

var checkWebGLSupport=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

I managed to find a solution using the _gl.getError() method.

var checkWebGLSupport=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;
    }
}

The method will only return true if errors is equal to zero. You can add other methods you want to check for in the try/catch block.

If you're looking for a solution that doesn't rely on Three.js, consider this alternative:

var checkWebGLSupport=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 3

Answer №2

A method that comes to mind is checking the Browser and its specific version.

Use this code snippet to extract the browser name along with its major version:

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 script will output a text in the form [Browsername Version], for example: Internet Explorer 11.

Answer 4

A method that comes to mind is checking the Browser and its specific version.

Use this code snippet to extract the browser name along with its major version:

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 script will output a text in the form [Browsername Version], for example: Internet Explorer 11.

Identifying IE11 WebGL compatibility (specifically clearStencil and shaders) accurately

Answer №1

Answer №2

Similar questions

Testing the jQuery UI datepicker with QUnit: A Step-by-Step Guide

Error in Syntax & Function is Undefined

Why is it that every Strapi user is able to modify any user's profile?

Steps for generating a unique division element for every javascript response

Texture's shadow map opaqueness

Redefining the onClick function in the Redux 'presentation' component to include parameters

Is it possible to incorporate JSON objects within 'if' conditions?

What is the best way to send the accurate data type from PHP to Javascript?

Is it possible to asynchronously retrieve the information from the HTTP request body in a Node.js environment?

What is the purpose of declaring a variable within a class and then assigning it to "this" in the constructor?

Why is the appsecret_proof invalid?

Executing an Ajax request to a document containing <script> elements

AngularJS - Use a directive to hide a div upon clicking inside an inner element

How can the total price for a shopping cart be computed in React/Redux?

Having trouble with installing node-sass on a Windows system

Transferring a file between server APIs using Node.js (Express)

Loading an HTML page inside a tab's content in Angular: A seamless and efficient approach

Speedy Guide to React's useState and useEffect

Displaying an alert when the text box contains a duplicate value

Struggling with the nested array of objects