My 3D polygons are being drawn below terrain

Question

I'm importing a JSON file with polygons but I can't put them at the terrain ground level. They insist to be below the terrain.

I've created my own terrain server using DEM SRTM and the docker tumgis/ctb-quantized-mesh ctb-tile and serving with Cesium Terrain Server.

I can access the tiles using the server URL.

This is my code:

var terrainProvider = new Cesium.CesiumTerrainProvider({
    url : 'THE_MY_OWN_TERRAIN_SERVER',
    requestVertexNormals : true
});

viewer = new Cesium.Viewer('cesiumContainer',{
    terrainProvider : terrainProvider,
    imageryProvider: Cesium.createOpenStreetMapImageryProvider({
        url : 'https://a.tile.openstreetmap.org/'
    }),
    timeline: false,
    animation: false,
    baseLayerPicker: false,
    skyAtmosphere: false,
    fullscreenButton : false,
    geocoder : false,
    homeButton : false,
    infoBox : false,
    sceneModePicker : true,
    selectionIndicator : false,
    timeline : false,
    navigationHelpButton : false,   
});
camera = viewer.camera;
scene = viewer.scene;

var imageryLayers = scene.imageryLayers;
// Will remove the layer later to test only the terrain wireframe
// imageryLayers.remove( imageryLayers.get(0), true );

viewer.extend(Cesium.viewerCesiumInspectorMixin);   

viewer.pickTranslucentDepth = true;


scene.highDynamicRange = false;
scene.globe.enableLighting = false;
scene.screenSpaceCameraController.enableLook = false;
scene.screenSpaceCameraController.enableCollisionDetection = false;
scene.screenSpaceCameraController.inertiaZoom = 0.8;
scene.screenSpaceCameraController.inertiaTranslate = 0.8;
scene.globe.maximumScreenSpaceError = 1;
scene.globe.depthTestAgainstTerrain = true; 

Now the JSON load process:

    Cesium.GeoJsonDataSource.clampToGround = true;
    var dataSource = new Cesium.GeoJsonDataSource();

    var geojsonOptions = {
        clampToGround : true
    };  

    var promise = Cesium.GeoJsonDataSource.load('buildings.json', geojsonOptions);
    promise.then(function(dataSource) {

        var entities2 = dataSource.entities.values;
        for (var i = 0; i < entities2.length; i++) {
            var entity = entities2[i];

            if (Cesium.defined(entity.polygon)) {
                var height = parseFloat( entity.properties['height'].getValue() );

                entity.polygon.material = Cesium.Color.LIGHTSEAGREEN;
                entity.polygon.outlineColor = Cesium.Color.BLACK;
                entity.polygon.fill = true;
                entity.polygon.outline = true;
                entity.polygon.extrudedHeight = height;                 

            }   
        }

        viewer.dataSources.add( dataSource );
        viewer.zoomTo( dataSource );    

    }).otherwise(function(error){
        alert( error );
    }); 

A JSON data sample:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            -43.565501,
                            -22.907241
                        ],
                        [
                            -43.565482,
                            -22.907243
                        ],
                        [
                            -43.565479,
                            -22.907215
                        ],
                        [
                            -43.565498,
                            -22.907213
                        ],
                        [
                            -43.565501,
                            -22.907241
                        ]
                    ]
                ]
            },
            "properties": {
                "osm_id": 629112723,
                "height": "3.43"
            }
        }, ..... 

The result WITHOUT terrain ( and the OSM imagery ):

The result WITH my terrain server:

Same as above but with wireframe debugger activated ( this will prove the terrain server is working ?):

And a little perspective:

Are my terrain tiles buggy? What can I do to correct this? Is there some free terrain server where I can test my code?

Answer 1

Found the solution here and here.

var promise = Cesium.GeoJsonDataSource.load('/resources/buildings.json');
promise.then(function(dataSource) {
    viewer.dataSources.add( dataSource );
    viewer.zoomTo( dataSource );
    var entities = dataSource.entities.values;

    for (var i = 0; i < entities.length; i++) {
        var entity = entities[i];
        var height = parseFloat( entity.properties['height'].getValue() );

        entity.polygon.outline = false;

        var position = entity.polygon.hierarchy.getValue().positions[0];
        terrainSamplePositions.push( Cesium.Cartographic.fromCartesian(position) );         


        entity.polygon.material = Cesium.Color.LIGHTSEAGREEN;
        entity.polygon.outlineColor = Cesium.Color.BLACK;
        entity.polygon.fill = true;
        entity.polygon.height = 0;
        entity.polygon.extrudedHeight = height;         

    }


    //Cesium.when(Cesium.sampleTerrain( viewer.terrainProvider, 13, terrainSamplePositions ), function() {
    Cesium.when(Cesium.sampleTerrainMostDetailed( viewer.terrainProvider, terrainSamplePositions ), function() {
        for (var i = 0; i < entities.length; i++) {
            var entity = entities[i];
            var terrainHeight = terrainSamplePositions[i].height;
            entity.polygon.height = terrainHeight;
            var height = parseFloat( entity.properties['height'].getValue() );
            entity.polygon.extrudedHeight = height + terrainHeight;
        }
    });     

}).otherwise(function(error){
    console.log( error );
});

The only thing I done was to remove createDefaultTerrainProviderViewModels because I have my own terrain server so I kept the terrain provider.

Just need a little more precision on my terrain server!!!