Donnerstag, 27. Dezember 2012

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 !





Keine Kommentare: