WebGPU APIであると便利なライブラリ

WebGPU APIを使う上で、あると便利なライブラリを紹介します。

@webgpu/types

https://github.com/gpuweb/types（新しいタブで開く）

@webgpu/typesは、WebGPU APIの型定義ライブラリです。
TypeScriptを使用する場合、この記事を書いている時点ではWebGPU APIの型情報が含まれていないため、マニュアルで追加する必要があります。

インストール

npm i -D @webgpu/types

{
  "compilerOptions": {
    "types": ["@webgpu/types"]
  }
}

または、型定義ファイルに対して

/// <reference types="@webgpu/types" />

webgpu-utils

https://github.com/greggman/webgpu-utils（新しいタブで開く）

webgpu-utilsは、WebGPUを使う上で汎用的に使える機能を提供してくれるライブラリです。

インストール

npm i webgpu-utils

機能

よく使いそうな機能を紹介します。

UniformのViewを作成する

WebGPUでUniformBufferを作成するとき、メモリレイアウト（新しいタブで開く）を意識してバイト数やpaddingを勘案して、Buffer全体のバイト数を計算する必要があります。
Uniformメンバーが増えたり、入れ替えたりするたびにこの計算をし直す必要があり、またメモリレイアウトのルールも複雑です。
このライブラリでは、この煩雑な計算を自動化する機能を提供しています。

Mipmap付きのTextureを生成する

WebGPUはMipmapを生成する仕組みを提供していません。そのため、画像リソースから自分でMipmapを生成する（新しいタブで開く）必要があります。
このライブラリでは、Mipmapを解決したTextureを生成する機能を提供しています。

頂点属性を結合する

頂点属性には、position, normal, texcoordなどがあります。属性ごとにVertexBufferを作成する場合、その分RenderPassにBindする必要があり、パフォーマンス上不利になる場合があります。頻繁に更新する必要のない属性は、1つのBufferにまとめてBind数を少なくしたいです。
このライブラリでは、頂点属性をインターリーブ（新しいタブで開く）して1つのBufferにまとめる機能を提供しています。

wgpu-matrix

https://github.com/greggman/wgpu-matrix（新しいタブで開く）

wgpu-matrixは、WebGPUでマトリクス計算、ベクトル計算をするための算術ライブラリです。
WebGPUのクリップ空間のZ座標は0 ~ 1となり、WebGLとは異なるため、ortho, perspective, frustumなどのマトリクスもWebGLとは異なります。

インストール

npm i wgpu-matrix

glTF Transform

https://gltf-transform.dev/（新しいタブで開く）

glTF Transformは、glTF 2.0形式の3Dモデルの読み込み、編集、書き込みをサポートしているライブラリです。

インストール

npm i @gltf-transform/core @gltf-transform/extensions @gltf-transform/functions

DRACOモデルの読み込み

https://github.com/google/draco（新しいタブで開く）

特にWebでは、DRACO圧縮されたモデルを扱うことが多いです。
DRACOモデルを扱う場合は、別途以下のライブラリをインストールする必要があります。

npm i draco3dgltf

型定義

npm i -D @types/draco3dgltf

以下は、DRACOファイルの読み込み例です。

import { WebIO } from '@gltf-transform/core'
import { ALL_EXTENSIONS } from '@gltf-transform/extensions'
import draco3d from 'draco3dgltf'
 
const io = new WebIO()
io.registerExtensions(ALL_EXTENSIONS)
 
const dracoDecoderModule = await draco3d.createDecoderModule({
    // CDN
    // https://github.com/google/draco#wasm-and-javascript-decoders
    locateFile: (path: string) => `https://www.gstatic.com/draco/v1/decoders/${path}`,
    // local file
    // https://github.com/google/draco/blob/main/javascript/draco_decoder_gltf.wasm
    // locateFile: (path: string) => `/draco/${path}`,
})
io.registerDependencies({ 'draco3d.decoder': dracoDecoderModule })
 
const path = '/file/path/model.drc'
const respose = await fetch(path)
const arrayBuffer = await respose.arrayBuffer()
const document = await this.io.readBinary(new Uint8Array(arrayBuffer))
 
const nodes = document.getRoot().listNodes()
const suzanne = nodes.find((node) => node.getName() === 'Suzanne')!

stats-gl

https://github.com/RenaudRohlinger/stats-gl（新しいタブで開く）
WebGPUで使う（新しいタブで開く）

stats-glは、WebGL（Three.js）やWebGPUでパフォーマンスを計測するライブラリです。
FPSはもちろん、Shader処理でかかった時間も計測することができます。

特にWebGPUでは、timestamp-query（新しいタブで開く）機能を使用していて、RenderPassに加えてComputePass（Compute Shader）の時間を計測することもできます。

インストール

npm i stats-gl