Web開発
WebGPU Unleashed: 実践チュートリアル
WebGPU Unleashed: A Practical Tutorial (shi-yan.github.io)
要約
この無料の書籍「WebGPU Unleashed」は、WebGPUを使用してJavaScriptでグラフィックスプログラミングを学ぶための実践的なガイドです。GPUドライバーとパイプラインの概要から始まり、三角形の描画、2Dレンダリング、3Dシーン制御、GPUコンピューティング、そして最先端のGaussian splattingレンダリングまでをカバーします。インタラクティブなWeb形式で提供され、コードサンプルやデモへのアクセスが容易です。
全文翻訳
WebGPU Unleashed: 実践チュートリアル
Shi Yan著
「WebGPU Unleashed」へようこそ。グラフィックスプログラミングのダイナミックな世界への入り口です。この無料の書籍は、私の学習経験を基に、JavaScriptとWebGPUを使ったグラフィックスプログラミングを教えてくれます。
なぜこの本を書いたのか?最近、友人にグラフィックスプログラミングを始めるには何から学ぶべきか尋ねられました。数年前であれば、OpenGLが初心者向けの定番APIで、ゲーム開発に興味がある人にはDirectXという選択肢がありました。
しかし、近年、グラフィックスAPIの状況は大きく進化しました。Vulkan、Metal、DirectX 12といった新世代のAPIが登場しました。これらのAPIはより軽量で高性能ですが、コードはより冗長になります。概念は似ていますが、OpenGLよりも断片化が進んでおり、特定のプラットフォームでしか利用できないものもあります。この断片化は初心者を混乱させ、どこから始めればよいか分からなくさせることがよくあります。
ここでWebGPUが登場します。これは他のAPIと概念的に似ていますが、異なる目標を持っています。それは、ネイティブなグラフィックス機能をWebにもたらすことです。グラフィックスドライバーにネイティブ実装を持つ他のAPIとは異なり、WebGPUは基本的に前述のAPIのラッパーです。これにより、WebGPUはいくつかの理由で最初のAPIとして魅力的になります。
ラッパーとして、WebGPUは他のAPIの共通基盤となることを目指しており、比較的シンプルです。
WebグラフィックスAPIの標準として、WebGPUはすべてのプラットフォームで利用可能です。
ネイティブ開発に興味がある人向けに、C++とRustでWebGPUの実装が利用可能です。
WebGPUが最近リリースされた今が、それを学ぶのに理想的な時期です。
まず、GPUドライバーとGPUパイプラインの概要から始めます。これらは他のグラフィックスAPIの本では見過ごされがちなトピックです。簡単なグラフィックスアプリケーションを実装できる多くの学生は、GPUドライバーやグラフィックスソフトウェアが基盤となるハードウェアとどのようにやり取りするかを理解していません。これらのトピックをカバーすることが不可欠だと信じています。
この概要の後、WebGPUの最もシンプルな使い方、つまり3Dグラフィックスの基本要素である三角形の描画を探求します。これは基本的なことのように聞こえるかもしれませんが、より複雑な概念を理解するためには、これをマスターすることが重要です。次に、Web向けの完全なグラフィックスアプリケーションを実装するために必要なスキルである、2Dレンダリング技術と3Dシーン制御をカバーします。
高度な章では、WebGPUを使用したGPUコンピューティングに焦点を当て、単純な三角形を超えた高度なレンダリング技術を探求します。WebでのGPUコンピューティングは、以前はWebGLでは不可能でしたが、WebGPUで可能になりました。これにより、Webアプリケーション向けのGPU AI推論の可能性など、エキサイティングな可能性が開かれます。
書籍の最後のチュートリアルとして、GPUコンピューティングとレンダリングを組み合わせた複雑な例であるGaussian splattingレンダリングを実装します。執筆時点では、Gaussian splattingは最先端のシーン表現およびレンダリング技術であり、現実世界の3Dシーンを高いリアリズムとリアルタイムパフォーマンスでキャプチャおよびレンダリングできます。
この書籍の内容を提示するために多大な努力を払いました。当初は従来の書籍として計画していましたが、テクノロジー書籍にはインタラクティブなWeb形式の方が効果的であることに気づきました。このアプローチにより、以下のことが可能になります。
ビデオによる概念のより良い説明
リンクによる参照の簡単な引用
すべてのコードサンプルをホストするオンラインプレイグラウンド。ここでデモを実行したり、コードを変更したりできます。
Launch Playground - 5_06_skeleton_animation
書籍のすべてのコードスニペットは、プレイグラウンドサンプルから相互参照されています。読者を冗長なコードで圧倒しないように、記事には関連するコードセグメントのみを含めました。テキストとプレイグラウンド間のナビゲーションは非常に簡単です。
このオンライン形式のもう1つの利点は、読者からのフィードバックを受け取ることができることです。提案や改善点があれば、GitHubのディスカッションやイシューを通じて遠慮なく共有してください。
一緒にこのWebGPUの旅に出かけましょう!