# custom geometry always float on terrain.

**URL:** <https://community.cesium.com/t/custom-geometry-always-float-on-terrain/7887>\
**Category:** CesiumJS\
**Created:** [January 11, 2019, 8:47am UTC](https://community.cesium.com/t/custom-geometry-always-float-on-terrain/7887 "2019-01-11T08:47:15Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![liu\_liang](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/liu_liang/32/3885_2.png) [@liu\_liang](https://community.cesium.com/u/liu_liang)\
**Post date:** [January 11, 2019, 8:47am UTC](https://community.cesium.com/t/custom-geometry-always-float-on-terrain/7887/1 "2019-01-11T08:47:15Z")

</div>

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

A custom geometry always float on terrain.

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

var positions = Cesium.Cartesian3.fromDegreesArrayHeights([

104.317776, 31.59491, 0,

105.317776, 32.59491, 0,

102.317776, 33.59491, 0

]);

var numPositions = positions.length;

var pos = new Float64Array(numPositions \* 3);

for (var i = 0; i \< numPositions; ++i) {

pos[i \* 3] = positions[i].x;

pos[i \* 3 + 1] = positions[i].y;

pos[i \* 3 + 2] = positions[i].z;

}

var geometry = new Cesium.Geometry({

attributes: {

position: new Cesium.GeometryAttribute({

componentDatatype: Cesium.ComponentDatatype.DOUBLE, // not FLOAT

componentsPerAttribute: 3,

values: pos

}),

normal: new Cesium.GeometryAttribute({

componentDatatype: Cesium.ComponentDatatype.FLOAT,

componentsPerAttribute: 3,

values: new Float32Array([0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0])

})

},

indices: new Uint32Array([0, 1, 2]),

primitiveType: Cesium.PrimitiveType.TRIANGLES,

boundingSphere: Cesium.BoundingSphere.fromVertices(pos)

});

var geoInstance = new Cesium.GeometryInstance({

geometry: geometry,

attributes: {

color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)

},

show: new Cesium.ShowGeometryInstanceAttribute(true)

});

var appearance = new Cesium.MaterialAppearance({

flat: true,

vertexShaderSource:"attribute vec3 position3DHigh;\n\

attribute vec3 position3DLow;\n\

attribute vec3 normal;\n\

attribute float batchId;\n\

varying vec3 v\_positionEC;\n\

varying vec3 v\_normalEC;\n\

void main(){\n\

vec4 p = czm\_computePosition();\n\

v\_positionEC = (czm\_modelViewRelativeToEye \* p).xyz;\n\

v\_normalEC = czm\_normal \* normal;\n\

gl\_Position = czm\_modelViewProjectionRelativeToEye \* p;\n\

}",

fragmentShaderSource:"varying vec3 v\_positionEC;\n\

varying vec3 v\_normalEC;\n\

void main(){\n\

gl\_FragColor = vec4(1.0,0.0,0.0,1.0);\n\

}",

translucent: true

});

viewer.scene.primitives.add(new Cesium.Primitive({

geometryInstances: [geoInstance],

asynchronous: false,

appearance: appearance

}));

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

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

Cesium 1.53

 ![cesium-trangle.jpg](https://global.discourse-cdn.com/cesium/original/1X/e20b855cb8002fe3e62e363037297a9fd08b7e2a.jpeg)

---

<div class="post-metadata">

**Author:** ![omar](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/omar/32/1999_2.png) [@omar](https://community.cesium.com/u/omar)\
**Post date:** [January 14, 2019, 2:15pm UTC](https://community.cesium.com/t/custom-geometry-always-float-on-terrain/7887/2 "2019-01-14T14:15:08Z")

</div>

If you want your geometry on the terrain, you can either construct it there by getting the terrain heights at the vertices:

[https://cesiumjs.org/Cesium/Build/Documentation/sampleTerrainMostDetailed.html?classFilter=sampleT](https://cesiumjs.org/Cesium/Build/Documentation/sampleTerrainMostDetailed.html?classFilter=sampleT)

Or I think you need to use GroundPrimitive instead of Primitive:

[https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/GroundPrimitive.js](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/GroundPrimitive.js)

---

<div class="post-metadata">

**Author:** ![liu\_liang](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/liu_liang/32/3885_2.png) [@liu\_liang](https://community.cesium.com/u/liu_liang)\
**Post date:** [January 15, 2019, 1:29am UTC](https://community.cesium.com/t/custom-geometry-always-float-on-terrain/7887/3 "2019-01-15T01:29:07Z")

</div>

I try to use GroundPrimitive instead of Primitive,but the GroundPrimitive does not support custom geometry .

Even thougth I set the really heights at the vertices, the same geometry has different position while eye point changed.

 ![view2.jpg](https://global.discourse-cdn.com/cesium/original/2X/5/5e5f9bfd45dcacff6952e39ee01902dcb60b180b.jpeg) ![view1.jpg](https://global.discourse-cdn.com/cesium/original/2X/8/8b151e9db0abd6120055f7a1ec8e5eb94a4d8e11.jpeg)

在 2019年1月14日星期一 UTC+8下午10:15:08，Omar Shehata写道：

---

<div class="post-metadata">

**Author:** ![omar](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/omar/32/1999_2.png) [@omar](https://community.cesium.com/u/omar)\
**Post date:** [January 15, 2019, 8:07pm UTC](https://community.cesium.com/t/custom-geometry-always-float-on-terrain/7887/4 "2019-01-15T20:07:28Z")

</div>

I’m not sure what you mean by:

> Even thougth I set the really heights at the vertices, the same geometry has different position while eye point changed.

Did you use sampleTerrainHeightsMostDetailed to get the ground heights? Are you able to create this effect in a Sandcastle ([https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/](https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/)) that you can share? (Create your example, then click “Share” at the top and paste the link here).

For GroundPrimitive and custom geometry, it should work fine as long as it’s in the list of valid geometries described here:

[https://cesiumjs.org/Cesium/Build/Documentation/GroundPrimitive.html#GroundPrimitive](https://cesiumjs.org/Cesium/Build/Documentation/GroundPrimitive.html#GroundPrimitive)

I think this is because those geometries have a shadowVolume defined, which is what is used to drape the polygon on the surface.

---

<div class="post-metadata">

**Author:** ![liu\_liang](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/liu_liang/32/3885_2.png) [@liu\_liang](https://community.cesium.com/u/liu_liang)\
**Post date:** [January 16, 2019, 1:37am UTC](https://community.cesium.com/t/custom-geometry-always-float-on-terrain/7887/5 "2019-01-16T01:37:52Z")

</div>

I am sorry ,I forgot globe depthTestAgainstTerrain.

在 2019年1月16日星期三 UTC+8上午4:07:29，Omar Shehata写道：

---

<div class="post-metadata">

**Author:** ![omar](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/omar/32/1999_2.png) [@omar](https://community.cesium.com/u/omar)\
**Post date:** [January 16, 2019, 3:44pm UTC](https://community.cesium.com/t/custom-geometry-always-float-on-terrain/7887/6 "2019-01-16T15:44:13Z")

</div>

Oh, yes! Glad to hear it works now. And thanks for posting your code snippet, I’m sure it will be useful to anyone working with custom geometry in CesiumJS.