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.7k
ゲームグラフィックスなんもわからんから脱却しよう
Event for Diverse Game Engineers #5 で登壇した内容となります。
3Dゲームグラフィックスを学ぶのに足掛かり
Kutani Mio
February 15, 2020
Tweet
Share
More Decks by Kutani Mio
See All by Kutani Mio
Unity6で登場!Multiplayer Centerで捗る、オンラインゲーム開発
rossam
0
380
Understanding vtable And Unity’s Memory Layout
rossam
0
270
Unity+C#で学ぶ! メモリレイアウトとvtableのすゝめ 〜動的ポリモーフィズムを実現する仕組み〜
rossam
1
980
GameAIとは.pdf
rossam
0
430
Jenkins自動化入門〜事例を添えて〜
rossam
1
790
基礎から学ぶ!UE4でC++を交えたAI開発、興味ないですか?
rossam
4
2k
C#8.0という未来を垣間見る話
rossam
0
1.5k
視て、わかる!C#7.1までの言語機能
rossam
5
4.9k
レポート「2017 Breakthroughs In Spatial Audio Technologies 」
rossam
0
480
Other Decks in Programming
See All in Programming
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
6k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
1
220
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
180
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
440
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
NEWT Backend Evolution
xpromx
1
150
テスト駆動Kaggle
isax1015
1
890
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
700
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
120
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.2k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
We Have a Design System, Now What?
morganepeng
53
7.7k
Producing Creativity
orderedlist
PRO
346
40k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
A Tale of Four Properties
chriscoyier
160
23k
Writing Fast Ruby
sferik
628
62k
Balancing Empowerment & Direction
lara
1
500
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グラフィックス周りに関しては 計算式も絡んで難しそうに思えるかもしれませんが 興味があるならとりあえず学んでみましょう! 概念的なところを最初に掴むだけでも 世界の見え方が変わります。
ご清聴 有難うございました