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