對于一個 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 對資料的跟新機制、渲染回圈機制、視錐體與繪制命令的機制的熟讀等等知識，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/235301.html
標籤：其他