Three.js and WebGL Adventures

As something to keep me occupied mentally over the last few weeks whilst my shoulder recovered, I’ve been working on a few different projects using WebGL. If you aren’t familiar, WebGL is a port of OpenGL in Javascript, meaning that it can be ran in any web browser that supports hardware accelerated processing via a GPU.

Screen Shot 2016-06-25 at 11.51.14

I set out to make the most interesting physical system I could think of whilst also keeping the physics to a relatively simple level so I could keep on top of both of the 3d and physics. The easiest answer to this was to make a model of the solar system:

  • All the planets and eventually moons/rings/asteroids can be separated into discrete 3d groups making them very easy to work with.
  • In conjunction with the above, I modelled the physical characteristics using Keplers laws, which is a beautifully simple and quite accurate way of modelling celestial mechanics. I attempted to try and model through general relativity but even two bodies proved very difficult for both me and my MacBook’s cpu.
  • Each planetary group is simplified to the assumption of a point mass. As time goes on I want to make it more complicated but I am hamstrung by the cpu usage of the computer, and as the number of bodies grows the problem gets worse.

At the moment, it looks cool enough to show off, and has been a fantastic learning exercise. There are much more advanced models around the internet but it’s a good springboard for learning more about 3D programming, linear algebra, and shader programming.

I will continue to add things to it for the time being but I may start playing about with other projects. The potential of this technology is enormous, and I feel within the next five years it will become far more prominent, as people begin to switch away from canvas and svg renders and give preference to WebGL for making more interactive and impressive web applications.

The source code is located here:

GitHub

There are mirrors of the actual program here and here. The github mirror will be most frequently updated. I wish I could work out how to embed it in the WordPress theme!