シャドウ（シャドウ）
3D グラフィックスで光が物体に遮られて生じる影。Shadow Map / Ray Traced Shadow 等の技法で計算。CSS box-shadow / drop-shadow も同様の概念。
概要
シャドウ（Shadow / 影）は、3D グラフィックスや UI デザインにおいて光が物体に遮られて生じる影を指す。3D ではリアリズムの根幹要素で、シャドウマップ / ステンシルシャドウボリューム / レイトレーシング / Path Tracing 等の技法で計算される。CSS / UI デザインでは box-shadow / drop-shadow / Filter 等で立体感や階層を表現する。2026 年現在、ゲームエンジンは RTX 50 / RX 9000 のハードウェアレイトレで動的影が一般化、Tailwind CSS / Material Design 3 等の Web デザインシステムでも体系化されたシャドウユーティリティが標準である。
3D グラフィックスのシャドウ技法
シャドウマッピング（Shadow Mapping、1978-）
光源視点からの深度バッファを生成 → カメラ視点からその深度マップを参照して影判定。GPU で高速、品質はマップ解像度依存。
| 派生技法 | 改善点 |
|---|---|
| PCF（Percentage-Closer Filtering） | エッジを柔らかく |
| VSM（Variance Shadow Map） | 統計的補間で滑らか |
| CSM（Cascaded Shadow Map） | 距離別に複数解像度マップ |
| ESM（Exponential Shadow Map） | エッジ品質向上 |
レイトレースシャドウ（Ray Traced Shadow、2018-）
光線追跡で物理的に正確な影を生成。RTX シリーズ / RX 7000+ で HW 加速。
Path Tracing（2024-）
完全な光線追跡で間接照明 + 多重反射の柔らかい影。Cyberpunk 2077 / Portal RTX が代表。
Volumetric Shadow（霧 / 煙の影）
光が大気中の粒子を通過して影を作る現象。Unreal Engine 5 Lumen / Unity HDRP が標準対応。
ゲームエンジン別の Shadow 機能
| エンジン | 主な技術 |
|---|---|
| Unreal Engine 5.4 Lumen | Distance Field Shadow + Ray Traced + Virtual Shadow Maps |
| Unity HDRP 17.0 | Contact Shadow + Screen Space Shadow + Ray Traced |
| Godot 4.4 | Shadow Atlas、リアルタイム動的影 |
| Bevy（Rust） | WGSL シェーダ、Cascaded Shadow Map |
CSS / UI のシャドウ
box-shadow（要素全体）
.card {
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
filter: drop-shadow（透明形状追従）
.icon {
filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}
Tailwind CSS シャドウユーティリティ
| ユーティリティ | 強度 |
|---|---|
shadow-xs | 極小 |
shadow-sm | 小 |
shadow | 標準 |
shadow-md | 中 |
shadow-lg | 大 |
shadow-xl | 特大 |
shadow-2xl | 巨大 |
shadow-inner | 内側影 |
Material Design 3 Elevation
| Level | 用途 |
|---|---|
| Level 0 | 平面（Surface） |
| Level 1 | カード、リスト |
| Level 2 | FAB、ホバー |
| Level 3 | ナビゲーションバー |
| Level 4 | アプリバー |
| Level 5 | モーダル |
PC スペック要件（ゲーム）
- Ray Traced Shadow（1080p）: RTX 5060 / RX 9060 XT
- Ray Traced Shadow（4K）: RTX 5070 Ti / RX 9070 XT
- Path Tracing（4K）: RTX 5090
- Unreal Engine 5 Lumen: RTX 4070 SUPER 以上推奨
CG / DCC ツールでのシャドウ計算時間（参考）
| ツール | シーン | レンダー時間 |
|---|---|---|
| Blender Cycles X | 1 フレーム 4K Path Trace | 5-30 分 |
| V-Ray 7 | 建築 CG 1 フレーム | 10-60 分 |
| Octane Render | 製品 CG 1 フレーム | 1-5 分（GPU） |
| Unreal Engine 5 リアルタイム | 1 frame | 16-33 ms |
関連用語との違い
| 用語 | 違い |
|---|---|
| ハイライト | 光の当たる明るい部分、シャドウの対義 |
| アンビエントオクルージョン | 接触遮蔽、影と関連だが別計算 |
| グローバルイルミネーション | 間接照明、影の中の明るさ |
| ライティング | 光全般、シャドウは影部分 |
よくある質問
Q1: Ray Traced Shadow と Shadow Map、どちらが綺麗？ A: Ray Traced が物理的に正確で柔らかい影。ただし計算コスト 5-10 倍。RTX 50 + DLSS 4 で実用域、RTX 30 以下は CSM が現実的。
Q2: Tailwind CSS shadow ユーティリティは Material Design 準拠？ A: 似ているが完全準拠ではない。Tailwind は独自の階層、Material Design は厳密な Elevation システム。プロジェクトに合わせて拡張する。
Q3: Unreal Engine 5 の Virtual Shadow Maps とは？ A: 大きなオープンワールド向けの新技法。視野内の必要部分のみ高解像度シャドウマップ生成、メモリ効率良。Fortnite Chapter 5 / Hellblade II 等が採用。
まとめ
- 3D + UI 両方で使う 影の表現 技法
- 2026 年は RTX 50 + Path Tracing で映画品質の影がリアルタイム
- Web は Tailwind shadow + Material Design Elevation が標準