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
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
380
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
610
Datadog RUM 本番導入までの道
shinter61
1
310
Select API from Kotlin Coroutine
jmatsu
1
180
すべてのコンテキストを、 ユーザー価値に変える
applism118
0
200
Using AI Tools Around Software Development
inouehi
0
1.2k
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
Practical Tips and Tricks for Working with Compose Multiplatform Previews (mDevCamp 2025)
stewemetal
0
130
Benchmark
sysong
0
220
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
190
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
380
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
greenflagproject
1
120
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Embracing the Ebb and Flow
colly
86
4.7k
Statistics for Hackers
jakevdp
799
220k
We Have a Design System, Now What?
morganepeng
52
7.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Code Reviewing Like a Champion
maltzj
524
40k
Designing Experiences People Love
moore
142
24k
Typedesign – Prime Four
hannesfritz
42
2.7k
Building Applications with DynamoDB
mza
95
6.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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