WebGPU：在瀏覽器中解鎖現代 GPU 訪問

近日，Chrome 支持了 WebGPU，新的 WebGPU API 在圖形和機器學習工作負載方面實現了巨大的性能提升。本文將探討 WebGPU 如何改進當前 WebGL 解決方案，並展望未來的發展方向。

WebGPU 背景

WebGL 於 2011 年登陸 Chrome。通過允許 Web 應用利用 GPU，WebGL 可以在 Web 上實現驚人的體驗——從 Google 地球到交互式音樂視頻，再到 3D 房地產等等。WebGL 是基於 OpenGL 系列 API 開發的，該 API 最初開發於 1992 年，自那時以來 GPU 硬件已經發生了極大的變化。

爲跟上這一進步，一種新型的 API 被開發出來，以更高效地與現代 GPU 硬件交互。這些 API 包括 Direct3D 12、Metal 和 Vulkan。這些新的 API 支持 GPU 編程的新的和苛刻的用例，例如機器學習的爆炸式增長和渲染算法的進步。WebGPU 是 WebGL 的繼承者，將這種新型現代 API 的進步帶到了 Web。

WebGPU 在瀏覽器中解鎖了許多新的 GPU 編程可能性。它更好地反映了現代 GPU 硬件的工作方式，併爲未來更高級的 GPU 功能奠定了基礎。自 2017 年以來，這個 API 已經在 W3C 的 “Web GPU” 小組中不斷完善，並得到了包括蘋果、谷歌、Mozilla、微軟和英特爾在內的衆多公司的合作。經過 6 年的努力，很高興地宣佈，這項對 Web 平臺最大的增強功能終於可用了！

WebGPU 現在可以在 Chrome OS、macOS 和 Windows 上的 Chrome 113 中使用，其他平臺也將會很快推出。

下面來看一些令人興奮的 WebGPU 使用案例。

解鎖用於渲染的新 GPU 工作負載

諸如計算着色器之類的 WebGPU 功能使新類別的算法能夠移植到 GPU 上。例如，可以爲場景添加更多動態細節、模擬物理現象等算法！甚至以前只能用 JavaScript 完成的工作負載現在可以轉移到 GPU 上。

以下視頻顯示了用於對這些元球表面進行三角測量的行進立方體算法。在視頻的前 20 秒內，當該算法在 JavaScript 中運行時，它很難跟上僅以 8 FPS 運行的頁面，從而導致動畫卡頓。爲了在 JavaScript 中保持高性能，需要大量降低細節級別。

當我們將相同的算法移動到計算着色器時，這是一個白天和黑夜的區別，這在 20 秒後的視頻中可以看到。性能顯着提高，頁面現在以 60 FPS 的流暢速度運行，並且對於其他效果仍有很大的性能提升空間。此外，頁面的主要 JavaScript 循環完全釋放出來用於其他任務，確保與頁面的交互保持響應。

然而，他們的 WebGPU 渲染器啓用了一項稱爲快照渲染的功能。此功能構建在 WebGPU 渲染包之上，可使提交相同場景的速度提高 10 倍以上。這種顯着減少的開銷使 WebGPU 能夠呈現更復雜的場景，同時還允許應用使用 JavaScript 並行執行更多操作。

現代圖形 API 以複雜性、以簡單性換取極端優化機會而著稱。另一方面，WebGPU 專注於跨平臺兼容性，在大多數情況下自動處理資源同步等傳統難題。

WebGPU 易於學習和使用。它依賴於網絡平臺的現有功能來進行圖像和視頻加載等操作，並依賴於衆所周知的 JavaScript 模式，例如用於異步操作的 Promises。這有助於將所需的樣板代碼數量保持在最低限度。可以用不到 50 行代碼在屏幕上顯示第一個三角形。

<canvas id="canvas" width="512" height="512"></canvas>
<script type="module">
  const adapter = await navigator.gpu.requestAdapter();
  const device = await adapter.requestDevice();

  const context = canvas.getContext("webgpu");
  const format = navigator.gpu.getPreferredCanvasFormat();
  context.configure({ device, format });

  const code = `
    @vertex fn vertexMain(@builtin(vertex_index) i : u32) ->
      @builtin(position) vec4f {
       const pos = array(vec2f(0, 1), vec2f(-1, -1), vec2f(1, -1));
       return vec4f(pos[i], 0, 1);
    }
    @fragment fn fragmentMain() -> @location(0) vec4f {
      return vec4f(1, 0, 0, 1);
    }`;
  const shaderModule = device.createShaderModule({ code });
  const pipeline = device.createRenderPipeline({
    layout: "auto",
    vertex: {
      module: shaderModule,
      entryPoint: "vertexMain",
    },
    fragment: {
      module: shaderModule,
      entryPoint: "fragmentMain",
      targets: [{ format }],
    },
  });
  const commandEncoder = device.createCommandEncoder();
  const colorAttachments = [
    {
      view: context.getCurrentTexture().createView(),
      loadOp: "clear",
      storeOp: "store",
    },
  ];
  const passEncoder = commandEncoder.beginRenderPass({ colorAttachments });
  passEncoder.setPipeline(pipeline);
  passEncoder.draw(3);
  passEncoder.end();
  device.queue.submit([commandEncoder.finish()]);
</script>

總結

很高興看到 WebGPU 爲 Web 平臺帶來的所有新可能性，圍繞 WebGL 構建了一個充滿活力的庫和框架生態系統，並且同樣的生態系統渴望擁抱 WebGPU。在許多流行的 Javascript WebGL 庫中，對 WebGPU 的支持正在進行中或已經完成，在某些情況下，利用 WebGPU 的優勢可能就像更改單個標誌一樣簡單！

Chrome 113 中的第一個版本只是一個開始。雖然初始版本適用於 Windows、ChromeOS 和 MacOS，但計劃在不久的將來將 WebGPU 引入其餘平臺，如 Android 和 Linux。

致力於推出 WebGPU 的不僅僅是 Chrome 團隊。Firefox 和 WebKit 的實現也在進行中。

此外，W3C 已經在設計新功能，這些功能在硬件可用時可以公開。例如：在 Chrome 中，計劃很快在着色器和 DP4 類指令中啓用對 16 位浮點數的支持，以進一步提高機器學習性能。

WWebGPU 是一個廣泛的 API，其以釋放驚人的性能。本文只能對其優點進行概述，但如果想親身體驗 WebGPU，可以查看入門 Codelab《Your first WebGPU app[1]》，將構建經典康威生命遊戲的 GPU 版本。這個 Codelab 會逐步引導完成整個過程，因此即使第一次進行 GPU 開發，也可以輕鬆嘗試。

參考：https://developer.chrome.com/blog/webgpu-io2023/

WebGPU 背景

解鎖用於渲染的新 GPU 工作負載

總結

相關鏈接

猜你喜歡