ゲームグラフィックスなんもわからんから脱却しよう

Transcript

1. から脱却しよう 2020/2/15 Event for Diverse Game Engineers #5 九谷　美生（ろっさむ） なんもわからん…

2. はじめに

3. 今回のセッションの目標 今までグラフィックス周り ほぼ触ったことがなく 用語も知識も としたことしか知らない 素人エンジニアが この本→ を読みたくなる最低限の知識を 得るのが本日のゴールです。 ;Θͬ

4. 自己紹介 ろっさむ　と申します。 Twitter:@4_mio_11 2018.3 -〜MSMVP(VSDT)系最弱イーブイ ギターとかUE4とかC#とかゲームAIが好きです

5. 本日のお品書き マテリアル
 と テクスチャ ラフネス、メタリック、エミッシブカラー、 ノーマル、PBR、ハイトマップ、視差マップ 基本のき 直交座標系、sRGB、
 リニア空間、ガンマ空間 レンダリング

   パイプライン 頂点シェーダ、テッセレーションシェーダ、 ジオメトリシェーダ、 ラスタライザ、ピクセルシェーダ 昔話 DirectX、プログラマブルシェーダ

6. レンダリング パイプライン なんもわからん…

7. 昔々 「DirectX」という サウンド、グラフィックス、ネットワーク、 ゲームコントローラーなどの マルチメディア処理用APIの集合体が生まれました。 時代と共にGPUが進化し、 それに伴って新しい機能もたくさん生まれ、 DirectX側もそのためのAPIをたくさん用意しました。 DirectX 7まではハードウェア側で

   この予め用意されていた固定機能を使って 描画する方法がとられていました。

8. レンダリングパイプラインとは 描画用の
 固定機能 実際にデータを描画するまでの過程部分を レンダリングパイプラインと言います。 （別名：グラフィックスパイプライン） 3Dオブジェクト

9. レンダリングパイプラインのざっくり中身（１） 中身的にはこんな感じです。 CPU側で
 モデル構築と配置 頂点シェーダ ・頂点単位の座標変換処理を シェーダプログラムに従って行う
 ・頂点単位のライティング処理 ・テクスチャを
 どこに貼り付けるかの座標計算

   頂点色や ピクセル色を 変化させるもの という意味

10. レンダリングパイプラインのざっくり中身（２） 中身的にはこんな感じです。 ワールド座標から カメラ座標へ変換 視界から外れた
 モデルのポリゴンを破棄 クリッピング処理
 陰面処理

11. レンダリングパイプラインのざっくり中身（３） 中身的にはこんな感じです。 頂点シェーダで 出た計算結果を ピクセル単位に設定 そのポリゴンがどの ピクセルを埋めるか判断 ラスタライズ処理 Unity道場2019 2月


    https://www.youtube.com/watch?v=wUx_Y9BgC7k

12. レンダリングパイプラインのざっくり中身（４） 中身的にはこんな感じです。 ・ピクセル単位での陰影処理を シェーダプログラムに従って行う ・テクスチャの適用 ・ベクトルテクスチャを用いて 材質表現を実現したり… ピクセルシェーダ UE4 Starter

    Contents
 M_CobbleStone_Pebble

13. レンダリングパイプラインのざっくり中身（５） 書き込んで良いピクセルかを検証 ・「アルファテスト」で
 ピクセル色が完全に透明かどうか確認
 →透明ならピクセル描画破棄 ・「ステンシルテスト」で
 設定した条件にパスできないピクセルを破棄
 （画面の一部くり抜きなどに応用される） 
 ・「深度テスト」で


    視点からきちんと見えるピクセルかどうか確認

14. レンダリングパイプラインのざっくり中身（６） 出力！

15. RE:昔々 「DirectX」という サウンド、グラフィックス、ネットワーク、 ゲームコントローラーなどの マルチメディア処理用APIの集合体が生まれました。 時代と共にGPUが進化し、 それに伴って新しい機能もたくさん生まれ、 DirectX側もそのためのAPIをたくさん用意しました。 DirectX 7まではハードウェア側で

    この予め用意されていた固定機能を使って 描画する方法がとられていました。

16. APIの肥大化 描画用の
 固定機能 3Dオブジェクト しかしせっかく用意したAPIが使われずに化石化したり GPUの進化にDirectXが 追いつけなくなっていきました。

17. プログラマブルシェーダとは 描画処理（シェーダ）をユーザー側で カスタマイズできるように したらいいのでは？ シェーダをプログラムできるという概念 「プログラマブルシェーダ」が誕生 これはDirectX 8からサポートされるように

18. プログラマブルシェーダ登場 頂点シェーダ ピクセルシェーダ と に対して オリジナルのシェーダプログラムを 実装できるようになった！ また、DirectX 11では新たに以下が追加 ハルシェーダ

    、テッセレータ、 ドメインシェーダ、ジオメトリシェーダ 今回は
 解説せず

19. ジオメトリシェーダ 頂点シェーダとカメラ座標変換の間に 処理が増えました ジオメトリシェーダ シェーダプログラムに従って 頂点の増減を行う。 （地面に草はやしたり キャラクターに毛をはやしたり）　 頂点
 シェーダ

    カメラ座標
 へ
 変換

20. マテリアルと
 テクスチャ なんもわからん…

21. 直行座標系 座標系（Coordinate System）は原点と 軸（x,y,z）を持った、
 位置や方向を表すための仕組み。 直行座標系は 軸同士が直角に交わっている座標系。 ゲームではこの直交座標系がよく用いられています。 直交座標系には右手系と左手系があります。 さらにY

    アップ、Zアップも…。
 
 （これは皆さんご存知のとおりかと…）

22. マテリアルとは ゲームエンジンでよく見かけるマテリアル その正体とは… メッシュに対して凹凸があるような質感をつけたり 光のつき方などで材質が異なるように見せる 　　　　　　　　ハイテク機能！（水溜りとか雪とかも作れる！）

23. マテリアルを構成する要素 今回はUE4のマテリアルノードで確認しますが 基本は変わらない！はず！

24. ベースカラー マテリアル（適用するオブジェクト）自体の 光が入ってない状態の色や テクスチャを決める項目。 入力値はRGBの3チャンネル。

25. メタリック 金属っぽさを設定する項目 金属っぽさが高いと 反射率が高く、 映り込みにそのオブジェクトの色がつくことが あるという特徴がある。

26. ラフネス 表面の粗さを設定する項目。 ツルツルだとよく反射する。 スペキュラも反射の調整項目 だけど 基本ラフネスを使用。 ラフネスの値をコントロールすると、使用感を出せたりする。

27. エミッシブカラー 自己発色する色を設定する項目。 1より大きい値にすることで発光させることができる。 ライティングの影響を受けなくなる。

28. テクスチャにも種類があるんだよ ベースカラー、メタリック、ラフネス が主に使用する項目です。 でもこの項目だけじゃ リアリティのある岩とか水とか作れないですよね？
 次は使用するテクスチャは どういったものになるのか見ていきます。

29. ベースカラーに繋げるのと同様、 マテリアル自体の見た目を決めるのは ベースカラーマップ。末尾に”_b”がついてる（UE4） ラフネスやメタリックの情報（数値）を テクスチャのRGBのチャンネルに入れているマスクマップ。 Rチャンネルにラフネスマップ、Bチャンネルにメタリックマップ、 Gチャンネルは基本使用しません。 こういったテクスチャの使い方は メモリの節約になるためゲーム開発でよく使われます。 末尾に”_m”がついてる（UE4）

    ベースカラーマップとマスクマップ

30. ノーマルマップ（別名：法線マップ） ハイポリゴンモデルが持つ凹凸の情報を画像に保存したもの。 このマップを使用すると表面に詳細な凹凸があるように 疑似的に見せれます。バンプマッピングの一種。 RGB色がそれぞれXYZ方向に対応しています （基本的にRとGで凹凸表現をしてます）。 末尾に”_n”がついてる（UE4）

31. マテリアルの質感計算手法 ベースカラー ラフネス メタリック ベースカラーマップ マスクマップ ノーマルマップ PBR！ これらを組み合わせて

32. PBRとは？ 物理ベースレンダリング（Physically Based Rendering）
 と呼ばれる 現実世界の物理的に正しい値を使って、リッチな質感を作る 手法のことです。 ハイエンドゲームとかでよく使われています。 現実世界の一般的な物体の質感は ラフネス（粗さ）とメタリック（金属っぽさ）の

    2つの要素で数値化が可能という基礎理論があります。 （ただし全て再現できるとは言っていない）

33. ここで注意が必要 PBRの計算は線形空間（リニアスペース）レンダリングで 行われています。
 
 
 そのため、使用するテクスチャをリニア空間のデータとして 読み込む必要があります。 … リニア空間ってなんでしょう？

34. リニア空間、ガンマ空間 ベースカラーやエミッシブカラーに接続するカラーのテクスチャデータは sRGB（国際標準規格：モニタなどの殆どの機器が対応している）の カラー空間（RGB、CMYKなど）データであると設定します。 モニタにはデータを人間が見やすいようにする機能があり、 それがガンマ補正といわれています。 このガンマ補正が行われているテクスチャデータは 「ガンマ空間」のデータとなります。 PCのための計算用のデータは「リニア空間」で、 黒-白のグラデーションをさせると一定数増加していますが

    人間の目からは見づらいです。

35. データの設定にはご注意を 人間の目からは見やすくても PCの計算で扱うにはガンマ空間のデータだと 正しいライティング結果を得ることができません。 本来の値より暗くなるなど、 思ったようなレンダリング結果が得られなくなります。 ご注意を！

36. データの設定にはご注意を これでリアルな質感を持ったマテリアルが作れる！ いやいや、もう一歩だけ進んでみましょう。 実はノーマルマップだけだと近づいた時や 逆光に弱いという弱点があります。 こうして見るとなんだかのっぺりしています。 「マテリアル入門」
 より
 https:// www.amazon.co.jp/dp/

    B075R42XX2/ ref=cm_sw_r_tw_dp_U_x_ 0U4rEbADHT7VA

37. 視差マッピング（PARALLAX MAPPING） ここで視差マッピングです。 これは疑似的に奥行き感を見せるテクニックで、 高さ情報をもとにマッピングされたテクスチャの座標をずらして 奥行きがあるように見せるものです。 ただし壁や床で使用する場合には見せ方に工夫が必要となります。 「マテリアル入門」
 より
 https://

    www.amazon.co.jp/dp/ B075R42XX2/ ref=cm_sw_r_tw_dp_U_x_ 0U4rEbADHT7VA

38. ハイトマップ ハイトマップとは高さマップともいわれ、 高さの情報をテクスチャデータに保存したもの。 「マテリアル入門」
 より
 https:// www.amazon.co.jp/dp/ B075R42XX2/ ref=cm_sw_r_tw_dp_U_x_ 0U4rEbADHT7VA

39. 最後に

40. 最後に 3Dグラフィックス周りに関しては 計算式も絡んで難しそうに思えるかもしれませんが 興味があるならとりあえず学んでみましょう！ 概念的なところを最初に掴むだけでも 世界の見え方が変わります。

41. ご清聴 有難うございました