Introduction

HTML 5 adds some fancy features to the new canvas element. One of these being the ability to assign an OpenGL context to the canvas element and take advantage of a version of OpenGL very similar to that of OpenGL ES 2.0.

Browser Support

Unfortunately for those of you with Internet Explorer, WebGL isn’t supported. Microsoft says this is due to security concerns but in my personal opinion, it’s probably because they’ve never been a fan of OpenGL. It competes against Direct3D which is their own product. But those of you with Firefox, Chrome, Safari and Opera are in luck, it’s natively supported! A quick search on the web will show you how to enable it if your browser has it disabled by default (if you can see the big blue canvas on this page, it’s enabled). Or if you really want to make it work in Internet Explorer, there are a couple of third party plugins floating around.

Coding

Unlike most of my other tutorials, I’m going to leave this one fairly un-explained because WebGL isn’t a priority for me at the moment and by doing the OpenGL 4 tutorials, you can pick up most of what you need to know as it’s all shader based such as OpenGL ES.

However, what you need to know is that to use WebGL, you need some basic knowledge of javascript and even less knowledge of HTML5 seeing as though it only uses the canvas function to get started.

Like all of our other tutorials, we have a main method along with an init and a display method. Init is used to set up our context on our canvas and display covers all of our drawing functionality. The main function is assigned to the window.onload event.

If you have any questions, please email me at swiftless@gmail.com

The Code Used: