Not A Snark

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Bumpy Worlds ======

{{ :blog:edizafy_globe.png?direct&400|}}
I've been playing with the Javascript 3D library [[https://threejs.org/|three.js]] to generate textured globe images  for my WorldGen application. This allows me to relatively simply wrap a map texture around a globe, and have it rotating on a web page.

It also has a bump map feature, so applying a height map means it is possible to simulate differing heights for different parts of the world, and have them rendered on the globe. This is currently being used to show up coastlines, mountains and craters on the world as having varying heights.

Three.js also has the concept of a distortion map, which allows true height differences to be shown. Since most worlds are pretty flat at the scales shown, I'm not using this for now, though it seems like a good option for small bodies which aren't entirely round.

{{:blog:edizafy_2d.png?direct&200 |}}
The original map for the world uses an icosahedral projection, which means it is non-contiguous (it has gaps inserted at regular intervals along the poles, to account for the reduced circumference at higher latitudes). Since it is made up of triangles, craters appear as obvious triangles or hexagons (as does the shading and coastlines), but I rate the benefits of triangles tiling perfectly into the icosahedron to be a bigger advantage. It would be possible to make the triangles smaller, but previous experience with world mapping has shown me that lower resolutions are easier (and quicker) to generate. Getting continents which actually look like real continents is easier at low resolution. High resolution fractal maps always ended up looking artificial without a lot of post-processing.

{{:blog:edizafy_texture.png?direct&200 |}}
To generate the texture map, it's necessary to stretch the map to make it contiguous. It's a simple process to take each row, remove any background pixels, and then stretch the remaining pixels to fit the whole width of the map. As can be seen in the stretched image, the poles are quite heavily distorted, whereas the equatorial regions are left more or less intact.

This is a problem present on any rectangular real-world map - how to minimise the distortion at the poles in a way that is most beneficial.

{{:blog:edizafy_bump.png?direct&200 |}}
Finally, there is the height map. Possibly due to me not fully understanding 3D graphics, my original attempts at bump mapping resulted in a large number of black lines all over the map, wherever there was a height difference. Since the height scale ranges from 1 to 100, every triangle was a different height to its neighbours, it looked like a mess. When the height map is first generated, it uses a semi-fractal algorithm which guides the creation of continents, and is used to produce shading.

After that though, it is flattened. Seas, craters and rifts are given a height of 1, the highest mountains a height of 100 and everything else is set to 50. This produces a very flat looking height map, but it seems to create better bump mapping effects than the more gradual scaling did.

By combining these various maps, I can display a practical flat map showing the world surface, as well as a more graphical textured globe for seeing what the world actually looks like. It should be relatively trivial to add in cloud effects, and even colouring according to the local starlight. The brightness of the globe is actually affected by the proximity to the local star, which is currently making hot worlds very bright. Whether that is accurate or not is something I need to check.