2024-08-21

「KMC LIFE GAME RESERCHARS」

神山まるごと高専生が立ち上げたライフゲームに関するプロジェクト!MSX-FANに掲載されていたアプリで知ってから大好きな、ライフゲームなので、若き高専生の新活動がうれしい!

一日一創でも時々作って来ていますが、今回は宿題にしていたWebGPUバージョンのライフゲームに着手!


「初めての WebGPU アプリ  |  Google Codelabs」

なんとちょうどいいことに、Googleによる日本語対応でやさしい、WebGPU入門のターゲットがライフゲーム!JavaScriptでシンプル1ファイルでつくるチュートリアルになっていたので、ES-Jamで順に実装してみました。
(参考、まるでマイコン開発、WebGPUで150倍速、ブラウザで動く4つ目のプログラミング言語、WGSLはじめのいっぽ


「WebGPU入門 - 3 WebGPUを初期化する」
Codelabs 初めての WebGPU アプリより
まずはHTMLが画面内に収まるところから。WebGPUを使った描画!
WebGPUにおける、GPU用のプログラミング言語は、Rust似のWGSL(WebGPU Shading Language)です。(WebGLではC言語風なGLSLでした)


「WebGPU入門 - 4 ジオメトリを描画する」
Codelabs 初めての WebGPU アプリより
続いて、ポリゴンを2つ作って描画!


「WebGPU入門 - 5 グリッドを描画する」
Codelabs 初めての WebGPU アプリより
GPUを使った並列描画ができました!


「WebGPU入門 - 6 追加の実習:色を付ける」
Codelabs 初めての WebGPU アプリより
グラデーションがきれい!描画は一瞬!


「WebGPU入門 - 7 セルの状態を管理する」
Codelabs 初めての WebGPU アプリより
セルの状態を管理する配列を追加して、反映する方法。


「WebGPU入門 - 8. シミュレーションを実行する」
Codelabs 初めての WebGPU アプリより
見た目はかわりませんが、コンピューティングシェーディングを使う形に変更!(チュートリアルそのままだとうまくいかないかも?)


「WebGPU入門 - 8. シミュレーションを実行する」
Codelabs 初めての WebGPU アプリより
アルゴリズムを加えて、ライフゲームのできがり!


「WebGPUライフゲーム」

グリッド数を増やし、シンプルに白黒にして、更新間隔を短くした、ベースアプリが完成!
一度、辿っておけば、いろいろと応用することができます。新スキルゲット!

WebGPU、Safariでの対応が待ち遠しいですね!

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS