Event for Diverse Game Engineers #5 で登壇した内容となります。 3Dゲームグラフィックスを学ぶのに足掛かり
から脱却しよう2020/2/15Event for Diverse Game Engineers #5九谷 美生（ろっさむ）なんもわからん…
View Slide
はじめに
今回のセッションの目標今までグラフィックス周りほぼ触ったことがなく用語も知識もとしたことしか知らない素人エンジニアがこの本→を読みたくなる最低限の知識を得るのが本日のゴールです。;Θͬ
自己紹介ろっさむ と申します。Twitter:@4_mio_112018.3 -〜MSMVP(VSDT)系最弱イーブイギターとかUE4とかC#とかゲームAIが好きです
本日のお品書きマテリアル とテクスチャラフネス、メタリック、エミッシブカラー、ノーマル、PBR、ハイトマップ、視差マップ基本のき直交座標系、sRGB、 リニア空間、ガンマ空間レンダリングパイプライン頂点シェーダ、テッセレーションシェーダ、ジオメトリシェーダ、ラスタライザ、ピクセルシェーダ昔話 DirectX、プログラマブルシェーダ
レンダリングパイプラインなんもわからん…
昔々「DirectX」というサウンド、グラフィックス、ネットワーク、ゲームコントローラーなどのマルチメディア処理用APIの集合体が生まれました。時代と共にGPUが進化し、それに伴って新しい機能もたくさん生まれ、DirectX側もそのためのAPIをたくさん用意しました。DirectX 7まではハードウェア側でこの予め用意されていた固定機能を使って描画する方法がとられていました。
レンダリングパイプラインとは描画用の 固定機能実際にデータを描画するまでの過程部分をレンダリングパイプラインと言います。（別名：グラフィックスパイプライン）3Dオブジェクト
レンダリングパイプラインのざっくり中身（１）中身的にはこんな感じです。CPU側で モデル構築と配置頂点シェーダ・頂点単位の座標変換処理をシェーダプログラムに従って行う ・頂点単位のライティング処理・テクスチャを どこに貼り付けるかの座標計算頂点色やピクセル色を変化させるものという意味
レンダリングパイプラインのざっくり中身（２）中身的にはこんな感じです。ワールド座標からカメラ座標へ変換視界から外れた モデルのポリゴンを破棄クリッピング処理 陰面処理
レンダリングパイプラインのざっくり中身（３）中身的にはこんな感じです。頂点シェーダで出た計算結果をピクセル単位に設定そのポリゴンがどのピクセルを埋めるか判断ラスタライズ処理Unity道場2019 2月 https://www.youtube.com/watch?v=wUx_Y9BgC7k
レンダリングパイプラインのざっくり中身（４）中身的にはこんな感じです。・ピクセル単位での陰影処理をシェーダプログラムに従って行う・テクスチャの適用・ベクトルテクスチャを用いて材質表現を実現したり…ピクセルシェーダUE4 Starter Contents M_CobbleStone_Pebble
レンダリングパイプラインのざっくり中身（５）書き込んで良いピクセルかを検証・「アルファテスト」で ピクセル色が完全に透明かどうか確認 →透明ならピクセル描画破棄・「ステンシルテスト」で 設定した条件にパスできないピクセルを破棄 （画面の一部くり抜きなどに応用される） ・「深度テスト」で 視点からきちんと見えるピクセルかどうか確認
レンダリングパイプラインのざっくり中身（６）出力！
RE:昔々「DirectX」というサウンド、グラフィックス、ネットワーク、ゲームコントローラーなどのマルチメディア処理用APIの集合体が生まれました。時代と共にGPUが進化し、それに伴って新しい機能もたくさん生まれ、DirectX側もそのためのAPIをたくさん用意しました。DirectX 7まではハードウェア側でこの予め用意されていた固定機能を使って描画する方法がとられていました。
APIの肥大化描画用の 固定機能3Dオブジェクトしかしせっかく用意したAPIが使われずに化石化したりGPUの進化にDirectXが追いつけなくなっていきました。
プログラマブルシェーダとは描画処理（シェーダ）をユーザー側でカスタマイズできるようにしたらいいのでは？シェーダをプログラムできるという概念「プログラマブルシェーダ」が誕生これはDirectX 8からサポートされるように
プログラマブルシェーダ登場頂点シェーダピクセルシェーダとに対してオリジナルのシェーダプログラムを実装できるようになった！また、DirectX 11では新たに以下が追加ハルシェーダ 、テッセレータ、ドメインシェーダ、ジオメトリシェーダ今回は 解説せず
ジオメトリシェーダ頂点シェーダとカメラ座標変換の間に処理が増えましたジオメトリシェーダシェーダプログラムに従って頂点の増減を行う。（地面に草はやしたりキャラクターに毛をはやしたり） 頂点 シェーダカメラ座標 へ 変換
マテリアルと テクスチャなんもわからん…
直行座標系座標系（Coordinate System）は原点と軸（x,y,z）を持った、 位置や方向を表すための仕組み。直行座標系は軸同士が直角に交わっている座標系。ゲームではこの直交座標系がよく用いられています。直交座標系には右手系と左手系があります。さらにY アップ、Zアップも…。 （これは皆さんご存知のとおりかと…）
マテリアルとはゲームエンジンでよく見かけるマテリアルその正体とは…メッシュに対して凹凸があるような質感をつけたり光のつき方などで材質が異なるように見せる ハイテク機能！（水溜りとか雪とかも作れる！）
マテリアルを構成する要素今回はUE4のマテリアルノードで確認しますが基本は変わらない！はず！
ベースカラーマテリアル（適用するオブジェクト）自体の光が入ってない状態の色やテクスチャを決める項目。入力値はRGBの3チャンネル。
メタリック金属っぽさを設定する項目金属っぽさが高いと反射率が高く、映り込みにそのオブジェクトの色がつくことがあるという特徴がある。
ラフネス表面の粗さを設定する項目。ツルツルだとよく反射する。スペキュラも反射の調整項目だけど基本ラフネスを使用。ラフネスの値をコントロールすると、使用感を出せたりする。
エミッシブカラー自己発色する色を設定する項目。1より大きい値にすることで発光させることができる。ライティングの影響を受けなくなる。
テクスチャにも種類があるんだよベースカラー、メタリック、ラフネスが主に使用する項目です。でもこの項目だけじゃリアリティのある岩とか水とか作れないですよね？ 次は使用するテクスチャはどういったものになるのか見ていきます。
ベースカラーに繋げるのと同様、マテリアル自体の見た目を決めるのはベースカラーマップ。末尾に”_b”がついてる（UE4）ラフネスやメタリックの情報（数値）をテクスチャのRGBのチャンネルに入れているマスクマップ。Rチャンネルにラフネスマップ、Bチャンネルにメタリックマップ、Gチャンネルは基本使用しません。こういったテクスチャの使い方はメモリの節約になるためゲーム開発でよく使われます。末尾に”_m”がついてる（UE4）ベースカラーマップとマスクマップ
ノーマルマップ（別名：法線マップ）ハイポリゴンモデルが持つ凹凸の情報を画像に保存したもの。このマップを使用すると表面に詳細な凹凸があるように疑似的に見せれます。バンプマッピングの一種。RGB色がそれぞれXYZ方向に対応しています（基本的にRとGで凹凸表現をしてます）。末尾に”_n”がついてる（UE4）
マテリアルの質感計算手法ベースカラーラフネス メタリックベースカラーマップマスクマップ ノーマルマップPBR！これらを組み合わせて
PBRとは？物理ベースレンダリング（Physically Based Rendering） と呼ばれる現実世界の物理的に正しい値を使って、リッチな質感を作る手法のことです。ハイエンドゲームとかでよく使われています。現実世界の一般的な物体の質感はラフネス（粗さ）とメタリック（金属っぽさ）の2つの要素で数値化が可能という基礎理論があります。（ただし全て再現できるとは言っていない）
ここで注意が必要PBRの計算は線形空間（リニアスペース）レンダリングで行われています。 そのため、使用するテクスチャをリニア空間のデータとして読み込む必要があります。…リニア空間ってなんでしょう？
リニア空間、ガンマ空間ベースカラーやエミッシブカラーに接続するカラーのテクスチャデータはsRGB（国際標準規格：モニタなどの殆どの機器が対応している）のカラー空間（RGB、CMYKなど）データであると設定します。モニタにはデータを人間が見やすいようにする機能があり、それがガンマ補正といわれています。このガンマ補正が行われているテクスチャデータは「ガンマ空間」のデータとなります。PCのための計算用のデータは「リニア空間」で、黒-白のグラデーションをさせると一定数増加していますが人間の目からは見づらいです。
データの設定にはご注意を人間の目からは見やすくてもPCの計算で扱うにはガンマ空間のデータだと正しいライティング結果を得ることができません。本来の値より暗くなるなど、思ったようなレンダリング結果が得られなくなります。ご注意を！
データの設定にはご注意をこれでリアルな質感を持ったマテリアルが作れる！いやいや、もう一歩だけ進んでみましょう。実はノーマルマップだけだと近づいた時や逆光に弱いという弱点があります。こうして見るとなんだかのっぺりしています。「マテリアル入門」 より https://www.amazon.co.jp/dp/B075R42XX2/ref=cm_sw_r_tw_dp_U_x_0U4rEbADHT7VA
視差マッピング（PARALLAX MAPPING）ここで視差マッピングです。これは疑似的に奥行き感を見せるテクニックで、高さ情報をもとにマッピングされたテクスチャの座標をずらして奥行きがあるように見せるものです。ただし壁や床で使用する場合には見せ方に工夫が必要となります。「マテリアル入門」 より https://www.amazon.co.jp/dp/B075R42XX2/ref=cm_sw_r_tw_dp_U_x_0U4rEbADHT7VA
ハイトマップハイトマップとは高さマップともいわれ、高さの情報をテクスチャデータに保存したもの。「マテリアル入門」 より https://www.amazon.co.jp/dp/B075R42XX2/ref=cm_sw_r_tw_dp_U_x_0U4rEbADHT7VA
最後に
最後に3Dグラフィックス周りに関しては計算式も絡んで難しそうに思えるかもしれませんが興味があるならとりあえず学んでみましょう！概念的なところを最初に掴むだけでも世界の見え方が変わります。
ご清聴有難うございました
rossam
microcms
sagawa23
little_rubyist
ryu_hu03
nsuz
ivargrimstad
ayaka1230
mozu1206
konpay
tmokmss
os1ma
doggy
jacobian
colly
malarkey
brettharned
lara
jeffersonlam
bkeepers
davidbonilla
cherdarchuk
akmur
philnash
lauravandoore