UnrealEngineで写真を撮ろう (UE Tokyo.dev #3)

30.7K Views

June 14, 24

スライド概要

UE Tokyo.devで発表した趣味全開のスライドです

profile-image

UnrealEngineエンジニア

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

1 UnrealEngineで写真を撮ろう UnrealEngine5で始めるカメラ趣味

2.

自己紹介  墨崎 達哉(すみさき たつや)  X (Twitter) : @T_Sumisaki  SNS、Forum、Discordで 野良トラブルシューティング  関東に移動して4ヶ月ぐらい  ひきこもり  レンズ沼1年生 2

3.

前置き  最近カメラ熱が高い  欲しいレンズいっぱい…でも高い!!  UnrealEngineには、リアルカメラに合わせた設計のCineCameraが ある  満足できるかどうかはまた別  カメラを学べば、ゲーム内での表現力の向上につながる…かも?  わりと勢いで30分枠を取ったので、どうかお付き合いください 3

4.

今日話すこと、話さないこと  話すこと  CineCameraの使い方  リアルカメラとの対応  ぼけの使い方  ポストプロセス  話さないこと  構図とか 4

5.

UnrealEngineのカメラ UnrealEngineでは、2種類のカメラが存在する  Camera  主にゲーム中に使われるカメラ  画角はFOVでコントロールする  青いやつ  CineCamera  主にカットシーン、動画撮影で使われるカメラ  画角はセンサーサイズと焦点距離でコントロールする  黒いやつ 5

6.

CineCamera  主にカットシーン、動画撮影用のCamera  現実のカメラに寄せた設定項目  センサーサイズ、F値、焦点距離  センサープリセット、レンズプリセット、クロップ設定など 6

7.

作例 7

8.

写真のとり方  CameraをPilot状態にし、HighResolutionScreenshotを実行する  Simulate、あるいはGameModeにしておくと良い  解像度もバッチリキメるならコンソールコマンドを使う 8

9.

「ぼけ」の要素  ぼけの大きさをコントロールする要素は4つ 1. 絞り(F値) 2. 焦点距離 3. 撮影距離 4. 背景との距離 9

10.

F値 10  絞りの大きさの違いからくる、カメラに取り込む光の量を数値化したもの  F値が小さいほどレンズを通る光の量が多くなる  F値が小さいほど、被写界深度(DoF)が浅くなり、背景がよくぼける https://www.sony.jp/support/ichigan/enjoy/photo/word6.html

11.

F値 11  UnrealEngineでは、光を用いて撮影するわけではないため、 F値はぼけ具合を決めるパラメータの一つとしてのみ扱われる  リアルカメラではF値を上げる事により発生しやすくなる周辺減光も UnrealEngineでは起こらない  周辺減光についてはのちほど…

12.

F値=1.4 12

13.

F値=5.6 13

14.

F値=13 14

15.

焦点距離  レンズの中心点からイメージセンサー(フィルム面)までの距離  数字が小さいほど、広い範囲を映すことができる  数字が大きいほど、より遠くのものを大きく映すことができる  現実のカメラではだいたい下記のような分類になっている(諸説あり)  広角レンズ:~35mm  標準レンズ:50mm前後(35mm~85mm)  望遠レンズ:85mm~ 15

16.

デフォルトカメラ 16

17.

広角レンズ(12mm) 17

18.

広角レンズ  パースが効きやすく、奥行き感のある画が撮れる  遠近感を強調できる  被写体と同時に、背景もしっかり映すことができる  被写界深度が深いので、広い範囲にピントが合わせやすい  逆に言えば、強いボケが出しづらいということでもある 18

19.

標準レンズ(50mm) 19

20.

標準レンズ  人間の目に近い画角、パース感のレンズ(50mm付近)  自然な画角や距離感、雰囲気で撮影できる  写真、といえばこの画角って感じ 20

21.

望遠レンズ(200mm) 21

22.

望遠レンズ  遠くの被写体を大きく映す事ができるレンズ  圧縮効果がつよい  背景に柔らかいボケを重ねることで、被写体の印象や感情にクローズアッ プできる  ゲームエンジン上で使う場合はちょっとコントロールがしづらいかも 22

23.

焦点距離とFoVの関係  焦点距離とFoVの変換式は以下の通り FoV = 2 × arctan 𝑠𝑖𝑧𝑒𝑓 Τ2 size: 水平長さ, f: 焦点距離  UnrealEngineの標準であるFOV=90°はフルサイズ換算だと18mmぐらい  16:9だと11.88mm  現実のカメラと比べると、かなり広角な部類である 23

24.

センサーサイズ  レンズを通って結像した画像を受け止めるセンサーのサイズ  焦点距離とセンサーサイズによって、画角が決まる  焦点距離とFoVの関係、のページを参照  デジタルカメラ(一眼)でよくあるのは以下の2つ  APS-C(23.4mm✕16.7mm)  フルサイズ(36mm✕24mm) 24

25.

レンズ設定の選び方  CineCameraActorの詳細パネルにある LensSettingsで選択する  デフォルトでポピュラーなレンズプリセットが 登録されている 25

26.

レンズプリセットの追加  ProjectSettingsからレンズプリセットを追加できる  お気に入りのレンズ設定を作っておくと良い 26

27.

UEのカメラでは起こらないこと  レンズの物理的特性による画像の変化  周辺減光、口径食  倍率色収差  歪曲収差 物理的な仕組みが違うので、これらは起こらないが、演出とし て求められる場合がある 27

28.

周辺減光、口径食  周辺減光とは、写真の周辺部分が暗くなること その原因として、コサイン4条則や口径食がある  F値が小さく、広角のレンズほど出やすい  UnrealEngineではこれらは起こらない  口径食(Vinette)に関しては、ポストプロセスで同じ効果を持つものが ある  トンネル効果 28

29.

倍率色収差  光の屈折により、画面周辺部で光の波長ごとに結像の位置が異なってしま い、色がブレる現象のこと  これもカメラに関係なく、ポストプロセスとして実装されている  UnrealEngineでは「なんとなくかっこいい演出効果」として気軽に取り入れ られがち 29

30.

歪曲収差  レンズによる画像の歪み  広角レンズによくある「樽型歪み」  望遠レンズに見られる「糸巻き型歪み」  ゲームではあまり利用されているイメージはないが 映像作品や建築関係のシミュレーターでは求められるイメージ  実装する場合はそこそこ苦労する 30

31.

今回対象外にしたもの  露光(自動露出)  今回はボケがテーマなので…  シャッタースピード  リアルカメラでは重要な要素  UnrealEngineでもモーションブラーの出方に関わってくるが 写真を撮る、というテーマにおいてはいまいち効果が薄かった  ISO  これもリアルカメラでは重要な要素  項目はあるのだが、こちらもあまり影響がわからない 31

32.

32 ちょっと休憩…

33.

理想のレンズ(物理)を再現する  The REAL Reason Unreal Engine VFX Looks FAKE  https://www.youtube.com/watch?v=2SsTk657Uw0  パストレーサーを使ったレンズシミュレーター  わりと力押しで楽しい発想  レンズ設計沼向け 33

34.

34 ここからは、ポストプロセスの話

35.

CinematicDOFが思ったよりボケない件 Forumでまれに質問があるのですが…  F値を下げても思ったようにボケない  焦点距離はあっているはず 35

36.

設定すればちゃんとボケます 36

37.

比較対象としてほぼボケてないものを 37

38.

ぼかしのコツ 先に説明した「ぼけの要素」を思い出してください 1. 絞り(F値) 2. 焦点距離 3. 撮影距離 4. 背景との距離 38

39.

ぼかしのコツ  まとめると  F値が小さいとぼける  焦点距離が長いほどぼける  撮影距離が近いほどぼける  背景との距離が遠いほどぼける  参考  https://www.sony.jp/support/ichigan/enjoy/photo/word3.html 39

40.

広角なら近づいてみる 40

41.

あえて望遠に 41

42.

ポストプロセスを用いたぼかし  もっとアーティスティックにぼかしたい!という場合はポストプロセスを 活用する  F値とか距離差なんて知るか!もっと直接的にぼかしたい!  リアルなぼけだと物足りない 42

43.

GaussianBlur  ぼかしといえばこれ  ただし、PC向けのDoFとしてはすでにエンジンから削除されている   モバイル向けに機能が残っている程度 実装も比較的簡単 43

44.

GaussianBlur 44

45.

SceneDepthを使ったマスク  SceneDepthを使えば、昔のDoFのような設定方法が組める  フォーカス距離、フォーカス幅など  自由にぼかしたい、というときはカメラ設定よりこちらの方が直感的かも 45

46.

SceneDepthを使ったマスク 46

47.

SNN  Synmetric Nearest Neighbor  エッジを残しつつブラーをかける平滑化フィルター  形を残しつつ、細部はしっかりぼかすことができる 47

48.

SNN 48

49.

KuwaharaFilter  油絵っぽい見た目になる平滑化フィルター  強く掛けるとシルエットを大きく崩すことも可能  スタイライズドフィルターとしてよく実装されているイメージ 49

50.

KuwaharaFilter 50

51.

SphereMaskを使ったマスク  SphereMaskを使えば、ちょっと違った感じの演出効果が作れる…かも 51

52.

SphereMaskを使ったマスク 52

53.

ちょっと技術的なTips  CustomNodeでSceneTextureを取得するときの補正  CustomNodeでSceneTextureを取得するときのMobile向け分岐 (UE5.4)  おまけ 53

54.

SceneTextureを取得するときの補正  BeforeTonemappingのタイミングで、CustomNodeで SceneTextureLookupから出てくる値をそのまま使うと、Exposureが効 いているシーンにおいて色が一致しなくなる  SceneColor(PostProcessInput0)を参照する場合は、Exposure分の補正が 必要になる  SceneTextureノードを使うときはしれっと補正が入る  View.OneOverPreExposureを掛ける 54

55.

SceneTextureを取得するときの補正 55

56.

SceneTextureを取得するときの補正 56

57.

SceneTextureのMobile向け分岐(UE5.4)  CustomNodeでSceneTextureを取得するコードを書くと、DirectX Mobile向けのシェーダーでコンパイルエラーが発生する  UE5.4ではそれ以前とシェーダコンパイルの範囲(?)が違うようで MobileShaderPath用のSceneTextureLookupを実行する分岐が必要 static const int SceneTextureID = 14; const float2 UV = GetDefaultSceneTextureUV(Parameters, SceneTextureID); #if !SHADING_PATH_MOBILE return SceneTextureLookup(UV, SceneTextureID, 0); #else return MobileSceneTextureLookup(Parameters, SceneTextureID, UV); #endif 57

58.

SceneTextureのMobile向け分岐(UE5.4) 58

59.

おまけ  UE5.4ではマテリアルノードのワイヤーにマウスオーバーすると、接続先 がどのノードのどのピンかわかるようになった 59

60.

60 おわり

61.

参考資料  Focal Length and Field of View(ラーニング)  https://dev.epicgames.com/community/learning/tutorials/LepK/unreal- engine-focal-length-and-field-of-view  CineCameraを使った撮影入門 61