cedec 2009　imagire day 続・レンダリスト養成講座

Imagire Day

CEDEC 2009

続・レンダリスト養成講座続・レンダリスト養成講座

田村　尚希川瀬　正樹

シリコンスタジオ株式会社　

Imagire Day

本セッションの流れ本セッションの流れ

後半発表者：川瀬

前半発表者：田村

Imagire Day

発表の流れ発表の流れ

1. 発表の概要2. 論文紹介

　「 Line Drawing via Abstracted Shading 」

3. 発表のまとめ

Imagire Day

　 Line Drawing via Abstracted Shading

• 紹介論文 :

1.1 1.1 発表の概要発表の概要

[Lee et al. SIGGRAPH 2007]

当初、今年の当初、今年の SIGGRAPHSIGGRAPH のの NPRNPR の論文紹介しようとの論文紹介しようと思いましたが、ゲーム向きじゃなかったので止めま思いましたが、ゲーム向きじゃなかったので止めま

した。した。

Imagire Day

1.2 1.2 手法の概要手法の概要 (1/3)(1/3)

• NPR において :

山・谷線、折り目線、輪郭線を統一的に描画できる山・谷線、折り目線、輪郭線を統一的に描画できる手法手法

• 手法の特徴

入力画像結果画像

Imagire Day

1.2 1.2 手法の概要手法の概要 (2/3)(2/3)

• 動画 :

Imagire Day

1.2 1.2 手法の概要手法の概要 (3/3)(3/3)

• 手法の長所• 完全な 2 次元処理

• 2D 静止画 / レンダリングした 3D シーン両方対応可• メッシュに特殊なデータを仕込んだりは不要

• ラインの太さは可変• 単純な Sobel Filter などでは不可能

• 大元となるアルゴリズムに応用の余地がある• SSAO, Tone Map, ….

• 手法の短所• 少々計算時間がかかる• 3D シーンに適用すると、結果が視点依存

• エイリアシングが発生する

Imagire Day





Imagire Day

アルゴリズム全体像

ライティング

結果画像トゥーンシェーディン

グ

入力メッシュ

トゥーンシェーディング

特徴線抽出

特徴線抽出ガウシアンフィルタリン

グ

Imagire Day

2.1 2.1 キーアイディアキーアイディア (1/3)(1/3)

手順 1 : 　｛（描きたい線の太さ） / 2 ｝の間隔で 3×3 のサンプル点を配置する

手順 2 : 　色の濃さを高さとしたハイトマップを構築

手順 3 : 　　ハイトマップを放物面で近似

Imagire Day





手順 4 : 　頂点・曲率・曲線方向を計算

Imagire Day





手順 4 : 　頂点・曲率・曲線方向を計算

手順 5 : 　頂点・曲率・曲線方向から色の補正　係数を計算

Imagire Day

特徴線抽出手順


グ

放物面近似色の補正係数計算

頂点・曲率・曲線方向計算

Imagire Day

2.2.1 2.2.1 放物面近似放物面近似 (1/4)(1/4)

放物線 :

5432

212

0 2),( ayaxayaxyaxayxf

　　

9594932

929912

90

2524232

222212

20

1514132

121112

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

992

9992

9

222

2222

2

112

1112

1

12

12

12

t

t

t

a

a

a

a

a

a

yxyyxx

yxyyxx

yxyyxx

Imagire Day

2.2.1 2.2.1 放物面近似放物面近似 (2/4)(2/4)

放物線 :

5432

212



の

TXA という線形システムを解けば良い

AX T

x

y

　

9

2

1

5

4

3

2

1

0

992

9992

9

222

2222

2

112

1112

1

12

12

12

t

t

t

a

a

a

a

a

a

yxyyxx

yxyyxx

yxyyxx

Imagire Day

⇒ X は正方行列でないため逆行列は計算不可能

2.2.1 2.2.1 放物面近似放物面近似 (3/4)(3/4)

放物線 :

5432

212



の

12

12

12

992

9992

9

222

2222

2

112

1112

1

yxyyxx

yxyyxx

yxyyxx

X

TXA 1 で求められる ?

x

y


Imagire Day

TT XXXX 1)(

2.2.1 2.2.1 放物面近似放物面近似 (4/4)(4/4)

放物線 :

5432

212


TXA


の

⇒ 疑似逆行列 X+ を用いて

と計算可能

x

y

TXA 1 で求められる ?

⇒ X は正方行列でないため逆行列は計算不可能


最小二乗法の解と一致する最小二乗法の解と一致する

Imagire Day

• ローカル座標系で定義することで X を共通化

2.2.2 2.2.2 放物面近似の計算手順放物面近似の計算手順 (1/11)(1/11)

手順 1 : X を計算する

12

12

12

992

9992

9

222

2222

2

112

1112

1

yxyyxx

yxyyxx

yxyyxx

X

前計算

描画処理

x

y

Imagire Day




前計算

描画処理

x

y

)3,3(),( 11 yx

12

12

12

992

9992

9

222

2222

2

112

1112

1

yxyyxx

yxyyxx

yxyyxx

X

Imagire Day




12

12

1339189

992

9992

9

222

2222

2

yxyyxx

yxyyxxX

前計算

描画処理

x

y

)3,3(),( 11 yx

Imagire Day




前計算

描画処理

)3,0(),( 22 yx

x

y

12

12

1339189

992

9992

9

222

2222

2

yxyyxx

yxyyxxX

Imagire Day




12

130900

1339189

992

9992

9 yxyyxx

X

前計算

描画処理

)3,0(),( 22 yx

x

y

Imagire Day




前計算

描画処理)3,3(),( 99 　yx

x

y

12

130900

1339189

992

9992

9 yxyyxx

X

Imagire Day




1339189

130900

1339189

X

前計算

描画処理)3,3(),( 99 　yx

x

y

Imagire Day



1339189

130900

1339189

X

前計算

描画処理

手順 2 : X += (X TX) -1X T を計算する

• 描きたい線の太さにのみ依存


Imagire Day


手順 3 : 　 X + を Pixel Shader の Uniform 変

数に設定する手順 4 : Pixel Shader で近傍のサンプル点　をフェッチし、 T を構築する

前計算

描画処理

　

64.0

73.0

27.0

9

2

1

t

t

t

T





Imagire Day





数に設定する手順 4 : Pixel Shader で近傍のサンプル点　をフェッチし、 T を構築する手順 5 : X +T を計算して A を求める



前計算

描画処理

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

Imagire Day



数に設定する手順 4 : Pixel Shader で近傍のサンプル点　をフェッチし、 T を構築する手順 5 : X +T を計算して A を求める

前計算

描画処理

5432

212






Imagire Day



グ



Imagire Day

2.3.1 2.3.1 放物面の頂点放物面の頂点

放物線 :

放物線の頂点 :

)(2

,)(2 2

120

40312

120

3241

aaa

aaaa

aaa

aaaac

c

5432

212


x

y

Imagire Day

2.3.2 2.3.2 放物面の主曲率・曲線方向放物面の主曲率・曲線方向

放物線 :

5432

212


主曲率の絶対値が小さい組が尾根主曲率の絶対値が小さい組が尾根線線

2

4)()( 21

22020

1

aaaaa

)4)()(,2( 21

2202011

aaaaaanormalized 　

主曲率 :

曲線方向 :

2

4)()( 21

22020

2

aaaaa

)4)()(,2( 21

2202012


主曲率 :

曲線方向 :

山は主曲率が負、谷は主曲率が正山は主曲率が負、谷は主曲率が正

x

y

Imagire Day

2.3.2 2.3.2 放物面の主曲率・曲線方向放物面の主曲率・曲線方向

放物線 :

5432

212


2

4)()( 21

22020

1

aaaaa

)4)()(,2( 21

2202011


主曲率 :

曲線方向 :

2

4)()( 21

22020

2

aaaaa

)4)()(,2( 21

2202012


主曲率 :

曲線方向 :

主曲率の絶対値の小さい組 :

sds

,

主曲率の絶対値の大きい組 :

ldl

,

x

y

ls

sd

ld

Imagire Day



グ



Imagire Day

2.4 2.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

sd

l

d

Imagire Day

2.42.4 色の補正係数色の補正係数 (2/5)(2/5)









S を乗算

Imagire Day

2.4 2.4 色の補正係数色の補正係数 (3/5)(3/5)






c

)0.0}),2//{(0.1max( 　LineWidthdSd


sd

l

d



Sd

d{LineWidth / 2}

),(dotl

dcd

Imagire Day

2.4 2.4 色の補正係数色の補正係数 (4/5)(4/5)






)0.1,0.0,(clampminmax

min 　　CC

CS l

C



ls



SC

|αl|Cmin Cmax

Imagire Day

2.4 2.4 色の補正係数色の補正係数 (5/5)(5/5)






)0.1,0.0,(clampminmax

min 　　CC

CS l

C





S を乗算

Imagire Day

2.5 2.5 まとめ・考察まとめ・考察 (1/2)(1/2)

• まとめ

1. 各ピクセルで、近傍の色情報の放物面近似によって自分が山・谷に居るのかを判断山に居る場合は色を明るく、谷に居る場合は色を暗く変化させる

2. 放物面の係数から、放物面の曲率や山・谷線方向といった付加情報を計算可能

3. 山・谷線に近いほど、また、曲面の曲率が大きいほど大きく色を変化させる

Imagire Day

2.5 2.5 まとめ・考察まとめ・考察 (2/2)(2/2)

• 考察

1. 山・谷の区別だけではなく、曲率や山・谷線方向を導出し、レンダリングに反映させている点は面白い

2. 現在は二次元処理なので、三次元情報を上手く利用すれば、結果の向上が図れるかも

3. 近傍の色情報の放物面近似は、 SSAOやトーンマップにも応用可能かも

Imagire Day





Imagire Day

3 3 発表のまとめ発表のまとめ

• 紹介論文 :

　 Line Drawing via Abstracted Shading

[Lee et al. SIGGRAPH 2007]

Imagire Day

3 3 発表のまとめ発表のまとめ

著作権について

本スライド内で引用した論文の図・動画の著作権は全て論文著者に帰属します

その他の図・スライド本体・挿絵等の著作権は

株式会社シリコンスタジオに帰属します

Imagire Day

最後に最後に

御清聴ありがとうございました

Imagire Day

本セッションの流れ本セッションの流れ

後半発表者：川瀬

前半発表者：田村

cedec 2009 imagire day 続・レンダリスト養成講座

Technology

cedec 2009　imagire day 続・レンダリスト養成講座