WebGL Basics 1 – Context in canvas

I’m currently learning WebGL, without prior knowledge of OpenGL or DirectX, and in this series of posts I will track what I discovered so far. This is not the first WebGL tutorial, and obviously not the last one! In my pages, I want to focus on minimizing the information to learn and pointing out possible alternatives. The pre-requisites for the reader are basic knowledge of HTML and linear algebra.

Introduction

We will start with the simplest WebGL page, i.e. with no animations, not even a rendered surface, just a dark blue WebGL context created in an HTML5 “canvas” element. This part addresses the creation of the canvas, the creation of the “WebGL context” and the commands to clear the background of this context.

HTML5 canvas

The body of the web page is kept minimal. It contains mainly the static <canvas> element (the exact size in pixels must be given explicitly otherwise the default size is 300×150):

<!DOCTYPE html>
<html>
  <head>
    <title>WebGL Basics part 1</title>
    <script type="text/javascript">
      // SCRIPT CONTENT IN <HEAD> PART GOES HERE
    </script>
  </head>

  <body onload="start()">
    <h1>WebGL context in canvas</h1>
    <canvas id="glcanvas" width=320 height=240>
          It seems the browser does not support the 'canvas' tag (part of HTML5)
    </canvas>
    <p>After the canvas</p>
  </body>
</html>

The code shows as well the alternative mechanism for browsers without HTML5 support (the text between the <canvas> tags is displayed in this case), and the function called after the load of the page. We detail this function in the next paragraph.

Context creation

The start() function, defined in the <head> part of the page and called once by the onload handler, just creates the context and clears it with the background color:

var gl; // GL context

// Function called by onload handler
function start()
{
  // Gets canvas from the HTML page
  var canvas = document.getElementById('glcanvas');

  // Creates GL context
  gl = null;
  try {gl = canvas.getContext('experimental-webgl');}
  catch(e) {alert('Exception catched in getContext: '+e.toString());return;}

  // If no exception but context creation failed, alerts user
  if(!gl) {alert('Unable to create Web GL context');return;}

  // Sets clear color to non-transparent dark blue and clears context
  gl.clearColor(0.0, 0.0, 0.5, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
}

The most important in this function is the call to “getContext“. It is a method of the canvas object, i.e. part of the HTML5 standard and not of the WebGL API. It creates and gives back the actual WebGL object. The context identifier “experimental-webgl” denotes that the WebGL standardization is still on-going (the current version of the WebGL specification is in “final draft” state), and that is why it is important to cleanly catch all possible errors and to inform the user about them (the getContext command may throw an exception or just return a null reference).

Once the context is successfully created (in the variable gl), WebGL-specific functions can be used as methods of gl. In our page, the background color is set to dark blue and the drawable area is cleared.

The complete page is available on-line. You can have a look and try some refresh and resize operations. Please note that the content of the canvas is now buffered and there is no redraw necessary.

This ends the first part of this tutorial.

Summary

The main points to remember:

  • A <canvas> tag is the starting point
  • The call to the canvas method getContext("experimental-webgl") returns the WebGL object
  • All API functions (e.g. clear) are methods of this object
Advertisements

,

  1. #1 by francesc on June 26, 2012 - 03:20

    Thanks for your blog!
    I have been looking around some tutorials on internet, the official ones and all but I think yours is the best!

  1. High quality WebGL learning resources : Smashinglabs
  2. software inventario con codigo de barras
  3. Stop rygning
  4. WebGL Basics 2 – White 2D triangle | The Blog-o-Ben

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: