A star field WebGL demo application with three.js

WebGL with three.js

As an avid gamer I've always been interested in what it might take to create a simple game. I started looking into frameworks and ways to develop and publish games across multiple platforms using things like Steam, Python, or Javascript. I've been interested trying to span both desktop and mobile devices with the same codebase.

I stumbled across three.js, a javascript library, and it looks like a great framework to get started with WebGL development. I thought it might be neat to put together a star field simulation demo to start to learn more about WebGL and refresh some of that college computer graphics material. With some guides and examples of three.js I put together the demo application in the window below.



If you see the star field simulation above then you've got WebGL support in your browser. If not you'll want to search on the web about how to enable WebGL in your browser, or get a browser like Chrome that has WebGL support. I'm using Safari under OSX and had to jump through a few hoops to enable WebGL support, for some reason Apple doesn't enable it by default.

I pulled in the stats.js library to show frame rate. This is the box in the upper right that, when clicked, toggles between showing frame rate and frame rendering time. three.js tries to maintain 60fps.  If your application is doing too much, such as creating a ParticleSystem with a large number of points or adding too much processing to the render loop, the stats window will let you quickly see if your computer can't maintain 60fps.

In the upper right is dat.gui. This helpful module made it trivial to expose the speed setting of the particles and to allow showing / hiding the stats window.

Start to finish it took me about three hours to put together the star field demo with no prior three.js experience. three.js an impressively well documented and supported framework with tons of examples and great support on stackoverflow.

Publishing the demo

Then came the question of deployment. A simple javascript application like this could probably get away with linking to web versions of three.js, stats.js and dat.gui and in fact I am linking to the web version of stats.js off of GitHub (through rawgit.com so the Content-Type is correct for browsers like Chrome that won't run javascript if it comes across as text/plain). For the rest of the files, the index.html, the particle image file etc, I needed a place on the Internet to put them so they could be loaded when the application started up.

It turns out that Google Drive supports hosting websites, and supports hosting any kind of file. The only trick was to disable file conversion on upload of known types. Otherwise Google Drive was converting the index.html file into a document and losing all of the javascript, the only important part in the file. Once this automatic conversion feature was turned off I was able to upload the supporting javascript, the index.html and the image used as the texture map for the stars in the star field. If you right click on the star field application you should be able to open it in its own tab. Notice the crazy looking Google Drive URL that corresponds to the shared folder in my drive account. Using Google Drive to host website files was a piece of cake.

I'm relatively happy with the look of the star field. I did try for a while to implement a far field of stars to better represent how I would imagine open space to look. I had trouble getting this to look good. On Safari on a MBPr the sub pixel dithering made the far stars look great, some were bright, others dim. Under Chrome on the same MBPr the far field appeared as bright 1 pixel points. In the end I decided to get this more simple example done and complete this post.