SlideShare a Scribd company logo
WEIGHTED BLENDED ORDER-INDEPENDENT
TRANSPARENCY
Morgan MacGuire Louis Bavoil NVIDIA
Journal of Computer Graphics Techniques Vol. 2, No. 2, 2013
ABSTRACT
 半透明サーフェスをレンダリングする場合, 結果は描画順序依存である.
 描画順序に依存しない半透明レンダリング手法をOrder-Independent Transparency (OIT)という.
 本研究ではOVERオペレータから派生した新しいOIT手法を開発した.
2
半透明サーフェスをレンダリングする場合, 結果は描画順序依存である
図1. 左: 通常レンダリング (unsorted OVER), 右: OIT
3
OIT DEMO
DEMO
4
PORTER & DUFF OVER COMPOSITING
半透明サーフェスをレンダリングする場合, 結果は描画順序依存である
𝐶𝑓 = 𝐶1 + 1 − 𝛼1 𝐶0 (1)
後面色前面の不透明度
OVER operator [Porter and Duff 1984] 一般的に用いられている後面と前面の混ぜ方のルール
前面色
glBlendEquation(GL_FUNC_ADD) glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA)
5
OVER COMPOSITINGは本当に順序依存?
半透明サーフェスをレンダリングする場合, 結果は描画順序依存である
4枚のサーフェスを重ねる場合を考えてみる
𝑪 𝒏: n番目レイヤのRGB値 (事前にAnを乗じている)
𝑨 𝒏: n番目レイヤの不透明度
𝑫 𝟎: 背景色
𝐷1 = 𝐶0 + 1 − 𝐴0 𝐷0
𝐷2 = 𝐶1 + 1 − 𝐴1 𝐷1
𝐷3 = 𝐶2 + 1 − 𝐴2 𝐷2
𝐷4 = 𝐶3 + 1 − 𝐴3 𝐷3
6
展開してみる
OVER COMPOSITINGは本当に順序依存?
半透明サーフェスをレンダリングする場合, 結果は描画順序依存である
𝐷4 = 𝐶3
+𝐶2 1 − 𝐴3
+𝐶1 1 − 𝐴3 1 − 𝐴2
+𝐶0 1 − 𝐴3 1 − 𝐴2 1 − 𝐴1
+𝐷0 1 − 𝐴3 1 − 𝐴2 1 − 𝐴1 1 − 𝐴0
7
さらに展開してみる
OVER COMPOSITINGは本当に順序依存?
半透明サーフェスをレンダリングする場合, 結果は描画順序依存である
𝐷4 = 𝐶3
+𝐶2 − 𝐴3 𝐶2
+𝐶1 − 𝐴3 𝐶1 − 𝐴2 𝐶1 + 𝐴2 𝐴3 𝐶1
+𝐶0 − 𝐴3 𝐶0 − 𝐴2 𝐶0 + 𝐴2 𝐴3 𝐶0
−𝐴1 𝐶0 + 𝐴1 𝐴3 𝐶0 + 𝐴1 𝐴2 𝐶0 − 𝐴1 𝐴2 𝐴3 𝐶0
+𝐷0 − 𝐴3 𝐷0 − 𝐴2 𝐷0 + 𝐴2 𝐴3 𝐷0 − 𝐴1 𝐷0
+𝐴1 𝐴3 𝐷0 + 𝐴1 𝐴2 𝐷0 − 𝐴1 𝐴2 𝐴3 𝐷0 − 𝐴0 𝐷0
+𝐴0 𝐴3 𝐷0 + 𝐴0 𝐴2 𝐷0 − 𝐴0 𝐴2 𝐴3 𝐷0 + 𝐴0 𝐴1 𝐷0
−𝐴0 𝐴1 𝐴3 𝐷0 − 𝐴0 𝐴1 𝐴2 𝐷0 + 𝐴0 𝐴1 𝐴2 𝐴3 𝐷0
8
並べ替えてみると…
OVER COMPOSITINGは本当に順序依存?
半透明サーフェスをレンダリングする場合, 結果は描画順序依存である
𝐷4 = 𝐷0
+𝐶0 + 𝐶1 + 𝐶2 + 𝐶3
−𝐴0 𝐷0 − 𝐴1 𝐷0 − 𝐴2 𝐷0 − 𝐴3 𝐷0
−𝐴0 𝐴1 𝐴2 𝐷0 −𝐴0 𝐴1 𝐴3 𝐷0 − 𝐴0 𝐴2 𝐴3 𝐷0 − 𝐴1 𝐴2 𝐴3 𝐷0
+𝐴0 𝐴1 𝐴2 𝐴3 𝐷0
−𝐴3 𝐶0 − 𝐴2 𝐶0 − 𝐴1 𝐶0
−𝐴3 𝐶1 − 𝐴2 𝐶1 − 𝐴3 𝐶2
+𝐴0 𝐴3 𝐷0 + 𝐴0 𝐴2 𝐷0 + 𝐴0 𝐴1 𝐷0
+𝐴1 𝐴3 𝐷0 + 𝐴1 𝐴2 𝐷0 + 𝐴2 𝐴3 𝐷0
+𝐴1 𝐴2 𝐶0 + 𝐴1 𝐴3 𝐶0 + 𝐴2 𝐴3 𝐶0 + 𝐴2 𝐴3 𝐶1
−𝐴1 𝐴2 𝐴3 𝐶0
Order Independent Part
Order dependent Part
9
PORTER & DUFF OVER COMPOSITING
半透明サーフェスをレンダリングする場合, 結果は描画順序依存である
OVERオペレータでのCompositiongは順序依存!
• 三角形ごとのソートとクリッピングが必要
• オブジェクト同士の相互貫入も考慮にいれることも必要
正しくレンダリングするための方法
A-buffer: ピクセルごとに描画されたフラグメントをすべて保持し深度ソートして色を出力
ピクセルごとに非固定長 (unbounded) メモリが必要
10
KEY-IDEAS
ORDER-INDEPENDENT TRANSPARENCY
 アルファ値を変換し, ピクセルごとにたくさん保持する.
 Stochastic Transparency, CSAA, etc…
 Z値が小さいサーフェスの部分集合を保持する.
 Bounded A-Buffer, Stencil Routed K-buffer, Stencil Routed A-Buffer, etc…
 深度全体に渡って連続密度モデルを構築する.
 Fourier Opacity Mapping, etc…
 Compositing operatorを順序非依存になるように再定義する.
そこで Order-Independent Transparencyによる様々な近似種法が考えだされてきた.
• やや新しいGPUを必要とする.
• 盛んに研究されてきた.
• 特別なハードウェアを要求しない
• 使用するメモリ量が少ない
本研究が用いる鍵となるアイデア
11
BLENDED OIT (MESHKIN’S)
ORDER-INDEPENDENT TRANSPARENCY
2007年, MeshkinによってCompositing operatorを順序非依存になるように再定義する手法が初めて紹介された.
𝐶𝑓 =
𝑖=1
𝑛
𝐶𝑖 + 𝐶0 1 −
𝑖=1
𝑛
𝛼𝑖 (2)
12
BLENDED OIT (MESHKIN’S)
ORDER-INDEPENDENT TRANSPARENCY
𝐶𝑓 =
𝑖=1
𝑛
𝐶𝑖 + 𝐶0 1 −
𝑖=1
𝑛
𝛼𝑖 (2) の導出原理 • 順序依存項を誤差と考えて消す.
• ついでに順序非依存項の複数のアルファ値が
掛かった背景色項も消す.
• 各アルファ値が低いなら全体への影響は低く
なる.
𝐷4 =
𝐶0 + 𝐶1 + 𝐶2 + 𝐶3
𝐷0 − 𝐴0 𝐷0 − 𝐴1 𝐷0 − 𝐴2 𝐷0 − 𝐴3 𝐷0
13
BLENDED OIT (MESHKIN’S) EXAMPLE
ORDER-INDEPENDENT TRANSPARENCY
Sorted, α=0.25 Approx, α=0.25
14
BLENDED OIT (MESHKIN’S) EXAMPLE
ORDER-INDEPENDENT TRANSPARENCY
Sorted, α=0.5 Approx, α=0.5
15
BLENDED OIT (MESHKIN’S) IMPLEMENTATION
ORDER-INDEPENDENT TRANSPARENCY
図2. Meshkinの手法のOpenGLによる実装
𝐶𝑓 =
𝐶0 + 𝐶1 + 𝐶2 + 𝐶3 + 𝐶4
−𝐴1 𝐷0 − 𝐴2 𝐷0 − 𝐴3 𝐷0 − 𝐴4 𝐷0
16
BLENDED OIT ADVANTAGES
ORDER-INDEPENDENT TRANSPARENCY
17
 DX11-class GPUs (PS4, XboxOne, NVIDIA 2010~ , AMD 2009~, Intel 2012~)
 DX9-class GPUs (Xbox360, PS3, WiiU, NVIDIA 2003~, AMD 2002~, Intel
2005~)
 OpenGL ES 3.0 GPUs (with half float拡張) (PowerVR G6430, Tegra K1,
iphone 5s)
 WebGL1(with float texture拡張) , WebGL2
8-bitブレンディング以上をサポートしていればどんなプラットフォームでも実装できる!
BLENDED OIT (BAVOIL AND MYERS)
ORDER-INDEPENDENT TRANSPARENCY
2008年, BavoilらによってMeshkinの手法が改良された.
𝐶𝑓 =
𝑖=1
𝑛
𝐶𝑖
𝑖=1
𝑛
𝛼𝑖
∙ 1 − 1 −
1
𝑛
𝑖=1
𝑛
𝛼𝑖
𝑛
+ 𝐶 𝑜 1 −
1
𝑛
𝑖=1
𝑛
𝛼𝑖
𝑛
(3)
18
BLENDED OIT (BAVOIL AND MYERS)
ORDER-INDEPENDENT TRANSPARENCY
ピクセルに描画された色のαによる加重平均を用いて平均色Cwaを求め, Composition Operatorを変換する.
𝐶 𝑤_𝑎𝑣𝑒 =
𝑖=1
𝑛
𝐶𝑖 ∙ 𝐴 𝑎𝑣𝑒
𝑖=1
𝑛
𝛼𝑖
𝐴 𝑎𝑣𝑒 =
𝑖=1
𝑛
𝛼𝑖
𝑛
簡単に4レイヤーの場合だと
𝐶𝑓 = 𝐶4
+𝐶3 1 − 𝐴4
+𝐶2 1 − 𝐴4 1 − 𝐴3
+𝐶1 1 − 𝐴4 1 − 𝐴3 1 − 𝐴2
+𝐶0 1 − 𝐴4 1 − 𝐴3 1 − 𝐴2 1 − 𝐴1
𝐶𝑓 = 𝐶 𝑤_𝑎𝑣𝑒
+𝐶 𝑤_𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒
+𝐶 𝑤_𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒
+𝐶 𝑤_𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒
+𝐶0 1 − 𝐴 𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒
Ciに事前にα値は掛けられて
いないことに注意
19
BLENDED OIT (BAVOIL AND MYERS)
ORDER-INDEPENDENT TRANSPARENCY
𝐶𝑓 = 𝐶 𝑤_𝑎𝑣𝑒 1 + 1 − 𝐴 𝑎𝑣𝑒 + 1 − 𝐴 𝑎𝑣𝑒
2 + 1 − 𝐴 𝑎𝑣𝑒
3 + 𝐶0 1 − 𝐴 𝑎𝑣𝑒
4
= 𝑖=1
4
𝐶 𝑖
𝑖=1
4
𝛼 𝑖
𝐴 𝑎𝑣𝑒 ∙
1− 1−𝐴 𝑎𝑣𝑒
4
1− 1−𝐴 𝑎𝑣𝑒
+ 𝐶0 1 − 𝐴 𝑎𝑣𝑒
4
= 𝑖=1
4
𝐶 𝑖
𝑖=1
4
𝛼 𝑖
𝐴 𝑎𝑣𝑒 ∙
1− 1−𝐴 𝑎𝑣𝑒
4
𝐴 𝑎𝑣𝑒
+ 𝐶0 1 − 𝐴 𝑎𝑣𝑒
4
= 𝑖=1
4
𝐶 𝑖
𝑖=1
4
𝛼 𝑖
∙ 1 − 1 −
1
𝑛 𝑖=1
𝑛
𝛼𝑖
4
+ 𝐶0 1 −
1
𝑛 𝑖=1
𝑛
𝛼𝑖
4
𝐶 𝑤_𝑎𝑣𝑒 =
𝑖=1
𝑛
𝐶𝑖 ∙ 𝐴 𝑎𝑣𝑒
𝑖=1
𝑛
𝛼𝑖
𝐴 𝑎𝑣𝑒 =
𝑖=1
𝑛
𝛼𝑖
𝑛
Ciに事前にα値は掛けられて
いないことに注意
𝐶𝑓 =
𝑖=1
𝑛
𝐶𝑖
𝑖=1
𝑛
𝛼𝑖
∙ 1 − 1 −
1
𝑛
𝑖=1
𝑛
𝛼𝑖
𝑛
+ 𝐶 𝑜 1 −
1
𝑛
𝑖=1
𝑛
𝛼𝑖
𝑛
(3)
等比級数和
20
BLENDED OIT (BAVOIL AND MYERS)
ORDER-INDEPENDENT TRANSPARENCY
2008年, BavoilらによってMeshkinの手法が改良された.
𝐶𝑓 =
𝑖=1
𝑛
𝐶𝑖
𝑖=1
𝑛
𝛼𝑖
∙ 1 − 1 −
1
𝑛
𝑖=1
𝑛
𝛼𝑖
𝑛
+ 𝐶 𝑜 1 −
1
𝑛
𝑖=1
𝑛
𝛼𝑖
𝑛
(3)
• 先のComposition Operatorの順序依存項を切り捨てずにすべて保持しているのでより良い結果が得られる.
• ハードウェアに対してMultiRenderingTargetと16-bit float blendingしか要求しない.
21
BLENDED OIT (BAVOIL AND MYERS) DEMO
ORDER-INDEPENDENT TRANSPARENCY
DEMO
22
BLENDED OIT (BAVOIL AND MYERS) IMPLEMENTATION
ORDER-INDEPENDENT TRANSPARENCY
図3. Bavoil, Myersらの手法のOpenGLによる実装
23
2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE)
ORDER-INDEPENDENT TRANSPARENCY
𝐶𝑓 =
𝑖=1
𝑛
𝐶𝑖
𝑖=1
𝑛
𝛼𝑖
∙ 1 − 1 −
1
𝑛
𝑖=1
𝑛
𝛼𝑖
𝑛
+ 𝐶 𝑜 1 −
1
𝑛
𝑖=1
𝑛
𝛼𝑖
𝑛
(3)
𝐶𝑓 =
𝑖=1
𝑛
𝐶𝑖 ∙ 𝑤 𝑧𝑖, 𝛼𝑖
𝑖=1
𝑛
𝛼𝑖 ∙ 𝑤 𝑧𝑖, 𝛼𝑖
∙ 1 −
𝑖=1
𝑛
1 − 𝛼𝑖 + 𝐶 𝑜
𝑖=1
𝑛
1 − 𝛼𝑖 (4)
深度加重関数 Aavgによる単純化をやめた
24
DEPTH WEIGHT FUNCTION
2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE)
ORDER-INDEPENDENT TRANSPARENCY
今までの手法ではサーフェスの”深度”について考慮していなかった…
なので深度軸方向で相互に位置が入れ替わる半透明オブジェクト
の”入れ替わり”を表現できなかった
カメラからの距離によって減衰する深度加重𝑤 𝑧𝑖, 𝛼𝑖 の追加
深度だけでなくα値によっても減衰します.
25
DEPTH WEIGHT FUNCTION
2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE)
ORDER-INDEPENDENT TRANSPARENCY
筆者が作成したいくつかの深度加重関数 (0.1 < |z| < 500, 16-bit float buffer)環境で上手く動作する
w 𝑧, 𝛼 = α ∙ max 10−2
, 𝑚𝑖𝑛 3 × 103
,
10
10−5 + 𝑧 /5 2 + 𝑧 /200 6 (7)
w 𝑧, 𝛼 = α ∙ max 10−2
, 𝑚𝑖𝑛 3 × 103
,
10
10−5 + 𝑧 /5 3 + 𝑧 /200 6 (8)
w 𝑧, 𝛼 = α ∙ max 10−2
, 𝑚𝑖𝑛 3 × 103
,
10
10−5 + 𝑧 /200 4 (9)
w 𝑧, 𝛼 = α ∙ max 10−2
, 3 × 103
∙ 1 − 𝑑 𝑧
3
(10)
d 𝑧 =
𝑧 𝑛𝑒𝑎𝑟 𝑧𝑓𝑎𝑟 𝑧 − 𝑧𝑓𝑎𝑟
𝑧 𝑛𝑒𝑎𝑟 − 𝑧𝑓𝑎𝑟
26
DEPTH WEIGHT FUNCTION
2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE)
ORDER-INDEPENDENT TRANSPARENCY
図4. サンプル加重関数の両対数グラフ
“膝”の立ち上がりが大きいほど
後に述べるシルエットアーティファクト
を低減することができる.
27
IMPLEMENTEATION
2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE)
ORDER-INDEPENDENT TRANSPARENCY
𝐶𝑓 =
𝑖=1
𝑛
𝐶𝑖 ∙ 𝑤 𝑧𝑖, 𝛼𝑖
𝑖=1
𝑛
𝛼𝑖 ∙ 𝑤 𝑧𝑖, 𝛼𝑖
∙ 1 −
𝑖=1
𝑛
1 − 𝛼𝑖 + 𝐶 𝑜
𝑖=1
𝑛
1 − 𝛼𝑖
(4)
accumTexture.rgb
accumTexture.a
“Revealage”
“Coverage”
revealageTexture.r
28
IMPLEMENTEATION
2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE)
ORDER-INDEPENDENT TRANSPARENCY
29
IMPLEMENTEATION (FOR RESTRICTED PLATFORM)
2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE)
ORDER-INDEPENDENT TRANSPARENCY
30
RenderTargetごとのblendingを
サポートしていない環境でも
C, Alphaごとにblendingを分解
することで対処できる.
RESULTS
2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE)
ORDER-INDEPENDENT TRANSPARENCY
図5. グラス
31
RESULTS
2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE)
ORDER-INDEPENDENT TRANSPARENCY
32
RESULTS
2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE)
ORDER-INDEPENDENT TRANSPARENCY
図5. CAD
33
RESULTS
2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE)
ORDER-INDEPENDENT TRANSPARENCY
34
RESULTS
2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE)
ORDER-INDEPENDENT TRANSPARENCY
シルエットアーティファクト
35

More Related Content

What's hot

GPU最適化入門
GPU最適化入門GPU最適化入門
GPU最適化入門
Takahiro KOGUCHI
 
Stable SSAO in Battlefield 3 with Selective Temporal Filtering
Stable SSAO in Battlefield 3 with Selective Temporal FilteringStable SSAO in Battlefield 3 with Selective Temporal Filtering
Stable SSAO in Battlefield 3 with Selective Temporal Filtering
Electronic Arts / DICE
 
Stochastic Screen-Space Reflections
Stochastic Screen-Space ReflectionsStochastic Screen-Space Reflections
Stochastic Screen-Space Reflections
Electronic Arts / DICE
 
Filmic Tonemapping for Real-time Rendering - Siggraph 2010 Color Course
Filmic Tonemapping for Real-time Rendering - Siggraph 2010 Color CourseFilmic Tonemapping for Real-time Rendering - Siggraph 2010 Color Course
Filmic Tonemapping for Real-time Rendering - Siggraph 2010 Color Course
hpduiker
 
4K Checkerboard in Battlefield 1 and Mass Effect Andromeda
4K Checkerboard in Battlefield 1 and Mass Effect Andromeda4K Checkerboard in Battlefield 1 and Mass Effect Andromeda
4K Checkerboard in Battlefield 1 and Mass Effect Andromeda
Electronic Arts / DICE
 
Crysis Next-Gen Effects (GDC 2008)
Crysis Next-Gen Effects (GDC 2008)Crysis Next-Gen Effects (GDC 2008)
Crysis Next-Gen Effects (GDC 2008)
Tiago Sousa
 
[IGC 2016] 넷게임즈 김영희 - Unreal4를 사용해 모바일 프로젝트 제작하기
[IGC 2016] 넷게임즈 김영희 - Unreal4를 사용해 모바일 프로젝트 제작하기[IGC 2016] 넷게임즈 김영희 - Unreal4를 사용해 모바일 프로젝트 제작하기
[IGC 2016] 넷게임즈 김영희 - Unreal4를 사용해 모바일 프로젝트 제작하기
강 민우
 
Towards Light-weight and Real-time Line Segment Detection
Towards Light-weight and Real-time Line Segment DetectionTowards Light-weight and Real-time Line Segment Detection
Towards Light-weight and Real-time Line Segment Detection
Byung Soo Ko
 
Unite Berlin 2018 - Book of the Dead Optimizing Performance for High End Cons...
Unite Berlin 2018 - Book of the Dead Optimizing Performance for High End Cons...Unite Berlin 2018 - Book of the Dead Optimizing Performance for High End Cons...
Unite Berlin 2018 - Book of the Dead Optimizing Performance for High End Cons...
Unity Technologies
 
Practical SPU Programming in God of War III
Practical SPU Programming in God of War IIIPractical SPU Programming in God of War III
Practical SPU Programming in God of War III
Slide_N
 
HDR Theory and practicce (JP)
HDR Theory and practicce (JP)HDR Theory and practicce (JP)
HDR Theory and practicce (JP)
Hajime Uchimura
 
Secrets of CryENGINE 3 Graphics Technology
Secrets of CryENGINE 3 Graphics TechnologySecrets of CryENGINE 3 Graphics Technology
Secrets of CryENGINE 3 Graphics Technology
Tiago Sousa
 
Penner pre-integrated skin rendering (siggraph 2011 advances in real-time r...
Penner   pre-integrated skin rendering (siggraph 2011 advances in real-time r...Penner   pre-integrated skin rendering (siggraph 2011 advances in real-time r...
Penner pre-integrated skin rendering (siggraph 2011 advances in real-time r...
JP Lee
 
Rendering Technologies from Crysis 3 (GDC 2013)
Rendering Technologies from Crysis 3 (GDC 2013)Rendering Technologies from Crysis 3 (GDC 2013)
Rendering Technologies from Crysis 3 (GDC 2013)
Tiago Sousa
 
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
UnityTechnologiesJapan002
 
Lighting the City of Glass
Lighting the City of GlassLighting the City of Glass
Lighting the City of Glass
Electronic Arts / DICE
 
More Performance! Five Rendering Ideas From Battlefield 3 and Need For Speed:...
More Performance! Five Rendering Ideas From Battlefield 3 and Need For Speed:...More Performance! Five Rendering Ideas From Battlefield 3 and Need For Speed:...
More Performance! Five Rendering Ideas From Battlefield 3 and Need For Speed:...
Colin Barré-Brisebois
 
Masked Occlusion Culling
Masked Occlusion CullingMasked Occlusion Culling
Masked Occlusion Culling
Intel® Software
 
コンピューテーショナルフォトグラフィ
コンピューテーショナルフォトグラフィコンピューテーショナルフォトグラフィ
コンピューテーショナルフォトグラフィ
Norishige Fukushima
 
The Rendering Pipeline - Challenges & Next Steps
The Rendering Pipeline - Challenges & Next StepsThe Rendering Pipeline - Challenges & Next Steps
The Rendering Pipeline - Challenges & Next Steps
Johan Andersson
 

What's hot (20)

GPU最適化入門
GPU最適化入門GPU最適化入門
GPU最適化入門
 
Stable SSAO in Battlefield 3 with Selective Temporal Filtering
Stable SSAO in Battlefield 3 with Selective Temporal FilteringStable SSAO in Battlefield 3 with Selective Temporal Filtering
Stable SSAO in Battlefield 3 with Selective Temporal Filtering
 
Stochastic Screen-Space Reflections
Stochastic Screen-Space ReflectionsStochastic Screen-Space Reflections
Stochastic Screen-Space Reflections
 
Filmic Tonemapping for Real-time Rendering - Siggraph 2010 Color Course
Filmic Tonemapping for Real-time Rendering - Siggraph 2010 Color CourseFilmic Tonemapping for Real-time Rendering - Siggraph 2010 Color Course
Filmic Tonemapping for Real-time Rendering - Siggraph 2010 Color Course
 
4K Checkerboard in Battlefield 1 and Mass Effect Andromeda
4K Checkerboard in Battlefield 1 and Mass Effect Andromeda4K Checkerboard in Battlefield 1 and Mass Effect Andromeda
4K Checkerboard in Battlefield 1 and Mass Effect Andromeda
 
Crysis Next-Gen Effects (GDC 2008)
Crysis Next-Gen Effects (GDC 2008)Crysis Next-Gen Effects (GDC 2008)
Crysis Next-Gen Effects (GDC 2008)
 
[IGC 2016] 넷게임즈 김영희 - Unreal4를 사용해 모바일 프로젝트 제작하기
[IGC 2016] 넷게임즈 김영희 - Unreal4를 사용해 모바일 프로젝트 제작하기[IGC 2016] 넷게임즈 김영희 - Unreal4를 사용해 모바일 프로젝트 제작하기
[IGC 2016] 넷게임즈 김영희 - Unreal4를 사용해 모바일 프로젝트 제작하기
 
Towards Light-weight and Real-time Line Segment Detection
Towards Light-weight and Real-time Line Segment DetectionTowards Light-weight and Real-time Line Segment Detection
Towards Light-weight and Real-time Line Segment Detection
 
Unite Berlin 2018 - Book of the Dead Optimizing Performance for High End Cons...
Unite Berlin 2018 - Book of the Dead Optimizing Performance for High End Cons...Unite Berlin 2018 - Book of the Dead Optimizing Performance for High End Cons...
Unite Berlin 2018 - Book of the Dead Optimizing Performance for High End Cons...
 
Practical SPU Programming in God of War III
Practical SPU Programming in God of War IIIPractical SPU Programming in God of War III
Practical SPU Programming in God of War III
 
HDR Theory and practicce (JP)
HDR Theory and practicce (JP)HDR Theory and practicce (JP)
HDR Theory and practicce (JP)
 
Secrets of CryENGINE 3 Graphics Technology
Secrets of CryENGINE 3 Graphics TechnologySecrets of CryENGINE 3 Graphics Technology
Secrets of CryENGINE 3 Graphics Technology
 
Penner pre-integrated skin rendering (siggraph 2011 advances in real-time r...
Penner   pre-integrated skin rendering (siggraph 2011 advances in real-time r...Penner   pre-integrated skin rendering (siggraph 2011 advances in real-time r...
Penner pre-integrated skin rendering (siggraph 2011 advances in real-time r...
 
Rendering Technologies from Crysis 3 (GDC 2013)
Rendering Technologies from Crysis 3 (GDC 2013)Rendering Technologies from Crysis 3 (GDC 2013)
Rendering Technologies from Crysis 3 (GDC 2013)
 
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
 
Lighting the City of Glass
Lighting the City of GlassLighting the City of Glass
Lighting the City of Glass
 
More Performance! Five Rendering Ideas From Battlefield 3 and Need For Speed:...
More Performance! Five Rendering Ideas From Battlefield 3 and Need For Speed:...More Performance! Five Rendering Ideas From Battlefield 3 and Need For Speed:...
More Performance! Five Rendering Ideas From Battlefield 3 and Need For Speed:...
 
Masked Occlusion Culling
Masked Occlusion CullingMasked Occlusion Culling
Masked Occlusion Culling
 
コンピューテーショナルフォトグラフィ
コンピューテーショナルフォトグラフィコンピューテーショナルフォトグラフィ
コンピューテーショナルフォトグラフィ
 
The Rendering Pipeline - Challenges & Next Steps
The Rendering Pipeline - Challenges & Next StepsThe Rendering Pipeline - Challenges & Next Steps
The Rendering Pipeline - Challenges & Next Steps
 

Viewers also liked

Aiming 開発ゲームの裏側
Aiming 開発ゲームの裏側Aiming 開発ゲームの裏側
Aiming 開発ゲームの裏側Katsutoshi Makino
 
Tabc vol3 テクニカルアーティストを始めるにあたって
Tabc vol3 テクニカルアーティストを始めるにあたってTabc vol3 テクニカルアーティストを始めるにあたって
Tabc vol3 テクニカルアーティストを始めるにあたって
fumoto kazuhiro
 
中級グラフィックス入門~シャドウマッピング総まとめ~
中級グラフィックス入門~シャドウマッピング総まとめ~中級グラフィックス入門~シャドウマッピング総まとめ~
中級グラフィックス入門~シャドウマッピング総まとめ~
ProjectAsura
 
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
Drecom Co., Ltd.
 
ACES 1.0 OpenColorIO config - Siggraph 2015
ACES 1.0 OpenColorIO config - Siggraph 2015ACES 1.0 OpenColorIO config - Siggraph 2015
ACES 1.0 OpenColorIO config - Siggraph 2015
hpduiker
 
Application parallelisation Android - Klaas Vangend
Application parallelisation Android - Klaas VangendApplication parallelisation Android - Klaas Vangend
Application parallelisation Android - Klaas Vangend
ナム-Nam Nguyễn
 
Unity & VR (Unity Roadshow 2016)
Unity & VR (Unity Roadshow 2016)Unity & VR (Unity Roadshow 2016)
Unity & VR (Unity Roadshow 2016)
ozlael ozlael
 
Q(キュー)サイトに学ぶ、 演出のためのHTML5
Q(キュー)サイトに学ぶ、 演出のためのHTML5Q(キュー)サイトに学ぶ、 演出のためのHTML5
Q(キュー)サイトに学ぶ、 演出のためのHTML5
Yamato Honda
 
レイトレ合宿3!!! 5分間アピールプレゼン―Pocol
レイトレ合宿3!!! 5分間アピールプレゼン―Pocolレイトレ合宿3!!! 5分間アピールプレゼン―Pocol
レイトレ合宿3!!! 5分間アピールプレゼン―Pocol
ProjectAsura
 
Unity * スマートフォン開発で学んだこと
Unity * スマートフォン開発で学んだことUnity * スマートフォン開発で学んだこと
Unity * スマートフォン開発で学んだことKatsutoshi Makino
 
뭣이 중헌디? 성능 프로파일링도 모름서 - 유니티 성능 프로파일링 가이드 (IGC16)
뭣이 중헌디? 성능 프로파일링도 모름서 - 유니티 성능 프로파일링 가이드 (IGC16)뭣이 중헌디? 성능 프로파일링도 모름서 - 유니티 성능 프로파일링 가이드 (IGC16)
뭣이 중헌디? 성능 프로파일링도 모름서 - 유니티 성능 프로파일링 가이드 (IGC16)
ozlael ozlael
 
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
Drecom Co., Ltd.
 
ACEScg: A Common Color Encoding for Visual Effects Applications - DigiPro 2015
ACEScg: A Common Color Encoding for Visual Effects Applications - DigiPro 2015ACEScg: A Common Color Encoding for Visual Effects Applications - DigiPro 2015
ACEScg: A Common Color Encoding for Visual Effects Applications - DigiPro 2015
hpduiker
 
声の実体化体験 - HTML5でつくるデジタルインスタレーション -
声の実体化体験 - HTML5でつくるデジタルインスタレーション -声の実体化体験 - HTML5でつくるデジタルインスタレーション -
声の実体化体験 - HTML5でつくるデジタルインスタレーション -
Yamato Honda
 
Kansai cedec 2015_fumoto
Kansai cedec 2015_fumotoKansai cedec 2015_fumoto
Kansai cedec 2015_fumotofumoto kazuhiro
 
Getting Native with NDK
Getting Native with NDKGetting Native with NDK
Getting Native with NDK
ナム-Nam Nguyễn
 
Shadow gunのサンプルから学べるモバイル最適化
Shadow gunのサンプルから学べるモバイル最適化Shadow gunのサンプルから学べるモバイル最適化
Shadow gunのサンプルから学べるモバイル最適化Katsutoshi Makino
 
CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…
CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…
CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…
Drecom Co., Ltd.
 
Optimizing mobile applications - Ian Dundore, Mark Harkness
Optimizing mobile applications - Ian Dundore, Mark HarknessOptimizing mobile applications - Ian Dundore, Mark Harkness
Optimizing mobile applications - Ian Dundore, Mark Harkness
ozlael ozlael
 

Viewers also liked (20)

Aiming 開発ゲームの裏側
Aiming 開発ゲームの裏側Aiming 開発ゲームの裏側
Aiming 開発ゲームの裏側
 
Tabc vol3 テクニカルアーティストを始めるにあたって
Tabc vol3 テクニカルアーティストを始めるにあたってTabc vol3 テクニカルアーティストを始めるにあたって
Tabc vol3 テクニカルアーティストを始めるにあたって
 
中級グラフィックス入門~シャドウマッピング総まとめ~
中級グラフィックス入門~シャドウマッピング総まとめ~中級グラフィックス入門~シャドウマッピング総まとめ~
中級グラフィックス入門~シャドウマッピング総まとめ~
 
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
 
ACES 1.0 OpenColorIO config - Siggraph 2015
ACES 1.0 OpenColorIO config - Siggraph 2015ACES 1.0 OpenColorIO config - Siggraph 2015
ACES 1.0 OpenColorIO config - Siggraph 2015
 
Application parallelisation Android - Klaas Vangend
Application parallelisation Android - Klaas VangendApplication parallelisation Android - Klaas Vangend
Application parallelisation Android - Klaas Vangend
 
Unity & VR (Unity Roadshow 2016)
Unity & VR (Unity Roadshow 2016)Unity & VR (Unity Roadshow 2016)
Unity & VR (Unity Roadshow 2016)
 
Q(キュー)サイトに学ぶ、 演出のためのHTML5
Q(キュー)サイトに学ぶ、 演出のためのHTML5Q(キュー)サイトに学ぶ、 演出のためのHTML5
Q(キュー)サイトに学ぶ、 演出のためのHTML5
 
レイトレ合宿3!!! 5分間アピールプレゼン―Pocol
レイトレ合宿3!!! 5分間アピールプレゼン―Pocolレイトレ合宿3!!! 5分間アピールプレゼン―Pocol
レイトレ合宿3!!! 5分間アピールプレゼン―Pocol
 
Unity * スマートフォン開発で学んだこと
Unity * スマートフォン開発で学んだことUnity * スマートフォン開発で学んだこと
Unity * スマートフォン開発で学んだこと
 
뭣이 중헌디? 성능 프로파일링도 모름서 - 유니티 성능 프로파일링 가이드 (IGC16)
뭣이 중헌디? 성능 프로파일링도 모름서 - 유니티 성능 프로파일링 가이드 (IGC16)뭣이 중헌디? 성능 프로파일링도 모름서 - 유니티 성능 프로파일링 가이드 (IGC16)
뭣이 중헌디? 성능 프로파일링도 모름서 - 유니티 성능 프로파일링 가이드 (IGC16)
 
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
 
ACEScg: A Common Color Encoding for Visual Effects Applications - DigiPro 2015
ACEScg: A Common Color Encoding for Visual Effects Applications - DigiPro 2015ACEScg: A Common Color Encoding for Visual Effects Applications - DigiPro 2015
ACEScg: A Common Color Encoding for Visual Effects Applications - DigiPro 2015
 
Aclt1
Aclt1Aclt1
Aclt1
 
声の実体化体験 - HTML5でつくるデジタルインスタレーション -
声の実体化体験 - HTML5でつくるデジタルインスタレーション -声の実体化体験 - HTML5でつくるデジタルインスタレーション -
声の実体化体験 - HTML5でつくるデジタルインスタレーション -
 
Kansai cedec 2015_fumoto
Kansai cedec 2015_fumotoKansai cedec 2015_fumoto
Kansai cedec 2015_fumoto
 
Getting Native with NDK
Getting Native with NDKGetting Native with NDK
Getting Native with NDK
 
Shadow gunのサンプルから学べるモバイル最適化
Shadow gunのサンプルから学べるモバイル最適化Shadow gunのサンプルから学べるモバイル最適化
Shadow gunのサンプルから学べるモバイル最適化
 
CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…
CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…
CEDEC 2015 IoT向け汎用protocol MQTTのリアルタイムゲーム通信利用と実装、そして未来へ…
 
Optimizing mobile applications - Ian Dundore, Mark Harkness
Optimizing mobile applications - Ian Dundore, Mark HarknessOptimizing mobile applications - Ian Dundore, Mark Harkness
Optimizing mobile applications - Ian Dundore, Mark Harkness
 

Weighted Blended Order Independent Transparency

  • 1. WEIGHTED BLENDED ORDER-INDEPENDENT TRANSPARENCY Morgan MacGuire Louis Bavoil NVIDIA Journal of Computer Graphics Techniques Vol. 2, No. 2, 2013
  • 2. ABSTRACT  半透明サーフェスをレンダリングする場合, 結果は描画順序依存である.  描画順序に依存しない半透明レンダリング手法をOrder-Independent Transparency (OIT)という.  本研究ではOVERオペレータから派生した新しいOIT手法を開発した. 2
  • 5. PORTER & DUFF OVER COMPOSITING 半透明サーフェスをレンダリングする場合, 結果は描画順序依存である 𝐶𝑓 = 𝐶1 + 1 − 𝛼1 𝐶0 (1) 後面色前面の不透明度 OVER operator [Porter and Duff 1984] 一般的に用いられている後面と前面の混ぜ方のルール 前面色 glBlendEquation(GL_FUNC_ADD) glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA) 5
  • 6. OVER COMPOSITINGは本当に順序依存? 半透明サーフェスをレンダリングする場合, 結果は描画順序依存である 4枚のサーフェスを重ねる場合を考えてみる 𝑪 𝒏: n番目レイヤのRGB値 (事前にAnを乗じている) 𝑨 𝒏: n番目レイヤの不透明度 𝑫 𝟎: 背景色 𝐷1 = 𝐶0 + 1 − 𝐴0 𝐷0 𝐷2 = 𝐶1 + 1 − 𝐴1 𝐷1 𝐷3 = 𝐶2 + 1 − 𝐴2 𝐷2 𝐷4 = 𝐶3 + 1 − 𝐴3 𝐷3 6
  • 7. 展開してみる OVER COMPOSITINGは本当に順序依存? 半透明サーフェスをレンダリングする場合, 結果は描画順序依存である 𝐷4 = 𝐶3 +𝐶2 1 − 𝐴3 +𝐶1 1 − 𝐴3 1 − 𝐴2 +𝐶0 1 − 𝐴3 1 − 𝐴2 1 − 𝐴1 +𝐷0 1 − 𝐴3 1 − 𝐴2 1 − 𝐴1 1 − 𝐴0 7
  • 8. さらに展開してみる OVER COMPOSITINGは本当に順序依存? 半透明サーフェスをレンダリングする場合, 結果は描画順序依存である 𝐷4 = 𝐶3 +𝐶2 − 𝐴3 𝐶2 +𝐶1 − 𝐴3 𝐶1 − 𝐴2 𝐶1 + 𝐴2 𝐴3 𝐶1 +𝐶0 − 𝐴3 𝐶0 − 𝐴2 𝐶0 + 𝐴2 𝐴3 𝐶0 −𝐴1 𝐶0 + 𝐴1 𝐴3 𝐶0 + 𝐴1 𝐴2 𝐶0 − 𝐴1 𝐴2 𝐴3 𝐶0 +𝐷0 − 𝐴3 𝐷0 − 𝐴2 𝐷0 + 𝐴2 𝐴3 𝐷0 − 𝐴1 𝐷0 +𝐴1 𝐴3 𝐷0 + 𝐴1 𝐴2 𝐷0 − 𝐴1 𝐴2 𝐴3 𝐷0 − 𝐴0 𝐷0 +𝐴0 𝐴3 𝐷0 + 𝐴0 𝐴2 𝐷0 − 𝐴0 𝐴2 𝐴3 𝐷0 + 𝐴0 𝐴1 𝐷0 −𝐴0 𝐴1 𝐴3 𝐷0 − 𝐴0 𝐴1 𝐴2 𝐷0 + 𝐴0 𝐴1 𝐴2 𝐴3 𝐷0 8
  • 9. 並べ替えてみると… OVER COMPOSITINGは本当に順序依存? 半透明サーフェスをレンダリングする場合, 結果は描画順序依存である 𝐷4 = 𝐷0 +𝐶0 + 𝐶1 + 𝐶2 + 𝐶3 −𝐴0 𝐷0 − 𝐴1 𝐷0 − 𝐴2 𝐷0 − 𝐴3 𝐷0 −𝐴0 𝐴1 𝐴2 𝐷0 −𝐴0 𝐴1 𝐴3 𝐷0 − 𝐴0 𝐴2 𝐴3 𝐷0 − 𝐴1 𝐴2 𝐴3 𝐷0 +𝐴0 𝐴1 𝐴2 𝐴3 𝐷0 −𝐴3 𝐶0 − 𝐴2 𝐶0 − 𝐴1 𝐶0 −𝐴3 𝐶1 − 𝐴2 𝐶1 − 𝐴3 𝐶2 +𝐴0 𝐴3 𝐷0 + 𝐴0 𝐴2 𝐷0 + 𝐴0 𝐴1 𝐷0 +𝐴1 𝐴3 𝐷0 + 𝐴1 𝐴2 𝐷0 + 𝐴2 𝐴3 𝐷0 +𝐴1 𝐴2 𝐶0 + 𝐴1 𝐴3 𝐶0 + 𝐴2 𝐴3 𝐶0 + 𝐴2 𝐴3 𝐶1 −𝐴1 𝐴2 𝐴3 𝐶0 Order Independent Part Order dependent Part 9
  • 10. PORTER & DUFF OVER COMPOSITING 半透明サーフェスをレンダリングする場合, 結果は描画順序依存である OVERオペレータでのCompositiongは順序依存! • 三角形ごとのソートとクリッピングが必要 • オブジェクト同士の相互貫入も考慮にいれることも必要 正しくレンダリングするための方法 A-buffer: ピクセルごとに描画されたフラグメントをすべて保持し深度ソートして色を出力 ピクセルごとに非固定長 (unbounded) メモリが必要 10
  • 11. KEY-IDEAS ORDER-INDEPENDENT TRANSPARENCY  アルファ値を変換し, ピクセルごとにたくさん保持する.  Stochastic Transparency, CSAA, etc…  Z値が小さいサーフェスの部分集合を保持する.  Bounded A-Buffer, Stencil Routed K-buffer, Stencil Routed A-Buffer, etc…  深度全体に渡って連続密度モデルを構築する.  Fourier Opacity Mapping, etc…  Compositing operatorを順序非依存になるように再定義する. そこで Order-Independent Transparencyによる様々な近似種法が考えだされてきた. • やや新しいGPUを必要とする. • 盛んに研究されてきた. • 特別なハードウェアを要求しない • 使用するメモリ量が少ない 本研究が用いる鍵となるアイデア 11
  • 12. BLENDED OIT (MESHKIN’S) ORDER-INDEPENDENT TRANSPARENCY 2007年, MeshkinによってCompositing operatorを順序非依存になるように再定義する手法が初めて紹介された. 𝐶𝑓 = 𝑖=1 𝑛 𝐶𝑖 + 𝐶0 1 − 𝑖=1 𝑛 𝛼𝑖 (2) 12
  • 13. BLENDED OIT (MESHKIN’S) ORDER-INDEPENDENT TRANSPARENCY 𝐶𝑓 = 𝑖=1 𝑛 𝐶𝑖 + 𝐶0 1 − 𝑖=1 𝑛 𝛼𝑖 (2) の導出原理 • 順序依存項を誤差と考えて消す. • ついでに順序非依存項の複数のアルファ値が 掛かった背景色項も消す. • 各アルファ値が低いなら全体への影響は低く なる. 𝐷4 = 𝐶0 + 𝐶1 + 𝐶2 + 𝐶3 𝐷0 − 𝐴0 𝐷0 − 𝐴1 𝐷0 − 𝐴2 𝐷0 − 𝐴3 𝐷0 13
  • 14. BLENDED OIT (MESHKIN’S) EXAMPLE ORDER-INDEPENDENT TRANSPARENCY Sorted, α=0.25 Approx, α=0.25 14
  • 15. BLENDED OIT (MESHKIN’S) EXAMPLE ORDER-INDEPENDENT TRANSPARENCY Sorted, α=0.5 Approx, α=0.5 15
  • 16. BLENDED OIT (MESHKIN’S) IMPLEMENTATION ORDER-INDEPENDENT TRANSPARENCY 図2. Meshkinの手法のOpenGLによる実装 𝐶𝑓 = 𝐶0 + 𝐶1 + 𝐶2 + 𝐶3 + 𝐶4 −𝐴1 𝐷0 − 𝐴2 𝐷0 − 𝐴3 𝐷0 − 𝐴4 𝐷0 16
  • 17. BLENDED OIT ADVANTAGES ORDER-INDEPENDENT TRANSPARENCY 17  DX11-class GPUs (PS4, XboxOne, NVIDIA 2010~ , AMD 2009~, Intel 2012~)  DX9-class GPUs (Xbox360, PS3, WiiU, NVIDIA 2003~, AMD 2002~, Intel 2005~)  OpenGL ES 3.0 GPUs (with half float拡張) (PowerVR G6430, Tegra K1, iphone 5s)  WebGL1(with float texture拡張) , WebGL2 8-bitブレンディング以上をサポートしていればどんなプラットフォームでも実装できる!
  • 18. BLENDED OIT (BAVOIL AND MYERS) ORDER-INDEPENDENT TRANSPARENCY 2008年, BavoilらによってMeshkinの手法が改良された. 𝐶𝑓 = 𝑖=1 𝑛 𝐶𝑖 𝑖=1 𝑛 𝛼𝑖 ∙ 1 − 1 − 1 𝑛 𝑖=1 𝑛 𝛼𝑖 𝑛 + 𝐶 𝑜 1 − 1 𝑛 𝑖=1 𝑛 𝛼𝑖 𝑛 (3) 18
  • 19. BLENDED OIT (BAVOIL AND MYERS) ORDER-INDEPENDENT TRANSPARENCY ピクセルに描画された色のαによる加重平均を用いて平均色Cwaを求め, Composition Operatorを変換する. 𝐶 𝑤_𝑎𝑣𝑒 = 𝑖=1 𝑛 𝐶𝑖 ∙ 𝐴 𝑎𝑣𝑒 𝑖=1 𝑛 𝛼𝑖 𝐴 𝑎𝑣𝑒 = 𝑖=1 𝑛 𝛼𝑖 𝑛 簡単に4レイヤーの場合だと 𝐶𝑓 = 𝐶4 +𝐶3 1 − 𝐴4 +𝐶2 1 − 𝐴4 1 − 𝐴3 +𝐶1 1 − 𝐴4 1 − 𝐴3 1 − 𝐴2 +𝐶0 1 − 𝐴4 1 − 𝐴3 1 − 𝐴2 1 − 𝐴1 𝐶𝑓 = 𝐶 𝑤_𝑎𝑣𝑒 +𝐶 𝑤_𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒 +𝐶 𝑤_𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒 +𝐶 𝑤_𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒 +𝐶0 1 − 𝐴 𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒 1 − 𝐴 𝑎𝑣𝑒 Ciに事前にα値は掛けられて いないことに注意 19
  • 20. BLENDED OIT (BAVOIL AND MYERS) ORDER-INDEPENDENT TRANSPARENCY 𝐶𝑓 = 𝐶 𝑤_𝑎𝑣𝑒 1 + 1 − 𝐴 𝑎𝑣𝑒 + 1 − 𝐴 𝑎𝑣𝑒 2 + 1 − 𝐴 𝑎𝑣𝑒 3 + 𝐶0 1 − 𝐴 𝑎𝑣𝑒 4 = 𝑖=1 4 𝐶 𝑖 𝑖=1 4 𝛼 𝑖 𝐴 𝑎𝑣𝑒 ∙ 1− 1−𝐴 𝑎𝑣𝑒 4 1− 1−𝐴 𝑎𝑣𝑒 + 𝐶0 1 − 𝐴 𝑎𝑣𝑒 4 = 𝑖=1 4 𝐶 𝑖 𝑖=1 4 𝛼 𝑖 𝐴 𝑎𝑣𝑒 ∙ 1− 1−𝐴 𝑎𝑣𝑒 4 𝐴 𝑎𝑣𝑒 + 𝐶0 1 − 𝐴 𝑎𝑣𝑒 4 = 𝑖=1 4 𝐶 𝑖 𝑖=1 4 𝛼 𝑖 ∙ 1 − 1 − 1 𝑛 𝑖=1 𝑛 𝛼𝑖 4 + 𝐶0 1 − 1 𝑛 𝑖=1 𝑛 𝛼𝑖 4 𝐶 𝑤_𝑎𝑣𝑒 = 𝑖=1 𝑛 𝐶𝑖 ∙ 𝐴 𝑎𝑣𝑒 𝑖=1 𝑛 𝛼𝑖 𝐴 𝑎𝑣𝑒 = 𝑖=1 𝑛 𝛼𝑖 𝑛 Ciに事前にα値は掛けられて いないことに注意 𝐶𝑓 = 𝑖=1 𝑛 𝐶𝑖 𝑖=1 𝑛 𝛼𝑖 ∙ 1 − 1 − 1 𝑛 𝑖=1 𝑛 𝛼𝑖 𝑛 + 𝐶 𝑜 1 − 1 𝑛 𝑖=1 𝑛 𝛼𝑖 𝑛 (3) 等比級数和 20
  • 21. BLENDED OIT (BAVOIL AND MYERS) ORDER-INDEPENDENT TRANSPARENCY 2008年, BavoilらによってMeshkinの手法が改良された. 𝐶𝑓 = 𝑖=1 𝑛 𝐶𝑖 𝑖=1 𝑛 𝛼𝑖 ∙ 1 − 1 − 1 𝑛 𝑖=1 𝑛 𝛼𝑖 𝑛 + 𝐶 𝑜 1 − 1 𝑛 𝑖=1 𝑛 𝛼𝑖 𝑛 (3) • 先のComposition Operatorの順序依存項を切り捨てずにすべて保持しているのでより良い結果が得られる. • ハードウェアに対してMultiRenderingTargetと16-bit float blendingしか要求しない. 21
  • 22. BLENDED OIT (BAVOIL AND MYERS) DEMO ORDER-INDEPENDENT TRANSPARENCY DEMO 22
  • 23. BLENDED OIT (BAVOIL AND MYERS) IMPLEMENTATION ORDER-INDEPENDENT TRANSPARENCY 図3. Bavoil, Myersらの手法のOpenGLによる実装 23
  • 24. 2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE) ORDER-INDEPENDENT TRANSPARENCY 𝐶𝑓 = 𝑖=1 𝑛 𝐶𝑖 𝑖=1 𝑛 𝛼𝑖 ∙ 1 − 1 − 1 𝑛 𝑖=1 𝑛 𝛼𝑖 𝑛 + 𝐶 𝑜 1 − 1 𝑛 𝑖=1 𝑛 𝛼𝑖 𝑛 (3) 𝐶𝑓 = 𝑖=1 𝑛 𝐶𝑖 ∙ 𝑤 𝑧𝑖, 𝛼𝑖 𝑖=1 𝑛 𝛼𝑖 ∙ 𝑤 𝑧𝑖, 𝛼𝑖 ∙ 1 − 𝑖=1 𝑛 1 − 𝛼𝑖 + 𝐶 𝑜 𝑖=1 𝑛 1 − 𝛼𝑖 (4) 深度加重関数 Aavgによる単純化をやめた 24
  • 25. DEPTH WEIGHT FUNCTION 2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE) ORDER-INDEPENDENT TRANSPARENCY 今までの手法ではサーフェスの”深度”について考慮していなかった… なので深度軸方向で相互に位置が入れ替わる半透明オブジェクト の”入れ替わり”を表現できなかった カメラからの距離によって減衰する深度加重𝑤 𝑧𝑖, 𝛼𝑖 の追加 深度だけでなくα値によっても減衰します. 25
  • 26. DEPTH WEIGHT FUNCTION 2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE) ORDER-INDEPENDENT TRANSPARENCY 筆者が作成したいくつかの深度加重関数 (0.1 < |z| < 500, 16-bit float buffer)環境で上手く動作する w 𝑧, 𝛼 = α ∙ max 10−2 , 𝑚𝑖𝑛 3 × 103 , 10 10−5 + 𝑧 /5 2 + 𝑧 /200 6 (7) w 𝑧, 𝛼 = α ∙ max 10−2 , 𝑚𝑖𝑛 3 × 103 , 10 10−5 + 𝑧 /5 3 + 𝑧 /200 6 (8) w 𝑧, 𝛼 = α ∙ max 10−2 , 𝑚𝑖𝑛 3 × 103 , 10 10−5 + 𝑧 /200 4 (9) w 𝑧, 𝛼 = α ∙ max 10−2 , 3 × 103 ∙ 1 − 𝑑 𝑧 3 (10) d 𝑧 = 𝑧 𝑛𝑒𝑎𝑟 𝑧𝑓𝑎𝑟 𝑧 − 𝑧𝑓𝑎𝑟 𝑧 𝑛𝑒𝑎𝑟 − 𝑧𝑓𝑎𝑟 26
  • 27. DEPTH WEIGHT FUNCTION 2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE) ORDER-INDEPENDENT TRANSPARENCY 図4. サンプル加重関数の両対数グラフ “膝”の立ち上がりが大きいほど 後に述べるシルエットアーティファクト を低減することができる. 27
  • 28. IMPLEMENTEATION 2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE) ORDER-INDEPENDENT TRANSPARENCY 𝐶𝑓 = 𝑖=1 𝑛 𝐶𝑖 ∙ 𝑤 𝑧𝑖, 𝛼𝑖 𝑖=1 𝑛 𝛼𝑖 ∙ 𝑤 𝑧𝑖, 𝛼𝑖 ∙ 1 − 𝑖=1 𝑛 1 − 𝛼𝑖 + 𝐶 𝑜 𝑖=1 𝑛 1 − 𝛼𝑖 (4) accumTexture.rgb accumTexture.a “Revealage” “Coverage” revealageTexture.r 28
  • 29. IMPLEMENTEATION 2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE) ORDER-INDEPENDENT TRANSPARENCY 29
  • 30. IMPLEMENTEATION (FOR RESTRICTED PLATFORM) 2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE) ORDER-INDEPENDENT TRANSPARENCY 30 RenderTargetごとのblendingを サポートしていない環境でも C, Alphaごとにblendingを分解 することで対処できる.
  • 31. RESULTS 2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE) ORDER-INDEPENDENT TRANSPARENCY 図5. グラス 31
  • 32. RESULTS 2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE) ORDER-INDEPENDENT TRANSPARENCY 32
  • 33. RESULTS 2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE) ORDER-INDEPENDENT TRANSPARENCY 図5. CAD 33
  • 34. RESULTS 2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE) ORDER-INDEPENDENT TRANSPARENCY 34
  • 35. RESULTS 2013 NEW WEIGHTED BLENDED OIT (BAVOIL AND MACGUIRE) ORDER-INDEPENDENT TRANSPARENCY シルエットアーティファクト 35

Editor's Notes

  1. blendingとは Over operator 正しくblendingするには OITによる近似 実際の現場に求められるもの New method 結果 Future work