OpenGL and Real time 3D on HTML5

[Inigo]

The idea of bringing the real-time 3D in a Web page is not new, indeed, since the beginning of the WWW we have seen a succession of pioneering implementations designed to achieve precisely this objective: Java applets, VRML, the first version of O3D and many others. Among these technologies the only ones capable of passing the state test and find place in consumer applications are Flash and some JavaScript libraries very elaborate. In these (rare) cases, however, is almost always treated to make small adjustments to three-dimensional interface designed strictly two-dimensional. With the arrival of the new HTML5 specification, however, there are good chances of joining the short to a common standard to use in realtime 3D browser, one of the sub-specifications within this new version of the popular markup language, in fact, specifically dedicated to this task and is a collaboration of leading industry players such as Apple, Google and Mozilla.

[Suzane]

The technology in question is called WebGL and is based on the choice of HTML tags <canvas> as a basis on which to build and animate three-dimensional models derived by using the JavaScript API OpenGL ES 2.0 specifications. There are two aspects that make difficult the 3D world for someone like the author, has a background as a developer web terminology and philosophy with which they were written the API. Let's start with the latter problem, as already mentioned, the WebGL born as well as implementation of JavaScript known OPENGL ES 2.0, these APIs are low-level and intuitive operation as a sequence of commands used to control the actions of the 3D engine. An example of this approach is in the following listing WebGL that draws a single triangle on the screen:

gl.bindBuffer (gl.ARRAY_BUFFER, triangleVertexPosBuffer) gl.vertexAttributePointer (shaderProgram.vertexPosAttribute, ...); gl.uniformMatrix4fv (shaderProgram.pMatrixUniform, false, new Float32Array ...); gl.uniformMatrix4fv (shaderProgram.mvMatrixUniform, false , new Float32Array ...); gl.drawArrays (gl.TRIANGLES, 0, triangleVertexPosBuffer.numItems);

Beyond the meaning of the instructions is interesting to note that all be summed up in sending messages to the object gl ; this request identifies a framework built on a WebGL <canvas> specified using the syntax:

 gl = document.getElementById ("a_canvas_id). getContext ("experimental-WebGL");

Now for the terminology is clearly not possible to list and define the glossary that covers the world linked to realtime 3D programming, but I think it is important to highlight a few concepts that will be useful shortly.

[VinFanatic]

The first keyword is shader: a shader is represented by a set of instructions explaining how to behave to the GPU during rendering, that is, video display, a 3D scene. WebGL specifications require that the developer provides to the two GPU shaders respectively called Vertex Shader and Fragment Shader. The imperative task of the Vertex Shader is to return, for each triplet of vertex coordinates that identify a space (if he was drawing a cube would be the Vertex Shader requested 8 times), a pair of coordinates that identify the same vertex on the two-dimensional plane <canvas>. This must clearly take into account what is the point of view and angle from which you are observing the scene. At this crucial task is optional add some calculations related to the management of lights and positioning of textures. The task of the Fragment Shader is rather to define the color of each pixel <canvas> on which lies the two-dimensional representation of the scene which was calculated using the information in the Vertex Shader.

[Christina 80]

WebGL uses a dialect of C called GLSL shaders to define. This language, designed specifically for this task, is based on a number of conventions and can be easily integrated into a web page. Fragment Shader A simple example looks like this:

 <script id="shader-fs" type="x-shader/x-fragment">
 void main (void) {
   gl_FragColor = vec4 (1.0, 1.0, 1.0, 1.0), // vec4 is a vector of 4 elements RGB
 }
 </ Script>

GLSL is expected in the variable gl_FragColor the color with which the video will be rendered at that pixel. Using the shader just created each of our three-dimensional model is displayed using only the white (1.0, 1.0, 1.0, 1.0) . The exact same approach marks a vertex shader, the variable value in that case, however, is called gl_Position. With these concepts in mind we set about to roll out our first script WebGL.

[Laramie]

WebGL a script can be divided broadly into two phases:

• The first, which we call setup, create the context WebGL <canvas> selected, initializes the shaders and create buffer required to contain information on 3D models of the scene;
• the second phase, which can be called instead of drawing, has the task to continually refresh the 3D scene in this way by managing the movement of objects in it, the lights and the position of the frame.

In applying the test we are going to create a single video to show the white triangle, and this result does not fit exactly in the greatest possible expression of the three-dimensional graphics, but it's enough to be able to experience all the main aspects of specific WebGL without becoming too wordy. You should start by writing a file index.html,

<html>
 <head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"> </ script>
 <script type="text/javascript" src="triangle_demo.js"> </ script>

 <script id="shader-fs" type="x-shader/x-fragment">
 void main (void) {
   gl_FragColor = vec4 (1.0, 1.0, 1.0, 1.0);
 }
 </ Script>

 <script id="shader-vs" type="x-shader/x-vertex">
 attribute vec3 aVertexPosition // position (x, y, z) Summit
 // It impresses the changes at the top by moving the object on the scene
 mat4 uMVMatrix uniform;
 // Gives to the summit due to changes in viewpoint
 mat4 uPMatrix uniform;
 void main (void) {
 gl_Position = uPMatrix uMVMatrix * * vec4 (aVertexPosition, 1.0);
 }
 </ Script>
 </ Head>

[Efigenio]

DrawScene the function handles the operations necessary to draw the scene on canvas designated, in the first two rows list the scene is reset, then the buffer containing the information about the vertices of the triangle is loaded into the 3D environment and to ensure set the parameters required by the shader. In this demo, not to exceed the length of the sample, the two arrays needed for the shaders have been managed through two static arrays, in real applications is very common to change these values at each design iteration, compared to changes in the point of view or position of the object on the scene. At this point the function drawArrays draw the vertices in the buffer by invoking the shader for each of them, it is important to note that the object gl to perform this function uses the information accumulated through the previous.

[Quattro]

It is important to know what goes on behind the scenes when you use a technology, most of the time to know the mechanisms that govern it helps to quickly solve problems that otherwise would be hardly curable. WebGL makes no difference and can be a sin of superficiality use one of the frameworks listed above, without first being acclimated a bit 'with the API standard. That said the API WebGL prove far too complicated and cumbersome to allow for their use directly in a project that is more complex than a demo. Added to this is a very steep learning curve and then configure the use of a framework as a preferred choice, especially for those coming from a Web development environment and has no experience with such technologies. Despite these difficulties it is unlikely that WebGL become part of the Web sites and portals of the future, finding place in video game development landscape, perhaps in mobile field, particularly in light of their connection with OpenGL ES2.0.