そろそろ輪郭線について見直しませんか？ / Reconsider line rendering.

2021/9/22 Gotanda.unity #20 のLTスライドです。

イベントURL：https://www.youtube.com/watch?v=cDUoBuTJeF8
Gotanda.unity：https://meetup.unity3d.jp/jp/communities/5

Transcript

1. そろそろ輪郭線について 見直しませんか？ by たけし 一部の画像はユニティちゃんライセンス 条項の元に提供されています 1
2. 自己紹介 奥屋 武志(たけし) okuya.waseda@gmail.com Twitter: @takeshi222273 早稲田大学 理工学術院 • 元・教員&研究員 • 博士(工学) 現在は某ゲーム会社に勤務 • 描画エンジニア、TAなど 開発歴 • OpenGL → XNA → DirectX 9,11 → Unity 5.2～ 2
3. 輪郭線は好きですか？ 3
4. 理想の輪郭線を描けてますか？ 4
5. 輪郭線ﾑｽﾞｶｼｲ • 線が出ない、出すぎる • 途切れる • 強弱 • 色 • … 歌川国芳『みかけハこハゐが とんだ いゝ人だ』 弘化4年（1847年） https://ja.wikipedia.org/wiki/歌川国芳 5
6. 先行研究：現在の主要な輪郭線の手法 3DCGの 輪郭線 映像 (非リアルタイム) Pencil+ https://www.psoft. co.jp/jp/product/pe ncil/unity/ ・・・ ゲーム (リアルタイム) 背面法 輪郭線 フィルタ ・・・ 6
7. 1.背面法 • モデルを拡大し、背面を線として描画する手法 手順1 各頂点を法線方向に移動し、 モデルを拡大 手順2 拡大したモデルを 背面のみ線色で描画 手順3 元のモデルを重ねて描画 7
8. 1.背面法の歴史 • 初出は2001~2年頃 • プログラマブルシェーダの黎明期であり、 初代XboxやDirectX 8を想定 初代Xbox https://en.wikipedia.org/ wiki/Xbox_(console) NVIDIA GeForce3 https://ascii.jp/elem/000/ 000/321/321392/2/ 8 Direct3D ShaderX: Vertex and Pixel Shader Tips and Tricks (Wordware Game Developer's Library), 2002
9. 1.背面法の特徴 強弱は得意 「折り目」や「面1枚」のモデルは苦手 9
10. 2.輪郭線フィルタ • 中間画像(G-buffer)に対して輪郭線検出フィルタを適用 • Sobelフィルタがよく用いられる 手順1 G-bufferを描画 （法線） 手順2 輪郭線検出フィルタを適用 （Sobelフィルタ） 手順3 結果を合成 10
11. 2.Sobelフィルタの歴史 • 3DCGでの応用は1990年の論文 • ここでG-bufferという言葉も登場！ Takafumi Saito and Tokiichiro Takahashi. 1990. Comprehensible rendering of 3-D shapes. SIGGRAPH Comput. Graph. 24, 4 (Aug. 1990), 197–206. DOI:https://doi.org/10.1145/97880.97901 11
12. 2.Sobelフィルタの歴史 その2 • Sobel氏曰く、初出は1968年 https://www.researchgate.net/publication/239398674_An_Isotropic_3x3_Image_Gradient_Operator 12
13. 1968年！？ • アポロ8号が月の有人周回に成功！ • 一方、当時のコンピュータは… ソ連 M-220 https://www.computer-museum.ru/english/m220.htm https://www.nasa.gov/mission_pages/apollo/ apollo-8.html https://www.nasa.gov/mission_pages/apollo/ missions/apollo8.html 13
14. 2.Sobelフィルタの特徴（解像度依存の問題） SD: 640×360 14
15. 2.Sobelフィルタの特徴（解像度依存の問題） Full HD: 1920×1080 15
16. 2.Sobelフィルタの特徴（解像度依存の問題） 4K: 3840×2160 16
17. 2.Sobelフィルタの特徴（解像度依存の問題） 8K: 7680×4320 17
18. そろそろ輪郭線について 見直しませんか？ 18
19. 実現したいこと • 任意の部位 • 任意の強弱 • 任意の色 歌川国芳『猫のけいこ』 天保12年（1841年） https://ja.wikipedia.org/wiki/歌川国芳 19
20. 現状と未来 現代のリアルタイムCG • Deferred全盛期 • 幾何処理は構成を見直し中 • 機械学習とレイトレはこれから ハードウェアが急激に発展しそう これからの輪郭線アプローチ • 幾何情報をより多く活用 • 機械学習 • レイトレーシング 20
21. 多種の情報を統合的に活用して輪郭線を描画 • G-buffer • 頂点とインデックス • マテリアル • 従来法は個別の情報利用。統合的な活用は意外となかった 3.幾何情報をより多く活用 × × × 21
22. 3.やってみた 奥屋武志，田中克明，坂井滋和，“ 3DCG における 画像処理と形状処理の併用によるリアルタイム輪郭線 描画”，芸術科学会論文誌Vol. 15, No. 2, pp. 75- 85,2016.6 22
23. 3.やってみた 23
24. 3.やってみた 24
25. 3.是非お試しを！ • GitHubにて公開中 • サンプルプロジェクト • https://github.com/takeshi-okuya/DeferredInkingSample • ライブラリ • https://github.com/takeshi-okuya/UnityDeferredInking • 近日中にUnity Package Manager対応したい・・・ 25
26. 3.まだまだ課題は多い • シェーダ内で頂点とインデックス情報を自由に参照できると改善できそう • DirectX直書きだと実装可能 • Untiyにこんな機能があると嬉しい • スキン変換の結果をStructuredBufferとして利用 • IndexBufferの個別指定 • SRPでマテリアル毎に前後処理 • Mesh or Primitive Shader • Unityさん、よろしくお願いします！ 26
27. まとめ • 現行の輪郭線アルゴリズムは、良くも悪くも枯れた手法 • ハードウェアの機能を活かすことで、複数のアプローチにて 発展の可能性あり • みんなで輪郭線界隈を盛り上げよう！ 27