GDC 2022 | How to (Not) Create Textures for VFX - ゲームエフェクトデザイナーのブログ

GDC 2022 の講演「How to (Not) Create Textures for VFX」から、重要なトピック（余力があれば英語表現も‥）を取り上げてみる記事になります。

タイトルはテクスチャを作る方法・またいかにテクスチャを（ゼロから）作らずに手早く用意するかといった意味が込められているようです。

講演動画を再生しながら、本記事を読んでいただくと良いと思います。

Speaker
Beginning of the presentation
Texture Types
Texture Use Cases
4 Ways of creating textures for VFX
Using Existing
Explosion
Galaxy
Brushes
Lines + Min Filter
Light Rays
Lighting
Water Splash
Sand Explosion
Water
Fire Nova
Waterfall
Creative use of Textures
Cloud
3 Simple Shader Technics
More Tools
Resource Database
You can help!
The End of The Presentation

※階層が無く見辛い目次で我ながらぎゃーって感じですが‥ブログを開設した時、テンプレートを色々カスタマイズした際に１つの見出しレベルしか使わないと思って１つだけ手を入れたためにこうなっています‥😭

Speaker

講演者は Wild Sheep Studio の VFX アーティストの Simon Trumpler さん。

https://www.artstation.com/simont

RIME の Stilyzed VFX のメイキング動画やブログの TIPS 記事でお馴染みな方です！
GAT #65: Stylized VFX in RIME - YouTube
GAT #67: Stylized VFX in RIME 2.0 - Water Edition - YouTube
https://simont.de/#blog

Simon 氏は現在、南フランスの Wild Sheep Studio に在籍されているそうで、公式サイトを覗くとタイトル紹介ページに「Wild」が掲載されています。
https://www.wildsheepstudio.com/

Wild Sheep Studio は 2014 年に Michel Ancel 氏が Wild 制作のために Ubi に在籍したまま設立したスタジオだそうで、興味深い経緯です。

PS4独占『Wild』のコンセプトアートが突然アップデートされる

Simon 氏は講演の最後に Wild Sheep Studio のスタッフ募集について触れていたので、続報に注目したいですね！

Beginning of the presentation

Simon 氏はまず、エフェクトのテクスチャを作成する方法の Resources（援助・問題解決のための手腕・資金・資源）があまり見つからない、見つかっても Stylized（様式化されたもの）だと話されています。

When you search for resources how to create textures for effects.
Then you will find not much.
But if you find something, it will be stylized.

そのことに関して今回焦点は当てないものの、以下の名前でググれば素晴らしい Stylized VFX の Resources が見つかると紹介されています。

● Jason Keyser

https://www.artstation.com/jasonkeyser
https://www.youtube.com/channel/UCEtMqF3rZuFz8mDMrh5geTw

● Alex Redfish

https://www.artstation.com/alexredfish
Alex Redfish - YouTube

● 1MaFX

https://www.artstation.com/mgepm
1MaFX - YouTube
1MAFX is creating Real-time VFX tutorials (Unreal Engine and Unity) | Patreon

● DucVu FX

https://ducvu.net/
DucVu FX - YouTube
DucVu FX - Asset Store

そしてこの講演では (Semi) Realistic な VFX が焦点になっています。

また Simon 氏が Good Enough（十分に良い / Not amazing, but nice）という意味で「Version GE」と呼んでいるバージョンに、なるべく早く到達することを目指した手法について取り上げられています。

Texture Types

まず、VFX 向けのテクスチャの種類について紹介があります。

Sprite
Sprite Sheet
Flipbook
Volumetric

今まで Sprite Sheet と Flipbook の２つの用語は同じような認識で使っていましたが、Simon さんは Sprite Sheet を以下のように説明されています。

we have also Spright Sheets which is just a collection of Sprites on one texture and the particle system will choose one randomly just for some variation.
スプライトシートは、1つのテクスチャ上にスプライトを集めたもので、パーティクルシステムがランダムに1つを選んで、バリエーションをつけます。

なるほど、軽く画像検索してみた感じこの辺りは人によって認識が違ってそうですが、アニメーションさせる前提ということを明示したい場合、Animation Sprits, Animation Sprites Sheet, Flipbook のように書かれているような印象は確かに受けました。

Texture Use Cases

次にテクスチャの使い道について触れられています。

Color
Mask
Mask - Erosion / Dissolve
LUT (Look up Texture)
Vector Maps

こちらも定番な感じですね。

UE で言えば Color は BaseColor や Emissive Color に利用し、Mask は Opacity に利用するもので Erosion (浸食) / Dissolve (溶解) も千切れさせるためのテクスチャですね。

LUT はスライドで紹介されていたようにグラデーションテクスチャの UV にモノクロのカラー用テクスチャを繋ぐ方法でも可能ですが、今の UE ならカーブアトラス + カラーカーブで代替可能ですね。

[UE4][UI向け]カーブアトラスを使って色を管理/共有する｜株式会社ヒストリア

Vector Maps は主に UV を歪めるために使うものと説明されています。

4 Ways of creating textures for VFX

そして VFX のテクスチャを作る４つの方法について。

Handmade (手作り)
Procedural (プロシージャル)
Simulated (シミュレーションされたもの)
Use Existing (すでに存在するものを使う)

Handmade は「You can paint it. You can use photos.」、Procedural は「You can use procedural tools like Substance or simple tools」と説明。

Simulated については Blender や Houdini の Pyro は学習もシミュレーションもレンダリングも時間がかかるが EmberGen は今回の講演のために少し試したところリアルタイムで早く結果が出せて素晴らしいと話されています。

そして「But there's one way which is even faster than all of them. (他のどれよりも早い方法)」それが Use Existing だと説明されています。テクスチャパックを使う・写真を使う・ブラシを使うなどですね。

Using Existing

既存のものを使う際に障害になるのが「Using photos is cheating. (写真を使うのはズルい)」「Using 3rd Party Assets is cheating. (第三者のアセットを使うのはズルい)」という考えで、Simon 氏自身が昔は「What I had in my med, what I had in my head is that an artist a real artist creates everything from scratch. (本物のアーティストとはゼロから全てを創り出すものだ)」と考えていたそうです。

これは分かります。

一方で、ゼロから作るスキル・ありものを利用して GE なものを手早く作るスキル・双方高品質な状態に持っていくスキルそれぞれが場面に応じて求められたりしますね。。

ただしライセンスに注意する必要があり、Texture.com の場合はその点非常に良く、商業プロジェクトで利用可能なだけでなくクレジット内などに権利元の明記が不要とのこと。
Textures for 3D, graphic design and Photoshop!

一方 Artstation の Marketplace は Standard License だと販売数が 2000 以下という制限があり、これを超える場合は Extended Commercial License を購入する必要があるので注意が必要なのだそうです。
https://www.artstation.com/marketplace/game-dev

それから「ゼロから創り出さなければ」と思っている人に「Here come my top six solutions to calm your artist's brain down. (あなたのアーティスト脳を落ち着かせる６つの有効な解決法がある)」と紹介されています。

Unity の無料のテクスチャもアニメーションの緩急を調整して改善できる
陰影が描き込まれていても十分だし、パターンが少なくても Flipbook のフレームのブレンディングで十分かも知れない
リアルな素材を利用してスタイライズドなテクスチャも作れる
社内に過去の資産があれば使わない手は無い
自分が目指すビジュアルの方向性を早く見つけるのに役立つ
今はこちらを使って、時間があれば後から自分たちで作り直せば良い

興味深いです。

確かに何かすごい技術を知った時、例えば「Uncharted 4 がリアルタイムでベクトル補間しているらしい！やりたい！」と思ったりしますが、実際には Flipbook のフレームのブレンド再生で十分だったりもして‥コストパフォーマンスの考慮も大事ですね。。

他にも、下記のようにも話されています。

Why should you do a 20th explosion if they are 19 perfectly usable in the project?
プロジェクトで完全に使える 19 個の爆発があったら、なぜあなたは 20 個目の爆発を作る必要があるのでしょうか？

If there's no third-party asset, then you can ask yourself "Hey, is there a simple tool which generates this texture for me?"
もし第三者のアセットが無ければ、簡単に作れるツールが無いか自問するのはどうか

Explosion

ここからは、具体的なモチーフごとの作成方法に移っています。

スライド内に表示されている爆発は Unity の Flipbook でクリエイティブコモンライセンスが CC0 なので自由に使えると話されています。

CC0について ― “いかなる権利も保有しない” | クリエイティブ・コモンズ・ジャパン

また EmberGen も無料の VDB をいくつか提供していたり‥

また Paragon の VFX アセットにもオープンソースの素晴らしいアセットが大量にあると紹介されています。

$17,000,000 of Paragon content for FREE - Unreal Engine

Galaxy

次に銀河のテクスチャについて。

●高解像度で作成する

銀河の画像を見ているとソフトなグラデーションに高周波ノイズが入っていることに気付くと指摘しつつ、ゲームエンジンにインポートする前のテクスチャは高解像度にしておきましょう（テクスチャを作る手間は同じだから）とアドバイスがあります。

しかし、高解像度にすると Photoshop のフィルタによっては効果をスケールできなかったり時間が物凄くかかったりもしますね。シーンファイルのサイズも肥大化して開くのも大変になります。そういう意味では、近い将来‥ AI での高品質なアップコンでカバーできると幸せになれそうな気はします。

●ブラシを使う

また銀河のテクスチャを描くのにブラシを使うことを勧めつつも「actually I found it really hard to find good brushes for VFX which you allowed to use. (実際、VFX用のブラシで、使っていいものを見つけるのは本当に大変でした)」とのことですが、Kyle T. Webster のブラシ（1000 以上！）がお気に入りで、今は Adobe が買い取ったので Photoshop のサブスクリプションがあれば無料で使えるとのことです。

また Simon さんは写真やブラシパックなどを全てクラウドストレージでライブラリ化して管理しているとのこと。

●保存を手早く行う

作業を高速にイテレーションするために下記のプラグインが有効とのこと。

Krita
・Batch Expoter
　https://github.com/GDQuest/krita-batch-exporter
　https://www.youtube.com/watch?v=jJE5iqE8Q7c

Photoshop
・qSave
　qSave - Photoshop plugin to quickly save textures — polycount
・Expresso plugin from Francesco
　https://minifloppy.it/tools/expresso/
　https://3dnchu.com/archives/expresso-exporter-v0-6-2/

Brushes

Standard Brushes

標準のブラシを使うシンプルで一般的なテクニックとして、太い線を１本描いた後に部分的に削って雷のような形にする方法が紹介されていて、これは私も好んで行います。

Smudge (汚れ・染み・ぼかし)

いわゆる「指先ツール」ですね。

Kurita は以前から自動でタイリング化された状態で作業することができるが、実は Photoshop も 2021 から可能になったと紹介があります。私も Simon さん同様、Twitter で流れてきて知りましたが、ついに！という感じですね。長かった。。

また Shannon 氏が Real Time VFX で Smudge/Blur を使った素晴らしいチュートリアルを披露されているとのこと。

Shannon McSheehan - LoL FX + Knowledge Share - #173 by ShannonBerke - Real Time VFX
Shannon McSheehan - LoL FX + Knowledge Share - #105 by ShannonBerke - Real Time VFX

Lines + Min Filter

手描きでストロークを引いた後に Minimum フィルタを使うと、良い感じにラインをスタイライズドに加工していけるようです。これはとても便利そう‥！

Light Rays

何かの発光時によく使う、細い光の筋が広がるテクスチャです。

Photoshop での手軽な作り方として、小さく塗り潰した球の形状にノイズを与えてから Radial Blur を適用する方法が紹介されています。

参考元が日本の Re (@Ref_00) さんのブログ記事ですね！

また Substance で作る方法として Bruno Afonseca 氏の Cartesian To Polar Grayscale を使う方法と Robin Schmidt 氏の Slope Blur を使う方法が紹介されています。

Lighting

雷テクスチャを河川の上空写真や血管の写真を加工して作る方法が紹介されています。
面白いですね！

Water Splash

水しぶきは、写真からコントラストを上げて切り抜くだけで OK とのこと。
Textures for 3D, graphic design and Photoshop!

Sand Explosion

爆発時の砂には水しぶきと全く同じテクスチャを使った例が紹介されています。

また、背景の月には luos 氏のこちらのテクスチャパックを利用したとのこと。

Water

海面のテクスチャについて。

Substance や Photoshop でコントラストが付いた雲模様のようなノイズ画像を作成して（最もハイライトな部分が、山の峯が連なるような形になっていると良い / 雷テクスチャのようにも見える）、海面のハイトやノーマルに利用すると良いようですね。

Fire Nova

炎のタイリングテクスチャです。

写真から一部を切り出し、Substance の Tile Samplar ノードを使って散らばらせる方法を試すと完璧に美しいものが出来上がったとのこと。

Substance Designer を使う場合に「フルプロシージャルで作らないといけないという先入観」が何となくありますが、これは非常に有用なテクニックだと思います！

Waterfall

滝のテクスチャについて。

こちらの写真をリファレンスにして、先ほどの Fire Nova のテクニックを Waterfall にも応用したそうです。
Textures for 3D, graphic design and Photoshop!

その際の元となるテクスチャはこちらとのこと。
Textures for 3D, graphic design and Photoshop!

しかしリファレンス写真のようにならなかったので、リファレンスの写真をそのまま Tile Samplar に使ったとのこと。そして一部をマスクするのに SVG ノードを使ったそうです。

より良くなったものの、こちらの写真のような波が幾重にも重なる構造が無いことに気付いたそうです。

https://www.pexels.com/de-de/foto/kalt-island-landschaft-natur-4338015/

公開 Slide 内のコメントより

But I missed some wavy layer pattern in there.
でも、そこに波打つようなレイヤーパターンを見逃していたんです。

そこで、森の写真を逆さにすると似た感じを出せることを発見して試したそうです（！）。こちらは今回の講演の中で最もユニークで面白いと思った方法です。
Textures for 3D, graphic design and Photoshop!

Creative use of Textures

アヒルの画像を元にフィルタをかけて炎のテクスチャを作っている、Peter Clark 氏のテクニックが紹介されています。
Creating textures from random source images - Real Time VFX

また、日本でもお馴染み唐揚げ爆発も。

A friend taught me this probably a decade ago- but! Picture of fried chicken- isolate chicken(I feather the selection a little), harsh level adjustments, radial blur and more adjustments and flourishes. Fried Chicken explosions. pic.twitter.com/L4xv3T3IbA
— ジョシュピザ先生 (@dyemooch) February 3, 2020

Cloud

雲のテクスチャ作成には Kumo Works という雲画像の生成に特化したスタンドアローンのツール (Win/MacOS) を使った方法が紹介されています。

以下のような特徴があるようです。

スライダーによるパラメータが沢山
でもテンプレートを使って色々な種類の雲を作れる
動的に光源の変更が可能
６面のライトマップも作成可能

雲の画像に、雷を放出した際に内部を発光させるためのマスクと、ディゾルブ用の柔らかいグラデーションのマスクも作り、RGB それぞれにパックしたそうです。

Photoshop で複数の画像を RGBA それぞれのチャンネルにパックする（いわゆる Channel Packing）簡単な方法として、レイヤースタイルでチャンネルを指定する方法が紹介されています。私もこちらはよく利用しますが知っていると非常に便利ですね！

RGBA にパックすることでテクスチャのサンプリングも１回で済みます。

ただ、Simon 氏はパックせずグレースケールで保存して使う方が他のシェーダーで再利用しやすいので好んでいるということでした。

これは私も同意で、パックすると容量やサンプリング面では優しいですが、流用のしやすさや作業場の利便性がかなり失われるので、完全に決まったルールの中でしか運用し辛い印象です。また何よりも、パックして BC3 や BC7 にすると BC4 と比べて品質面で結構厳しくなったりもします。

BC1 の RGB 1 パックと BC4 * 3 枚を比べると容量は 3 倍の差がありますが。。

また Nikola 氏の Spellbounds の講演がとてもクールでオススメとのこと。ほぼ全てのテクスチャにパックを利用して、マスターシェーダーで全てを読み込んでいるとのことです。（とても興味深い‥！）

3 Simple Shader Technics

「Which can boost your textures a lot. (テクスチャを大幅に向上させるテクニック)」について３つ挙げられています。

● UV Distortion

テクスチャの UV を別のテクスチャで歪めることで絵的に変化を出すテクニックで、日本でもお馴染みですね！

● Look Up Textures

こちらは冒頭でも登場したものですね。
色の境界でグラデーションを無くすことでコミック調にできると話されています。

カラーパレット代わりとなるテクスチャや UE のカラーカーブを最大限活用するには、色を割り当てる先のテクスチャ自体の輝度の調整が必要になり、実用するには色々と工夫がいると感じています。

● Erosion

こちらもすでに登場したものですが、アニメーションによりディティールを与えたり、アニメ調にできると話されています。

More Tools

他にも色々な便利なツールがあるということでいくつか紹介されています。

Krita Particle Brush Engine
[solve]How do you make this texture? - #5 by amazingJukes - Real Time VFX
Particle Brush Engine — Krita Manual 5.0.0 documentation

Photoshop Flame Filter
Learn How to Create a Flame Effect in Adobe Photoshop CC | Dansky - YouTube Photoshop CC 2014.2: Flame Filter - YouTube

Effect Texture Maker
EffectTextureMaker
Mebiusbox software - EffectTextureMaker というのを作りました

Flame Painter
Flame Painter | Escape Motions
Flame Painter Free | online paint program

Krita は Blender のように OSS でもあり、色々と便利な機能があることは聞いているもののまだ触ったことが無いのですが Particle Brush Engine とても良さそうですね。

また mebiusbox (@mebiusbox2) さんの Effect Texture Maker も紹介されていますね！

Flame Painter は Photoshop プラグイン版とスタンドアロン版があり、あとブラウザ上でも試せますね。

Resource Database

今回の講演のために Simon さんはリソースデータベースを用意したとのことです。

８つのカテゴリに分かれていて、最初の４つはテクスチャやブラシを見つけるためのもの、残り４つはチュートリアルを集めたものになるそうです。

上記リンク先の Extra Content > Textures for VFX Resource Database から飛べます。

とても綺麗にまとまっています‥！素晴らしいです。。

この講演のスライドへのリンクもあり、ノート内のコメントも参考になります。

You can help!

我々 VFX アーティストに向けて、テクスチャのメイキングに関する共有の際にはハッシュタグ「#vfxtexture」を使ってくださいと呼びかけられています。

それから、Simon さんは以下のようにも同様にお願いがされています。

If you have more resources which are not already in the database, then feel free to tell me and I can add the resource.
もし、まだデータベースにないリソースがあれば、遠慮なく言ってください、私はそのリソースを追加できます。

And if you share something already like maybe you're sharing a texture pack or something, then please share it as CC0.
そして、もしあなたがテクスチャパックや何かを共有しているのなら、CC0 として共有してください。

So that anyone can use it without attribution or charge money.
そうすれば、誰でも（権利元の）帰属表示や課金なしにそれを使うことができます。

This is totally fine.
これは全く問題ありません。

I'm happy to pay for good content.
私は良いコンテンツにお金を払うことに満足しています。

But it would be nice to avoid the attribution issue.
でも（権利元の）帰属表示の問題は避けてほしいですね。

そして「And if you can paint, maybe you consider making a little tutorial about this. (あなたがもし絵を描けるなら、ちょっとしたチュートリアルを作ることを検討して欲しい)」とも。例えば Kienan 氏のゲームエフェクトについての動画が非常にクールだったとも添えられています。

そしてポートフォリオにテクスチャを添えることも提案されています。

And if you're a VFX artist, maybe you consider to not only share your VFX in your Artstation profile but maybe also the textures.
また、VFXアーティストであれば、ArtStationのプロフィールでVFXを共有するだけでなく、テクスチャも共有することを検討してみてはどうでしょう。

Because it's even though you don't see the process, it's still a very good learning opportunity to see what an effect was made of.
なぜなら、たとえプロセスを見ることができなくても、そのエフェクトが何でできているかを見ることは、非常に良い学習機会になるからです。

その良い例が Sarah Carmody 氏だと紹介されています。
https://www.artstation.com/artwork/0X4eg5

The End of The Presentation

講演の最後に、Simon さんに沢山のフィードバックのあったアーティストの方々のご紹介がありました。錚々たる方々ですね。。

せっかくなのでこちらにもリンクを掲載します！

● Veer Sharma

● Bryan Venzen

● Mickaelle Ruckert

https://www.artstation.com/mkalt0235

● Sarah Carmody

● Sandra Femenía

● Andreas Glad

● Kerstin Arnold

https://www.artstation.com/nirwayne

● Kate Bernard