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>