對於一個 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 對數據的跟新機制、渲染循環機制、視錐體與繪制命令的機制的熟讀等等知識。