このシリーズでは、3Dモデルを11章かけて分解していきます。 第1章は全体の地図を作る回です。3Dモデルが何でできているのか、どんな表現方式があるのか、どの業界がどの方式を使っているのかを一通り押さえます。 細かい仕組みは第3章以降で扱うので、ここでは各用語の位置づけを整理することを優先します。

2Dはピクセル、では3Dは何で表すのか

Webエンジニアにとって、2Dの画像は身近なデータです。PNGやJPEGは画素（ピクセル）を格子状に並べたラスタ形式で、SVGは「ここからここへ線を引く」という命令を並べたベクタ形式です。 同じ丸い図形でも、ラスタなら拡大すると粗くなり、ベクタならいくら拡大しても滑らかなままです。どちらを選ぶかは用途で決まります。

3Dにも同じ構図があります。ピクセルをそのまま3次元に拡張すると、空間を小さな立方体の格子で埋めるボクセルになります。 SVGのパスに近いのは、頂点と面で表面だけを記述するポリゴンメッシュです。 さらに3Dには、2Dではあまり意識しない第3の流儀があります。「空間上の任意の点を渡すと、そこが物体の内側か外側か、表面までどれだけ離れているかを返す関数」で形を表す暗黙的表現です。 CSSのグラデーションが色の配列ではなく計算式で描かれるのと少し似ています。

ここで大事なのは、どの方式も「立体を記録する」という目的は同じで、得意不得意が違うだけだという点です。 ゲームエンジンが扱うのはほぼメッシュ、工業製品の設計データは曲面の数式、スマートフォンのLiDARが出力するのは点の集まり、最近の3D生成AIの内部ではスパースなボクセルに特徴ベクトルを載せた表現が使われています。 「3Dモデル」という一語の裏には、これだけ性質の違うデータが混在しています。

3Dモデルを「形・見た目・動き」の3層で捉える

ゲームやWebで使われる一般的な3Dモデル、たとえばキャラクターや商品のモデルを分解すると、3つの層が重なっています。 形を決めるジオメトリ、表面の質感を決めるマテリアルとテクスチャ、変形や移動を決めるリグとアニメーションです。 そしてこれらを空間に配置し、カメラとライトと一緒にまとめるシーンが全体を包んでいます。

graph TB
  S[シーン<br/>ノード階層・カメラ・ライト] --> G[形<br/>ジオメトリ]
  S --> A[見た目<br/>マテリアル・テクスチャ]
  S --> M[動き<br/>リグ・アニメーション]
  G --> G1[頂点・面・法線・UV]
  A --> A1[PBRパラメータ<br/>画像テクスチャ]
  M --> M1[ボーン・ウェイト<br/>キーフレーム]
  G1 -.UVで対応.-> A1
  M1 -.頂点を変形.-> G1

  style S fill:#3b82f6,stroke:#1d4ed8,color:#fff
  style G fill:#8b5cf6,stroke:#6d28d9,color:#fff
  style A fill:#f97316,stroke:#ea580c,color:#fff
  style M fill:#10b981,stroke:#059669,color:#fff
3Dモデルの3層とシーン。見た目はUVを介して形に貼り付き、動きは形の頂点を変形させる

形（ジオメトリ）

ジオメトリは立体の形そのものです。メッシュの場合、3D座標を持つ頂点と、頂点を結んだ面（GPUが描くのは三角形）で表面を組み立てます。 頂点は座標だけでなく、面の向きを示す法線や、テクスチャ画像のどこを貼るかを示すUV座標といった属性も持ちます。 データベースにたとえると、頂点が行、属性がカラムです。第3章では、この頂点配列とインデックス配列の中身を詳しく見ます。

見た目（マテリアル・テクスチャ）

同じ球でも、金属に見えるかゴムに見えるかはマテリアルで決まります。 現在の主流は物理法則に沿って光の反射を計算するPBR（Physically Based Rendering）で、glTF 2.0は「ベースカラー・金属度（metallic）・粗さ（roughness）」の3つを軸にしたmetallic-roughnessモデルを標準にしています。 これらの値を画素単位で変えたいときに使うのがテクスチャ画像で、ジオメトリ側のUV座標が「この面には画像のこの部分」という対応表になります。 マテリアルをCSSのプロパティ値、それを解釈して色を計算するシェーダをブラウザのレンダリングエンジンにたとえると、役割分担がつかみやすくなります（第4章）。

動き（リグ・アニメーション）

キャラクターを歩かせるには、メッシュの内側に骨格（ボーンの階層＝スケルトン）を入れ、各頂点がどのボーンにどれだけ追従するかをウェイトで指定します。この準備をリギングと呼びます。 glTFでは、1頂点に影響するボーンは1セットあたり4つで記録し（JOINTS_0 と WEIGHTS_0）、それ以上必要なら JOINTS_1 / WEIGHTS_1 とセットを追加します。 表情のように頂点位置そのものを差し替えるモーフターゲット（ブレンドシェイプ）もあります。 時間方向の変化は、特定時刻の値だけを記録して間を補間するキーフレームで表します。CSSの @keyframes とほぼ同じ発想です（第5章）。

シーン（階層・カメラ・ライト）

3つの層を束ねるのがシーンです。シーンはノードの木構造（シーングラフ）で、子ノードは親の位置・回転・スケールを受け継ぎます。腕のノードを回せば、その子である手のノードも一緒に回ります。 カメラとライトもノードとしてこの木にぶら下がります。 座標系の約束もシーンの一部で、glTFは右手系・+Yが上・+Zが前方・単位はメートルと決めています。ツールごとにこの約束が違うことが、「書き出したモデルが寝ている」「100倍の大きさになる」といった初学者のトラブルの原因になります（第7章・第8章）。

この4つの区分は、実際のファイル形式にもほぼそのまま現れます。Web配信の標準であるglTF 2.0のJSONを、要素を絞って書くと次のようになります。

{
  "asset": { "version": "2.0" },
  "scene": 0,
  "scenes": [ { "nodes": [0, 1] } ],
  "nodes": [
    { "name": "Character", "mesh": 0, "skin": 0, "children": [2] },
    { "name": "Camera", "camera": 0, "translation": [0, 1.6, 3] },
    { "name": "Hips" }
  ],
  "meshes": [ {
    "primitives": [ {
      "attributes": {
        "POSITION": 0, "NORMAL": 1, "TEXCOORD_0": 2,
        "JOINTS_0": 3, "WEIGHTS_0": 4
      },
      "indices": 5,
      "material": 0
    } ]
  } ],
  "materials": [ {
    "pbrMetallicRoughness": {
      "baseColorTexture": { "index": 0 },
      "metallicFactor": 0.0,
      "roughnessFactor": 0.8
    }
  } ],
  "skins": [ { "joints": [2] } ],
  "animations": [ { "channels": [], "samplers": [] } ],
  "cameras": [ { "type": "perspective",
    "perspective": { "yfov": 0.8, "znear": 0.1 } } ]
}

scenes と nodes がシーン、meshes の頂点属性がジオメトリ、materials が見た目、skins と animations が動きに当たります。 数値の実体（頂点座標の配列など）は accessors から別のバイナリバッファを参照する仕組みで、ここでは省略しています。 ただし、すべての3Dモデルが3層を備えるわけではありません。3Dプリント用のSTLは三角形の羅列だけで色もアニメーションも持ちませんし、点群には面すらありません。 3層の枠組みは「何が欠けているか」を見分ける物差しとしても使えます。

表現方式の地図 — 明示的・暗黙的・ハイブリッド

ここからはジオメトリ層を掘り下げます。立体の形を記録する方法は、大きく3系統に分かれます。 表面や点を直接データとして持つ明示的表現、空間の点を問い合わせると値が返る関数として持つ暗黙的表現、そして両者を組み合わせたハイブリッド表現です。

graph TB
  R[3Dの表現方式] --> E[明示的<br/>表面や点を直接持つ]
  R --> I[暗黙的<br/>関数で問い合わせる]
  R --> H[ハイブリッド<br/>空間構造と学習特徴]
  E --> E1[ポリゴンメッシュ<br/>点群]
  E --> E2[ボクセル<br/>NURBS・B-rep]
  I --> I1[SDF<br/>occupancy]
  I --> I2[NeRF]
  H --> H1[hash grid<br/>triplane]
  H --> H2[3D Gaussian<br/>スパースボクセル潜在]

  style E fill:#8b5cf6,stroke:#6d28d9,color:#fff
  style I fill:#f97316,stroke:#ea580c,color:#fff
  style H fill:#10b981,stroke:#059669,color:#fff
3D表現の3系統。明示的表現は描画と編集に、暗黙的表現は学習と形状の柔軟さに強い

明示的表現 — 表面や点を直接持つ

ポリゴンメッシュ

頂点と面で表面を表す、3DCGの事実上の標準です。GPUのラスタライズ処理と直結しているため描画が速く、Blenderなどの制作ツール（DCCツール）も充実しています。 弱点は、穴の数や面のつながり方（トポロジー）が離散的なことです。形を少しずつ変えながら最適化する機械学習とは相性が悪く、「穴を1つ増やす」といった変化を勾配で表現できません。

点群

位置（と色や法線）を持つ点の集合です。面の情報がないので、どこが表面なのかはデータからは決まりません。 LiDARやフォトグラメトリの生データとして出てくることが多く、保存形式としてはヘッダで任意の属性を宣言できるPLYがよく使われます。 2020年10月に発表されたiPhone 12 ProはiPhoneで初めてLiDARスキャナを搭載し（Apple製品としては同年3月のiPad Proが先）、点群を手元で取得できる環境が一気に広がりました。

ボクセル

空間を立方体の格子に区切り、各セルに「埋まっているか」や色を記録します。トポロジーの制約がなく、穴や分岐を自由に表せます。 ただし密な格子のままだと、メモリが解像度の3乗で増えます。1辺の解像度を2倍にすると8倍、10倍にすると1000倍です。 そのため実用では、八分木（オクツリー）やスパースボクセルのように、表面付近のセルだけを持つ工夫が定石になっています。

NURBS・B-rep

CADの世界で使われる表現です。NURBSは制御点と重みで滑らかな曲面を数式として定義し、B-rep（境界表現）はその曲面を面・稜線・頂点の位相関係と組み合わせて立体を記述します。 寸法が厳密で、穴の直径や面取りの半径といった設計意図を保てるのが強みです。 一方、GPUは三角形しか描けないため、画面に表示するときは曲面を三角形に分割するテッセレーションが必要になります。 CG（映像）の系譜がポリゴンとサブディビジョンへ、CAD（製造）の系譜がNURBS/B-repへと分かれたことが、後のファイル形式の断絶にもつながっています。

暗黙的表現 — 関数で問い合わせる

SDFとoccupancy

SDF（符号付き距離場）は、空間の任意の点について「表面までの距離」を、内側なら負・外側なら正の符号付きで返す関数です。値がちょうど0になる面が形状の表面です。occupancy（占有率）は距離ではなく「内側である確率」を返します。 どちらもトポロジーが自由で、2つの形の和や差を取るブーリアン演算が容易です。 その代わり、そのままではGPUで描けません。Marching Cubesなどでメッシュを抽出するか、レイを少しずつ進めて表面を探すスフィアトレーシングが必要です。

NeRF

2020年に発表されたNeRF（Neural Radiance Fields）は、位置（x, y, z）と視線方向を入力すると、その点の密度と「その方向から見た色」を返すニューラルネットワーク（MLP）でシーンを表します。 カメラから飛ばしたレイに沿って多数の点を問い合わせ、半透明の霧を重ねるように積分して画素の色を作ります。この計算が微分可能なので、カメラ位置付きの写真だけから学習できます。 形状だけでなく、見る方向で変わる反射まで再現できるのが特徴です。 代償は速度で、原論文ではNVIDIA V100 1枚で学習に約1〜2日、1フレームの描画に約30秒かかっています。シーンがネットワークの重みに埋め込まれるため、「この椅子だけ消す」といった編集も困難です。

ハイブリッド表現 — 空間構造に学習特徴を置く

NeRF以降の研究は、「MLPに全部覚えさせる」やり方から「空間に特徴を置き、MLPは薄くする」方向へ進みました。速度と学習しやすさを両立させるための折衷です。

  • hash grid（Instant-NGP、2022年）: 多重解像度のハッシュテーブルに学習可能な特徴ベクトルを置き、小さなMLPで読み出します。NeRF並みの品質に、論文の主張では数秒から数分で到達します。
  • triplane: 直交する3枚の平面に特徴を置き、点を3平面に投影して特徴を合算します。必要なメモリは密なボクセルのN³ではなくN²×3で済みます。1枚の画像から3Dを推論するLRM（2023年）の出力表現として使われました。
  • 3D Gaussian Splatting（3DGS、SIGGRAPH 2023）: シーンを大量の楕円体状のガウス分布の集合で表します。1個のガウシアンは位置・スケール・回転・不透明度・視点で変わる色の係数を持ちます。各粒を画面に投影して塗り重ねる（splat）ラスタライズ型の描画で、1080pで30fps以上のリアルタイム表示を実現しました。KhronosはglTF拡張 KHR_gaussian_splatting を2026年2月にリリース候補として発表し、同年9月にはGitHubのレジストリ上で批准済みと表示されています（第9章）。
  • スパースボクセル潜在: MicrosoftのTRELLIS（2024年12月）は、表面付近のスパースなボクセルに局所的な潜在ベクトルを置く表現（SLAT）を使い、同じ潜在から3DGS・Radiance Field・メッシュのどれにでもデコードできます。後継のTRELLIS.2（2025年12月、4Bパラメータ、MITライセンス）はO-Voxelと呼ぶスパースボクセルで、PBRマテリアル付きのメッシュを直接出力します（第10章）。

3DGSを「ハイブリッド」に入れるのは、個々のガウシアンは明示的なデータ（一粒ずつ選んで消せる）でありながら、全体は勾配降下で最適化される学習結果だからです。 分類は文献によって揺れますが、本シリーズでは「明示的な空間構造の上で学習する表現」をハイブリッドとまとめます。

表現方式の得意不得意を比べる

各方式を、メモリ・編集性・描画速度・トポロジーの柔軟性・学習のしやすさで並べたのが次の表です。 評価は相対的・定性的なもので、実装やデータ規模によって変わる点に注意してください。

表現メモリ編集性描画速度トポロジー柔軟性学習・微分主な用途
ポリゴンメッシュ小〜中高（DCCツール完備）最速（ラスタライズ）低（離散）難ゲーム・映像・Web
点群中中速（表面なし）—中スキャンの生データ
ボクセル（密）大（N³）中中高易医療・シミュレーション
NURBS・B-rep小高（寸法が厳密）テッセレーション必須中難CAD・製造
SDF・occupancy小（関数）中（ブーリアン容易）遅（抽出・トレースが必要）高易形状の再構成・生成
NeRF（MLP）小（重みのみ）低遅高易新視点合成
hash grid中低中〜速高易高速なNeRF
triplane中（N²×3）低中高易一発推論型の3D生成
3D Gaussian大中（粒単位で操作可）速（リアルタイム）高（表面なし）易実写キャプチャ・デジタルツイン
スパースボクセル潜在中中（局所編集可）デコード先次第高易3D生成AI

表を縦に見ると、はっきりしたトレードオフがあります。メッシュとNURBSは描画と編集に強い一方、学習には向きません。 NeRFやSDFは学習しやすくトポロジーも自由ですが、描画は遅く、編集もしにくい表現です。 ハイブリッド表現はその中間を狙っており、3DGSは描画速度を、TRELLIS系はさまざまな出力形式への変換しやすさを優先した設計です。

用途ごとにどの表現が使われているか

表現方式の選択は、最終的には業界の要件で決まります。代表的な用途ごとに、主に使われる表現とファイル形式を整理しました。

用途主な表現主なファイル形式決め手
ゲームポリゴンメッシュ＋PBR＋リグFBX、glTFリアルタイム描画の速さ、ドローコールとポリゴン数の予算
映画・映像メッシュ（サブディビジョン）USD、FBX最終画質と、多部署が並行作業できるシーン合成
EC・AR軽量メッシュ＋PBRglTF/GLB、USDZファイルサイズとブラウザ・スマホでの表示互換性
CAD・製造NURBS・B-repSTEPなどCAD形式寸法の厳密さと設計意図の保持
3Dプリント閉じた三角形メッシュSTL、3MF内外がはっきりした水密（ウォータータイト）な形状
地図・スキャン点群、メッシュ、3D GaussianPLY、CityGML、3D Tiles現実の計測データをそのまま扱えること
3D生成AIスパースボクセル潜在・triplane → メッシュGLB学習しやすさと、既存ツールで使える出力

ECの例を挙げると、Shopifyは商品の3DモデルとしてGLBとUSDZを受け付けています。USDZはiPhoneのAR Quick Lookで直接表示できる形式で、Web向けのGLBと並行して用意する構成が一般的です。 地図の分野では、国土交通省のPLATEAUがCityGMLで3D都市モデルを整備し、3D Tilesなどに変換して配布しています。2025年度末時点で329都市が整備済みです。 建物はLOD1（箱）からLOD2（屋根形状）へと段階的に詳しくなり、同じ「都市の3Dモデル」でも詳細度の違うデータが並存しています。

製造業では、CADのB-repデータを可視化やシミュレーションのためにメッシュやUSDへ変換して流す構図がよく見られます。 正本は厳密な数式のまま持ち、見せる段階で三角形に落とすという分業です。

それでもメッシュが「共通語」であり続ける理由

NeRFや3DGSが話題になっても、生成AIの多くは最終的にPBRマテリアル付きのメッシュを出力します。TRELLIS.2が直接メッシュを出すのも、Hunyuan3Dが形状を作ってから後でテクスチャを塗る2段構成なのも、同じ理由です。 ゲームエンジン、DCCツール、glTFやUSDといったファイル形式、ブラウザの描画ライブラリまで、既存の道具がすべてメッシュを前提に作られているからです。 物理演算の当たり判定やリギングもメッシュの上で行います。

この「作るときの表現」と「使うときの表現」が違うという構図は、シリーズを通して何度も出てきます。 編集しやすい制作用データと、GPUにそのまま送れる配信用データの対立は、ファイル形式（USDとglTF）、データ構造（half-edgeとインデックス配列）、マテリアル（OpenPBRとglTFのPBR）の各所で繰り返されます。 Webで例えるなら、ソースコードとビルド成果物の関係です。どちらが正しいかを考えるより、どの段階のデータを見ているのかを意識すると、3Dの話題は格段に整理しやすくなります。

シリーズの読み方 — 全11章のロードマップ

本シリーズは、本章で示した3層に沿って基礎を固め、ファイル形式とWeb実装で実務につなぎ、最後に実写キャプチャと生成AIという最前線へ進む構成です。

graph TB
  subgraph G1 ["土台"]
    C1[1 全体像] --> C2[2 歴史]
  end
  subgraph G2 ["3層の解剖"]
    C3[3 メッシュ] --> C4[4 マテリアル] --> C5[5 リグ] --> C6[6 レンダリング]
  end
  subgraph G3 ["実務"]
    C7[7 ファイル形式] --> C8[8 Web実践]
  end
  subgraph G4 ["最前線"]
    C9[9 NeRF・3DGS] --> C10[10 3D生成AI] --> C11[11 産業と未来]
  end
  G1 --> G2 --> G3 --> G4

  style C1 fill:#3b82f6,stroke:#1d4ed8,color:#fff
  style C3 fill:#8b5cf6,stroke:#6d28d9,color:#fff
  style C4 fill:#f97316,stroke:#ea580c,color:#fff
  style C5 fill:#10b981,stroke:#059669,color:#fff
  style C8 fill:#14b8a6,stroke:#0d9488,color:#fff
  style C10 fill:#ec4899,stroke:#db2777,color:#fff
全11章の流れ。第3〜5章が形・見た目・動きの3層に対応する
  • 土台（第1〜2章）: 本章の地図と、Sketchpad（1963年）から生成AIまでの60年史で全体像をつかみます。
  • 3層の解剖（第3〜6章）: メッシュ、マテリアルとPBR、リギングとアニメーション、そしてそれらを画面に描くレンダリングの仕組みを順に見ます。
  • 実務（第7〜8章）: OBJ・FBX・glTF・USDの設計思想を比べ、Three.jsでglbを表示・最適化する実践に進みます。座標系や色空間でつまずく典型例もここで扱います。
  • 最前線（第9〜11章）: フォトグラメトリ・NeRF・3DGSによる実写の3D化、TRELLIS.2やHunyuan3Dなどの3D生成AI、2026年の産業動向と学習ロードマップで締めくくります。

Webエンジニアで「とにかくブラウザで3Dを表示したい」なら、第3章・第4章を読んだあと第7章・第8章に飛んでも構いません。 生成AIに関心があるなら、第9章でNeRFと3DGSの仕組みを押さえてから第10章に進むと、本章で触れたtriplaneやスパースボクセル潜在の意味がはっきりします。

次の第2章では、こうした表現方式がどんな順番で生まれてきたのかを歴史から追います。 1963年のSketchpad、ユタ大学のUtah teapot、映画とGPUがポリゴンを標準に押し上げた流れを知ると、本章の地図がなぜこの形になっているのかが見えてきます。

理解度チェック

問題 0 / 50%
Q1

密なボクセル格子で1辺の解像度を2倍にすると、必要なメモリはおよそ ___ 倍になる（数字で答えてください）。