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.
Let's start from here.
function main() {
initialize();
draw();
} // main
window.onload = 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
