Appearance
第01回 GPUとシェーダー
この授業の目的
Unity Shader Graphを通じて、GPUが画面を描画する仕組みと、色、テクスチャー、UV、ライティングなどの基本概念を学びます
シェーダーの機能を暗記するのではなく、画面の見え方を要素へ分解し、自分のゲームへ必要な表現を組み立てられることを目指します
授業の到達目標
- Unity Shader Graphで基本的なシェーダーを作成できる
- UV操作、ノイズ、ブレンドなどを使って見た目を制御できる
- ベクトル、法線、反射、影、頂点変形の役割を説明できる
- 自作したシェーダーをエフェクト制作やゲーム制作へ利用できる
ゲーム制作者は、すべてのグラフィックス素材を自作する必要はありません
一方で、調達したアセットを作品へ合わせて調整し、描画負荷を判断するには、見た目が何から作られているかを理解する必要があります
CGプログラマーを目指す場合は、この基礎がより高度なレンダリング技術を学ぶ土台になります
12回の流れ
- オリエンテーション GPUの基本概念とシェーダーの役割
- Shader Graph基礎 基本的なシェーダーの作成、色空間
- テクスチャーサンプリングとUV テクスチャーの読み込みとUV座標の操作
- 半透明表現とUVアニメーション ブレンド設定とスクロール制御
- SDFとフォント描画 距離関数、輪郭制御
- ノイズ パーリンノイズ、セルラーノイズ
- ベクトル演算とライティング 内積と外積、法線、反射、屈折
- 内積とフレネル、外積と法線マップ 角度に応じた見え方の制御
- 影表現の基礎 シャドウマップ、深度バッファ
- スキンメッシュ基礎 ボーンウェイト、バインドポーズ、キャラクター適用
- PBRマテリアル 材質と照明、BRDF、金属と非金属
- 頂点アニメーション 草や旗の揺れ、座標空間、頂点マスク
今回の授業内容
- ゲームにおけるリアルタイムCGの役割を理解する
- シェーダー、マテリアル、メッシュ、テクスチャーを区別する
- GPUが大量の頂点とピクセルを処理する理由を理解する
- Unityでマテリアルを変更し、見た目の構成要素を観察する
ゲーム画面とCGの基礎
ゲーム画面のビジュアルを決める要素
キャラクターや背景はどう区別されているか
金属、布、ガラスの質感の違いとは何か
明るさや光り方は何で決まるのか
ゲームの見え方の違いがどこから生まれるのか、CG の観点から学びます
コンピューターで画像や映像を作るCG
CG は Computer Graphics の略です
コンピューター上で絵、画像、映像を生成し表示する技術全般を指します
映画のVFX、建築のビジュアライゼーション、プロダクトデザインなど、様々な分野で CG は使われています
ゲームでは、特にリアルタイムに画面を生成するための高速な描画計算技術が重要になります
この授業では、主にリアルタイムCG の基礎を扱います
ゲームに必要な品質とパフォーマンス
ゲームの映像には、世界観に合うこと、キャラクターやエフェクトを魅力的に見せること、プレイヤーへ必要な情報を伝えることが求められます
要求は様々ですが、美麗なグラフィックスは高度で複雑な計算が必要になることが多く、計算コストが高くなりがちです
ゲームでは、その上で画面を毎秒何十回何百回も更新する必要があります
リアルタイムCGでは、ただ綺麗なだけではなく高速に描画できることも求められます
フォトリアルとノンフォトリアル
フォトリアルなゲームは「現実らしく見えること」を重視します
アニメ調やデフォルメ表現では「その作品世界で自然に見えること」が必要です
方向性は異なりますが、どちらもゲームの世界観や体験に合わせて選ばれ、調整されます
大事なのは現実をそのまま再現することではなく、映像で作品世界を表現することです
そのために、映像をプログラミングで制御する技術を学びます
画面にどう映るかを制御する描画表現
人間が絵を描くように、ゲームも画面に映る内容を描画して表現します
同じ形のオブジェクトでも、色や質感、明るさ、透明感によって印象は大きく変わります
ゲームでは世界観の演出や、敵やアイテムの見分けやすさなど、画面に映る「どう見えるか」の印象を設計することが重要です
この授業では、こうしたビジュアル表現がゲームでどのように制御されているかを Unity 上で分解して確認していきます
ミニ実習：ゲーム画面の表現を分析する
ゲームの映像の魅力がどこから来ているかを考えてみましょう
動画のURLでも構いません
リアルタイムレンダリング
シーンの情報から画像を作るレンダリング
画面に置かれた要素の情報から、最終的な画像を作る処理をレンダリングと呼びます
図形、画像、文字、材質、光などの情報をもとに、最終的な見え方を計算します
映画CGのように時間をかけて高品質に描く方法もあればゲームのようにリアルタイムで高速に描く方法もあります
この授業で扱うシェーダーは、リアルタイムレンダリングの中核を担うグラフィックスプログラミングの技術です
毎フレームすばやく計算するリアルタイムCG
ゲームは操作に反応して即座に画面を更新する必要があります
フレームレートが60fpsなら、1フレームあたり約16.67msで描画を完了させる必要があり、高速な処理が求められます
映画やアニメのオフラインレンダリングのように1枚の絵を何分もかけて描画するわけにはいかないため、計算の効率化が重要になります
リアルタイムCGでは、表現の説得力と計算効率のバランスが物理的な正確さよりも重視される場合があります
CG映像を構成する要素
メッシュの形
描画する形を渡す
シェーダー
マテリアルとテクスチャー
表面情報を渡す
シェーダー
ライト
光の情報を渡す
シェーダー
カメラ
視点の情報を渡す
シェーダー
シェーダー
見え方を計算して描画する
画面
最終的な映像は、1つの設定ではなく複数の要素の組み合わせで決まります
シェーダー、GPU、マテリアル
描画のルールを決めるシェーダー
シェーダーは、画面に出る頂点やピクセルをどう計算するかを決めるGPU 上で動く小さなプログラムです
シェーダーは、たとえば「どの色を出すか」「光をどう反映するか」「透明にするか」などを決定します
CG、特にゲームで用いられるリアルタイムCGは計算に使えるリソースに制限があるため、現実の物理現象を忠実に再現することに必ずしもこだわりません
必要に応じて簡略化したモデルや近似的な計算を行い、目的に最適化されたモデルとして実装します
現代のゲームのビジュアルは、形状・材質・光・カメラと、それをどう計算するかの組み合わせで構成されています
シェーダーで制御できる表現
シェーダーを使うと、金属や布の質感、半透明、発光、溶解、流れ、歪みなどを制御できます
これらの表現は見た目の装飾だけでなく、ゲーム内の状態や操作結果を伝える役割も持ちます
映像表現を並列計算するGPU
GPU は Graphics Processing Unit の略です
CPU が処理を順番に考えるのが得意なのに対し、GPU は同じ種類の計算を大量に回すことが得意なプロセッサです
画面には大量のピクセルがあるため、グラフィックス表現では並列での計算能力が非常に重要です
シェーダーはそのための機能を持つ GPU 上で動くプログラムです
GPUで描画する理由
映像表現には画像、文字、図形、エフェクトなど多くの要素が関わり、それぞれに対して位置計算や色計算が必要です
その上で画面には大量のピクセルがあり、通常のCPUの計算では処理が追い付きません
この大量計算を効率よく回すために GPU とシェーダーが使われます
見た目の設定をまとめるマテリアル
マテリアルは、使用するシェーダーと、そのシェーダーへ渡す色、テクスチャー、金属感、透明度、発光強度などを保持します
描画計算はシェーダーが行いますが、同じシェーダーでもマテリアルの設定が異なれば結果は変わります
シェーダーとマテリアルの関係
シェーダー は「どう計算するか」のGPUプログラムを定義します
マテリアルは「その計算に何の値を渡すか」を定義します
例えば、光沢の強さ、色、使用する画像はマテリアル側で設定します
Unityでは、次の順序で見た目を設定します
- オブジェクトにマテリアルを割り当てる
- マテリアルで使用するシェーダーを指定する
- シェーダーへ渡すプロパティを設定する
つまり、シェーダーがルール、マテリアルが設定です
Mesh、Texture、Shader、Materialの整理
- メッシュ: 形の情報
- テクスチャー: 貼り付ける画像
- シェーダー: 見た目を計算するルール
- マテリアル: シェーダー に渡す設定のまとまり
Unityで描画の構成を確認する
MeshFilterとMeshRenderer
MeshFilter はオブジェクトの形を保持します
MeshRenderer はその形をどう描画するかを管理します
MeshRenderer にマテリアルを割り当てることで見た目が決まります
マテリアルの中でどのシェーダー を使うかが決まり、各種設定値もそこから渡されます
Inspectorでマテリアルを読む
オブジェクトを選択したら Mesh Renderer を確認する
どのマテリアルが割り当てられているかを見る
マテリアルを開いてシェーダー 名と各プロパティを確認する
見た目が変わったら、まずマテリアルのどの値が変わったかを見る
同じモデルの見た目を変える要素
- 色だけ変えたマテリアル
- テクスチャーだけ変えたマテリアル
- シェーダー自体を変えたマテリアル
- 光の当たり方で見え方が変わるマテリアル
描画パイプラインの基本
頂点シェーダーとフラグメントシェーダー
頂点シェーダー
モデルの頂点位置や頂点ごとの情報を計算します
画面にどう配置されるか、形に関わる処理を担当します
フラグメントシェーダー
各ピクセルの色を計算します
光の当たり方やテクスチャーを踏まえ、最終的な見た目に関わる処理を担当します
リアルタイムCGでは、通常まず形に関わる計算を行い、その後で色に関わる計算を行う流れで描画を進めます
Meshとマテリアルが画面に出るまで
- Mesh が形の情報を持つ
- マテリアルがシェーダー と各種設定値を持つ
- 頂点シェーダーが頂点を画面用に計算する
- フラグメントシェーダーが各ピクセルの色を決める
- 結果として画面に表示される
描画の流れを確認する4つの問い
- Mesh は形
- Texture は画像
- マテリアルは設定の束
- シェーダー は見た目を計算するルール
シェーダーを視覚的に組み立てるShader Graph
Shader Graph は Unity のノードベースなシェーダー作成ツールです
コードを直接書かずに処理の流れを組み立てられます
ただし中で何を計算しているかを理解しないと応用できません
HLSL はシェーダーをテキストで記述するためのプログラミング言語です
今期は Shader Graph を中心に学び、必要に応じて HLSL にも触れます
実習：Unityでマテリアルを操作する
色がつくだけでも結構ちがう
制作環境を確認する
- 2026年度の授業では Unity 6.4 を使用します
- シェーダー制作には Universal Render Pipeline（URP） を使います
- この授業では URP 環境で Shader Graph を使います
- まず自分の環境で URP プロジェクトが作れるか確認してください
- 環境構築は別資料を参照してください
実習1：マテリアルを差し替える
- シーンに Sphere か Cube を置く
- URP/Lit を複製して、3つ以上のマテリアルを用意する
- 同じオブジェクトに順番に割り当てる
- 何が変わったかをメモする
- 色、テクスチャー、光沢感、透明度
実習2：シェーダー名とプロパティを確認する
- マテリアルを選択してシェーダー 名を確認する
- Base Color や Surface Type などを少し変える
- 変更した値と見た目の変化を観察する
実習3：同じシェーダーで異なるマテリアルを作る
- 同じシェーダー を使ったマテリアルを2つ複製する
- 片方だけ色やテクスチャーを変更する
- シェーダー は同じだが見た目が変わることを確認する
- マテリアルとシェーダー の違いを実感する
よくある問題
- Texture とマテリアルは同じではありません
- マテリアルとシェーダー も同じではありません
- 色が変わったからといってシェーダー が変わったとは限りません
- 見た目の変化は、どの層を変えたのかで原因が違います
今回のまとめ
- マテリアルは見た目の設定をまとめたもの
- シェーダー は見た目を計算するプログラム
- GPU は大量のピクセル計算を並列に行う
- Unity では Inspector を見て差分を確認するのが出発点
- 今後はこの理解を元に Shader Graph を組んでいきます