Providing my own terrain

CesiumJS
1

Hello guys,

Can someone explain me how to provide my own terrain?
For example, I have geotiff files. As I understand, I need to

  1. Convert geotiff into quantized-mesh format.
    • does CTB works for it?
    • is a requirement to have a layers.json? if so, is there a way to generate the layers.json automatically?
  2. Server the terrain files

I have currently converted one geotiff file into terrain, and I generated my own layer.json, but I cannot visualize my terrain. So, I am a bit lost if this is the correct path to take. Also, I do not know where the issue is, if the issue is in my terrain file, in my layer.json, or in my server.

Thank you so much for the help.

I have a simple html code to test in a viewer:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Cesium Terrain Test</title>
  <script src="https://cdn.jsdelivr.net/npm/cesium/Build/Cesium/Cesium.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
  <style>
    html, body, #cesiumContainer {
      width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // Initialize viewer with no terrain initially to speed up load
    const viewer = new Cesium.Viewer('cesiumContainer', {
      imageryProvider: new Cesium.IonImageryProvider({ assetId: 2 }),
      terrainProvider: new Cesium.EllipsoidTerrainProvider()
    });

    // Async load MapTiler terrain and set it on the viewer when ready
    async function loadTerrain() {
      try {
        const terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(
          *'localhost:8000',* //replace with the terrain server
          {
            requestVertexNormals: true,
            requestWaterMask: true
          }
        );

        viewer.scene.terrainProvider = terrainProvider;
        viewer.scene.globe.terrainExaggeration = 2.0; // Optional exaggeration

        // Fly camera to a good location for testing
        viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(7.65, 45.9, 20000)
        });

        console.log('Terrain loaded successfully!');
      } catch (err) {
        console.error('Failed to load terrain provider:', err);
      }
    }

    loadTerrain();
  </script>
</body>
</html>
2

Hi @Natalia_Medrano_do_N, welcome to the community!

If you simply want to visualize your terrain in Cesium, the easiest way would be to sign up for a free Cesium ion account and upload your geotiff files there. See Terrain – Cesium.

Cesium Terrain Builder is not affiliated with Cesium in any way. If you want to go that route, you could try contacting the maintainers of that repo directly.

Is it important for you that the terrain files be hosted on your own server?