Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ゲームグラフィックスなんもわからんから脱却しよう
Search
Kutani Mio
February 15, 2020
Programming
11
6.6k
ゲームグラフィックスなんもわからんから脱却しよう
Event for Diverse Game Engineers #5 で登壇した内容となります。
3Dゲームグラフィックスを学ぶのに足掛かり
Kutani Mio
February 15, 2020
Tweet
Share
More Decks by Kutani Mio
See All by Kutani Mio
Understanding vtable And Unity’s Memory Layout
rossam
0
170
Unity+C#で学ぶ! メモリレイアウトとvtableのすゝめ 〜動的ポリモーフィズムを実現する仕組み〜
rossam
1
820
GameAIとは.pdf
rossam
0
380
Jenkins自動化入門〜事例を添えて〜
rossam
1
700
基礎から学ぶ!UE4でC++を交えたAI開発、興味ないですか?
rossam
4
2k
C#8.0という未来を垣間見る話
rossam
0
1.4k
視て、わかる!C#7.1までの言語機能
rossam
4
4.3k
レポート「2017 Breakthroughs In Spatial Audio Technologies 」
rossam
0
430
Other Decks in Programming
See All in Programming
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
52
32k
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
350
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.2k
Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト@Vue Fes Japan 2024
shingangan
3
890
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
僕がつくった48個のWebサービス達
yusukebe
18
17k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
7
430
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
120
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
400
CSC509 Lecture 08
javiergs
PRO
0
110
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.1k
Typedesign – Prime Four
hannesfritz
39
2.4k
Agile that works and the tools we love
rasmusluckow
327
21k
Embracing the Ebb and Flow
colly
84
4.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
A better future with KSS
kneath
238
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Rails Girls Zürich Keynote
gr2m
93
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Transcript
から脱却しよう 2020/2/15 Event for Diverse Game Engineers #5 九谷 美生(ろっさむ) なんもわからん…
はじめに
今回のセッションの目標 今までグラフィックス周り ほぼ触ったことがなく 用語も知識も としたことしか知らない 素人エンジニアが この本→ を読みたくなる最低限の知識を 得るのが本日のゴールです。 ;Θͬ
自己紹介 ろっさむ と申します。 Twitter:@4_mio_11 2018.3 -〜MSMVP(VSDT)系最弱イーブイ ギターとかUE4とかC#とかゲームAIが好きです
本日のお品書き マテリアル と テクスチャ ラフネス、メタリック、エミッシブカラー、 ノーマル、PBR、ハイトマップ、視差マップ 基本のき 直交座標系、sRGB、 リニア空間、ガンマ空間 レンダリング
パイプライン 頂点シェーダ、テッセレーションシェーダ、 ジオメトリシェーダ、 ラスタライザ、ピクセルシェーダ 昔話 DirectX、プログラマブルシェーダ
レンダリング パイプライン なんもわからん…
昔々 「DirectX」という サウンド、グラフィックス、ネットワーク、 ゲームコントローラーなどの マルチメディア処理用APIの集合体が生まれました。 時代と共にGPUが進化し、 それに伴って新しい機能もたくさん生まれ、 DirectX側もそのためのAPIをたくさん用意しました。 DirectX 7まではハードウェア側で
この予め用意されていた固定機能を使って 描画する方法がとられていました。
レンダリングパイプラインとは 描画用の 固定機能 実際にデータを描画するまでの過程部分を レンダリングパイプラインと言います。 (別名:グラフィックスパイプライン) 3Dオブジェクト
レンダリングパイプラインのざっくり中身(1) 中身的にはこんな感じです。 CPU側で モデル構築と配置 頂点シェーダ ・頂点単位の座標変換処理を シェーダプログラムに従って行う ・頂点単位のライティング処理 ・テクスチャを どこに貼り付けるかの座標計算
頂点色や ピクセル色を 変化させるもの という意味
レンダリングパイプラインのざっくり中身(2) 中身的にはこんな感じです。 ワールド座標から カメラ座標へ変換 視界から外れた モデルのポリゴンを破棄 クリッピング処理 陰面処理
レンダリングパイプラインのざっくり中身(3) 中身的にはこんな感じです。 頂点シェーダで 出た計算結果を ピクセル単位に設定 そのポリゴンがどの ピクセルを埋めるか判断 ラスタライズ処理 Unity道場2019 2月
https://www.youtube.com/watch?v=wUx_Y9BgC7k
レンダリングパイプラインのざっくり中身(4) 中身的にはこんな感じです。 ・ピクセル単位での陰影処理を シェーダプログラムに従って行う ・テクスチャの適用 ・ベクトルテクスチャを用いて 材質表現を実現したり… ピクセルシェーダ UE4 Starter
Contents M_CobbleStone_Pebble
レンダリングパイプラインのざっくり中身(5) 書き込んで良いピクセルかを検証 ・「アルファテスト」で ピクセル色が完全に透明かどうか確認 →透明ならピクセル描画破棄 ・「ステンシルテスト」で 設定した条件にパスできないピクセルを破棄 (画面の一部くり抜きなどに応用される) ・「深度テスト」で
視点からきちんと見えるピクセルかどうか確認
レンダリングパイプラインのざっくり中身(6) 出力!
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グラフィックス周りに関しては 計算式も絡んで難しそうに思えるかもしれませんが 興味があるならとりあえず学んでみましょう! 概念的なところを最初に掴むだけでも 世界の見え方が変わります。
ご清聴 有難うございました