【Cesium 歷史博客】Cesium 中的圖形技術：圖形結構

翻譯有誤請指出，規範性轉載。@秋意正寒。
原文出處：https://cesium.com/blog/2015/05/26/graphics-tech-in-cesium-stack

Cesium 和普通的圖形引擎沒什麼區別，可是當對地球上事務抽象的邏輯層愈來愈多後，Cesium 中的類設計就愈來愈針對領域化了：虛擬地球。下面要介紹的是 Cesium 在圖形技術棧的設計與普通圖形引擎的不一樣之處。

像以前的文章說的同樣，最底層是 Renderer，它是對 WebGL 層的封裝，用來處理 WebGL 的資源調配以及繪製命令（Draw Command）的執行。命令（Command）通常是 Draw Call 以及其所須要的狀態數據（例如着色器、頂點數據等）。

譯者注：簡而言之，Renderer 處理因數據和狀態發生變化致使的 WebGL 繪製命令。

構建於 Renderer 層之上的是 Scene，即場景層。它負責將更高級的對象在場景中的改動分配、重排，最終將這些改變計算成 Renderer 層認識的指令，並交給 Renderer 層進行繪製。

最頂層是 Primitives （譯名：圖元層），構建於 Scene 層和 Renderer 層之上，表明的是真實世界的對象。

注意，此處的 Scene 特指 Scene.js 導出的 Scene 類。

Primitive 是一個具備自我更新功能的對象，這個函數將繪製命令添加到 Scene 的命令列表中。

譯者注：在源代碼中，命令列表彷佛是 frameState 對象的屬性，不過幀狀態與 Scene 有很大關係。

Globe

Globe 渲染了地球本體：地形、衛星影像和動態水面。

在遊戲引擎中，這些就是環境因素。Cesium 的 Globe 是沒有導航限制的，也就是說地圖無限大。大多數遊戲引擎是針對局部場景作了大量優化並整個加載進內存中進行運行。

Cesium 使用四叉樹來組織層次細節模型。QuadtreePrimitive 在發佈時不屬於 API 的一部分，因此謹慎修改它。地形瓦片包括了幾何圖形，特定攝像機視角下的那些地形瓦片會很是逼近地球表面。

在 Cesium 運行的時候，多個影像圖層的影像瓦片會映射到地形瓦片上，這樣儘管在代碼上有一些複雜（例如重投影等計算），換來的是對各類開放地圖服務標準的支持。這與遊戲引擎有很大的不一樣，遊戲引擎會對地形和紋理進行組合優化成自定義的格式，可是缺乏了靈活性和數據標準的通用性。

譯者注：通用通常化和高性能每每是矛盾的

當 Scene 調用 Globe 的更新功能時，遍歷四叉樹，並返回關於地形瓦片更新的繪製命令。

每一個繪製命令將影像瓦片的紋理引用過來，並由 Cesium 內部生成着色器。這些着色器基於重疊的影像瓦片的數量、光照、後處理操做、動態水面是否開啓等信息而來。

調試模式查看繪製命令的代碼以下：

viewer.scene.debugShowCommands = true;

你能夠在 Cesium Inspector 這個 widget 中查看繪製命令：

上圖左邊：使用了12個繪製命令渲染的地球；右邊：每一個命令可視化顯示

上圖左邊：使用了186個命令來觀察較大範圍的 Crater Lake 的視野。右邊：從不一樣的角度看的結果（顯示了瓦片的座標編號）。

地平線的視角難以優化，這也是3D比2D可貴多的緣由之一。

Model

最複雜的圖形應該算是 Model 了，它表明傳統三維建模的模型，例如使用 Blender、Maya、3dmax 等的建模成果。在遊戲引擎中，這些一般被稱做模型，而且針對性地優化，製做特定的格式。

Cesium 使用的格式的 glTF，這是 Khronos 組織的一個標準，一個開放性的 WebGL 標準格式。Cesium 很早就注意到了這個格式，而不是選擇自定義格式。

當 Scene 調用 Model 的更新功能時，模型會有針對性地遍歷其層次結構，並令其全部新的變換（例如 glTF 的動畫、模型的座標轉換、外觀變化等）生效。有不少種方法能讓這一個操做變得更快，例如快速裁剪技術和僅對目標子樹設置動畫。

譯者注：如下兩行文字已通過時，當時 Cesium 使用的 glTF 標準是 1.0，如今 2.0 已經沒有這些了。

glTF 文件中能夠直接獲取着色器，對於拾取操做可使用獨立的着色器。glTF 的預約義規範（例如 MODELVIEW）被映射到 uniform 狀態，並設置其爲自動 uniform，例如 czm_modelView。

一個模型可能會在更新時返回一個或幾百個命令，這取決於命令的編寫方式、模型的材質有多少、動畫物體的目標節點有多少。

上圖左邊：Cesium 奶牛車模型。右邊：使用 5 個命令進行渲染（圖中能夠看到3個，車體亮綠色，兩個車輪各一個顏色）

Primitive

Cesium 的通用圖元對象 —— Primitive，是 Cesium 有別於遊戲引擎的最大特色之一。

遊戲引擎一般使用盡量少的圖元，例如折線、球體、多邊形，它們對調試和擡頭顯示（Head-Up Displays，HUDs）等極端顯示比較有用。遊戲引擎更專一環境、效果，例如光照、粒子系統和後處理操做。

在另外一方面，Cesium 是一個大型的幾何圖形庫，它能在地球上繪製常見的對象：折線、多邊形、帶拉伸成體塊的形狀等。大多數 Cesium 應用程序使用幾何圖形來繪製大部分它關注的內容。這就是跟遊戲引擎大不同的地方。

Cesium 的獨特之處還在於，它的幾何細分算法與橢球表面（WGS84橢球體）符合，而不是平面直角座標系。

例如，多邊形的三角化以及加面過程時，會加入橢球體的曲率計算。

這些中間計算使用 Web Worker 執行，從而支持 OGC 網絡地圖服務標準，和參數化幾何形狀的建立（而不是預先製做好的幾何數據）。

爲了最小化繪製命令數量，Cesium 將頂點數據格式相同的幾何圖造成批地推到單個頂點緩衝中，以便數據共享。

舉個例子，（座標+法線）的頂點數據組合不能和（座標+法線+uv）合批，可能它們在外觀上是同樣的，可是它們所須要的頂點着色器、片元着色器是不同的。

經過修改外觀的頂點、片元着色器以生成最終的着色器，來支持相對於視角的高精度渲染、幾何顯示隱藏、單位向量壓縮等功能。（這句話不知道講什麼）

幾何圖形流水線會對頂點屬性進行相應的修改，例如法線壓縮、高低座標修改等。

Billboards、Labels、Points

在遊戲引擎中，Billboard 一般用於產生粒子效果，例如煙火。Cesium 的 billboard 更通用，它一般用於呈現運動的對象，例以下圖所示的衛星和滑翔傘：

1.5w個衛星（SpaceBook應用，由 AGI 提供）

跳傘。

Cesium 的 billboard 比較靈活，例如顯示、隱藏功能，像素偏移量、旋轉等。這會產生一個結果：頂點數據比較大。因此 Cesium 會壓縮頂點屬性的個數。

着色器使用 GLSL 預處理器來關閉沒必要要的功能，例如若是 billboard 沒有旋轉，那麼頂點着色器將不會進行任何旋轉運算。Billboard 的頂點着色器很是複雜，可是它的片元着色器比較簡單。這個在 Cesium 中很常見。大多數遊戲引擎是反過來的，它們的 billboard 的頂點着色器比較簡單，而片元着色器比較複雜。

Billboards 能夠是靜止的，也能夠是動態的，也能夠介於兩者之間。例如 billboard 的 position 每幀均可能會變化，可是其餘的屬性則不會改變。爲了有效解決這個問題，billboard 基於屬性的具體用法，將頂點屬性動態地分組到頂點緩存中，例如位置變化了其餘頂點屬性沒變，則只更新頂點座標。

爲了減小繪製命令的數量，運行時將建立的和修改後的 billboard 成批地塞進一個集合中。這與遊戲引擎是不一樣的，遊戲引擎是建立的鏡頭紋理圖集。

文本標籤是用 billboard 實現的，每一個字符都是一個 billboard。雖然每一個字符都佔內存，可是不會生成額外的繪製命令，由於使用了 「同紋理批處理技術」：

同紋理的批處理技術：有點相似於前端中的雪花圖。

有時候 billboard 也能用來繪製點，例如上面說起的衛星圖。從 Cesium 1.10 版本開始，繪製點用 Primitive API 可能效率更高。Primitive API 中的點對象不如 billboard 同樣有廣泛性，它的需求比較低，沒有索引數據和紋理數據，因此性能較好。

其餘

除了上面的 Primitive 外，還有：

• ViewportQuad.js 中的 ViewportQuad 類
• SkyBox、SkyAtmosphere、Sun、Moon
• Polyline：折線，起初實現起來並不容易（貌似是由於 WebGL 關於線的繪製問題？）

參考

[Bagnell13] Dan Bagnell. Robust Polyline Rendering with WebGL. 2013.

[Bagnell15] Dan Bagnell. Graphics Tech in Cesium - Vertex Compression. 2015.

[Ohlarik08] Deron Ohlarik. Precisions, Precisions. 2008.

[Ring13] Kevin Ring. [Rendering the Whole Wide World on the World Wide Web](https://cesium.com/presentations/Rendering the Whole Wide World on the World Wide Web.pptx). 2013.