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

























Followers