WebGL and Three.js intro part 1

The last few months I have been playing with a technology called WebGL.

There have been a number of somewhat unsuccessful attempts to get 3D on the web which didn’t really seem to go anywhere. WebGL seems to be gaining some traction probably due to improved bandwidth & browser performance and a JavaScript renaissance.

WebGL came out of experiments a clever guy called Vladimir Vukićević was doing with canvas at Mozilla and is based on a cut down version of the OpenGL specification called OpenGL ES 2.0.

WebGL certainly isn’t the easiest technology to pick up – in fact learning WebGL can feel a bit like this:

Picture1

Image from: http://www.travsite.com/images/16.jpg

So you want to learn WebGL?

Well prepare to waste many hours & nights scratching your head about why you can no longer get a simple cube to appear on the screen that was working perfectly yesterday.

You have been warned – and as a spoiler more often than not any problems are due to you having done something dumb 🙂

Unsurprisingly in addition to learning the WebGL api’s and libraries with 3D there is going to be a bit of maths involved if you want to do anything interesting. If like me you haven’t really studied Maths for the last 17 years you probably have forgotten most of it – thus you’ll be needing to refresh your knowledge of what things like a radian is and maybe a little bit of trig.

But now I have failed to deter you why should you care about WebGL at all?

Well the main reasons I can think of are

  • You can perform tasks not possible (or very difficult with other technologies such as Canvas, SVG etc)
  • WebGL is integrated with the DOM opening up some interesting possibilities & allows you to use technologies & languages you are familiar with
  • It’s a very open standard maintained by the Khronos group
  • It’s helping drive other browser particularly performance advances
  • WebGL is supported in all the latest browsers including IE 11 preview*
  • There’s coming mobile support (blackberry, opera, FF) & apparently WebGL is also already in iOS but has restricted usage right now
  • It’s fun and a bit different to sticking data in a database 🙂

*note many of the existing demos on sites such as three.js wont work on IE11 preview right now but expect this to change

For me the main use cases for the technology are:

  • Data visualization – check out http://workshop.chromeexperiments.com/projects/armsglobe/
  • Games!
  • Interactive page components e.g. allowing a user to visualize your products by rotating it around
  • Modelling/simulation
  • Integration with other technologies e.g. geo api’s, big data etc

But there are also a few reasons why you want to avoid WebGL

  • It’s bloody hard work – many of the type of issues you will encounter wont result in an error – you just wont see what you expect. More than likely you have done something dumb like place an object behind you or forget to add a light but it can make for a very frustrating development experience
  • Browser support varies somewhat – it’s probably safest right now to play with WebGL in Chrome
  • Libraries are in a state of flux & many have bad documentation which makes it pretty tricky to get stuck in. During 3 months of research and development everytime I upgraded the three.js libaries it broke all my demos as method names etc had changed
  • Security concerns – WebGL is running code directly on your graphics card and OpenGL was built for speed rather than security. I suspect we will see some security issues over the coming years with WebGL and there has already been a demonstration of reading pixel data from another site. There is a great stack overflow post discussing this more. In fact you might want to consider turning WebGL off for all but trusted sites.

What’s pure WebGL code look like?

The below example  that I stole from somewhere (sorry forgotten where) draws a blue rectangle:

<!DOCTYPE html>

<html>

<canvas id=’c’></canvas>

<script>

var c = document.getElementById(‘c’);

var gl = c.getContext(‘webgl’);

gl.clearColor(0,0,0.8,1);

gl.clear(gl.COLOR_BUFFER_BIT);

</script>

</html>

Hmm not too bad but things get complicated quickly. Check out an example written using raw WebGL and using a library:

Life’s too short so I’d strongly suggest you avoid working with WebGL directly and use one of the many libraries available:

Three.js seems to be the dominant one right now so that’s the one I will be using in my coming posts.

Next time – getting started with Three.js and useful resources!

Advertisements