# シェーダー

シェーダーはGPU（グラフィックスカード）で実行する特別なプログラムである。シェーダーを使うことにより、3Dモデルの「見せ方」（描画）などを自由に変えることができる。ただし、GPUで実行するプログラムは普通のCPUのプログラムと異なり、使い方を学ばないといけない。

## GPUとCPUの違い

CPUは「多目的のプロセッサー」で、タスクを切り替えるのは得意な要素である。例えば、Chromeでネットを調べ、見つけたソースコードをVisual Studioに貼り付けたい。プログラムを切り替えるときに、CPUは一旦Chromeを休ませて、Visual Studioを起こして、作業をし続ける。

 一方、GPUは「専門的な部品」である。GPUは同時に１つのタスクしかできず、実行中に切り替えることができない。代わりにそのタスクを大変高速に実行ができる。

<table border="1" id="bkmrk-cpu-gpu-%E7%9B%AE%E7%9A%84-%E5%A4%9A%E7%9B%AE%E7%9A%84%E3%80%82%E5%90%8C%E6%99%82%E3%81%AB%E6%A7%98%E3%80%85" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 22.9935%;"></col><col style="width: 36.8141%;"></col><col style="width: 40.2678%;"></col></colgroup><tbody><tr><td>  
</td><td>CPU</td><td>GPU</td></tr><tr><td>目的</td><td>多目的。同時に様々なプログラムを実行できる（マルチタスク）</td><td>専門的。同時に１つのタスクしかできない（描画のみ）※１</td></tr><tr><td>タスク切り替え</td><td>実行中にタスクを切り替えできる</td><td>タスクが終わってから切り替えることができる</td></tr><tr><td>切り替えるコスト</td><td>低い</td><td>高い</td></tr><tr><td>条件分岐（if）</td><td>条件により、実行の流れを切り替えることができる。</td><td>できない※２</td></tr><tr><td>並列化</td><td>コアが空いていれば、ある程度並列化できる

</td><td>非常に強い（千～万単位のコアがある）</td></tr></tbody></table>

※１：計算専用の「Compute Shader」というものが存在する。計算シェーダーは描画のためではなく、並列化し、速くなる処理に使える。  
※２：「if」命令があるが、実行コストが高くて、できるだけ使わないようにしましょう。

## GPUとCPUの協力：シェーダーの流れ

 OS（Windows）は、ゲームをハードディスクからメモリに転送し、CPUはメモリから1行ずつの命令を読み、実行する。今まで作ってきたスクリプトのすべてはこの流れで実行する。

 ただ、ゲームを実行中に「これからGPUのプログラム（シェーダー）が始まる」という特別な命令が現れる可能性がある。この時、CPUは一旦ゲームを休んで、そのプログラムをGPUに転送する。転送し終わったら、ゲームをもう一度起こして、普通の動作に戻る。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/Tqnimage.png)

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/zPIimage.png)

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/vx4image.png)

この「一旦止まり→転送→続く」の処理効率が悪いため、GPUのタスク（プログラム）を切り替えるコストが高いといわれる。従って、できるだけゲーム開始の時に必要なシェーダーをGPUに転送し、その後にあまり変わらないようにすれば良いでしょう。

 Unityはある程度にシェーダーの転送をしてくれるため、実装しなくても大丈夫だが、ゲームエンジンにより、手動でシェーダーの転送をおこなわないといけない。

 シェーダー（プログラム）の他に、必要なデータも転送しなければならない。シェーダーの場合は、主なデータは3Dモデルの頂点や三角形、または位置や変換などである。Unityの「標準シェーダー」の場合はすべてのデータを自動的に転送されるが、「カスタムシェーダー」の場合は、一部のデータを手動で送信する必要な時もある。

 これからUnityのシェーダーについて学び、そして特殊な効果を再現するため、カスタムシェーダーの作り方を学ぼう。

## シェーダーとマテリアルの関係性

Unityでは「シェーダー」と「マテリアル」２つの概念がある。シェーダーはGPUで実行するプログラム。マテリアルは「一部のパラメータを設定したシェーダー」のこと。例えば、シェーダーに「Color」というパラメータがあるとしたら、マテリアルでは「Color＝Red」にする。

 従って、<span style="color: rgb(186, 55, 42);">**１つのシェーダーからたくさんのマテリアルを作成することができる**</span>。例えば、以下の「赤いプラ」「輝く金属」と「草と土」が全く同じシェーダー（Universal Render Pipeline / Lit）を使用しているが、パラメター（色、金属性、滑らか性、など）を変えることによって、様々な表面を作ることが可能。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/ggiimage.png)

## URP（Universal Rendering Pipeline）のシェーダー

UnityのURPモードは、すぐ使えるたくさんのシェーダーがあるので、最も使うシェーダーについてを細かく見てみましょう。

### 光と陰の計算あり（Universal Render Pipeline / Lit）

![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/qdeimage.png)

URP で新しいマテリアルを作成すると、このシェーダーになる。いくつかのパラメータがあるので、よく使うのを確認しましょう。

##### Workflow Mode

反射の計算方法。２つがある：

- 「Metallic」は膨大な素材を再現できる。主には金属を再現するのは得意
- 「Specular」軽くて速い。金属を再現できず、主にプラスチックの雰囲気を再現するモード

##### Surface Type

透明設定。２つがある：

- 「Opaque」不透明。計算するは速い
- 「Transparent」半透明。後ろのあるものも計算しないといけないので、比較的に遅い

##### Render Face

見えない三角形（裏側）も描画するかしないか

- 「Front」表のみ
- 「Back」裏のみ
- 「Both」両面

##### Alpha Clipping

透明度（Alpha）はある数値以下をし下回ると透明になる。この設定は「不透明（Opaque）」でも効く

<table border="1" class="align-center" id="bkmrk-%C2%A0-%E9%80%8F%E6%98%8E%28alpha%29%E3%82%92%E6%8C%81%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E7%94%BB%E5%83%8F-" style="border-collapse: collapse; width: 85.7143%; height: 304px; border-width: 0px;"><colgroup><col style="width: 29.0547%;"></col><col style="width: 38.5078%;"></col><col style="width: 32.3912%;"></col></colgroup><tbody><tr><td class="align-center" style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/p1timage.png)

</td><td class="align-center" style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/RxEimage.png)

</td><td class="align-center" style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/ZuCimage.png)

</td></tr><tr><td class="align-center" style="border-width: 0px;">透明(Alpha)を持っている画像

</td><td class="align-center" style="border-width: 0px;">Alpha Clippingなし

</td><td class="align-center" style="border-width: 0px;">Alpha Clippingあり

</td></tr></tbody></table>

##### Base Map

模様と色。画像（テクスチャ）を使わないなら、一定の色になるが、テクスチャを使うと模様を付けることができる。

<table border="1" class="align-center" id="bkmrk-base-map%E3%81%AA%E3%81%97%EF%BC%88%E8%89%B2%E3%81%AE%E3%81%BF%EF%BC%89-%E3%83%86%E3%82%AF%E3%82%B9%E3%83%81" style="border-collapse: collapse; width: 81.3095%; border-width: 0px;"><colgroup><col style="width: 39.5324%;"></col><col style="width: 60.47%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/ePLimage.png)

Base Mapなし（色のみ）

</td><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/2rTimage.png)  
<span class="c5">テクスチャ</span>

</td></tr><tr><td colspan="2" style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/Hxoimage.png)Base Mapあり

</td></tr></tbody></table>

なお、テクスチャを正しく貼り付けるため「UV座標」が必要である。「UV座標」については、また後で説明する。

##### Metallic Map / Specular Map

金属（またはプラスチック）である部分・ではない部分のテクスチャ。全体的に変わりがなければテクスチャは不要であるが、部分的に変えたいなら、このテクスチャを設定：

<table border="1" class="align-center" id="bkmrk-metallic-map-%E3%81%AA%E3%81%97-%E3%83%86%E3%82%AF%E3%82%B9%E3%83%81" style="border-collapse: collapse; width: 85.5952%; border-width: 0px;"><colgroup><col style="width: 42.151%;"></col><col style="width: 57.8032%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/x4timage.png)

Metallic Map なし

</td><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/G09image.png)

テクスチャ

</td></tr><tr><td colspan="2" style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/IQlimage.png)

<span class="c5">Metallic Map あり</span>

</td></tr></tbody></table>

##### Smoothness

表面のなめらかさ。数値が高いほど表面が輝くパラメータ

##### Normal Map

法線マップのテクスチャ。光の計算を変えるテクスチャであり、細かい凸凹を再現するための特別な画像。

<table border="1" class="align-center" id="bkmrk-normal-map-%E3%81%AA%E3%81%97-%E6%B3%95%E7%B7%9A%E3%83%9E%E3%83%83%E3%83%97-" style="border-collapse: collapse; width: 90.4762%; border-width: 0px;"><colgroup><col style="width: 47.0149%;"></col><col style="width: 52.9412%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/4tSimage.png)  
<span class="c5">Normal Map なし</span>

</td><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/nvMimage.png)  
<span class="c5">法線マップ</span>

</td></tr><tr><td colspan="2" style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/Lotimage.png)<span class="c5">Normal Map あり</span>

</td></tr></tbody></table>

##### <span class="c5">Emission</span>

<span class="c5">光る色とテクスチャ（実際に光らないが、光るようにみえる）</span>

<table border="1" class="align-center" id="bkmrk-emission-%E3%81%AA%E3%81%97-emmision" style="border-collapse: collapse; width: 85.5952%; border-width: 0px; height: 723.9px;"><colgroup><col style="width: 44.131%;"></col><col style="width: 55.825%;"></col></colgroup><tbody><tr style="height: 294.5px;"><td class="align-center" style="border-width: 0px; height: 294.5px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/ztMimage.png)

<span class="c5">Emission なし</span>

</td><td class="align-center" style="border-width: 0px; height: 294.5px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/G09image.png)

<span class="c5">Emmision テクスチャ</span>

</td></tr><tr style="height: 429.4px;"><td colspan="2" style="border-width: 0px; height: 429.4px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/Ma8image.png)

Emissionあり（色：緑）

</td></tr></tbody></table>

### 光と陰の計算なし（Universal Render Pipeline / Unlit）

![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/iPximage.png)

陰は計算されない。UIと2Dゲームなどに便利である。

### 光と陰の計算あり・複雑（Universal Render Pipeline / Complex Lit）

![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/E27image.png)

<span class="c5">「Lit」（光計算あり）と同じで、さらに「Clear Coat」というパラメータがある。「Clear Coat」は、車のペンキのように、透明な輝くレイヤ（コーティング）を付けることができる。</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/AFnimage.png)

### パーティクル専用（光の計算あり・なし）

<table border="1" id="bkmrk--8" style="border-collapse: collapse; width: 100%; border-width: 0px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/K0Simage.png)

</td><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/Hyfimage.png)

</td></tr></tbody></table>

<span class="c5">パーティクルエフェクト専用のシェーダー。軽くて速いので、たくさんのパーティクルを作成してもあまり重たくならない。光を計算するとしないバージョンがある。</span>

## <span class="c5">シェーダの種類</span>

シェーダはいくつかの種類がある：

- Fragment Shader（フラグメントシェーダー）三角形のピクセル（フラグメント）ごとに実行するプログラム（シェーダー）である。モデルの陰、色、模様などをこのシェーダで計算する。
- Vertex Shader（バーテックス・頂点シェーダー）三角形の頂点ごとに実行するシェーダーである。頂点の回転、移動、スケールなどを調整できるシェーダー
- Geometry Shader（三角形シェーダー）三角形ごとに実行するシェーダー。LOD（Level Of Detail）やTesselation（三角形再分割）に使ったりする
- Compute Shader（計算用シェーダー）汎用的な計算をするためのシェーダー。並列化ができる処理があったら、GPUに転送し、速く処理できる。

ゲーム開発での使う頻度

- フラグメントシェーダー：よく使う！モデルの変色、模様のアニメーションやエフェクトなどにカスタムシェーダーを作ることが多い
- 頂点シェーダー：まぁまぁ使う。柔らかいものの変形（海の波、風による草の動き）などの時に便利
- 三角形シェーダー：ほとんど使わない。ゲームエンジン（Unity）は自動的に操作する
- 計算用シェーダー：あまり使わないが、何かの特別な計算を並列に実行したいなら使える。

## シェーダの開発言語

シェーダーはGPUで実行するプログラムで、GPUを理解できる言語を使わないといけない。主に２つある：GLSL（GL Shader Language）とHLSL（High-Level Shader Language）。GLSLはOpenGL / Vulkan系のライブラリを使うシェーダー言語である。HLSL は Microsoft社が開発した「DirectX」をベースにしたライブラリで使用する言語である。

 Unity は HLSLを基づいた「ShaderLab」という言語を使う。HLSLで使える命令はほとんどそのままUnityで使えるようになり、その上に様々な便利な機能がすでに実装されている。例えば、モデルの変換（移動、回転、スケール）や光の計算は実装済みであり、それ以外に機能だけ実装すれば、カスタムシェーダーを作成ができる。

 また、よりも楽にシェーダーを作るには、Unityは「Shader Graph」も対応し、ノードをつなげるだけでシェーダーを作成ができる。

 GLSL / HLSL / ShaderLabのどれでも、だいたいC言語と似ている。ただし：

- if文を使わないでほしい（一応できるが、計算のコストが高い）
- 使える関数ははGPU専用のものを使用（テクスチャ・画像の読み方が異なる）
- デバッグしにくい：「Debug.Log」がないし、実行中に止めることができない（ブレーキポイントを使えない）
- すべてのプログラムは「フラグメントごと」または「頂点ごと」に実行することを忘れないでほしい。

## Unityでシェーダー実行する方法

シェーダーは「フラグメントごと」、または「頂点ごと」に実行するため、当然、シェーダーとモデルを連携しないといけない。Unityでは、マテリアル（Material）経由でモデルとシェーダーのひも付けが行われる。マテリアルを作成したあと、シェーダーを変えることにより、そのマテリアルを使うモデル（メッシュ）をそのシェーダーで処理する。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/VCPimage.png)

## <span class="c7">ShaderLab / HLSL</span>

<span class="c7">ShaderLab および HLSL は全く新しい言語であり、学ぶ時間がないので、興味がある学生は個別でお調べください。以下、参考できる URL をご確認ください：</span>

- [<span class="c7">UnityのShader(ShaderLab/HLSL)入門その1 : Shaderの書き方</span>](https://qiita.com/Yumuru/items/77a642004d015b83e0ce)
- [<span class="c7">【Unity入門】シェーダーを書いてみよう!ShaderLabの簡単な書き方!</span>](https://www.sejuku.net/blog/65248)
- [【Unity Shader入門①】ShaderLabとShader Graphの基礎を解説！【初心者向け】](https://sole-game-creater.com/unity-shader-01/)

<span class="c7">代わりに、もう少し直感的な「Shader Graph」でシェーダーの基礎を学び、フラグメントシェーダーと頂点シェーダを把握できるようになったら、ShaderLab と HLSL 言語についてお調べください。</span>