How to show polyline clamped to terrain always looking the camera

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

Hello, as far as I can understand the polylines NOT clamped to terrain (clampToGround : false) are always looking to the camera with the same width:

I mean that rotating the camera around the polyline this one keep the same width regardless of the view angle

(in this Sandcastle example you can better understand what I mean https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=CZML%20Polyline.html&label=All)

But, when the polyline is clamped to terrain (clampToGround : true) this one does not keep anymore the same width, but it’s more like a “ribbon” on the terrain.

(in this Sandcastle example you can better understand what I mean https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Clamp%20to%20Terrain.html&label=All)

Is there a way to clamp the polyline to the terrain and at the same time keep its width constant regardless of the view angle?

Thank-you

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

viewer.entities.add({

polyline : {

positions : Cesium.Cartesian3.fromDegreesArray([

86.953793, 27.928257,

86.953793, 27.988257,

86.896497, 27.988257

]),

clampToGround : true,

width : 5,

material : new Cesium.PolylineOutlineMaterialProperty({

color : Cesium.Color.ORANGE,

outlineWidth : 2,

outlineColor : Cesium.Color.BLACK

})

}

});

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I’m doing a route web app with 3d maps, many routes are over the mountains so I need the terrain 3D model,

and I need to clamp my routes to the terrain.

At the same time my routes should be well visible regardless of the view angle

4. The Cesium version you’re using, your operating system and browser.

1.60

Chrome - Safari

2

Have you tried using Ground Primitive?

const addLineToGround = (viewer, degrees_array, color = ‘#E91E63’, width = 4.0) => {
const polyline = new Cesium.GeometryInstance({
geometry: new Cesium.GroundPolylineGeometry({
positions: Cesium.Cartesian3.fromDegreesArray(degrees_array),
width
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString(color).withAlpha(0.8))
// distanceDisplayCondition: new Cesium.DistanceDisplayConditionGeometryInstanceAttribute(1000, 30000)
}
});

viewer.scene.groundPrimitives.add(new Cesium.GroundPolylinePrimitive({
geometryInstances: polyline,
appearance: new Cesium.PolylineMaterialAppearance({
material: Cesium.PolylineColorAppearance()
})
}));
};

``

3

Thank-you Tommy,
I’ve ended-up sampling the height for each coordinate (longitude, latitude), pushing them into the coordinates array and create a not clampedToGround polyline.

For sure I’ll try your solution too