High resolution terrain


I am looking to create a regional map so it can be displayed on the web and users can interact a bit with it (mostly a few markers, with some info and downloads). Since the map is its main feature, ideally I want it to look stunning, so I looked into terrain generation software like World Creator and Gaea.

I was wondering how complex it might be to import terrain (and objects, as I understand in World Creator you can get trees and such as well) generated in such software to use them with PlayCanvas at a high resolution; I’d rather avoid the typical and flat 90’s 3D graphics terrains I tend to see on webgl projects.

An example that comes to mind was the Middle Earth interactive map that was created for the Hobbit movies, but it seems to be offline now. I can only find its google experiment page, which while it shows a bit of what I want (first 10s of the video, and the last screenshot) it doesn’t really do it justice.

Any insight would be greatly appreciated.


Hi Nick and welcome,

It’s definitely possible in PlayCanvas to create nice looking terrains though you will have to code some systems yourself to get it done. Here is the default terrain tutorial by PlayCanvas:


We’ve used world creator with PlayCanvas ourselves for a number of projects and it’s a nice art pipeline.

From my experience you are looking at the following things to get decent looking open worlds:

  1. Export heightmap and splatmaps from world creator. You will have to write a shader to extend the standard PlayCanvas material to mix diffuse (and for better quality normal and/or parallax) maps based on the splatmaps.

For the heightmap you can use the default PlayCanvas example to generate the terrain on runtime. For vast terrains you will have to extend it to support tiled heightmaps, so rendering gets a performance boost.

  1. For vegetation like trees and grass world creator would export not models but heatmaps (that’s the default for other engines as well). You will have to write some parser that reads those maps and extracts placement coordinates for your PlayCanvas models. You will have to use batching or hardware instancing to reduce draw calls and be able to render them (that’s relatively easy and supported by the engine). Though to get decent quality and performance that scales down to mobile devices you will have to write a system that extends batching or instancing to support level of details (LODs).

Hi Leonidas, thank you for the prompt response! It looks like I didn’t get notified of a reply, so only now did I see it.

Glad to hear it’s possible on PlayCanvas, though I’m unsure if that’s the best approach (heightmaps, and LOD for objects). You’d definitely know best, I’m just afraid I might not have expressed myself properly:

It’ll be essentially a world map that can be seen in its entirety, with the possibility to zoom in slightly into a region when a specific one is selected to present information about it. I won’t be zooming in to the level of a first person game, trees would still be somewhat distant; a very large mountain might have a 5cm diameter at most at the closes level of zoom seen from the top down.

Would it perhaps be possible or preferable to export the terrain with all objects as a mesh and import that into PlayCanvas?