重读Cesium(九):Appearance相关介绍(二)顶点与片元着色器

上一篇我们介绍了 Appearance分类与构成，Material材质。这一篇我们来了解一下vertexShaderSource顶点着色器与fragmentShaderSource片元着色器。

vertexShaderSource顶点着色器

我们来看一下Appearance中默认的vertexShaderSource。代码如下：

 in vec3 position3DHigh;
 in vec3 position3DLow;
 in vec3 normal;
 in vec2 st;
 in float batchId;
 out vec3 v_positionEC;
 out vec3 v_normalEC;
 out vec2 v_st;
 void main()
 {
   
     vec4 p = czm_computePosition();
     v_positionEC = (czm_modelViewRelativeToEye * p).xyz;      // position in eye coordinates
     v_normalEC = czm_normal * normal;                         // normal in eye coordinates
     v_st = st;
     gl_Position = czm_modelViewProjectionRelativeToEye * p;
 }

输入变量

 in vec3 position3DHigh;
 in vec3 position3DLow;
 in vec3 normal;
 in vec2 st;
 in float batchId;

1.position3DHigh与position3DLow：这是Cesium为了保证从CPU传递到GPU的数据精度，将模型顶点拆分成position3DHigh与position3DLow两个变量。
2.normal：输入的法线。
3.st:纹理坐标。
4.batchId:批次ID。在CesiumJS中，通常用于将相同类型的几何体分组在一起，以优化渲染性能。

输出变量-输出到片元着色器

 out vec3 v_positionEC;
 out vec3 v_normalEC;
 out vec2 v_st;

1.v_positionEC: 输出顶点。
2.v_normalEC:输出法线。
3.v_st:输出纹理坐标。

获取几何体的模型坐标

在顶点着色器代码中，我们可以通过position3DHigh与position3DLow这两个变量相加获取到几何体的模型坐标

in vec3 positions = position3DHigh + position3DLow

我们通过下面的实例代码验证下模型坐标是否正确

 let geometry = Cesium.BoxGeometry.fromDimensions({
   
        dimensions: new Cesium.Cartesian3(1.0, 1.0, 1.0)
      })
      let position = Cesium.Cartesian3.fromDegrees(120