1 2 3 4 5

WebGL context

5

WebGL lives inside HTML <canvas> element. In this lesson we will create a simple HTML page with <canvas> element, get WebGL context and write its version info into developer's console.

<!DOCTYPE html>
<html>
    <body>
        <canvas id="canvas" width="800" height="600"></canvas>
        <script type="text/javascript">
            const canvas = document.getElementById("canvas");
            const gl = canvas.getContext("webgl2");
            console.log("WebGL version: " + gl.getParameter(gl.VERSION));
            console.log("GLSL version: " + gl.getParameter(gl.SHADING_LANGUAGE_VERSION));
            console.log("Vendor: " + gl.getParameter(gl.VENDOR));
        </script>
    </body>
</html>

Open developer's console. You should see something like:

WebGL version: WebGL 2.0 (OpenGL ES 3.0 Chromium)
GLSL version: WebGL GLSL ES 3.00 (OpenGL ES GLSL ES 3.0 Chromium)
Vendor: WebKit

However if you see an error like this, then your browser doesn't support WebGL2:

Uncaught TypeError: Cannot read property 'getParameter' of null

In that case you should fallback to WebGL1 and replace canvas.getContext("webgl2") with canvas.getContext("webgl"). Now you should see something like:

WebGL version: WebGL 1.0 (OpenGL ES 2.0 Chromium)
GLSL version: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)
Vendor: WebKit

If you still get an error then your browser doesn't support WebGL at all. In this case you should update your browser to the most recent version.

Lesson 1
Lesson 3
Share this page:

Learning plan

A few words about 3D graphics APIs before we get started
2. WebGL context
How to setup a canvas and get it's WebGL context
How to setup WebGL render loop property
The very basics of how things are being presented and processed in 3D graphics
The very basics of steps you should perform to draw a triangle or a 3D model from scratch