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 −
For example, if the canvas name is my_canvas, then canvas ID is obtained as shown below−
The following code snippet shows how to obtain the WebGL rendering context. Here gl is the reference variable to the obtained context object.
The following code snippet shows how to create a WebGL context with a stencil buffer, which will not perform anti-aliasing.
- 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)
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. |
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. |
No comments:
Post a Comment