Terrain

CesiumJS supports streaming and visualizing global high-resolution terrain and water effects for oceans, lakes, and rivers. View mountain peaks, valleys, and other terrain features and embrace the 3D globe. Use Cesium ion to stream your own tiled terrain data or high resolution curated terrain such as Cesium World Terrain.

Quick start

Open the Hello World example in Sandcastle. By default, the globe is a WGS84 ellipsoid. Specify a different terrain provider by passing the terrainProvider option to the Viewer. Let’s use Cesium World Terrain:

Copy to clipboard. Data copied clipboard.
Cesium.Ion.defaultAccessToken = 'your_access_token';
var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider : Cesium.createWorldTerrain()
});

After modifying the example, press F8 to run it. Zoom to a mountainous area, and hold down the middle mouse button and drag to tilt to a horizon view. Here’s what Mount Everest looks like:

Mount Everest

As we zoom closer, CesiumJS requests higher resolution terrain based on what parts of the globe are visible and how far away they are.

Terrain and imagery are treated separately, and any imagery provider can be used with any terrain provider. See the Imagery Layers Tutorial for managing imagery.

Enabling Terrain Lighting and Water Effects

Cesium World Terrain also includes data for terrain lighting and coastline data needed for water effects. By default, this data is not sent with the terrain tiles. To enable terrain lighting, requestVertexNormals and enable lighting on the globe.

Copy to clipboard. Data copied clipboard.
var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider : Cesium.createWorldTerrain({
        requestVertexNormals: true
    })
});
viewer.scene.globe.enableLighting = true;

Here is the same view of Mount Everest with terrain lighting based on the location of the sun.

Mount Everest with lighting

Water effects are enabled in a similar manner, using requestWaterMask:

Copy to clipboard. Data copied clipboard.
var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider : Cesium.createWorldTerrain({
        requestWaterMask: true
    })
});

Zoom to an area with water to see the effect. Here is the San Francisco Bay:

San Francisco Bay

The waves animate over time and bright specular highlights show the reflection of the sun and moon. The water effect can be customized by changing the normal map used to create waves with Globe.oceanNormalMapUrl. Changing the imagery provider also affects the water’s appearance because the water color is blended with the underlying imagery.

See the terrain example in Sandcastle to explore a few choice areas with interesting terrain and water.

Ready-to-stream terrain

Cesium World Terrain: High resolution worldwide terrain, supporting both terrain lighting and water effects by extension. Cesium World Terrain is hosted in Cesium ion or can be purchased for offline use. Add it to your CesiumJS apps for fast and efficient terrain visualization. Cesium World Terrain is also available for use on-premise.

Terrain providers

Cesium supports several methods for requesting terrain using terrain providers. Most terrain providers use a REST interface over HTTP to request terrain tiles. Terrain providers differ based on how requests are formatted and how terrain data is organized. CesiumJS supports the following terrain providers:

Terrain providers are constructed similarly to imagery providers and usually include the url of the terrain server and an optional proxy if the server does not support Cross-Origin Resource Sharing (CORS).

Resources

Checkout the terrain example in Sandcastle and the reference documentation for all terrain providers.