「WebGPU」の基礎と3DCG開発のはじめかた

はじめに

本連載では、図1のようなボーンアニメーションする3Dキャラクターを「レンダリング(3Dデータをもとに3D計算して2次元の画面に描画)」する解説をします。そのためWebブラウザで「WebGPU」を使います。WebGPUとはWebブラウザで動作する最新の3D技術です。今までは「WebGL」がWebブラウザの標準の3D機能でしたが、その後継の3D機能です。まだまだWebGLがなくなることはないと思いますが、それを先取りしてWebGPUで3Dプログラミングをしてみようというわけです。

WebGPUは2025年4月現在、最新のPC(Windows・macOS・Linux)やAndroid(対応していない場合もある)に搭載されているWebブラウザ「Google Chrome」のみで動作しますが、いずれはWebGLのようにほとんどのモダンなWebブラウザに搭載され、どんなパソコンやモバイル機器でもWebGPUが動作するようになると思われます。

図1：本連載で作成する3Dコンテンツの例

3DCGの基礎知識

WebGPUは3DCGをプログラミングして描くための技術です。そこで、まず3DCGについて解説します。また、3DCGを作るための3DCGツールについても合わせて解説します。

Metasequoia4について

3Dプログラミングを始める前に、まず有名な3DCGツールを使えるようになってください。ツールとしては、無料版もある「Metasequoia4」(図2)がお勧めです。これは「ポリゴンモデラー」と呼ばれる、3Dオブジェクトを作成したり編集したりといった「モデリング」を行うためのツールです。

図2：「Metasequoia4」のインターフェース

Blenderについて

Metasequoia4のほかに、無料の3DCGツールとして「Blender」(図3)もお勧めです。Blenderにはモデラーの機能だけでなく、3Dアニメーションを描く機能まで付いています。ただし、Metasequoia4と比べて慣れるまで若干時間がかかります。

図3：「Blender」のインターフェース

3DCGについて

3Dプログラミングするに当たって、3DCGの仕組みも知らずに3Dプログラミングするのはほぼ不可能ですが、3DCGは図4のように黒色のラインで囲まれた「ポリゴン(多角形)」面を無数に描画してることが分かれば何とかなります。例えば「サイコロは四角形面6個からできている」と言えば誰でも分かりますよね。それが3DCGでは、全てのオブジェクトがポリゴン面を組み合わせて描かれているわけです。

図4：ポリゴンで構成された3DCG

2DCGが塗りまたは線と塗り潰しだけでできていることは、手描きの絵に近いため何となく分かるでしょう。2DCGのように、3DCGもポリゴンという基本が大事です。また3DCGでは頂点とラインも描くことができますが、これはコンテンツを作る際にはあまり使われなく、モデラーや3Dアニメーションツールなどの3Dツールを作る際によく使われます。

さて、3DCGツールが使えるようになったら、今度は「実際にどうやって3Dプログラミングしてポリゴンを描くのか」気になりますよね。

これで全てではないですが、シンプルに言えばたったこれだけのことなのに、3DCGを小難しい計算式ばかりで紹介している記事が多く、筆者は最初まったく3Dプログラミングの仕組みが分からず理解するのに時間がかかりました。

WebGPUについて

WebGPUを語る前に、その前身であるWebGLについても解説しておきましょう。WebGLもWebGPUも、3DグラフィックスをNVIDIA社などの専用ハードウェア(ビデオカード、グラフィックボード)を使って3D計算や3D描画といったプログラミングをするためのJavaScriptのライブラリです。

WebGLはシリコングラフィックスが開発した3Dグラフィックスライブラリ「OpenGL」をラップしてWebブラウザ上で使えるようにした3D機能です。正確にはOpenGL 2のシンプル版「OpenGL ES 2」をラップしています。「WebGL 2」は「OpenGL ES 3」をラップしています。

これに対し、WebGPUはWindowsでは「DirectX12」をラップし、macOSでは「Metal」をラップし、Linuxでは「Vulkan」をラップしています。これらの3つもそれぞれ3Dグラフィックスライブラリで、OpenGLよりさらにハイクオリティで高速に3D処理を行います。