次世代 NPR の輪郭線表現に迫る︕

リアルタイムベクトルストローク⽣成⼿法
StrokeGen を徹底解剖
CEDEC2024 08.21
シリコンスタジオ株式会社
研究開発室
川⼝⿓樹

後⽇
資料公開
©Silicon Studio Corp., all rights reserved.

0

はじめに
川⼝

⿓樹 Tatsuki KAWAGUCHI

テクノロジー事業本部

技術統括部

研究開発室

2017年シリコンスタジオ株式会社に新卒⼊社
リアルタイムレンダリングにおける技術の研究開発に従事
CEDEC 2021 では「リアルタイムレイトレーシング時代を⽣き抜くためのデノイザー開発⼊⾨」を講演
近年は NPR の研究開発に携わり、中でも StrokeGen 技術の実⽤化に取り組んでいる©Silicon Studio Corp., all rights reserved.

2

0

StrokeGen とは論⽂
GPU-Driven Real-Time Mesh Contour Vectorization (EGSR 2022)[Wangziwei Jiang, Guiqing Li, Yongwei Nie, Chuhua Xian]
論⽂のプロトタイプ実装
StrokeGen: Realtime Contour Curve Generation

https://github.com/JiangWZW/Realtime-GPU-Contour-Curves-from-3D-Mesh••

既存のCPUベースオフライン⼿法よりも最⼤800倍⾼速• Pencil+4, Line Art, Freestyle, Active Strokes
FHD 描画で 300k△ を 1ms で処理

StrokeGen はゲーム NPR における新しい⼿法となり得るのか︖
Generated strokes with different colors.
©Silicon Studio Corp., all rights reserved.

3

0

はじめに
1

輪郭線とは︖

2

StrokeGen 概要

3

StrokeGen アルゴリズム解説

4

StrokeGen 実装解説

5

デモ・結果紹介6©Silicon Studio Corp., all rights reserved.

課題と今後の展望
4

1

輪郭線とは︖
1

輪郭線とは︖

2

StrokeGen 概要

3

StrokeGen アルゴリズム解説

4

StrokeGen 実装解説

5

デモ・結果紹介6©Silicon Studio Corp., all rights reserved.

課題と今後の展望
5

1

輪郭線とは︖
輪郭線

輪郭線︖

Silhouette （シルエットライン）もたまにみる
輪郭線 ＝ Contour or Outline = アウトライン
同じ︖

輪郭線を取り巻く⽤語は⽂脈や現場でバラバラ
輪郭線︖

輪郭線?

イラストの線を指して「ここが輪郭線、ここはそれ以外の線」と分類できるようなものではない

StrokeGen の扱う (Mesh) Contour は後で定義するが講演の中で輪郭線を表す⽤語は明確に区別して扱わない©Silicon Studio Corp., all rights reserved.

6

1

輪郭線とは︖
Line

Edge

Stroke

ライン

エッジ

ストローク

あらゆる種類の線全般
直線、曲線、線分・・・線の意味で使うこともある
形状と関連している（辺、縁）線を描く⼀筋を表す
動きのニュアンスがある（筆跡）

本公演におけるベクトルストロークとは、輪郭線を構成する個々の線であり、始点から終点への繋がりを持った点列（ベクトルデータ）
パラメトリックな曲線ではない©Silicon Studio Corp., all rights reserved.

7

1

イラストにおける輪郭線
イラストにおいては輪郭線という⾔葉はあまり使わず、線だけの絵を線画と⾔いその中に輪郭やそれ以外の線が混在している
奥⾏き・明るさ・動きなど作者が表現したい効果を線画に仕込むテクニックがある（テクニックに限らず筆圧や⼿ぶれによって線画に味が付いている）
・線に強弱や⾊を付ける
・あえて形状を無視した線を描く©Silicon Studio Corp., all rights reserved.

均⼀な線は無機質な印象

時間的な整合性をつけるためのアニメの線画に近い

8

1

ゲームにおける輪郭線
Geometry-based（反転法・押し出し法・Inverted hull）

Image-based（Sobel fileter, Laplacian filter）

画像処理フィルタを利⽤して輪郭線を描画する⼿法
様々な種類の線を精細に描くことが出来るが、画⾯全体の効果なので期待する絵を得るための調整が効きにくい

裏返して拡⼤したメッ
シュを通常のメッシュに重ねることで輪郭線のように⾒せる⼿法
シンプルで利⽤しやす
いが、線が割れたり描けない線があったりと
制限も多い
その他

テクスチャ書き込み・ジオメトリ配置等

テクスチャやジオメトリなどの3Dシーンオブジェクトとして輪郭線を配置する⼿法©Silicon Studio Corp., all rights reserved.

これらの⼿法の利点・実装が容易・処理が⾼速・破綻が少ない

これらの⼿法の⽋点
・線幅の制御性が低い
・元々の形状に拘束される・⼿法ごと描画できない種類
の線がある
9

1

アニメの 3DCG における輪郭線
オフラインの輪郭線レンダリングはベクトルデータを扱うことができる
コンポの⼯程で線に多彩な演出を加える
そもそものアニメの線画が動きを考慮して演出は控えめ
フレーム単位で調整していいのであればイラストに近い線画も表現可能︖

PSOFT Pencil+ 4 for 3ds Max | PSOFT WEBSITE©Silicon Studio Corp., all rights reserved.

10

1

輪郭線の表現より⾃由な動き

StrokeGen
ゲーム

動きのある輪郭線

動かない

3DCG アニメ

イラスト

輪郭線の表現の⾃由度
低StrokeGen はゲームで使える輪郭線描画を
アニメやイラストの表現⼒に近づけることができる技術©Silicon Studio Corp., all rights reserved.

⾼

11

2

StrokeGen 概要
1

輪郭線とは︖

2

StrokeGen 概要

3

StrokeGen アルゴリズム解説

4

StrokeGen 実装解説

5

デモ・結果紹介6©Silicon Studio Corp., all rights reserved.

課題と今後の展望
122StrokeGen 概要
StrokeGen 論⽂の概要
GPU-Driven Real-Time Mesh Contour Vectorization (EGSR 2022)[Wangziwei Jiang, Guiqing Li , Yongwei Nie, Chuhua Xian]「3Dメッシュから輪郭線のベクトルストロークをリアルタイム⽣成するシステム」を提案
StrokeGen 論⽂の Contribution
ベクトル化の⼀連の処理をすべて GPU による並列化• CPU⇔GPU 間のデータのやりとりを無くすことで効率化• 繋がりを持つデータ構造の並列処理• Potrace の並列化
StrokeGen の描く輪郭線
ベクトルストロークなので 3DCG アニメの線に近しい⼿法＋リアルタイム
ベクトルストロークの描画⽅法は論⽂の内容ではない©Silicon Studio Corp., all rights reserved.

13

2

StrokeGen 概要 – 本公演について
本公演の動機リアルタイムベクトルストローク⽣成を実現したという⼿法に従来のゲームの輪郭線では為し得なかった表現の可能性と魅⼒を感じ
ここ1年ほど調査と検証を⾏った結果を本公演で紹介
本公演の概要• StrokeGen のアルゴリズム解説&結果紹介• StrokeGen へ⾏った改造実装の紹介• ベクトルストロークでどのような表現が可能か検討• StrokeGen の考察©Silicon Studio Corp., all rights reserved.

14

2

StrokeGen 概要 – StrokeGen の輪郭線

©Silicon Studio Corp., all rights reserved.

15

2

StrokeGen 概要 - 輪郭線の定義
メッシュの輪郭線（Mesh Contour）
ある視点から物体を⾒たとき、⼀つの辺を共有する⼆つの⾯が逆向きならばその辺は輪郭線（輪郭エッジ）である
輪郭線という⾔葉の広さと多少齟齬はあるが CG においてはわりと⼀般的な定義
押し出し法もこの定義における輪郭線を可視化していると⾒なせる
輪郭線
mesh contour

Hardware Support for Non-photorealistic Rendering [Raskar 2004]©Silicon Studio Corp., all rights reserved.

16

2

StrokeGen 概要
⼊⼒:
三⾓形メッシュPreprocessing

メッシュの隣接情報やジオメトリ情報を収集

出⼒:
ベクトルストローク

Rasaterization

輪郭エッジをラスタライズ

Vectorization

ラスタライズされた
ピクセル境界をトレース
してループをベクトル化

Stroke Generation
ベクトル化されたループからストロークを抽出

Stylization

ベクトルストロークを任意の⽅法で描画

毎フレーム処理©Silicon Studio Corp., all rights reserved.

17

3

StrokeGen アルゴリズム解説
1

輪郭線とは︖

2

StrokeGen 概要

3

StrokeGen アルゴリズム解説

4

StrokeGen 実装解説

5

デモ・結果紹介6©Silicon Studio Corp., all rights reserved.

課題と今後の展望18

3.1 必要なデータの収集

StrokeGen アルゴリズム解説 – 前処理

Preprocessing

Rasaterization

Vectorization

Stroke Generation

Stylization

⼊⼒︓輪郭線描画の対象とする（単⼀スタティック*1）メッシュ
出⼒︓各種データを収めた GPU バッファ実⾏時に⼀度だけ処理*2*3
基本的に Vertex/Index Buffer から取り出すだけ
隣接情報は⾃前で計算する必要がある
Mesh

VB / IBVp

頂点座標

3Dの頂点座標Tv

頂点
インデックス三⾓形を表す三つずつのイ
ンデックス

Ev

エッジ
インデックス

⼆つ組で⼀つのエッジを表すインデックス

Et

エッジ⾯
インデックス

⼀つのエッジに隣接する⼆⾯のインデッ
クス

Vn

頂点法線

3Dの頂点法線

Tn

⾯法線

3Dの⾯法線*1*2 公開されている StrokeGen の仕様。アルゴリズムの制約ではない*2 公開実装には Asset 化して使い回すような処理も確認できる（動作未検証）*1*3 動的更新への対応は後述©Silicon Studio Corp., all rights reserved.

19

3.1 輪郭エッジの抽出

StrokeGen アルゴリズム解説 – 前処理

Preprocessing

Rasaterization

Vectorization

Stroke Generation

Stylization

ビューポイントと法線から⾯の向きを計算
メッシュ輪郭線の定義から輪郭線を構成するエッジだけを取り出す（GPU で毎フレーム処理）
処理の対象を輪郭エッジだけにすることで以降の処理を⼤幅に軽減できる*1
Ev

エッジ
インデックス

⼆つ組で⼀つのエッジを表すインデックス

Et

エッジ⾯
インデックス

⼀つのエッジに隣接する⼆⾯のインデックス

Tn

⾯法線

3Dの⾯法線

Fo

⾯の向き

⾯の向きの
（01で表現）

Ce

輪郭
エッジ*

輪郭線を構成するエッジのインデックス".$程度になる [McGuire 2004]! に対して輪郭エッジの数は 𝑁!

*1 ⾯の数 𝑁

e.g., 10K tris -> 1.6K edges、100K tris -> 10K edges* 輪郭エッジのようなサイズが不定なデータは、
⼤きなバッファを⽤意して必要な量を毎フレーム計算して利⽤する©Silicon Studio Corp., all rights reserved.

20

3.2 輪郭エッジのラスタライズ
StrokeGen アルゴリズム解説 – ラスタライズ

Preprocessing

Rasaterization

Vectorization

Stroke Generation

Stylization

2パスの並列化 Bresenham を利⽤して輪郭エッジをラスタライズ
⼊⼒︓輪郭エッジ
出⼒︓輪郭フラグメントとジオメトリ属性
Fragment conting pass
• ラスタライズする輪郭エッジのフラグメントの数を数える
Fragment generation pass
• エッジの開始点・終点とフラグメント数からその座標を計算• 各フラグメントはそのジオメトリ属性等を保持• ピクセル座標、デプス、法線、エッジベクトル＊1 を補間
1. フラグメントの数を数える
開始点から終了点までの⻑さを解像度で分割
2. 得られたフラグメントの番号（ここでは0~7）で開始点終了点の位置を補間して座標を決める
3. 得られた座標がフラグメントのピクセル座標になる
元となるジオメトリの属性も取得する*1 エッジに隣接する⾯から、表向きの⾯の winding order（⾯を定義する頂点の順序）でエッジの向きを決める©Silicon Studio Corp., all rights reserved.

Ce 輪郭エッジ

Fa

輪郭線を構成するエッジのインデックス

ジオメトリ属性付きの輪郭フラグメント輪郭Frag＋属性

21

3.2 輪郭ピクセルの⽣成

StrokeGen アルゴリズム解説 – ラスタライズ

Preprocessing

Rasaterization

Vectorization

Stroke Generation

Stylization

輪郭エッジのラスタライズは可視性を考慮していない
⼊⼒︓輪郭フラグメント＋属性
出⼒︓可視の輪郭ピクセル
輪郭線の可視性は Challenging Problem• Two fast methods for high-quality line visibility [Cole 2010]• Computing smooth surface contours with accurate topology [Beʼnard 2014]
StrokeGen では Soft と Hard の2段階デプステストで可視性を評価
Fa

ラインの可視性について論じている⼀例
Two Fast Methods for High-Quality Line Visibility (princeton.edu)©Silicon Studio Corp., all rights reserved.

輪郭Frag＋属性

ジオメトリ属性付きの輪郭フラグメント

Cp

輪郭
ピクセル

可視の輪郭ピクセルの配列22

3.2 輪郭ピクセルの⽣成（可視判定）
StrokeGen アルゴリズム解説 – ラスタライズ

Preprocessing

Rasaterization

Vectorization

Stroke Generation

Stylization

Soft Depth-Test Pass
• シーンのデプスは事前に描画されているとする• 輪郭属性に保存したデプスとシーンのデプス（3x3）を⽐較• フラグメントが 3x3 デプスのうち⼆つ以上の前⾯にあるならテストをパス→ pseudo-visible fragment (pv-frag)Hardware Depth-Test Pass
• pv-frag を1ピクセルサイズの点としてラスタライズ描画• HW のデプステストで最前のもの⼀つだけが選ばれる• 輪郭属性の bit を⾊にエンコードして書き出す → GBuffer → 輪郭ピクセルバッファ©Silicon Studio Corp., all rights reserved.

23

3.2 ラスタライズ

StrokeGen アルゴリズム解説 – ラスタライズ

Preprocessing

Rasaterization©Silicon Studio Corp., all rights reserved.

Vectorization

Stroke Generation

Stylization24

3.3 輪郭ピクセルのベクトル化
StrokeGen アルゴリズム解説

Preprocessing

Rasaterization

Vectorization

Stroke Generation

輪郭線を形成するピクセル群（輪郭ピクセル）が得られている→ピクセル間の繋がりを求める
⼊⼒︓輪郭ピクセル
出⼒︓ピクセルエッジループ
ピクセルエッジ
ピクセル矩形に向き付きのエッジを定義したもの
⼆値画像のピクセルエッジを辿るとループになっている

Cp

輪郭
ピクセル

可視の輪郭ピクセルの配列Stylization

Pel

ピクセル
エッジループ

輪郭ピクセルを接続してできたループ

ピクセルエッジ

Contour Chaining• Potrace を並列化して Chaining Process に採⽤©Silicon Studio Corp., all rights reserved.

25

3.3 Potrace

StrokeGen アルゴリズム解説 – 輪郭ピクセルのベクトル化

Preprocessing

Rasaterization

Vectorization

Stroke Generation

Stylization

Potrace
Potrace: a polygon-based tracing algorithm [Selinger 2003]
Potrace (sourceforge.net)• ⼆値画像の境界をベクトル化するソフトウェア・⼿法• 2x2ピクセルのパターンに当てはめて近傍ピクセルエッジ同⼠の繋がりを求める

Portace の図例©Silicon Studio Corp., all rights reserved.

26

3.3 並列化 Potrace

StrokeGen アルゴリズム解説 – 輪郭ピクセルのベクトル化

Preprocessing

Rasaterization

Vectorization

Stroke Generation

Stylization

並列化 Potrace（この論⽂が提案する⼿法）• 個々の輪郭ピクセルを並列に 3x3（2x2 を四つ）範囲を⾒て処理する• 最終的にすべてのピクセルエッジについてその前後の接続情報が得られる• 繋がりを辿るとループになっている（ピクセルエッジループ）• ピクセルのリスト→エッジのリスト•

元々の Potrace はカーブフィッティングなども含むが、StrokeGen はあくまで inspired としてループの作成まで
2x2のピクセルエッジパターン（16種）©Silicon Studio Corp., all rights reserved.

27

3.3 Potrace

StrokeGen アルゴリズム解説 – 輪郭ピクセルのベクトル化

Preprocessing

Rasaterization©Silicon Studio Corp., all rights reserved.

Vectorization

Stroke Generation

Stylization29

3.3 シリアライズ

StrokeGen アルゴリズム解説– 輪郭ピクセルのベクトル化

Preprocessing

Rasaterization

Vectorization

Stroke Generation

Stylization

Potrace によって得られたピクセルエッジは、前後情報を辿ればループを為すが、接続順に関する情報がないため描画に使えるベクトルデータとはいえない→ピクセルエッジループをリニアな（接続したエッジ同⼠が連続した）配列に整列したい
Edge loop flatting（シリアライズ）• バラバラな列（循環リンクリスト）をランキングする（順番に並び替える）問題• 逐次処理は簡単だが並列化は複雑（Parallel List Ranking Problem*1）• StrokeGen では問題解決を Loop breaking と List Ranking の⼆処理で⾏う*1 The Complexity of Parallel Computations [Wyllie 1979] で提起されたリンクリストにおける各ノードのランク割り当てを並列に⾏う問題
リストの先頭ほど⼩さいランクをもつように割り振る©Silicon Studio Corp., all rights reserved.

30

3.3 リストランキング

StrokeGen アルゴリズム解説– 輪郭ピクセルのベクトル化

Preprocessing

Rasaterization

Vectorization

Stroke Generation

Stylization

Wyllieʼs algorithm（Parallel List Ranking）• 接続関係があるノード列に並列処理で番号を割り振る⼿法• Pointer jumping ともいう
• 反復処理で接続関係を次→次の次→次の次の次→…とポインタをジャンプするように繋ぎ直しながらランクを更新して⾏く• StrokeGen ではシードの割り振りとランキングの⼆つに使う• Wyllie の⼿法以降、より効率的な⼿法も提案されているがここでは⼤元のシンプルな⼿法が採⽤されている

ReMiMo93.pdf (cmu.edu)©Silicon Studio Corp., all rights reserved.

31

3.3 リストランキング

StrokeGen アルゴリズム解説 – 輪郭ピクセルのベクトル化

Preprocessing

Rasaterization

Vectorization

Stroke Generation

Stylization

Loop breaking（シードの割り振り）• ピクセルエッジループ中のシード（ループの切れ⽬）を⾒つける処理• ID*1 が最⼤のピクセルエッジをループの先頭とする• Wyllieʼs algorithm をループ内で最⼤の ID の探索に利⽤＊2
List ranking• Wyllieʼs algorithm で循環リンクリストをランク付けする• ランク順で並び替えたエッジループの循環リンクリストを新たに作る• ⼀つのリニアな配列に複数のシリアライズされたループが並ぶ*1 スクリーンスペースでユニークな ID（モートンコード）を各ピクセルエッジに割り振る*2 循環リストに対する Pointer jumping の過程でランクを加算する代わりに ID を max で更新すると、ループ全体にループ中最⼤の ID が割り振られる。
その最⼤ ID と元の ID が⼀致するピクセルを開始点として選ぶ©Silicon Studio Corp., all rights reserved.

32

3.3 Loop breaking

StrokeGen アルゴリズム解説– 輪郭ピクセルのベクトル化

1

4

5

2

3

10

4

5

5

3

10

10

7

9

0

8

6

ノード毎に適当にユニークな値を割り振る

9

9

8

8

6

後続ノードの値と Max をとり、その後続ノードへ繋
ぎ直す

5

5

10

10

10

10

9

9

8

8

6

10

10

10

10

10

10

9

9

8

10

10

10

10

10

10

©Silicon Studio Corp., all rights reserved.

10

10

10

10

10

10

10

末尾情報の無いループなのでずっと繋ぎ直し続ける

開始時の値と、最終的に割り振られた値を⽐較して、同じ値ならそこがループ中
最⼤の値

33

3.3 リストランキング

StrokeGen アルゴリズム解説– 輪郭ピクセルのベクトル化

1

2

1

2

1

2

1

2

1

2

1

2

1

2

1

2

1

2

1

2

1

1

4

4

4

4

4

4

4

4

3

2

1

8

8

8

8

7

6

5

4

3

2

1

11

10

9

8

7

6

5

4

3

2

1

©Silicon Studio Corp., all rights reserved.

各ノードのランクを1で初期化する

後続ノードのランクを加算して、その後続ノードへ繋ぎ直す
末尾（ここではループのシード）なら繋ぎ直しはしない

34

3.3 リストランキング＆シリアライズ
StrokeGen アルゴリズム解説 – 輪郭ピクセルのベクトル化

Preprocessing

Rasaterization

Loop breaking のための ID©Silicon Studio Corp., all rights reserved.

Vectorization

Stroke Generation

Stylization

Loop breaking でシードを⾒つける

35

3.3 リストランキング＆シリアライズ
StrokeGen アルゴリズム解説 – 輪郭ピクセルのベクトル化

Preprocessing

Rasaterization

リストランキング©Silicon Studio Corp., all rights reserved.

Vectorization

Stroke Generation

Stylization

シリアライズされた点を結ぶ

36

3.4 ベクトルストロークの⽣成
StrokeGen アルゴリズム解説

Preprocessing

Rasaterization

Vectorization

Stroke Generation

Stylization

シリアライズされたピクセルエッジループが得られている→描画するストロークを⽣成する
フィルタリング• エッジループへ1次元の畳み込みとして空間フィルタを適⽤• ラスタライズによってガタついた点列を均す効果がある（⾓も取れてしまう）
フィッティング• ループの局所的な形状で曲線フィッティングを⾏い各点における接線ベクトルを推定
カリング• エッジループの中からストロークとして不要な部分を削除する
セグメンテーション• Segmented scan で改めて描画するためのベクトルストロークを抽出する©Silicon Studio Corp., all rights reserved.

37

3.4 ベクトルストロークの⽣成
StrokeGen アルゴリズム解説

Preprocessing••

Rasaterization

Vectorization

Stroke Generation

Stylization

Potrace は領域境界をベクトル化する⼿法なので、ピクセルエッジループは輪郭線に対して両側（⼆重）の線を⽰す
ピクセルエッジはループになっているが、輪郭線は必ずしもループではない

現在得られているピクセルエッジループは描画するべき輪郭線になっていない↓
描画するためのストロークを⽣成する••

期待する輪郭線に対応するピクセルエッジを選ぶ
可視性の変化する（線が交差したり途切れたりする）
箇所をストロークの開始終了にする
⿊の線をベクトル化したいのにラスタライズの内外にそれぞれループが得られている©Silicon Studio Corp., all rights reserved.

38

3.4 オリエンテーションカリング

StrokeGen アルゴリズム解説 – ベクトルストロークの⽣成

Preprocessing

Rasaterization

Vectorization

Stroke Generation

Stylization

輪郭線に対して⼆重になっている線から、描画するための⼀本のストロークを抽出する
⼊⼒︓ピクセルエッジループ
出⼒︓ストロークセグメント*1
Orientation culling• フィッティングで推定したループの向き（接線ベクトル）と輪郭ピクセルの向き（エッジベクトル）で不要な点を削除• 注⽬点とその周囲数点で向きが⼀致するものを採⽤していく• ちょうど可視性が変化する点でストロークが途切れる• 論⽂が提案するヒューリスティックな⽅法*1 ストロークごとにセグメント化（配列にデータの境界を表す情報が付随）された輪郭線データ＝ベクトルストロークセグメントの区切りと座標からなる⼀次元の配列で表現される©Silicon Studio Corp., all rights reserved.

39

3.4 セグメンテーション

StrokeGen アルゴリズム解説 – ベクトルストロークの⽣成

Preprocessing

Rasaterization

Vectorization

Stroke Generation

Stylization

Orientation culling で抽出された点列はピクセルエッジループの⼀部
ループの途切れる位置（もしくはループの開始点）をセグメント区切りとみなしてSegmentated scan*1 を⾏うと順序付きの点列が得られる→ベクトルストローク*1 ⼊⼒配列がセグメント化されているときに、各セグメントごとに Prefix sum（シーケンスをスキャンして加算していく演算）を⾏う処理
StrokeGen 中の実装は Efficient Parallel Scan Algorithms for GPUs [Sengupta 2008]

prefix sum: input numbers の値を先頭から順に加算した値©Silicon Studio Corp., all rights reserved.

Segmented scan:
flag がセグメントの区切り
セグメント毎の Prefix sum

40

3.4 ベクトルストロークの⽣成
StrokeGen アルゴリズム解説

Preprocessing

Rasaterization

Vectorization

Stroke Generation

Stylization

Simulator図

フィルタリング＋オリエンテーションカリング©Silicon Studio Corp., all rights reserved.

41

3.5 ストロークレンダリング
StrokeGen アルゴリズム解説

Preprocessing

Rasaterization

Vectorization

Stroke Generation

Stylization

ここまでで得られたベクトルストロークは繋がりを持った点列• 描画の⽅法は任意に実装可能
論⽂では点列からポリメッシュを⽣成してパス描画• 接線→法線として法線⽅向への押し出し量を線幅パラメータとして⽤意• UVは、押し出しした上下の位置からV、ストローク頂点の番号とストローク⻑からUを計算©Silicon Studio Corp., all rights reserved.

42

3.5 ストロークレンダリング
StrokeGen アルゴリズム解説

Preprocessing

Rasaterization

Vectorization

Stroke Generation

Stylization

ストロークとしてレンダリング©Silicon Studio Corp., all rights reserved.

43

4

StrokeGen 実装解説
1

輪郭線とは︖

2

StrokeGen 概要

3

StrokeGen アルゴリズム解説

4

StrokeGen 実装解説

5

デモ・結果紹介6©Silicon Studio Corp., all rights reserved.

課題と今後の展望44

4.1 仕様

StrokeGen 実装解説

StrokeGen

https://github.com/JiangWZW/Realtime-GPU-Contour-Curves-from-3D-Mesh

•
•
•
•

Unity Editor 2021.2.11f1
DirectX 12 & HLSL Shader Model 6.0*1
Universal RP 12.1.4
Third Party: Odin Inspector

使い⽅• カメラに Line Drawing Controle Panel、
輪郭を描画したいオブジェクトに Line Drawing Object、Render Feature に Contour Processor Feature をアサイン(公開されているプロジェクトは以上設定済み)• Game を Play すると輪郭線が描画される*1 Segmented scan の並列処理に Wave Intrinsics を利⽤している©Silicon Studio Corp., all rights reserved.

45

4.2 パラメータ
StrokeGen 実装解説

Line Drawing Controle Panel

ストロークライン描画︓ストロークを描画を有効化
Debug PDB ライン︓
（利⽤不可）Temporal coherence 最適化を有効化
ストロークサイズ︓ストロークの⼤きさにかかるスケール係数
ストローク幅︓ストロークの幅（画⾯⽔平⽅向）ストロークの⻑さと幅の間隔︓
ストロークの最⼩最⼤のスケール係数
実装では最⼩しか使われていない模様
デプスコントロールカーブ︓
深度に応じてスケール（線幅）を調整するためのカーブ
デプス区間︓
デプスコントロールカーブを評価する際の深度の最⼤最⼩値
ブラシのコントロールカーブ︓
ストロークのスケールを調整するためのカーブ
ストロークの位置でカーブを評価して⼊り抜きを調整できる
Orient Threshold︓
オリエンテーションカリング判定を調整する閾値

©Silicon Studio Corp., all rights reserved.

46

4.2 パラメータ
StrokeGen 実装解説

Line Drawing Controle Panel

Style︓描画スタイル
Segmentation︓ストロークのセグメントを可視化
UV︓ストロークのUVを可視化
Textured︓ストロークをブラシテクスチャで描画
ブラシテクスチャ︓ストロークの描画に使うブラシテクスチャ
Brush Count︓
ブラシの番号で乱数を変えてストロークのオフセットが変化する
多重にブラシを重ねる機能ではなさそう
Brush Stretching︓
ストロークに沿ったブラシテクスチャの伸縮の調整
ブラシリンクジャンプ回数︓
Pointer jumping のイテレーション回数
Debug Output︓デバッグ表⽰
Camera Target︓最終的な描画結果
Debug Texture 0,1︓
シェーダ中で該当するマクロを有効化するとデバッグ情報を可視化できる
Contour GBuffer︓輪郭線のジオメトリアトリビュート可視化©Silicon Studio Corp., all rights reserved.

47

4.3 応⽤実装StrokeGen 実装解説

以上が論⽂のアルゴリズムの内容
実際に StrokeGen のプロジェクトを動かし、いくつかの改造を⾏ったのでその紹介
1.
2.
3.
4.
5.
6.

Odin Inspector 依存の解消
アニメーションへの対応
メッシュ毎のパラメータ
Crease Edge への対応
スタンプ描画
ストロークレンダリング表現の追加©Silicon Studio Corp., all rights reserved.

51

4.3 Odin Inspector 依存の解消
StrokeGen 実装解説 – 応⽤実装StrokeGen は Odin Inspector を利⽤している
Odin Inspector and Serializer | Improve your workflow in Unity
UI (Inspector) 拡張の有料プラグイン
パラメータの注釈等に活⽤しているだけでアルゴリズム⾃体に関わるものではない
主に C# Attribute を使った Custom Inspector の機能を利⽤しているので、該当箇所を消していけばパラメータ調整が⾯倒にはなるが動作するようになる
今回は Odin Inspector を模倣した⾃作の Custom Inspector を実装した// [Title(“描边几何算法”)] // Odin
[MyTitle(“ストロークジオメトリのアルゴリズム”)] // 自作
public (int value, int propid) RenderPass =>(ContourRenderingPass.RenderBrushPathPass,
Shader.PropertyToID("_RenderMode"));©Silicon Studio Corp., all rights reserved.

52

4.3 スタンプ描画

StrokeGen 実装解説 – 応⽤実装ストロークをイラストソフトにあるようなスタンプブラシへ対応（公開されている実装に⼀部やろうとしているコードがあったのでそれを修正）
点列からクアッドメッシュを⽣成して描画• 線幅パラメータがそのままクアッドのサイズ• 幅とは別パラメータでストレッチしたクアッドも描画可能• UVは四⾓形上にそのまま定義される• ストロークの⽅向に合わせてスタンプを回転するかどうかのレーキ設定も⽤意元々あったパス描画©Silicon Studio Corp., all rights reserved.

53

4.3 アニメーションへの対応
StrokeGen 実装解説 – 応⽤実装公開されている StrokeGen はシングルスタティックメッシュのみサポート
アルゴリズム上の制限ではないのでキャラクターアニメーションに対応するように改造••

親オブジェクトを指定すると以下の⼦メッシュも全て対象にする• Preprocess で複数メッシュから各種データを収集• 全てのメッシュのデータは⼀つの⼤きなバッファに順次格納
SkinnedMeshRenderer の VertexBuffer から情報を動的に ComputeShader で更新• トポロジーが変わるようなアニメーションでなければ、頂点座標と法線のみ更新

dynamic

Skin Mesh

Mesh
Mesh
Mesh

Vp

頂点座標

dynamic

Tv

頂点
インデックスEv

エッジ
インデックスEt

エッジ⾯
インデックスVn

頂点法線

dynamic

Tn

⾯法線

preprocess
VB / IB©Silicon Studio Corp., all rights reserved.

54

4.3 メッシュ毎のパラメータ
StrokeGen 実装解説 – 応⽤実装

複数メッシュ対応に併せて、メッシュ毎に異なるパラメータを適⽤できるように改造
ラスタライズ時の属性情報にメッシュの ID を付与して、ストロークレンダリング時にメッシュの ID から対応するパラメータにアクセスする©Silicon Studio Corp., all rights reserved.

55

4.3 Crease Edge への対応
StrokeGen 実装解説 – 応⽤実装StrokeGen の輪郭線の定義にはクリースエッジが含まれない
Crease Edge
オブジェクトの内側における折り⽬になっている線
⼀つの辺を共有する⼆つの⾯のなす⾓度が閾値以下のとき Crease とする
閾値はユーザーパラメータとして⽤意対象となるエッジが決まれば輪郭エッジに混ぜて処理できる
同じようにマテリアル境界のエッジを対象とすることで境界線描画にも対応
クリース

𝜙 < threshold©Silicon Studio Corp., all rights reserved.

56

4.3 ストロークレンダリング表現の追加
StrokeGen 実装解説 – 応⽤実装

ベクトルストロークならでは表現を作成（デモ・結果の中で紹介）
•
•
•
•
•
•

ストロークへのテクスチャマッピング
⾊や線幅の制御
元の形状からズレた線の描画
ストローク単体の表現
光源に応答するような表現
動きに応答するような表現©Silicon Studio Corp., all rights reserved.

57

5

デモ・結果紹介1

輪郭線とは︖

2

StrokeGen 概要

3

StrokeGen アルゴリズム解説

4

StrokeGen 実装解説

5

デモ・結果紹介6©Silicon Studio Corp., all rights reserved.

課題と今後の展望
58

5

デモ・結果紹介

利⽤アセットについて・ユニティちゃん（© Unity Technologies Japan/UCL）UNITY-CHAN! OFFICIAL WEBSITE・ミライ⼩町（法⼈による学術発表・技術研究⽤途）
ミライ⼩町 Mirai Komachi Official Page

©Silicon Studio Corp., all rights reserved.

595.1 結果紹介
デモ・結果紹介

StrokeGen の結果（デフォルト）©Silicon Studio Corp., all rights reserved.

60

5.1 結果紹介
デモ・結果紹介

StrokeGen の結果（アニメーション）©Silicon Studio Corp., all rights reserved.

61

5.1 結果紹介
デモ・結果紹介

StrokeGen の結果（アニメーション）+改良

線の対象をマテリアルの境界に変えるなどの調整で安定性を向上させるテスト
元の StrokeGen の輪郭線の定義ではなくまだ検証段階©Silicon Studio Corp., all rights reserved.

62

5.1 結果紹介
デモ・結果紹介

パス・スタンプテクスチャマッピング

マテリアルの境界のエッジにテクスチャマッピング
パス（上）とスタンプ（下）©Silicon Studio Corp., all rights reserved.

635.1 結果紹介
デモ・結果紹介

線のゆらぎ・多重線

線のゆらぎやラフスケッチ⾵の表現
細かい形状の制御が難しくアニメーションに適⽤したときのちらつきも激しいが、ゲーム輪郭線の従来法には難しい元々の形状を逸脱した線が容易に得られる©Silicon Studio Corp., all rights reserved.

645.1 結果紹介
デモ・結果紹介

ピクセルレベルの線幅制御・太い線

2px

10px

©Silicon Studio Corp., all rights reserved.

従来法（特にポストプロセス）が苦⼿な太い線もピクセルレベルで調節可能
太いストロークのデプス処理が⽢いので⾃⾝のメッシュとの判定によるちらつきが多少ある
65

5.1 結果紹介
デモ・結果紹介

線幅による線画の味付け
曲率で線幅を制御するカーブ
参考⼿書き
均⼀な線

線幅マップ
©Silicon Studio Corp., all rights reserved.

線幅を制御するテクスチャや曲率に基づいてイラストのような線を演出
曲率は複雑な形状で潰れやすく制御が難しい
テクスチャ（や頂点カラー）での線幅制御は従来法でもよく⽤いられるため技術を転⽤しやすい
66

5.1 結果紹介
デモ・結果紹介

アウトラインのみで描く表現

草むらや髪の⽑の房をストロークレンダリングで表現
現状の StrokeGen は⼀本の線を描くのが苦⼿なので、無理⽮理板ポリを置くような感じで実装
線をジオメトリやテクスチャなどの配置物で表現する従来法にストローク表現を統合できる可能性がある©Silicon Studio Corp., all rights reserved.

675.1 結果紹介
デモ・結果紹介

光源に応答する表現

線にライティングの効果を施す演出（左2つ）画⾯右上に光源を置き、光が当たるところは⾊味があり線が細くなる演出（右）リムライトをストロークで描画©Silicon Studio Corp., all rights reserved.

685.1 結果紹介
デモ・結果紹介

モーションに応答する表現

モーションベクトルに基づいてストロークにゆがみ効果を与えると、いわゆるおばけブラー（Smear frame）の表現ができる
複雑な形状では綺麗に出にくく、位置や形状の制御も難しいが従来法では困難な表現©Silicon Studio Corp., all rights reserved.

695.1 結果紹介
デモ・結果紹介

ベクトルストロークならでは表現を作成
•
•
•
•
•
•

ストロークへのテクスチャマッピング
⾊や線幅の制御
元の形状からズレた線の描画
ストローク単体の表現
光源に応答するような表現
動きに応答するような表現

従来法でも⼯夫次第で可能な表現もあるが、ベクトルストロークであることで可能な表現が（今回実装した以外にも）多彩にある線を線として独⽴したパラメータ群として実装・調整できるのも利点
StrokeGen の本質はストローク⽣成だが実⽤化を考えるとどんな表現ができるかが重要
今回はアーティストを挟んでいないのでまだまだ可能性を秘めている©Silicon Studio Corp., all rights reserved.

70

5.2 パフォーマンス
デモ・結果紹介

論⽂中のパフォーマンス評価
Intel i7-7700HQ 2.8 GHz of 8 GB RAM
NVIDIA GTX 1070
1980x1080

Rastarization と Vectorization+StrokeGeneration に分けてパフォーマンスを計測
Rastarization は複雑な形状（輪郭線が多くなる）やメッシュ⾃体の⼤きさに左右される
Vectorization+StrokeGeneration の⽅が重い
全体を通してリアルタイムレンダリングのバジェットに収まる程度©Silicon Studio Corp., all rights reserved.

71

5.2 パフォーマンス
デモ・結果紹介

論⽂中のパフォーマンス評価

アルゴリズムを解説してきた通り処理は⾮常に多く本当にリアルタイムに適しているのか怪しく感じるが、輪郭の疎性によるパフォーマンスのメリットが⼤きいと論⽂中で説明されている
メッシュ全体のエッジの内、輪郭エッジはたかだか数%で、最終的に処理の中⼼になる輪郭ピクセルはレンダリング画素中たった4%程度しかない©Silicon Studio Corp., all rights reserved.

72

5.2 パフォーマンス
デモ・結果紹介

実際に動かしてみたパフォーマンス
AMD Ryzen 7 4800H 2.9 GHz
of 16 GB RAM
NVIDIA RTX 2060 (Laptop)
1980x1080
Update_VpVnTn_List (0.91ms):- Preprocess (アニメーション対応)
Contour Stylization (0.64ms):- Vectorization + Stroke Generation
Stamp Generation (0.04ms):- Rastarization
Segmentation for Contour Orient
Defragment (0.04ms):- Stroke Generation
Generate Contour Polygons(0.02ms):- Stylization
Contour Defragment after Oriennt
Culling (0.01ms):- Stroke Generation
Total 1.66ms©Silicon Studio Corp., all rights reserved.

73

5.2 パフォーマンス
デモ・結果紹介

実際に動かしてみたパフォーマンス
AMD Ryzen 7 4800H 2.9 GHz
of 16 GB RAM
NVIDIA RTX 2060 (Laptop)
1980x1080

RenderDocでの解析

with Texture©Silicon Studio Corp., all rights reserved.

74

5.2 パフォーマンス考察
デモ・結果紹介•

全体を通してリアルタイムレンダリングの処理として⼗分な速度が得られている
必要なエッジのみに絞って処理を⾏うこと、Indirect 命令で動的に処理量を制御していることなどが貢献している•アニメーション対応の最適化が不⼗分
元々のシングルスタティックメッシュの実装をあまり破壊しないように組み込むために、
複数メッシュを⼀つの⼤きなバッファで管理するようにしたことがよくないと考えられる•ストロークの太さやテクスチャマッピングよるパフォーマンスへの影響はあまり⾒られない•

プロファイラには現れないが事前処理のせいで起動が遅い（Play から動き出すまで数秒）
事前処理結果を保存して使い回せる仕組みが必要•

もっと複雑で規模の⼤きなシーンでどのような結果になるかはさらなる検証が必要
⼿法⾃体を⼤規模なシーンへ適⽤できるように拡張する必要がある©Silicon Studio Corp., all rights reserved.

75

6

課題と今後の展望
1

輪郭線とは︖

2

StrokeGen 概要

3

StrokeGen アルゴリズム解説

4

StrokeGen 実装解説

5

デモ・結果紹介6©Silicon Studio Corp., all rights reserved.

課題と今後の展望
76

6

課題と今後の展望

StrokeGen はゲーム NPR における新しい⼿法となり得るのか︖
従来のリアルタイム⼿法では為し得なかった表現が可能になり⾮常に期待が持てる⼿法
但し、実⽤化には課題も多いのでそのまま従来の⼿法に代替するものではない
特に時間的な安定性は⼤きな課題
StrokeGen そのものの安定性の課題とスタイライズ表現の時間的⼀貫性の課題がある
⼤規模なシーンへの適⽤はまだ達成していないため、キャラクターと背景で従来法と共存して使い分けるような仕組みを考えなければならない©Silicon Studio Corp., all rights reserved.

77

0フレーム1フレーム2フレーム6.1 StrokeGen の時間的安定性
課題と今後の展望

StrokeGen は時間的な安定性が低い（僅かな形状の変化で結果が変化しやすい）
StrokeGen の採⽤しているアルゴリズムの中核技術である Potrace が⼀つの要因
Potrace は⼆値領域の境界線をベクトル化するアルゴリズム
StrokeGen ではラスタライズしたエッジを Potrace の⼊⼒にしており、輪郭線の境界線をベクトル化することで、⼆重のベクトル輪郭線候補を得ている
最終的なストロークを決定するための Orientation Culling が不安定解決案
境界線ではなく線を線としてベクトル化する⼿法に置き換える
Orientation Culling を使わずに⼆重の境界線を解消する©Silicon Studio Corp., all rights reserved.

816.1 スタイライズ表現の時間的⼀貫性
課題と今後の展望

輪郭線は簡単にトポロジーが変化する
スタイライズ表現を時間的に⼀貫して描くことは⾮常に困難
均⼀な線やオブジェクトに固定された線の演出*1 ならば問題にはなりにくいが、⼊り抜きの位置やテクスチャマッピングの箇所が時間で適当に動いてチラついてしまう

StrokeGen における線の開始位置は可視性が変化する場所*2かループ中の適当な位置*3
解決案
フレーム間で線の変化を追跡して線の⾒た⽬の激しい変化を抑制する
線の Temporal Coherence に関する研究はいくつもあり、
StrokeGen への適⽤を調査する必要がある*1 頂点カラーやテクスチャに線の強弱の情報を埋め込むような⼿法を指す*2 線が途切れたり重なったりする場所*3 Loop breaking におけるモートンコードで決まる©Silicon Studio Corp., all rights reserved.

Temporally Coherent and ArtisticallyIntended Stylization of Feature Lines
Extracted from 3D Models [Cardona 2016]82

6.1 リアルタイムならではの時間的な課題
課題と今後の展望

StrokeGen は前述の⼿法⾃体の持つ不安定さに加え、リアルタイム⽤途であるため時間的に細かい調整ができない課題がある
ゲーム⽤途では⾃由なカメラに対して、意図した表現が安定して得られなければならない
細かすぎない粒度でアーティストの要求を反映する仕組みが必要（細かい演出が可能なカットシーンであってもフレーム単位の調整などはしたくない）

どのような表現を、どの程度の⾃由度で、どのような⽅法で調整できるべきか、
ツール的なアプローチも重要になってくる

ストロークの⾓度によって分断を⾏うことで、⼊り抜きの位置を固定しやすくする例©Silicon Studio Corp., all rights reserved.

マウスポインタの位置をガイドに⼊り抜きの位置を制御する例83

6.2 論⽂中の指摘
課題と今後の展望

ベクトル化処理がスクリーンスペースであるため、実際は繋がっていない細かい輪郭線が繋がったり、⾒えない部分で繋がっている線が途切れてしまう

StrokeGen

Pencil+4©Silicon Studio Corp., all rights reserved.

846.2 今後の展望
現在はどのように実⽤化できるかを研究開発中

本公演の動画・SS にも StrokeGen のアイディアをベースに再構築した新しい⼿法の結果が含まれる

アルゴリズム⾯の改善• 安定性の⼤幅な向上• 従来法との共存・置換• 更なる⾼速化（⼤規模シーンへの適⽤）

表現⾯の改善• アップスケーリング• アンチエイリアシング• ニーズの調査 → 表現の拡充• アートをサポートするためのツールとしての機能拡充

論⽂の著者もさらに発展させた⼿法を開発している模様（著者のXより。Blender上で動作させているようなのでゲーム⽤途からは離れているかも︖）

とても⾯⽩い技術なので今後の発展の動向に要注⽬︕©Silicon Studio Corp., all rights reserved.

86ブランドステートメント
私たちシリコンスタジオは、⾃社開発による数々のミドルウェア

ター開発、デジタルツインなどにおいてCG・ゲームエンジンが活を有し、CGの黎明期から今⽇に⾄るまでCG関連事業に取り組み、⽤され、成果を出し始めているところです。

技術⼒（Technology）、表現⼒（Art）、発想⼒（Ideas）の研鑽

また、5Gのような⾼速⼤容量で低遅延を実現するネットワーク環を積み重ねてきました。これら3つの⼒を⾼い次元で融合させ、境やクラウドの活⽤は、ゲーム、SNS、動画配信との融合や数千CGが持つ可能性を最⼤限に発揮させられること、それが私たちの⼈単位でのマルチプレイ、VR・AR・MRといったxRやメタバース

強みです。

をはじめとした新たなコミュニケーション⼿段を作り出し、今後もユーザーエクスペリエンス（UX）にさらなる変⾰をもたらすでコンピューターグラフィックス（CG）は無限の可能性を秘めてい

しょう。

ます。
映像・エンターテインメント分野では、AI活⽤やリアルタイムレ

私たちはCG業界をリードするソリューションプロバイダーとして、

イトレーシング、グローバルイルミネーションなどの⾰新的な技

技術⼒・表現⼒・発想⼒でこの変⾰に挑戦し続けることにより、術とデバイスの進化が表現の幅を拡げ、美しくリアリティ溢れる

ゲーム・エンターテインメント、⾮ゲーム・エンターテインメン

描画が深い臨場感をもたらしています。

トの産業分野を問わず、お客さまの課題解決はもちろん、付加価

⼀⽅、⾃動⾞、製造、⼟⽊・建築といった産業分野では、デジタ

値のあるアウトプットの提供をお約束いたします。

ルトランスフォーメーション（DX）への取り組みが進む中、⾃動運転や製品検査における機械学習向け教師データやシミュレー©Silicon Studio Corp., all rights reserved.

©Silicon Studio Corp., all rights reserved.