Mais conteúdo relacionado
Semelhante a CEDEC 2009 Imagire Day 続・レンダリスト養成講座 (20)
Mais de Silicon Studio Corporation (6)
CEDEC 2009 Imagire Day 続・レンダリスト養成講座
- 5. Imagire Day
Line Drawing via Abstracted
Shading
• 紹介論文 :
1.11.1 発表の概要発表の概要
[Lee et al. SIGGRAPH 2007]
当初、今年の当初、今年の SIGGRAPHSIGGRAPH のの NPRNPR の論文紹介しようとの論文紹介しようと
思いましたが、ゲーム向きじゃなかったので止めま思いましたが、ゲーム向きじゃなかったので止めま
した。した。
- 8. Imagire Day
1.21.2 手法の概要手法の概要 (3/3)(3/3)
• 手法の長所
• 完全な 2 次元処理
• 2D 静止画 / レンダリングした 3D シーン両方対応可
• メッシュに特殊なデータを仕込んだりは不要
• ラインの太さは可変
• 単純な Sobel Filter などでは不可能
• 大元となるアルゴリズムに応用の余地がある
• SSAO, Tone Map, ….
• 手法の短所
• 少々計算時間がかかる
• 3D シーンに適用すると、結果が視点依存
• エイリアシングが発生する
- 12. Imagire Day
2.12.1 キーアイディアキーアイディア (2/3)(2/3)
手順 1 :
{(描きたい線の太さ) / 2 }
の間隔で
3×3 のサンプル点を配置する
手順 2 :
色の濃さを高さとしたハイト
マップを
構築
手順 3 :
ハイトマップを放物面で近似
手順 4 :
頂点・曲率・曲線方向を計算
- 13. Imagire Day
2.12.1 キーアイディアキーアイディア (3/3)(3/3)
手順 1 :
{(描きたい線の太さ) / 2 }
の間隔で
3×3 のサンプル点を配置する
手順 2 :
色の濃さを高さとしたハイト
マップを
構築
手順 3 :
ハイトマップを放物面で近似
手順 4 :
頂点・曲率・曲線方向を計算
手順 5 :
頂点・曲率・曲線方向から色の
補正
係数を計算
- 16. Imagire Day
2.2.12.2.1 放物面近似放物面近似 (1/4)(1/4)
放物線 :
543
2
21
2
0 2),( ayaxayaxyaxayxf +++++=
959493
2
92991
2
90
252423
2
22221
2
20
151413
2
12111
2
10
2
2
2
tayaxayayxaxa
tayaxayayxaxa
tayaxayayxaxa
=+++++
=+++++
=+++++
510 ,,, aaa を線形システムを用いて求め
る
の
),,( 111 tyx
),,( 222 tyx
),,( 999 tyx
x
y
=
⇔
9
2
1
5
4
3
2
1
0
99
2
999
2
9
22
2
222
2
2
11
2
111
2
1
12
12
12
t
t
t
a
a
a
a
a
a
yxyyxx
yxyyxx
yxyyxx
- 17. Imagire Day
2.2.12.2.1 放物面近似放物面近似 (2/4)(2/4)
放物線 :
543
2
21
2
0 2),( ayaxayaxyaxayxf +++++=
510 ,,, aaa を線形システムを用いて求め
る
の
TXA = という線形システムを解けば
良い
⇓
AX T
⇓ ⇓
= x
y
=
9
2
1
5
4
3
2
1
0
99
2
999
2
9
22
2
222
2
2
11
2
111
2
1
12
12
12
t
t
t
a
a
a
a
a
a
yxyyxx
yxyyxx
yxyyxx
- 18. Imagire Day
⇒ X は正方行列でないため逆行列は計算不可
能
2.2.12.2.1 放物面近似放物面近似 (3/4)(3/4)
放物線 :
543
2
21
2
0 2),( ayaxayaxyaxayxf +++++=
510 ,,, aaa を線形システムを用いて求め
る
の
=
12
12
12
99
2
999
2
9
22
2
222
2
2
11
2
111
2
1
yxyyxx
yxyyxx
yxyyxx
X
TXA 1−
= で求められ
る ?
x
y
TXA = という線形システムを解けば
良い
- 19. Imagire Day
TT
XXXX 1
)( −+
=
2.2.12.2.1 放物面近似放物面近似 (4/4)(4/4)
放物線 :
543
2
21
2
0 2),( ayaxayaxyaxayxf +++++=
TXA +
=
510 ,,, aaa を線形システムを用いて求め
る
の
⇒ 疑似逆行列 X+
を用い
て
と計算可能
x
y
TXA 1−
= で求められ
る ?
⇒ X は正方行列でないため逆行列は計算不可
能
TXA = という線形システムを解けば
良い
最小二乗法の解と一致する最小二乗法の解と一致する
- 20. Imagire Day
• ローカル座標系で定義すること
で
X を共通化
2.2.22.2.2 放物面近似の計算手順放物面近似の計算手順 (1/11)(1/11)
手順 1 :
X を計算する
=
12
12
12
99
2
999
2
9
22
2
222
2
2
11
2
111
2
1
yxyyxx
yxyyxx
yxyyxx
X
前計算
描画処理
x
y
- 21. Imagire Day
• ローカル座標系で定義すること
で
X を共通化
2.2.22.2.2 放物面近似の計算手順放物面近似の計算手順 (2/11)(2/11)
手順 1 :
X を計算する
前計算
描画処理
x
y
)3,3(),( 11 −−=yx
=
12
12
12
99
2
999
2
9
22
2
222
2
2
11
2
111
2
1
yxyyxx
yxyyxx
yxyyxx
X
- 22. Imagire Day
• ローカル座標系で定義すること
で
X を共通化
2.2.22.2.2 放物面近似の計算手順放物面近似の計算手順 (3/11)(3/11)
手順 1 :
X を計算する
−−
=
12
12
1339189
99
2
999
2
9
22
2
222
2
2
yxyyxx
yxyyxx
X
前計算
描画処理
x
y
)3,3(),( 11 −−=yx
- 23. Imagire Day
• ローカル座標系で定義すること
で
X を共通化
2.2.22.2.2 放物面近似の計算手順放物面近似の計算手順 (4/11)(4/11)
手順 1 :
X を計算する
前計算
描画処理
)3,0(),( 22 −=yx
x
y
−−
=
12
12
1339189
99
2
999
2
9
22
2
222
2
2
yxyyxx
yxyyxx
X
- 24. Imagire Day
• ローカル座標系で定義すること
で
X を共通化
2.2.22.2.2 放物面近似の計算手順放物面近似の計算手順 (5/11)(5/11)
手順 1 :
X を計算する
−
−−
=
12
130900
1339189
99
2
999
2
9 yxyyxx
X
前計算
描画処理
)3,0(),( 22 −=yx
x
y
- 25. Imagire Day
• ローカル座標系で定義すること
で
X を共通化
2.2.22.2.2 放物面近似の計算手順放物面近似の計算手順 (6/11)(6/11)
手順 1 :
X を計算する
前計算
描画処理
)3,3(),( 99 =yx
x
y
−
−−
=
12
130900
1339189
99
2
999
2
9 yxyyxx
X
- 26. Imagire Day
• ローカル座標系で定義すること
で
X を共通化
2.2.22.2.2 放物面近似の計算手順放物面近似の計算手順 (7/11)(7/11)
手順 1 :
X を計算する
−
−−
=
1339189
130900
1339189
X
前計算
描画処理
)3,3(),( 99 =yx
x
y
- 27. Imagire Day
2.2.22.2.2 放物面近似の計算手順放物面近似の計算手順 (8/11)(8/11)
手順 1 :
X を計算する
−
−−
=
1339189
130900
1339189
X
前計算
描画処理
手順 2 :
X +
= (XT
X)-1
XT
を計算する
• 描きたい線の太さにのみ依存
• ローカル座標系で定義すること
で
X を共通化
- 28. Imagire Day
2.2.22.2.2 放物面近似の計算手順放物面近似の計算手順 (9/11)(9/11)
手順 3 :
X +
を Pixel Shader の Uniform 変
数
に設定する
手順 4 :
Pixel Shader で近傍のサンプル点
をフェッチし、 T を構築する
前計算
描画処理
=
=
64.0
73.0
27.0
9
2
1
t
t
t
T
手順 1 :
X を計算する
手順 2 :
X +
= (XT
X)-1
XT
を計算する
• 描きたい線の太さにのみ依存
• ローカル座標系で定義すること
で
X を共通化
- 29. Imagire Day
2.2.22.2.2 放物面近似の計算手順放物面近似の計算手順 (10/11)(10/11)
手順 1 :
X を計算する
手順 2 :
X +
= (XT
X)-1
XT
を計算する
手順 3 :
X +
を Pixel Shader の Uniform 変
数
に設定する
手順 4 :
Pixel Shader で近傍のサンプル点
をフェッチし、 T を構築する
手順 5 :
X +
T を計算して A を求める
• 描きたい線の太さにのみ依存
• ローカル座標系で定義すること
で
X を共通化
前計算
描画処理
−
−
−
=
=
783.0
002.0
063.0
002.0
002.0
029.0
5
4
3
2
1
0
a
a
a
a
a
a
A
- 30. Imagire Day
2.2.22.2.2 放物面近似の計算手順放物面近似の計算手順 (11/11)(11/11)
手順 3 :
X +
を Pixel Shader の Uniform 変
数
に設定する
手順 4 :
Pixel Shader で近傍のサンプル点
をフェッチし、 T を構築する
手順 5 :
X +
T を計算して A を求める
前計算
描画処理
543
2
21
2
0 2),( ayaxayaxyaxayxf +++++=
手順 1 :
X を計算する
手順 2 :
X +
= (XT
X)-1
XT
を計算する
• 描きたい線の太さにのみ依存
• ローカル座標系で定義すること
で
X を共通化
- 33. Imagire Day
2.3.22.3.2 放物面の主曲率・曲線方向放物面の主曲率・曲線方向
放物線 :
543
2
21
2
0 2),( ayaxayaxyaxayxf +++++=
主曲率の絶対値が小さい組が尾根線主曲率の絶対値が小さい組が尾根線
2
4)()(
2
1
2
2020
1
aaaaa ++++
=α
)4)()(,2(
2
1
2
202011
aaaaaanormalized ++−−−= α
主曲率 :
曲線方向 :
2
4)()(
2
1
2
2020
2
aaaaa ++−+
=α
)4)()(,2(
2
1
2
202012
aaaaaanormalized +++−−= α
主曲率 :
曲線方向 :
山は主曲率が負、谷は主曲率が正山は主曲率が負、谷は主曲率が正
x
y
- 34. Imagire Day
2.3.22.3.2 放物面の主曲率・曲線方向放物面の主曲率・曲線方向
放物線 :
543
2
21
2
0 2),( ayaxayaxyaxayxf +++++=
2
4)()(
2
1
2
2020
1
aaaaa ++++
=α
)4)()(,2(
2
1
2
202011
aaaaaanormalized ++−−−= α
主曲率 :
曲線方向 :
2
4)()(
2
1
2
2020
2
aaaaa ++−+
=α
)4)()(,2(
2
1
2
202012
aaaaaanormalized +++−−= α
主曲率 :
曲線方向 :
主曲率の絶対値の小さい
組 :
s
ds αα
,
主曲率の絶対値の大きい
組 :
l
dl αα
,
x
y
lα
sα
s
dα
l
dα
- 36. Imagire Day
2.42.4 色の補正係数色の補正係数 (1/5)(1/5)
山線・谷線への距離による係数 : Sd (0.0 ~
1.0)
曲率の大きさによる係数 : SC (0.0 ~
1.0)
曲面の種類による補正 :
S
• 山線・谷線に近いほど値が大きい
• 放物面の曲率が大きいほど値が大きい
• 山は明るく、谷は暗く色を
変化
)(0.1 Cd SSS ×+=山の場合 (αl が負 )
)(0.1 Cd SSS ×−=谷の場合 (αl が
正 )
c
lα
sα
s
dα
l
dα
- 37. Imagire Day
2.42.4 色の補正係数色の補正係数 (2/5)(2/5)
山線・谷線への距離による係数 : Sd (0.0 ~
1.0)
曲率の大きさによる係数 : SC (0.0 ~
1.0)
曲面の種類による補正 :
S
• 山線・谷線に近いほど値が大きい
• 放物面の曲率が大きいほど値が大きい
• 山は明るく、谷は暗く色を
変化
)(0.1 Cd SSS ×+=山の場合 (αl が負 )
)(0.1 Cd SSS ×−=谷の場合 (αl が
正 )
S を乗
算
- 38. Imagire Day
2.42.4 色の補正係数色の補正係数 (3/5)(3/5)
山線・谷線への距離による係数 : Sd (0.0 ~
1.0)
曲率の大きさによる係数 : SC (0.0 ~
1.0)
曲面の種類による補正 :
S
• 山線・谷線に近いほど値が大きい
• 放物面の曲率が大きいほど値が大きい
c
)0.0}),2//{(0.1max( LineWidthdSd −=
• 山は明るく、谷は暗く色を
変化
s
dα
l
dα
)(0.1 Cd SSS ×+=山の場合 (αl が負 )
)(0.1 Cd SSS ×−=谷の場合 (αl が
正 )
Sd
d{LineWidth /
2}
),(dot l
dcd α
=
- 39. Imagire Day
2.42.4 色の補正係数色の補正係数 (4/5)(4/5)
山線・谷線への距離による係数 : Sd (0.0 ~
1.0)
曲率の大きさによる係数 : SC (0.0 ~
1.0)
曲面の種類による補正 :
S
• 山線・谷線に近いほど値が大きい
• 放物面の曲率が大きいほど値が大きい
)0.1,0.0,(clamp
minmax
min
CC
C
S l
C
−
−
=
α
)0.0}),2//{(0.1max( LineWidthdSd −=
• 山は明るく、谷は暗く色を
変化
lα
sα
)(0.1 Cd SSS ×+=山の場合 (αl が負 )
)(0.1 Cd SSS ×−=谷の場合 (αl が
正 )
SC
|αl|Cmin Cmax
- 40. Imagire Day
2.42.4 色の補正係数色の補正係数 (5/5)(5/5)
山線・谷線への距離による係数 : Sd (0.0 ~
1.0)
曲率の大きさによる係数 : SC (0.0 ~
1.0)
曲面の種類による補正 :
S
• 山線・谷線に近いほど値が大きい
• 放物面の曲率が大きいほど値が大きい
)0.1,0.0,(clamp
minmax
min
CC
C
S l
C
−
−
=
α
)0.0}),2//{(0.1max( LineWidthdSd −=
• 山は明るく、谷は暗く色を
変化
)(0.1 Cd SSS ×+=山の場合 (αl が負 )
)(0.1 Cd SSS ×−=谷の場合 (αl が
正 )
S を乗
算
- 41. Imagire Day
2.52.5 まとめ・考察まとめ・考察 (1/2)(1/2)
• まとめ
1. 各ピクセルで、近傍の色情報の放物面近似に
よって自分が山・谷に居るのかを判断
山に居る場合は色を明るく、谷に居る場合は色
を暗く変化させる
2. 放物面の係数から、放物面の曲率や山・谷線方
向といった付加情報を計算可能
3. 山・谷線に近いほど、また、曲面の曲率が大き
いほど大きく色を変化させる
- 42. Imagire Day
2.52.5 まとめ・考察まとめ・考察 (2/2)(2/2)
• 考察
1. 山・谷の区別だけではなく、曲率や山・谷線方
向を導出し、レンダリングに反映させている点
は面白い
2. 現在は二次元処理なので、三次元情報を上手く
利用すれば、結果の向上が図れるかも
3. 近傍の色情報の放物面近似は、 SSAO やトーン
マップにも応用可能かも