Game Development with three.js on the modern web 🚀🎆

by Maxime Rouyrre

Back in November 2017 I started a journey in the world of game development using the modern JavaScript toolchain and three.js. This article is kinda a summary of the useful bits accumulated during ~3months of part-time work showing what it is to start from scratch with only “classic” web development experience and to end with below game prototype. This was done in the open using only open source tools, this is not your usual Unity or Unreal tutorial ;) Let's see what can be done:

Launch Demo Code on Github Star

Detailed followups:

Summary

  1. Three.js? WebGL? What is this?
  2. Assets: A free world map on AWS
  3. Assets bis: textures
  4. Assets ter: free 3D models
  5. Shaders
  6. Particles
  7. Marketing
  8. Missing parts
  9. What next?

Three.js? WebGL? What is this?

Three.js is a library that helps you build 3D interactive environments right into your browser by leveraging the power of the WebGL standard. The rendering is hardware-accelerated and it requires no plugin and no software installation, it's just a webpage.

Assets: A free world map on AWS

A huge ressource I stumbled upon while browsing Hacker News is the terrain tiles dataset hosted by Amazon. You can get PNGs containing elevation data, like these ones:

256x256 PNGs covering the whole world at various zoom levels. It doesn't look like anything at first, you have to extract the red, green and blue values (integers between 0 and 255) of each pixel to compute the elevation value using the following formula:

(red * 256 + green + blue / 256) - 32768

I used UPNG.js to decode the images obtained via the fetch API, inside a web worker.
Let's say we build a plane with 256x256 vertices and assign the elevation value to each vertex, we can now build mountains with real world data!

Then you just have to juxtapose several terrain tiles, combining different zoom levels and you can have your own 3D version of google maps:

I believe there's a huge potential of applications having such incredible datasets available in the open, gaming being just one possible application.

Assets bis: textures

I did not use a lot of textures but a good ressource where I found free high-resolution and high quality seamless textures is poliigon. They have some free textures of wood, rocks, grass, terrain, etc.

Assets ter: free 3D models

Let's go to Sketchfab, a company co-founded by the French guy Trigrou. There's a huge collection of 3D models, some of them available under the glTF format under permissive licences. The glTF format allows for an easy import by thrre.js using its glTF importer, you get the model and its textures in one pass.

Battle Damaged Sci-fi Helmet - PBR by theblueturtle_ on Sketchfab

Shaders

Shaders are small programs written in GLSL (openGL Shading Language) designed to run directly, and fastly, on the graphics card allowing you to compute all sorts of graphical effects. As of 2018, webGl allows you to program two types of shaders, vertex shaders, which can manipulate the vertices of your models and fragment shaders which work on each pixel of a frame and output their color.

A good introduction to learn shaders is The book of shaders.

I used shaders to texture the terrain differently depending on the slope of the terrain for example:

The depth of field effect is also done by shaders though I mostly reused existing code in this case.

Particles

For smoke, explosions, sparks, you need a particle engine. Luckily there's one for three.js: Shader Particle Engine

Even with such libraries it might be tricky to achieve decent and efficient results but it's worth the pain!

Marketing

I used my twitter account @maxmre as a cheap devlog to build a (small) following.

I used the /r/gamedev subreddit and their weekly threads to get feedback and guidance.

I tried the itch.io platform to post droneWorld on https://maxmre.itch.io/droneworld. Though the platform is great for indie gamedevs, it wasn't a match for droneWorld as you have to post a working game to get some traction, it's not really suited for hosting a prototype under construction. Itch.io can also host your devlog but in my case that would have been redundant with what I was doing on twitter.

As I was publishing the game on https://lab.openbloc.fr/droneWorld each time I was making some progress I kept the process quite agile by having to have a working build every day.

You must be conscious that the game development process is a pretty specific topic. You may get the attention of your fellow developers but that's not necessarily where your end users will be.

Missing parts

Mobile controls, desktop controls, shaders, texturing, modeling, packaging your javascript, sound environment, game logic, gameplay, bots programming, multiplayer aspects, game feel, performance bottlenecks, what I mainly (re)discovered is that game programming covers a lot of topics, actually it's a whole industry where each part I touched can be a fulltime job inside a big team.

What next?

What topic should I cover to expand this article? Use the comments below, tweet @maxmre or write at max at openbloc.fr to let me know!

Thanks for reading :)