# Extruded PolygonGeometry Appearance opacity/shading

**URL:** <https://community.cesium.com/t/extruded-polygongeometry-appearance-opacity-shading/7735>\
**Category:** CesiumJS\
**Created:** [November 27, 2018, 10:55am UTC](https://community.cesium.com/t/extruded-polygongeometry-appearance-opacity-shading/7735 "2018-11-27T10:55:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeremiasandris](https://avatars.discourse-cdn.com/v4/letter/j/54ee81/32.png) [@jeremiasandris](https://community.cesium.com/u/jeremiasandris)\
**Post date:** [November 27, 2018, 10:55am UTC](https://community.cesium.com/t/extruded-polygongeometry-appearance-opacity-shading/7735/1 "2018-11-27T10:55:20Z")

</div>

I am currently working on a pipeline for the visualization of buildings based on OSM data. For the future I want to generate a 3DTiles model as a result of the pipeline.

For testing purposes I am currently creating an extruded polygon entity for each building, which works well, but freezes cesium for a short time each time the entities are created.

To get around this, I switched to Primitive and PolygonGeometry. My problem now is that the buildings as entities look different than primitives, but I don’t know how to make primitives look the same as entities.

I’ve been doing a little work with Appearence but I don’t know how to solve my problem.

**This is the result of creating entities (I want that Primitives look like this):**

 ![Entitiy.PNG](https://global.discourse-cdn.com/cesium/original/1X/c8f6cf1fa0d632239a65cc352a2f4de12c3354f1.png)

**This is the result of creating primitives:**

 ![Primitive.PNG.jpg](https://global.discourse-cdn.com/cesium/original/1X/5c490cd24e5f287f9b7412454d89d6ae4154b16a.jpeg)

This is the code for creating the primitives:

for (var i = 0; i \< buildings.length; i++) {

var building = new Building(buildings[i]),

instance = new Cesium.GeometryInstance({

geometry: new Cesium.PolygonGeometry({

polygonHierarchy: new Cesium.PolygonHierarchy(building.getCoordinatesArray()),

extrudedHeight: 15

}),

attributes: {

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

},

id: building.name

});

instances.push(instance);

}

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

geometryInstances: instances,

asynchronous: true,

appearance: new Cesium.PerInstanceColorAppearance({

/\* flat: true \*/

}),

}));

This is the result if i activate the flat property in PerInstanceColorAppearance:

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

Thank you all for your help 🙂

---

<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:** [November 30, 2018, 3:44pm UTC](https://community.cesium.com/t/extruded-polygongeometry-appearance-opacity-shading/7735/2 "2018-11-30T15:44:14Z")

</div>

That’s looking pretty good so far! Have you tried using the Ellipsoid Appearance?

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

Or perhaps the generic MaterialAppearance?

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

If those don’t work, what I would do is try to trace in the code how the entity API creates its primitives and see if you can figure exactly what kind of material it creates. The Entity API batches whatever it can, so one place to look might be here:

[https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/DataSources/StaticGeometryColorBatch.js#L148-L158](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/DataSources/StaticGeometryColorBatch.js#L148-L158)

Or the other “Batch” classes. And I believe all of those get called in the GeometryVisualizer class ([https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/DataSources/GeometryVisualizer.js#L214](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/DataSources/GeometryVisualizer.js#L214)).

---

<div class="post-metadata">

**Author:** ![earthlost3.323.17](https://avatars.discourse-cdn.com/v4/letter/e/f4b2a3/32.png) [@earthlost3.323.17](https://community.cesium.com/u/earthlost3.323.17)\
**Post date:** [December 1, 2018, 3:24pm UTC](https://community.cesium.com/t/extruded-polygongeometry-appearance-opacity-shading/7735/3 "2018-12-01T15:24:51Z")

</div>

Hello Omar,

i have solved the problem with the following code. the trick was to add PerInstanceColorAppearance.VertexFormat to each polygon and set translucent to false in each primitive apppearence.

for (var i = 0; i \< buildings.length; i++) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var building = buildings[i],  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;instance = new Cesium.GeometryInstance({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;geometry: new Cesium.PolygonGeometry({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;polygonHierarchy: new Cesium.PolygonHierarchy(building.coordinates),  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;extrudedHeight: building.levels \> 0 ? building.levels \* 2.5 : 5,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX\_FORMAT  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}),  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;attributes: {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString("#C2BDB5"))  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id: building.name  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buildingInstances.push(instance);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewer.scene.primitives.add(new Cesium.Primitive({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;geometryInstances: buildingInstances,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;asynchronous: true,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appearance: new Cesium.PerInstanceColorAppearance({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translucent: false  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}));

---

<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:** [December 3, 2018, 7:25pm UTC](https://community.cesium.com/t/extruded-polygongeometry-appearance-opacity-shading/7735/4 "2018-12-03T19:25:29Z")

</div>

Awesome, thanks for posting your solution! Can’t wait to see how this all looks when it’s finished.