From OpenGL to WebGL

WebGL is as a part of HTML5 and based on OpenGL ES 2.0. It provides an API for 3D graphics, so JavaScript developers can program 3D-applications without any plugins or enhancements. Simply put, you can say it like this: WebGL extends the capabilities of modern UI-Development. Beside classical browser games you can create high-class, interactive content, which is normally known from desktop applications.

1. Live Demo

To give you a little impression of WebGL, i created a little demo for our beloved SCN. At the time of writing this blog post, only Chrome and Firefox can run this application: Launch Demo

This little showcase has the following features.

• Complete first-person-controls, based on HTML5 Pointer-Lock-API
• Collision detection, so the player can't walk through objects
• Lens flare effects
• Interactive objects
• A complete UI based on jQuery and Twitter Bootstrap
• Sky-Textures (CubeMap)
• Floor texture with diffuse, bump and specular map
• WebGL detection
• A object-oriented, component-based design pattern

You can download the complete source-code at github.

2. WebGL is amazing! Where do i begin?

WebGL is a quite challenging API, so you have to conform to certain requirements.

• You have to master JavaScript programming perfectly. Because WebGL applications are getting complex very fast, you will need good skills in code management and design patterns. You find a lot of ebooks and literature in the internet or at amazon, e.g.: The Definitive Guide: Activate Your Web Pages
• Then i recommend to learn WebGL API, although you won't program directly with WebGL, but with Javascript 3D libraries like three.js. But for a basic comprehension of 3D graphics programming, it's good to know what's happening under the hood. For example, this is a very successful book for beginners: Professional WebGL Programming: Developing 3D Graphics for the Web
• Like i mentioned before, you will normally work with a library, which encapsulates a lot of basic WebGL-coding. Three.js is a excellent option. It's powerful, complimentary and you will find many examples in the download-package, which explain step by step each appreciable technique of the framework. Have a look at the examples on the official homepage!
• When you want to create or edit a texture, you should be familiar with GIMP (freeware) or Photoshop.
• If you want to create 3D-models or animations by yourself, you will need a tool like the freeware Blender. Because 3D-modelling is something very special, you will need to invest a lot of time to handle this kind of software. The cool thing is: When you create models with Blender, you can easily export them in three.js-format. After that, you can import your model in your application. The necessary Blender-plugin is provided by the three.js team and can be found in the official download-package.

3. API-Support and future

WebGL is an very experimental API, so the browser support is not unrestricted. As you can see on this page, Internet Explorer will support WebGL initially with version 11. Currently Chrome and Firefox are the only browsers, which support this API satisfactorily. You should keep this information in mind, because the browser of your audience decides consequently, whether you can use WebGL or not.

I hope all this information motivates you to give WebGL and three.js a little chance.

Thanks for reading!