WebGLとは？仕組み・できること・始め方を初心者向けに（三角形を描くコードつき）WebGLとは？仕組み・できること・始め方を初心者向けに（三角形を描くコードつき）

「サイトを開いたら、商品をぐるっと回して見られた。あれ、どうやって作っているんだろう」

そう思って調べると、WebGLという言葉にたどり着きます。ところが解説を開くと「OpenGL ESベースの低レベルAPI」と書いてあって、そこで閉じてしまう。

ここでは、WebGLが何をしているのかを、実際に動かしたコードと一緒に説明していく。

説明だけだと分かった気になれないので、三角形を1つ描くだけのページを自分で書いて、ブラウザで表示させてみました。仕組み、Three.jsとの違い、対応ブラウザ、SEOで気をつけること、後継のWebGPUの現状まで順に書いています。

WebGLとは、ブラウザからGPUに絵を描かせる仕組み

MDNのWebGL APIのページでは、WebGLを「互換性があるウェブブラウザーにおいて、プラグインを使用せずにインタラクティブな 3D や 2D のグラフィックをレンダリングするための JavaScript API」と説明しています。

名前はWeb Graphics Libraryの略。

仕様を管理しているのは、グラフィックスの標準規格を作っている団体のKhronos Groupです。Khronosの説明によると、WebGL 1.0はOpenGL ES 2.0、WebGL 2.0はOpenGL ES 3.0の機能を、HTMLのcanvas要素を通してJavaScriptから使えるようにしたもの。OpenGL ESはスマホやゲーム機で使われてきた3D描画の規格なので、その力をブラウザに持ち込んだ、と考えると分かりやすいと思います。

以前、ブラウザで派手な3Dやゲームを動かすには、Flashのような追加のソフト（プラグイン）が必要でした。WebGLはそれをブラウザの標準機能にしたものです。

WebGLの基本の仕組み。GPU、シェーダー、canvasの関係

出てくる言葉は多い。でも、覚えるのはこの3つだけ。

JavaScriptは段取り役です。

描きたい形の点の座標や色をGPUに渡し、どのシェーダーで描くかを指定して、「描いて」と命令する。実際に1つ1つの点の位置を決めたり、画面の1ドットずつに色を塗ったりするのは、GPUの上で動くシェーダーの仕事です。

シェーダーには2種類あります。点の位置を決める頂点シェーダーと、画面の1ドットごとの色を決めるフラグメントシェーダー。この2つが必ずセットになる。

実際に、WebGLで三角形を1つ描いてみた

約50行。三角形を1つ描くのに書いたコードの長さです。

ライブラリは使っていない。HTMLファイル1つに、JavaScriptとシェーダーを直接書いています。頂点が3つ、それぞれに色を付けて、間の色はGPUに補ってもらう形です。

<canvas id="c" width="800" height="450"></canvas>
<script>
const canvas = document.getElementById('c');
const gl = canvas.getContext('webgl');

// 頂点シェーダー：点の位置を決める
const vs = `
attribute vec2 pos;
attribute vec3 color;
varying vec3 vColor;
void main() {
  vColor = color;
  gl_Position = vec4(pos, 0.0, 1.0);
}`;
// フラグメントシェーダー：色を決める
const fs = `
precision mediump float;
varying vec3 vColor;
void main() {
  gl_FragColor = vec4(vColor, 1.0);
}`;

function compile(type, src) {
  const s = gl.createShader(type);
  gl.shaderSource(s, src);
  gl.compileShader(s);
  return s;
}
const prog = gl.createProgram();
gl.attachShader(prog, compile(gl.VERTEX_SHADER, vs));
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, fs));
gl.linkProgram(prog);
gl.useProgram(prog);

// 3つの点（x, y, r, g, b）
const data = new Float32Array([
   0.0,  0.8,  0.75, 0.15, 0.35,
  -0.8, -0.7,  0.95, 0.55, 0.65,
   0.8, -0.7,  0.35, 0.10, 0.25,
]);
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

const pos = gl.getAttribLocation(prog, 'pos');
const color = gl.getAttribLocation(prog, 'color');
gl.enableVertexAttribArray(pos);
gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 20, 0);
gl.enableVertexAttribArray(color);
gl.vertexAttribPointer(color, 3, gl.FLOAT, false, 20, 8);

gl.clearColor(0.97, 0.96, 0.95, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>

2026年9月28日に、このファイルを手元のヘッドレスChromium（バージョン145）で開いた画面が下の画像です。

JavaScriptとシェーダーを合わせて50行ほどのうち、実際に「描いて」と命令しているのは最後の1行だけ。

書いてみて分かるのは、WebGLは「三角形を描け」という命令すら持っていないことです。点の座標と色を数字の並びでGPUに送り、その並びの何番目から何個が位置で、何番目からが色かを vertexAttribPointer で1つずつ教える。シェーダーを文字列で渡して、その場でGPU向けに変換（コンパイル）させる。3Dの箱を回すには、ここに奥行き、カメラ、光の計算が加わります。

WebGLが「低レベル」と呼ばれるのは、この細かさのせい。

同じページで、WebGL 2（webgl2）と、後で触れるWebGPU（navigator.gpu）が使えるかも確かめました。手元の環境では、3つとも使える状態でした。

WebGLとThree.jsの違い。初心者はThree.jsから

Three.js。WebGLを調べると、ほぼ必ず出てくる名前です。

Three.jsは、WebGLを裏で使いながら、面倒な部分を肩代わりしてくれるJavaScriptのライブラリです。上の三角形で書いたシェーダーやデータの渡し方を、Three.jsでは用意された「材質」や「形」の部品を選ぶだけで済ませられる。カメラや光も部品として置けます。

初めて3Dを触るなら、Three.jsの公式マニュアルから入るのが近道です。慣れてから上のようなWebGLのコードを読むと、Three.jsが裏で何をしているのかがつながります。

WebGLでできること

WebGLが使われているのは、動きや立体で見せたい場面です。

• 家具や靴などの商品を、画面の中で回したり色を切り替えたりする3D表示
• 地図や統計を、立体や動きで見せるデータの可視化
• ダウンロードせずにURLを開くだけで遊べるブラウザゲーム
• スクロールに合わせて背景が動くような、企業サイトやキャンペーンの演出

ゲーム制作ソフトのUnityには、作ったゲームをWebGL向けに書き出してブラウザで動かす機能もあります。

逆に、文章が中心のブログや、会社案内のような一般的なサイトには、たいてい必要ありません。

WebGLの対応ブラウザと、動かないときの備え

MDNでは、現代のすべてのブラウザがWebGLに対応しているとしています。パソコンのChrome、Edge、Firefox、Safari、スマホのSafariやChromeでも動きます。

ただ、MDNには注意書きもある。ブラウザだけでなく、端末のGPUもWebGLの機能に対応している必要がある、という点です。古い端末や、会社の設定でGPUの機能を止めているパソコンでは、描画できないこともある。

上のコードでは、canvas.getContext('webgl') が空で返ってきたら、WebGLが使えないと判断できます。そのときに代わりの画像や文章を見せる処理を入れておくと安心です。

自分のブラウザで動くかどうかは、get.webgl.orgを開くと確かめられます。

WebGLとSEO。大事な文章はcanvasの外に置く

canvasの中身は、文字ではなく絵。

検索エンジンは、この絵の中に描かれた文字を、ページの文章としては読みません。商品名や説明、価格といった伝えたい情報は、canvasの外に、ふつうのHTMLの文章として置いてください。WebGLは、その文章に添える見せ方と考えるのが安全です。

もう1つは重さ。3Dのデータや画像が大きいと、ページの表示が遅くなります。表示速度は検索の評価にも、広告の費用にも関わる。広告のLPで表示速度を縮めた記録は広告のLPが遅いと広告費が上がるに、サイトの作り方と表示速度の関係はNext.jsで作る強みに書きました。

WebGLの次はWebGPU。ただし、まだ全部のブラウザでは動かない

後継の名前はWebGPUです。

MDNの「WebGPU API」では、WebGPUをWebGLの後継と位置づけ、今のGPUとの相性がよく、描画以外の汎用的な計算にも使えて、より高度なGPUの機能を扱える、と説明しています。

一方で、2026年9月28日時点のMDNの表示は「Limited availability」。広く使われているブラウザの一部で動かないため、どのブラウザでも使える目安の「Baseline」には入っていません。HTTPSのページでしか使えない、という条件もあります。

いまから学ぶなら、WebGL（とThree.js）で問題ありません。

WebGLの始め方

つまずきにくい順番は、こうです。

1. HTMLとJavaScriptの基本を触る
2. Three.jsの公式マニュアルで、箱を1つ表示して回す
3. 色、光、カメラの位置を変えて、どこを変えると何が変わるかを確かめる
4. この記事の三角形のコードを写して動かし、点の座標や色の数字を変えてみる
5. シェーダーの書き方を学んで、Three.jsの中で自分のシェーダーを使ってみる

4番目は遠回りに見えますが、Three.jsが裏で何をしているかが一度つながると、表示がおかしいときに原因を探せるようになります。