CanvasMap
Getting Started Tutorials 3D Reference

Visualizing Terrain

3D Mapping allows us to visualize terrain and then move through the terrain. The Humboldt Bay 3D example demonstrates the various options for terrain.

Simple Terrain Layer

To have a simple terrain surface, you just need to add an image of a DEM as a png or jpg image to a terrain layer. Then, laying another image over the DEM as a "map" creates a 3D terrain surface. The term "map" is specific to THREE.js and most 3D software refers to this as a texture. You can change the height of the DEM with the "Exageration" setting.

It would take a very high resolution DEM to create a truely realistic looking scene. This would then lead to a large number of polygons being rendered in the GPU, slowing down performance. One of the ways to get around this is by adding a "bump map" to your terrain. The bump map does not change the height of the DEM polygons but instead changes how light reflects off the surface making it look like there is additional terrain. You can create a bump map in a GIS application by downsampling a DEM and then up sampling it again and substracting it from the original DEM. The result will contain the remaining changes in the terrain that were removed when the DEM was downsampled.

The process that was used for the sample is:

  1. Load a DEM into BlueSpray
  2. Use the Sample transform to down-sample the DEM by a factor of about 8 in each direction.
    1. Right cilck on the layer and select Transforms: General -> Sample...
    2. Enter 16 for the X-Direction
    3. Click OK
  3. Save the downsampled DEM to a JS file. This will be the DEM terrain will be laid over in the 3D scene.
  4. Create a shaded relief image (i.e. a hillshade) of the DEM
    1. Right click on the layer and select Transforms: Cartography -> Carto Mixer
    2. Select a new Color Ramp and click Update to see the color ramp's effect on your DEM
    3. Change the points on the Color Ramp and click Update again to create your own color ramp
    4. When you like the result, click OK
    5. There is help for the Carto Mixer available by clicking on the Help button in the dialog
  5. Save the resulting shaded relief image to a PNG file

The code below shows how to create the terrain layer and specify the images for the DEM and the map. 

//************************************************************************
//  terrain layer
//************************************************************************

var DEM_URL="../3D/GISData/earthbump1k.js"; // elevations
var TheImage='../3D/images/earthmap1k.jpg'; // image that is draped over the elevations

var FlatEarth=new CM3LayerTerrain();
FlatEarth.SetSetting("Item","Name","Flat Earth");

FlatEarth.SetSetting("Elevation","Exaggeration",0.1); // change the height of the DEM

FlatEarth.SetSetting("TerrainMaterial","map",TheImage); // add an image overlay

TheMainContainer.AddLayer(FlatEarth);

FlatEarth.SetSetting("Dataset","URL",DEM_URL);
FlatEarth.RequestData();

Bump Map

A bump map can be used to make the terrain appear to have more complexity than the DEM allows. This is done by creating an image that contains the difference between the low-resolution DEM we just created and then original DEM.

The process that was used for the sample is:

  1. Upsample the DEM that you saved to a JS file in the previous section back to its original resolution by using 1 over the X-Direction sample rate you used in step 2. This creates a raster that has the same number of pixels as the original but has the values from the downsampled DEM.
    1. Right cilck on the layer and select Transforms: General -> Sample...
    2. Enter 1 over the original sample rate (0.0625 for 16).
    3. Make sure to change the Method to Bilinear.
  2. Subtract the upsampled DEM from the original DEM. This creates a raster with the detail that was lost when the original DEM was downsampled.
  3. At this point the image is a grayscale image (1-band) and contains floating point pixels. The web only supports RGB, 8-bit images. Select Data Type to convert the raster to 8-bit.
  4. Convert the gray scale raster to RGB:
    1. Select Transforms: General -> Copy Bands to New Raster...
    2. Select 3-bands for the Number of Bounds in Output
    3. Click OK
  5. Save the result of the subtraction to a PNG file. This becomes the Bump Map for the terrain.

Below is the code to add the Bump Map to your layer. Note that there is also a bumpScale setting which changes how intense the bumps appear. 

var TheBumpMap='../3D/images/earthbump1k.jpg'; // simulated "bumps" on the map
FlatEarth.SetSetting("TerrainMaterial","bumpMap",TheBumpMap);
FlatEarth.SetSetting("TerrainMaterial","bumpScale",2);

Specular Map

You can also provide a reflectance map, also referend to as a specularMap, to change how the well the surface reflects light. Water should have high values while most other surfaces will have lower values. For best performance, the texture image, bumpmap, and specular map should be the same resolution and dimensions. Three.js also perfers these images to be a factor of two in dimension (e.g. 256, 512, 1024) but will work with other dimensions. 

var TheReflectanceMap='../3D/images/earthspec1k.jpg'; // reflectance map
FlatEarth.SetSetting("TerrainMaterial","specularMap",TheReflectanceMap);

Drapes

If you want your terrain model to have a more finished appearance, you can add a drape around the outside of the terrain. The following settings apply:

 TheTerrainLayer.SetSetting("Elevation","OuterDrape",true);
 TheTerrainLayer.SetSetting("Elevation","DrapeColor","rgb(60,60,80)");
 TheTerrainLayer.SetSetting("Elevation","DrapeElevation",-15000);

Rounding Edges

Since our terrain models are created with DEMs, they follow the pixel edges within the DEM. If you use a DEM that contains a non-rectangular mask, you may have squares stiching our of the edges of your terrain. Setting RoundEdges to true will round off the corners and remove three sided faces.