描画技術の年表

レンダリング史は単に画質が上がった歴史ではない。可視判定・ライティング・計算主体・API設計が別々に発展し、現在のGPUパイプラインに合流した。

Z-buffer：1画素の前後関係を決める

Z-buffer（Depth Buffer）は、画素（厳密には描画サンプル）ごとに現在最も手前にある面の深度値を記録する。次の面が手前なら、色と深度を更新する。

GPUは三角形をどう画面にするか

現在の一般的なラスタライズ描画は、3Dの形状を画素候補（フラグメント）へ変換し、深度と色を確定する処理の連続である。

OpenGL → WebGL → WebGPUで変わったこと

「描画できる技術」から「描画命令を組み立てる技術」へ。低レベルAPIの進化は、GPUプログラミングの自由度と責任範囲を広げた。

ブラウザでの技術階層

WebGLはOpenGLそのものではなく、OpenGL ES系の描画モデルをWeb用に規格化したもの。[S5,S6]　WebGPUはW3Cで標準化が進行中。[S12]

Three.jsが引き受けた仕事

WebGLだけでは「三角形を描く」低レベル命令が中心。Three.jsはその手前に3Dアプリケーションを記述する語彙を提供した。[S7]

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  60, width / height, 0.1, 100
);
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial({color: 0x55aaff})
);
scene.add(cube);
renderer.render(scene, camera);

レンダリング時の概念的な流れ

Three.jsに残るZ-bufferの課題

Three.jsの深度関連設定

const material = new THREE.MeshStandardMaterial({ color: 0x6699cc });
material.depthTest  = true;  // 保存済み深度との比較
material.depthWrite = true;  // 通過した深度を書き込む

const glass = new THREE.MeshStandardMaterial({
  color: 0x77ccff, transparent: true, opacity: 0.4,
  depthWrite: false         // 一般的な透明表現での選択肢
});

深度の次に発展した「見た目」の技術

Z-bufferはどれが見えるかを扱う。照明・影・質感・ポスト処理はどう見えるかを扱う。Three.jsは後者もライブラリとして統合してきた。

WebGPU時代のThree.js

Three.jsはWebGL専用ライブラリではない。現在のWebGPURendererはWebGPUを優先し、WebGL 2バックエンドへフォールバックできる。[S11]

注意すべき移行ポイント

ShaderMaterial、RawShaderMaterial、onBeforeCompile()を使った既存WebGLコードはWebGPURendererにそのまま移せない場合がある。公式はNode Material / TSLへの移行を案内する。現行レンダラーはなお実験的と記載されている。[S11]

結局、Three.jsとは何なのか

5つの理解チェック

1. Z-bufferは現在も使う？ → はい。不透明オブジェクトの可視判定の基本。
2. Three.js自身がすべての画素をCPUで計算する？ → いいえ。多くの描画計算はGPUへ依頼。
3. Three.jsなら透明物の順序問題は完全に解決？ → いいえ。オブジェクト整列では解けない例がある。
4. WebGPUはWebGLよりいつでも速い？ → いいえ。負荷や実装による。Compute連携は大きな強み。
5. レイマーチングもThree.jsが必須？ → いいえ。直接WebGPUでも書ける。シーン管理が必要なら併用。

用途別の位置づけ

参考文献・一次資料

論文・標準仕様・Three.js公式マニュアルを優先。リンクは閲覧用で、引用番号は本文に対応。

作成：2026年11月4日。CG史の節目は成立時点と標準公開年が異なることがあるため、表では主な年を採用。図は本資料のために独自作成。