Opengl es 铯基元（三角形）着色

我用这个代码画铯的三角形：

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

  })
  }));

var mypositions=Ce.Cartesian3.从度数阵列高度（三角形）；
//将“我的位置”展开成一个平面阵列
var numPositions=mypositions.length；
var pos=新的Float64Array（numPositions*3）；
var normals=新的Float32Array（numPositions*3）；
对于（变量i=0；i

这就是我得到的：

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

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

---

谢谢

不管您是否已经发布了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;
}

var normals=newfloat32array（numPositions*3）；
对于（变量i=0；i

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

---

我不熟悉铯，但我可以想象会有一些“默认”的着色器来进行基本照明。如果不是，则称为这样的简单照明的基础。顶点着色器将输出一种颜色，计算为

点（N，L）

，其中N是顶点的法线，L是从该顶点到光源的向量（如果是平行光/环境光/太阳光/等光，则仅为光线方向的负数）。片段着色器会简单地将该颜色传递回原处。

您是对的，这是法线问题。现在，我通过基本的着色获得了良好的可视化效果。法线可以使用以下公式计算：

铯.geometrypepeline.computeNormal（几何）包含索引。