Learn WebGL by example

Learn 3D computer graphics programming on the browser using WebGL by examples.

Wednesday, November 4, 2009

Hello Triangle

First example, Hello Triangle! 

Prerequisites:
 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
Thanks to

Tuesday, November 3, 2009

Enabling WebGL on your browser

Enabling WebGL on FireFox Nightly Builds
  1. Go to FireFox nightly build site.
  2. Download the file. For example, firefox-3.7a1pre.en-US.win32.installer.exe for Microsoft Windows (as of November 3, 2009).
  3. Install it.
  4. Run the new Firefox. It is called Minefield as of November 3, 2009.
  5. Enter "about:config" as the web address on the Firefox.
  6. Search for "webgl".
  7. Double-click "webgl.enabled_for_all_sites" to change the value from false to true.
  8. I use this version side by side with the official released version 3.5. Click here for more info.
Enabling WebGL on Chrome
  1. Go to Chrome Index of /buildbot/continuous/LATEST 
  2. Download chrome-win32.zip
  3. Unzip it
  4. 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
  5. Change to the directory where you unzip the Chrome
  6. Run Chrome by typing "chrome.exe --enable-webgl --no-sandbox"
Click here for other browsers.

Books

























Resources

  1. Enabling WebGL on your browser
  2. Euclid Jimpick
  3. Firefox nighly build
  4. glUtils.js  - Spinning Triangle demo from One Geek's Blog
  5. Khronos
  6. Learn WebGL blog table of contents
  7. Learning WebGL by giles
  8. Mark Steele blog
  9. NeHe (Neon Helium Productions) - OpenGL Tutorials
  10. One Geek's Blog - Benjamin DeLillo's Project Blog 
  11. OpenGL ES 2.0 home page
  12. OpenGL ES 2.0 API
  13. OpenGL ES Shading Language version 1.0
  14. OpenGL Red Book
  15. Planet WebGL
  16. Vladimir Vukićević blog
  17. WebGL on WebKit
  18. WebGL Cheat Sheet [pdf] [html
  19. WebGL Cookbook
  20. WebGL forum
  21. WebGL on wikipedia
  22. WebGLU - Javascript utility library for working with WebGL. WebGLU makes developing WebGL applications easier. 
  23. WebKit CanvasMatrix.js

Followers