Why WebGL and node.js (and websockets) are important

Published on 2011-3-14

I've just moved to a new role in Belgium, and this means I've got time for some writing again, the popular vote on Twitter is that I blog my thoughts on these two cookies, and as they're what I'm currently ploughing my way through I can't help but pander to those requests.

If you're completely new to the wonderful world of these two technologies, then bear with me - this isn't that technical a post, and it might prompt you to read the next entries in the series coming up and maybe even dabble in it yourselves.


WebGL is a standard created to allow developers to embed a full on 3D accelerated experience inside the browser (using the canvas element), by developing against the already well known OpenGL API. It really is that simple - in Javascript, give us the method calls we're already used to in other languages to render our shiny stuff on screen.

And I really do mean shiny stuff, we are totally able to write our very own vertex and index shaders (mini-programs that run on the GPU across uploaded data) in HLSL (Again, the way we already know how) in order to create awesome shiny pieces of wonder ala this demo here


Why is this great? It is a standard that browser vendors can implement (and already do, at least with Chrome, Firefox and Safari), allowing developers to create fully featured games (or applications, hah) that are cross platform right out of the box - and I don't just mean cross platform in terms of Apple/Windows/Linux here (Although that is immense in itself), I mean cross platform as in across all mobile devices as they begin to implement the standard too

(With Google pushing it into Chrome so fast, you'd better bet it'll end up on Android, and we'd hope that with Apple supposedly being all "pro standards" that they'd get it on the iPhone seeming as it already runs OpenGL).

That's right, games and rich applications that you can deliver from the internet to any client with a modern web browser - whether it be tablet, phone, laptop or desktop; there be gold in those there hills!

With local storage and the ability to save those pages and their dependencies to the hard drive we essentially also give them the ability to run off-line as desktop applications too. You can see that this is going to be a big thing as we move to more web-oriented computer systems (Google OS etc)

Node.js and Websockets

If we're going to be writing our client code in Javascript, then it makes sense to go and write our server in the same language, allowing us to easily share code between the two. Websockets give us a great way of real-time communication with the web server.

They're currently disabled while they sort out security concerns, but the gap is serviced with socket.io allowing us to write code against whatever else is there and be forwards compatible for when they're enabled again.

Node.js, if you didn't know already, is a way to write completely non-blocking asynchronous code on the server (or desktop), hosted in Google's V8 Javascript engine (pretty darned fast).

It's ideal as a way of writing fast and efficient server code for communicating data between the clients connected via Websockets. It also has a large community and a great library of packages (data persistence, not a problem). It's also delightfully simple to use (A basic chat server and client in 15 lines of code?).

Oh, and the plans for web-sockets will allow p2p communication, so it's not like you have to place your entire load on a server either. I can see some very exciting things happening here the coming years.

This amazing set-up looks something like this:

Hi guys, it's the future and this is what I look like.

Where I'm going with this

What I'm trying to say is that with this combination of techno-wizardry, we have a way of easily deploying rich applications to potentially anybody on the planet, and provide a mechanism for getting them to communicate easily in real-time. This can all be easily developed in an already ubiquitous language, using frameworks we're readily familiar with and with a community that is growing at a vast rate of knots.

I know it's an oft-repeated statement, but the line between the desktop and web grows ever thinner, and it is swiftly becoming less relevant what the underlying platform actually is. With this, we move another step closer to the dream world of everybody being able to do anything anywhere. Hurrah!

The coming micro series of posts

Over the weekend, @ToJans, @Seagile and I dived right into this technology stack, none of us are really Javascript developers and we made a few mistakes to begin with, but over the course of a day and a bit we managed to get the most amazing playable over the Internet game there is written.

It looked something like this:

Okay - I totally admit we could have done this with the plain old 2D acceleration with the HTML5 canvas (And that is a viable option for cross platform interactive applications too!!), but as a learning exercise we have to start somewhere, and WebGL 3D acceleration with an orthographic projection matrix is probably the simplest place we can start.

I'll be finishing it off and sticking it publicly on the Internet somewhere over the coming week before moving onto a more "real" project I have planned with the same technology, but in the coming posts I'll show you all what this actually looks like behind the scenes, how the technologies fit together and some patterns we used that kept our code clean(er) during this process.

Ace. Exciting. Super cool - all that.

2020 © Rob Ashton. ALL Rights Reserved.