How to get OpenGL version using Javascript?

In JavaScript, to retrieve the OpenGL version, you typically use WebGL, which is based on OpenGL ES—a subset of OpenGL designed specifically for web development. Here is a clear step-by-step example demonstrating how to obtain the WebGL version in JavaScript, which indirectly provides the OpenGL ES version information.

Step 1: Create a Canvas Element

First, create a canvas element in your HTML document or dynamically via JavaScript.

html
<canvas id="glcanvas"></canvas>

Step 2: Obtain the WebGL Context

Use the getContext method to obtain the WebGL context. There are two possible contexts: webgl (WebGL 1.0, based on OpenGL ES 2.0) and webgl2 (WebGL 2.0, based on OpenGL ES 3.0).

javascript
var canvas = document.getElementById('glcanvas');
var gl = canvas.getContext('webgl') || canvas.getContext('webgl2');

Step 3: Retrieve and Print OpenGL Version Information

Once you have the WebGL context, use the getParameter method to retrieve information such as VERSION and SHADING_LANGUAGE_VERSION, which represent the WebGL version and shading language version, respectively.

javascript
if (gl) {
    var version = gl.getParameter(gl.VERSION);
    var shadingLangVersion = gl.getParameter(gl.SHADING_LANGUAGE_VERSION);
    console.log('WebGL Version: ' + version);
    console.log('Shading Language Version: ' + shadingLangVersion);
} else {
    console.log('Your browser does not support WebGL');
}

Example Explanation

This example code first attempts to obtain the WebGL context. If the browser supports WebGL, it logs the WebGL version and shading language version, which indirectly indicate the underlying OpenGL ES version.

Note: The WebGL version corresponds directly to the OpenGL ES version. Specifically, WebGL 1.0 is based on OpenGL ES 2.0, and WebGL 2.0 is based on OpenGL ES 3.0. Thus, by obtaining the WebGL version, you can determine the OpenGL ES version.

Conclusion

By following these steps, you can indirectly obtain the OpenGL ES version information in JavaScript. This is particularly useful for developing web applications that rely on specific graphics features, ensuring compatibility across most devices.