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
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
140
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
690
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
300
NPOでのDevinの活用
codeforeveryone
0
880
VS Code Update for GitHub Copilot
74th
2
670
生成AI時代のコンポーネントライブラリの作り方
touyou
1
260
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
270
GPUを計算資源として使おう!
primenumber
1
210
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
220
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
860
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
140
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Adopting Sorbet at Scale
ufuk
77
9.5k
It's Worth the Effort
3n
185
28k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Typedesign – Prime Four
hannesfritz
42
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Cult of Friendly URLs
andyhume
79
6.5k
Building an army of robots
kneath
306
45k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
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