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

No comments:

Post a Comment

Followers