How to change primitive's color?

CesiumJS
1

I added green cylinder to the globe with these commands (pasted from sandcastle cylinder example):

var positionOnEllipsoid = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-100.0, 40.0));

var modelMatrix = Cesium.Matrix4.multiplyByTranslation(
Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid),
new Cesium.Cartesian3(0.0, 0.0, 200000)
);

var cylinderGeometry = new Cesium.CylinderGeometry({
length : 400000,
topRadius : 200000.0,
bottomRadius : 200000.0,
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
});

var greenCylinder = new Cesium.GeometryInstance({
geometry : cylinderGeometry,
modelMatrix : modelMatrix,
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.GREEN)
}
});

var viewer = new Cesium.Viewer(‘cesiumContainer’);
var scene = viewer.scene;
var primitives = scene.getPrimitives();

primitives.add(new Cesium.Primitive({
geometryInstances : greenCylinder,
appearance : new Cesium.PerInstanceColorAppearance({
closed : true,
translucent: false
})
}));

Now I want to change cylinder’s color from green to red. How to do that?

2

The similar question is how to change CylinderOutlineGeometry color. The last geometry does not support vertexFormat property, so I can’t use color MaterialAppearance.

3

When you create the geometry, change the line:

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

to:

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

The same thing can be done to set the CylinderOutlineGeometry color. You should check out the Geometry and Appearances Tutorial.

Regards,

Dan

4

Is there a way to change the color of already created primitive?

For example, in case CylinderGeometry we can initialize cylinder with custom material, and after that change material’s color. Here’s the working example of recoloring: http://jsfiddle.net/kasheftin/Lzb52/2/

I want to do the same thing with CylinderOutlineGeometry.
Let’s try to change my example to achieve that:

  1. If we just change CylinderGeometry to CylinderOutlineGeometry (http://jsfiddle.net/kasheftin/Lzb52/3/), there’s an exception: cylinderOulineGeometry does not support vertexFormat (vertexFormat is not a property of this geometry at all), but using MaterialAppearance in primitive requires it. So we can’t use MaterialAppearance any more.

  2. Let’s check, what appearance might be used with CylinderOutlineGeometry. EllipsoidSurfaceAppearance requires vertexFormat.st, PolylineColorAppearance requires nextPosition3dLow. PerInstanceColorAppearance is the only supported one. But obviously this appearance does not include the color variable inside. Here’s non-working example with it and with white wireframe: http://jsfiddle.net/kasheftin/Lzb52/4/.

  3. Changing geometry instance attributes after creating primitive does not affect it, it seems that init color value is copied somewhere.

5

  1. All of the outline geometries a simple lines (GL_LINES if you are familiar with OpenGL/WebGL) and only position attributes are created. Most materials require at least position, texture coordinates and normals. All outline geometry must have a color attribute and use PerInstanceColorAppearance.

  2. Yes, it only supports the PerInstanceColorAppearance. The color attribute is part of the GeometryInstance. This is so you can create many geometry instances with different model matrices and attributes like show and color. I don’t understand what is wrong with the example you posted. You gave the outline a color attribute that is white and the outline is white. Could you explain further?

  3. See the section on “Updating Per-Instance Attributes” at the Geometry and Appearances Tutorial here: