プログラミングの独学サイトです。

WebGL & Three.js

WebGLとThree.jsの違いとは？GLSL・WebGPUとの関係を初心者向けに解説

WebGLとThree.jsの違いを初心者向けに解説します。APIとライブラリの関係、Three.jsが省略してくれる処理、GLSL・WebGL 1/2・WebGPUとの違い、目的別の選び方と学習順序を整理します。

更新 2026.07.12公開 2023.11.09 16分で読めます
この記事の目次
  1. WebGLとは
  2. Three.jsとは
  3. WebGLとThree.jsの関係
  4. Three.jsが省略してくれる処理
  5. WebGLとGLSLの違い
  6. 頂点シェーダー
  7. フラグメントシェーダー
  8. 2つのシェーダーだけ覚えれば十分ではない
  9. WebGL 1とWebGL 2の違い
  10. 現在のThree.jsはWebGL 2を使う
  11. WebGPUとThree.jsの関係
  12. WebGLはなぜリアルタイム3Dを描画できるのか
  13. WebGLとThree.jsはどちらを選ぶべきか
  14. Three.jsから始めるのがおすすめな人
  15. WebGLを直接学ぶ価値がある人
  16. ブラウザ対応は実行時に確認する
  17. Three.jsを学ぶおすすめの順番
  18. よくある質問
  19. Three.jsはWebGLそのものですか？
  20. Three.jsを使う前にWebGLを学ぶ必要がありますか？
  21. WebGLとGLSLは同じものですか？
  22. Three.jsでGLSLを書けますか？
  23. WebGPUがあるならWebGLは不要ですか？
  24. WebGLは2Dにも使えますか？
  25. まとめ
  26. 関連記事
  27. 参考リンク

WebGLとThree.jsの違いを一言でいうと、WebGLはブラウザからGPUを使って描画するためのJavaScript API、Three.jsはWebGLなどを使った3D制作を扱いやすくするJavaScriptライブラリです。

初心者がWebサイトへ3Dを表示したいなら、まずThree.jsから始めるのがおすすめです。WebGLを直接使うと、シェーダーの準備、頂点データ、バッファ、行列計算、描画命令などを自分で管理する必要があります。

比較 WebGL Three.js
種類 ブラウザのJavaScript API JavaScriptライブラリ
主な役割 GPUへ描画処理を指示する シーン、カメラ、物体、材質などを管理する
コード量 多い 比較的少ない
数学・描画知識 早い段階から必要 基本表示から始め、必要に応じて学べる
シェーダー 自分で用意して組み立てる 組み込みMaterialを使える。独自GLSLも書ける
向いている人 描画の仕組みや低レイヤを学びたい人 3Dサイト、演出、ビジュアライゼーションを作りたい人

この記事では、WebGL、Three.js、GLSL、WebGPUの関係を整理し、目的に合わせてどこから学べばよいかを説明します。

WebGLとは

WebGL（Web Graphics Library）は、HTMLのcanvasへ高性能な2D・3Dグラフィックスを描画するためのJavaScript APIです。

JavaScriptからWebGLの命令を呼び出し、GPUで実行するシェーダープログラムや頂点データを準備して描画します。

最初にWebGL 2のコンテキストを取得するコードは次のようになります。

<canvas id="webgl-canvas" width="800" height="450"></canvas>
const canvas = document.querySelector("#webgl-canvas");
const gl = canvas.getContext("webgl2");

if (!gl) {
  console.error("この環境ではWebGL 2を初期化できませんでした");
}

この時点ではまだ物体は表示されません。WebGLを直接使って三角形を描くだけでも、次の準備が必要です。

  1. 頂点シェーダーとフラグメントシェーダーを書く
  2. シェーダーをコンパイルする
  3. シェーダーをプログラムとしてリンクする
  4. 頂点データをTypedArrayとして用意する
  5. バッファを作成してGPUへデータを送る
  6. attributeやuniformの場所を取得する
  7. viewportやクリア色を設定する
  8. 描画命令を実行する

WebGLは「3Dモデルを簡単に作るライブラリ」ではありません。ブラウザとGPUの間で描画処理を組み立てる、比較的低レベルなAPIです。

Three.jsとは

Three.jsは、ブラウザで3Dグラフィックスを作るためのJavaScriptライブラリです。

WebGLの細かな命令を直接並べる代わりに、次のような3D制作で使う概念をオブジェクトとして扱えます。

  • Scene：物体、ライト、カメラなどを管理する3D空間
  • Camera：どの位置・画角からシーンを見るかを決める
  • Geometry：物体の形状や頂点データ
  • Material：色、質感、光への反応、シェーダー
  • Mesh：GeometryとMaterialを組み合わせた描画対象
  • Light：光源
  • Renderer：シーンをcanvasへ描画する

回転する立方体の基本部分は、次のように書けます。

import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ antialias: true });

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x4f7cff });
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);
camera.position.z = 3;

renderer.setAnimationLoop((time) => {
  cube.rotation.x = time / 2000;
  cube.rotation.y = time / 1000;
  renderer.render(scene, camera);
});

インストール、canvasへの追加、リサイズ対応を含む実装手順は、Three.js入門：最初の立方体を表示する方法で扱います。

WebGLとThree.jsの関係

Three.jsとWebGLは競合する技術ではありません。Three.jsは、WebGLを直接操作する複雑さをまとめて扱いやすくする層です。

Three.jsを使う場合
JavaScriptのアプリ
  ↓
Three.js（Scene、Camera、Material、Loaderなど）
  ↓
WebGL 2
  ↓
GPU

WebGLを直接使う場合
JavaScriptのアプリ
  ↓
WebGL 1 / WebGL 2
  ↓
GPU

Three.jsを使っていても、最終的な描画の多くはWebGLRendererを通じてWebGL 2へ渡されます。

Three.jsが省略してくれる処理

Three.jsは、単にWebGLの関数名を短くするだけではありません。3D制作で繰り返し必要になる処理を、再利用できる仕組みとして提供します。

WebGLを直接使う場合 Three.jsで使う主な仕組み
canvasと描画コンテキストを初期化する WebGLRenderer
頂点バッファと属性を管理する BufferGeometry、BufferAttribute
シェーダーをコンパイル・リンクする 組み込みMaterial、ShaderMaterial
モデル・ビュー・投影行列を計算する Object3D、Camera、Scene graph
テクスチャを読み込みGPUへ送る TextureLoaderなどのLoader
複数の物体や親子関係を管理する Scene、Group、Object3D
ライトと材質の計算を実装する Lightと各種Material
3Dモデル形式を解析する GLTFLoaderなどのaddons

Three.jsを使うと、GPUや描画パイプラインの知識が不要になるわけではありません。ただし、最初からすべてを自作せず、3D表現を動かしながら必要な部分を学べます。

WebGLとGLSLの違い

WebGLとGLSLは同じものではありません。

  • WebGL：JavaScriptから描画状態、バッファ、テクスチャ、シェーダー、描画命令を管理するAPI
  • GLSL ES：GPU上で頂点やフラグメントを処理するシェーダー言語

WebGLプログラムは、JavaScript側の制御コードと、GPU側のシェーダーコードを組み合わせて動きます。

頂点シェーダー

頂点シェーダーは、各頂点について最終的なクリップ座標などを計算します。Three.jsのShaderMaterialでは、Geometryのpositionや各種行列を使ってgl_Positionを求めます。

詳しくは、頂点シェーダーとattributeの仕組みを参考にしてください。

フラグメントシェーダー

フラグメントシェーダーは、ラスタライズ後に生成されるフラグメントについて、出力する色などを計算します。「すべての画面ピクセルに必ず1回だけ実行される」とは限らず、隠面処理、マルチサンプル、discardなども関係します。

詳しくは、フラグメントシェーダーの仕組みで解説しています。

2つのシェーダーだけ覚えれば十分ではない

基本の描画で頂点シェーダーとフラグメントシェーダーを使うことは重要です。しかし、WebGLを直接扱うには次の知識も必要です。

  • attribute、uniform、頂点バッファ
  • 座標系と行列
  • テクスチャとサンプラー
  • 深度、ブレンド、カリング
  • フレームバッファ
  • 描画ループとリソース解放

Three.jsのShaderMaterialを使うと、Three.jsのシーン管理や行列計算を利用しながら、頂点・フラグメントシェーダーの表現だけを独自実装できます。比較例はThree.jsのMaterialとShaderMaterialを比較する記事へ分けています。

WebGL 1とWebGL 2の違い

WebGLにはWebGL 1.0とWebGL 2.0があります。

比較 WebGL 1 WebGL 2
コンテキスト名 webgl webgl2
基礎となる仕様 OpenGL ES 2.0を基礎とする OpenGL ES 3.0相当の機能を追加
シェーダー言語 GLSL ES 1.00 GLSL ES 3.00を利用可能。1.00も制限付きで受け付ける
代表的な追加機能 拡張機能で補うものが多い VAO、instancing、MRT、3D textureなどを標準化

WebGL 2はWebGL 1のAPIを多く引き継ぎますが、動作が完全に同じとは限りません。WebGL 1の拡張機能からWebGL 2の標準機能へ移行する場合や、GLSL ES 1.00から3.00へシェーダーを移す場合は差分確認が必要です。

現在のThree.jsはWebGL 2を使う

現在のThree.jsのWebGLRendererはWebGL 2でシーンを描画します。Three.js r163以降、WebGL 1はサポートされていません。

そのため、古い資料にある次のような方針は、現在のThree.jsへそのまま当てはまりません。

  • WebGL 1だけの端末までThree.jsで対応する
  • WebGL 1用rendererへ自動で切り替える
  • 古いブラウザ名と最低バージョンだけを見て対応可否を判断する

現行Three.jsを採用する場合は、WebGL 2を初期化できる環境を前提にし、失敗時の代替表示を用意します。

WebGPUとThree.jsの関係

WebGPUは、WebGLより新しいGPU APIです。Three.jsには、WebGPUを利用できるWebGPURendererがあります。

WebGPURendererは、WebGPUを利用できる環境ではWebGPUバックエンドを使い、対応していない環境ではWebGL 2バックエンドへフォールバックできます。また、TSL（Three.js Shading Language）によるノードベースのMaterialを中心に設計されています。

ただし、現在のThree.js公式ガイドではWebGPURendererはまだ実験的な位置づけです。既存のShaderMaterial、RawShaderMaterial、onBeforeCompile()、従来のEffectComposerをそのまま移せない場合があります。

目的 選択肢
現在のWebGL 2向けサイトを安定して作りたい WebGLRenderer
既存のShaderMaterial資産を使いたい WebGLRendererを基本にする
WebGPUやTSLを新規に試したい WebGPURendererを検証する
WebGPUとWebGL 2の両バックエンドを見据える WebGPURendererの対応機能と制約を確認する

WebGPUが登場したからといって、WebGLやWebGLRendererを直ちに使わなくなるわけではありません。純粋なWebGL 2用途ではWebGLRendererが引き続き保守され、推奨される選択肢です。

WebGLはなぜリアルタイム3Dを描画できるのか

WebGLでは、JavaScript側でシーンの状態、頂点データ、テクスチャ、描画命令などを準備し、シェーダーなどの大量の並列計算をGPUへ任せます。

CPUとGPUは単純に「直列」と「並列」で完全に分けられるものではありません。初心者向けには、次の役割分担として考えると理解しやすくなります。

処理 主に担当する側
JavaScriptの実行、入力、シーン更新、描画命令の組み立て CPU側
多数の頂点やフラグメントに対する同種の計算 GPU側
最終画像をcanvasへ出力するための描画パイプライン CPUとGPUが連携

データを毎フレーム大量にCPUからGPUへ送り直すと、GPUが高速でも遅くなることがあります。Three.jsを使う場合でも、オブジェクト数、draw call、テクスチャサイズ、ピクセル比などの設計は重要です。

WebGLとThree.jsはどちらを選ぶべきか

Three.jsから始めるのがおすすめな人

次の目的なら、Three.jsから始めるのがおすすめです。

  • Webサイトへ3Dモデルを表示したい
  • スクロールやマウス操作と3Dを連動させたい
  • 商品ビューア、ポートフォリオ、データ可視化を作りたい
  • カメラ、ライト、影、Materialを使いたい
  • glTF形式の3Dモデルを読み込みたい

最初からシェーダーや行列をすべて理解しなくても、Scene、Camera、Renderer、Meshの関係から学べます。

WebGLを直接学ぶ価値がある人

次の目的では、WebGLを直接触る価値があります。

  • GPU描画パイプラインの仕組みを理解したい
  • シェーダー、バッファ、attribute、uniformを基礎から学びたい
  • 独自レンダラーや描画エンジンを作りたい
  • ライブラリが生成する処理をデバッグしたい
  • Three.jsのパフォーマンス問題を低レイヤから調べたい

実務では「Three.jsかWebGLか」を完全に二者択一にする必要はありません。Three.jsで全体を構築し、独自表現が必要なMaterialだけGLSLで書く方法も一般的です。

ブラウザ対応は実行時に確認する

WebGLは現代の主要ブラウザで広く利用できます。ただし、同じブラウザでもGPU、ドライバ、OS、端末設定、リモート環境などによりコンテキスト作成に失敗することがあります。

そのため、「Chromeはバージョン何以上」という固定一覧だけで対応可否を決めず、実行時に確認します。

function supportsWebGL2() {
  const canvas = document.createElement("canvas");
  return Boolean(canvas.getContext("webgl2"));
}

if (!supportsWebGL2()) {
  document.querySelector(".three-area").hidden = true;
  document.querySelector(".three-fallback").hidden = false;
}

代替表示には、静止画像、動画、通常のHTML/CSS、機能説明などを用意できます。3Dが表示できなくても、ページの主要情報や操作まで失われない設計にします。

WebGLコンテキストは、GPUリセットなどで一時的に失われることもあります。重要なアプリケーションではwebglcontextlostとwebglcontextrestoredも考慮します。

Three.jsを学ぶおすすめの順番

初心者は、次の順番で進めると概念と実装を分けて理解できます。

  1. この記事でWebGLとThree.jsの役割を区別する
  2. Three.js入門で立方体を表示する
  3. GeometryとMaterialを学ぶ
  4. カメラ、ライト、テクスチャ、3Dモデル読み込みへ進む
  5. ShaderMaterialの比較例でGLSLを試す
  6. 頂点シェーダー、フラグメントシェーダー、uniform、attributeを個別に学ぶ
  7. 必要になった段階でWebGL APIを直接使う

まずThree.jsで結果を表示し、その結果がどのようにWebGLとGPUへ渡されるかを後から掘り下げる方法なら、学習途中でも成果を確認できます。

よくある質問

Three.jsはWebGLそのものですか？

いいえ。WebGLはブラウザが提供するAPIで、Three.jsはその上で3D制作を扱いやすくするJavaScriptライブラリです。Three.jsのWebGLRendererはWebGL 2を使って描画します。

Three.jsを使う前にWebGLを学ぶ必要がありますか？

最初の3D表示には必須ではありません。Scene、Camera、Renderer、Geometry、Material、Meshから始められます。独自シェーダー、複雑な表現、パフォーマンス調整へ進むとWebGLやGLSLの知識が役立ちます。

WebGLとGLSLは同じものですか？

違います。WebGLはJavaScriptから描画処理を制御するAPI、GLSL ESはGPUで動くシェーダーを書く言語です。WebGL側でGLSLコードをコンパイル・リンクして利用します。

Three.jsでGLSLを書けますか？

はい。WebGLRendererではShaderMaterialやRawShaderMaterialを使って独自シェーダーを書けます。Three.jsが用意する行列やGeometryを利用しながら、頂点や色の計算を変更できます。

WebGPUがあるならWebGLは不要ですか？

現時点では不要になっていません。WebGLは広く利用され、Three.jsのWebGLRendererも保守されています。WebGPU・TSLを使いたい新規開発ではWebGPURendererを検証し、対応機能や既存コードとの違いを確認します。

WebGLは2Dにも使えますか？

はい。WebGLは2D・3Dの両方を描画できます。大量のスプライト、画像エフェクト、データ可視化など、2D表現でもGPUを利用できます。

まとめ

WebGLとThree.jsの違いは、APIとライブラリの違いです。

  • WebGLは、JavaScriptからGPU描画を制御するブラウザAPI
  • Three.jsは、WebGLなどを使う3D制作を扱いやすくするライブラリ
  • GLSL ESは、WebGLから利用するGPU上のシェーダー言語
  • 現在のThree.js WebGLRendererはWebGL 2を使い、WebGL 1はサポートしない
  • WebGPURendererはWebGPUとWebGL 2バックエンドを扱える次世代レンダラー

3Dサイトや表現を作りたい初心者はThree.jsから始め、独自シェーダーや描画の仕組みを深く理解したくなった段階でWebGLとGLSLへ進むのがおすすめです。

関連記事

参考リンク

RELATED

あわせて読みたい記事