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
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
150
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
240
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.1k
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
490
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
770
開発生産性を上げるための生成AI活用術
starfish719
1
170
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
950
CSC305 Lecture 04
javiergs
PRO
0
250
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
930
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
185
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
How to Ace a Technical Interview
jacobian
280
24k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
The Invisible Side of Design
smashingmag
301
51k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Facilitating Awesome Meetings
lara
56
6.6k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Visualization
eitanlees
148
16k
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