Cesium图元(三角形)着色

Question

我使用以下代码在to中绘制三角形：

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: ""

  })
  }));

这是我得到的：

​

我想启用明暗处理，所以结果应该类似于下图：

​

我尝试编写顶点和片段GLSL着色器，但没有成功。我不熟悉GLSL，并且我得到了一个编译错误。有没有其他方法来创建这种阴影？

谢谢!

Answer 1

不管你没有发布你的GLSL着色器或让它工作，你的问题(一旦你最终弄清楚GLSL的东西)是你设置了所有的法线指向+Z方向，而不是像你的第二个屏幕截图显示的那样，实际上是每个三角形的法线。

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;
}

相反，您需要做的是设置位置，然后对于法线，对3个顶点(三角形)的集合进行操作，而不是对单个顶点进行操作。这样，您可以实际计算曲面法线。这是如何做到这一点的众多解释之一：

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

我不熟悉be，但我想应该有一些“默认”的着色器来做基本的照明。如果不是，那么像这样的简单照明的基础就是Lambertian reflectance。顶点着色器将输出计算为dot(N, L)的颜色，其中N是顶点的法线，L是从该顶点到光源的向量(如果是定向/环境/太阳/等灯光，则仅为灯光方向的负数)。片段着色器将简单地将该颜色传回。