溯源：Cesium.Appearance 中的頂點着色器

對於一個 MaterialAppearance 對象來講，它的頂點着色器代碼默認爲：

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

varying vec3 v_positionEC;
varying vec3 v_normalEC;
varying 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;
}

0. 預備知識

Cesium 擁有一個小規模的內置 glsl 庫，預置了很是多 czm_ 開頭的函數、結構、常量。在自定義着色器的 Appearance、Material 類中，容許直接使用，Cesium 會自動把着色器代碼合併、連接。

1. czm_computePosition()

很不幸的是，這個函數並非完整地內置在 Source/Shaders 下的，Source/Shaders/Builtin/computePosition.glsl 這裏面只有函數的聲明，並無，它的函數實現是動態生成的。

幸運的是，經過全文檢索，我找到了它的生成代碼，它位於 Primitive.js 文件中：

這個函數有點長，你們能夠本身去看源代碼

Primitive._modifyShaderPosition = function (
  primitive,
  vertexShaderSource,
  scene3DOnly
) {
  // ...
};

Cesium 會用正則去匹配你寫的 attribute vec3 XXX3DHigh 和 attribute vec3 XXX3DLow 這兩個頂點屬性（attribute）中的 XXX，並以之構造函數名 czm_computeXXX，固然它會把首字母給你大寫了以符合函數命名規範。

默認狀況下，這個 XXX 就等於 position。因此，抽絲剝繭，在咱們關心的三維模式下，這個函數其實能夠省略成這樣：

attribute vec3 position3DHigh;
attribute vec3 position3DLow;

vec4 czm_computePosition() {
  return czm_translateRelativeToEye(position3DHigh, position3DLow);
}

到這一步，看到實際上做用的函數是 czm_translateRelativeToEye(vec3, vec3)，而這一個函數在 內置的 glsl 中是有的了。

2. czm_translateRelativeToEye(vec3, vec3)

vec4 czm_translateRelativeToEye(vec3 high, vec3 low)
{
    vec3 highDifference = high - czm_encodedCameraPositionMCHigh;
    vec3 lowDifference = low - czm_encodedCameraPositionMCLow;

    return vec4(highDifference + lowDifference, 1.0);
}

它的做用是，將世界座標減去相機中心座標，返回一個齊次座標，即將世界座標平移到相機座標系下，而不旋轉。

有的朋友可能會有兩個疑問：①世界座標在哪裏？②相機座標在哪裏？

對於返回值 vec4(highDifference + lowDifference, 1.0) 這個有 WebGL 和圖形變換基礎的朋友應該不用作多解釋，它就是一個齊次座標。

那麼，世界座標和相機座標呢？代碼中明明是 high、low、czm_encodedCameraPositionMCHigh、czm_encodedCameraPositionMCLow 啊？

這要從一個不在 API 中的類：EncodedCartesian3 提及了。

補充 EncodedCartesian3：編碼後的笛卡爾座標

衆所周知，64位浮點數（雙精度）和 32位浮點數的精度是不同的，也正是由於 Cesium 的設計初衷：世界級高精度三維地圖引擎，致使了空間中的座標值數值比較大。不要拘泥於地表，Cesium 的範圍大至太陽系。

因此，直接將 Cartesian3 的座標值傳遞給 WebGL 頂點着色器，有可能在重重 MVP 矩陣計算下丟失精度，出現圖形頂點不許確、座標抖動問題。

參考文獻：Precisions, Precisions | STK Components for .NET 2020 r4 (agi.com)

數學大佬就想出了這個編碼後的笛卡爾座標對象，將原來的笛卡爾座標拆成兩個，一大一小，大的叫 High，小的叫 Low，實際上二者相加後，與原始 Cartesian3 幾乎是一致的。

能夠這麼建立編碼後的笛卡爾座標：

const eCartesian3 = Cesium.EncodedCartesian3.fromCartesian(new Cesium.Cartesian3(-2644963.9889313546, 5763731.142118295, 2199400.7089496767))

還原也很簡單：

const origin = Cesium.Cartesian3.add(eCartesian3.high, eCartesian3.low)

具體算法很簡單，讀者有興趣能夠本身去看源碼。

如今，咱們繼續原來的討論。

把 glsl 的代碼稍微整理一下，不難看出實際上是這樣算的：

return vec4(high + low - (czm_encodedCameraPositionMCHigh + czm_encodedCameraPositionMCLow), 1.0);

而前面的 high + low，根據剛纔的理論，即傳入的兩個 attribute vec3 的相加，也就是原始世界座標。

後面的 czm_encodedCameraPositionMCHigh + czm_encodedCameraPositionMCLow，這兩個並非靜態的內置變量，而是寫在 AutomaticUniforms.js 中的一個動態 uniform vec3 值，它倆其實也是 EncodedCartesian3 的 high、low 份量，相加的結果，根據上面的結論，表明的是相機在世界座標系統中的座標。

拿 世界座標 - 相機中心座標，這是什麼？平移啊！

這就解釋了 czm_translateRelativeToEye 這個函數名的語義了。

3. czm_modelViewProjectionRelativeToEye

這是一個動態的 uniform，寫在 AutomaticUniforms.js 中，看看代碼：

czm_modelViewProjectionRelativeToEye: new AutomaticUniform({
  size: 1,
  datatype: WebGLConstants.FLOAT_MAT4,
  getValue: function (uniformState) {
    return uniformState.modelViewProjectionRelativeToEye;
  },
}),

它是個4x4的矩陣，做用是將相機座標轉換至裁剪座標。

因此不可貴出頂點着色器的最後一行代碼含義：

gl_Position = czm_modelViewProjectionRelativeToEye * p;

它就是把 p 這個由 czm_computePosition 而實際是由 czm_translateRelativeToEye 函數（三維模式下）算來的齊次座標，轉換到裁剪座標，並交給 gl_Position 這個 WebGL 變量，進入片元着色階段。

4. AutomaticUniforms.js

上面說起兩次這個文件，這個文件的設置了一堆 glsl uniform 標識的 glsl 量，這些量會根據 Cesium 當前的狀態（例如相機位置等）實時計算，並傳入着色器代碼中。

5. 頂點着色器修改

有了上述基礎，想修改 Primitive 的頂點就十分容易了，最簡單的思路是，根據 position3DHigh 和 position3DLow 算出原始的世界座標，這個時候就跟 Cesium Cartesian3 API 是同樣的數值了，充分利用 cesium 提供的預置 glsl 工具函數、常量、結構體，按常規思路去計算你想要的結果，就能夠完成對頂點的重塑。

而 「地形壓平」、「3DTiles 瓦片壓平」 的思路就是基於此，可是，找到地形的 Primitive、3DTiles 的 Primitive，還有很長一段路要走，譬如 Cesium 對數據的跟新機制、渲染循環機制、視錐體與繪製命令的機制的熟讀等等知識。