---
title: ゲームのグラフィクスはどうやって描画される？～最新のリアルタイムレンダリング描画フローを見ていこう！～
tags:  #ゲーム制作 #ゲームメーカーズスクランブル #レンダリング #cg #グラフィックス  
author: [ゲームメーカーズ](https://convert.docswell.com/user/gamemakers)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/8EDXQXP4JG.jpg?width=480
description: 本スライドは2025年8月30日(土)に開催したゲーム開発者向けのリアルイベント『ゲームメーカーズ スクランブル2025』で行われた講演のスライドとなります。  タイトル： ゲームのグラフィクスはどうやって描画される？ ～最新のリアルタイムレンダリング描画フローを見ていこう！～  内容： ゲームエンジンの普及などにより誰もがクオリティの高いCGをリアルタイムで生み出せるようになりました。しかし、よりうまく使いこなすためには、そのグラフィクスがどのように生成されているかを理解しておくことが非常に重要です。本講演では、グラフィクス専門の方じゃない方やエンジニアではない方も対象に、最新のリアルタイムレンダリングフローを見ていきます。  登壇者： Epic Games Japan Customer Success Director 篠山 範明 氏  講演動画も公開中！  【アーカイブ記事】https://gamemakers.jp/article/2025_12_22_119902/ 【イベントページ】https://gamemakers.jp/scramble2025/ 【イベントレポート記事】https://gamemakers.jp/article/2025_09_24_116494/
published: December 22, 25
canonical: https://convert.docswell.com/s/gamemakers/ZM6ELG-GameMakersScramble2025_ArchivesA2
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/8EDXQXP4JG.jpg)

ゲームのグラフィックスは
どうやって描画される？
最新のリアルタイムレンダリング描画フローを見ていこう！!
Epic Games Japan
Customer Success Director
篠山 範明 / Nori Shinoyama


# Page. 2

![Page Image](https://bcdn.docswell.com/page/V7PPLPNV78.jpg)

ゲームグラフィックスは
よりリアルに
よりユニークに


# Page. 3

![Page Image](https://bcdn.docswell.com/page/2JV2Q2KRJQ.jpg)

ゲームエンジンなどの普及で
誰もが気軽に
最先端グラフィックスを試せる時代に


# Page. 4

![Page Image](https://bcdn.docswell.com/page/5EGRWRQ6JL.jpg)

ゲームエンジンなどの
様々な便利ツール
誰もが気軽にハイクオリティなグラフィックスを
使える様になった！。。。けど。。。


# Page. 5

![Page Image](https://bcdn.docswell.com/page/4JQV3VK27P.jpg)

なんかよくわかんないけど
絵が全然綺麗にならない！！


# Page. 6

![Page Image](https://bcdn.docswell.com/page/K74M1MPPJ1.jpg)

シェーダ
コンパイル！？
エディタ固まるんです
けど！？


# Page. 7

![Page Image](https://bcdn.docswell.com/page/LJ18G89XEG.jpg)

全然速度がでない。。。
パフォーマンスがでない。。。


# Page. 8

![Page Image](https://bcdn.docswell.com/page/GJWZKZQKJ2.jpg)

あのゲームみたいな
絵作りしたいんだけど
やり方がわからん！！！！


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4EZ1Z1WN73.jpg)

このようなグラフィクスは
どうやって
描画されているんだろう？


# Page. 10

![Page Image](https://bcdn.docswell.com/page/Y76LZLG9JV.jpg)

中身を知っていると
自分の表現したいものを実現しやすくなり
更に苦手な部分の解消になったり


# Page. 11

![Page Image](https://bcdn.docswell.com/page/G751W1VDE4.jpg)

ゲームエンジンなどの
様々な便利ツール
少しだけ踏み込んで、中身を見てみましょう


# Page. 12

![Page Image](https://bcdn.docswell.com/page/9J21Q1XM7R.jpg)

ゲームエンジンなどの
様々な便利ツール
アート
技術
CGは、人のインスピレーションをデジタルの技術
で映像にすること。。。と言えるかも？


# Page. 13

![Page Image](https://bcdn.docswell.com/page/DEYZWZ8P7M.jpg)

ゲームエンジンなどの
様々な便利ツール
アート
技術
3DCGは
アーティストとしてのアート力
またエンジニアとしての技術力が共に重要


# Page. 14

![Page Image](https://bcdn.docswell.com/page/VJN393QMJ8.jpg)

ということで、本日の内容です


# Page. 15

![Page Image](https://bcdn.docswell.com/page/YE9929DWE3.jpg)

アート
技術
リアルタイム
レンダリング
に関わる全ての人に
知ってほしい
前提知識
本日お話しすること


# Page. 16

![Page Image](https://bcdn.docswell.com/page/GE89593R7D.jpg)

アート
技術
リアルタイム
レンダリング
に関わる全ての人に
知ってほしい
前提知識
本日お話しすること
ゲームデザイナーも
プロデューサーも
なんとなくは
知ってほしい！


# Page. 17

![Page Image](https://bcdn.docswell.com/page/LELWYWV2JR.jpg)

アート
学生も！
ゲームの中身が気にな
るゲーム好きな方も！
技術
リアルタイム
レンダリング
に関わる全ての人に
知ってほしい
前提知識
本日お話しすること
ゲームデザイナーも
プロデューサーも
なんとなくは
知ってほしい！


# Page. 18

![Page Image](https://bcdn.docswell.com/page/4JM9N9G9EW.jpg)

Agenda
●
リアルタイムレンダリング？？
●
超ざっくりレンダリングフロー
●
各項目をもう一歩深堀り
●
次の一歩へ
（アートの道 / 技術の道）
●
まとめ


# Page. 19

![Page Image](https://bcdn.docswell.com/page/PJRGDGZ9E9.jpg)

自己紹介
Who I am?
篠山 範明
●
●
Epic Games Japan,
Customer Success, Director
●
X @tempkinder
●
国際きき酒師
●
日本のアイドル文化を
幅広く応援しています
● ばってん少女隊
● RAY
● ukka


# Page. 20

![Page Image](https://bcdn.docswell.com/page/PEXX1X93EX.jpg)

今回の例や使用している画像などは
すべてアンリアルエンジンのものですが、
免責事項
内容はアンリアルエンジンに限定されない
一般的なものとなっております
また、アンリアルエンジン固有の説明は一
切ありません


# Page. 21

![Page Image](https://bcdn.docswell.com/page/3EKW2WPNED.jpg)

リアルタイムレンダリング


# Page. 22

![Page Image](https://bcdn.docswell.com/page/L73141XZJ5.jpg)

レンダリング？


# Page. 23

![Page Image](https://bcdn.docswell.com/page/87DXQX24EG.jpg)

レンダリング？
デジタルデータを、人間にわかる形に表示、再生すること。映像だけではなく、音の再生も言う
CG
ポリゴンデータなどを解釈し
モニターに表示
Webブラウザ
HTMLデータを表示
サウンド
音の波形データを
実際の音にして再生


# Page. 24

![Page Image](https://bcdn.docswell.com/page/VJPPLP1VJ8.jpg)

※この画像は実写です
CGレンダリングは
現実の光の挙動の物理シミュレーション


# Page. 25

![Page Image](https://bcdn.docswell.com/page/2EV2Q2YREQ.jpg)

※この画像は実写です
ライト
カメラ
形状
質感
CGレンダリングは
現実の光の挙動の物理シミュレーション


# Page. 26

![Page Image](https://bcdn.docswell.com/page/57GRWR96EL.jpg)

※この画像はCGです
CGレンダリングは
現実の光の挙動の物理シミュレーション


# Page. 27

![Page Image](https://bcdn.docswell.com/page/4EQV3VW2JP.jpg)

リアルタイム？
ようこそミリ秒の世界へ


# Page. 28

![Page Image](https://bcdn.docswell.com/page/KJ4M1MKPE1.jpg)

オフラインレンダリング
(プリレンダリング)
●
●
●
一枚の絵を数秒 ~ 数十時間かけて生成
複雑な光のシミュレーションを
時間をかけて行う
CPUまたはGPUで計算される
リアルタイムレンダリング
●
●
●
（”リアルタイム”に厳密な定義はないが）
0.016秒/0.033秒で絵を生成
高速に高品質な絵を出すために、
様々な簡略化や工夫がされている
GPUメインで計算される


# Page. 29

![Page Image](https://bcdn.docswell.com/page/LE18G8XX7G.jpg)

オフラインとリアルタイムのレンダリング時間比較
1時間
22万5千倍速い!
オフラインレンダリング
（様々なので1枚1時間と仮定、
これはめちゃくちゃ速い方）
0.016秒
リアルタイムレンダリング
(60fpsと仮定)


# Page. 30

![Page Image](https://bcdn.docswell.com/page/GEWZKZNKE2.jpg)

リアルタイムレンダリングは
なんでこんなに高速に
レンダリングできてるの？
種もしかけもございます！


# Page. 31

![Page Image](https://bcdn.docswell.com/page/47Z1Z13NJ3.jpg)

GPU
Graphics
Processing
Unit


# Page. 32

![Page Image](https://bcdn.docswell.com/page/YJ6LZLX9EV.jpg)

とあるゲーミングPCのスペック
GPUスペックによって、
扱えるグラフィックス処理に
大きな差がでます


# Page. 33

![Page Image](https://bcdn.docswell.com/page/GJ51W1XD74.jpg)

このセクションのまとめ
リアルタイム
レンダリング？?
ようこそ、ミリ秒の世界へ
CGのレンダリングは光のシミュレーション
リアルタイムはミリ秒の世界
高速に描画するために、
専用の機械”GPU”を駆使する


# Page. 34

![Page Image](https://bcdn.docswell.com/page/LE31414Q75.jpg)

ではここからが今日の本番


# Page. 35

![Page Image](https://bcdn.docswell.com/page/8EDXQXQWJG.jpg)

Monitor
では、GPUにどのような計算をさせて
描画されているのかを見ていきます


# Page. 36

![Page Image](https://bcdn.docswell.com/page/V7PPLPLX78.jpg)

Agenda
●
リアルタイムレンダリング？？
●
超ざっくりレンダリングフロー
●
各項目をもう一歩深堀り
●
次の一歩へ
（アートの道 / 技術の道）
●
まとめ


# Page. 37

![Page Image](https://bcdn.docswell.com/page/2JV2Q2Q3JQ.jpg)

超ざっくりレンダリングフロー


# Page. 38

![Page Image](https://bcdn.docswell.com/page/5EGRWRWYJL.jpg)

オブジェクトのレンダリングの基本構成


# Page. 39

![Page Image](https://bcdn.docswell.com/page/4JQV3V367P.jpg)

オブジェクトの基本構造(仮)
形状
質感
ポリゴンメッシュ
マテリアル/シェーダ


# Page. 40

![Page Image](https://bcdn.docswell.com/page/K74M1M1MJ1.jpg)

Polygon Mesh
形状: ポリゴンメッシュ
ポリゴンメッシュ = 物体の表面を形成する三角形(ポリゴン)の集合体


# Page. 41

![Page Image](https://bcdn.docswell.com/page/LJ18G8GYEG.jpg)

質感: マテリアル
材質や質感を定義するマテリアル
では、”質感”とはなんだろう？？


# Page. 42

![Page Image](https://bcdn.docswell.com/page/GJWZKZK1J2.jpg)

ライト来たけど
どうカメラに返す？
質感とはつまるところ、ライトに当たった際に
「オブジェクトがどのような反射やふるまいをするか？」
を定義するもの


# Page. 43

![Page Image](https://bcdn.docswell.com/page/4EZ1Z1ZX73.jpg)

質感: マテリアル
マテリアルを正しく作成することにより、
様々な素材の質感を表現可能に


# Page. 44

![Page Image](https://bcdn.docswell.com/page/Y76LZLZPJV.jpg)

Oﬃcial Document: マテリアルの基本概念
質感: マテリアル
UEではノードベースでマテリアルを作成していきます


# Page. 45

![Page Image](https://bcdn.docswell.com/page/G751W1WPE4.jpg)

模様/詳細: テクスチャ
テクスチャ
また、詳細な変化や模様のために貼り付ける画像がテクスチャです


# Page. 46

![Page Image](https://bcdn.docswell.com/page/9J21Q1QZ7R.jpg)

オブジェクトの基本構造
形状
質感
ポリゴンメッシュ マテリアル/シェーダ
模様/詳細
テクスチャ


# Page. 47

![Page Image](https://bcdn.docswell.com/page/DEYZWZWN7M.jpg)

オブジェクトの構造がわかったので
代表的な二つのレンダリング手法を見ていきましょう
● フォワードレンダリング
● ディファードレンダリング


# Page. 48

![Page Image](https://bcdn.docswell.com/page/VJN3939VJ8.jpg)

フォワード
レンダリング
モバイルやVRなどリソース制約が強い
環境で多く採用
直観的かつシンプル
ジオメトリを描画するときに、
その場でシェーディング(ライティング)が
行われる


# Page. 49

![Page Image](https://bcdn.docswell.com/page/YE99292VE3.jpg)

フォワードレンダリングで
この様なシーンの絵がどんな流れで生成されるかを見ていきましょう


# Page. 50

![Page Image](https://bcdn.docswell.com/page/GE8959547D.jpg)



# Page. 51

![Page Image](https://bcdn.docswell.com/page/LELWYWYVJR.jpg)



# Page. 52

![Page Image](https://bcdn.docswell.com/page/4JM9N9NNEW.jpg)



# Page. 53

![Page Image](https://bcdn.docswell.com/page/PJRGDGD4E9.jpg)



# Page. 54

![Page Image](https://bcdn.docswell.com/page/PEXX1X1ZEX.jpg)



# Page. 55

![Page Image](https://bcdn.docswell.com/page/3EKW2W2VED.jpg)



# Page. 56

![Page Image](https://bcdn.docswell.com/page/L73141YQJ5.jpg)



# Page. 57

![Page Image](https://bcdn.docswell.com/page/87DXQX5WEG.jpg)



# Page. 58

![Page Image](https://bcdn.docswell.com/page/VJPPLPGXJ8.jpg)

直観的かつシンプル
フォワード
レンダリング
モバイルやVRなどリソース制約が強い
環境で多く採用
ジオメトリを描画するときに、その場でマテリアルシェー
ディング(ライティング)が行われる
他にも色々利点ある！(けど今回は割愛)
MSAAなどのGPUベースアンチエイリアシングを活用できる
ディファードと比べて低メモリ
モバイルやVRなどで採用多数
モバイルやVRなどリソース制約が強い環境で使われています


# Page. 59

![Page Image](https://bcdn.docswell.com/page/2EV2Q263EQ.jpg)

フォワードレンダリングの際に
最初に描画されたこの地面。。。。
せっかくライティングされてるけど...


# Page. 60

![Page Image](https://bcdn.docswell.com/page/57GRWRNYEL.jpg)

最終的に地面が殆ど見えてない！！
計算の無駄になってしまう。
見えてるところだけレンダリングしたい！！


# Page. 61

![Page Image](https://bcdn.docswell.com/page/4EQV3VQ6JP.jpg)

ディファード
レンダリング
オブジェクトの情報を
G-Buﬀerに書きだし(BasePass)、
後にライティング
PCやコンソールなどでのスタンダード
なリアルタイムレンダリング手法
見える部分だけライティング計算されるため
負荷を抑えられる


# Page. 62

![Page Image](https://bcdn.docswell.com/page/KJ4M1MNME1.jpg)

Base Pass
不透明オブジェクト描画
二つのPassに分かれます
Lighting Pass


# Page. 63

![Page Image](https://bcdn.docswell.com/page/LE18G85Y7G.jpg)

Base Pass
不透明オブジェクト描画
Lighting Pass
Base Pass
G-Buﬀerを作るだけ！ライティングはまだしない！
G-Buﬀer = ジオメトリ情報を蓄えるバッファ(画像)
各ピクセルにオブジェクトのマテリアル情報や法線などのデータを格納


# Page. 64

![Page Image](https://bcdn.docswell.com/page/GEWZKZ51E2.jpg)

Base Pass
不透明オブジェクト描画
Lighting Pass
Lighting Pass
G-Buﬀerを見ながらライト一個一個をのライティングを重ね書きしていく


# Page. 65

![Page Image](https://bcdn.docswell.com/page/47Z1Z1NXJ3.jpg)

ディファードレンダリングのライティングパスで
この様なシーンの絵がどんな流れでライティングされるかを見ていきましょう


# Page. 66

![Page Image](https://bcdn.docswell.com/page/YJ6LZL8PEV.jpg)



# Page. 67

![Page Image](https://bcdn.docswell.com/page/GJ51W19P74.jpg)



# Page. 68

![Page Image](https://bcdn.docswell.com/page/9E21Q12ZJR.jpg)



# Page. 69

![Page Image](https://bcdn.docswell.com/page/D7YZWZYNJM.jpg)



# Page. 70

![Page Image](https://bcdn.docswell.com/page/VEN393PVE8.jpg)



# Page. 71

![Page Image](https://bcdn.docswell.com/page/Y799293V73.jpg)



# Page. 72

![Page Image](https://bcdn.docswell.com/page/G78959M4JD.jpg)



# Page. 73

![Page Image](https://bcdn.docswell.com/page/L7LWYW3VER.jpg)

オブジェクトの情報をG-Buﬀerに書きだし、
後にライティング
見える部分だけライティング計算されるため負荷を抑えられる
ディファード
レンダリング
PCやコンソールなどでのスタンダード
なリアルタイムレンダリング手法
多数のライトを扱える(今回詳細な説明は割愛)
ジオメトリ描画とライティングを分けることで、
フォワードに比べライトの数を増やすしやすい
G-Buﬀerがあることで高度なポストプロセスが可能に
(後に少し説明)
G-Buﬀerを保持するために多くのメモリを消費し
描画コストがかかる
ＰＣやコンソールなどでのスタンダードな描画手法


# Page. 74

![Page Image](https://bcdn.docswell.com/page/4EM9N9DN7W.jpg)

このまま Deferred Renderingの
一般的な流れを見ていきましょう


# Page. 75

![Page Image](https://bcdn.docswell.com/page/PERGDG4479.jpg)

BasePass
不透明オブジェクト描画
ライティング
G-Buﬀer
半透明描画
あとで詳しく！


# Page. 76

![Page Image](https://bcdn.docswell.com/page/P7XX1X2Z7X.jpg)

BasePass
不透明オブジェクト描画
ライティング
G-Buﬀer
半透明描画
Post Process


# Page. 77

![Page Image](https://bcdn.docswell.com/page/37KW2WMV7D.jpg)



# Page. 78

![Page Image](https://bcdn.docswell.com/page/LJ31412QE5.jpg)

BasePass
完成！
不透明オブジェクト描画
ライティング
半透明描画
Post Process


# Page. 79

![Page Image](https://bcdn.docswell.com/page/8JDXQXZW7G.jpg)

Post Process でどんなことができるか？


# Page. 80

![Page Image](https://bcdn.docswell.com/page/VEPPLPDXE8.jpg)

※この画像は実写です
現実のカメラで
起きることの
シミュレーション
ポストプロセスで
カメラ特有の現象をシミュレーション


# Page. 81

![Page Image](https://bcdn.docswell.com/page/27V2Q2137Q.jpg)

Post Process
被写界深度: Depth of Field
カメラのボケ表現


# Page. 82

![Page Image](https://bcdn.docswell.com/page/5JGRWR2Y7L.jpg)

Post Process
Bloom


# Page. 83

![Page Image](https://bcdn.docswell.com/page/47QV3VP6EP.jpg)

Post Process
Motion Blur


# Page. 84

![Page Image](https://bcdn.docswell.com/page/KE4M1MYM71.jpg)

BasePass
完成！
不透明オブジェクト描画
ライティング
半透明描画
Post Process


# Page. 85

![Page Image](https://bcdn.docswell.com/page/L718G86YJG.jpg)

BasePass
完成！
不透明オブジェクト描画
ライティング
このセクションのまとめ
超ざっくり
レンダリングフロー
半透明描画
Post Process
リアルタイムレンダリングフロー
は大きく二種に分かれる
PC・コンソールで主流のディファード
モバイル・VRなどで使われているフォワード
ディファードが主流
半透明やポストプロセス描画がその後き、
リッチな絵作りを可能にする


# Page. 86

![Page Image](https://bcdn.docswell.com/page/G7WZKZW172.jpg)

Agenda
●
リアルタイムレンダリング？？
●
超ざっくりレンダリングフロー
●
各項目をもう一歩深堀り
●
次の一歩へ
（アートの道 / 技術の道）
●
まとめ


# Page. 87

![Page Image](https://bcdn.docswell.com/page/4JZ1Z15XE3.jpg)

各項目をもう一歩深堀り
(Deferred Rendering ベースで)


# Page. 88

![Page Image](https://bcdn.docswell.com/page/YE6LZL9P7V.jpg)

ここから、
タイトルの
”最新の”
を回収していきたいと思います


# Page. 89

![Page Image](https://bcdn.docswell.com/page/GE51W1NPJ4.jpg)

アート
技術
リアルタイム
レンダリング
に関わる全ての人に
知ってほしい
前提知識
この章の内容は、少し専門的になるかもです
業務外の方は流す程度で。。。おねがいします


# Page. 90

![Page Image](https://bcdn.docswell.com/page/9721Q15ZER.jpg)

BasePass
完成！
不透明オブジェクト描画
ライティング
半透明描画
Post Process


# Page. 91

![Page Image](https://bcdn.docswell.com/page/DJYZWZKNEM.jpg)

※この画像は実写です
CGレンダリングは
現実の光の挙動の物理シミュレーション


# Page. 92

![Page Image](https://bcdn.docswell.com/page/V7N393RV78.jpg)

※この画像は実写です
●
●
●
●
直接光: Direct Lighting
間接光: Indirect Lighting
影: Shadow
映り込み: Reﬂection
ライティングも様々な効果を
それぞれ独立してシミュレーションしています


# Page. 93

![Page Image](https://bcdn.docswell.com/page/YJ9929MVJ3.jpg)

※この画像は実写です
●
●
●
●
直接光: Direct Lighting
間接光: Indirect Lighting
影: Shadow
映り込み: Reﬂection
ライティングも様々な効果を
それぞれ独立してシミュレーションしています


# Page. 94

![Page Image](https://bcdn.docswell.com/page/GJ8959L4ED.jpg)

Direct
Lighting
Indirect
Lighting


# Page. 95

![Page Image](https://bcdn.docswell.com/page/LJLWYWLV7R.jpg)

直接光 (Direct Lighting)
ライトからの直接(Direct)のライティング


# Page. 96

![Page Image](https://bcdn.docswell.com/page/47M9N9MNJW.jpg)

間接光 (Indirect Lighting)
二次反射。照り返し。複数回バウンドしたライティング
直接光で届かない場所へも、光が回り込む。


# Page. 97

![Page Image](https://bcdn.docswell.com/page/P7RGDGV4J9.jpg)

Direct
Lighting
Indirect
Lighting


# Page. 98

![Page Image](https://bcdn.docswell.com/page/PJXX1XZZJX.jpg)

Indirect Lighting &amp; Reﬂection
直接光 (Direct Lighting)
とある点のライティング結果が知りたいとき...
ライトからの影響だけを計算すればよい


# Page. 99

![Page Image](https://bcdn.docswell.com/page/3JKW2W8VJD.jpg)

Indirect Lighting &amp; Reﬂection
間接光 (Indirect Lighting)
二次反射。照り返し。複数回バウンドしたライティング
直接光で届かない場所へも、光が回り込む。


# Page. 100

![Page Image](https://bcdn.docswell.com/page/LE3141MQ75.jpg)

Indirect Lighting &amp; Reﬂection
間接光 (Indirect Lighting)
どこからくるのかわからない...
ライトの複数回反射を事前にシミュレートしておく必要がある
とある点のライティング結果が知りたいときは...
シーン全体を見に行く必要がある


# Page. 101

![Page Image](https://bcdn.docswell.com/page/8EDXQX6WJG.jpg)

そんな計算が沢山必要な間接光を
どうやってリアルタイムで実現するの？


# Page. 102

![Page Image](https://bcdn.docswell.com/page/V7PPLPYX78.jpg)

長く使われてきた手法
事前計算！


# Page. 103

![Page Image](https://bcdn.docswell.com/page/2JV2Q2G3JQ.jpg)

建築ビジュアライズにおけるLightmass実践使用方法 （フリーランス 真茅健一様）
間接光の実現方法
Light Bake: ライティングの焼き付け
昔から使われてきた間接光のリアルタイム表現手法
●
●
●
事前にライティング結果を計算しテクスチャで焼き付ける
このテクスチャをLightMapという
ただし、ライトもオブジェクトも変化しないシーンにのみ使える
小さなシーンでも数十時間かかることがある！


# Page. 104

![Page Image](https://bcdn.docswell.com/page/5EGRWR8YJL.jpg)

しかし、最近ようやく
リアルタイムの間接光が扱えるように。。。


# Page. 105

![Page Image](https://bcdn.docswell.com/page/4JQV3V967P.jpg)

Lumen ( Unreal Engine)
完全に動的なグローバルイルミネーション
ライトもワールドも動的変更が可能
ベイクなし、ライトマップUVなし


# Page. 106

![Page Image](https://bcdn.docswell.com/page/K74M1MXMJ1.jpg)



# Page. 107

![Page Image](https://bcdn.docswell.com/page/LJ18G8NYEG.jpg)

すごい！
もうライト置くだけで勝手にリアルになる！！
…
なる？


# Page. 108

![Page Image](https://bcdn.docswell.com/page/GJWZKZ41J2.jpg)

Indirect Lighting &amp; Reﬂection
Lumen Algorithm 概要
各メッシュの
カード形状作成
事前準備
(Editor)
Lumen Sceneの構築と
ライティング
レイトレで
GIを計算
ランタイム
アップサンプリング！


# Page. 109

![Page Image](https://bcdn.docswell.com/page/4EZ1Z12X73.jpg)

Indirect Lighting &amp; Reﬂection
Lumen Algorithm 概要
なんか色々難しいこと組み合わせて
どうにかリアルタイムで表現しようとしている！
各メッシュの
カード形状作成
事前準備
(Editor)
Lumen Sceneの構築と
ライティング
レイトレで
GIを計算
ランタイム
アップサンプリング！


# Page. 110

![Page Image](https://bcdn.docswell.com/page/Y76LZLVPJV.jpg)

映り込みなどのReﬂectionも同様です


# Page. 111

![Page Image](https://bcdn.docswell.com/page/G751W1DPE4.jpg)

※この画像は実写です
●
●
●
●
直接光: Direct Lighting
間接光: Indirect Lighting
影: Shadow
映り込み: Reﬂection


# Page. 112

![Page Image](https://bcdn.docswell.com/page/9J21Q18Z7R.jpg)

Indirect Lighting &amp; Reﬂection
参考: 反射/映り込み (Reﬂection)
反射や映り込みもGIと同様。とある点の反射を得るためには...
シーン全体から反射する部分(とその部分のシェーディングも！)を
取得する必要がある


# Page. 113

![Page Image](https://bcdn.docswell.com/page/DEYZWZ6N7M.jpg)

Reﬂection Probe
Screen Space Reﬂection
Planar Reﬂection
今までは、
事前計算などの色々な疑似手法でどうにか再現


# Page. 114

![Page Image](https://bcdn.docswell.com/page/VJN393ZVJ8.jpg)

※この画像は実写です
●
●
●
●
直接光: Direct Lighting
間接光: Indirect Lighting
影: Shadow
映り込み: Reﬂection


# Page. 115

![Page Image](https://bcdn.docswell.com/page/YE9929ZVE3.jpg)

Unreal Engine 5 における レンダリング &amp; デバッグTips
Shadow
Shadow mapの基礎


# Page. 116

![Page Image](https://bcdn.docswell.com/page/GE8959147D.jpg)

Unreal Engine 5 における レンダリング &amp; デバッグTips
Shadow
Shadow mapの基礎


# Page. 117

![Page Image](https://bcdn.docswell.com/page/LELWYWQVJR.jpg)

Unreal Engine 5 における レンダリング &amp; デバッグTips
Shadow
Shadow Mapの解像度問題
解像度低い
Shadow Map
解像度高い


# Page. 118

![Page Image](https://bcdn.docswell.com/page/4JM9N91NEW.jpg)

Unreal Engine 5 における レンダリング &amp; デバッグTips
Shadow
Shadow Mapの解像度問題
Shadow Map
解像度高い
解像度低い


# Page. 119

![Page Image](https://bcdn.docswell.com/page/PJRGDGL4E9.jpg)

BasePass
完成！
不透明オブジェクト描画
ライティング
半透明描画
Post Process


# Page. 120

![Page Image](https://bcdn.docswell.com/page/PEXX1XWZEX.jpg)

Level of Detail(LOD)
高速化するためにいまだに必要なもの


# Page. 121

![Page Image](https://bcdn.docswell.com/page/3EKW2WVVED.jpg)

Oﬃcial Document: LOD の作成と使用
Oﬃcial Document:スケルタルメッシュの LOD
Polygon Mesh
Level of Detail: コンセプト
オブジェクトのディティールを表現するために
高密度になりがちなポリゴンメッシュですが...


# Page. 122

![Page Image](https://bcdn.docswell.com/page/L7314WQQJ5.jpg)

Polygon Mesh
Oﬃcial Document: LOD の作成と使用
Oﬃcial Document:スケルタルメッシュの LOD
Level of Detail: コンセプト
すごく遠くにいたりと描画面積が小さい場合でも、
この高密度なポリゴンを計算するのは効率が悪いのは想像つくかと思います


# Page. 123

![Page Image](https://bcdn.docswell.com/page/87DXQK9WEG.jpg)

Polygon Mesh
Oﬃcial Document: LOD の作成と使用
Oﬃcial Document:スケルタルメッシュの LOD
Level of Detail (LOD) とは？
遠くにいるオブジェクトの描画負荷削減やちらつき防止のための低ポリゴンモデル
UE上で自動生成することも、独自メッシュをいれることも可能
どれぐらい遠くでメッシュが切り替わるかの設定も細かくできます


# Page. 124

![Page Image](https://bcdn.docswell.com/page/VJPPLKZXJ8.jpg)

Polygon Mesh
Oﬃcial Document: LOD の作成と使用
Oﬃcial Document:スケルタルメッシュの LOD
Level of Detail: コンセプト
このLODにより、実際に遠くでレンダリングされるメッシュは
非常に数少ないポリゴンでレンダリングできます
リアルタイムで多くのオブジェクトを高速にレンダリングするための
基礎的な手法です


# Page. 125

![Page Image](https://bcdn.docswell.com/page/2EV2QVW3EQ.jpg)

今世代の新しいオブジェクト表現術
仮想化ジオメトリ


# Page. 126

![Page Image](https://bcdn.docswell.com/page/57GRWLDYEL.jpg)



# Page. 127

![Page Image](https://bcdn.docswell.com/page/4EQV3Y16JP.jpg)



# Page. 128

![Page Image](https://bcdn.docswell.com/page/KJ4M1WRME1.jpg)



# Page. 129

![Page Image](https://bcdn.docswell.com/page/LE18GYQY7G.jpg)



# Page. 130

![Page Image](https://bcdn.docswell.com/page/GEWZKGM1E2.jpg)

BasePass
完成！
不透明オブジェクト描画
ライティング
半透明描画
Post Process


# Page. 131

![Page Image](https://bcdn.docswell.com/page/47Z1ZLQXJ3.jpg)



# Page. 132

![Page Image](https://bcdn.docswell.com/page/YJ6LZW6PEV.jpg)



# Page. 133

![Page Image](https://bcdn.docswell.com/page/GJ51WM6P74.jpg)

4Kそのままレンダリング
57.33ms
1080pでレンダリングして 4Kに
26.08ms


# Page. 134

![Page Image](https://bcdn.docswell.com/page/LE314WQ675.jpg)

Unreal Engine
Temporal Super Resolution (TSR)
●
●
低解像度のレンダリングを行いつつ、
過去の複数フレームを参照して アップスケールする手法
計算するピクセル量を減らすので、
Nanite/Lumen含めた多くの処理負荷を劇的に下げる


# Page. 135

![Page Image](https://bcdn.docswell.com/page/8EDXQK9MJG.jpg)

複数フレーム処理
TSRの注意点
ターゲットの高解像度に達する(収束する)ために、十分なサンプルを集める必要がある
100%
100%のターゲット解像度でレンダリングしたら、アップスケールも不要
そのまま 100%の画像を出力すれば良い
ターゲット
高解像度


# Page. 136

![Page Image](https://bcdn.docswell.com/page/V7PPLKZQ78.jpg)

複数フレーム処理
TSRの注意点
ターゲットの高解像度に達する(収束する)ために、十分なサンプルを集める必要がある
70%
70%
内部解像度が低くなるにつれ、必要なフレームが増える
ターゲット
高解像度


# Page. 137

![Page Image](https://bcdn.docswell.com/page/2JV2QVWPJQ.jpg)

複数フレーム処理
TSRの注意点
ターゲットの高解像度に達する(収束する)ために、十分なサンプルを集める必要がある
50%
50%
50%
50%
内部解像度が低くなるにつれ、必要なフレームが増える
ターゲット
高解像度


# Page. 138

![Page Image](https://bcdn.docswell.com/page/5EGRWLDQJL.jpg)

複数フレーム処理
TSRの注意点
ターゲットの高解像度に達する(収束する)ために、十分なサンプルを集める必要がある
．．．
50%
50%
60fps → 30fpsになると、収束する時間も倍になる
ターゲット
高解像度


# Page. 139

![Page Image](https://bcdn.docswell.com/page/4JQV3Y1W7P.jpg)

複数フレーム処理
TSRの注意点
内部解像度が低かったり、フレームレートが遅い中で画面が大きく動くとボケやすい
https://twitter.com/tempkinder/status/1639482361871216


# Page. 140

![Page Image](https://bcdn.docswell.com/page/K74M1WR1J1.jpg)

BasePass
完成！
不透明オブジェクト描画
ライティング
半透明描画
Post Process


# Page. 141

![Page Image](https://bcdn.docswell.com/page/LJ18GYQ5EG.jpg)

画面全体の色を変える
PostEﬀect
煙のエフェクト一個
どちらが重たいでしょう？？


# Page. 142

![Page Image](https://bcdn.docswell.com/page/GJWZKGMWJ2.jpg)

右の煙のワイヤーフレーム表示
煙のエフェクト一個
半透明描画では、
透明でも沢山のピクセルを描画している可能性がある


# Page. 143

![Page Image](https://bcdn.docswell.com/page/4EZ1ZLQ273.jpg)

半
透
明
半
透
明
半
透
明
半
透
明
半透明オブジェクトははすり抜けるので何回も計算しなけばいけない
不
透
明


# Page. 144

![Page Image](https://bcdn.docswell.com/page/Y76LZWN6JV.jpg)

画面全体の色を変える
PostEﬀect
煙のエフェクト一個
たった一個のエフェクトでも、描画するピクセル数が増えれば
PostEﬀect以上の負荷に簡単に跳ね上がる可能性があります


# Page. 145

![Page Image](https://bcdn.docswell.com/page/G751WM55E4.jpg)

Translucent
半透明リアルタイムレンダリングの大きな壁
様々な問題があります
1. 描画負荷
2. 描画順序
3. デプスを描画しない
今回時間の都合上割愛しますが。。。大変！！！


# Page. 146

![Page Image](https://bcdn.docswell.com/page/9J21Q9NG7R.jpg)

UE5の最新グラフィクスを使いこなすための4個の勘所
UE5がメインとなりますが、
現代のリアルタイムレンダリング技術の注意点を紹介しています


# Page. 147

![Page Image](https://bcdn.docswell.com/page/DEYZW4PG7M.jpg)

ちょっと脇道


# Page. 148

![Page Image](https://bcdn.docswell.com/page/VJN39Y58J8.jpg)

アニメ調やイラスト調はどう作るの？


# Page. 149

![Page Image](https://bcdn.docswell.com/page/YE992PYXE3.jpg)

同じレンダリングフロー内で
様々なテクニックを駆使して作っています！


# Page. 150

![Page Image](https://bcdn.docswell.com/page/GE895D697D.jpg)

シルエット用のオブジェクトを
レンダリングして重ねたり...


# Page. 151

![Page Image](https://bcdn.docswell.com/page/LELWYM9MJR.jpg)

UE5 Oﬃcial Document: ポストプロセスマテリアル
Post Processで頑張ったり
3D人さん(@ymt3d)による
Stylized PostProcess for Unreal Engine 5 機能紹介とv2.0への展望
Alweiさん(@aizen76)による
UE5 初心者・入門者向けPPLineDrawing導入手順


# Page. 152

![Page Image](https://bcdn.docswell.com/page/4JM9NYZ6EW.jpg)

おすすめ記事
CGWORLD:
原画イラストの再現を目指した個性的な
キャラクターと悪魔たち『真・女神転生V』


# Page. 153

![Page Image](https://bcdn.docswell.com/page/PJRGD96NE9.jpg)

BasePass
完成！
不透明オブジェクト描画
ライティング
このセクションのまとめ
各項目をもう一歩深堀り
半透明描画
Post Process
リアルでリッチな表現を実現するため
様々な新機能が実装されています
ただし、それらはまだ完ぺきではなく
得手不得手を理解して
注意深く使用する必要があります


# Page. 154

![Page Image](https://bcdn.docswell.com/page/PEXX1QM8EX.jpg)

Agenda
●
リアルタイムレンダリング？？
●
超ざっくりレンダリングフロー
●
各項目をもう一歩深堀り
●
次の一歩へ
（アートの道 / 技術の道）
●
まとめ


# Page. 155

![Page Image](https://bcdn.docswell.com/page/3EKW29GLED.jpg)

次の一歩へ


# Page. 156

![Page Image](https://bcdn.docswell.com/page/L7314WN6J5.jpg)

アート
リアルタイム
レンダリング
に関わる全ての人に
知ってほしい
前提知識
=
基本となる
レンダリングフロー
本日お話したこと
技術


# Page. 157

![Page Image](https://bcdn.docswell.com/page/87DXQKWMEG.jpg)

ただ、
今日紹介したフローは
ほんとうにざっくりしたもの。。。


# Page. 158

![Page Image](https://bcdn.docswell.com/page/VJPPLK9QJ8.jpg)

Unreal Engine 5 レンダリングフロー総おさらい(2024)
UE5がメインとなりますが、
レンダリングフローをより詳細に説明しています


# Page. 159

![Page Image](https://bcdn.docswell.com/page/2EV2QVMPEQ.jpg)

アート
リアルタイム
レンダリング
に関わる全ての人に
知ってほしい
前提知識
=
基本となる
レンダリングフロー
更に深い知識やスキルを身に着けていくためには
技術


# Page. 160

![Page Image](https://bcdn.docswell.com/page/57GRWLGQEL.jpg)

更に深堀する際、
エンジニアリングに行きたいか?
アートに行きたいか?
で学ぶものが変わっていきます
学生さんやキャリアを考える人の参考になればと考えをまとめます


# Page. 161

![Page Image](https://bcdn.docswell.com/page/4EQV3YXWJP.jpg)

アート
技術
自分がどこに責任をもちたいか


# Page. 162

![Page Image](https://bcdn.docswell.com/page/KJ4M1W61E1.jpg)

アート
技術
基本となるレンダリングフロー
(レンダリングのアルゴリズム)


# Page. 163

![Page Image](https://bcdn.docswell.com/page/LE18GYV57G.jpg)

アート
技術
基本となるレンダリングフロー
(レンダリングのアルゴリズム)
レンダリングフローの実装
CPU実装
GPUに描画コマンドを送る
CPU側: DirectX / OpenGLなど
GPU描画処理


# Page. 164

![Page Image](https://bcdn.docswell.com/page/GEWZKGLWE2.jpg)

アート
表現したいもの
技術
リアルタイムレンダリングに適した
アセット作成やシーン作成
基本となるレンダリングフロー
(レンダリングのアルゴリズム)
レンダリングフローの実装
CPU実装
GPUに描画コマンドを送る
CPU側: DirectX / OpenGLなど
GPU描画処理


# Page. 165

![Page Image](https://bcdn.docswell.com/page/47Z1ZLM2J3.jpg)

アート
表現したいもの
技術
リアルタイムレンダリングに適した
アセット作成やシーン作成
基本となるレンダリングフロー
(レンダリングのアルゴリズム)
レンダリングフローの実装
CPU実装
ゲームエンジンなどが
カバーしている領域
GPUに描画コマンドを送る
CPU側: DirectX / OpenGLなど
GPU描画処理


# Page. 166

![Page Image](https://bcdn.docswell.com/page/YJ6LZW56EV.jpg)

リアルタイムレンダリング技術を深堀りしたい人におすすめの
次のステップ


# Page. 167

![Page Image](https://bcdn.docswell.com/page/GJ51WMY574.jpg)

アート
表現したいもの
技術
リアルタイムレンダリングに適した
アセット作成やシーン作成
基本となるレンダリングフロー
(レンダリングのアルゴリズム)
GPUがどう描画処理を
するかを見てみては？？
レンダリングフローの実装
CPU実装
GPUに描画コマンドを送る
CPU側: DirectX / OpenGLなど
GPU描画処理


# Page. 168

![Page Image](https://bcdn.docswell.com/page/9E21Q9GGJR.jpg)

(Unreal Engineの話になってしまいますが）
Unreal Insight を使って
レンダリングフローがどのようにGPUで処理されているかを見てみよう


# Page. 169

![Page Image](https://bcdn.docswell.com/page/D7YZW4VGJM.jpg)

また、更に詳細がわかるキャプチャツールやプロファイツールを触ってみよう！
例: PiX


# Page. 170

![Page Image](https://bcdn.docswell.com/page/VEN39YM8E8.jpg)

【UE5】PIXでピクセルデバッグ – Unreal Engine 5.4
Kafues511さんが非常に丁寧に
UE5でPiXを用いてキャプチャする方法を説明してくれています！


# Page. 171

![Page Image](https://bcdn.docswell.com/page/Y7992PNX73.jpg)

これらをより理解するために、
自分の持ってるGPUの会社のブログを読みはじめよう！


# Page. 172

![Page Image](https://bcdn.docswell.com/page/G7895DK9JD.jpg)

アート
表現したいもの
技術
リアルタイムレンダリングに適した
アセット作成やシーン作成
基本となるレンダリングフロー
(レンダリングのアルゴリズム)
アーティストは？
レンダリングフローの実装
CPU実装
GPUに描画コマンドを送る
CPU側: DirectX / OpenGLなど
GPU描画処理


# Page. 173

![Page Image](https://bcdn.docswell.com/page/L7LWYMZMER.jpg)

自分はアーティストではないので、
知り合いのアーティスト達に相談しました
ここからは彼らの言葉を代弁します


# Page. 174

![Page Image](https://bcdn.docswell.com/page/4EM9NYV67W.jpg)

アート
表現したいもの
技術
リアルタイムレンダリングに適した
アセット作成やシーン作成
基本となるレンダリングフロー
(レンダリングのアルゴリズム)
アーティストといっても
様々な業種がある...
またこの辺りはツールや
時代に非常に依存する...
レンダリングフローの実装
CPU実装
GPUに描画コマンドを送る
CPU側: DirectX / OpenGLなど
GPU描画処理


# Page. 175

![Page Image](https://bcdn.docswell.com/page/PERGD92N79.jpg)

アート
表現したいもの
技術
リアルタイムレンダリングに適した
アセット作成やシーン作成
基本となるレンダリングフロー
(レンダリングのアルゴリズム)
毎年ツールが変わるぐらい
の覚悟をもって、
日々様々なツールを
学習し続けよう！
レンダリングフローの実装
CPU実装
GPUに描画コマンドを送る
CPU側: DirectX / OpenGLなど
GPU描画処理


# Page. 176

![Page Image](https://bcdn.docswell.com/page/P7XX1QD87X.jpg)

アート
表現したいもの
技術
リアルタイムレンダリングに適した
アセット作成やシーン作成
CGに活きる
アートスキル、
目を養おう！！
CGに活きるって？
どうやって？
基本となるレンダリングフロー
(レンダリングのアルゴリズム)
レンダリングフローの実装
CPU実装
GPUに描画コマンドを送る
CPU側: DirectX / OpenGLなど
GPU描画処理


# Page. 177

![Page Image](https://bcdn.docswell.com/page/37KW29XL7D.jpg)

CGや絵ではなく、
実写の映画、写真などを沢山見よう！
好きなカットを集めよう！
その理由を考えよう！


# Page. 178

![Page Image](https://bcdn.docswell.com/page/LJ314W56E5.jpg)

なんで実写？？


# Page. 179

![Page Image](https://bcdn.docswell.com/page/8JDXQKDM7G.jpg)

※この画像は実写です
ライト
カメラ
形状
質感
CGレンダリングは
現実の光の挙動の物理シミュレーション


# Page. 180

![Page Image](https://bcdn.docswell.com/page/VEPPLKXQE8.jpg)

ここまで来て気づきました。。。


# Page. 181

![Page Image](https://bcdn.docswell.com/page/27V2QVLP7Q.jpg)

アート
表現したいもの
技術
リアルタイムレンダリングに適した
アセット作成やシーン作成
3Dグラフィックスに関わる
基本となるレンダリングフロー
エンジニア、アーティスト
(レンダリングのアルゴリズム)
どちらも学ぶべき
レンダリングフローの実装
CPU実装
もう1つのレイヤーあった。。。
GPUに描画コマンドを送る
CPU側: DirectX / OpenGLなど
GPU描画処理


# Page. 182

![Page Image](https://bcdn.docswell.com/page/5JGRWLXQ7L.jpg)

※この画像は実写です
ライト
カメラ
形状
質感
CGレンダリングは
現実の光の挙動の物理シミュレーション


# Page. 183

![Page Image](https://bcdn.docswell.com/page/47QV3Y8WEP.jpg)

カメラを中心とした現実の撮影技術
またその原理を理解する必要がある！！！


# Page. 184

![Page Image](https://bcdn.docswell.com/page/KE4M1W2171.jpg)

レンダリングフロー以外にも学ぶべき大切なことの一つ
アート
技術
カメラやライト
を用いた様々な
表現方法
カメラ,
ライト,
色
の基本的な仕組み
それをどうリアル
タイムCGで実現
するかの実装方法


# Page. 185

![Page Image](https://bcdn.docswell.com/page/L718GYM5JG.jpg)

18%Gray
Exposure
Color
Management
RAW
HDR
SS/Aperture
カメラやライトの仕組みは
アーティストやエンジニアの共通言語
(映像からリアルタイムに来た人などは特に精通している場合が多い)


# Page. 186

![Page Image](https://bcdn.docswell.com/page/G7WZKG3W72.jpg)

しかし
カメラは
とても高い...


# Page. 187

![Page Image](https://bcdn.docswell.com/page/4JZ1ZLV2E3.jpg)

携帯で十分
スタートできる！
ある程度のマニュアル設定で撮影で
きるカメラアプリが沢山あります！
例: Lightroom mobile (無料)
Android
iOS


# Page. 188

![Page Image](https://bcdn.docswell.com/page/YE6LZWY67V.jpg)

CG空間でも
スタートできる！
例えば、
Unreal EngineのVirtual Cameraも
無料で様々なレンズの画角やカメラ
設定を試せます！


# Page. 189

![Page Image](https://bcdn.docswell.com/page/GE51WMG5J4.jpg)

おすすめ講演
ライティングのヒント：なぜCGアーティストは光に興味がないのか？
|Unreal Fest Tokyo 2025
Square Enix 木村さん


# Page. 190

![Page Image](https://bcdn.docswell.com/page/9721Q9YGER.jpg)

今日紹介したレンダリングフローは
基礎的なものアーティストもエンジニ
アも共通認識でもっておくべきもの
このセクションのまとめ
次の一歩へ
次に学ぶこととして
エンジニアはGPUの挙動を
アーティストは実写の撮影表現を
提案しました
更に、
レンダリングフローだけではなく、
カメラの基礎ももう一つの大きな分野
無料で試せる方法があるので、
今から試してみましょう！


# Page. 191

![Page Image](https://bcdn.docswell.com/page/DJYZW4GGEM.jpg)

Agenda
●
リアルタイムレンダリング？？
●
超ざっくりレンダリングフロー
●
各項目をもう一歩深堀り
●
次の一歩へ
（アートの道 / 技術の道）
●
まとめ


# Page. 192

![Page Image](https://bcdn.docswell.com/page/V7N39YG878.jpg)

まとめ


# Page. 193

![Page Image](https://bcdn.docswell.com/page/YJ992PWXJ3.jpg)

ゲームエンジンなどの
様々な便利ツール
誰もが気軽にハイクオリティなグラフィックスを
使える様になった！。。。けど。。。


# Page. 194

![Page Image](https://bcdn.docswell.com/page/GJ895DN9ED.jpg)

なんかよくわかんないけど
絵が全然綺麗にならない！！


# Page. 195

![Page Image](https://bcdn.docswell.com/page/LJLWYMPM7R.jpg)

中身を知っていると
自分の表現したいものを実現しやすくなり
更に苦手な部分の解消になったり


# Page. 196

![Page Image](https://bcdn.docswell.com/page/47M9NY46JW.jpg)

ゲームエンジンなどの
様々な便利ツール
アート
技術
3DCGは
アーティストとしてのアート力
またエンジニアとしての技術力が共に重要


# Page. 197

![Page Image](https://bcdn.docswell.com/page/P7RGD9WNJ9.jpg)

アート
学生も！
ゲームの中身が気にな
るゲーム好きな方も！
技術
リアルタイム
レンダリング
に関わる全ての人に
知ってほしい
前提知識
本日お話しすること
ゲームデザイナーも
プロデューサーも
なんとなくは
知ってほしい！


# Page. 198

![Page Image](https://bcdn.docswell.com/page/PJXX1QP8JX.jpg)

※この画像は実写です
CGレンダリングは
現実の光の挙動の物理シミュレーション


# Page. 199

![Page Image](https://bcdn.docswell.com/page/3JKW29DLJD.jpg)

オフラインとリアルタイムのレンダリング時間比較
1時間
22万5千倍速い!
オフラインレンダリング
（様々なので1枚1時間と仮定、
これはめちゃくちゃ速い方）
0.016秒
リアルタイムレンダリング
(60fpsと仮定)


# Page. 200

![Page Image](https://bcdn.docswell.com/page/LE314WR675.jpg)

GPU
Graphics
Processing
Unit


# Page. 201

![Page Image](https://bcdn.docswell.com/page/8EDXQKYMJG.jpg)

Monitor
では、GPUにどのような計算をさせて
描画されているのかを見ていきます


# Page. 202

![Page Image](https://bcdn.docswell.com/page/V7PPLK6Q78.jpg)

ディファード
レンダリング
PCやコンソールなどでのスタンダード
なリアルタイムレンダリング手法
オブジェクトの情報をG-Buﬀerに書きだし(BasePass)、
後にライティング
見える部分だけライティング計算されるため負荷を抑えられる


# Page. 203

![Page Image](https://bcdn.docswell.com/page/2JV2QV3PJQ.jpg)

BasePass
完成！
不透明オブジェクト描画
ライティング
半透明描画
Post Process


# Page. 204

![Page Image](https://bcdn.docswell.com/page/5EGRWL3QJL.jpg)

Lumen ( Unreal Engine)
完全に動的なグローバルイルミネーション
ライトもワールドも動的変更が可能
ベイクなし、ライトマップUVなし


# Page. 205

![Page Image](https://bcdn.docswell.com/page/4JQV3Y5W7P.jpg)



# Page. 206

![Page Image](https://bcdn.docswell.com/page/K74M1W91J1.jpg)



# Page. 207

![Page Image](https://bcdn.docswell.com/page/LJ18GYK5EG.jpg)

アート
表現したいもの
技術
リアルタイムレンダリングに適した
アセット作成やシーン作成
基本となるレンダリングフロー
(レンダリングのアルゴリズム)
GPUがどう描画処理を
するか見てみては？？
レンダリングフローの実装
CPU実装
GPUに描画コマンドを送る
CPU側: DirectX / OpenGLなど
GPU描画処理


# Page. 208

![Page Image](https://bcdn.docswell.com/page/GJWZKGDWJ2.jpg)

アート
表現したいもの
技術
リアルタイムレンダリングに適した
アセット作成やシーン作成
CGに活きる
アートスキル、
目を養おう！！
CGに活きるって？
どうやって？
基本となるレンダリングフロー
(レンダリングのアルゴリズム)
レンダリングフローの実装
CPU実装
GPUに描画コマンドを送る
CPU側: DirectX / OpenGLなど
GPU描画処理


# Page. 209

![Page Image](https://bcdn.docswell.com/page/4EZ1ZLG273.jpg)

CGや絵ではなく、
実写の映画、写真などを沢山見よう！
好きなカットを集めよう！
その理由を考えよう！


# Page. 210

![Page Image](https://bcdn.docswell.com/page/Y76LZWQ6JV.jpg)

カメラを中心とした現実の撮影技術
またその原理を理解する必要がある！！！


# Page. 211

![Page Image](https://bcdn.docswell.com/page/G751WMR5E4.jpg)

携帯で十分
スタートできる！
ある程度のマニュアル設定で撮影で
きるカメラアプリが沢山あります！
例: Lightroom mobile (無料)
Android
iOS


# Page. 212

![Page Image](https://bcdn.docswell.com/page/9J21Q9DG7R.jpg)

Thank you!


