マテリアルエディタで作るVFX
•Transferir como PPTX, PDF•
15 gostaram•9,161 visualizações
第7回VFX技術者交流会で講演した時のものです。 https://atnd.org/events/101394
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a マテリアルエディタで作るVFX
Semelhante a マテリアルエディタで作るVFX (20)
マテリアルエディタで作るVFX
- 2. 自己紹介 ▪ TwitterでCG、画像処理ネタを投稿しています。 https://twitter.com/chiba_akihito ▪ ハンドルネームです。 ▪ アニメ業界からゲーム業界に移って2年弱。色々と勉強中。
- 3. お話させて頂く内容 ▪ 下準備 ▪ 煙・炎 ▪ 水・液体 ▪ 破壊 ▪ イラスト風Post Process スライドを補助的に使って UE4を操作しながら解説します。
- 5. ちょっとした すきま時間に色々試したい ▪ 汎用性のある素材を予め用意しておき、いつでもすぐにアイデアが 試せるようにしたい。 ▪ UE4だけ起動して、DCCツールやPhotoshopを立ち上げたくない … ▪ マテリアルエディタに集中したい！
- 6. Geosphere(天球体)とPlane ▪ SphereとPlaneは出番が多い。 ▪ UE4に標準で入っているSphereも良いが、 Geosphere(天球体)の方が変形に強く応用が効きやすい。
- 8. 半球 ▪ 半球も便利。
- 10. UE4のDisplaceでも、もくもく ▪ 『Noise』ノード×『Vertex Normal』ノードを、 『World Position Offset』に接続しても作れる。 ▪ 最終的には2Dテクスチャにした方が処理は軽いが、 手軽にバリエーションが試せる。 ▪ Fast Gradientが最も軽い。(ただし若干荒い)
- 11. NoiseノードからNormalを生成 ▪ でも、Normalはどうする？ ▪ 『Prepare Perturb Normal HQ』 『Perturb Normal HQ』の組み合わせで作れる。 ▪ 出てくるNormalはWorld Spaceなので『Transform Vector』を通すか、 マテリアルの『Tangent Space Normal』のチェックを オフに。
- 13. 2Dノイズテクスチャ作成 - Photoshop ▪ ノイズテクスチャも欲しい。 ▪ お馴染みの「雲模様」で作成。 ▪ 128の倍数のサイズで作成するとリ ピート素材に。
- 14. 2Dノイズテクスチャ作成 - Photoshop ▪ 「雲模様」の上でクリックして指を離さない→ Alt(option)を押しながら→ マウスボタンを離す。 ▪ 以上の操作でコントラスト強めの模様に。 ▪ (まるで隠し機能のような操作)
- 15. 2Dノイズテクスチャ作成 – After Effects ▪ 平面を生成して、エフェクトからタービュレントノイズを適用する。 ▪ 色々なパラメータがあって楽しい。
- 16. 2Dノイズテクスチャからノーマルを生成 - Photoshop ▪ PhotshopCC2015以降ならば標準で 『法線マップを生成』機能が入っている。 ▪ それ以前の場合『NVIDIA Texture Tools for Adobe Photoshop』が便利。
- 17. UE4単体でも2Dノイズテクスチャが作成出来る。 ▪ NoiseやVector Noiseの描画結果を、Blue Printの 『Draw Material to Render Target』でベイク出来る。 ▪ ベイクしたRender Targetから、マテリアルエディタの『Normal From Heightmap』関数でノーマルも作れる。 ▪ Unreal Engineのオフィシャルサイトに詳しい解説があります。 https://www.unrealengine.com/ja/tech- blog/getting-the-most-out-of-noise-in-ue4
- 20. 使うテクスチャは1枚 ▪ RGBの各チャンネルに異なるノイズを格納する。 ▪ 1枚のテクスチャで色々出来て便利。 ▪ 最終出力までの間に色々と処理を加えるなら リニアカラーで取り込んだ方が良い場合が多い。 ▪ 作例ではリニアカラーで使用。
- 21. テクスチャをスクロール ▪ 『Time』ノードでマテリアルに経時的な変化が起こせる。 ▪ 乗算する数値は『Scalar Parameter』で指定する事で コンパイルしなおさずに変更できる他、外部から操作可能に。
- 24. Bandingした輝度情報でLerp ▪ Bandingの結果をLerpのAlphaに接続。 ▪ AとBそれぞれに任意の値のVectorを繋げる。 ▪ 必要に応じて出力されたカラーに乗算を繋いで輝度をコントロール。 大きい値にするとレンズフレアが得られる。 入力 出力 →
- 25. パーティクルセットアップ ▪ タイプデータをMeshデータにして、下準備で紹介した もくもく形状をアサイン。 ▪ 『Initial Velocity』で上方向への動きを入れる。 ▪ 『Init Mesh Rotation』で向きをランダムに。 ▪ 『Init Mesh Rotation Rate』でわずかに回転運動。 ▪ 『Size By Life』で徐々に大きくなるように。 ▪ 『Color Over Life』でMaterialに出現時1→消滅時0のAlpha 値を渡す。 ▪ 『Orbit』で動きにランダム性を加える。 ▪ 火の粉のパーティクルも同時に出しておくと良い雰囲気に。
- 26. Particle Color Alpha＋ノイズで 炎/煙とOpacityをコントロール ▪ Particle ColorのAlpha(出現時1→消滅時0) とノイズテクスチャを加算して、経時的かつランダム な変化を作る。 ▪ ノイズテクスチャは先ほどの物を流用。 別チャンネルを使う。(作例ではBチャンネル) ▪ 炎→煙の色変化と、Opacityの消し込みに使う。
- 27. 炎/煙のLerp ▪ 炎色の他に、煙色を追加。 Lerp Aに炎、Bに煙を繋ぐ。 ▪ 先ほどのParticle Color Alpha+ ノイズに任意の値を加算しLerpの Alphaに繋ぐ事で炎と煙の比率を コントロール。 ▪ Floorを挟むとアニメらしいくっきりとし た描き分けに。
- 28. Opacityをコントロール ▪ Opacity側でもParticle Color Alpha + ノイズ に任意のオフセット 値を加算して使用。 ▪ いったんSaturateした上でPower を通す事で、煙のフォルムの硬さをコ ントロールできる。 ▪ 更にCamera Vector と Pixel NormalをDotし乗算する事で メッシュのエッジを柔らかく出来る。
- 35. 水面付近でフェードアウトさせる ▪ シェーディングや反射が完全には一致しないので、 Depth FadeをOpacity にも繋ぐ。 法線だけでは 不十分… 法線を変化させながら フェードアウト
- 36. DisplaceとNormalテクスチャをスクロール ▪ テクスチャをスクロールして、流れ出る動きを表現。 先程の汎用テクスチャのRチャンネル を、Vertex Normalで乗算して、 World Position Offsetへ接続。 左のテクスチャのRチャンネルから、 ノーマルマップを作成し、 Normalへ接続。
- 38. デカールで水面に波を立てる ▪ 水面に波を立てるために、ディファード デカールでNormalをコントロール。 ▪ Normalのみに影響を与えたい場合 はDecal Blend Modeを『Normal』 に。
- 39. UVを極座標へ変換 ▪ テクスチャを同心円状にスクロールさせたい。 ▪ 極座標への変換はVector To Radial Valueに任せます。
- 41. ここでもUVにノイズを加える
- 45. 屈折 - もっと ▪ IORを極端な値にしてみる ▪ 用途によってはこれで十分
- 46. 屈折 - 倒立 ▪ 歪むだけでなく、倒立した像が出したい！ ▪ IORを1.33 IORでない側を0に
- 47. 屈折 - 画面端が不正 ▪ Screen Space Refractionなので、 無茶をしたら画面端での描画が不正になってしまった。 ▪ 画面からはみ出た部分があると屈折の描画が欠ける。
- 48. 屈折 - 画面端では処理を抑えるようにしてみる ▪ Screen Positionで各ピクセルのスクリーン座標を取得する。
- 49. 屈折 - 画面端では処理を抑えるようにしてみる ▪ 画面中央が０、端が1になるようにノードを組む。
- 50. 屈折 - 画面端では処理を抑えるようにしてみる ▪ 以下のようにLerpのAにつなぐ。 ▪ Lerp Aに対して画面中央では０、画面端では1が出力される。
- 51. 屈折 - 画面端では処理を抑えるようにしてみる ▪ 画面中央では０対1.33の強い屈折、 画面端では1対1.33の安全な仕様の屈折に。
- 52. 遠方から見ると部分的に欠けてしまう問題 ▪ マテリアルの詳細から、Refraction Depth Biasに－値を入れる。 ▪ 作例では-100にしてみました。 上部が欠けている 対策後
- 55. マスク – BoxMask-3D ▪ BoxMask-3Dをベースに、操作可能な立体マスクを作成する ▪ 標準では中心位置、XYZのサイズ、フォールオフが指定できる。 ▪ Sphere Maskの仕様と似ている。
- 56. マスク – BoxMask-3D ▪ A World Position Offset ▪ B マスクの中心点 ▪ Bounds BoxのサイズをVectorで指定 ▪ Edge Falloff エッジを柔らかく(外側に広がる)
- 57. Blue Print Actorと連動 ▪ ダミーのアクター2個の座標を取得。 ▪ 座標情報をマテリアルパラメータコレクションを 経由してマテリアルに受け渡す。 ▪ これをマスクの始点と終点とする。
- 58. ノードを繋いでBoxを動かす – 仕様 ▪ Boxの中心を、Lacation1とLacation2の中間に置く。 ▪ Rotate VectorでBoxを回転させる。 ▪ Boundsで太さと長さを指定する。
- 59. ノードを繋いでBoxを動かす – Boxの中心 ▪ 本来中心を定義する『B』は使わず、0,0,0を入れておく。 ▪ World Position自体をオフセットさせる。
- 60. ノードを繋いでBoxを動かす – Boxの回転 ▪ Rotate VectorでLocation2にルックアットさせる。 ▪ あくまで簡易的なリグなので、2点間が極端に近い場合正しく動作 しない場合があります。
- 61. ノードを繋いでBoxを動かす – Boxのスケール ▪ 『XY』は『太さ』に該当。 Scalar Parameterで手動で指定。 ▪ 『Z』は『長さ』に該当。 Location1とLocation2のDistanceで指定。
- 62. マスク情報でディスプレイス量をコントロールする ▪ 全体にディスプレイスがかかるようにしておいて、マスクで乗算。 ▪ 基本構造は下準備編で紹介した通り。 欲しいニュアンスが出るよう適宜ノードを追加。
- 63. マスク情報でテッセレーション量をコントロールする ▪ マスクをテッセレーション乗数に繋ぎたい。 ▪ しかし、Rotate Vectorを使っていると不具合が出る。 ▪ 内部で使用されているCustomノードが原因らしい。 →Arc cosineに置き換えると問題なく繋げるようになる。 (今回の用途ではArc cosine Fastでも精度は十分)
- 65. 完成イメージ[動画] ▪ Post Processを用いて以下の画像処理を行う。 ▪ 画面を歪ませる。 ▪ 歪みを利用して輪郭を検出する。 ▪ ソフトネスを調整できるトゥーンシェード
- 66. Post Process マテリアル / Scene Texture ▪ Post Processマテリアルを作成 ▪ 『Blendable Location』を 『Before Tone Mapping』に。 ▪ Scene Textureノードを配置 ▪ 『Scene Texture Id』を 『Post Process Input0』に。 これで画面が取得出来る。
- 67. Scene TextureのUVを歪ませる ▪ TexCoordにノイズを付加してScene Textureを歪ませたいが… ▪ 2Dのノイズテクスチャを加算しただけでは画面の動きに置いて行かれて流れて しまう。(波ガラス越しに世界を見ているような感じになる) ▪ World Aligned Textureを使ってワールド座標でノイズテクスチャをマッピング する。
- 68. ノイズテクスチャをスクロールさせて歪みに動きを与える ▪ 時間を大きめにMultiplyしてWorld Positionに加算する。 ▪ Timeの直後にMultiplyとFloorを挟むとフレームレートをコントロール出来る。
- 69. ソフトな階調化 – ライティングの輝度情報だけ抽出する ▪ Post Process InputをDiffuse ColorでDivideする。
- 70. ソフトな階調化 – Smooth Ceil ▪ 輝度情報を階調化する際にSmooth Ceilを使うと境界を 柔らかくできる。
- 71. ソフトな階調化 – Smooth Ceil ▪ 階調化した輝度情報をDiffuse Colorで乗算する。 ▪ 今回、MetallicはLerpで除外します。
- 72. オリジナル画像と歪み画像との差分で輪郭を検出する ▪ オリジナルと歪みの差を出した上 でDesaturationでモノクロ化。 ▪ Smooth Stepでラインの検出 量やコントラストを調整。 ▪ Lerpでラインカラーを入れるとイ ラストっぽさが出やすいかも。 ▪ 階調化した画像と乗算で合流。 歪み有り 歪み無し
- 74. ご清聴ありがとうございました