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
testingを眺める
matumoto
1
140
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
Rancher と Terraform
fufuhu
2
400
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
個人軟體時代
ethanhuang13
0
320
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
320
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
530
AWS発のAIエディタKiroを使ってみた
iriikeita
1
180
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
110
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
The Cult of Friendly URLs
andyhume
79
6.6k
Side Projects
sachag
455
43k
Unsuck your backbone
ammeep
671
58k
Code Reviewing Like a Champion
maltzj
525
40k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Statistics for Hackers
jakevdp
799
220k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Raft: Consensus for Rubyists
vanstee
140
7.1k
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