Cesium渲染模組之Command

當時明月在曾照彩雲歸發表於2023-03-14

1. 引言

Cesium是一款三維地球和地圖視覺化開源JavaScript庫，使用WebGL來進行硬體加速圖形，使用時不需要任何外掛支援，基於Apache2.0許可的開源程式，可以免費用於商業和非商業用途

Cesium官網：Cesium: The Platform for 3D Geospatial

Cesium GitHub站點：CesiumGS/cesium: An open-source JavaScript library for world-class 3D globes and maps (github.com)

API檔案：Index - Cesium Documentation

透過閱讀原始碼，理清程式碼邏輯，有助於擴充套件與開發，筆者主要參考了以下兩個系列的文章

渲染是前端視覺化的核心，本文描述Cesium渲染模組的Command

2. Cesium中的Command

Cesium中的Command物件包含執行的指令引數和執行方法，比如最簡單的ClearCommand：

function ClearCommand(options) {
  // ...
  this.color = options.color;
  this.depth = options.depth;
  this.stencil = options.stencil;
  this.renderState = options.renderState;
  this.framebuffer = options.framebuffer;
  this.owner = options.owner;
  this.pass = options.pass;
}
 
ClearCommand.prototype.execute = function (context, passState) {
  context.clear(this, passState);
};

ClearCommand包含顏色、深度、通道等指令引數和執行方法context.clear(this, passState)

Command物件主要有三類：

ClearCommand
DrawCommand
ComputeCommand

正如其名，ClearCommand用於清除，DrawCommand用於繪製，ComputeCommand用於計算

3. ClearCommand

ClearCommand的封裝很簡單，如上述程式碼所示：

function ClearCommand(options) {
  // ...
  this.color = options.color;
  this.depth = options.depth;
  this.stencil = options.stencil;
  this.renderState = options.renderState;
  this.framebuffer = options.framebuffer;
  this.owner = options.owner;
  this.pass = options.pass;
}
 
ClearCommand.prototype.execute = function (context, passState) {
  context.clear(this, passState);
};

context.clear()會執行清除的WebGL指令：

Context.prototype.clear = function (clearCommand, passState) {
  // ...
  const c = clearCommand.color;
  const d = clearCommand.depth;
  const s = clearCommand.stencil;

  gl.clearColor(c.red, c.green, c.blue, c.alpha);
  gl.clearDepth(d);
  gl.clearStencil(s);

  bindFramebuffer(this, framebuffer);
  gl.clear(bitmask);
};

ClearCommand在Scene中的呼叫：

初始化Scene時初始化ClearCommand

function Scene(options) {
  // ...
  this._clearColorCommand = new ClearCommand({
    color: new Color(),
    stencil: 0,
    owner: this,
  });
  // ...
}

執行更新時呼叫ClearCommand的execute()方法

Scene.prototype.updateAndExecuteCommands = function (passState, backgroundColor) {
    // ...
    updateAndClearFramebuffers(this, passState, backgroundColor);
    // ...
};

function updateAndClearFramebuffers(scene, passState, clearColor) {
  // ...
  // Clear the pass state framebuffer.
  const clear = scene._clearColorCommand;
  Color.clone(clearColor, clear.color);
  clear.execute(context, passState);
  // ...
}

4. DrawCommand

DrawCommand是最常用的指令，它是繪製的主角

DrawCommand封裝如下，幾乎包含了繪製所需要的全部內容：

function DrawCommand(options) {
  options = defaultValue(options, defaultValue.EMPTY_OBJECT);

  this._boundingVolume = options.boundingVolume;
  this._orientedBoundingBox = options.orientedBoundingBox;
  this._modelMatrix = options.modelMatrix;
  this._primitiveType = defaultValue(
    options.primitiveType,
    PrimitiveType.TRIANGLES
  );
  this._vertexArray = options.vertexArray;
  this._count = options.count;
  this._offset = defaultValue(options.offset, 0);
  this._instanceCount = defaultValue(options.instanceCount, 0);
  this._shaderProgram = options.shaderProgram;
  this._uniformMap = options.uniformMap;
  this._renderState = options.renderState;
  this._framebuffer = options.framebuffer;
  this._pass = options.pass;
  this._owner = options.owner;
  this._debugOverlappingFrustums = 0;
  this._pickId = options.pickId;
  // ...
}

DrawCommand.prototype.execute = function (context, passState) {
  context.draw(this, passState);
};

context.draw()執行WebGL的繪製指令：

Context.prototype.draw = function (drawCommand, passState, shaderProgram, uniformMap) {
  // ...
  beginDraw(this, framebuffer, passState, shaderProgram, renderState);
  continueDraw(this, drawCommand, shaderProgram, uniformMap);
};

function continueDraw(context, drawCommand, shaderProgram, uniformMap) {
  // ...
  va._bind();
  context._gl.drawArrays(primitiveType, offset, count);
  // ...
  va._unBind();
}

DrawCommand在Scene中的呼叫：

初始化Scene時初始化PrimitiveCollection

function Scene(options) {
  // ...
  this._primitives = new PrimitiveCollection();
  this._groundPrimitives = new PrimitiveCollection();
  // ...
}

執行更新時呼叫DrawCommand的primitives.update(frameState)()方法

Scene.prototype.updateAndExecuteCommands = function (passState, backgroundColor) {
    // ...
    executeCommandsInViewport(true, this, passState, backgroundColor);
    // ...
};

function executeCommandsInViewport(firstViewport, scene, passState, backgroundColor) {
  // ...
  updateAndRenderPrimitives(scene);
  // ...
}

function updateAndRenderPrimitives(scene) {
  // ...
  scene._groundPrimitives.update(frameState);
  scene._primitives.update(frameState);
  // ...
}

再來看看primitives.update(frameState)方法：

PrimitiveCollection.prototype.update = function (frameState) {
  const primitives = this._primitives;
  for (let i = 0; i < primitives.length; ++i) {
    primitives[i].update(frameState);
  }
};

Primitive.prototype.update = function (frameState) {
  // ...
  const updateAndQueueCommandsFunc = updateAndQueueCommands
  updateAndQueueCommandsFunc(...);
};

function updateAndQueueCommands(...) {
  // ...
  const commandList = frameState.commandList;
  const passes = frameState.passes;
    
  if (passes.render || passes.pick) {
    const colorLength = colorCommands.length;
    for (let j = 0; j < colorLength; ++j) {
      const colorCommand = colorCommands[j];
      // ...
      commandList.push(colorCommand);
    }
  }
}

primitives.update(frameState)方法會將Command推入CommandList，然後在Scene中執行execute()方法：

function executeCommands(scene, passState) {
    // ...
    // Draw terrain classification
    executeCommand(commands[j], scene, context, passState);
 
    // Draw 3D Tiles
    executeCommand(commands[j], scene, context, passState)
 
    // Draw classifications. Modifies 3D Tiles color.
    executeCommand(commands[j], scene, context, passState);
    // ...
}

function executeCommand(command, scene, context, passState, debugFramebuffer) {
  // ...
  command.execute(context, passState);
  // ...
}

5. ComputeCommand

ComputeCommand需要配合ComputeEngine一起使用，可以將它認為是一個特殊的DrawCommand，透過渲染機制實現GPU的計算，透過Shader計算結果儲存到紋理傳出，實現在Web前端高效的處理大量的數值計算

ComputeCommand的建構函式如下：

function ComputeCommand(options) {
  options = defaultValue(options, defaultValue.EMPTY_OBJECT);

  this.vertexArray = options.vertexArray;
  this.fragmentShaderSource = options.fragmentShaderSource;
  this.shaderProgram = options.shaderProgram;
  this.uniformMap = options.uniformMap;
  this.outputTexture = options.outputTexture;
  this.preExecute = options.preExecute;
  this.postExecute = options.postExecute;
  this.canceled = options.canceled;
  this.persists = defaultValue(options.persists, false);
  this.pass = Pass.COMPUTE;
  this.owner = options.owner;
}

ComputeCommand.prototype.execute = function (computeEngine) {
  computeEngine.execute(this);
};

computeEngine.execute()方法使用DrawCommand和ClearCommand執行計算：

ComputeEngine.prototype.execute = function (computeCommand) {
  // ...
  computeCommand.preExecute(computeCommand);
  const outputTexture = computeCommand.outputTexture;
  const framebuffer = createFramebuffer(context, outputTexture);
  // ...
  clearCommand.execute(context);
  drawCommand.framebuffer = framebuffer;
  drawCommand.execute(context);
  framebuffer.destroy();
  computeCommand.postExecute(outputTexture);
};

ImageryLayer.js中重投影就使用了ComputeCommand：

ImageryLayer.prototype._reprojectTexture = function (frameState, imagery, needGeographicProjection) {
    // ...
    const computeCommand = new ComputeCommand({
        persists: true,
        owner: this,
        // Update render resources right before execution instead of now.
        // This allows different ImageryLayers to share the same vao and buffers.
        preExecute: function (command) {
            reprojectToGeographic(command, context, texture, imagery.rectangle);
        },
        postExecute: function (outputTexture) {
            imagery.texture = outputTexture;
            that._finalizeReprojectTexture(context, outputTexture);
            imagery.state = ImageryState.READY;
            imagery.releaseReference();
        },
        canceled: function () {
            imagery.state = ImageryState.TEXTURE_LOADED;
            imagery.releaseReference();
        },
    });
    this._reprojectComputeCommands.push(computeCommand);
    // ...
};

6. 參考資料

[1] Cesium原理篇：6 Render模組(5: VAO&RenderState&Command) - fu*k - 部落格園 (cnblogs.com)

[2] Cesium渲染模組之概述 - 當時明月在曾照彩雲歸 - 部落格園 (cnblogs.com)

[3] Cesium渲染排程 - 當時明月在曾照彩雲歸 - 部落格園 (cnblogs.com)

[4] CesiumJS 2022^ 原始碼解讀 5 - 著色器相關的封裝設計 - 嶺南燈火 - 部落格園 (cnblogs.com)

[5] Cesium教程系列彙總 - fu*k - 部落格園 (cnblogs.com)

Cesium渲染模組之VAO
2023-02-28
Cesium渲染模組之Shader
2023-03-09
Cesium之Web Workers
2023-04-25
Web
cesium初探之載入三維模型
2016-12-27
模型
Django（51）drf渲染模組原始碼分析
2021-06-08
Django原始碼
Vue Cli 4 引入 Cesium 配置
2020-08-22
Vue
Cesium學習筆記（一）
2020-11-29
筆記
跨平臺渲染引擎之路：框架與核心模組
2019-10-25
框架
python模組之collections模組
2019-01-04
Python
FLUI 0.9 版本釋出，新增動態渲染模組 Dynamic
2020-03-14
UI
曝Surface Phone渲染圖採用模組化設計
2016-05-05
Cesium傾斜模型單體化
2020-10-31
模型
瀏覽器之渲染引擎
2019-03-20
瀏覽器
Flutter渲染之繪製上屏
2021-08-04
Flutter
Unity 之渲染管線初探
2017-03-30
Unity
Vuex之模組
2018-09-13
Vue
TypeScript 之模組
2021-12-16
TypeScript
Python模組之urllib模組
2020-10-30
Python
JAVA設計模式之命令模式【Command Pattern】
2014-11-19
Java設計模式
vue地圖視覺化 Cesium篇
2019-03-08
Vue地圖視覺化
Cesium官方教程5--地形圖層
2018-11-23
使用eclipse 進行 Cesium 開發
2020-11-25
Eclipse
在cesium中實現熱力圖
2018-06-14
Scrapy 框架介紹之 Puppeteer 渲染
2020-05-27
框架
塞爾達風之杖渲染解析
2019-12-24
渲染優化之CSS Containment
2021-08-19
優化CSSAI
Opengl ES之YUV資料渲染
2022-11-23
006|React之條件渲染
2017-06-06
React
node之path模組
2020-12-24
監控和優化RMAN之SET COMMAND ID
2014-02-09
優化
python–模組之random隨機數模組
2018-10-17
Pythonrandom隨機
python–模組之os操作檔案模組
2018-11-01
Python
使用Node.js執行Cesium專案
2018-06-19
Node.js
Flutter渲染之Widget、Element 和 RenderObject
2020-07-03
FlutterObject
瀏覽器渲染魔法之合成層
2021-12-29
瀏覽器
React.js 實戰之元素渲染
2018-11-30
ReactJS
Android效能優化之渲染篇
2015-09-16
Android優化
iOS介面卡頓之離屏渲染
2016-03-07
iOS