Learn WebGL by example

Hello Triangle

2009-11-04T10:05:00.051-08:00

First example, Hello Triangle!

Prerequisites:

Enabling WebGL on your browser. It is required to run the examples.
OpenGL(R) ES 2.0 Programming Guide - highly recommended to understand the OpenGL concepts. The examples focus on WebGL specifics.

Click here to see the demo and full source code.

Let's start from here.

  function main() {
    initialize();
    draw();
  } // main

  window.onload = main; 

Once the browser has loaded the window, it will call main() function. They are just standard JavaScript running on a browser.  initialize() will call getGl()function. OpenGL is available on many different platforms and works with many different windows systems. It is designed to complement the window systems. It provides various extensions to various window systems. For example, AGL for Apple Macintosh, GLX for X Window System and WGL for Microsoft Window. The following code shows how to bind the HTML canvas with the OpenGL context object in a browser.

function getGl() {
    var theCanvas = document.getElementById("webGlCanvas");

    gl = theCanvas.getContext("moz-webgl"); // Firefox
    if (!gl)
        gl = theCanvas.getContext("webkit-3d"); // Safari or Chrome
}

OpenGL 2.0 is the sixth revision of the OpenGL API. One of the major changes is the programmable processing for vertices and fragments using OpenGL shading language. Below shows the Programmable and Fixed Function pipelines from Khronos Group.

We define the "vertexShader" as the following:

attribute vec4 vPosition;
void main() {
     gl_Position = vPosition;
}

Also, the "fragmentShader" as the following:

void main() {
      gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
}

getVertexShader() and getShaderSource()retrieve the vertex shader information.

   function getVertexShader() {
     var shaderNode = document.getElementById("vertexShader");
     var shaderSource = getShaderSource(shaderNode);

     var shader = gl.createShader(gl.VERTEX_SHADER);
     gl.shaderSource(shader, shaderSource);
     gl.compileShader(shader);

     return shader;
     }

function getShaderSource(shaderNode) {
    var shaderSource = "";
    var node = shaderNode.firstChild;
    while (node) {
        if (node.nodeType == 3) // Node.TEXT_NODE
            shaderSource += node.textContent;
        node = node.nextSibling;
    }

    return shaderSource;
}

The getFragmentShader() does similar thing for fragment shader.

The remaining code on the initialize()shows how to bind, compile and link them.

    var shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.bindAttribLocation(shaderProgram, 0, "vPosition");
    gl.linkProgram(shaderProgram);

    gl.useProgram(shaderProgram);

    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

Now the OpenGL has been initialized, we are ready to draw.

function draw() { // Draw the picture
    var vertices = [ 0.0, 0.5, 0.0,
                    -0.5, -0.5, 0.0,
                     0.5, -0.5, 0.0 ];
    gl.bufferData(gl.ARRAY_BUFFER, new CanvasFloatArray(vertices), gl.STATIC_DRAW);

    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); // Load the vertex data
    gl.enableVertexAttribArray(0);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    gl.flush();
}

See the following for more info

OpenGL(R) ES 2.0 Programming Guide

JavaScript: The Definitive Guide

Thanks to

WebGL Experiments

Learning WebGL by giles

WebGL API Cheat Sheet

Enabling WebGL on your browser

2009-11-03T20:29:00.007-08:00

Enabling WebGL on FireFox Nightly Builds

Go to FireFox nightly build site.
Download the file. For example, firefox-3.7a1pre.en-US.win32.installer.exe for Microsoft Windows (as of November 3, 2009).
Install it.
Run the new Firefox. It is called Minefield as of November 3, 2009.
Enter "about:config" as the web address on the Firefox.
Search for "webgl".
Double-click "webgl.enabled_for_all_sites" to change the value from false to true.
I use this version side by side with the official released version 3.5. Click here for more info.

Enabling WebGL on Chrome

Go to Chrome Index of /buildbot/continuous/LATEST
Download chrome-win32.zip
Unzip it
Run Command Prompt

Click Windows Start Button at the bottom left corner of your desktop
Click All Programs
Click Accessories
Click Command Prompt (cmd.exe)
Command Prompt Windows will show up

Change to the directory where you unzip the Chrome
Run Chrome by typing "chrome.exe --enable-webgl --no-sandbox"

Click here for other browsers.

Books

2009-11-03T20:11:00.004-08:00

Resources

2009-11-03T20:10:00.022-08:00

Enabling WebGL on your browser
Euclid Jimpick
Firefox nighly build
glUtils.js - Spinning Triangle demo from One Geek's Blog
Khronos
Learn WebGL blog table of contents
Learning WebGL by giles
Mark Steele blog
NeHe (Neon Helium Productions) - OpenGL Tutorials
One Geek's Blog - Benjamin DeLillo's Project Blog
OpenGL ES 2.0 home page
OpenGL ES 2.0 API
OpenGL ES Shading Language version 1.0
OpenGL Red Book
Planet WebGL
Vladimir Vukićević blog
WebGL on WebKit
WebGL Cheat Sheet [pdf] [html]
WebGL Cookbook
WebGL forum
WebGL on wikipedia
WebGLU - Javascript utility library for working with WebGL. WebGLU makes developing WebGL applications easier.

WebGLU source code

WebKit CanvasMatrix.js