CODEWITHSUNDEEP
javascriptcesiumjs
Erik
Erik

Reputation: 35

Getting error when drawing triangles with Cesium

I want to draw triangles with Cesium where each vertex is a geopoint with (lon,lat,alt) and each vertex with a different color. But I am getting errors. I am new to Cesium and I think what I have to do is to define a geometry instance and attach it to the scene. My code is: 

var viewer = new Cesium.Viewer('cesiumContainer');
var mypositions = Cesium.Cartesian3.fromDegreesArrayHeights([104.317776,   31.59491, 10,
105.317776, 32.59491, 20,
106.317776, 33.59491, 30]);

var pos = new Float64Array(mypositions);

    var geometry = new Cesium.Geometry({
        attributes: {
            position: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.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 myInstance = new Cesium.GeometryInstance({
        geometry: geometry,
        attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
        },

        show : new Cesium.ShowGeometryInstanceAttribute(true)
    });

    viewer.scene.primitives.add(new Cesium.Primitive({
        geometryInstances: [myInstance],
        appearance: new Cesium.PerInstanceColorAppearance({
            closed: true,
            translucent: false
        })
    }));

But then I get this errors on my webpage:

DeveloperError: All attribute lists must have the same number of attributes.

I would like to know what I am doing wrong and how can I resolve this issue?

Upvotes: 1

Views: 654

Answers (1)

emackey
emackey

Reputation: 12448

I don't know of an option in Cesium for per-vertex colors, but I can at least fix the errors in your sample code here so it runs correctly. Specifically:

  • Add asynchronous: false to the Primitive options, because we're not using a web worker for this.

  • Use Cesium.ComponentDatatype.DOUBLE instead of .FLOAT for the position since it's a Float64Array, unlike the normals which are Float32Array.

  • The big problem is mypositions is an array of Cartesian3, not a flat array, so cannot be used to initialize the Float64Array natively. You must unroll this into a flat array of x, y, z values.

Here's your example with these changes applied. Click the "Run code snippet" at the bottom to see the red triangle appear.

// default camera view, added for clarity
var extent = Cesium.Rectangle.fromDegrees(100,30,108,36);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.5;

var viewer = new Cesium.Viewer('cesiumContainer', {
    navigationHelpButton: false, animation: false, timeline: false
});

// original sample begins here
var mypositions = Cesium.Cartesian3.fromDegreesArrayHeights([
    104.317776, 31.59491, 10,
    105.317776, 32.59491, 20,
    102.317776, 33.59491, 30]);

// unroll 'mypositions' into a flat array here
var numPositions = mypositions.length;
var pos = new Float64Array(numPositions * 3);
for (var i = 0; i < numPositions; ++i) {
    pos[i * 3] = mypositions[i].x;
    pos[i * 3 + 1] = mypositions[i].y;
    pos[i * 3 + 2] = mypositions[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 myInstance = new Cesium.GeometryInstance({
    geometry: geometry,
    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
    },

    show : new Cesium.ShowGeometryInstanceAttribute(true)
});

viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: [myInstance],
    asynchronous: false,
    appearance: new Cesium.PerInstanceColorAppearance({
        closed: true,
        translucent: false
    })
}));
html, body, #cesiumContainer {
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  font-family: sans-serif;
}
<link href="http://cesiumjs.org/releases/1.16/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.16/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>

Upvotes: 0

Related Questions