铯基元（三角形）着色

Question

我使用此代码在Cesium中绘制三角形：

var mypositions = Cesium.Cartesian3.fromDegreesArrayHeights(triangles);

// unroll 'mypositions' into a flat array here
var numPositions = mypositions.length;

var pos = new Float64Array(numPositions * 3);
var normals = new Float32Array(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;
  normals[i * 3] = 0.0;
  normals[i * 3 + 1] = 0;
  normals[i * 3 + 2] = 1.0;
}

console.log(normals)
var geometry = new Cesium.Geometry({
vertexFormat : Cesium.VertexFormat.ALL,
  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: normals
    })

  },

  // Don't need the following line if no vertices are shared.
 // indices: new Uint32Array([0, 1, 2, 3, 4, 5]),
  primitiveType: Cesium.PrimitiveType.TRIANGLES,
  boundingSphere: Cesium.BoundingSphere.fromVertices(pos)
});

var myInstance = new Cesium.GeometryInstance({
  geometry: geometry,
  attributes: {
    color: new Cesium.ColorGeometryInstanceAttribute(0.0039215697906911,
          0.7333329916000366,
          0,
          1)
  },
  show: new Cesium.ShowGeometryInstanceAttribute(true)
});

var TIN = viewer.scene.primitives.add(new Cesium.Primitive({
  geometryInstances: [myInstance],
  asynchronous: false,
  appearance: new Cesium.PerInstanceColorAppearance({
    closed: true,
    translucent: false,
    flat: false
    //,
    //vertexShaderSource: "",
    //fragmentShaderSource: ""

  })
  }));

这就是我得到的：

我想启用着色，因此结果应该类似于下图：

我尝试编写Vertex和Fragment GLSL着色器，但没有成功。我不熟悉GLSL，我收到了编译错误。有没有其他方法来创建这种阴影？

谢谢！

Answer 1

无论你没有发布你的GLSL着色器或者没有使用它，你的问题（一旦你最终弄清楚GLSL的东西）就是你将所有法线设置为指向+ Z方向而不是实际上是每个三角形的正常，就像你的第二个截图所示。

getInfo()

您需要做的是设置位置，然后为法线设置3个顶点（三角形）而不是单个顶点。这样您就可以实际计算表面法线。这是如何做到这一点的许多解释之一：

https://math.stackexchange.com/questions/305642/how-to-find-surface-normal-of-a-triangle

我不熟悉Cesium，但我想有一些“默认”着色器可以完成基本照明。如果没有，那么像这样的简单照明的基础称为Lambertian reflectance。您的顶点着色器将输出一个计算为var normals = new Float32Array(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; normals[i * 3] = 0.0; normals[i * 3 + 1] = 0; normals[i * 3 + 2] = 1.0; } 的颜色，其中N是顶点的法线，L是从该顶点到光源的矢量（如果它是光源，则只是光线方向的负值）方向/环境/太阳/等光）。片段着色器会简单地将该颜色传回。