How to write the color of the custom Geometry facade

[10492...@qq.com]

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 Shehata]

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?

[10492...@qq.com]

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
* * * *
* * * *
***************************
0 1

*/

// 底面坐标个数
var planePsNumber = points.length;

// 顶点个数(点不复用，每个三角形3个点)
var num = planePsNumber * 2 * 3 + (planePsNumber - 2) * 3 * 2;

// 计算顶面和底面的纹理贴图的点的坐标
var minlon = Math.min.apply(null, lons);
var minLat = Math.min.apply(null, lats);
var maxlon = Math.max.apply(null, lons);
var maxlat = Math.max.apply(null, lats);

// 顶面和底面纹理坐标数组
var stsTopAndBottom = [];

for (var i = 0; i < planePsNumber; i++) {
var x = (pointsChic[i].latitude - minLat) / (maxlat - minLat);
var y = (pointsChic[i].longitude - minlon) / (maxlon - minlon);
stsTopAndBottom.push({x: Number(x.toFixed(2)), y: Number(y.toFixed(2))});
}

// attributes
var positions = new Float64Array(num * 3);

var colors = new Uint8Array(num * 4);

// 三角形
var sans = []; // 三角形世界坐标数组(每一个代表一个三角形)

// 侧面
for (var i = 0; i < planePsNumber; i++){
sans.push([pointsBottom[i], pointsBottom[(i + 1) > (planePsNumber - 1) ? 0 : (i + 1)], pointsTop[(i + 1) > (planePsNumber - 1) ? 0 : (i + 1)]]);

sans.push([pointsBottom[i], pointsTop[(i + 1) > (planePsNumber - 1) ? 0 : (i + 1)], pointsTop[i]]);

}
// 顶面和底面
for (var i = 1; i <= planePsNumber - 2; i++) {
sans.push([pointsBottom[0], pointsBottom[i], pointsBottom[i + 1]]);
sans.push([pointsTop[0], pointsTop[i], pointsTop[i + 1]]);
}

// sans数组拆分成[x, y, z, x, y, z.....]
// sans数组拆分成[x, y, x, y.....]
var k = 0;
var h = 0;
for (var i = 0; i < sans.length; i++) {
var san = sans[i];
for (var j = 0; j < san.length; j++) {
positions[k++] = san[j].x;
positions[k++] = san[j].y;
positions[k++] = san[j].z;

var r = Cesium.Color.floatToByte(Math.random());
var g = Cesium.Color.floatToByte(Math.random());
var b = Cesium.Color.floatToByte(Math.random());
var a = Cesium.Color.floatToByte(Math.random());

colors[h++] = r;
colors[h++] = g;
colors[h++] = b;
colors[h++] = a;
}
}
console.log(colors)
// attributes
var indices = new Uint32Array(positions.length / 3);

for (var i = 0; i < positions.length / 3; i++) {
indices[i] = i;

}
var attributes = new Cesium.GeometryAttributes({
position: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.DOUBLE,
componentsPerAttribute: 3,
values: positions
}),
color: new Cesium.GeometryAttribute({

componentDatatype: Cesium.ComponentDatatype.UNSIGNED_BYTE,

componentsPerAttribute: 4,
values: colors
})

});
return new Cesium.Geometry({

attributes: attributes,
indices: indices,
primitiveType: Cesium.PrimitiveType.TRIANGLES,
vertexFormat: new Cesium.VertexFormat({
position: true,
color: true

}),
boundingSphere: Cesium.BoundingSphere.fromPoints(ps)
});

}
var geometry = geometry2(points, 100);
var primitive = new Cesium.Primitive({

geometryInstances: new Cesium.GeometryInstance({
geometry: geometry
}),
asynchronous: false,
appearance: new Cesium.PerInstanceColorAppearance()

});
viewer.scene.primitives.add(primitive);

viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(114.4864783553646, 30.604215790554694, 500),
duration: 2
})

[Omar Shehata]

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

https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/

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.

[10492...@qq.com]

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!

[张卓卓]

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

Cesium1.54

Windows64

Google Chrome

[张卓卓]

I don't know if there is a problem with my point cloud file or for Cesium itself. I will send you my point cloud file, I hope you can see it, thank you.

---

从QQ邮箱发来的超大附件

dianyun7.zip (121.82M, 2019年04月05日 17:18 到期)

进入下载页面：http://mail.qq.com/cgi-bin/ftnExs_download?k=78373363c1d2539a38acba5d1732034d01535206500a540714030055021f050401521e020456004f5b530b550003525500030a01313e310650565d1a445c064c435e43630c&t=exs_ftn_download&code=973c121b

[张卓卓]

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

Cesium1.54

Windows64

Google Chrome

I don't know if there is a problem with my point cloud file or for Cesium itself. I will send you my point cloud file, I hope you can see it, thank you.

---

从QQ邮箱发来的超大附件

dianyun7.zip (121.82M, 2019年04月05日 16:50 到期)

进入下载页面：https://mail.qq.com/cgi-bin/ftnExs_download?k=78373363c1d2539a38acba5d1732034d01535206500a540714030055021f050401521e020456004f5b530b550003525500030a01313e310650565d1a445c064c435e43630c&t=exs_ftn_download&code=973c121b