回顧
- 預備知識：指令
- 預備知識：通道
1. 生成并執行指令
- 1.1. Primitive 生成指令
- 1.2. Context 物件負責執行 WebGL 底層代碼
2. 多段視錐體技術
3. 指令物件的轉移
- 篩選可見集
4. 本篇總結

回顧

書接上文，Scene.js 模塊內的 render 函式會將控制權交給 WebGL，執行 CesiumJS 自己封裝的指令物件，畫出每一幀來，

模塊內的 render 函式首先會更新一批狀態資訊，譬如幀狀態、霧效、Uniform 值、通道狀態、三維場景中的環境資訊等，然后就開始更新并執行指令，呼叫的是 Scene 原型鏈上的 updateAndExecuteCommands 方法，

整個程序大致的呼叫鏈是這樣的（function 關鍵字簡寫為 fn）：

[Module Scene.js]
- fn render()
  - Scene.prototype.updateAndExecuteCommands()
    - fn executeCommandsInViewport()
      - fn updateAndRenderPrimitives()
          [Module Primitive.js]
          - fn createCommands()
          - fn updateAndQueueCommands()
      - fn executeCommands()
     	- fn executeCommand()

本篇講解的是從 Scene 原型鏈上的 updateAndExcuteCommands() 方法開始，期間 Scene 中的 Primitives 是如何創建指令，又最終如何被 WebGL 執行的，

這個程序涉及非常多細節代碼，但是為了快速聚焦整個程序，本篇先介紹兩個 CesiumJS 封裝的概念：指令和通道，

預備知識：指令

WebGL 是一種依賴于“全域狀態”的繪圖 API，面向物件特征比較弱，為了修改全域狀態上的頂點資料、著色器程式、幀緩沖、紋理等“資源”，必須通過 gl.XXX 函式呼叫觸發全域狀態的改變，

而圖形編程基礎提出的渲染管線、通道等概念偏向于面向物件，顯然 WebGL 這種偏程序的風格需要被 JavaScript 運行時引擎封裝，

CesiumJS 將 WebGL 的繪制程序，也就是行為，封裝成了“指令”，不同的指令物件有不同的用途，指令物件保存的行為，具體就是指由 Primitive 物件（不一定全是 Primitive）生成的 WebGL 所需的資料資源（緩沖、紋理、唯一值等），以及著色器物件，資料資源和著色器物件仍然是 CesiumJS 封裝的物件，而不是 WebGL 原生的物件，這是為了更好地與 CesiumJS 各種物件結合去繪圖，

CesiumJS 有三類指令：

DrawCommand 繪圖指令
ClearCommand 清屏指令
ComputeCommand 計算指令

繪圖指令最侄訓把控制權交給 Context 物件，根據自身的著色器物件，繪制自己身上的資料資源，

清屏指令比較簡單，目的就是呼叫 WebGL 的清屏函式，清空各類緩沖區并填充清空后的顏色值，依舊會把控制權傳遞給 Context 物件，

計算指令則借助 WebGL 并行計算的特點，將指令物件上的資料在著色器中編碼、計算、解碼，最后寫入到輸出緩沖（通常是幀緩沖的紋理上），同樣控制權會給到 Context 物件，

預備知識：通道

一幀是由多個通道順序繪制構成的，在 CesiumJS 中，通道英文單詞是 Pass，

既然通道的繪制是有順序的，其順序保存在 Renderer/Pass.js 模塊匯出的凍結物件中，目前（1.92版本）有 9 個優先順序等級（最后 NUMBER_OF_PASSES 是通道的數量）：

const Pass = {
  ENVIRONMENT: 0,
  COMPUTE: 1,
  GLOBE: 2,
  TERRAIN_CLASSIFICATION: 3,
  CESIUM_3D_TILE: 4,
  CESIUM_3D_TILE_CLASSIFICATION: 5,
  CESIUM_3D_TILE_CLASSIFICATION_IGNORE_SHOW: 6,
  OPAQUE: 7,
  TRANSLUCENT: 8,
  OVERLAY: 9,
  NUMBER_OF_PASSES: 10,
}

以上為例，第一優先被繪制的指令，是環境（ENVIRONMENT: 0）方面的物件、物體，而不透明（OPAQUE: 7）的三維物件的繪制指令，則要先于透明（TRANSLUCENT: 8）物體被執行，

CesiumJS 會在每一幀即將開始繪制前，對所有已經收集好的指令根據通道進行排序，實作順序繪制，下文會細談，

1. 生成并執行指令

原型鏈上的 updateAndExecuteCommands 方法會做模式判斷，我們一般使用的是三維模式（SceneMode.SCENE3D），所以只需要看 else if 分支即可，也就是

executeCommandsInViewport(true, this, passState, backgroundColor);

此處，this 就是 Scene 自己，

executeCommandsInViewport() 是一個 Scene.js 模塊內的函式，這個函式比較短，對于當前我們關心的東西，只需要看它呼叫的 updateAndRenderPrimitives() 和最后的 executeCommands() 函式呼叫即可，

1.1. Primitive 生成指令

[Module Scene.js]
- fn updateAndRenderPrimitives()
  [Module Primitive.js]
  - fn createCommands()
  - fn updateAndQueueCommands()

Scene.js 模塊內的函式 updateAndRenderPrimitives() 負責更新 Scene 上所有的 Primitive，

期間，控制權會通過 PrimitiveCollection 轉移到 Primitive 類（或者有類似結構的類，譬如 Cesium3DTileset 等）上，令其更新本身的資料資源，根據情況創建新的著色器，并隨之創建 繪圖指令，最終在 Primitive.js 模塊內的 updateAndQueueCommands() 函式排序、并推入幀狀態物件的指令串列上，

1.2. Context 物件負責執行 WebGL 底層代碼

[Module Scene.js]
- fn executeCommands()
- fn executeCommand() // 收到 Command 和 Context
  [Module Context.js]
  - Context.prototype.draw()

另一個模塊內的函式 executeCommands() 則負責執行這些指令（中間還有一些小插曲，下文再提），

此時，上文的“通道”再次起作用，此函式內會根據 Pass 的優先順序依次更新唯一值狀態（UniformState），然后下發給 executeCommand() 函式（注意少了個s）以具體的某個指令物件以及 Context 物件，

除了 executeCommand() 函式外，Scene.js 模塊內仍還有其它類似的函式，例如 executeIdCommand() 負責執行繪制 ID 資訊紋理的指令，executeTranslucentCommandsBackToFront() / executeTranslucentCommandsFrontToBack() 函式負責透明物體的指令等，甚至在 Scene 物件自己的屬性中，就有清屏指令欄位，會在 executeCommands() 函式中直接執行，不經過上述幾個執行具體指令的函式，

Context 物件是對 WebGL(2)RenderingContext 等 WebGL 原生介面、引數的封裝，所有指令物件最終都會由其進行拆包裝、組裝 WebGL 函式呼叫并執行繪圖、計算、清屏（見上文介紹的預備知識：指令），

2. 多段視錐體技術

先介紹一個概念，WebGL 中的深度，

簡單的說，螢屏朝里，三維物體的前后順序就是深度，CesiumJS 的深度非常大，即使不考慮遠太空，只考慮地球表面附近的范圍，WebGL 的數值范圍也不太夠用，聰明的前輩們想到了使用對數函式壓縮深度的值域，因為一個非常大的數字只需取其對數，很快就能小下來，

Scene 物件上有一個可讀可寫訪問器 logarithmicDepthBuffer，它指示是否啟用對數深度，

現在，CesiumJS 通常使用的就是對數深度，

對數深度解決的不僅僅只是普通深度值值域不夠的問題，還解決了不支持對數深度技術之前使用的多段視錐技術問題，

再次簡單的說，多段視錐技術將視錐體由遠及近切成多個段，保證了相機近段的指令足夠多以保證效果，遠段盡量少滿足性能，

你在 Scene.js 模塊中的 executeCommands() 函式的最后能找到一個回圈體：

// Execute commands in each frustum in back to front order
let j;
for (let i = 0; i < numFrustums; ++i) {
  // ...
}

打開除錯工具，很容易擊中這個斷點，查看 numFrustums 變數的值，有啟用對數深度的 CesiumJS 程式，一般 numFrustums 都是 1，

3. 指令物件的轉移

在本文第 1 節中，詳細說明了指令物件的生成與被執行，

上述其實忽略了很多細節，現在撿起來說，

指令物件在 Primitive（或類似的類）生成后，由模塊內的 updateAndQueueCommands() 函式排序并推入幀狀態物件的指令串列上：

// updateAndQueueCommands 函式中，函式接收來自 Scene 逐級傳入的幀狀態物件 -- frameState
const commandList = frameState.commandList;
const passes = frameState.passes;
if (passes.render || passes.pick) {
  // ... 省略部分代碼
  commandList.push(colorCommand);
}

frameState.commandList 就是個普通的陣列，

而在執行時，卻是從 View 物件上的 frustumCommandsList 上取的指令：

// Scene.js 模塊的 executeCommands 函式中

const frustumCommandsList = view.frustumCommandsList;
const numFrustums = frustumCommandsList.length;

let j;
for (let i = 0; i < numFrustums; ++i) {
  const index = numFrustums - i - 1;
  const frustumCommands = frustumCommandsList[index];
  
  // ...
  
  // 截取不透明物體的通道指令執行代碼片段
  us.updatePass(Pass.OPAQUE);
  commands = frustumCommands.commands[Pass.OPAQUE];
  length = frustumCommands.indices[Pass.OPAQUE];
  for (j = 0; j < length; ++j) {
    executeCommand(commands[j], scene, context, passState);
  }
  
  // ...
}

其中，下發給 executeCommand() 函式的 commands[j] 引數，就是具體的某個指令物件，

所以這兩個程序之間，是怎么做指令物件傳遞的？

答案就在 View 原型鏈上的 createPotentiallyVisibleSet 方法中，

篩選可見集

View 物件是 Scene、Camera 之間的紐帶，負責“眼睛”與“世界”之間資訊的處理，即視圖，

View 原型鏈上的 createPotentiallyVisibleSet 方法的作用，就是把 Scene 上的計算指令、覆寫物指令，幀狀態上的指令串列，根據 View 的可見范圍做一次篩選，減少要執行指令個數提升性能，

具體來說，就是把分散在各處的指令，篩選后綁至 View 物件的 frustumCommandsList 串列中，借助 View.js 模塊內的 insertIntoBin() 函式完成：

// View.js 模塊內

function insertIntoBin(view, scene, command, commandNear, commandFar) {
  // ...
  
  const frustumCommandsList = view.frustumCommandsList;
  const length = frustumCommandsList.length;

  for (let i = 0; i < length; ++i) {
    // ...
    
    frustumCommands.commands[pass][index] = command;
   
    // ...
  }
  
  // ...
}

這個函式內做了對指令的篩選判斷，

4. 本篇總結

本篇調查清楚了 Scene 物件上各種三維物體是如何繪制的，即借助指令物件保存待繪制的資訊，最后交由 Context 物件完成 WebGL 代碼的執行，

期間，發生了指令的分類和可見集的篩選；篇幅原因，CesiumJS 在這漫長的渲染程序中還做了很多細節的事情，

不過，Cesium 的三維物體的渲染架構就算講完了，

接下來，則是另兩個比較頭痛的話題：

地球的渲染架構（瓦片四叉樹）
具備創建指令的各路資料源（Entity、DataSource、Model、Cesium3DTileset等）

指令和通道的概念仍然會繼續使用，敬請期待，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/458010.html

標籤：其他

上一篇：Java案例——從集合到檔案并排序(末尾有問題，請各位指導)

下一篇：CentOS7環境下編譯FFmpeg

CesiumJS 2022^ 原理[2] 渲染架構之 Primitive - 創建并執行指令

回顧