Game Project Part 1: Loading a Simple Map

Commit 63a71e1f1562d547fd45d0e91a16fc236707962f

I have decided to build this project off of my old codebase. It contains quite a few useful implementations, such as one for THREE.js octrees, and several pathfinding algorithms. You can view the Github repo at github.com/MontyThibault/JSGame. Since I assume the majority of readers will be reading this at much later date, I'll be putting the git commit hash at the time of writing at the top of each post - that way, if you want, you can back up the repository to exactly what it's like for me right now!

Creating the Assets

I first wanted to emulate the type of terrain that was in my old RTS engine. This consisted of a few valleys and mountains to indicate passable and impassable regions. I'll be able to use those in the future to experiment with pathfinding capabilities for my game.

My background in 3d graphics comes in very useful for this kind of thing. The process goes about as follows:

1. sculpt a high-resolution mesh
2. run a decimate modifier to reduce polycount
3. create special linkages for the movement system
4. set up materials/lighting
5. bake out the colourmap
6. export mesh using the Blender THREE.js exporter

Here's the result of playing around in Blender for about half an hour:

A fantastic feature of the new cycles render engine is the ability to bake out textures based on properties of object/3d scene. ex. shadow maps, ambient occlusion maps, normal maps, et cetera. Here is a texture for all the color values in the final render, mapped to the terrain's UV coordinates.

I am going to use this as the colourmap for my basic terrain. It includes shadows and the likes already baked into it, so it will fake the effect of having lights/more complex shaders in a simple flat-shading system like what I have right now. In the future, I will replace this with a complete system of real lights/shaders in WebGL itself and then it'll begin to look really good. Until then, this colourmap should provide us with a way to get descently asthetic results.

Importing into THREE.js

After exporting the model, including the UVs and normals, to a JSON object format thanks to the THREE.js Blender exporter, it's time to load the model into the browser. This process is made simple thanks to the built-in utilities provided by THREE.js. This is the code for processing everything:

function load(callback) {
        var loader = new THREE.JSONLoader();
        $path.text('assets/samplemap/map.js');
        loader.load('assets/samplemap/map.js', function (geometry) {

            $path.text('assets/samplemap/Colormap.png');
            THREE.ImageUtils.loadTexture('assets/samplemap/Colormap.png', 
                THREE.UVMapping, function(texture) {

                texture.magFilter = THREE.NearestFilter;
                texture.minFilter = THREE.NearestFilter;
                texture.anisotropy = 16;

                exports.material = new THREE.MeshBasicMaterial({
                    map: texture
                });

                exports.mesh = new THREE.Mesh(geometry, exports.material);
                exports.mesh.scale.set(1, 1, -1);

                callback(exports.mesh);
            });
        });
    }

As you can see, it's really not anything too tricky. THREE.js handles all the hard stuff for us. You might notice that I had to invert the Z axis on the model for it to display correctly. It could be a bug with the exporter not converting between coordinate systems, though I'd rather not have to hunt down the reason.

It took a few hours of debugging to update my old code to work with the new system. A combination of the inverted-Z axis program, some design issues in the camera module, and updated THREE.js API caused the program to render a blank screen without giving any error messages. Good ol' JavaScript kept putting NaNs into the calculations without any warnings. Maybe someday I'll create a more rhobust system to debug scenegraph objects, like you might find in Unity, though that could be considered a new project in itself!

Anyways, the final system is just as beautiful as you'd think it'd be. You can access it online at montythibault.github.com/JSGame/ (this is probably a newer version if you're reading in the future. You'd have to clone the Git repo and go back to the commit with the hash I provided if you're dying to see it, which I just know you are!)

Here's a screenshot: