”;
To write a WebGL application, first step is to get the WebGL rendering context object. This object interacts with the WebGL drawing buffer and can call all the WebGL methods. The following operations are performed to obtain the WebGL context −
- Create an HTML-5 canvas
- Get the canvas ID
- Obtain WebGL
Creating HTML-5 Canvas Element
In Chapter 5, we discussed how to create an HTML-5 canvas element. Within the body of the HTML-5 document, write a canvas, give it a name, and pass it as a parameter to the attribute id. You can define the dimensions of the canvas using the width and height attributes (optional).
Example
The following example shows how to create a canvas element with the dimensions 500 × 500. We have created a border to the canvas using CSS for visibility. Copy and paste the following code in a file with the name my_canvas.html.
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{border:1px solid blue;}
</style>
</head>
<body>
<canvas id = "mycanvas" width = "300" height = "300"></canvas>
</body>
</html>
It will produce the following result −
Get the Canvas ID
After creating the canvas, you have to get the WebGL context. The first thing to do to obtain a WebGL drawing context is to get the id of the current canvas element.
Canvas ID is acquired by calling the DOM (Document Object Model) method getElementById(). This method accepts a string value as parameter, so we pass the name of the current canvas to it.
For example, if the canvas name is my_canvas, then canvas ID is obtained as shown below−
var canvas = document.getElementById(''my_Canvas'');
Get the WebGL Drawing Context
To get the WebGLRenderingContext object (or WebGL Drawing context object or simply WebGL context), call the getContext() method of the current HTMLCanvasElement. The syntax of getContext() is as follows −
canvas.getContext(contextType, contextAttributes);
Pass the strings webgl or experimental-webgl as the contentType. The contextAttributes parameter is optional. (While proceeding with this step, make sure your browser implements WebGL version 1 (OpenGL ES 2.0)).
The following code snippet shows how to obtain the WebGL rendering context. Here gl is the reference variable to the obtained context object.
var canvas = document.getElementById(''my_Canvas'');
var gl = canvas.getContext(''experimental-webgl'');
WebGLContextAttributes
The parameter WebGLContextAttributes is not mandatory. This parameter provides various options that accept Boolean values as listed below −
| Sr.No. | Attributes & Description |
|---|---|
| 1 |
Alpha If its value is true, it provides an alpha buffer to the canvas. By default, its value is true. |
| 2 |
depth If its value is true, you will get a drawing buffer which contains a depth buffer of at least 16 bits. By default, its value is true. |
| 3 |
stencil If its value is true, you will get a drawing buffer which contains a stencil buffer of at least 8 bits. By default, its value is false. |
| 4 |
antialias If its value is true, you will get a drawing buffer which performs anti-aliasing. By default, its value is true. |
| 5 |
premultipliedAlpha If its value is true, you will get a drawing buffer which contains colors with pre-multiplied alpha. By default, its value is true. |
| 6 |
preserveDrawingBuffer If its value is true, the buffers will not be cleared and will preserve their values until cleared or overwritten by the author. By default, its value is false. |
The following code snippet shows how to create a WebGL context with a stencil buffer, which will not perform anti-aliasing.
var canvas = document.getElementById(''canvas1'');
var context = canvas.getContext(''webgl'', { antialias: false, stencil: true });
At the time of creating the WebGLRenderingContext, a drawing buffer is created. The Context object manages OpenGL state and renders to the drawing buffer.
WebGLRenderingContext
It is the principal interface in WebGL. It represents the WebGL drawing context. This interface contains all the methods used to perform various tasks on the Drawing buffer. The attributes of this interface are given in the following table.
| Sr.No. | Attributes & Description |
|---|---|
| 1 |
Canvas This is a reference to the canvas element that created this context. |
| 2 |
drawingBufferWidth This attribute represents the actual width of the drawing buffer. It may differ from the width attribute of the HTMLCanvasElement. |
| 3 |
drawingBufferHeight This attribute represents the actual height of the drawing buffer. It may differ from the height attribute of the HTMLCanvasElement. |
”;