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.

リアルタイムレンダリングでのマテリアル表現

2018/12/8
第14回3DCGMeetup(大阪)で使用したスライドに補足を加えたものです。

  • Be the first to comment

リアルタイムレンダリングでのマテリアル表現

  1. 1. #3DCGMeetUp リアルタイムレンダリングでのマテリアル表現 3DCG Meetup #14 kurosawa
  2. 2. #3DCGMeetUp 自己紹介 Name : Kurosawa Twitter ID : kurosaurus URL : the-saurus.net アートディレクター/テクニカルアーティスト
  3. 3. #3DCGMeetUp お題目 マテリアルを学ぼう。マテリアルを学べばこんなことができる。 • テクスチャだけではできない表現 • 実例紹介 • 様々な入力情報 • 計算式を加える
  4. 4. #3DCGMeetUp テクスチャだけではできない表現
  5. 5. #3DCGMeetUp マテリアルを学ぶとできること • 画像の値を超えた表示ができる • 解像度の限界を超えられる • バリエーションを作れる • ゲーム中に動かせる
  6. 6. #3DCGMeetUp 画像の値を超えた表示 いわゆるHDR(ハイダイナミックレンジ)の表示 画像はRGB(各チャンネルが0-255/0-1) 反射やブルームなどに影響するので、高輝度なものは高輝度に表示したい
  7. 7. #3DCGMeetUp 解像度の限界を超えられる いわゆるディテールマップ コントラストを高めるなどの工夫をすれば、 さらに解像度が目立たない表現ができる
  8. 8. #3DCGMeetUp バリエーションを作れる モデルとテクスチャは使い回してマテリアルのパラメータだけを変えると 軽量なデータサイズで作れる
  9. 9. #3DCGMeetUp ゲーム中に動かせる 狭義での動くマテリアル • 明滅する • 眼球が僅かに揺れる • 波の満ち引き 広義での動くマテリアル • カメラに近づくと消えるマテリアル • ビルボード(カメラの向きを無視して空間に固定) • インテリアマップ
  10. 10. #3DCGMeetUp ※ インテリアマップはUE4だとマテリアルファンクションが用意されているので、 CubeTextureをつなぐだけで簡単に作れます (余談)マテリアルファンクション
  11. 11. #3DCGMeetUp 事例紹介
  12. 12. #3DCGMeetUp Plugs プロ向け動画チュートリアルサービス https://plugs.jp/ UE4シーン作成講座 for アーティスト
  13. 13. #3DCGMeetUp 眼球をわずかに揺らす UVの値に時間をサイン波で変換したものを二種類混ぜ、UV値に加算する
  14. 14. #3DCGMeetUp DistanceFeildAOで波を作る DistanceToNearstSurfaceの値と、UVスクロールするノイズをいい感じに混ぜる
  15. 15. #3DCGMeetUp パラメトリックなサビを作る ※ Plugs動画内では潜水艦の作成には触れていませんがサンプルファイルは付属します 高さ情報とAO画像とノイズを混ぜてコントラストを付け、マテリアルの閾値にする
  16. 16. #3DCGMeetUp マテリアルノードをみてみよう まずは赤い枠で囲ったところに注目 赤い枠の要素を足したり掛けたりしている どんな入力情報があるか理解する → あとはそれらをうまく使うだけ アーティストの得意分野の『創意工夫』
  17. 17. #3DCGMeetUp 注意:マテリアルで扱えるのは入力情報 マテリアルはいろんなものを拾ってこれるが、 マテリアルを持つピクセル以外を変えることはできない (例外: Vertexシェーダーでマテリアルが割り当てられている 頂点を動かすことはできる)
  18. 18. #3DCGMeetUp さまざまな入力情報 本当にたくさんあるので、使い勝手のいいものだけ紹介します ※ 今回はパーティクル系は割愛
  19. 19. #3DCGMeetUp Constant Constant (Scalar) Constant2Vector Constant3Vector Constant4Vector 特定のチャンネル数の数値(定数)をつくる。 この数値はゲーム内では変更できない。 Scalar 1チャンネル Vector 2-4チャンネル ※ 分かりやすくするため画面すべてのオブジェクトに 同じマテリアルを貼っています
  20. 20. #3DCGMeetUp Parameter ConstantとParameterの違い Parameterはゲーム内で変更できる/Constantは変更できない 何でもかんでもParameterにすると管理が大変 ScalarParameter VectorParameter 変更可能な数値(変数)をつくる。 ゲーム内で変更可能。
  21. 21. #3DCGMeetUp ここまでの知識でできること 高輝度なマテリアル 画像だとRGBがそれぞれ(0-1)の間に収まる ConstantやParameterなら高輝度にできる
  22. 22. #3DCGMeetUp 基本的な数式を覚えておこう Add 加算 Subtract 減算 Multiply 乗算 Divide 除算 Saturate 0以下と1以上を切り捨て ComponentMask 特定のチャンネルだけにする Append チャンネルを追加する
  23. 23. #3DCGMeetUp ComponentMask補足 ComponentMask 特定のチャンネルだけにする ≠ 赤や緑になる Photoshopでいうチャンネル表示(チャンネルごとに0-1の値) 赤さの強度 どれくらい赤いか
  24. 24. #3DCGMeetUp TextureSample UVに沿って画像を貼る そもそも画像を貼るということはどういうこと? (あとで説明します)
  25. 25. #3DCGMeetUp TextureCoordinate UVチャンネルの設定 タイリング処理などUV関連の機能 2チャンネルのベクター【重要】
  26. 26. #3DCGMeetUp ここまでの知識でできること ディテールノーマル TextureCoordinateを接続しただけのNormalに、 UVに掛け算をして接続したNormalを合成 Normalを合成するためのめんどくさい計算はBlendAngleCorrectNormalさんが勝手にやってくれるぞ! (興味のある人はみてみよう)
  27. 27. #3DCGMeetUp ObjectPositionWS WS=ワールドスペース オブジェクトごとのワールド空間の中心位置を出力
  28. 28. #3DCGMeetUp WorldPosition ワールド空間の現在のピクセル位置を出力
  29. 29. #3DCGMeetUp ScreenPosition スクリーン空間の位置を出力
  30. 30. #3DCGMeetUp Vectorの話 グラデーションの正体 ComponentMask 選択したチャンネルだけに制限する MaskでRのみの表示にすると横方向のグラデーション
  31. 31. #3DCGMeetUp MaskでGのみの表示にすると縦方向のグラデーション
  32. 32. #3DCGMeetUp 画面の横度合いのグラデーション 画面の縦度合いのグラデーション + = R G
  33. 33. #3DCGMeetUp チャンネルが少ないということ Photoshopのここが少ない状態 (上から順番に詰める)
  34. 34. #3DCGMeetUp クイズ マニュピレーターの色ってどうやって決まっているかわかりますか? これ こたえ RGB = XYZだから コンピューターにとってはRGBもXYZも同じ
  35. 35. #3DCGMeetUp WorldPositionのBチャンネルに使うと高さ方向のグラデーションになる (例)WorldPositionのグラデーションをMaskしてみる
  36. 36. #3DCGMeetUp TextureCoordinate+TextureSample Vector 複数のチャンネルの数値(ここではUとV) 2チャンネルのVector Vectorであれば TextureCoordinateでなくともよい
  37. 37. #3DCGMeetUp ここまでの知識でできること プロジェクションマッピング WorldPosition R(X) → U WorldPosition G(Z) → V TextureCoordinateの代わりの値を作る
  38. 38. #3DCGMeetUp Time 時間を出力 → 入力 出 力 Sine 正弦波に変換 ※ 実際には明滅します
  39. 39. #3DCGMeetUp TextureCoordinateにTimeの値を加算 ここまでの知識でできること UVスクロール ※ 実際には模様が移動します
  40. 40. #3DCGMeetUp CameraPositionWS ワールド空間のカメラ位置を出力 ※ カメラのX座標で明るさが変わります
  41. 41. #3DCGMeetUp DistanceToNearstSurface マテリアル内でDistanceFieldAOの値を取得 オブジェクトの設置をとれる 画像は[Show] > [Visualize] > [Distance Fields Ambient Occlusion]
  42. 42. #3DCGMeetUp あらためてチャンネルとは? 色 RGBの3チャンネル 時間 どれだけ経過したかという1チャンネル 位置 XYZの3チャンネル UV UとVの2チャンネル
  43. 43. #3DCGMeetUp CGにおいてすごくたいせつなこと 「色も時間も位置もUVも画像もみんなおなじ」 (いくつかのチャンネルの値でしかない) コンピューターにとってはRGBもXZYも同じもの(3チャンネルのVector) マニュピレータの色はXZYにRGBに相当することを示している
  44. 44. #3DCGMeetUp 計算式を加える
  45. 45. #3DCGMeetUp グラデーションをシャープにする
  46. 46. #3DCGMeetUp 球を描く 中心の位置から半径の値を引く (WorldPositionは塗りつぶす対象として必要)
  47. 47. #3DCGMeetUp 球と円の違い 円とは Z軸(高さ方向)の値を持たない球 カメラと球の中心位置からBチャンネル(この場合はZ)をMask
  48. 48. #3DCGMeetUp カメラ座標を使ってみる 球を描く式の中心の座標の代わりにカメラの座標を使ってみる 近づくと穴が開く仕組みができる
  49. 49. #3DCGMeetUp 球を多重にしてみる
  50. 50. #3DCGMeetUp グラデーションの波形変換 正弦波 Sine(-1~1) ノコギリ波 Fmod 矩形波(っぽいもの) Sineに大きな値をかけてSaturateとか キレイな正弦波や矩形波を作るマテリアルファンクション
  51. 51. #3DCGMeetUp 円を描くもう一つの方法 VectorToRadiusVaueで極座標変換できるのでこれでも円は描けます (これもマテリアルファンクション)
  52. 52. #3DCGMeetUp 螺旋を作る 時計回りのグラデーションを利用して螺旋にしてみました
  53. 53. #3DCGMeetUp 画像でトーンマッピング TextureSample = チャンネルを画像ベースで再マッピングと解釈
  54. 54. #3DCGMeetUp 画像で動かす
  55. 55. #3DCGMeetUp 画像でUVをゆがめる 左側のテクスチャで右側のテクスチャが歪む
  56. 56. #3DCGMeetUp UVにテクスチャをマッピングするということ 0 1 1 0 UV空間に画像をマッピング ↓ 2Vectorと3Vector ⇒ 別の3Vector
  57. 57. #3DCGMeetUp TextureSampleのほんとうの意味 TextureSample UVに対して画像を貼るノード TextureSample 2Vectorと3Vectorを使い、別の3Vectorをつくる InputはUVでなくとも構わないし、 出力は画像でなくとも構わない
  58. 58. #3DCGMeetUp 画像を画像以外のものとして扱う (もしかしてすごく特殊な話をしているように聞こえたかも…?) でも、本質的にはこんにちのゲーム開発ではアタリマエ よく使われる例 NormalMap TangetNormalの変位情報 VAT(Vertex Animation Texture) 時間経過でピクセルの頂点がどう移動するかという情報 画像出典 http://houdini.indyzone.jp/blog/vertex-animation-texture-について/
  59. 59. #3DCGMeetUp CGにおいてすごくたいせつなこと 「色も時間も位置もUVも画像もみんなおなじ」 画像を移動情報に使ってもよいし、オブジェクトの位置をカラーにしてもよい UVの代わりにワールド空間を使ってもよいし、時間を使ってもよい 頂点座標を時間から作ってもよいし、色をUVから求めてもよい
  60. 60. #3DCGMeetUp もっと自由なCG制作を楽しもう!

    Be the first to comment

    Login to see the comments

  • ssuser632ccf

    Dec. 9, 2018
  • ssuser61eae31

    Dec. 9, 2018
  • ssusere8ab04

    Dec. 9, 2018
  • teev2k

    Dec. 9, 2018
  • suzukiMYjp

    Dec. 10, 2018
  • tatsuyahiramitsu

    Aug. 4, 2019
  • HirotsuguOkuda

    Nov. 19, 2019
  • SantaArakawa

    Nov. 19, 2019
  • keikamitani

    Nov. 28, 2019
  • takumikodasawa

    Dec. 5, 2019

2018/12/8 第14回3DCGMeetup(大阪)で使用したスライドに補足を加えたものです。

Views

Total views

6,523

On Slideshare

0

From embeds

0

Number of embeds

2,742

Actions

Downloads

28

Shares

0

Comments

0

Likes

10

×