2. 程式人生 > >WebGPU學習（十一）：學習兩個優化：“reuse render command buffer”和“dynamic uniform buffer offset”

WebGPU學習（十一）：學習兩個優化：“reuse render command buffer”和“dynamic uniform buffer offset”

阿新 • • 發佈：2019-12-28

大家好，本文介紹了“reuse render command buffer”和“dynamic uniform buffer offset”這兩個優化，以及Chrome->webgpu-samplers->animometer示例對它們進行的benchmark效能測試。

上一篇博文：
WebGPU學習（十）：介紹“GPU實現粒子效果”

學習優化：reuse render command buffer

提出問題

每一幀經過下面的步驟進行繪製：

  • 建立一個command buffer
  • 開始一個render pass
  • 設定多個render command到command buffer中
  • 結束該render pass

相關程式碼如下:

return function frame() {
    ...
    const commandEncoder = device.createCommandEncoder();
    ...
    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    
    passEncoder.setPipeline(pipeline);
    passEncoder.setVertexBuffer(0, verticesBuffer);
    passEncoder.setBindGroup(0, uniformBindGroup1);
    passEncoder.draw(36, 1, 0, 0);
    
    passEncoder.endPass();
    ...
}

我們可以發現，一般來說，每幀設定的render command不會變化，這造成了重複record的開銷。開銷具體包括兩個方面：

  • js binding的開銷，如轉換descriptor object（如轉換建立render pipeline時傳入的引數：GPURenderPipelineDescriptor）和字串、處理邊界、檢驗資料的合法性等開銷
  • 建立render command的開銷和設定（encode）render command到command buffer的開銷

優化方案

WebGPU提供了GPURenderBundle，只需record一次render command到render bundle，然後每幀執行該bundle，從而實現了command buffer的複用。

WebGPU還支援建立多個bundle，從而可以record不同的render command到對應的render bundle中

案例程式碼

對案例程式碼的說明：
1.發起兩個drawcall，對應兩個bind group。

這裡給出原始的案例程式碼和優化後的案例程式碼，供讀者參考：

  • 原始的案例程式碼：不使用bundle
    程式碼如下：
return function frame() {
    ...
    const commandEncoder = device.createCommandEncoder();
    ...
    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    passEncoder.setPipeline(pipeline);
    passEncoder.setVertexBuffer(0, verticesBuffer);

    passEncoder.setBindGroup(0, uniformBindGroup1);
    passEncoder.draw(36, 1, 0, 0);

    passEncoder.setBindGroup(0, uniformBindGroup2);
    passEncoder.draw(36, 1, 0, 0);

    passEncoder.endPass();
    ...
}
  • 優化後的案例程式碼：建立一個bundle
    程式碼如下：
function recordRenderPass(passEncoder) {
    passEncoder.setPipeline(pipeline);
    passEncoder.setVertexBuffer(0, verticesBuffer);

    passEncoder.setBindGroup(0, uniformBindGroup1);
    passEncoder.draw(36, 1, 0, 0);

    passEncoder.setBindGroup(0, uniformBindGroup2);
    passEncoder.draw(36, 1, 0, 0);
}

const renderBundleEncoder = device.createRenderBundleEncoder({
    colorFormats: [swapChainFormat],
});
recordRenderPass(renderBundleEncoder);
const renderBundle = renderBundleEncoder.finish();


return function frame(timestamp) {
    ...
    const commandEncoder = device.createCommandEncoder();
    ...
    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

    passEncoder.executeBundles([renderBundle]);

    passEncoder.endPass();
    ...
}
  • 優化後的案例程式碼：建立兩個bundle
    程式碼如下：
function recordRenderPass1(passEncoder) {
    passEncoder.setPipeline(pipeline);
    passEncoder.setVertexBuffer(0, verticesBuffer);

    passEncoder.setBindGroup(0, uniformBindGroup1);
    passEncoder.draw(36, 1, 0, 0);
}

function recordRenderPass2(passEncoder) {
    passEncoder.setPipeline(pipeline);
    passEncoder.setVertexBuffer(0, verticesBuffer);

    passEncoder.setBindGroup(0, uniformBindGroup2);
    passEncoder.draw(36, 1, 0, 0);
}

const renderBundleEncoder1 = device.createRenderBundleEncoder({
    colorFormats: [swapChainFormat],
});
recordRenderPass1(renderBundleEncoder1);
const renderBundle1 = renderBundleEncoder1.finish();



const renderBundleEncoder2 = device.createRenderBundleEncoder({
    colorFormats: [swapChainFormat],
});
recordRenderPass2(renderBundleEncoder2);
const renderBundle2 = renderBundleEncoder2.finish();


return function frame(timestamp) {
    ...
    const commandEncoder = device.createCommandEncoder();
    ...
    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

    passEncoder.executeBundles([renderBundle1, renderBundle2]);

    passEncoder.endPass();
    ...
}
}

進一步分析

我們再來看下bundle和render pass相關的定義：

interface GPUDevice : EventTarget {
   ...
   GPURenderBundleEncoder createRenderBundleEncoder(GPURenderBundleEncoderDescriptor descriptor);
   ...
}

dictionary GPURenderBundleEncoderDescriptor : GPUObjectDescriptorBase {
    required sequence<GPUTextureFormat> colorFormats;
    GPUTextureFormat depthStencilFormat;
    //與MSAA有關，這裡不分析
    unsigned long sampleCount = 1;
};

...

interface GPUCommandEncoder {
    ...
    GPURenderPassEncoder beginRenderPass(GPURenderPassDescriptor descriptor);
    ...
}

...

dictionary GPURenderPassDescriptor : GPUObjectDescriptorBase {
    required sequence<GPURenderPassColorAttachmentDescriptor> colorAttachments;
    GPURenderPassDepthStencilAttachmentDescriptor depthStencilAttachment;
};

建立bundle時，需要指定與所屬render pass相同的color attachments和depthAndStencil attachment的format。

參考資料

Encoder results reuse
Add GPURenderBundle
How do people reuse command buffers?（要FQ）

學習優化：dynamic uniform buffer offset

提出問題

在大多數應用中，每個drawcall需要不同的uniform變數，對應不同的uniform buffer。而uniform buffer被設定在bind group中，這意味著需要在每一幀中為每個drawcall建立並設定一個bind group（或者只建立一次所有的bind group作為cache，然後在每一幀中複用它）。

建立bind group比drawcall的開銷更大。通過在“Proposal: Dynamic uniform and storage buffer offsets”中進行的效能測試，我們知道現代圖形API建立bind group的個數是有限的（而WebGPU是基於現代圖形API而實現的，因此它在WebGPU中也是有限的）：

This means, in a single frame, the Metal devices can create 285 bind groups, the D3D12 devices can create 7270 bind groups, and the Vulkan devices can create 18561 bind groups.

優化方案

WebGPU支援“dynamic uniform buffer offset”，也就是說：
可以只建立一個bind group，但是它只能設定一個或多個uniform buffer（不能設定storage buffer等資料）；
每個drawcall用對應的offset來設定同一個bind group。

這樣就去掉了建立多個bind group的開銷。

根據Proposal: Dynamic uniform and storage buffer offsets：

I believe we said:
We need at least one of the two for the MVP
Having both causes more complication because they will fight for root table space so we might have to introduce a combined limit for pushConstantSize + N * DynamicBufferCount.

WebGPU的MVP版本應該不會支援dynamic storage buffer offset，也就是說bind group不能設定storage buffer。

案例程式碼

對案例程式碼的說明：
1.bind group只設置一個uniform buffer，它包含的uniform變數為：

float scale;
float offsetX;
float offsetY;
float scalar;
float scalarOffset;

2.一共有100個gameObject，對應100個draw call和uniform變數的100份資料（設定在uniformBufferData中）
3.不同drawcall對應的bind group->uniform buffer的offset需要為256的倍數

這裡給出原始的案例程式碼和優化後的案例程式碼，供讀者參考：

  • 原始的案例程式碼：建立bind group cache
    程式碼如下：
const bindGroupLayout = device.createBindGroupLayout({
    bindings: [
        { binding: 0, visibility: GPUShaderStage.VERTEX, type: "uniform-buffer" },
    ],
});


const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] });


const pipeline = device.createRenderPipeline({
    layout: pipelineLayout,
    ...
});



const gameObjects = 100;
const uniformBytes = 5 * Float32Array.BYTES_PER_ELEMENT;
const alignedUniformBytes = Math.ceil(uniformBytes / 256) * 256;
const alignedUniformFloats = alignedUniformBytes / Float32Array.BYTES_PER_ELEMENT;

const uniformBuffer = device.createBuffer({
    size: gameObjects * alignedUniformBytes + Float32Array.BYTES_PER_ELEMENT,
    usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.UNIFORM
});


const uniformBufferData = new Float32Array(gameObjects * alignedUniformFloats);

//bind group的cache陣列
const bindGroups = new Array(gameObjects);

function setUniformBufferData(i) {
    uniformBufferData[alignedUniformFloats * i + 0] = Math.random() * 0.2 + 0.2;        // scale
    uniformBufferData[alignedUniformFloats * i + 1] = 0.9 * 2 * (Math.random() - 0.5);  // offsetX
    uniformBufferData[alignedUniformFloats * i + 2] = 0.9 * 2 * (Math.random() - 0.5);  // offsetY
    uniformBufferData[alignedUniformFloats * i + 3] = Math.random() * 1.5 + 0.5;       // scalar
    uniformBufferData[alignedUniformFloats * i + 4] = Math.random() * 10;               // scalarOffset
}

for (let i = 0; i < gameObjects; ++i) {
    setUniformBufferData(i);

    bindGroups[i] = device.createBindGroup({
        layout: bindGroupLayout,
        bindings: [{
            binding: 0,
            resource: {
                buffer: uniformBuffer,
                offset: i * alignedUniformBytes,
                size: 5 * Float32Array.BYTES_PER_ELEMENT,
            }
        }]
    });
}

uniformBuffer.setSubData(0, uniformBufferData);


return function frame() {
    ...
    const commandEncoder = device.createCommandEncoder();
    ...
    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    passEncoder.setPipeline(pipeline);
    passEncoder.setVertexBuffer(0, verticesBuffer);

    for (let i = 0; i < gameObjects; ++i) {
        passEncoder.setBindGroup(0, bindGroups[i]);
        passEncoder.draw(3, 1, 0, 0);
    }

    passEncoder.endPass();
    ...
}
  • 優化後的案例程式碼：使用offset
    程式碼如下：
//設定hasDynamicOffset為true
const dynamicBindGroupLayout = device.createBindGroupLayout({
    bindings: [
        { binding: 0, visibility: GPUShaderStage.VERTEX, type: "uniform-buffer", hasDynamicOffset: true },
    ],
});

const dynamicBindGroup = device.createBindGroup({
    layout: dynamicBindGroupLayout,
    bindings: [{
        binding: 0,
        resource: {
            buffer: uniformBuffer,
            offset: 0,
            size: 5 * Float32Array.BYTES_PER_ELEMENT,
        },
    }],
});


const dynamicPipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [dynamicBindGroupLayout] });

const dynamicPipeline = device.createRenderPipeline({
    layout: dynamicPipelineLayout,
    ...
});

//定義gameObjects等程式碼與原始的案例程式碼相同，故省略
...

for (let i = 0; i < gameObjects; ++i) {
    //setUniformBufferData函式與原始的案例程式碼相同
    setUniformBufferData(i);
}

const dynamicBindGroup = device.createBindGroup({
    layout: dynamicBindGroupLayout,
    bindings: [{
        binding: 0,
        resource: {
            buffer: uniformBuffer,
            offset: 0,
            size: 5 * Float32Array.BYTES_PER_ELEMENT,
        },
    }],
});

uniformBuffer.setSubData(0, uniformBufferData);

const dynamicOffsets = [0];

return function frame() {
    ...
    const commandEncoder = device.createCommandEncoder();
    ...
    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    passEncoder.setPipeline(pipeline);
    passEncoder.setVertexBuffer(0, verticesBuffer);


    for (let i = 0; i < gameObjects; ++i) {
        //之所以要預先建立dynamicOffsets陣列，然後在這裡設定它的元素，而不直接用“passEncoder.setBindGroup(0, dynamicBindGroup, [i * alignedUniformBytes]);”，是因為這樣會增加“建立陣列”的開銷
        dynamicOffsets[0] = i * alignedUniformBytes;
        passEncoder.setBindGroup(0, dynamicBindGroup, dynamicOffsets);
        passEncoder.draw(3, 1, 0, 0);
    }

    passEncoder.endPass();
    ...
}

參考資料

Proposal: Dynamic uniform and storage buffer offsets

效能測試

animometer示例對這兩個優化進行了benchmark測試。

（需要說明的是，該示例的“size: 6 * Float32Array.BYTES_PER_ELEMENT”應該被改為“size: 5 * Float32Array.BYTES_PER_ELEMENT”）

該示例的執行截圖如下所示：

在右側的紅圈內選中按鈕可啟用對應的優化；
右上角的紫圈可設定繪製的三角形個數；
在左上角的藍圈內，第一行顯示每一幀在CPU端所用時間，主要包括render pass的js binding所用的時間；第二行顯示每一幀總時間，它等於CPU端+GPU端的所用時間。

測試資料

在我的電腦（Mac Pro 2014，MacOS Catalina10.15.1，Chrome Canary 80.0.3977.4）上繪製4萬個三角形的測試結果：

  • 只使用bundle與沒用任何優化相比

大幅降低了js binding所用時間，由14ms變為0.2ms；
每一幀總時間只降低了20%。

  • 同時使用bundle與offset與只使用bundle相比

js binding所用時間和每一幀總時間幾乎沒有變化

  • 只使用offset與沒用任何優化相比

js binding所用時間大幅增加了60%；
每一幀總時間只稍微增加了10%。

結論

使用offset優化，雖然增加了CPU端開銷，但也降低了GPU端開銷，從而使每一幀總時間增加得很少。而且它使程式碼更為簡潔（只建立一個bind group），可能也減少了記憶體佔用（我沒有進行測試，僅為推測），所以推薦使用。

使用bundle優化，雖然大幅降低了CPU端開銷，但也增加了GPU端開銷。不過考慮到每一幀總時間還是降低了20%，而且有被瀏覽器進一步優化的空間（參考Encoder results reuse），所以推薦使用。

參考資料

animometer示

相關推薦

WebGPU學習（十一）：學習兩個優化：“reuse render command buffer”和“dynamic uniform buffer offset”

大家好，本文介紹了“reuse render command buffer”和“dynamic uniform buffer offset”這兩個優化，以及Chrome->webgpu-samplers->animometer示例對它們進行的benchmark效能測試。 上一篇博文： WebGPU

機器學習與深度學習系列連載： 第二部分 深度學習（十一）卷積神經網路 2 Why CNN for Image？

卷積神經網路 2 Why CNN 為什麼處理圖片要用CNN？ 原因是： 一個神經元無法看到整張圖片 能夠聯絡到小的區域，並且引數更少 圖片壓縮畫素不改變圖片內容 1. CNN 的特點 卷積： 一些卷積核遠遠小於圖片大小； 同樣的pat

ionic學習（十一）：頁面下拉重新整理(Refresher)

官網參考： https://ionicframework.com/docs/api/components/refresher/Refresher/   用法說明： 在html頁面需要下拉重新整理的位置新增如下程式碼： <!-- 下拉重新整理 -->

ionic學習（十一）：使用地區選擇器外掛

地址：https://github.com/raychenfj/ion-multi-picker 下面演示使用下面這個：   一：在app.module.ts中引入 二：我要在DevicePage中使用，首先在使用頁面的device.model.ts中引用，不然

Java語言學習（十一）：列舉型別和泛型

    Java中一個重要的型別：列舉，它可以用來表示一組取值範圍固定的變數，使用 enum 關鍵字定義列舉型別，其中元素不能重複，通常大寫表示。利用Java的反射機制，可以在執行時分析類，如檢視列舉型別的修飾符、父類和自定義方法等，下面簡單說下。    

opencv學習（十一）：高斯模糊

程式碼如下： # 匯入cv模組 import cv2 as cv import numpy as np # 確保在0-255之間 def clamp(pv): if pv > 255: return 255 if pv < 0: r

webpack學習（十一）：構建多頁面應用

demo地址: https://github.com/Lkkkkkkg/webpack-demo 繼上一次配置完壓縮分離css : https://blog.csdn.net/qq593249106/article/details/84933978 先前單頁面目錄結構: |- /di

機器學習與深度學習系列連載： 第一部分 機器學習（十一）決策樹2（Decision Tree）

決策樹2 決策樹很容易出現過擬合問題，針對過擬合問題，我們採用以下幾種方法 劃分選擇 vs 剪枝 剪枝 (pruning) 是決策樹對付“過擬合”的 主要手段！ 基本策略： 預剪枝 (pre-pruning): 提前終止某些分支的生長 後剪枝 (post-pr

演算法工程師修仙之路：吳恩達機器學習（十一）

吳恩達機器學習筆記及作業程式碼實現中文版 第八章 應用機器學習的建議 決定下一步做什麼 獲得更多的訓練例項——通常是有效的， 但代價較大， 下面的方法也可能有效， 可考慮先採用下面的幾種方法： 嘗試減少特徵的數量； 嘗試獲得更多的特徵

SODBASE CEP學習（十一）：分散式叢集

大家裝SODBASE CEP Server的時候會發現，它本身就是一個分散式系統，可以非常方便的快速建立分散式運算模型。 1. 啟用叢集方法 只要修改sodbase-cep-server-webservice-1.0.1/configuration/configuratio

深度學習之（十一）Deep learning中的優化方法：隨機梯度下降、受限的BFGS、共軛梯度法

　　三種常見優化演算法：SGD（隨機梯度下降），LBFGS（受限的BFGS），CG（共軛梯度法）。      1.SGD（隨機梯度下降）        隨機梯度下降(Stochastic Gradient Descent, SGD)是隨機和優化相結合的產物，是一種很神奇的優化方法，屬於

前端學習（十一）： linux下安裝配置nodejs環境(含 docker)

背景：大家寫前端的時候，可以在VScode 進行除錯，視覺化。但當程式需要釋出的時候，要麼公司自己搭建伺服器，要麼使用華為雲（哈哈，打個廣告，歡迎使用我們華為雲）、阿里雲等伺服器。一般申請伺服器，肯定大多是Linux系統（包括CentOS，Ubuntu等等）。哈哈哈，講個自己

flume學習（十一）：如何使用Spooling Directory Source

最近在弄一個信令資料匯聚的事情，主要目的是把FTP上的信令資料匯聚到HDFS上去儲存。 邏輯是這樣的：把FTP伺服器上的檔案下載到一臺主機上，然後SCP到另外一臺主機上的Spooling Directory Source所監控的目錄下面去，sink是hdfs（這裡解釋一下，

python學習（十一） 文件和流

內存 無緩沖 abcd 連接 sss 文件操作 打開文件 while 3.5 11.1 打開文件 　　>>> f = open(r‘c:\text\somefile.txt‘)， 第一個參數是文件名，必須有；第二個是模式；第三個參數是緩沖。 　　11.1

linux學習（十一）用戶和用戶組管理

gin rec uda username type /usr 之前 密碼 只有一個 一、用戶文件 文件：/etc/passwd 這個文件記錄了用戶了用戶名，用戶id，所屬組，家目錄，shell信息： [root@iZ25lzba47vZ ~]# tail -n3 /etc

mybatis學習（十一）——springmvc++spring+mybatis整合

transacti servlet 自動註入 為我 reac content attribute 定義 property 做任何一個項目都以一個需求，這裏先定義一下需求：利用三大框架查詢酒店列表。 一、搭建開發環境 1、創建一個web項目 我這裏用的是 jdk1.8+to

Java學習（十一）

nwr 定義 多線程操作 常用 yield 安全 cin try 過程 Java在設計之初就已經考慮到了線程的問題，因此Java可以有多種方式調用線程。 1.通過繼承線程類的方式調用線程。通過對函數public void run(){……}進行覆蓋來實現相關的程序 2.通過

Python學習（十一） Python 類

count sym == AC val setter 輸入 com ttr Python 類 面向對象編程是有效的軟件編寫方法之一。 python程序編寫方法 1、函數編程，使用函數方式 2、面向對象編程，使用類方式 創建類 創建方法 構造方法，__ini

【JMeter4.0學習（十一）】之JMeter對（Mysql、Oracle）數據庫性能測試腳本開發

conn 遇到的問題 mys .cn SQ 數據庫性能測試 pos rac 問題總結 一、MySQL數據庫鏈接： 註：下面所產生的問題一律參考詳見：《【JMeter4.0】之遇到的問題總結（持續更新）》（包括Mysql、Orcale） 準備：引包，包路徑一定要放對位置，

操作系統學習（十一） 、一致代碼段和非一致代碼段

操作 使用 異常 不知道 .html 代碼段 tails 用戶 logs 一、概述 操作系統保護模式下把代碼段分為一致代碼段和非一致代碼段的原因是：內核程序和用戶程序要分開，內核程序不能被用戶程序幹擾。但是有時候用戶程序也需要讀取內核的某些數據，於是操作系統就從內核程序中分