Extruded PolygonGeometry Appearance opacity/shading

[jeremiasandris]

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):

This is the result of creating primitives:

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:

Thank you all for your help

[omar]

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

https://cesiumjs.org/Cesium/Build/Documentation/EllipsoidSurfaceAppearance.html

Or perhaps the generic MaterialAppearance?

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

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).

[earthlost3.323.17]

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

[omar]

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