リアルタイムレンダリングでのマテリアル表现
?Download as PPTX, PDF?
11 likes?7,245 views
2018/12/8 第14回3DCGMeetup（大阪）で使用したスライドに補足を加えたものです。
![#3DCGMeetUp
DistanceToNearstSurface
マテリアル内でDistanceFieldAOの値を取得
オブジェクトの設置をとれる
画像は[Show] > [Visualize] > [Distance Fields Ambient Occlusion]](https://image.slidesharecdn.com/3dcgmeetup14lite-181209135148/85/-41-320.jpg)
リアルタイムレンダリングでのマテリアル表现
- 2. #3DCGMeetUp 自己紹介 Name : Kurosawa Twitter ID : kurosaurus URL : the-saurus.net アートディレクター／テクニカルアーティスト
- 3. #3DCGMeetUp お題目 マテリアルを学ぼう。マテリアルを学べばこんなことができる。 ? テクスチャだけではできない表現 ? 実例紹介 ? 様々な入力情報 ? 計算式を加える
- 5. #3DCGMeetUp マテリアルを学ぶとできること ? 画像の値を超えた表示ができる ? 解像度の限界を超えられる ? バリエーションを作れる ? ゲーム中に動かせる
- 9. #3DCGMeetUp ゲーム中に動かせる 狭義での動くマテリアル ? 明滅する ? 眼球が僅かに揺れる ? 波の満ち引き 広義での動くマテリアル ? カメラに近づくと消えるマテリアル ? ビルボード（カメラの向きを無視して空間に固定） ? インテリアマップ
- 11. #3DCGMeetUp 事例紹介
- 19. #3DCGMeetUp Constant Constant (Scalar） Constant2Vector Constant3Vector Constant4Vector 特定のチャンネル数の数値（定数）をつくる。 この数値はゲーム内では変更できない。 Scalar 1チャンネル Vector 2-4チャンネル ※ 分かりやすくするため画面すべてのオブジェクトに 同じマテリアルを貼っています
- 22. #3DCGMeetUp 基本的な数式を覚えておこう Add 加算 Subtract 減算 Multiply 乗算 Divide 除算 Saturate 0以下と1以上を切り捨て ComponentMask 特定のチャンネルだけにする Append チャンネルを追加する
- 23. #3DCGMeetUp ComponentMask補足 ComponentMask 特定のチャンネルだけにする ≠ 赤や緑になる Photoshopでいうチャンネル表示（チャンネルごとに0-1の値） 赤さの強度 どれくらい赤いか
- 37. #3DCGMeetUp ここまでの知識でできること プロジェクションマッピング WorldPosition R（X） → U WorldPosition G（Z） → V TextureCoordinateの代わりの値を作る
- 38. #3DCGMeetUp Time 時間を出力 → 入力 出 力 Sine 正弦波に変換 ※ 実际には明灭します
- 41. #3DCGMeetUp DistanceToNearstSurface マテリアル内でDistanceFieldAOの値を取得 オブジェクトの設置をとれる 画像は[Show] > [Visualize] > [Distance Fields Ambient Occlusion]
- 42. #3DCGMeetUp あらためてチャンネルとは？ 色 RGBの3チャンネル 時間 どれだけ経過したかという1チャンネル 位置 XYZの3チャンネル UV UとVの2チャンネル
Editor's Notes
- #3: 今回、登壇の話を出したら、会社名を出すなら旅費や宿泊費が半額出ると言われたのでー 学ぶ機会には積極な会社 アート職も積極的に募集中 TA,アートディレクター、モデラー 興味がある人は後で声をかけて下さい
- #6: テクスチャを貼っただけで終わりになっていませんか？ マテリアルを学ぶと
- #10: 服が水に濡れて色が暗くなったり、风で服の裾がはためいたり、マントとか
- #13: めんたいこさんが開始したサービス 今日の公演ではPlugsの内容をそのままやるわけではない でも本質的な部分を理解すれば、同じことができるはず 公演を見てUE4のマテリアルをもっと学びたいとおもったら買ってね！ 登壇者も募集してるそうなので、興味がある人は懇親会で声をかけてみてもいいかも
- #16: コントラストを付けることでノイズテクスチャの解像度をよりわかりにくくしている
- #17: 入力情報 とってくることしかできない マテリアルの大前提
- #20: チャンネル数 数字の数 １チャンネルだとグレースケール、３ちゃんねるでカラー、４ちゃんねるでカラーとアルファ Photoshopだと0-255というが、マテリアルでは0-1でいうことがおおい わかりやすくするために選択しているため、輪郭線が出ています（実際には出ません） 今後も輪郭線が出ていることがありますが、基本的に無視してください この画像とか、以下に出てくる画像はすべて全部同じマテリアルを貼っている
- #21: （今の时代は负荷はそこまで気にしなくてもいい）
- #22: 贬顿搁滨画像は0-1に収まらないけど、データサイズはかなり大きいので気軽に使えない
- #23: 四則演算は説明いらないよね？ Saturateはわかりにくいけど、先程のParameterのあとにつなぐと１になる ComponentMaskはカラー画像だとRだけを取り出したりGだけを取り出したり といってもPhotoshopで言うところの緑（0,255,0）になるのではなく チャンネルそのものが減る 緑成分だけのスカラー値になるイメージ
- #25: 単に鲍痴に沿って画像を贴ることに使うことが多いが、たぶんそこは本质的な理解ではない
- #26: 2チャンネルのVector Webドキュメントにもそう書いてる UとVだから2つのチャンネルのVectorだという当たり前の話でもあるが、 本公演の重要なテーマなので貼っておく
- #27: マテリアルファンクション マテリアルの機能の一部を関数化して使い回す仕組み マテリアルだと関数＝機能とでも覚えておいてもよい
- #28: 見た目をわかりゃすくするためにちょっとだけ数式をくわえています Divid 割り算 1024という数値はさっきでたconstant UE4は単位系がcmなので ObjectPositionWSで出てくる値は数千とか大きな値 なぜこんなカラフルな画像なのかはあとで説明
- #29: 先程の画像と似ている 先程はオブジェクトごとの中心座標だが、こちらはピクセルごとの座標
- #30: わかりにくいのでオブジェクトを選択している UIなど画面上で一定の場所に出るものに便利 また変なグラデーションがでてきた UE4を使用しているとこんなグラデーションを何度もみることになる このグラデーションが一見わかりにくい
- #31: ノードではMask（XX）とだけ表示 MaskをRだけを表示してみると横方向のグラデーションであることがわかる Gは縦方向のグラデーション
- #32: Gにすると縦方向のグラデーション つまり、横方向のグラデーションはRで描かれ、縦方向のグラデーションはGで描かれる
- #33: このよくわからないグラデーションは 赤い成分のグラデーション＋緑成分のグラデーションです 赤成分 左黒い 緑成分 上黒い どっちの黒いので左上が黒い どっちも白いので、右下が赤＋緑で黄色
- #35: あとでもう少し詳しく説明しますが、 コンピューターにとってはRGBもXYZも同じこと すごく大事なこと
- #36: ScreenPositionにMaskしたようにWorldPositionのBチャンネルをマスクしてみます。 すると高さ方向のグラデーションになる ここでちょっとマニュピレーターに注目 矢印の縦方向が青だ
- #37: テクスチャをつないでいるだけのこれ これってつまりどういうこと？ 0番のUVでマテリアルを貼りますよという意味、UVを貼るとはどういうこと？ TextureCoordinateには2チャンネルのベクターが入っているということに注目
- #38: 上から投影マッピングしたように见える
- #39: Timeからくる値はゲームの開始時間ともにどんどん増えていく 簡単に1以上の値になるので少し処理を入れている Sine -1～1の正弦波に変換して出力 さっきと同じような計算だけど、目に優しいように0.25~0.75の間で出力。 めっちゃチカチカする
- #40: TextureCoordinateはUとVの2つのチャンネルだが、timeは一つのチャンネル、こういう足し算の場合はUとVそれぞれに足すことになる UとV、それぞれが動くので斜めにスクロール モデルのUVを動かしているのではない ピクセル側からずれている
- #41: カメラの位置なのでカメラを動かすと値が変化する この計算の意味 カメラの座標はとても大きな数値なので、1000くらいで割っている その後、MaskGで緑の成分（座標でいうとY）だけ表示している
- #42: ほかにオブジェクト同士の設置をみれるのはDepthFadeとか ただしこちらはデプスバッファをつかう つまり半透明だけ
- #43: ここまで见てた中で元がどんな値でもチャンネルとして自由に使っていることに気がついたはず…
- #44: コンピューターを使っている以上、当たり前といえば当たり前 色も時間も位置もUVもテクスチャもただの値にすぎない 最初のマニュピレーターの話に戻ってみる このあとはそれらを応用して何ができるか、いくつか例を示す
- #46: 0.5を引いた後にシャープにするための数値をかける。その後0.5を足す コントラストを作る中心位置を0.5にするために行う計算 Saturateで1以上をカット これもシャープにするためによくやる計算
- #47: 以外に感じるかもですが、 二点間のグラデーションを作るよりも、球のほうが簡単だったりします。 Distance 距離をだす
- #50: 実は先ほどの球を描く方法では非常にシャープな球を描いているようにみえるが、0-100000という非常に大きな数値がきている Saturateで１以上の値を1にしているだけ 1-x 反転する Fmod 余りを求める 余りを求める のは非常によく使うテクニック 0-10までの数値があるとする 3で割った余りを求めると、値は0,1,2 0,1,2 0,1,2 0,1 になる つまり繰り返すことになる
- #52: 赤い部分が円のグラデーションのようになっているのがわかる 小さな円に見えるが、この範囲よりも大きなものが１よりも大きな値で広がっている サチュレートしているからみえないだけ 極座標変換のマテリアルファンクションはUV空間に落としこまれているので、２チャンネルのベクトルになってる なので球にはならない 極座標で作るメリットはもう一つあって、Gチャンネルが時計回りのグラデーションを作り出す。こちらを使って面白いマテリアルを
- #53: Fracは1で割ったFModと同じ 時計回りのグラデーションに１を足して（ずらして）加算する。 その値に時間を加工したデータを足して動かす。 サインで一定周期の模様に変える（FMODでやった処理と同じようなこと）
- #54: TextureSample UVをベースに画像を貼る機能だけでなく より広義に解釈 UV（0-1）空間で入ってきたものを画像ベースの再マッピング
- #56: もう少し複雑になった例 時間ベースで同じ感覚で流れてくる値
- #59: 画像を画像以外のものとして、 単なる情報として扱うというのはもはやアタリマエの世界にいます
- #60: コンピューターを使っている以上、当たり前といえば当たり前 色も時間も位置もUVもテクスチャもただの値にすぎない