Introduction
Let's imagine a world without Google. Of course we have to use Microsoft for everything which, trust me, is not a good thing (my bread and butter comes from Microsoft technologies). Today I would like to start a topic on WebGL and from where it started.
We would start from simple computer graphics jargons and terminology and would extend that to create a 3D based webpage. But for this I assume that the readers are at least familiar with JavaScript and HTML and can do a bit of programming. For the graphics part, I would do the explanation and how it's all related and would try to give the whole picture and how all of this (JavaScript/HTML/3D) comes together.
For better productivity and similar results I would suggest to use the Komodo IDE for Windows or for Unix if you all are coming from Unix/Linux. So let's get started.....
As the name suggests WebGL stands for Web Graphics language. It is a derivative from OpenGL and it's specific to web development. Though OpenGL is a standard language for graphics programming using C++/C# due to its memory management, pointers, people usually shy away from graphics programming.
But WebGL is all about to change that. Let's say WebGL is OpenGL on steroids. A lot of things has been taken away to maintain simplicity and a new scripting language has been given the power of conventional OOPs language functionality.
Getting Started
Why WebGL???
I have met a lot of people who do not see this in a big way. But I assure you it's something very new and will take everything by its storm. Just think of a web based application which does not require any plug-in or third party support like FlashPlayer, Silverlight, or is proprietary. This is what WebGL can do and could replace all as it an extension to JavaScript using a graphics library (JavaScript API).
All you require is an HTML5 compatible browser.. Yes sir, that's all that is required.
(Note: IE 8.0/9.0 does not fully support HTML5 in shorter words......... in detail I meant to see it does not support 3D functionality using JavaScript on the web browser as Microsoft is busy selling Silverlight over HTML5 (Canvas) (as they think the world belongs to them..).
Did I say Canvas.........?????
If you are reading this completely and suddenly you think what in the name of god is Canvas.
But let me tell you folks, it's where we would be drawing. As the name implies "Canvas" is an element of HTML, just like any other element. Take Canavs as a viewport or a section of a screen where you can perform drawing, paint, scale, rotate, and do some serious stuff. Just imagine you could write a Photoshop application using this and could earn millions... (well that's my plan). A simple canvas would look like:
<canvas id="canvas_id" width="400" height="600" >
Canvas Not Supported On your Browser...I know Its IE...
<canvas>
Anyway if your browser does not support this tag then you will get the message. This is done internally and much is required as the element can decide whether they are supported or not.
This is what makes HTML5 so special. And because of it the industry is so much divided upon. Microsoft says it's not secure enough as people can change, steal code or images, or would be meant to perform some illegal things..... But let me tell you folks "The more you share, the less you have to hide".
Open and see the new thing that could change the world....just think, would you like to do things your way and be flexible and become a Jedi or be forced to do the dark way where you know where the road ends...
Let's see how to start WebGL.......we would write a simple code to test whether WebGL is supported on our browser or not. Canvas has two major properties...one is 2D and the other is 3D accelerated with hardware rendering support......
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" >
( function ()
{
var check,context;
check = document.createElement('canvas');
if(check.getContext)
{
alert(" Canvas Not suppoted On your Browser ");
}
else
{
alert(" Canvas Not suppoted On your Browser ");
}
} ) ();
</script>
</head>
<body>
</body>
This code is self explanatory and this code will test whether your browser is HTML5 compliant or not and if it is, whether it supports the most important element "Canvas" that distinguishes HTML5 from others. If it supports Canvas then you can enhance the code to check for properties related to Canvas on 2D and 3D drawing.
check.getContext('2d')
check.getContext('webgl') or check.getContext('experimental-webgl')
Just recall, you might have played Angry Birds on a Google Chrome browser. Remember....it is made on 2D Canvas and Chrome heavily supports HTML5 and its specification.. And Angry Birds in HD is written on 3D accelerated canvas.
Note: Always use Google Chrome/Chromium or Mozilla Firefox latest build. Remember, WebGL requires a supported graphics card which can also support OpenGL functionalities such as T&L, shaders, hardware rendering. However, you can use a 2D canvas. But use of three 3d requires a graphics card. In some cases, software based rendering has also been supported and you need to check the browser specification. Please keep this in mind. It's just like a full 3D based game which requires a graphics card and since WebGL is supposed to do the same in terms of graphics, it also requires some part of it.
So now you know how to check for functionalities first and now let's draw something... Before drawing, there is something you should understand first. There is always some process to something...like before you make omelet you need to heat the pan, add oil, break the eggs, and make something out of it.... Just like this there are some processes to drawing..... you need to define the shape, its border, border color, the fillcolor that will fill the figure, shape, and size, and then you have to draw it. If you keep these small steps in mind you will find graphics programming a lot easier. Once you define these properties anywhere, you just need to call draw() to render it on the screen. This is what graphics programming is all about.
Let's do some graphics
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" >
(function ()
{
var check;
check = document.createElement('canvas');
if(check.getContext)
{
alert(" Canvas Not suppoted On your Browser ");
var element,context;
element = document.getElementById('canvas_draw');
context= element.getContext('2d');
context.fillStyle="#FF02234";
context.fillRect(0,0,150,75);
context.fillStyle = "rgb(200,0,0)";
context.fillRect (10, 10, 55, 50);
context.fillStyle = "red"
context.fillRect (10, 10, 55, 50);
}
else
{
alert(" Canvas Not suppoted On your Browser ");
}
} ) ();
</script>
</head>
<body>
<canvas id="canvas_draw" >
Canvas Not Supported
</canvas>
</body>
Using the code
Use the code in any Notepad editor. I usually use KOMODO IDE for development. If you encounter any error in your code please mail me at siddmegadeth at gmail dot com. If you like it please let me know. I would soon be posting an article on WebGL and would show you how to draw more shapes and sizes. In the next topic I would cover rotate, scale, crop, drawing a primitive shape and user defined shape, with code explanation. Today's topic only covered an introduction to WebGL and its usage. I am pretty sure enjoyed reading. Looking forward to your feedback and your response.
