WebGL Tutorial
WebGL Application
WebGL Examples
WebGL Useful Resources
Selected Reading
- WebGL - Graphics Pipeline
- WebGL - Basics
- WebGL - Html5 Canvas Overview
- WebGL - Introduction
- WebGL - Home
WebGL Application
- WebGL - Drawing a Model
- Associating Attributes & Buffer Objects
- WebGL - Shaders
- WebGL - Geometry
- WebGL - Context
- WebGL - Sample Application
WebGL Examples
- WebGL - Interactive Cube
- WebGL - Cube Rotation
- WebGL - Rotation
- WebGL - Scaling
- WebGL - Translation
- WebGL - Colors
- WebGL - Drawing a Quad
- WebGL - Modes of Drawing
- WebGL - Drawing a Triangle
- WebGL - Drawing Points
WebGL Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
WebGL - Context
WebGL - Context
To write a WebGL apppcation, 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 visibipty. Copy and paste the following code in a file with the name my_canvas.html.
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{border:1px sopd 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 calpng 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 psted 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 |
antiapas If its value is true, you will get a drawing buffer which performs anti-apasing. By default, its value is true. |
| 5 |
premultippedAlpha If its value is true, you will get a drawing buffer which contains colors with pre-multipped 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-apasing.
var canvas = document.getElementById( canvas1 );
var context = canvas.getContext( webgl , { antiapas: 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. |