PR：この記事にはアフィリエイトリンクが含まれます。
WebGPUをブラウザーで動かし、WGSLで描画したりGPU計算に挑戦したりしたい。そんなとき頼りになるのが入門書です。今回は三冊を扱うテーマや作例、掲載環境とあわせて紹介します。
WebGPUは描画も計算もできる技術ですが、本ごとに入口は違います。APIの仕組みを広くたどるものと、作例を重ねるもの。読み進める感触も変わりますよね。
早見表
| 本 | 参考価格 | 内容の中心 | ページ・掲載環境 |
|---|---|---|---|
 The WebGPU Sourcebook: High-Performance Graphics and Machine Learning in the Browser | US$59.99 | WGSL、ブラウザー描画、機械学習や画像処理 | 384ページ・2024年刊 |
| WebGPU by Examples | US$69.99 | 基本図形から地形、粒子などの作例 | 522ページ・Chrome 113で検証 |
| Practical WebGPU Graphics: Creating Advanced Graphics on Web Using WebGPU – the Next-Generation Graphics API | US$69.99 | 約60の描画・計算サンプル | 電子版445ページ・Chrome Canaryで検証 |
価格欄は公式希望小売価格の参考値です。実際の販売価格は時期や販売店で変わるため、注文時にあらためて確認してください。
三冊の題材は描画とGPU計算。APIを順に押さえる構成、作例を重ねる構成、掲載環境の差も意識してコードを追う構成と、それぞれ特色があります。
学べる範囲
WebGPUの処理はGPUにデータを置いてコマンドを記録し、queueへ送る流れとして見ると理解しやすくなります。用語が増えても、処理順が分かれば追いやすいですね。
描画では頂点データやuniformをシェーダーへ渡してrender pipelineに通し、画面に出します。形を表示したら、変換や照明、テクスチャ、depthへ。段階を踏むうちに、3D表現の基本が見えてきます。
GPU計算ではcompute shaderが値を処理し、その結果をバッファーへ書き込みます。描画と計算に共通するGPU上のデータ受け渡しへ目を向けると、学ぶ範囲の広さも実感できるでしょう。
Sourcebook本
『The WebGPU Sourcebook』は2024年10月刊、384ページのペーパーバックです。前半はグラフィックス理論や高度な数学を詳しく扱わず、WebGPU APIのクラスや関数を実例とともに紹介します。
描画ではWGSL・uniform・変換・ライティング・テクスチャ・depthを扱います。三角形を表示し、物体の位置や光の当たり方を調整するところまで、順を追って学べます。
GPU bufferにデータを用意し、command encoderで処理を記録してcommand bufferをqueueへsubmitする流れも扱います。onSubmittedWorkDoneによる完了確認にも触れ、GPU処理の実行順序を追う助けになります。
計算面にはニューラルネットワーク・画像や動画の処理・行列演算・FFTと題材が広がります。画面に絵を出す用途から数値処理まで、WebGPUで扱える範囲を一冊で見渡せる構成です。
The WebGPU Sourcebook: High-Performance Graphics and Machine Learning in the Browser
CRC Press
Amazonで見るExamples本
『WebGPU by Examples』は2023年刊、522ページのペーパーバックです。開発環境はVisual Studio Code・TypeScript・Webpackで、スターターテンプレートから作例に進みます。
基本図形・シェーダー・render pipelineからGPU bufferやcompute shaderのworkgroupへ進みます。補助用のnpmパッケージwebgpu-simplifiedも登場し、環境を組みながらコードの流れを追う材料になります。
作例には3D形状・ライティング・テクスチャ・地形があります。compute shaderによる3D形状の生成や粒子系も扱い、画面の変化を確かめながらGPU処理を学べます。
掲載サンプルは@webgpu/types 0.1.31とChrome 113で検証されています。手元のブラウザーや型定義が別のバージョンなら、コードの差分を確認してから実行するとよいでしょう。
Practical本
『Practical WebGPU Graphics』は2021年刊で、ペーパーバックが案内されています。電子版の掲載ページ数は445ページです。TypeScript・Webpack・Visual Studio Codeを使い、約60のサンプルで描画と計算を追います。
点・線・三角形からGPU buffer、uniform buffer、3D変換へ進み、ライティングやテクスチャ、3D surfaceを扱います。基本図形から立体表現へ進む構成で、各機能の役割を理解しやすい本です。
compute shader・storage buffer・粒子シミュレーションも対象です。描画結果に加えてGPU上で値を更新し、動きを生み出す流れも学べます。視覚的なサンプルを軸に進める内容です。
掲載環境は@webgpu/types 0.0.38とChrome Canaryです。旧render pipelineやWGSLのコードは現在のChrome Canaryで動かない場合があり、更新版サンプルも案内されています。そのため、変更後のサンプルと比べながら内容を追えます。
Practical WebGPU Graphics: Creating Advanced Graphics on Web Using WebGPU – the Next-Generation Graphics API
UniCAD
Amazonで探すWGSLをつかむ
WGSLはWebGPUでシェーダーを書くための言語です。描画では頂点の位置や色を扱い、compute shaderではデータの計算を記述します。同じ言語でも使う場面で役割が変わる点は、初学者が戸惑いやすいところです。
uniformは描画条件などの値をシェーダーへ渡す場面で登場し、storage bufferは計算結果の読み書きと結びつきます。用語を個別に覚えるより、データの受け渡しをサンプルと一緒に追うと理解しやすくなります。
WGSLを描画やGPU計算と結び付けて学ぶなら『The WebGPU Sourcebook』がおすすめです。作例の変化を順に追いたい人には、二冊の作例型も役立つでしょう。
ブラウザー描画
ブラウザー描画では図形の表示に続いて、変換で位置や向きを変え、ライティングで面の見え方を整えます。テクスチャで表面に情報を加えると、APIの各部品が画面にどう反映されるかを確かめられます。
depthは奥行きの前後関係を扱う要素です。3D形状を重ねたとき、手前と奥の表示を整える役割があります。シェーダーやuniformと並び、立体表現では押さえておきたいテーマですね。
点や線から三角形、さらに3D surfaceへ進む作例なら、画面の変化を段階的に確認できます。基本図形から光やテクスチャへ進む道筋は、WebGPUの描画を初めて学ぶ人にもつかみやすいでしょう。
GPU計算の入口
compute shaderの用途には粒子位置の更新・画像や動画の処理・行列演算などがあります。描画用のシェーダーは画面表示を担い、compute shaderは値の計算に使われます。
workgroupは計算をまとめて実行する単位として登場します。バッファーを読み書きする作例では入力と保存先に注目すると、画面上の動きとGPU内部の処理がつながってきます。
粒子の座標をcompute shaderで更新し、その結果を描画に渡す作例では処理のつながりを観察できます。描画と計算が一つにつながる場面です。
結論
ブラウザー描画とGPU計算を一冊で幅広く学ぶなら、2024年刊の『The WebGPU Sourcebook』がおすすめです。APIの基本からWGSL・画像処理・FFTまで扱い、入門から応用まで視野を広げられます。
作例を追って描画の幅を広げたい人には『WebGPU by Examples』がおすすめです。約60のサンプルや粒子系を読みたい人には『Practical WebGPU Graphics』が合います。掲載環境のバージョンも確認しながら活用してください。
価格は参考値で、実売価格は時期や販売店によって変わります。APIの仕組みから学びたいか、画面や計算の作例を重ねたいかで判断すると、最初の一冊を決めやすくなります。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
