3D Map Viewer

How the CrossCode 3D Map Viewer works

Babylon.js is used to generate and render the 3d mesh.

The map used here is bergen-trail/test.json

CrossCode uses collision tile maps to determine heights used in the game, so to generate a 3d mesh we have to parse those maps
First we need to detect the edges of the collision map which will serve as the vertices for our polygon. I used the radial sweep algorithm, implemented how it is described on this page
With those vertices calculated we can simply generate a polygon in Babylon.js: MeshBuilder.CreatePolygon('test_polygon', {shape: vertices}, scene, earcut);
To display the texture on the polygon it needs to have correct UV coordinates applied to it's vertices. This example shows how uv coordinates work. Luckily Babylonjs already sets uv coordinates in such a way that the top left vertex is 0,0 and bottom right is 1,1 (displaying the whole texture). Now the only thing left to do is scale and move the texture so it displays the correct region.
The vertical faces are generated as another mesh and are not connected to the polygon generated earlier. The algorithm goes through each vertex (previously generated for the top polygon) and generates 2 triangles out of every neighboring pair. The 2 missing vertices are generated by adding the height of the current level to them.
By setting the UV's to the current position on the map with an offset accounting for the height, the texture is rendered properly for the front faces. The diagonals get a bit distorted because they try to map a texture drawn as a parallelogram with a 45° angle to a rectangle. The side faces repeat the same line of pixels over the whole face because the texture region they try to read from has basically a width of 0.
The last thing to do is repeat all the above steps for every collision layer and offset the resulting mesh according to their level height (and omitting the vertical faces for the lowest layer)

Result

Next steps

• use master level. Collision layers below master level behave differently and don't work right now
• add support for holes. The current contour tracer doesn't recognize holes
• add rendering of entities
• actions like scale, show/hide layers, wireframe, ...
• vr