Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Unity Shader Breakdown
Search
Tomoya Yamaguchi
July 19, 2021
Programming
2
1.7k
Unity Shader Breakdown
CA.unity #2 のアーカイブです
Tomoya Yamaguchi
July 19, 2021
Tweet
Share
Other Decks in Programming
See All in Programming
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
610
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
200
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
220
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
150
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
120
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
590
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
660
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
160
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
880
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Unsuck your backbone
ammeep
671
58k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Typedesign – Prime Four
hannesfritz
42
2.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
YesSQL, Process and Tooling at Scale
rocio
173
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Making Projects Easy
brettharned
116
6.3k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Transcript
Unity Shader Breakdown 2021/07/09 CA.unity #2 株式会社Colorful Palette / 山口
智也 1
@togucchi • 所属 株式会社Colorful Palette 「プロジェクトセカイ カラフルステージ! feat.初音ミク」 開発チーム •
職種 Unity/グラフィックスエンジニア 3D周辺やバーチャルライブの開発を担当 • 経歴 2020年 4月 株式会社CyberAgent 新卒入社 2020年 5月 株式会社Colorful Palette 配属 山口 智也 (Yamaguchi Tomoya) 2
• Unityでのシェーダ実装に興味がある人 • ゲーム制作で独自の特殊な絵作りをしたい人 今回のLTのターゲット 3
1. 概要 2. シェーダ解説 a. 深度フォグ b. フレア・パラ c. ディフュージョン
d. ゴッドレイ 3. まとめ アジェンダ 4
概要 5
映像,VFXのメイキング映像 「VFX Breakdown」などで 検索すると出てきます Breakdown? https://www.youtube.com/results?search_query=vfx+breakdown 6
7 © Unity Technologies Japan/UCL
8 • 深度フォグ • フレア・パラ • ディフュージョン • ゴッドレイ 空気感を出すための
ポストエフェクトを中心に解説 © Unity Technologies Japan/UCL
シェーダ解説 9
画面の深度(depth)を元に 指定した色にフェードさせる 画面全体の色味の操作や 奥行き感を出すのに有効 Render Pipeline Assetの Depth Textureをtrueにする 深度フォグ
10 © Unity Technologies Japan/UCL
ランプテクスチャを使って 距離によるフォグの強さや 色を自由に制御 ランプテクスチャをUnityの Gradientから生成する拡張を 作成 深度フォグ 11 © Unity
Technologies Japan/UCL
アニメの撮影処理などで よく用いられる,画面全体にグラ デーションをかける処理 画面全体のまとまりや 雰囲気の向上 フレア … 薄く明るくする光 パラ …
暗くする影 フレア・パラ 12 フレア パラ © Unity Technologies Japan/UCL
フレア,パラそれぞれに 円形の範囲指定,色の指定を できるようにして実装 フレアは元の色に対して加算 パラは乗算でブレンド フレア・パラ 13 フレア パラ ©
Unity Technologies Japan/UCL
フレア・パラ 14 薄紫色のフレア プロセカの例 ♪ ワーワーワールド
画面全体の光の拡散を表現 アニメ等でよく使われる 全体の絵がやわらかく, ふんわりとしたものになる ディフュージョン 15 © Unity Technologies Japan/UCL
カラーを縮小バッファに コピー + コントラスト調整 ガウシアンブラーを適用後 元のカラーにブレンド (今回はスクリーン合成) ディフュージョン 16 負荷の軽減
+ 大きくぼかすために 縮小バッファを使用する © Unity Technologies Japan/UCL
17 ディフュージョン プロセカの例 ディフュージョン + 被写界深度 により全体がふわっと した雰囲気に ♪ ウミユリ海底譚
光が差し込んでいるような表現 いわゆるVolumetric Lighting 今回はURP標準の デプスシャドウのShadowMapを 使ったRaymarchingで実現 ゴッドレイ 18 © Unity
Technologies Japan/UCL
各ピクセルからレイを飛ばし, 一定間隔でサンプリングする 光が遮蔽されていないポイントで 適当な係数をかけつつα値を 加算していく 解像度 ✕ サンプル数 → 処理負荷が非常に高い
ゴッドレイ 19 各ポイントの座標で ShadowMapをサンプリングする
深度テクスチャを元に オブジェクトに遮蔽されている部分 は計算しないようにする 時間をseedにした(疑似)乱数で レイのサンプリング開始位置を ピクセルごとにずらして ループ数を低減 ゴッドレイ - 工夫
- 20 ループ数48, 乱数なし ループ数48, 乱数あり © Unity Technologies Japan/UCL
まとめ 21
22 ゴッドレイ © Unity Technologies Japan/UCL
23 フォグ © Unity Technologies Japan/UCL
24 ディフュージョン © Unity Technologies Japan/UCL
25 フレア・パラ © Unity Technologies Japan/UCL 完成!
26 ベース © Unity Technologies Japan/UCL
27 © Unity Technologies Japan/UCL 完成!
今回の発表のサンプル https://github.com/togucchi/urp-postprocessing-examples 28
シェーダ実装で より自由な絵作りを 29