TGSのために半年でShaderLabHLSLを完全に理解した〜Shadow編〜

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• https://github.com/HIBIKI5201/SymphonyKillChord
• https://github.com/HIBIKI5201/SymphonyKillChord/tree/develop/Assets/Scripts/Shaders/Si

Thank you for listening.