Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

マテリアルエディタで作るVFX

4,592 views

Published on

第7回VFX技術者交流会で講演した時のものです。
https://atnd.org/events/101394

Published in: Engineering
  • Be the first to comment

マテリアルエディタで作るVFX

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

×