How to write the color of the custom Geometry facade

111 · February 19, 2019, 10:07am

1. A concise explanation of the problem you're experiencing.
When custom Geometry, the color corresponding to the attributes in the attributes attribute is what I set, and I set the PerInstanceColorAppearance and EllipsoidSurfaceAppearance errors.
Error is as follows
Appearance/Geometry mismatch. The appearance requires vertex shader attribute input 'compressedAttributes', which was not computed as part of the Geometry. Use the appearance's vertexFormat property when constructing the geometry.
2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.
The code for the coordinates and color of each point has been written, but it is too long and is not written here. The data has been tested correctly. You can use geometry without st. The following is the method of loading, I don't know why this will be wrong.

var positions = new Float64Array(6 * 2 * 3 * 3);
var colors = new Float64Array(6 * 2 * 3 * 4);

var attributes = new Cesium.GeometryAttributes({
        position: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.DOUBLE,
                componentsPerAttribute: 3,
                values: positions
        }),
        color: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.UNSIGEND_SHORT,
                componentsPerAttribute: 4,
                values: colors
        })
})
var geometry = new Cesium.Geometry({
        attributes: attributes,
        indices: indices,
        primitiveType: Cesium.PrimitiveType.TRIANGLES,
        vertexFormat: new Cesium.VertexFormat({
                position: true,
                color: true
    })
    boundingSphere: Cesium.BoundingSphere.fromPoints(ps)
});

viewer.scene.primitives.add(new Cesium.Primitive({
        geometryInstances: new Cesium.GeometryInstance({
                geometry: geometry
        }),
        asynchronous: false,
        appearance: new Cesium.PerInstanceColorAppearance()
}))

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
I want to implement a cube, 6 faces are different colors, please tell me how to use the color attribute of the attributes in Geometry

4. The Cesium version you're using, your operating system and browser.
Cesium1.54
windows64
Google Chrome

omar · February 19, 2019, 4:30pm

I noticed you have a typo:

Cesium.ComponentDatatype.UNSIGEND_SHORT

``

That should be:

Cesium.ComponentDatatype.UNSIGNED_SHORT

``

If that doesn’t fix it, can you put all the code in Sandcastle (http://localhost:8080/Apps/Sandcastle/index.html) and then click “Share” and past the link here?

111 · February 20, 2019, 6:55am

I posted all the code, please help me find the problem, how to improve to produce results.

var points = [
    {x: 114.4864783553646, y: 30.604215790554694},
    {x: 114.48382898892015, y: 30.60431560806962},
    {x: 114.48353342631442, y: 30.601700422371984},
    {x: 114.48683580671532, y: 30.60167662465819},
    {x: 114.49045381640737, y: 30.603004562925776}
]
function geometry2(points, height) {

    var pointsBottom = , // 底面世界坐标数组
        pointsTop = , // 顶面世界坐标数组
        lons = , // 底面坐标点的经度(弧度)集合
        lats = , // 底面坐标点的纬度(弧度)集合
        pointsChic = , // 底面坐标(经纬度弧度)集合
        ps = ; // 几何体的所有点(世界坐标)
    for (var i = 0; i < points.length; i++) {
        var chicBottom = Cesium.Cartographic.fromDegrees(points[i].x, points[i].y, points[i].z ? points[i].z : 0);
        lons.push(chicBottom.longitude);
        lats.push(chicBottom.latitude);
        pointsChic.push(chicBottom);
        var chicTop = Cesium.Cartographic.fromDegrees(points[i].x, points[i].y, chicBottom.height + height);
        var cat3Bottom = Cesium.Cartographic.toCartesian(chicBottom);
        var cat3Top = Cesium.Cartographic.toCartesian(chicTop);
        pointsBottom.push(cat3Bottom);
        pointsTop.push(cat3Top);
        ps.push(cat3Bottom, cat3Top);
    }

// 以立方体为例
/*

                    3'
                     *************************** 2'
                    ** **
                   * * * *
                  * * * *
                 * * * *
             0' *************************** 1' *
                * * * *
                * * * *
                * * * *
                * * 3 * *
                * * * * * * * * * * * * * * * 2
                * * * *
                * * * *

omar · February 20, 2019, 1:53pm

Sorry, I accidentally posted a link to the localhost Sandcastle. This is the hosted one:

It looks like the problem is that your geometry isn’t computing normals but the appearance expects it by default. I discovered this by first passing compressVertices: false in the Primitive constructor, and then I could see the missing normals error. You can’t directly choose the vertex format of the PerInstanceColorAppearance, but if you set flat : true it will use a vertexFormat that doesn’t have normals. So just change:

appearance: new Cesium.PerInstanceColorAppearance()

``

into:

appearance: new Cesium.PerInstanceColorAppearance({

flat: true

})

``

Here’s a working example.

111 · February 21, 2019, 9:21am

According to the method you said, there is no error, but the geometry that appears is white, not the effect I want. I added random color values to each vertex, and I hope that the effect is that the colors of each face are different. Please tell me how to change this code to achieve, thank you!

111 · March 6, 2019, 9:06am

When I use the Cesium example to load point cloud data, a normalized error occurs during mouse operation.

Cesium1.54

Windows64

Google Chrome