- Three.js? WebGL? What is this?
- Assets: A free world map on AWS
- Assets bis: textures
- Assets ter: free 3D models
- Missing parts
- 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.
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.
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!
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.
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 :)
Subscribe to Openbloc
Get the latest posts delivered right to your inbox