question about Geometry & Appearances （Primitive API）

CesiumJS
1

Hi.
I’m learning Primitive API and I’m trying to draw a circleGeometry with it, like this:


    var viewer = new Cesium.Viewer('cesiumContainer',{
        targetFrameRate :10
    });
    var scene = viewer.scene;
    scene.globe.depthTestAgainstTerrain = true;

    var geometry = new Cesium.CircleGeometry({
        center: Cesium.Cartesian3.fromDegrees(-100.60777, 40.83),
        radius : 500.0

    });

    var instance = new Cesium.GeometryInstance({
        geometry : geometry,
        attributes : {
            color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5))
        },
        id : 'bottom'
    });
    scene.primitives.add(new Cesium.Primitive({
        geometryInstances : instance,
        appearance : new Cesium.PerInstanceColorAppearance()

    }));
    viewer.camera.setView({
        destination : Cesium.Cartesian3.fromDegrees(-100.60777, 40.83, 35000.0)
    });

then I get a circle like the first annex one.png

when I zoomed in , I got the second annex. it seems that the circle breaks into pieces?

could someone tells me why is it like this？did I missed something?

one.png

two.jpg
two.jpg1080×988 272 KB

2

Hello,

This is happening because you need to specify the vertexFormat for the geometry. The perInstanceColorAppearance requires vertex normals to be computed in order to render correctly.

Here is the updated geometry code:

var geometry = new Cesium.CircleGeometry({
center: Cesium.Cartesian3.fromDegrees(-100.60777, 40.83),
radius : 500.0,
vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
});

``

Best,

Hannah

3

Thanks,

I solved it by using GroundPrimitive, and it’s really useful.

Then new problem comes, I try to change the color of the circle with getGeometryInstanceAttributes(id), like this:

primitive = new Cesium.GroundPrimitive({

geometryInstances: instances,

appearance: new Cesium.PerInstanceColorAppearance()

});

//try to change the color

if(primitive && primitive.ready){
primitive.getGeometryInstanceAttributes(id).color = Cesium.ColorGeometryInstanceAttribute.toValue(color);
return;
}

``

the code work well if I use Cesium.Primitive, if I use **Cesium.GroundPrimitive，**it throws an error :

Uncaught TypeError: Cannot set property color of # which has only a getter

return value of primitive.getGeometryInstanceAttributes(id) contains no setter function.

I read the source code of cesium and find that in GroundPrimitive.js , a param named ‘*readOnlyInstanceAttributesScratch’ *is set to [‘color’], so the Primitive regard it read only.

did I have a wrong usage or it is designed like this on purpose？

Oh, by the way, did I describe it clear? english is not my mother tongue，and my expression may not be correct.

Thanks,

CL Sun

在 2016年12月27日星期二 UTC+8下午11:41:37，Hannah Pinkos写道：

4

Hello,

Here is an example for how to change the primitive color:

var color = primitive.getGeometryInstanceAttributes(this._id).color;
color[0] = value.red * 255;
color[1] = value.green * 255;
color[2] = value.blue * 255;
color[3] = value.alpha * 255;
primitive.getGeometryInstanceAttributes(this._id).color = color;

``

Best,

Hannah