WebGPU・WebGLとは? ブラウザで動く3D作例を体験しよう

WebGPU・WebGLとは？
ブラウザーで動く3D作例を体験しよう

WebGPUウェブ・ジーピーユーやWebGLウェブ・ジーエルは、ブラウザーからGPUを活用するための標準仕様です。WebGPUのほうが新しく、WebGPUがWebGLの後継にあたります。3D描画だけでなく、2Dの高負荷な演出、画像処理、シミュレーションのような計算処理にも応用できます。

GPUを使ったウェブ表現は、主に次のようなコンテンツ開発に役立ちます。

2010年代頃までは、Flash PlayerやUnity Web Playerのようなブラウザー・プラグインを使わなければ高度な3D表現はできませんでした。現在はWebGPUやWebGLによって、ブラウザーだけでネイティブアプリに近いグラフィックス表現を実現できます。

本記事ではWebGPU・WebGL入門者にむけ、数秒で試せるオリジナルのWebGPU・WebGLのHTMLデモを多数掲載。どれもスマートフォンのブラウザーでも利用可能です。WebGPU・WebGLの可能性を体験したうえで、勉強方法を紹介します。

Three.jsのWebGPUレンダラーで、打ち上げから炸裂、火花の残像、煙までを描いた作例です。ドラッグでアングルを変えられます。

燃え盛る炎を表現したWebGPUの作例です。ドラッグでアングルを変えられます。GPUを使ったパーティクル表現の迫力を確認できます。

必殺技やオーラのような華やかな3D演出を、WebGPUで表現したサンプルです。

昔のmacOSやiTunesアプリで使われていたカバーフローを、Three.jsのWebGPUレンダラーで再現した作例です。画面下側のスライダーを動かすことで、左右の写真を奥行き方向に傾けながらスライドできます。

3DのJavaScriptライブラリとしてThree.jsを利用しています。詳しくは記事『Three.jsで作る3DのカバーフローUI』で解説しています。

GPUは3Dだけでなく、2Dの演出や計算にも力を発揮します。次のデモはThree.jsのWebGPUレンダラーとTSL（Three.js Shading Language）を使用しています。マウスドラッグやタッチ操作で動きを変化させられます。

画面上の各ピクセルに速度や圧力などの値を持たせ、GPUで並列計算しています。詳しくは記事『Three.js(WebGPU)で実現するStable Fluids - 2Dの流体シミュレーション』をご覧ください。

レンズフレアは、カメラのレンズに光源が直接入ったときに発生する光の現象です。映画やゲームでよく見られる演出で、Three.jsのWebGPUレンダラーでも表現できます。

マウスドラッグで視点を動かすと、光源とカメラの位置関係に応じてレンズフレアの見え方が変化します。詳しくは記事『エフェクト作成入門講座 Three.js編 - レンズフレア表現』で解説しています。

衛星軌道の実装方法を説明した記事『WebGPU・WebGL開発に役立つ三角関数の数式・概念まとめ（Three.js編）』の作例です。タッチやドラッグでアングルを回転できます。

航空路や輸出入のデータビジュアライゼーションなど、地球規模のデータを立体的に見せるときに使えそうなテクニックです。

WebGPU・WebGLは3Dのためだけの機能ではありません。次のデモは、GPUの高速なグラフィック処理を利用して作られた2D物理演算のシミュレーションです。

この作例では、GPUを2D表現に活用できるJSライブラリ「PixiJS」が用いられています。大量の物体を扱う描画負荷の高い場面で、GPUの効果を確認できます。記事『LiquidFunを使った物理演算入門』の作例です。

弊社も開発に協力したゲームでは、戦闘機のゲーム画面をWebGLで実装しました。

WebGPUはChrome 113（2023年5月）・Edge 113（2023年5月）・Firefox 141（2025年7月）・Safari 26.0（2025年9月）以降などで利用できます。

WebGLは2011年頃のブラウザから広く対応しています。WebGL 2.0も現行ブラウザーで問題なく利用できます。

WebGPUやWebGLをそのまま扱うには、レンダリングパイプライン、シェーダー、バッファー、テクスチャーなどの知識が必要です。はなやかな3D表現を作りたい場合は、JavaScriptライブラリ「Three.js」から学ぶのが王道でしょう。

Three.jsは短いコード量で3Dを実現でき、入門者にも適しています。さらに、Three.jsは入門者に適しているだけでなく、第一線の制作現場でも使われています。

これからのウェブグラフィックスでは、WebGPUを利用する場面が増えていくでしょう。

WebGPUもWebGLも、ブラウザーで高度な3D表現や2D演出を実現するための重要な技術です。まずはデモを触り、GPUを使ったウェブ表現の可能性を体験してみてください。

筆者のデモサイト『ClockMaker Labs』でも、多数のWebGPU・WebGLの作例を掲載しています。

※この記事が公開されたのは11年前ですが、先月8月に内容をメンテナンスしています。