ゲームエフェクトデザイナーのブログ | A Real-Time VFX Artist's Blog

About Making Materials on UE, Making Tools with C#, etc

GDC 2017 | Visual Effects Bootcamp: The Rise of Realtime

English Effect Texture UE4 / UE5 Houdini Math

GDC 2017 の講演「Visual Effects Bootcamp: The Rise of Realtime」から、重要なトピックと英語表現を取り上げてみる記事になります。

GDC Vault - Visual Effects Bootcamp: The Rise of Realtime

「The Rise of Realtime」は「リアルタイム（技術）の進歩」みたいな感じでしょうか。

前半は元 Naughty Dog Lead FX Artist・現 BEYOND-FX Studio Head の Keith 氏によりコミュニティを通じて広がっていった様々なテクニックについて語られ、後半は Google の Drew 氏により Tilt Brush について語られています。

2017 年の講演なので 5 年前に遡りますが、当時の real-time VFX 関連技術が包括的に紹介されているため、取り上げておきたいと思いました。

 

冒頭


まず Drew 氏がこれまでを振り返ります。

2012 年に Facebook に VFX のコミュニティが開設され、参加者が爆発的に増えた後に  Keith 氏らと「Real Time VFX」を立ち上げたことが話されます。

その後 Keith 氏は「The Game Makers: Inside Story」（ゲームにおけるストーリーテリングについて 10 部構成のウェブシリーズ）に携わり、VFX を手掛ける BEYOND-FX を立ち上げられたとのこと。動画では小島秀夫さんも語られていますね！

 

これまでの経緯


スピーカーは Keith 氏に交代、氏からもそれまでの経緯の話がなされます。

コミュニティ形成により互いに課題について話し合うことができるようになり、その中で数々の素晴らしいテクニックがシェアされ業界標準の技術として採用されてきたと語られます。

these are all really cool innovations that we're sharing as a community and that are becoming adopted as industry standards.
これらはすべて、私たちがコミュニティとして共有している本当に素晴らしい革新的技術です。そして、それらは業界標準として採用されつつあります。


また 2013 年に PlayStation 4 と XboxOne が登場したことが我々エフェクトアーティストにとって大きな出来事であり「we finally had a little bit of wiggle room to start to innovate.（イノベーションを起こすための余裕が少し生まれた）」と指摘します。

私もこれまでのハードウェアの変遷を振り返ると‥
PS2 から PS3 になって下記のような大きな変革があったかと思います。

  • ブラウン管から液晶ディスプレイに
  • 解像度も 4:3 から 16:9 に
  • それまで沢山描画できていた半透明が重たいと言われるように
  • 純粋なテクスチャとモデルでの表現からシェーダーで表現する時代に


そして PS3 から PS4 に変わった時にはこちらのような変革があった印象です。

  • 国内でも PBR やディファードレンダリングが当たり前に
  • 2014 年に UE4 が登場して 1 年後に無料化される
  • アーティストがマテリアルを触って自ら新しい表現や独自の工夫を生み出すことができる時代に

一方で、マテリアル・ライティング・ポスプロを含めたレンダリング周りで覚えることが一気に増えてキャッチアップが大変になったなと思います。

ついでに言えば PS4 から PS5 の印象はこんな感じでしょうか。

  • 大型タイトルで 4K / HDR 対応が珍しくない時代に
  • ロードが高速に！
  • UE5 登場（ Nanite と Lumen が革新的！）
  • EmberGen・Fluid Ninja Live・Niagara Fluids が凄い
    • リアルタイム流体が一歩現実的に？

Keith 氏が指摘するように、実際 PS4 時代になってリアルタイムグラフィックスの知識・課題や解決策の情報が沢山求められるようになりました。

まさにそのあたりがテーマになっているスライドがこちら。

久々に読みましたが、あらためてとても沢山の情報が詰まっていますね。。

Motion Vector の活用


Keith 氏は Flipbook を扱う上で下記のように制限がある旨を指摘します。
ちなみにフリップブックアニメさせることを「Do Flipbook」と表現するんですね！

So if you're doing a Flipbook, you're bound by file size.
もしあなたがフリップブックを行う場合、ファイルサイズに縛られることになります。

As soon as you're limited by a file size, it's a lose-lose situation of the resolution that you're giving each individual frame of that file size or your frame rate.
ファイルサイズが制限されるとたちまち、あなたが与えるそのファイルサイズの個々のフレームの解像度やフレームレートの状況は双方にメリットが無くなります。


グラフィックスメモリに余裕があるならテクスチャサイズを大きくできますが、現実問題 Flipbook の枚数が足りない場合に Flipbook 間のパターンをフローマップのように Motion Vector テクスチャで補間させるアイデアが登場したことが紹介されます。
Klemen Lozar's Online Portfolio

こちらは当時、記事を見てテンションが上がったのを覚えています。
（UE でのマテリアルの構成まで載っていて素晴らしいですね！）

全フレーム分の Vector 情報が必要なためテクスチャサイズが増えることになりますが、Keith 氏は低解像度で大丈夫と説明されています。通常のケースではブレンド再生で十分な印象ですが、ゲーム中に超スローモーションが頻繁に起こるような場合、今でも非常に有効かも知れません。

● Flowmap

途中でフローマップについて説明がありますが、その際に Naughty Dog のプレゼンテーションが紹介されていました。こちらも色々なテクニックが詰まっています。

また、かなり前になりますが、私も勉強会でフローマップについて説明した時のスライドがあります。ご興味ある方はこちらもどうぞ。
Slide/UE4アーティスト向け勉強会 at master · moko-vfx/Slide · GitHub

● Motion Vector 作成ツール

Flipbook 用の Motion Vector テクスチャを作成する際、Houdini を使う方法・After Effects プラグインの Twixtor を使う方法・Alex Underhill 氏が開発したツール Slate Editor を使う方法があり、中でも Slate Editor が Keith 氏の一番のお気に入りだそうです。

公式サイト：FacedownFX ltd

Real-Time VFX で Motion Vector の作成方法について議論されているスレッド
Motion Vectors (for animated textures), How do you generate them? - Real Time VFX

● リアルタイムでの Motion Vector 生成

そして SIGGRAPH 2015 で発表されたリアルタイムで Motion Vector を生成するテクニック（Uncharted 4 で使われている）の紹介がありました。

"Chasing Film in 5ms: A Look at the Real-TimeVFX of Uncharted 4"
Insights in Game Production | SIGGRAPH 2015

講演の動画を当時観たような気がしますがどうやら残っていない‥？http://s2015.siggraph.org/attendees/talks/events/chasing-film-5ms-look-real-time-vfx-uncharted-4-thiefs-end（リンク切れ）

当時の Uncharted 4 の VFX 周りの記事をいくつか貼っておきます。

 

Lighting and Rendering


次に、Flipbook テクスチャを色情報としてではなくシェーダーで扱うための様々な情報を RGB チャンネルに格納して利用するテクニックについて取り上げられています。

Cloud Imperium 制作（実際にはそこに所属する Mike Snowden 氏によるものとのこと）のビデオで取り上げられていたのが大きなきっかけのようです。

it shows this incredible breakdown of like 20 different really freaking rad concepts.
20種類の非常に素晴らしいコンセプトの驚くべき内訳が紹介されています。

One of them that I want to go over is just how they use data to pass into their lighting pipeline.
私が熟考したいそれらのうちの1つは、ライティング・パイプラインに渡すデータの使用方法です。


残念ながらスライドに記載のあるこちらのスレッドは見つかりませんでした。。
https://realtimevfx.com/t/star-citizen-explotion-vfx-breakdown

Visceral Games 所属（当時）の Seth Hall 氏と Adada Morales 氏による例は、不透明度・温度・ディフューズを RGB に格納するものだったそうです。

  • R　‥　Alpha
  • G　‥　Temperature
  • B　‥　Diffuse

そしてノーマルは、煙の流体シミュレーションに対して上下左右４方向からライティング＆レンダリングしたものをテクスチャの各チャンネル格納することで -1 ～ +1 の情報を得てから 0 ～ 1 の範囲に収めて‥

B チャンネルは法線が正規化された値になるよう求めている感じですかね。

 

Emissive の値を決める


● Black Body（黒体放射）を利用する

炎のように温度により色が決まるエフェクトを Black Body Shader（黒体放射シェーダー）を利用してエミッシブの値を決める方法について紹介されています。

UE にはマテリアルに BlackBody ノードが標準で用意されているので、ケルビンの値を入れるだけで利用できてとてもお手軽ですね！

● LUT（Look Up Table）を利用する

カラーグラデーションのテクスチャを使って Phtoshop のグラデーションランプのように色を自由に決める方法について紹介されています。
（Simon さんの講演でも取り上げられていましたね！）

今の UE なら Curve Atlas と Color Curve（CurveLinearColor） を利用するのが良いと思います。1.0 以上の値も扱えますし、プリセットを切り替えるように利用できます。

 

Ray marting によるライティング


先ほど一度登場した Uncharted 4 の講演から Ray Marting によるライティング事例についても紹介されています。Matt Radford 氏によるものだそうです。

"Chasing Film in 5ms: A Look at the Real-TimeVFX of Uncharted 4"
Insights in Game Production | SIGGRAPH 2015

Raymarching is a little bit more expensive, but the results are astounding.
レイマーチングはよりちょっと（処理負荷が）高いですが、その結果は驚くべきものです。

So I'm excited for us to keep exploring down this path.
ですので、この道を探求し続けることに期待しています。


昨今、レイマーチを利用した煙の表現の事例は沢山見かけるようになりましたが、そのうち色んな事例をカテゴリ分けしながらまとめたい。。

参考：2D Ray marting を利用した Unity の事例

 

Gnomon Lighting


次に、ノーマルを使わず６方向からライティング＆レンダリングしたテクスチャをそのまま Directional Light の向きに応じて表示するという直球なテクニックの紹介がされています。こちらは DICE の Battlefront のメンバー Terrence Kim 氏による事例が先駆者な感じでしょうか。Gnomon Lighting と題されています。

ライティング方向に応じて表現したいそのままの見た目になるため、目からウロコでありつつ強力なアイデアですね！６方向分の格納に２枚のテクスチャを持つのはメモリ面でネックになるため、４方向分を格納した１枚のテクスチャを利用して６方向分を補う形がポピュラーな印象です。結果、非常に素晴らしいルックを実現しています。

Skull and Bones の VFX Tech Director Mederic Chasse 氏による解説がこちら。
４方向分で賄っています。非常に素晴らしいルックです！

Epic Games の Senior Technical Artist Asher Zhu 氏によるもの。
こちらも４方向分で賄いつつ、カーブアトラスも活用されていますね！

 

Vertex Animation


いわゆる VAT（Vertex Animation Texture）と呼ばれるものですね。国内でも非常に浸透しているテクニックですね。エフェクト以外の活用例も増えている印象です。
（最近の事例だと ELDEN RING のライカードの大量の手の動きや浮き出る顔など）

Vertical Robot の Norman Chaar 氏が UE で動く流体を投稿した際にアニメーションを全てテクスチャに保存していて、それが様々な興味の火付け役になったそうです。

そして SideFX の Technical Director の Luiz Kruel 氏がアニメーションをテクスチャに圧縮してパーティクルで使用するための優れたパイプラインを開発したとのこと。
lkruel | SideFX

Keith 氏は Naughty Dog での Raymond Poka 氏の事例として、鳥・ヤギ・人の群れの実例を挙げていますが、円を描くような動きでは法線のフォローが必要になるので注意が必要と指摘しています。生き物などライティングするモチーフで間接が大きく動くような場合は VAT にノーマルの出力も必要になってくるということですね！

ちなみに Keith 氏は VAT の仕組みを講演内でとても丁寧に解説されています。

私もまた、VAT を含めた頂点アニメーションについてかなり気合を入れて解説した時のスライドを下記の場所にアップしています。こちらもよろしければぜひ。。

 

トレイル（軌跡）


Riot Games の Senior VFX Artist Jae Hyun Yoo 氏はクールなスプラインの技術に取り組んでいるそうです。これは多機能ですし非常に使いやすそうです！

また Epic Games の Senior VFX Artist Bill Kladis 氏は任意の形状を押し出して軌跡にするようなことを試していたそうで、星や人の形で押し出す例が紹介されています。
（Profile は「輪郭」「外形」「断面」という意味もあるんですね！）

Keith 氏からの事例紹介は以上で、講演は Drew 氏と交代して Tilt Brush の話に入っていきます。長くなるので本記事での紹介はここまでになります。

英語学習用のメモ


最後に、気になった単語や表現をピックアップしておこうかと思います。

● Noun（名詞）

a narrow focus　絞った焦点（focus が他動詞なら"焦点を絞る"）

inflection point　数学用語で変曲点、ビジネスでは転換期の意味で使われる

landscape　景観・風景だけでなく様相・状況という意味もある模様

baseline　基準値

takeaways　（プレゼンなどで）覚えておいて欲しいこと・重要なこと

competitive edge　競争力

woe　悲しみ・苦悩

caveat　警告・注意書き・補足説明

wiggle room　融通・余裕・余地

notion　意見・見解・概念

 

● Verb（動詞）

go over ～　～を詳細に調査する・探査する・熟考する

go into ～　～を詳しく述べる　I don't need to go into them（詳しく語る必要はない）

run into ～　～に偶然出会う

run through ～　を駆け足で行う・ざっと調べる・要約する

start off with ～　～から始める

take up ～　～を消費する・受け入れる・対処する　instead of taking up texture space

take ～ for granted　～を当然と思い込む・～を軽く見る

take ～ upon oneself　～を引き受ける

take advantage of ～　～を活用する　it takes advantage of my pre-rendered tools

get out of ～　～から取り出す　the vectors that I've gotten out of his tool

get away with ～　～でその場を切り抜ける　we can get away with super slow Flipbooks

get around ～　～（問題など）をうまく避ける　We've gotten around frame rate

set the scene　準備する・状況を説明する

step up to ～　～に向かって歩み寄る

end up with ～　結局～で終わる

throw back to ～　～に遡る

throw out ～　～を持ち出す・提案する　I want to throw out to a post

put into one ～　～を１つにまとめる　you can put them into one texture

keep an eye on ～　～から目を離さない

interpret　～を解釈する・読み取る

derive　～から引き出す・導き出す

regard　～を注視する・尊敬する

spark　～の火付け役となる・拍車をかける

句動詞が沢山登場しましたが、それぞれ非常に幅広い意味を持つため、前後のニュアンスを持ってしてもどう訳すのか悩む場面が結構ありました。。

 

● Adjective（形容詞）

broad　幅が広いの他、大掛かりな・大まかなという意味も　broad sections

notable　注目に値する　somenortable titles

intriguing　興味をそそる・魅力的な　a super intriguing business

freaking　ひどい・すごい　freaking insane solutions 

baddass　タチの悪い・すごい　baddass references（素晴らしい参考文献）

rad　急な・過激な・素晴らしい　really freaking rad concepts

stellar　星/恒星の・非常に素晴らしい　some pretty freaking stellar solutions

phenomenal　自然現象の・驚くべき・驚異的な　a phenomenal perspective

shitty　とても悪い・くだらない　shitty looking explotion（ひどい見た目の爆発）

illustrative　説明に役立つ・実例となる　illustrative effects

cheesy　チーズの入った・陳腐な・ありふれた・安っぽい　cheesy effects

vocal　主張する・自由に発言する　I'm pretty vocal about the problems

bound by ～　～により縛られる　bound by file size

limited by ～　～により制限される　limited by file size

lose-lose　お互いに不利益がある（win-win の反対）

hard-pressed　四苦八苦している・苦境に立たされている

pixelated　ブロックノイズが発生している　It's super pixelated.

highlighted　際立って素晴らしい・強調された　really cool highlighted areas

timeless　永久の・時代を超えた・不朽の　it's very timeless presentation.

Keith 氏は freaking を多用するイメージがありましたが、形容詞を３～４つ重ねることも珍しくない感じです。ex: some pretty freaking stellar solutions

 

● Adverb（副詞）

absurdly　バカバカしいほど・話にならないほど　It's absurdly lopsided.

naively　単純に・素朴に・世間知らずにも

 

● Phrase / Other Expression（フレーズ / その他の表現）

in ways that ～　～のようなやり方で

in that same vein　同じようなやり方で

in that way　そんな風に

on the way　途中で・もうすぐ到着する

in response to ～　～に応えて

It's never been easier to 動詞　これまでにないほど簡単に～ができる

from film moving into games　映画業界からゲーム業界へ転身した

any of it　複数ある内の「１つも～無い」/ all of it は複数ある内の全て

but then, ～　とは言え一方で、しかしその一方で、そうは言っても

over time　時間が経つにつれ・時間をかけて　move in a certain direction over time

associated with ～　～に関連している・連想させる

nothing more than ～　～に過ぎない Shader is nothing more than a real-time compositing popeline.

kind of 動詞　ちょっと/多少/かなり～する　I kind of realized / We kind of know

What would happen if ～　もし～ならどうなる？

ツールから何か出力したものなどは You can make all that out of Houdini のように out of が多用されていました。