Taking A Look At JavaScript's WebGL

Just recently a friend of mine showed me a game running on a web browser and it was an amazing experience. The game wasn't particularly amazing, but the way it ran was something to behold. Not only did the game have beautiful graphics and ran smoothly, but it ran on my phone, and on my desktop, and on my tablet right on the browser. And I'm not new to JavaScript game engines by any means. I've spent some time using Crafty.js and more recently started getting into Unity. With Crafty, however you're still relying mainly on pure JavaScript running on your browser, which means you are limited in what you can do as far as animations and shading are concerned.

WebGL, however, is something very different. It runs purely in JavaScript without the need for any 3rd party plugins or any external libraries, such as the dreaded Flash. It relies on the HTML5 <canvas> element and is based on OpenGL ES 2.0, which is a more light-weight version of OpenGL for embedded applications.

What Is WebGL?

WebGL aka Web Graphics Library, is a JavaScript API that allows for rendering of, you guessed it, graphics through any compatible browser. It doesn't require any external plugins and it allows for GPU acceleration in a webpages canvas. Which means, we can finally have high quality 3D and 2D graphics rendered in the browser and have it entirely be built on top of web page standards. It's 100% handled by the browser and the JavaScript engine and your GPU.

WebGL has been around for a few years now. It was standardized around 2011, and it didn't see a stable release until around 2013, but it began its life around 2006 like most specifications tend to do. So it is still relatively new, as far as technology is concerned, which is probably why you won't encounter it in your day to day web browsing. But hopefully that will change soon.

How Does WebGL Work?

WebGL allows for the GPU accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL is comprised of "control" code, which is plain old JavaScript and "shader" code that is executed on the client GPU. Which also means that the clients hardware needs to be able to support it. The WebGL specification is based off of OpenGL ES, which is a subset of OpenGL used for embedded systems. Shaders in WebGL are expressed directly in GLSL, or the OpenGL Shader Language.

Complicated? You betcha. But essentially the resource heavy job of rendering shades and other animation specific tasks are left for the GPU to handle, while the logic is saved for JavaScript.

The Best Features That WebGL Offers

The best feature of course is that WebGL runs completely on your browser free of any pesky plugins. The second best feature? That it's written completely in JavaScript. If you're a JavaScript developer, then you're already half way to learning WebGL. And because complex shader logic is handled by the GPU, you can render some pretty amazing graphics right through the browser.

• Runs on most modern browsers
• Uses plain old JavaScript
• Doesn't rely on plugins or any other 3rd party software

Worst Features?

When dealing with any technology that involves graphics, physics, shading, and essentially anything that deals with making animations, you're going to be dealing with some low level code. OpenGL is written in C, and usually that means some complex code that will run surprisingly fast. Because of this, you'll probably need to use several JavaScript libraries in order to take care of my of these complex tasks. One of my favorite libraries so far that can handle that math is Three.js.

Three.js

Three.js is a JavaScript wrapper for WebGL. It handles much of the complexity required in WebGL and gives you a very intuitive and easy to use library of functions that make development several times easier. Three.js includes the following features.

• Effects: Anaglyph, cross-eyed and parallax barrier
• Scenes: add and remove objects at run-time; fog
• Cameras: perspective and orthographic; controllers: trackball, FPS, path and more
• Animation: armatures, forward kinematics, inverse kinematics, morph and keyframe
• Lights: ambient, direction, point and spot lights; shadows: cast and receive
• Materials: Lambert, Phong, smooth shading, textures and more
• Shaders: access to full OpenGL Shading Language (GLSL) capabilities: lens flare, depth pass and extensive post-processing library
• Objects: meshes, particles, sprites, lines, ribbons, bones and more - all with Level of detail
• Geometry: plane, cube, sphere, torus, 3D text and more; modifiers: lathe, extrude and tube
• Data loaders: binary, image, JSON and scene
• Utilities: full set of time and 3D math functions including frustum, matrix, quaternion, UVs and more
• Export and import: utilities to create Three.js-compatible JSON files from within: Blender, openCTM, FBX, Max, and OBJ
• Support: API documentation is under construction, public forum and wiki in full operation

Needless to say, it does alot. And there is a learning curve to the whole thing. There are full books that you can buy that cover Three.js in depth. And as far as learning WebGL goes, Three.js would be a great place to start that journey.

Why It's Important

Just a few years ago, flash was running the web. You needed it for everything, and that was a bad thing. You had to give this other entity, this more vulnerable entity, access to your private information in order to do some pretty basic things. For the past decade, the web has become pretty stagnant and pretty repetitive. The only real changes noticeable changes have been to design and to style. And updates in CSS and HTML have aided in that. WebGL is the next level of web development. It opens up an entirely new canvas for designers and developers to play around and tinker with. To get a look at what that future looks like, head on over to ChromeExperiements.com and be amazed by its awesome beauty!