第4章: 見た目を決める — マテリアル・テクスチャ・PBR

形の次は「見た目」

第3章では、頂点・法線・UVからなるポリゴンメッシュの中身を分解しました。 ただ、メッシュだけでは「形」しか決まりません。同じ球でも、金属の玉、ゴムボール、陶器、木の球ではまったく違って見えます。 この違いを決めるのが、本章で扱うマテリアル・テクスチャ・シェーダです。

本章では、まずこの3つの関係を整理し、テクスチャマップの種類とglTFでのチャンネル割り当てを確認します。 そのあと、LambertからPBR（Physically Based Rendering、物理ベースレンダリング）に至る反射モデルの歴史をたどり、glTF 2.0仕様の付録Bに載っている式を文章と表で読み解きます。 最後に、ライトがないと真っ黒になる理由、sRGBとリニア色空間、トーンマッピング、そしてMaterialX/OpenPBRによる共通化の動きを扱います。

マテリアル・シェーダ・テクスチャの関係

3つの用語はよく混同されますが、役割ははっきり分かれています。

• マテリアル: 表面が光をどう返すかを決めるパラメータとテクスチャの組です。「ベースカラーは赤、ラフネスは0.4、金属ではない」といった宣言的なデータです。
• シェーダ: マテリアルの値を受け取り、画素の色を計算するGPU上のプログラムです。頂点シェーダが座標を変換し、フラグメントシェーダが色を計算します。
• テクスチャ: マテリアルのパラメータを表面の場所ごとに変えるための画像です。メッシュのUV座標で、画像のどこを面のどこに貼るかが決まります。

Webエンジニア向けにたとえると、マテリアルはCSSのプロパティ値、シェーダはそれを解釈して描くブラウザのレンダリングエンジンに当たります。 テクスチャは、プロパティ値を1つの定数ではなく「画素ごとの値の表」で与える仕組みです。 glTFは、このマテリアルを宣言的に表現することで、どのプラットフォームでも一貫した描画になることを狙っています。

graph LR
  T1[ベースカラー画像] --> M[マテリアル]
  T2[ORM画像] --> M
  T3[ノーマルマップ] --> M
  P[係数 factor] --> M
  UV[メッシュのUV] --> S
  M --> S[フラグメント<br/>シェーダ]
  L[ライト・環境] --> S
  S --> PX[画素の色]

  style M fill:#8b5cf6,stroke:#6d28d9,color:#fff
  style S fill:#3b82f6,stroke:#1d4ed8,color:#fff

ここで押さえておきたいのは、ライトもシェーダの入力だという点です。 マテリアルは「光が来たらどう返すか」という反射の性質しか持っていません。 光が来なければ返すものもない、という当たり前の事実が、後で説明する「真っ黒問題」の原因です。

テクスチャマップの種類

PBRで使う代表的なテクスチャは6種類です。 その中では、色を表す画像と、数値データを入れた画像を区別することが大事です。 前者はsRGBで保存され、後者はリニアな値としてそのまま読みます。

G=ラフネス、B=メタリック、R=AO

glTF 2.0仕様は、metallicRoughnessTextureについて「metalnessはBチャンネル、roughnessはGチャンネルから読む。値はリニアでなければならず、R・Aチャンネルがあれば無視しなければならない」と定めています。 occlusionTextureは「Rチャンネルからリニアに読み、他のチャンネル（GBA）は無視する」です。 値が大きいほど間接光を全部受け、小さいほど間接光を受けない、という意味になります。

RとGBが重ならないように設計されているので、1枚の画像のRにAO、Gにラフネス、Bにメタリックを詰め込めます。 この詰め方を、頭文字を取ってORMと呼びます。 同じ画像を2つのプロパティから参照すれば、テクスチャ枚数とメモリを節約できます。

{
  "materials": [
    {
      "name": "Brass",
      "pbrMetallicRoughness": {
        "baseColorTexture": { "index": 0 },
        "metallicRoughnessTexture": { "index": 1 },
        "metallicFactor": 1.0,
        "roughnessFactor": 1.0
      },
      "occlusionTexture": { "index": 1 },
      "normalTexture": { "index": 2 },
      "emissiveTexture": { "index": 3 },
      "emissiveFactor": [1.0, 1.0, 1.0]
    }
  ]
}

上の例では、index 1の画像（ORM）をmetallicRoughnessTextureとocclusionTextureの両方が参照しています。 係数（factor）はテクスチャの値に掛け合わされるので、テクスチャを使わずに係数だけで材質を決めることもできます。

ノーマルマップの接線空間と「緑の向き」

ノーマルマップは、法線ベクトルのXYZをRGBに符号化した画像です。 glTFは接線空間のノーマルマップを採用し、接線データがメッシュにない場合はMikkTSpaceというアルゴリズムで計算するよう定めています。 ベイクしたツールと描画側で接線の計算方法が違うと、継ぎ目が目立つ原因になります。

もう1つの落とし穴は緑チャンネルの向きです。 Yを上向き（Y+）とするOpenGL式と、下向き（Y-）とするDirectX式の2流儀があり、glTFはOpenGL式です。 DirectX式のノーマルマップをそのまま使うと凹凸が反転して見えるので、緑チャンネルを反転してから使います。

反射モデルの歴史 — LambertからPBRへ

マテリアルのパラメータがなぜ「ベースカラー・メタリック・ラフネス」なのかは、反射モデルの発展をたどると見えてきます。

Lambert — どこから見ても同じ明るさ

最も単純な拡散反射モデルがLambertです。 反射率をc（アルベド）とすると、BRDFは「c ÷ π」という定数になります。 BRDF（双方向反射率分布関数）は「ある方向から来た光が、ある方向へどれだけ反射されるか」を返す関数です。 Lambertではこれが方向に依存しないので、面はどこから見ても同じ明るさに見えます。 明るさを変えるのは、法線と光の向きの内積（n・l、つまり入射角のcos）だけです。 紙や素焼きの陶器のような、つやのない表面をよく表します。

PhongとBlinn-Phong — ハイライトを足す

Lambertだけでは、プラスチックや金属の「てかり」が出ません。 Phongモデルは、光の正反射方向と視線方向の角度からハイライトを計算します。 ただし、シャイネス（光沢の鋭さ）が低いとこの角度が90°を超えて内積が0に切り捨てられ、ハイライトの縁がぷつりと切れる欠点がありました。

Blinn-Phongは、光と視線の中間方向を表すハーフベクトルh（l+vを正規化したもの）と法線の角度を使います。 この角度は光が面の裏に回らない限り90°を超えないので、縁切れが起きません。 同じ見た目にするには、指数をPhongの2〜4倍にします。 このハーフベクトルは、後で出てくるPBRの式でも中心になる量です。

ただし、これらはあくまで「それっぽく見える」ための経験則です。 反射する光の総量が入ってきた光を超えないという保証がなく、ライティング環境を変えると材質の印象が崩れます。 アーティストが場面ごとに値を調整し直す必要があり、これがPBRへ移る動機になりました。

PBRの3条件

PBRには単一の定義があるわけではありませんが、広く読まれている入門資料LearnOpenGLは、次の3つを満たすものをPBRと呼んでいます。

1. マイクロファセット（微小面）モデルに基づく
2. エネルギー保存: 出ていく光は入ってくる光を超えない
3. 物理ベースのBRDFを使う

マイクロファセット — ラフネスの正体

マイクロファセットモデルは、表面を「目に見えないほど小さな完全鏡の集まり」とみなします。 ツルツルの表面では微小面がそろって同じ方向を向くので、光は一方向に鋭く反射し、くっきりした小さいハイライトになります。 ザラザラの表面では微小面の向きがばらつくので、光はあちこちへ散り、ハイライトは広く暗くなります。 ラフネスとは、この微小面の向きのばらつきを0〜1で表した値です。

エネルギー保存 — 拡散と鏡面の配分

表面に当たった光は、表面でそのまま跳ね返る分（鏡面反射）と、内部に入って散乱してから出てくる分（拡散反射）に分かれます。 エネルギー保存の条件から、両者の合計は入射光を超えられません。 そのため、鏡面反射の割合をkSとすると、拡散反射の割合kDは「1 − kS」になります。 鏡面反射が強くなる角度では、そのぶん拡散反射が弱まります。

金属は内部に入った光をすぐ吸収してしまうので、拡散反射を持ちません。 金属の色は鏡面反射の色そのものです。 この「金属は拡散なし、反射が色付き」「非金属は拡散あり、反射は無色で弱い」という二分法が、metallicパラメータの意味です。

PBRの式を読む — Cook-Torrance・GGX・Schlick

Cook-Torrance BRDFの3つの項

リアルタイムPBRの鏡面反射は、ほぼすべてCook-Torrance型のマイクロファセットBRDFです。 glTF 2.0仕様の付録Bでは、鏡面BRDFを「G × D ÷ （4 × |N・L| × |N・V|）」と書いています。 NはNormal（法線）、LはLight（光の方向）、VはView（視線の方向）、Hは先ほどのハーフベクトルです。 分子のD・G、そして外側に掛かるフレネル項Fの役割は次のとおりです。

拡散側はLambertの「色 ÷ π」です。 つまり、PBRの1回の反射計算は「Lambertの拡散 ＋ D・F・Gで組み立てた鏡面」の足し算で、フレネル項Fが両者の配分を決めます。

glTF付録Bの組み立て方

glTFの付録Bは、マテリアル全体を「誘電体（非金属）のBRDF」と「金属のBRDF」をmetallicで線形に混ぜたものとして定義しています。 原文は「material = mix（dielectric_brdf, metal_brdf, metallic）」で、仕様自身がこの線形補間のモデルはBurley（2012）が導入したと注記しています。

誘電体のf0 = 0.04は、屈折率ior = 1.5から出てくる値です。 空気から屈折率nの物質へ真正面から光が当たったときの反射率は「（（n − 1）÷（n + 1））の2乗」で、n = 1.5なら（0.5 ÷ 2.5）の2乗 = 0.04になります。 プラスチックやガラス、石など多くの非金属は、正面から見ると光の約4%前後しか鏡面反射しません（屈折率が約1.33の水はさらに低く、約2%です）。

α = roughness²という再マッピングにも理由があります。 ラフネスをそのままαに使うと、0付近のわずかな変化で見た目が急に変わってしまいます。 2乗することで、スライダーを動かしたときの見た目の変化が人間の知覚に対してほぼ均等になります。 これもBurleyの2012年のノートで導入された工夫です。

付録B.3には、これを簡略化した参考実装（規範ではなく参考扱い）が載っています。 シェーダ風に書くと次のようになります。

// glTF 2.0 付録B.3 の参考実装をもとにした簡略版
// metallic で誘電体と金属を混ぜた結果を、2つの値に畳み込む
vec3 c_diff = mix(baseColor.rgb, vec3(0.0), metallic); // 金属ほど拡散が黒に近づく
vec3 f0     = mix(vec3(0.04), baseColor.rgb, metallic); // 非金属は0.04、金属は色付き
float alpha = roughness * roughness;                    // 知覚的に線形にする

// Schlick のフレネル近似
vec3 F = f0 + (1.0 - f0) * pow(1.0 - abs(VdotH), 5.0);

// 拡散と鏡面の配分は F で決まる（エネルギー保存）
vec3 f_diffuse  = (1.0 - F) * (1.0 / PI) * c_diff;
vec3 f_specular = F * D_GGX(alpha, NdotH) * G_Smith(alpha, NdotL, NdotV)
                  / (4.0 * abs(NdotL) * abs(NdotV));

vec3 brdf = f_diffuse + f_specular;

metallicが0か1のどちらかになっていれば、この式は表の左右の列にきれいに一致します。 0.5のような中間値は、錆びかけた金属や汚れの境目など、1画素に両方が混ざる場合のためのものです。 メタリックを「基本は0か1で使う」と言われるのはこのためです。

フレネル効果を数字で見る

Schlick近似にf0 = 0.04を入れ、法線と視線の角度ごとに反射率を計算すると次のようになります。 鏡面反射の向きから見ている場合、V・Hは視線と法線の角度のcosに等しくなります。

60°までは4〜7%でほとんど変わらず、80°を超えたあたりから急に跳ね上がり、真横から見るとほぼ100%になります。 机の天板を真上から見ると木目が見えるのに、低い位置から見ると窓の光が映り込むのは、この効果によるものです。 経験則のモデルでは、このような角度による変化を再現できませんでした。

metallic-roughnessとspecular-glossiness

PBRのパラメータの持ち方には、大きく2つの流儀があります。

specular-glossinessは、非金属でも反射率を自由に設定できる点が強みでした。 しかし、自由度が高いと「拡散も鏡面も強い、光を増幅する表面」のような破綻した材質を作れてしまいます。 glTFはこの拡張をアーカイブして非推奨とし、新しい機能はmetallic-roughnessを前提に設計する方針に切り替えました。 不足していた表現力は、屈折率を指定するKHR_materials_iorと、鏡面反射の強さと色を調整するKHR_materials_specularという拡張で補っています。

ほかにも、クリアコート、シーン（布の光沢）、透過、異方性、虹色干渉などがKHR_materials_*拡張として批准されています。 コアは最小限にとどめ、必要な表現を拡張で積み上げていく設計です。

Disney principled BRDFの原則

metallic-roughnessの考え方の源流が、Walt Disney Animation StudiosのBrent Burleyが2012年に発表した「Physically-Based Shading at Disney」です。 アーティストから求められたのは、物理的に厳密であることよりも、意図どおりに見た目を演出できることでした。 そこでBurleyは、厳密な物理モデルではなく「原則に基づく（principled）」モデルを作り、『シュガー・ラッシュ』以降の作品で使いました。 その原則は次の5つです。

1. 物理的なパラメータより、直感的なパラメータを使う
2. パラメータはできるだけ少なくする
3. パラメータは妥当な範囲で0〜1にする
4. 意味がある場合は、妥当な範囲を超えて押し出すことを許す
5. パラメータのどんな組み合わせでも、できるだけ破綻せず妥当に見えるようにする

パラメータは色1つ（baseColor）とスカラー10個（subsurface、metallic、specular、specularTint、roughness、anisotropic、sheen、sheenTint、clearcoat、clearcoatGloss）です。 屈折率の代わりに「specular」という0〜1の値を使うのも、原則1の表れです。 すべてのパラメータが正規化され、知覚的に線形なので、金の材質から青いゴムの材質へ補間しても途中の見た目が自然に変化します。

Web開発でいえば、低レベルAPIの上に、少ないpropsで破綻しないコンポーネントを設計するのに似ています。 glTFのmetallic-roughnessは、このうちbaseColor・metallic・roughnessだけをコアに残した、リアルタイム配信向けの最小構成と見ることができます。

ライトと環境マップ — なぜ真っ黒になるのか

反射率は「色」ではない

glTFのモデルをWebのビューアに読み込んだのに、真っ黒なシルエットしか出ない。初心者がまずぶつかる問題です。 原因はモデルではなく、シーンにライトも環境マップもないことです。

PBRのbaseColorは「この色で塗る」という指定ではなく、「来た光のうちどれだけを、どの色で返すか」という反射率です。 入射光がゼロなら、どんな反射率を掛けても結果はゼロ、つまり黒になります。 例外は、自ら光を出すエミッシブだけです。

金属はさらに厳しくなります。 先ほどの式で、metallic = 1ならc_diffは黒になり、拡散反射が消えます。 金属の見た目はすべて周囲の映り込みでできているので、平行光源を1つ置いただけでは、ハイライトの点以外はほぼ黒に見えます。 金属をそれらしく見せるには、周囲全体から光が来ている状態が必要です。

IBL — 周囲の景色を光源にする

その「周囲全体からの光」を与えるのがIBL（Image-Based Lighting）です。 周囲を撮影したHDR画像（キューブマップなど）の各画素を光源とみなし、環境全体を1つの巨大な光源として扱います。 HDRなので、太陽や照明の部分は1.0を超える値を持てます。

ただし、画素ごとに半球全体の積分を計算するのはリアルタイムでは重すぎます。そこで事前計算を使います。

• 拡散用: 環境マップをあらかじめ畳み込んだ、32×32程度の低解像度の放射照度マップを作ります。描画時は法線の方向で1回引くだけです。
• 鏡面用: EpicのKarisによるsplit sum近似を使います。粗さごとにぼかした環境マップをミップレベルに格納したものと、N・Vと粗さで引くBRDF積分のルックアップテーブルに分けて事前計算します。

粗さごとにぼかした環境マップを使うのは、ラフネスが高い表面ほど映り込みがぼやけるからです。 マイクロファセットのばらつきが、そのまま映り込みのぼけとして見えます。

sRGBとリニア、HDRとトーンマッピング

計算はリニア、保存と表示はsRGB

光の計算は、光の量を足したり掛けたりできるリニアな値を前提にしています。 一方、人が目で選んだ色や写真から作ったテクスチャは、ディスプレイ向けのsRGB（ガンマ約2.2の非線形な符号化）で保存されています。 sRGBの値をそのまま光の計算に使うと、物理的に誤った結果になります。

そのためglTFは、baseColorTextureとemissiveTextureのRGBはsRGBで符号化しなければならず、metallicRoughness・occlusion・normalはリニアで符号化すると定めています。 さらに、PNGやJPEGに埋め込まれたICCプロファイルやガンマ値は無視し、どのテクスチャ枠から参照されたかで伝達関数を決めます。 伝達関数がファイルではなく用途で決まる点が大事です。

「Blenderでは正しいのに、Webで見ると色が薄い、または濃すぎる」という症状の多くは、sRGBとリニアの変換漏れか二重変換です。 ラフネス画像をsRGBとして読むと値がゆがみ、ツヤの具合が変わってしまいます。

HDRとトーンマッピング

照明計算の結果は、1.0を簡単に超えます。 太陽に照らされた白い壁や、エミッシブの光源は、ディスプレイが出せる最大値よりはるかに明るい値になります。 そのまま0〜1に切り捨てると、明るい部分が真っ白に飛んでしまいます。

そこで、浮動小数点のバッファ（RGBA16Fなど）で1.0を超える値を保持したまま計算し、最後に0〜1へなめらかに圧縮します。 これがトーンマッピングです。 代表例は、値cを「c ÷ （c + 1）」に変換するReinhardと、露出値を使って「1 − e^（−c × 露出）」とする露出型です。 トーンマッピングの後でsRGBに符号化し、ディスプレイに送ります。 ガンマ補正はこの最後に1回だけ行います。

graph LR
  A[sRGBテクスチャ] --> B[リニア化]
  B --> C[リニアHDRで<br/>照明計算]
  D[データテクスチャ<br/>ORM・ノーマル] --> C
  C --> E[トーン<br/>マッピング]
  E --> F[sRGBに<br/>エンコード]
  F --> G[ディスプレイ]

  style C fill:#8b5cf6,stroke:#6d28d9,color:#fff
  style E fill:#f97316,stroke:#ea580c,color:#fff

MaterialXとOpenPBRによる共通化

glTFのmetallic-roughnessは、Webやモバイルでも描ける最小公約数として設計されています。 一方、映画やプロダクトデザインの現場では、多層の塗装、薄膜、表面下散乱などを表せるもっと豊かなマテリアルが使われます。 問題は、レンダラごとに材質モデルとノードの仕組みが違い、ツール間で材質を受け渡すと見た目が変わってしまうことでした。 この問題に対して、2つの規格が層を分けて整備されています。

• MaterialX: シェーディングのノードグラフをレンダラ非依存で記述する交換規格です。 2012年にIndustrial Light & Magicで始まり、2017年にオープンソース化され、2021年7月にAcademy Software Foundation（ASWF）のホストプロジェクトになりました。 ライセンスはApache 2.0で、2026年5月にv1.39.5が出ています。
• OpenPBR Surface: AdobeのStandard MaterialとAutodeskのStandard Surfaceを統合した、映像品質向けの材質モデルです。 2024年6月にMaterialXのサブプロジェクトとしてv1.0が公開され、仕様と参照実装はApache 2.0です。 2025年2月時点で、OpenPBR 1.1がMaterialX 1.39.2とOpenUSD 25.02で使えるようになっています。

glTF側からMaterialXへの橋渡しも進んでいます。 MaterialXのノードグラフをglTFに持ち込むEXT_texture_procedurals_mx_1_39が、拡張レジストリでReview Draftの段階にあります。 「作るときは豊かな表現で、配る前に軽い形式へ落とす」という構図は、第7章で扱うファイル形式（USDとglTF）でも繰り返し現れます。

まとめと次章へ

• マテリアルは反射の性質を表すデータ、シェーダはそれを使って色を計算するプログラム、テクスチャはその値を場所ごとに変える画像です。
• glTFはbaseColor・metallic・roughnessを中心に、G=ラフネス、B=メタリック、R=AOというチャンネル割り当てと、sRGBかリニアかの伝達関数まで仕様で決めています。
• PBRはマイクロファセット・エネルギー保存・物理ベースBRDFの3条件で成り立ち、glTFは誘電体f0 = 0.04、α = roughness²、GGXとSchlickのフレネル近似で鏡面を計算します。
• 反射率しか持たないので、ライトや環境マップがなければ真っ黒です。計算はリニアで行い、トーンマッピングの後で最後に1回だけsRGBに変換します。

ここまでで、3Dモデルの「形」と「見た目」がそろいました。 次の第5章では3つ目の層である「動き」に進み、ボーンとスケルトン、スキニングとウェイト、ブレンドシェイプ、キーフレーム補間、そしてglTFのスキン仕様とVRMによるアバターの標準化を解説します。

主な参考資料

• Khronos: glTF 2.0 Specification（マテリアル節・付録B）
• LearnOpenGL: PBR Theory
• SIGGRAPH 2012 Course: Practical Physically Based Shading in Film and Game Production（Burley）
• MaterialX