Homepage

Appearance

概述 ​

前面基础入门中学习过什么是图元，图元是可以与着色器结合使用的。

着色器分为：

  1. 顶点着色器（vertex shader）：处理顶点数据，决定顶点的位置和属性。
  2. 片元着色器（fragment shader）：处理像素数据，决定像素的颜色和其他属性。
javascript
const instance = new Cesium.GeometryInstance({
  geometry: new Cesium.RectangleGeometry({
    rectangle: rect,
    vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
  }),
})

viewer.scene.primitives.add(
  new Cesium.Primitive({
    geometryInstances: instance,
    appearance: new Cesium.EllipsoidSurfaceAppearance({
      fragmentShaderSource: `
          void main() {
            out_FragColor = vec4(1.0, 1.0, 0.0, 0.5);
          }
        `,
      vertexShaderSource: `
          in vec3 position3DHigh;
          in vec3 position3DLow;
          in float batchId;
          void main()
          {
            vec4 p = czm_computePosition();
            p.x -= 1000000.0;
            gl_Position = czm_modelViewProjectionRelativeToEye * p;
          }
        `
    }),
  })
)

const center = Cesium.Rectangle.center(rect)
const lon = Cesium.Math.toDegrees(center.longitude)
const lat = Cesium.Math.toDegrees(center.latitude)

viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(lon, lat, 3000000),
})
/次