crazybiocomputing: Creating a GL context

First post of this series dedicated to webGL and the visualization of macromolecules from atomic coordinates stored in Protein Data Bank (PDB).

1- Creating a basic html page

In your favorite editor, write a classical html page

<!DOCTYPE html>
<html>
<head>
<title>Crazybiocomputing: Creating a GL context</title>

</head>

<body>
<p>Hello World!</p>

</body>

</html>

Open this HTML page in your browser, and the text "Hello World!" is displayed. Nothing 's really exciting !?! But, this is the core of your future graphics program.

2- Creating a 3D graphics context

WebGL is a technology allowing to run OpenGL application with graphics hardware-acceleration in a HTML page. All the graphics rendering is done in the HTML canvas element and the code is written in JavaScript.

2-1- <canvas> element: The HTML side

The first thing to do is adding a <canvas> element in the <body>

<canvas id="crazybiocanvas" width="960" height="300"></canvas>

<canvas> is a new element of HTML 5 and defines a specific area for drawing 2D and 3D graphics primitives.

Then, we need to execute the JavaScript webGL script during the display of the HTML page, this is done by using the event onLoad

<body onLoad="webGLMain()">

2-2- JavaScript: the dark side of the script

All the job is done in JavaScript and a minimum of four steps is required:

Getting the canvas element ID from the web page
Creating an OpenGL context
Initialize OpenGL and various types of data.
Display the scene

Step #1: Getting the canvas element ID from the web page.

To get the ID (a pointer) of the HTML element via the object document, the method getElementById must be used:

var canvas = document.getElementById("crazybiocanvas");

The "crazybiocanvas" corresponds to the name of the canvas I've defined in the <canvas id="canvas_name"...>.

Step #2: Getting a valid OpenGL context

An OpenGL context is obtained via the method getContext taking as argument the official keyword "webgl". However, as the WebGL implementation in web browsers is under active development, other unofficial keywords may be used like:

experimental-webgl
webkit-3d
moz-webgl

As far as I know, all the recent versions of browsers only use experimental-webgl or webgl. That's why, the two keywords must be tried during the OpenGL context creation.

gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

Note: A more classical way to code the line above is...
if (canvas.getContext("webgl") != null )
gl = canvas.getContext("webgl");
else if (canvas.getContext("experimental-webgl")!= null)
gl = canvas.getContext("experimental-webgl");

Step #3: Initialization

Defining the viewport is required to determine the window area that must be used to render graphics.

gl.viewport(0.0, 0.0, canvas.width, canvas.height);

Choosing a color for the background in orange

gl.clearColor(1.0,0.5,0.1,1.0);

Step #4: Drawing the scene
In this first example, nothing is displayed, only the background is reset with the background color.

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

3- The source html/javascript code

Here is the whole html/javascript page. Just, copy and paste it.

+++ WebGL snippet +++ +++ End of WebGL snippet +++

Then, open this page in your favorite web browser.
Et Voilà!

Fig.2: The first webGL canvas !!!

In a next post, I'll show you how to draw something interesting in the canvas.

crazybiocomputing

Pages

Wednesday, March 7, 2012

Creating a GL context

1- Creating a basic html page

2- Creating a 3D graphics context

2-1- <canvas> element: The HTML side

2-2- JavaScript: the dark side of the script

3- The source html/javascript code

No comments:

Post a Comment