Google Choice: WebGL

Friday, March 17, 2017

WebGL - Context

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

We know to create an HTML-5 canvas element −

Write canvas statement in HTML5 Body
Give canvas an ID
Change canvas dimensions using height & width attributes (optional)

An example should bring more clarity here.

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

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 −

Alpha	If its value is true, it provides an alpha buffer to the canvas. By default, its value is true.
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.
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.
antialias	If its value is true, you will get a drawing buffer which performs anti-aliasing. By default, its value is true.
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.
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.

S.No.	Attributes and 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.

পৃষ্ঠাসমূহ

Labels

.

Search Your Article

Total Pageviews