WebGLとは？仕組み・できること・対応ブラウザとUnityビルドまで解説

WebGLは、プラグインを入れずにブラウザ上でGPUを使い2D・3Dグラフィックスを描画するためのJavaScript APIです。ゲーム、3D製品ビューア、地図やデータの可視化まで、Webページの<canvas>に直接描く用途で広く使われています。この記事では、WebGLの仕組みとできること、対応ブラウザと有効化の確認、最小コードでの動かし方、後継として広がるWebGPUとの違い、そしてUnityでWebGLビルドを作る手順とつまずきやすいエラーまでを、一次情報と実例に沿って解説します。

まとめ：WebGLの要点

• 正体：<canvas>上でGPUを制御するJavaScript API。WebGL 1.0はOpenGL ES 2.0、WebGL 2.0はOpenGL ES 3.0がベースで、プラグイン不要で動く。
• できること：3Dゲーム・製品コンフィギュレータ・地図/科学データの可視化・インタラクティブな演出。描画はGPU上のシェーダー（GLSL）が担う。
• 対応状況：主要ブラウザはWebGL 2.0まで標準対応。無効時はブラウザ設定やハードウェアアクセラレーションを確認する。
• 後継WebGPU：2026年に全主要ブラウザで利用可能になった新APIで、低レベルでコンピュートシェーダーも扱えるが、WebGLは互換性の高いベースライン/フォールバックとして併存する。
• Unityで使う：UnityはWebプラットフォーム（WebGL）へビルドするとWebAssembly＋JavaScriptを出力する。既定のグラフィックスAPIはWebGL 2で、WebGPUはUnity 6.1以降でexperimental。

以下、定義と仕組みから順に、実際に動かす・ビルドするところまで具体的に見ていきます。

WebGLとは：ブラウザでGPUを使う描画API

定義とOpenGL ESとの関係

WebGL（Web Graphics Library）は、非営利団体Khronos Groupが策定する、ブラウザ内でGPUアクセラレーションによるグラフィックスを描くためのJavaScript APIです。組み込み向けのグラフィックスAPIであるOpenGL ESをWebに移植したもので、WebGL 1.0はOpenGL ES 2.0、2017年公開のWebGL 2.0はOpenGL ES 3.0に対応します。かつてのFlashやUnity Web Playerのようなプラグインを必要とせず、標準のブラウザ機能だけで動く点が最大の特徴です。

仕組み：canvas・コンテキスト・シェーダーの役割

描画先はHTMLの<canvas>要素です。JavaScriptからcanvas.getContext('webgl2')で描画コンテキストを取得し、頂点データをGPUに送り、頂点シェーダー（頂点の座標変換）とフラグメントシェーダー（ピクセルの色計算）という2種類のGPUプログラムで画面を塗ります。シェーダーはGLSL（OpenGL Shading Language）で記述し、CPUではなくGPU上で並列実行されるため、大量のポリゴンやピクセルを高速に処理できます。

WebGLでできること

用途は3Dに限りません。実際の使われ方は次のように広い範囲に及びます。

• 3Dゲーム・ブラウザゲーム：ダウンロード不要で遊べるWebゲーム。UnityのWebGLビルドもここに含まれる。
• 製品コンフィギュレータ・3Dビューア：家具や車をブラウザ上で回転・色替えして確認するEC向け表現。
• データ可視化・地図：数万点規模の散布図や地理データを滑らかに描くダッシュボード。
• インタラクティブな演出：スクロール連動の背景アニメーションやパーティクル表現。

いずれも「GPUで多数の要素を毎フレーム描き直す」処理であり、DOMやCSSアニメーションでは重くなる表現をWebGLが引き受けます。

WebGLの対応ブラウザと有効化・動作確認

対応ブラウザとWebGL 2.0の状況

Chrome・Edge・Firefox・SafariといったモダンブラウザはいずれもWebGL 2.0まで標準対応しており、PC・スマートフォンの大半でそのまま動きます。古い端末やドライバの都合でWebGL 2が使えない環境ではWebGL 1へフォールバックする実装が一般的です。自分の環境で有効かは、WebGL動作確認用の定番ページget.webgl.orgを開くと回転する立方体が表示されるかどうかで確認できます。

WebGLが無効・表示されないときの確認手順

「WebGLが表示されない」場合、多くはブラウザ側の設定かGPUドライバが原因です。次の順で確認します。

1. ハードウェアアクセラレーションの有効化：Chromeなら設定のシステム項目で「使用可能な場合はハードウェアアクセラレーションを使用する」をオンにして再起動する。
2. GPU状態の確認：Chromeのアドレスバーにchrome://gpuと入力し、WebGL/WebGL2の項目が「Hardware accelerated」になっているかを見る。
3. ドライバ更新：GPUドライバが古いとブロックリスト入りして無効化されることがあるため、最新へ更新する。

企業端末ではポリシーでアクセラレーションが無効化されている場合もあるため、その際は管理者に確認します。

WebGLを最小コードで動かす

コンテキスト取得から画面クリアまで

まずは最小構成として、canvasからWebGL 2コンテキストを取得し、背景色で塗りつぶすところまでを示します。取得に失敗した場合の分岐も入れておくと、非対応環境の切り分けに使えます。

<canvas id="gl" width="640" height="360"></canvas>
<script>
const canvas = document.getElementById('gl');
const gl = canvas.getContext('webgl2');
if (!gl) {
  alert('この環境ではWebGL 2を利用できません');
} else {
  gl.clearColor(0.1, 0.1, 0.15, 1.0); // 背景色（RGBA）
  gl.clear(gl.COLOR_BUFFER_BIT);
}
</script>

実際に図形を描くには、この後にGLSLで書いた頂点・フラグメントシェーダーをコンパイルし、頂点バッファを用意してgl.drawArraysを呼びます。三角形1枚を出すだけでも数十行になるため、素のWebGLは学習用と割り切り、実務ではライブラリを使うのが一般的です。

素のWebGLとライブラリの使い分け

行列計算やシェーダー管理を自前で書くのは負担が大きいため、実案件ではラッパーライブラリを使うのが定番です。目的別に選び分けます。

2D中心の演出やUIなら、WebGLをバックエンドに使うWebGLベースの高速2D描画エンジンPixiJSが扱いやすく、3Dシーンを組むならThree.jsが第一候補になります。「まず動くものを短時間で」という要件では、素のWebGLより数段少ないコードで済みます。

WebGLとWebGPUの違い：後継APIとの関係

WebGLの発展形として登場したのがWebGPUです。GPUをより低レベルに扱い、描画だけでなく汎用計算（コンピュートシェーダー）も実行できる新しいAPIで、シェーダー言語にはWGSLを使います。長らくChromeの一部に限られていましたが、2026年にはFirefox・Safari 26を含む全主要ブラウザで利用可能になり、機械学習の推論やパーティクル計算をブラウザ内でGPU実行する用途が現実的になりました。

ただしWebGPUが登場してもWebGLがすぐ不要になるわけではありません。互換性の広さと実績からWebGLは当面のベースラインであり、WebGPU非対応環境へのフォールバック先として併存します。新規に高度なGPU計算まで踏み込むならWebGPU、幅広い端末で確実に動かすことを優先するならWebGL、という住み分けが実態です。RustからWebGPUを扱う実装に踏み込みたい場合は、RustでWebGPUを扱うwgpuの仕組みと最小サンプルも参考になります。

UnityでのWebGLビルドとデプロイ

Unity WebGLの仕組みとグラフィックスAPI

Unityは、Webプラットフォーム（WebGL）向けにビルドすると、C#で書いたゲームロジックをWebAssemblyへ変換し、描画をWebGL経由でブラウザに出力します。かつてのUnity Web Playerプラグインは廃止済みで、現在のUnity WebGLはプラグイン不要でブラウザ上で動作します。既定のグラフィックスAPIはWebGL 2で、WebGPUはUnity 6.1（6000.1）以降でexperimentalとして選択できますが、対応ブラウザが限られ本番利用は推奨されていません。両方を候補に並べておけば、WebGPU非対応の環境では自動的にWebGLへフォールバックします。

WebGLビルドの手順

基本的な流れは次のとおりです。エディタ言語やUnity 6での変更点はUnityの日本語化とUnity 6の新機能に整理しています。

1. プラットフォーム追加：Unity HubでWebGL Build Supportモジュールをインストールする。
2. ターゲット切り替え：Build Settings（Unity 6ではBuild Profiles）でWebを選び、Switch Platformを実行する。
3. Player Settingsの調整：圧縮形式（Brotli/Gzip）、メモリサイズ、Graphics APIの並び（WebGL2を先頭に）を設定する。
4. Build：出力先フォルダを指定してビルドすると、HTML・JavaScript・WebAssembly・データファイルが生成される。

出力物はローカルのファイルを直接開くと動かないことが多く、後述のとおりWebサーバー経由で配信する必要があります。

デプロイとホスティングの注意点

ビルド結果は静的ファイルなので、Netlifyやサーバー上の任意のディレクトリに置くだけで公開できます。ただしBrotli/Gzip圧縮を使う場合は、サーバーがContent-Encodingヘッダーを正しく返す設定が必要です。設定が合っていないと「圧縮ファイルを解凍できない」旨の警告が出て起動に失敗します。また、WebAssemblyのメモリ使用量が大きいため、モバイルではメモリ上限に注意します。ブラウザ側で完結せずクラウドGPUでレンダリングして映像だけ配信する選択肢もあり、その場合はクラウドレンダリングを行うUnity Render Streamingが候補になります。

よくあるビルドエラーと対処

Unity WebGLで頻出するエラーと対処を整理します。

• 「An exception has occurred, but exception handling has been disabled in this build.」：例外処理を無効化したビルドで例外が発生した状態。原因を追うには Player Settings の Publishing Settings で Enable Exceptions を「Explicitly Thrown Exceptions Only」等に変更してビルドし、スタックトレースを確認する。本番では容量・速度のため無効のままにするのが一般的。
• 真っ黒画面/起動しない：ローカルファイル直開き（file://）が原因のことが多い。ローカルサーバー経由で開く。
• メモリ不足でクラッシュ：Player Settingsのメモリ設定やテクスチャ圧縮を見直し、アセットを軽量化する。

エラーメッセージはブラウザのデベロッパーツール（Console）に詳細が出るため、まずはそこを確認するのが近道です。

WebGLの制限と代替手段

パフォーマンスとモバイルの制約

WebGLはGPUを使うとはいえ、ネイティブアプリほど自由ではありません。ドローコール数やテクスチャ容量が増えるとモバイルではフレームレートが落ちやすく、バッテリー消費も大きくなります。実運用では、アセットの軽量化、ドローコールのまとめ（バッチング）、不要な再描画の抑制で描画負荷を下げる。

セキュリティ・互換性と代替の考え方

WebGLはブラウザのサンドボックス内で動くため、GPUドライバの脆弱性を突かれないよう各ブラウザがブロックリストで危険な組み合わせを無効化することがあります。結果として一部環境で描画されないケースがあり、非対応時の代替表示（静止画やCSS表現へのフォールバック）を用意しておくと安全です。より高度なGPU計算が必要ならWebGPU、端末に依存せず重い3Dを配信したいならサーバー側でレンダリングするストリーミング方式、という代替も検討します。AR/VRをWebでやりたいならWebGL/WebGPUの上に立つWebベースのXR体験を実現するWebXRという選択肢もあります。

よくある質問

WebGLを有効にするにはどうすればよいですか？

多くのブラウザは初期状態で有効です。表示されない場合は、ブラウザ設定でハードウェアアクセラレーションをオンにし、chrome://gpuでWebGLが「Hardware accelerated」か確認、GPUドライバを最新に更新します。get.webgl.orgで動作確認できます。

WebGLとWebGPUはどちらを使うべきですか？

幅広い端末で確実に動かすことを優先するならWebGL、コンピュートシェーダーなど最新GPU機能や汎用計算まで使いたいならWebGPUです。2026年は全主要ブラウザがWebGPUに対応しましたが、WebGLはフォールバック先として当面併存します。

Unity Web PlayerとUnity WebGLは違いますか？

別物です。旧Unity Web Playerはブラウザプラグインを必要とし現在は廃止されています。Unity WebGLはプラグイン不要で、WebAssemblyとWebGLでブラウザ上に直接出力する現行の方式です。

Unity WebGLで日本語入力はできますか？

可能ですが制約があります。WebGLビルドではOSのIMEをそのまま使えないケースがあり、TextMeshProと日本語フォント（フォールバック設定）の用意や、HTML側の入力欄を重ねる実装で対応するのが一般的です。

WebGLは素で書くべきですか、ライブラリを使うべきですか？

学習目的なら素のWebGLで仕組みを理解する価値がありますが、実務では3DならThree.jsやBabylon.js、2DならPixiJSを使うのが定石です。行列計算やシェーダー管理を任せられ、開発量を大きく減らせます。

関連記事

• PixiJSとは何か？WebGLベースの高速2D描画エンジンの概要と活用メリットについて徹底解説
• wgpuとは？RustでWebGPUを扱う仕組みと最小サンプル・主要API
• Unityの日本語化とUnity 6の新機能｜エディタ言語設定の手順と主な変更点
• Unity Render Streamingとは｜クラウドレンダリングの仕組みと導入手順
• WebXRとは何か？WebベースのXR体験の基本を理解する