WebGL Feature Test Tutorial

WebGL Feature Test Example Introduction Method getContext() Method getContextAttributes() Method getParameter() Random WebGL Tests Summary WebGL Feature Test Source Code

Introduction

This article describes how to determine which WebGL features are available in the current Web browser. Learn to test WebGL capabilities with JavaScript and WebGL methods. Methods discussed include getContext(), getParameter(), and getContextAttributes(), along with a few other feature tests.

Method getContext() obtains a reference to the WebGLRenderingContext. Method getParameter() displays a range of WebGL features. Method getContextAttributes() displays a list of attribute properties. Last try some random WebGL tests.

A number of initialization details were left out, to focus on the main topic. Most WebGL projects initialize as described in Seven Thunder Software's Learn WebGL Series. However information in this tutorial should apply to other WebGL projects, such as those that use Unity or Three.js, as well.

Method getContext()

Method getContext() usually returns a WebGLRenderingContext. Most WebGL performance tests require a valid WebGLRenderingContext. The following line of code should return a WebGLRenderingContext. However some browsers return a WebGLRenderingContext with parameters experimental-webgl, webkit-3d, or moz-webgl, rather than webgl. See the source code page for other ways to retrieve the WebGLContext.

var gl = canvas.getContext(
'webgl'
);

Method getContextAttributes()

Method getContextAttributes() returns either a reference to WebGLContextAttributes or null. If the context has been lost then the return value equals null. Otherwise WebGLContextAttributes may include the following properties.

alpha, 
antialias, 
depth, 
stencil,
premultipliedAlpha, 
preserveDrawingBuffer,
failIfMajorPerformanceCaveat

For example assume the variable gl is a valid WebGLRenderingContext. In the following code, method getContextAttributes() assigns a reference of type WebGLContextAttributes to the variable named cA. The value of property cA.stencil equals either true or false. With stenciling enabled cA.stencil equals true in the following code sample.

var cA = gl.getContextAttributes();
element.innerHTML = "stencil:"+cA.stencil;

Method getParameter()

Method getParameter returns values related to a number of WebGL features. Pass any of the following WebGL constants to method getParameter(). For example getParameter(gl.VERSION) returns the browser's WebGL version.

VERSION,
SHADING_LANGUAGE_VERSION,
VENDOR,
RENDERER,
ACTIVE_TEXTUREGLenum,
ALIASED_LINE_WIDTH_RANGE,
ALIASED_POINT_SIZE_RANGE,
ALPHA_BITS,
ARRAY_BUFFER_BINDING,
BLEND,
BLEND_COLORFloat32Array,
BLEND_DST_ALPHA,
BLEND_DST_RGB,
BLEND_EQUATION,
BLEND_EQUATION_ALPHA,
BLEND_EQUATION_RGB,
BLEND_SRC_ALPHA,
BLEND_SRC_RGB,
BLUE_BITS,
COLOR_CLEAR_VALUE,
COLOR_WRITEMASK

Random WebGL Tests

This section includes a few more random WebGL tests. For example call WebGL method getError() to determine if an error exists, test the drawingBufferWidth, or check for the existence of method requestAnimationFrame(). See the Random WebGL Tests section of the source code page for details.

Test for Float32Array

A number of WebGL examples at 7Thunders.biz test for the existence of type Float32Array when the Web page first loads. If type Float32Array has not been defined, then it's safe to assume WebGL won't run. The following listing demonstrates testing for the existence of WebGL with Float32Array.

if (typeof Float32Array === 'undefined'){
 // WebGL is unavailable
}

If you see nothing in the error list generated by the sample JavaScript then features tested seem valid. If you're having problems with a browser or device see the WebGL Performance Test Source Code or download and modify the JavaScript source code GLTest.js.

Summary

This article described how to determine which WebGL features are available in the current Web browser. The tutorial explained how to test WebGL capabilities with JavaScript and WebGL methods. Methods discussed include getContext(), getParameter(), and getContextAttributes(), along with a few other feature tests.