hello wgsl

wgsl を練習するべくgh-pages に展開できる開発環境を摸索していたのだが、 その中で ReactRouter v7 よさげだった。

ClientLoader という仕組みがあって、 事前に async 関数を実行できる。 wgpu の初期化に不可欠な device 取得がすっきり記述できた。

export async function clientLoader() {
  const adapter = await navigator.gpu.requestAdapter();
  console.assert(adapter instanceof GPUAdapter, "no GPUAdapter");
  const device = await adapter!.requestDevice();
  return { adapter, device };
}

export default function WebGpu({ loaderData }) {
  const { adapter, device } = loaderData;
  ///
}

project 初期化

https://ja.vite.dev/guide/

$ mkdir hello_wgsl
$ cd hello_wgsl
$ bun create vite .
# react + typescript
$ bun install
$ bun run dev

build

typescript の設定。

markdown

メモを markdown で書いて、近くに canvas を配置するスタイルにしてみる。

gh-pages