桜の花びらを WebGPU で描く

Lab に、桜の花びらが舞う絵を作った。Canvas 2D 版では花びらをスプライトにして使い回した。1 フレームの描画は 0.3 ms ほどだった。

WebGPU 版では、物理計算をコンピュートシェーダに移した。花びらはインスタンス描画した四角形の中に距離場で描くので、画像は使わない。

Lab で桜の花びらを見る。

形

最初は楕円に切れ込みを付けたが、レンズのように見えた。ハート形の距離場も試したものの、花びらではなくハートに見える。そこで、幅の断面関数で倒卵形を作った。肩は上寄りで、付け根に向かって細くなる。先端には浅い切れ込みを入れた。

形を調整するときは、Python で同じ関数を描いて断面を確認した。

動き

面内の回転だけでは紙吹雪のように見えたので、裏返る動きを付けた。縦横 2 軸の傾きを別々に積分し、横幅と縦幅の伸縮で表した。

つまずいたところ

WGSL では target が予約語で、変数名に使えなかった。

バッファの扱いでもエラーが出た。同じバッファを読み書き用と読み取り専用で同じバインドグループに登録すると、毎フレーム検証エラーになる。何も描かれないのに fps は出ていたため、気づくまで時間がかかった。

距離場では、幅が 0 になる区間に中心線が半透明で残った。|x| - 0 = 0 となるためで、縦の境界を足して消した。