そもそもWebGLって何？ブラウザだけで3Dが動く仕組みとthree.js・WebGPUとの違い

この記事は、Webサイトを作るALcuesto（エールクエスト）が、「WebGL（ウェブジーエル）ってそもそも何？」を、規格を作っているKhronos Group（クロノス・グループ）と、MDN、three.jsの公式ページにもとづいて整理したものです。カツプロのトップページも、チアセブンアーチの3Dアニマルランドも、WebGLで描いています。その実物も例に出します。

先に結論です。

• WebGLは、追加のソフトを入れずに、ブラウザだけで3Dや2Dの絵を描くための仕組みです。ページの中の <canvas> という枠に、JavaScriptから命令を出して描きます
• 速く描けるのは、端末のGPUを使うからです。そのかわり、WebGLそのものは「点・線・三角形」を描くことしかしません。だから実際の制作では、three.jsのようなライブラリを通して使うのがふつうです
• 後継のWebGPUが出ていますが、WebGLがすぐに使えなくなるという話は公式にはありません。MDNの表示では、WebGLは「広く使える」、WebGPUは「使える環境が限られる」です（2026年9月20日に確認）

用語を先に整理しておきます。

• WebGL：Web Graphics Library の略です。ブラウザに最初から入っている、絵を描くためのAPI（JavaScriptから呼べる命令のあつまり）です
• GPU：画面の色を決める計算を、大量に同時にこなす部品です。くわしくは「そもそもGPUって何？わかると「スマホで軽いサイト」が作れるようになる話」に書きました
• canvas（キャンバス）：HTMLの <canvas> 要素です。ページの中に置く、絵を描くための四角い枠です
• OpenGL ES：スマホなどの機器で3Dを描くための規格です。WebGLはこれをもとに作られています
• three.js：WebGLをかんたんに使えるようにするJavaScriptのライブラリです
• WebGPU：WebGLの後継として作られた、新しいAPIです

WebGLとは：公式の説明

WebGLの規格を作っているKhronos Groupは、WebGLをこう説明しています（Khronos Group「WebGL」）。

WebGL is a low-level 3D graphics API that is based on OpenGL ES that brings plugin-free 3D to the web and is implemented right into the browser.

私の訳では「WebGLは、OpenGL ESをもとにした低レベルの3DグラフィックスAPIで、プラグインなしの3DをWebにもたらし、ブラウザにそのまま組み込まれている」です。

MDNの説明は次のとおりです（MDN「WebGL: 2D and 3D graphics for the web」）。

WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.

私の訳では「WebGLは、対応しているブラウザの中で、プラグインを使わずに、高速で操作できる3Dと2Dのグラフィックスを描くためのJavaScript API」です。

2つの説明から、押さえることは3つです。

• 追加のソフトが要らない。どちらの説明にも「プラグインなし」と書かれています。見る人は、ページを開くだけです
• canvasの中に描く。MDNの同じページは、WebGLを「HTMLの <canvas> 要素で使える」APIだと説明しています。ページ全体が3Dになるわけではなく、canvasという枠の中だけがWebGLの担当です。まわりの見出しやボタンは、ふつうのHTMLとCSSのままです
• 端末のGPUを使う。MDNの同じページは、WebGLは「ユーザーの端末が持つハードウェアのグラフィックス高速化を利用できる」と説明しています。3Dを毎秒何十回も描き直せるのは、このためです

名前に3Dと付いていませんが、MDNの説明にあるとおり、2Dの絵にも使えます。

どこで使われているか：自社の2つの例

1つめは、カツプロのトップページ（pro.alcuesto.jp）です。海の生き物が泳いでいる背景の部分が1つのcanvasで、three.jsを通してWebGLで描いています。上のメニューや右の説明の箱は、ふつうのHTMLです。

2つめは、チアセブンアーチの3Dアニマルランド（cheer7arch.com/animal-land/）です。森の中をヒグマが歩き回る場面を、同じくthree.jsとWebGLで描いています。

どちらも、2026年9月20日に手元のパソコンのChromeで開いて撮った実画面です。このとき、ブラウザにWebGLのバージョンを答えさせると「WebGL 2.0 (OpenGL ES 3.0 Chromium)」と返ってきました（2026年9月20日、自社のパソコンで実行した結果）。

自分のブラウザでWebGLが動くかどうかは、Khronos Groupの確認用ページ（get.webgl.org）を開くと分かります。動いていれば、回る立方体と「Your browser supports WebGL」という文が出ます。

WebGLが描くのは「点・線・三角形」だけ

ここが、WebGLでいちばん誤解されやすいところです。three.jsの公式マニュアルは、こう書いています（three.js manual「Fundamentals」）。

WebGL is a very low-level system that only draws points, lines, and triangles. To do anything useful with WebGL generally requires quite a bit of code and that is where three.js comes in.

私の訳では「WebGLは、点・線・三角形だけを描く、とても低レベルな仕組みです。WebGLで役に立つことをしようとすると、たいていかなりの量のコードが要ります。そこでthree.jsの出番になります」です。

つまり、WebGLには「クマを置く」「光を当てる」「影を付ける」といった命令はありません。3Dのモデルは細かい三角形のあつまりで、その三角形をどこに、何色で描くかを、1つずつGPUに伝えるのがWebGLの仕事です。

確かめた：同じ三角形を、WebGLだけで書くと38行、three.jsなら9行

「かなりの量のコード」がどのくらいなのか、青い三角形を1つ描くだけのページを2通りで書いて比べました。WebGLを直接書いた方はJavaScriptが38行、three.jsを使った方は9行でした（空行とコメントを除いた行数。2026年9月20日に自社で書いて、Chromeで同じ絵が出ることを確かめた結果）。

WebGLを直接書いた方は、次のとおりです。

const canvas = document.getElementById('c');
const gl = canvas.getContext('webgl');

// 頂点シェーダー：3つの点をどこに置くか
const vsSource = `
attribute vec2 position;
void main() {
  gl_Position = vec4(position, 0.0, 1.0);
}`;

// フラグメントシェーダー：点の色を何色にするか
const fsSource = `
precision mediump float;
void main() {
  gl_FragColor = vec4(0.10, 0.45, 0.91, 1.0);
}`;

function compile(type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    throw new Error(gl.getShaderInfoLog(shader));
  }
  return shader;
}

const program = gl.createProgram();
gl.attachShader(program, compile(gl.VERTEX_SHADER, vsSource));
gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fsSource));
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  throw new Error(gl.getProgramInfoLog(program));
}
gl.useProgram(program);

// 三角形の3つの角の座標をGPUへ送る
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0.7, -0.7, -0.6, 0.7, -0.6]), gl.STATIC_DRAW);

const positionLocation = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

gl.clearColor(0.97, 0.97, 0.98, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);

途中に2つ出てくる「シェーダー」は、GPUの上で動く小さなプログラムです。JavaScriptではなく、GLSLという別の言語で書きます。Khronos Groupも、WebGLを「GLSLを使う、シェーダーを土台にしたAPI」と説明しています（Khronos Group「WebGL」）。三角形1つでも、シェーダーを2つ書いて、組み立てて、座標をGPUへ送る、という手順を全部自分で書くことになります。

three.jsで書いた方は、次のとおりです。

import * as THREE from 'three';

const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('c') });
renderer.setClearColor(0xf7f7fa);

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.Float32BufferAttribute([0, 0.7, 0, -0.7, -0.6, 0, 0.7, -0.6, 0], 3));
const material = new THREE.MeshBasicMaterial({ color: 0x1a73e8 });

const scene = new THREE.Scene();
scene.add(new THREE.Mesh(geometry, material));
renderer.render(scene, new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1));

「形」「色」「場面」「カメラ」という、人が考えやすい言葉で書けます。シェーダーはthree.jsが中で用意します。

ひとつ、書いていて実際に引っかかったことも残しておきます。WebGLを直接書いた方で、最初は変数の名前を location にしていました。これはブラウザが最初から持っている window.location と名前がぶつかり、エラーになって、画面は真っ白のままでした。名前を positionLocation に変えたら描けました。WebGLは、どこか1か所でも間違えると、何も出ないことが多いです。

three.jsとの関係：WebGLの上に乗っている

three.jsとWebGLは、よく同じものとして語られますが、別のものです。three.jsの公式マニュアルも、three.jsは「WebGLとよく混同される」と書いたうえで、three.jsは場面・光・影・素材・テクスチャ・3Dの計算といった、WebGLを直接使うなら自分で書くことになるものを引き受ける、と説明しています（three.js manual「Fundamentals」）。

名前	何であるか	制作者が書くもの
WebGL	ブラウザに入っている、GPUで絵を描くためのAPI。規格はKhronos Groupが作っている	シェーダー、座標をGPUへ送る手順、描く命令
three.js	WebGLをかんたんに使うためのJavaScriptライブラリ。オープンソースで開発されている	形、素材、光、カメラ、場面

カツプロのトップも3Dアニマルランドも、three.jsの WebGLRenderer（WebGLで描く係）を使っています。「WebGLのサイトを作る」と言うとき、実際に書いているのは、ほとんどの場合three.jsのようなライブラリのコードです。

WebGL 1 と WebGL 2

WebGLには1と2があります。

版	もとにした規格（Khronos Groupの説明）	MDNの表示（2026年9月20日に確認）
WebGL 1.0	OpenGL ES 2.0	広く使える。2015年7月から主要なブラウザで使える
WebGL 2.0	OpenGL ES 3.0	広く使える。2021年9月から主要なブラウザで使える

「もとにした規格」は Khronos Group「WebGL」、「MDNの表示」は MDN「WebGLRenderingContext」 と MDN「WebGL2RenderingContext」 の冒頭の表示です。

WebGL 1.0の最終版の仕様は、2011年3月3日に公開されました（Khronos Group の発表「Khronos Releases Final WebGL 1.0 Specification」）。

JavaScriptからは、WebGL 1.0は canvas.getContext('webgl')、WebGL 2.0は canvas.getContext('webgl2') で取り出します。three.jsのようなライブラリを使うなら、ここはライブラリが引き受けるので、1と2のどちらを使うかを制作者が気にする場面は、ほとんどありません。

WebGPUが出てきた。WebGLはなくなるのか

WebGPUは、WebGLの後継です。MDNはこう書いています（MDN「WebGPU API」）。

WebGPU is the successor to WebGL, providing better compatibility with modern GPUs, support for general-purpose GPU computations, faster operations, and access to more advanced GPU features.

私の訳では「WebGPUはWebGLの後継で、今のGPUとの相性がよく、絵を描く以外の計算にもGPUを使えて、動作が速く、より進んだGPUの機能を使える」です。

MDNの同じページは、WebGLの今後についてもこう書いています。

There are no more updates planned to OpenGL (and therefore WebGL), so it won't get any of these new features.

私の訳では「OpenGLには（したがってWebGLにも）これ以上の更新は予定されていないので、こうした新しい機能がWebGLに入ることはない」です。

ここだけ読むと「WebGLはもう終わり」に見えます。ただ、公式ページを並べて読むと、少し違う姿が見えます。

• MDNが書いているのは「新しい機能が増えない」で、「使えなくなる」ではありません。同じMDNで、WebGLは1も2も「広く使える（Baseline Widely available）」の表示です（上の表と同じページ、2026年9月20日に確認）
• WebGPUの方は、まだ使える環境が限られます。MDNのWebGPUのページの冒頭は「Limited availability」の表示で、「もっとも広く使われているブラウザの一部で動かないため、Baselineではない」と書かれています（MDN「WebGPU API」、2026年9月20日に確認）
• WebGLの仕様書そのものは、今も手入れされています。Khronos GroupのWebGL仕様の編集者草案には、2026年6月30日の日付が入っています（WebGL Specification（Editor's Draft）、2026年9月20日に確認）
• three.jsは、WebGPUが使えない環境ではWebGL 2で描く作りにしています。three.jsの新しい WebGPURenderer について、公式マニュアルは「端末やブラウザがWebGPUに対応していなければ、自動でWebGL 2に切り替えられる」と説明しています（three.js manual「WebGPURenderer」）

ここからは私の考えです。いまWebサイトに3Dを入れるなら、three.jsとWebGLの組み合わせで作って問題ありません。WebGPUへの切り替えは、three.jsのようなライブラリの側で進んでいます。制作者が今から「WebGLはやめてWebGPUを覚え直す」必要はなく、three.jsで書いておけば、描く係を後から差し替える道が残ります。

Web制作で気をつけること

ここも、自分で3Dのページを作ってきた経験からの考えです。

• いちばん先に決めるのは、スマホでどこまで見せるかです。WebGLはGPUを使うので、重さはそのまま見る人の端末の負担になります。カツプロのトップをスマホで開けるようにした経過は「3Dサイトに最適⁉ 「転送は軽いのにGPUでは重い」を解決するKTX2の話」に書きました
• WebGLが動かない環境も考えておきます。MDNは、WebGLはどの今のブラウザにも入っているが、「ユーザーの端末にも、その機能に対応したハードウェアが要る」と書いています（MDN「WebGL: 2D and 3D graphics for the web」）。大事な文章やボタンは、canvasの中ではなく、ふつうのHTMLに置きます。WebGLが動かない環境を手元で作って確かめる方法は「three.jsの3Dサイトでインデックス登録が通らない原因と直し方」に書きました
• canvasの中の文字は、検索エンジンにも読み上げソフトにも伝わりません。canvasの中身は、三角形を塗った結果の「絵」だからです。3Dアニマルランドでは、動物ごとの説明を、3Dとは別のHTMLのページとしても用意しています（ヒグマのページ）
• WebGLを直接書くのは、学ぶときだけで十分です。上の三角形のとおり、1か所の間違いで画面が真っ白になります。仕事で作るならthree.jsのようなライブラリを使い、時間は見た目と軽さに回します

3Dを入れる前のチェックリスト

確かめること	どうなっていればよいか
3Dにする理由	写真や動画では伝わらないことがある（回して見る、中を歩く、など）
スマホでの動き	実機で開いて、しばらく触っても重くならない・熱くならない
最初の表示までの通信量	3Dモデルと画像を圧縮してあり、最初に読むものを絞ってある
WebGLが動かないとき	真っ白にならず、文章とボタンだけでも用が足りる
大事な文章の置き場所	canvasの中ではなく、HTMLに書いてある
使うライブラリ	three.jsなど、WebGPUへの切り替えを引き受けてくれるものを通している

（この表は私の考えです。公式の決まりではありません）

まとめ

• WebGLは、追加のソフトなしで、ブラウザのcanvasの中にGPUで3Dや2Dを描くためのAPIで、規格はKhronos Groupが作っている。
• WebGLそのものは点・線・三角形しか描かないので、実際の制作ではthree.jsのようなライブラリを通して使う。同じ三角形でも、直接書くと38行、three.jsなら9行だった。
• 後継のWebGPUが出ているが、MDNの表示ではWebGLは「広く使える」、WebGPUは「使える環境が限られる」。three.jsで作っておけば、切り替えはライブラリの側で進められると私は考えている。

この記事で使った出どころ

すべて2026年9月20日に開いて確認しました。

公式

• WebGL: 3D Graphics for the Web（Khronos Group）
• Khronos Releases Final WebGL 1.0 Specification（Khronos Group・2011年3月3日）
• WebGL Specification（Khronos Group・Editor's Draft 2026年6月30日）／WebGL 2.0 Specification（同）
• get.webgl.org（Khronos Group・WebGLが動くかを確かめるページ）
• WebGL: 2D and 3D graphics for the web（MDN）
• WebGLRenderingContext（MDN）／WebGL2RenderingContext（MDN）
• WebGPU API（MDN）
• Fundamentals（three.js manual）／WebGPURenderer（three.js manual）

自社で確かめたこと

• カツプロのトップページ（pro.alcuesto.jp）と3Dアニマルランド（cheer7arch.com/animal-land/）の実画面と、そのときブラウザが返したWebGLのバージョン（2026年9月20日、自社のパソコンのChromeで確認）
• 青い三角形を1つ描くページを、WebGLの直接書きとthree.js（バージョン0.169.0）の2通りで書いたときのJavaScriptの行数（空行とコメントを除く。2026年9月20日、自社で作成してChromeで表示を確認）