On writing my own WebGL engine

So I did try out Threejs and CubicVR JS and while they are really powerful, I got stuck on using a 6 picture based Skybox with both of them. Threejs does it in a weird - two pass way I didn't like and CubicVR only supports an all-in-one picture approach I didn't like either.

So I tried to add a new Skybox object to CubicVR based on the "Cube with Multiple Materials" example.
But I failed horribly. Both because I didn't understand the inner workings of CubicVR enough and because I didn't understand WebGL.

It has been my personal experience, that to truly use a framework to its maximum potential you should understand the underlying concepts it is trying to abstract anyways.

So after I have stayed away from OpenGL for my entire life, I decided to finally learn it. ( OpenGL ES 2.0 to be specific ) and I am happy to report that it has payed of big time - I am in love !

While the old OpenGL (1.0 and maybe 2.0 )  without shaders was truly ugly, the new shader based OpenGL is easy to learn, understand and like. While I still believe this is an API that would benefit incredibly if converted to an object oriented API it is easy enough to build one yourself now and not cry in pain over all the ugly fixed functions because there are only so few left :-)

WebGL rocks

So I started playing around with WebGL. And it became clear to me that this is the future.
Screw Flash and Unity Webplayer and all the other plugins, this is it !

Here is why WebGL rocks:

• Everyone can play the game right away in a secure environment.
• No installation.
• You can combine it with HTML5 Video and Audio and WebSockets.
• You can make your WebGL application fullscreen with the new Fullscreen API.
• You can lock the mouse if you develop a first person game.
• Texturing is so easy, all the formats the browser understands you can use as textures.
• Dynamic texturing is easy, just use a HTML 5 2D canvas, paint on it and use it as input for your texture.
• Scripting ? Haha, it's built in !
• Based on the amazing Open GL ES 2.0 standard. They removed all of the cruft and left only the essential tools in. ( i.e. everything revolves around using Shaders ! )
• Amazing WebGL engines for free: Threejs.org and CubicVR JS among many others !
• Dart support !

AND HERE COMES THE KICKER:

• FREE USER INTERFACE CONTROLS
  Yes, you read that correctly: you can mix and match WebGL with normal HTML.
  Just position a DIV with HTML inputs over the WebGL canvas !
  Anyone familiar with the pain on how to get a good OpenGL UI will appreciate this !

"But Shaders look so scary!"
Yeah, I thought so too, but these are the basic 2 shaders you need to get started:

1. Vertex shader:
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}

2. Fragment shader:
void main(void) {
gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}

They will carry you a long way !
( I removed the variables for clarity, you can get the full versions at learningwebgl.com )

Everything is there now in the Browser !

• High performance 2D and 3D Graphics
• Sound
• Background music
• Networking
• Mouse lock
• Fullscreen

The guys at Mozilla and Google did it !

Great job guys !

If I made you curious here are some great places to learn WebGL:

Start with:
http://learningwebgl.com/blog

Then head over to:
http://blog.tojicode.com/p/demos.html

For more resources check out:
http://www.khronos.org/webgl/wiki/Main_Page
and
webgl.com

Have Fun and Start Coding !