1. 丐版 HelloWebGPU
- ① 為什么是 index.html
- ② 你這個代碼為什么瀏覽器沒有顯示東西？
- ③ 為什么你不用 HTTP 協議打開 index.html
2. 我需要型別提示
- 2.1. 使用 VSCode 的 jsconfig 獲取型別提示
- 2.2. 在前端工程化的專案中使用型別提示
- 2.3. 在 Vue/React 等專案中
3. 畫三角形的例子
4. 作者的話

1. 丐版 HelloWebGPU

最簡單的 WebGPU 程式應該是這樣的：

<script>
const init = () => {
  if ('gpu' in navigator) {
    console.log(navigator.gpu)
  } else {
    console.log('瀏覽器不支持 WebGPU；瀏覽器未開啟 WebGPU 功能，')
  }
}
init()
</script>

將上面的代碼保存成 index.html，雙擊打開就可以在控制臺看到輸出的物件：

如果你是什么都不會的新手，那么接下來這幾個問題我只說一次，當然，老手可以選擇性跳過，

① 為什么是 index.html

不為什么，你喜歡可以改成 home.html，main.html，但是檔案的后綴名得是 html，用 index.html 是習慣，

② 你這個代碼為什么瀏覽器沒有顯示東西？

如果你沒有閱讀過我之前的文章，沒有仔細閱讀過，自然是不知道為什么，

WebGPU 不像 WebGL，它解除了與 DOM - HTMLCanvasElement 的強關聯，很簡單：

WebGPU focus on GPU. Rendering is part of GPU's features, not all.

意思是，渲染繪圖只是 GPU 的一部分功能，WebGPU 更接近現代 GPU 的功能定位，

所以，作為瀏覽器內置的一個 API，你只需要 JavaScript 就可以獲取到這套全新設計的 API，它掛載于 navigator 上，

③ 為什么你不用 HTTP 協議打開 index.html

別急，待會就用，

雙擊 "index.html" 檔案，瀏覽器打開這個頁面，你可以在瀏覽器地址欄看到完整的檔案資源路徑：

file:///C:/Users/<YourUserName>/Desktop/index.html

最前面的字母是 file:///，然后跟了個本地磁盤路徑，這種方式叫做 使用 file 協議訪問（打開）頁面，但是我們很多時候都是使用 http（或 https，簡單起見，下文全用 http）協議打開的，哪怕是在本地：

http://localhost:8080/index.html

具體原因不重復，網上有非常多這兩種協議在 Web 開發時的差異，

而在本地啟動一個 HTTP 服務器軟體，伺服某個磁盤中的資源，在我是學生的年代資料不算多，也不算少，可以借助 Apache-HTTPD，也可以借助 Tomcat，甚至為了一個小小的 index.html 下載一個 XAMPP 的大有人在，

現在，你完全可以借助：

VSCode 的 LiveServer 插件
更易配置的 nginx / openresty
Python 的 http.server 模塊
NodeJS 全域 http 插件 / NodeJS 寫一個簡易的 HTTP 服務器
借助各種前端工程化工具，使用 devServer

來伺服這個 index.html，我之后將選擇最后一種，作為開發時的輔助工具，

2. 我需要型別提示

2202 年如果還有人建議新手用 Notepad 寫代碼的都建議去喝一口恒河水，軟體開發至今，積累了無數的技術和門檻，就不要再堆疊了，

我選擇 VSCode 作為 JavaScript 代碼編輯器，你也可以選擇別的，

寫 JavaScript 這種動態型別的語言，呼叫函式、滑鼠指標移動到變數、函式上沒有智能提示時，純猜、靠背是相當讓人沒有耐心的事情，

我們可以借助 TypeScript 的 型別宣告 來做到型別提示，

很可惜，在我寫這篇文章的時候，正式頻道的各大瀏覽器還沒有正式暴露 WebGPU JavaScript API，

2.1. 使用 VSCode 的 jsconfig 獲取型別提示

VSCode 是 TypeScript 撰寫的，自然對型別宣告檔案（*.d.ts）有支持，在普通的 JavaScript 專案中，想要獲得像 TypeScript 一樣的型別提示，只需在專案根目錄下增加一個 jsconfig.json 檔案，其擁有 compilerOptions.typeRoots 配置項，告訴 VSCode 要去哪里讀取型別宣告檔案即可，

如上所示，jsconfig.json 告訴 VSCode，型別宣告檔案從 ./src 檔案夾下找，在那個 index.d.ts 檔案中，你可以自己寫型別宣告；我就偷懶了，從官方倉庫復制了一份 WebGPU 的型別宣告檔案，粘貼于此，

所以，在 main.js 檔案就可以用 WebGPU 的型別提示啦！

這種只是一種過渡方法，接下來將展示在 Vite + TypeScript 專案中使用 WebGPU 官方的型別提示庫，

2.2. 在前端工程化的專案中使用型別提示

我的選擇是 Vite + TypeScript，選擇 Vite 的理由很簡單：

開發服務器使用 esbuild 速度足夠快
插件蓬勃發展，開箱支持很多 Webpack 需要 loader 才能實作的特性
檔案豐富
內置依賴少

最重要的一點，我比較厭煩 polyfill 的程序，畢竟，

能運行 WebGPU 的瀏覽器，還需要考慮向下兼容？

關于如何使用 Vite 腳手架工具開啟各種模板專案就不復述了，我使用 Vanilla + TS 模板創建了一個工程 “gpuweb-prj”：

隨后，安裝專案依賴：

pnpm install && pnpm add @webgpu/types -D

然后，在專案根目錄下的 tsconfig.json 的 compilerOptions.typeRoots 添加型別提示庫的路徑即可：

{
  "compilerOptions": {
    "typeRoots": [ "./node_modules/@webgpu/types", "./node_modules/@types"]
  }
}

"./node_modules/@types" 是一個型別提示庫倉庫的默認路徑，位于 GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions.，但是 WebGPU 沒有提交到這個倉庫，所以需要添加新的路徑，與 2.1 小節中添加自己的路徑是一個道理，只不過這里用的是 TypeScript 專案，所以是 tsconfig.json 檔案，

然后，你就能在你的 ts 代碼中愉快地用 WebGPU 型別了，

待 WebGPU 正式登陸各大瀏覽器的那一天，應該就不需要搞這么麻煩了，屆時會像 WebGL 一樣，將型別集成在 TypeScript 的內置型別宣告中：

?? 應該快來了吧，希望官方別鴿太久了，

2.3. 在 Vue/React 等專案中

也一樣的，均是在 jsconfig.json / tsconfig.json 檔案中配置型別宣告檔案的路徑即可，

3. 畫三角形的例子

基于上述使用 Vite 創建的專案，修改 main.ts 如下：

import { wgslShader } from './shader'
import './style.css'

const init = async () => {
  if (!('gpu' in navigator)) {
    return
  }
  const canvas = document.getElementById('canvas') as HTMLCanvasElement

  //#region 適配高 DPR 螢屏的 canvas
  const dpr = window.devicePixelRatio
  canvas.style.height = `${canvas.height / dpr}px`
  canvas.style.width = `${canvas.width / dpr}px`
  //#endregion

  const adapter = await navigator.gpu.requestAdapter()
  if (!adapter) {
    return
  }
  const device = await adapter.requestDevice()
  const ctx = (canvas as HTMLCanvasElement).getContext('webgpu')
  if (!ctx) {
    return
  }
  const preferFormat = navigator.gpu.getPreferredCanvasFormat()
  ctx.configure({
    device: device,
    format: preferFormat,
    alphaMode: 'opaque',
  })

  const triangleShader = device.createShaderModule({
    code: wgslShader
  })
  const pipeline = device.createRenderPipeline({
    layout: "auto",
    vertex: {
      module: triangleShader,
      entryPoint: 'vertex_main'
    },
    fragment: {
      module: triangleShader,
      entryPoint: 'frag_main',
      targets: [{
        format: preferFormat
      }]
    },
    primitive: {
      topology: 'triangle-list'
    }
  })

  const renderPassDescriptor = {
    colorAttachments: [{
      view: undefined,
      clearValue: [0, 0, 0, 1],
      loadOp: 'clear',
      storeOp: 'store',
    }],
  } as GPURenderPassDescriptor

  const frame = () => {
    if (!canvas) {
      return
    }

    const commandEncoder = device.createCommandEncoder();
    (renderPassDescriptor.colorAttachments as GPURenderPassColorAttachment[])[0].view = ctx.getCurrentTexture().createView()
    const renderPassEncoder = commandEncoder.beginRenderPass(renderPassDescriptor)
    renderPassEncoder.setPipeline(pipeline)
    renderPassEncoder.draw(3)
    renderPassEncoder.end()

    device.queue.submit([
      commandEncoder.finish()
    ])

    requestAnimationFrame(frame)
  }
  requestAnimationFrame(frame)
}

window.addEventListener('DOMContentLoaded', () => {
  init()
})

創建著色器檔案 shader.ts 如下：

export const wgslShader = /* wgsl */`
@vertex
fn vertex_main(
  @builtin(vertex_index) vertex_index: u32
) -> @builtin(position) vec4<f32> {
  var pos = array<vec2<f32>, 3>(
    vec2<f32>(0.0, 0.5),
    vec2<f32>(-0.5, -0.5),
    vec2<f32>(0.5, -0.5)
  );

  return vec4<f32>(pos[vertex_index], 0.0, 1.0);
}

@fragment
fn frag_main() -> @location(0) vec4<f32> {
  return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`

樣式和 HTML 如下：

<div id="app">
  <canvas id="canvas" height="800" ></canvas>
</div>

<style>
html, body {
  margin: 0;
  padding: 0;
}

#app {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

其余改動并不大，