20150512-輪講資料

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

3. 半透明サーフェスをレンダリングする場合, 結果は描画順序依存である
図1. 左: 通常レンダリング (unsorted OVER), 右: OIT
3

4. OIT DEMO
DEMO
4

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は本当に順序依存？
半透明サーフェスをレンダリングする場合, 結果は描画順序依存である
４枚のサーフェスを重ねる場合を考えてみる
𝑪 𝒏: 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
図２. 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