---
title: TGSのために半年でShaderLabHLSLを完全に理解した〜Shadow編〜
tags: 
author: [砂時計](https://www.docswell.com/user/5unad0ke1)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/YJ6W9NGPJV.jpg?width=480
description: 2026/10/02 Unity Shader 完全に理解した 勉強会で発表したスライド
published: October 02, 26
canonical: https://www.docswell.com/s/5unad0ke1/54NWMY-2026-10-02-201532
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/YJ6W9NGPJV.jpg)

TGSのために 半年で
ShaderLab/HLSLを
完全に理解した 〜Shadow編〜
砂時計 / @5unad0ke1
Unity Shader 完全に理解した勉強会
2026/10/02
「完全に理解した」は想像の通り


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GJ5MN5VPJ4.jpg)

自己公開
• 砂時計 @5unad0ke1
• 専門学校通う高校生
• Unityでゲームを作ってる感じの人
• TGS出展の制作に協力、そこでシェーダー書いた
• 初めての発表


# Page. 3

![Page Image](https://bcdn.docswell.com/page/LE3W2ND6E5.jpg)

01 実装先の作品
実装先の作品
02 実装したシェーダー
03 3種の影への道のり
04 まとめ


# Page. 4

![Page Image](https://bcdn.docswell.com/page/8EDKZWPM7G.jpg)

Symphony Kill Chord
• コンセプト：
己のビートを刻むリズムアクションゲーム
• メインテーマ
•
•
多彩なビート
•
簡単アクション
•
シックな美少女 →シェーダーが必要！！！
目的：キャラを魅せる高品質なシェーダー


# Page. 5

![Page Image](https://bcdn.docswell.com/page/V7PKD9NQJ8.jpg)

01 実装先の作品
実装したシェーダー
02 実装したシェーダー
03 3種の影への道のり
04 まとめ


# Page. 6

![Page Image](https://bcdn.docswell.com/page/2JVV1MKPJQ.jpg)

キャラに当てたシェーダー
•
ShaderGraph ではキツイ
•
Stencil が必要
•
独自 Pass が必要
•
→ ShaderLab/HLSL に挑戦
•
実装いっぱいアルヨ
•
今日はこの中の「影」の話
•
記事で影の情報は少ないから
•
実装が難しくて楽しかったから


# Page. 7

![Page Image](https://bcdn.docswell.com/page/5EGL2GQQJL.jpg)

ざっくり3種の影の内容
特に顔の影はキャラの印象を大きく左右する。だから影には、
• ステージとの落ち影は残す
→ Unity 標準 ShadowMap
• セルフシャドウを崩さない
→ 独自 ShadowMap
• 顔の影を細かく、くっきり
→ 半透明ポリゴン＋Stencil


# Page. 8

![Page Image](https://bcdn.docswell.com/page/4JQYPXKW7P.jpg)

01 実装先の作品
3種の影への道のり
02 実装したシェーダー
03 3種の影への道のり
04 まとめ


# Page. 9

![Page Image](https://bcdn.docswell.com/page/K74WY6P1E1.jpg)

そもそも ShadowMap とは
光
影
① 深度を描く
② ShadowMap
③ 比べて判定
ライトから見て、一番手前
の物までの距離をテクス
チャに書く
距離を並べた1枚のテクス
チャ。マス目の数が解像度
描画中の点が、記録した距
離より奥にあれば影
影の細かさは ShadowMap の解像度 で決まる


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LJ1Y6V95EG.jpg)

Unity 標準の ShadowMap
• 密度に限界がある
• DirectionalLightがカメラと直角だと
崩れる


# Page. 11

![Page Image](https://bcdn.docswell.com/page/GJWGWLQW72.jpg)

ライトとカメラが直角に近いと影が崩れる
① 光が顔を真横からかすめる
② 1マスが顔の上で長く伸びる
光の向き
顔
カメラ
カメラの向き
光が正面から
1マス = 短い
上から見た図。光とカメラの向きが直角だと、
見えている顔を光が真横からかすめる
光が真横から
1マス = 長い
同じ1マスが顔の上で長く引き伸ばされ、影が
縞やギザギザに崩れる


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4EZL5MW273.jpg)

Unity 標準の ShadowMap はいらない？
いる！必要！
ステージへの落ち影等には合っている


# Page. 13

![Page Image](https://bcdn.docswell.com/page/Y76W9NX67V.jpg)

キャラのセルフシャドウを除外しよう
• 残したい条件
•
キャラからステージへの落ち影は残す
•
ステージからキャラへの落ち影も残す
• レイヤー分けとかはだめ
• Shader 側でサンプリング位置をずらした


# Page. 14

![Page Image](https://bcdn.docswell.com/page/G75MN5X574.jpg)

セルフシャドウには独自ShadowMap
光の向き
標準 ShadowMap 側
頭・髪
セルフ
シャドウ
× 消す
体
柱
ステージ → キャラ
○ 残す
キャラ → ステージ
○ 残す
•
キャラが影を受けるとき、
ShadowMap を読む位置をずらす
•
キャラ自身のセルフシャドウだ
け判定から外れる
•
ステージとの影はそのまま残る


# Page. 15

![Page Image](https://bcdn.docswell.com/page/9J295NXGER.jpg)

代わりのセルフシャドウ
• Directionalと直角だと崩れる…
• ならカメラ追従なら崩れないよね
• 独自 ShadowMap を作った


# Page. 16

![Page Image](https://bcdn.docswell.com/page/DEY4KP8GJM.jpg)

照射方向をカメラ基準にして直角を避ける
① 照射方向をカメラから決める
② 照らす範囲もキャラ周辺だけ
影の照射方向
Offset 分回転
顔
カメラ
CameraForward
照射 = OffsetRotation × CameraForward
カメラが向きを変えても照射方向が一緒に回
るので、光が顔を真横からかすめない
標準
ステージ全体を1枚に
独自
キャラが画面いっぱい
同じ解像度の ShadowMap でも、キャラの影に
多くのマスを使える


# Page. 17

![Page Image](https://bcdn.docswell.com/page/VJNYR5Q878.jpg)

良い感じになった？
•
顔がまだ荒い
•
影が見えにくい
•
解像度を上げても限界がある…
•
そもそも ShadowMap は Texture に描く
から解像度に縛られる
•
ポリゴン直接なら解像度を気にしなくて
いい…？


# Page. 18

![Page Image](https://bcdn.docswell.com/page/YE9PMYDXJ3.jpg)

顔用の影
• 半透明の髪ポリゴンを顔に乗せてみた
•
顔の肌からはみ出す…
• Stencil で顔の範囲にだけ描く
•
顔に設定した Stencil 値を参照（目の透過表現用を流用）
•
独自 Pass で描画タイミングを決めた
※Stencilは画面ピクセルごとに番号を書き、その番号の所にだけ描ける仕組み


# Page. 19

![Page Image](https://bcdn.docswell.com/page/GE8DL639ED.jpg)

01 実装先の作品
まとめ
02 実装したシェーダー
03 3種の影への道のり
04 まとめ


# Page. 20

![Page Image](https://bcdn.docswell.com/page/LELML9VM7R.jpg)

まとめ
ShaderLab/HLSL はいいぞぉ
•
Stencil・独自 Pass などなど、表現の幅が広がる
•
細かく影の実装・調整ができる
•
Unity 標準
•
独自 ShadowMap
•
半透明ポリゴン


# Page. 21

![Page Image](https://bcdn.docswell.com/page/4JMYMZG6JW.jpg)

最後に…
陰影
光沢・質感
アウトライン
その他
• トゥーンランプ
• Back Light
• 背面法の輪郭線
• 目・眉の透過
• Forward+ 対応
• Front Rim
• 平滑化法線
• パース除去
• 顔用の法線補正
• Back Rim
• 明暗で線幅変化
• ディザフェード
• トゥーン PBR
• 異方性ハイライト
• Z オフセット
• Stencil ビット管理
• スメア残像
• 専用 GUI
• ノーマルマップ
• SRP Batcher 対応


# Page. 22

![Page Image](https://bcdn.docswell.com/page/PJR9V6ZN79.jpg)

完成！！！！
キャラを魅力的に見せる
シェーダーになりました


# Page. 23

![Page Image](https://bcdn.docswell.com/page/PEXQZM98JX.jpg)

ゲームもソースもあるよ
作品のリポジトリ
https://github.com/HIBIKI5201/SymphonyKillChord
シェーダーの部分
https://github.com/HIBIKI5201/SymphonyKillChord/tree/develop/Assets/Scripts/Shaders/Si
lToon
QR


# Page. 24

![Page Image](https://bcdn.docswell.com/page/3EK98GPLED.jpg)

Thank you for listening.