C++ ネイティブ WebGPU グラフィックス開発ガイド

本ガイドでは、Windows、Linux、macOS 向けに、ゼロから C++ を用いて WebGPU グラフィクス API を駆使したネイティブ 3D アプリケーションを作成する方法を解説します。

クイックスタート

ご作成の GPU コードの全てを理解したいですか？

• はい、WebGPU コードはゼロから書く！
  • 素晴らしい選択です！ぜひ「導入」から読み始めて、各章を順番に進めてください。
• いいえ、初期の手順（テンプレート部分）はスキップしたい！
  • その気持ちもよく分かります。基本手順はいつでも後で確認できますので、まずは各ページの先頭と末尾にある**「生成されたコード」**のリンクをご確認ください。

ラッパー選択について

シンプルなラッパーを使用することに問題ありませんか？

• はい、C++ スタイルのコードを好みます！
  • 「With webgpu.hpp」タブをご利用ください。
• いいえ、生の C WebGPU API を示してほしい！
  • 「Vanilla webgpu.h」タブをご利用ください。ただし、この「Vanilla WebGPU」向けの生成されたコードは少し古い可能性があります。しかしながら、ガイド内のすべてのコードブロックは最新バージョンに更新されているため、安心してご参照いただけます。

ベースコードのビルド方法

ベースコードをビルドするには、プロジェクト設定の章にある**「ビルド」**セクションをご参照ください。

また、以下のコマンドライン引数によりバックエンドを選択できます：

cmake -B build -DWEBGPU_BACKEND=WGPU    # デフォルト: wgpu-native
cmake -B build -DWEBGPU_BACKEND=DAWN    # Dawn

ベースコードの進捗具合について

ベースコードをどの程度まで作成したいですか？

• 基本的な操作が可能な 3D メッシュビューア
  • 「ライトニング制御」章の末尾から始めるのがおすすめです。
• Web ブラウザでも動作させたい
  • ガイド本編にはいくつか追加行が必要になっています。「Web 向けビルド」補遺を参照し、例題を適宜調整して Web 環境でも動かせるようにしてください。

開発中の告知

本ガイドは現在改訂中であり、WebGPU の仕様も引き続き進化しています。各章のタイトルには以下のステータスマークが表示されています。

• 🟢 最新！ WebGPU-distribution の最新の安定版（v0.2.0）を使用しています。
• 🟡 読み込み可能ですが古いバージョンを使用。
• 🟠 進行中： 概略は理解できますが、未完了の部分もあります。
• 🔴 TODO（予定）： お粗末な状態です。

【重要】 各章に付随するコードを利用される際は、その章で提供されている WebGPU のバージョンを必ずご使用ください。不一致を防ぐためにお勧めです。

コンテンツ一覧

Introduction（導入）

• Introduction（導入）

Getting Started（はじめよう）🟢

• Project setup 🟢
  • プロジェクトのセットアップ
• Hello WebGPU 🟢
  • 初めての WebGPU
• Adapter and Device（アダプターとデバイス）🟢
  • The Adapter 🟢 （アダプター）
  • The Device 🟢 （デバイス）
• The Command Queue 🟢
  • コマンドキュー
• Opening a window 🟢
  • ウィンドウの開示
• First Color 🟢
  • 最初の色彩
• C++ wrapper 🟢
  • C++ ラッパー

Basic 3D Rendering（基礎的な 3D レンダリング）🟢

• Hello Triangle 🟢
  • 初めての三角形
• Input Geometry（入力幾何形状）
• Playing with buffers 🟢
  • バッファの操作
• A first Vertex Attribute 🟢
  • 最初の頂点アトリビュート
• Multiple Attributes 🟢
  • 複数のアトリビュート
• Index Buffer 🟢
  • インデックスバッファ
• Loading from file 🟢
  • ファイルからの読み込み

Shader Uniforms（シェーダーのユニフォーム変数）

• A first uniform 🟡
  • 最初のユニフォーム変数
• More uniforms 🟡
  • より多くのユニフォーム変数
• Dynamic uniforms 🟡
  • 動的なユニフォーム変数

3D Meshes（3D メッシュ）🟡

• A simple example 🟡
  • シンプルな例
• Depth buffer 🟡
  • ディPTH バッファ
• Transformation matrices 🟡
  • 変換行列
• Projection matrices 🟡
  • プロジェクション行列
• Basic shading 🟡
  • 基本的なシャドウイング（着色）
• Loading from file 🟡
  • ファイルからの読み込み

Texturing（テクスチャリング）🟡

• A first texture 🟡
  • 最初のテクスチャ
• Texture mapping 🟡
  • テクスチャの写像
• Sampler 🟡
  • サンプラー
• Loading from file 🟡
  • ファイルからの読み込み

Some interaction（いくつかの相互作用）🟡

• Refactoring 🟡
  • リファクタリング
• Resizing the window 🟡
  • ウィンドウのリサイズ
• Camera control 🟡
  • カメラ制御
• Simple GUI 🟡
  • シンプルなユーザーインターフェース
• Lighting control 🟡🟢
  • ライティング制御

Lighting and Material（ライティングとマテリアル）🟡

• Specularity 🟡
  • 光沢（spéculare）
• Normal mapping 🟡
  • ノーマルマッピング
• Image-Based Lighting (🟠WIP)
  • イメージベースのライティング
• Cube Maps (🟠WIP)
  • キューブマップ
• Physically-Based Materials (🟠WIP)
  • 物理ベースレンダリングのマテリアル

Basic Compute（基礎的なコンピュート）🟡

• Compute Pipeline 🟡
  • コンピュートパイプライン
• Image Processing（画像処理）🟡
  • Mipmap Generation 🟡 （ミップマップの生成）
  • Convolution Filters 🟡 （畳み込みフィルタ）
  • Cubemap Conversion (🟠WIP) （キューブマップの変換）
  • Cubemap Prefiltering (🟠WIP) （キューブマップの事前フィルタリング）

Procedural Geometry（手続き論的幾何形状）🟠

• Deformation (🟠WIP)
  • 変形

Neural Networks (🔴TODO)

• ニュラルネットワーク

Advanced Techniques（高度な技術）

• Instanced Drawing (🔴TODO)
  • インスタンス描画
• RAII 🟡
  • リソース所有と即時解放（RAII）
• Screen capture (🟠WIP)
  • スクリーンキャプチャ
• Headless context 🟡
  • ヘッドレスコンテキスト
• High Dynamic Range Textures (🟠WIP)
  • ハイ・ダイナミック・レンジ テクスチャ
• Benchmarking（ベンチマーク）
  • Time 🟡 （時間）
  • Memory (🔴TODO) （メモリ）
  • Processing Units (🔴TODO) （プロセッサ単位）
  • Environmental Impact (🔴TODO) （環境への影響）
• Deferred Shading (🔴TODO)
  • デフェードレンダリング（遅延シェーディング）
• Render Bundles (🔴TODO)
  • レンダーバンドル
• Multi-Sampling (🔴TODO)
  • マルチサンプリング
• Scene tree (🔴TODO)
  • シーンツリー
• Shadow maps (🔴TODO)
  • シャドウマップ（陰影図）
• Tesselation (🔴TODO)
  • テッセレーション
• Raytracing (🔴TODO)
  • レイトレーシング

Appendices（補遺）🟡

• Teaching native graphics in 2023 🟢
  • 2023 年のネイティブグラフィックス教育について
• Keep in mind lower-end devices 🟢
  • 低性能機器についても考慮を
• Feedback needed 🟢
  • フィードバックをお待ちしています
• Building for the Web 🟡
  • Web 向けビルド
• Using SDL for Window Management 🟡
  • ウィンドウ管理における SDL の使用
• Custom Extensions（カスタム拡張機能）🟠
  • The extension mechanism (🟠WIP) （拡張メカニズム）
  • With wgpu-native (🟠WIP) （wgpu-native を用いた場合）
  • With Dawn (🟠WIP) （Dawn を用いた場合）

Debugging (🟠WIP)

• デバッグ

Memory Model (🔴TODO)

• メモリモデル

References (🟠WIP)

• リファレンス（参考文献）

Temporary page

• 一時ページ