Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Kutani Mio
February 15, 2020

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

Event for Diverse Game Engineers #5 で登壇した内容となります。
3Dゲームグラフィックスを学ぶのに足掛かり

Kutani Mio

February 15, 2020
Tweet

More Decks by Kutani Mio

Other Decks in Programming

Transcript

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

    View Slide

  2. はじめに

    View Slide

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

    View Slide

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

    View Slide

  5. 本日のお品書き
    マテリアル


    テクスチャ
    ラフネス、メタリック、エミッシブカラー、
    ノーマル、PBR、ハイトマップ、視差マップ
    基本のき
    直交座標系、sRGB、

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

    View Slide

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

    View Slide

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

    View Slide

  8. レンダリングパイプラインとは
    描画用の

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

    View Slide

  9. レンダリングパイプラインのざっくり中身(1)
    中身的にはこんな感じです。
    CPU側で

    モデル構築と配置
    頂点シェーダ
    ・頂点単位の座標変換処理を
    シェーダプログラムに従って行う

    ・頂点単位のライティング処理
    ・テクスチャを

    どこに貼り付けるかの座標計算
    頂点色や
    ピクセル色を
    変化させるもの
    という意味

    View Slide

  10. レンダリングパイプラインのざっくり中身(2)
    中身的にはこんな感じです。
    ワールド座標から
    カメラ座標へ変換
    視界から外れた

    モデルのポリゴンを破棄
    クリッピング処理

    陰面処理

    View Slide

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

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

    View Slide

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

    M_CobbleStone_Pebble

    View Slide

  13. レンダリングパイプラインのざっくり中身(5)
    書き込んで良いピクセルかを検証
    ・「アルファテスト」で

    ピクセル色が完全に透明かどうか確認

    →透明ならピクセル描画破棄
    ・「ステンシルテスト」で

    設定した条件にパスできないピクセルを破棄

    (画面の一部くり抜きなどに応用される)

    ・「深度テスト」で

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

    View Slide

  14. レンダリングパイプラインのざっくり中身(6)
    出力!

    View Slide

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

    View Slide

  16. APIの肥大化
    描画用の

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

    View Slide

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

    View Slide

  18. プログラマブルシェーダ登場
    頂点シェーダ
    ピクセルシェーダ

    に対して
    オリジナルのシェーダプログラムを
    実装できるようになった!
    また、DirectX 11では新たに以下が追加
    ハルシェーダ 、テッセレータ、
    ドメインシェーダ、ジオメトリシェーダ
    今回は

    解説せず

    View Slide

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

    シェーダ
    カメラ座標

    へ

    変換

    View Slide

  20. マテリアルと

    テクスチャ
    なんもわからん…

    View Slide

  21. 直行座標系
    座標系(Coordinate System)は原点と
    軸(x,y,z)を持った、

    位置や方向を表すための仕組み。
    直行座標系は
    軸同士が直角に交わっている座標系。
    ゲームではこの直交座標系がよく用いられています。
    直交座標系には右手系と左手系があります。
    さらにY アップ、Zアップも…。


    (これは皆さんご存知のとおりかと…)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    次は使用するテクスチャは
    どういったものになるのか見ていきます。

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  32. PBRとは?
    物理ベースレンダリング(Physically Based Rendering)

    と呼ばれる
    現実世界の物理的に正しい値を使って、リッチな質感を作る
    手法のことです。
    ハイエンドゲームとかでよく使われています。
    現実世界の一般的な物体の質感は
    ラフネス(粗さ)とメタリック(金属っぽさ)の
    2つの要素で数値化が可能という基礎理論があります。
    (ただし全て再現できるとは言っていない)

    View Slide

  33. ここで注意が必要
    PBRの計算は線形空間(リニアスペース)レンダリングで
    行われています。



    そのため、使用するテクスチャをリニア空間のデータとして
    読み込む必要があります。

    リニア空間ってなんでしょう?

    View Slide

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

    View Slide

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

    View Slide

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

    より

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

    View Slide

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

    より

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

    View Slide

  38. ハイトマップ
    ハイトマップとは高さマップともいわれ、
    高さの情報をテクスチャデータに保存したもの。
    「マテリアル入門」

    より

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

    View Slide

  39. 最後に

    View Slide

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

    View Slide

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

    View Slide