OLM R&D祭 2022 10/19 タップ穴補正・作画トレースツール紹介 ＋”作画ツール”共同開発中！

デジタルアニメ制作は浸透してきましたが、紙デジタルの環境で制作しているスタジオは多いかと思います。この環境を支援する作画トレース、タップ穴補正ツールについて説明します。
また、現在東映アニメーション様と「作画ツール：SAKUGADO」を鋭意開発中です。SAKUGADOの技術情報も併せて紹介します。

Transcript

1. タップ穴補正・作画トレースツール紹介 ＋”作画ツール”共同開発中！ Marc Salvati 木下美紀 Arno In Wolde Lubke Tanguy Cesaratto 市川翔大 © OLM Digital, Inc. 1
2. OLM Peg Hole Stabilizer 作画用紙データのタップ穴の位置を自動で揃える © OLM Digital, Inc. 2
3. タップ穴補正ツールとは © OLM Digital, Inc. 3
4. 背景 • 高速スキャナ – オートフィード（自動給紙） – 同じサイズの紙でも微妙にサイズが変わる • バラバラのサイズで当然タップ穴がずれる • TVPaint – 既存のタップ穴補正機能 – 色々と要望あり © OLM Digital, Inc. 4
5. 現場からの要望 • TVPaintのタップ穴補正機能の問題解消 – 1枚目のサイズにトリミング • 1枚目より大きいものがトリミング • タップ穴がないタイムシートやカット袋をトリミング • 異なるサイズが混在すると大変 – タップ穴の位置（上下左右）を手動で指定 – 200枚以上だと処理ができない – ファイル名が連番じゃないと取り込まない • フォルダ指定でバッチ処理 • 他のアニメ会社と共有 – OLM Open Toolsでの公開 • 特殊ケースの対応 © OLM Digital, Inc. 5
6. 特殊ケース • 位置 – 上下混在 – 横 – 上下の余白のサイズのばらつき • 色 – 白や黒のタップ穴 • 紙の継ぎ足し © OLM Digital, Inc. 6
7. 特殊ケース • タップ穴に× • 回転あり • 穴が多い © OLM Digital, Inc. 7
8. 自動検出できるタップ穴 © OLM Digital, Inc. 8
9. アルゴリズム © OLM Digital, Inc. 9 スキャン ファイル 修正された 画像出力 タップ穴 検索 タップ穴 修正 90度回転 タップ穴が ない 見つけ た？ 一周 完成？ 条件緩 める？ 条件を 緩める
10. タップ穴検出 © OLM Digital, Inc. 10 上の部分を引き抜く グレースケール 二値化（Canny） 輪郭線検出 シェイプマッチング 入力のスキャン 前処理 ブラー、コントラスト
11. 条件を緩めるとは？ • 条件 ⇔ パラメーターリスト – 条件のリスト – 厳しいから緩いまで • 開発者が決める • パラメーター – 上の部分指定パラメーター（縦の何パーセント） – 前処理 • ブラー・コンロラストの強さ • OpenCV’s Canny のパラメーター – 輪郭検出パラメーター • OpenCVのfindContours とconvexHull – シェイプマッチング • OpenCVのmatchShapesのパラメーター • タップ穴の形のパラメータ（高さ、領域） – タップ穴同士の距離 © OLM Digital, Inc. 11
12. タップ穴修正 © OLM Digital, Inc. 12 スケール 回転 移動
13. タップ穴修正：スケール • •のタップ穴への最大距離に合わせる © OLM Digital, Inc. 13
14. タップ穴修正：回転 • 水平になるように回転 • スキャンの全体が入るようにリサイズ © OLM Digital, Inc. 14
15. タップ穴修正：移動 • •のタップ穴の全位置を平均計算 • スキャンを平均値にずらす • 移動の分スキャンのリサイズ © OLM Digital, Inc. 15
16. 速さ • タップ穴がない画像は2倍時間がかかる – 4回の回転 – 輪郭線が多い • ミスとは – タップ穴があるのに見つけられなかった – タップ穴がないのに見つけた © OLM Digital, Inc. 16 タップ穴のあり・無し処理 画像（枚/秒） エラー タップ穴ありの画像処理 4.97 2% タップ穴無しの画像処理 2.37 9%
17. ツール作成前後での違い • ツール作成前～30分 – TV Paintの補正機能を使用 – 1枚目のサイズにトリミングされる • 一番大きいサイズの画像をリネーム • 実行後元の順番に再リネーム – ファイル名が連番じゃないと取り込まない ⇒ ファイルのリネーム – 枚数が多すぎると処理ができない ⇒ 200枚前後に分けて作業 • ツール作成後～2-3分 – 全自動化 © OLM Digital, Inc. 17
18. 使い方 © OLM Digital, Inc. 18 • 入力先を指定 • 出力先を指定 • 出力画像のタップ穴の位置を指定 – 左・右・上・下 • 実行
19. 機能詳細 © OLM Digital, Inc. 19 • 再帰的にサブディレクトリも • 入力ファイル個別指定 • 言語 – 英語 – 日本語
20. まとめ • 作業時間が1/10に短縮 • OLM Open Toolsでリリース – すでにフィードバックをもらい修正 • 今後 – 特殊ケースへの対応 – ペーパーレスになったら不要になる？ © OLM Digital, Inc. 20
21. OLM Genga Cleaning スキャンデータの自動トレース © OLM Digital, Inc. 21
22. 原画とは • 鉛筆風 • ハッチング • 注釈 • デジタルの場合 – レイヤー分け可能 – 色分け可能 © OLM Digital, Inc. 22 ©Project Vanguard2019/Aichi Television 著作権の関係により 画像を掲載しておりません
23. 23 トレース 色塗り トレース作業 • 色塗りを可能にする – 線をなぞって描く • 必要な線のみ描く – 二値化+修正 • 領域を閉じる • 不要な情報消す • 時間がかかる – 自動でやりたい © OLM Digital, Inc. 著作権の関係により 画像を掲載しておりません
24. トレース作業 © OLM Digital, Inc. 24 最終結果～40分 著作権の関係により 画像を掲載しておりません
25. 原画の自動トレース ラフのクリーンアップ [2] © OLM Digital, Inc. 25 [1] Noris, Gioacchino, et al. "Topology-driven vectorization of clean line drawings." ACM Transactions on Graphics (TOG) 32.1 (2013): 1-11. [2] Simo-Serra, Edgar, et al. "Learning to simplify: fully convolutional networks for rough sketch cleanup." ACM Transactions on Graphics (TOG) 35.4 (2016): 1-11. ベクター化 [1]
26. 原画の自動トレース • ベクター化 – 作品のスタイルに依存しない – 修正可能 • 形 • 色 • 太さ – 修正ツールが必須 • AI – 作品ごとに再トレーニング • 許諾問題？ – 画像出力 – 解像度問題 – 最近AIでベクター化手法も・・・ © OLM Digital, Inc. 26
27. ベクター化手法 © OLM Digital, Inc. 27
28. フレームワーク © OLM Digital, Inc. 28 前処理 (半自動) 線画抽出 (自動) 後処理 (半自動) レンダリング (自動) 画像 画像 画像 ベクター化の グラフ ベクター化の グラフ
29. 前処理（半自動） • 原画を二値化 – 黒、赤、青、緑を原画での色を指定 – ガンマ補正 – 色相や彩度のしきい値を設定 • 色ごとにパラメータ調整可能 – 黒、赤、青、緑に変換 – 薄い線とハッチング排除 • リアルタイムにプレビュー © OLM Digital, Inc. 29 原画 しきい値 黒・赤・青・緑 に変換 ©Project Vanguard2019/Aichi Television 著作権の関係により 画像を掲載しておりません
30. 二値化 手法 • HSV空間で比較 – H、S、Vそれぞれの許容範囲 – 黒、赤、青、緑 の色ごとにパラメータを指定 • 許容範囲外 – 白 • 許容範囲内 – 緑、青、赤、黒に置き換える – 色線が優先！ © OLM Digital, Inc. 30 基準の色 色相の 許容範囲 彩度の 許容範囲 明度の 許容範囲
31. 線画抽出 a. 頂点候補の抽出 b. 頂点候補の移動 c. グラフの構築 d. グラフから線の再構築 © OLM Digital, Inc. 31 * Noris, Gioacchino, et al. "Topology-driven vectorization of clean line drawings." ACM Transactions on Graphics (TOG) 32.1 (2013): 1-11. *
32. 線画抽出の結果 © OLM Digital, Inc. 32 自動抽出の結果 < 5秒 修正しないといけないところ・・・ 手作業での抽出結果 ~40分 ©Project Vanguard2019/Aichi Television 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
33. グラフのスムージング © OLM Digital, Inc. 33 • 法線上を重心方向に動かす 適用前 適用後 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
34. 分岐点修復の実行例 © OLM Digital, Inc. 34 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
35. 今後 • スキャンからの二値化 – ゴミとり未実装 – スライダーがちょっと多い • ベクター化の新アルゴリズム – 数秒でも遅すぎ – 高速化 • 二値化前提 • 並列化・SIMD • 修正ツール – UIなどがまだ足りないところ • 作画のツールと合体する予定 © OLM Digital, Inc. 35 ©Project Vanguard2019/Aichi Television
36. SAKUGADO アニメ用の作画ソフト © OLM Digital, Inc. 36
37. 概要 • なぜまた作画ソフト？ • ロードマップ • テーマは効率 • SAKUGADOの実装 – ラスターとベクター – キャッシュの仕組み • 今後 © OLM Digital, Inc. 37
38. なぜまた？ © OLM Digital, Inc. 38
39. 描きソフトが多い • オープンソース・無償 – Krita – GIMP – OpenToonz – FireAlpaca • 商用 – CLIP STUDIO PAINT – TVPaint – Photoshop – Affinity – Harmony – CACANi – Sketchbook – RETAS STUDIO（アップデート無し） © OLM Digital, Inc. 39
40. 既存のソフトの問題 • 静止画を作るためのソフトが多い – 動画機能は途中追加 – アニメをターゲットとしていない • オープンソースの土台を使うのは難しい – 歴史が長いものほどカスタムしにくい • 自動化・スクリプトのサポートが少ない – パイプラインの実装がしにくい • ラスターとベクターが別物 – 混在させにくい • レイヤー・フレーム増やすと遅くなる – アニメ制作にフィットさせるとレイヤーが多くなる • それぞれの線の色 • 修正・作画監督など用のレイヤー – 4K/8Kの動画が難しそう © OLM Digital, Inc. 40
41. ロードマップ © OLM Digital, Inc. 41
42. アニメ制作の流れ © OLM Digital, Inc. 42 企画・シナリオ 絵コンテ 動画 レイアウト 美術 原画 仕上げ 撮影 編集 紙が多い デジタルが多い 作画 スキャン 移行しやすい
43. アニメ制作の流れ © OLM Digital, Inc. 43 企画・シナリオ 絵コンテ 動画 レイアウト 美術 原画 仕上げ 撮影 編集 紙が多い デジタルが多い 作画 スキャン 移行しやすい 最後の工程からが やりやすい
44. ロードマップ © OLM Digital, Inc. 44 仕上げ 動画 原画 シンプルな描き味 色塗り・パレット 線の編集 コア開発 動画用の描き味 タイムライン タイムシート オニオンスキン 原画用の描き味 スクリプト さらに スキャンのクリーニング 自動彩色 フレーム補間 美術 音のサポート MacOS・タブレット版 ペーパーレス可能
45. 最初の案 © OLM Digital, Inc. 45 既存のソフト （開発者・アーティスト） OpenToonz Krita CLIP STUDIO Sketchbook 開発 使うライブラリ OpenSourceのソフト プロトタイプ作成（勉強） ヒアリング 仕上げ 動画 原画 検証 準備 OpenSourceカスタム版 本開発 開発 プロトタイプ作成（設計） 開発 OpenToonz改訂版 本開発 フィードバックもとに テストとヒアリング
46. 最初の案 © OLM Digital, Inc. 46 既存のソフト （開発者・アーティスト） OpenToonz Krita CLIP STUDIO Sketchbook 開発 使うライブラリ OpenSourceのソフト プロトタイプ作成（勉強） ヒアリング 仕上げ 動画 原画 検証 準備 OpenSourceカスタム版 本開発 開発 プロトタイプ作成（設計） 開発 OpenToonz改訂版 本開発 フィードバックもとに テストとヒアリング
47. OpenToonz改訂版は諦め • 長い歴史 – Toonzの世代 – ジブリの世代 – OpenSource世代 ⇒APIが複雑 ⇒カスタムするのに時間がかかりすぎ • 開発者が本開発を優先したい © OLM Digital, Inc. 47
48. テーマは効率 © OLM Digital, Inc. 48
49. 効率 開発 現場 開発 現場 効率！ © OLM Digital, Inc. 49 早い 使いやすい メンテ しやすい コラボ しやすい アニメに 特化 スケール アップ可能
50. 使いやすい・アニメに特化 • 必要なものを作る – 作画スタッフの研修動画で勉強 – 常に現場のヒアリング • OLM • 他社とのコラボ • ラスター感覚 • 色をIDで管理 • パイプラインツール – Pythonスクリプト可能 • OS・言語対応 – Windows, Linux, Mac, iPad – 日本語、英語 © OLM Digital, Inc. 50 効率 開発 現場 開発 現場 早い 使いやすい メンテ しやすい コラボ しやすい アニメに 特化 スケール アップ可能
51. 早い・スケールアップ可能 • 数百枚のレイヤー・4K/8K対応 • レンダリングが早く – 並列化・SIMD – どうしても必要ならGPU • メモリ使用少なく – 最適なデータの構築 – ベクターデータ © OLM Digital, Inc. 51 効率 開発 現場 開発 現場 早い 使いやすい メンテ しやすい コラボ しやすい アニメに 特化 スケール アップ可能
52. メンテしやすい・コラボしやすい • メンテしやすい – できればGPUを使わない – シンプルなAPI • コア以外はメンテのしやすさ重視 – ライブラリ使用 • Qt、Immer、Imath、Catch • コラボしやすい – OLMのC++ガイドライン • ネーミングコンベンション • C++CoreGuidelinesベースに – Git、Jenkins、Trello、Doxygen+Sphynx © OLM Digital, Inc. 52 効率 開発 現場 開発 現場 早い 使いやすい メンテ しやすい コラボ しやすい アニメに 特化 スケール アップ可能
53. SAKUGADOの特徴のまとめ • 開発 – ベクターデータ – 色の管理はIDで – Pythonスクリプト – レンダリングが早く、メモリ使用少なく – GPUを使わない、シンプルなAPI • 現場 – ラスター感覚 – マニュアルがなくても使えるUI – 数百枚のレイヤー・4K/8K対応 – 常にヒアリング、目的を仕様にまとめる – 多OS対応、多言語対応 © OLM Digital, Inc. 53
54. SAKUGADOの特徴のまとめ • 開発 – ベクターデータ – 色の管理はIDで – Pythonスクリプト – レンダリングが早く、メモリ使用少なく – GPUを使わない、シンプルなAPI • 現場 – ラスター感覚 – マニュアルがなくても使えるUI – 数百枚のレイヤー・4K/8K対応 – 常にヒアリング、目的を仕様にまとめる – 多OS対応、多言語対応 © OLM Digital, Inc. 54 ハイブリッド
55. SAKUGADOの特徴のまとめ • 開発 – ベクターデータ – 色の管理はIDで – Pythonスクリプト – レンダリングが早く、メモリ使用少なく – GPUを使わない、シンプルなAPI • 現場 – ラスター感覚 – マニュアルがなくても使えるUI – 数百枚のレイヤー・4K/8K対応 – 常にヒアリング、目的を仕様にまとめる – 多OS対応、多言語対応 © OLM Digital, Inc. 55 キャッシュの仕組み
56. SAKUGADOの実装 © OLM Digital, Inc. 56
57. 社内と社外のコラボ • OLM Asia – 仕上げ作業 – CLIP STUDIOの使用経験 • 東映アニメーション様 – 作画のすべての工程 – 歴史が長い、経験者が多い – 社内開発の試みも – デジタルタイムシート © OLM Digital, Inc. 57
58. 概要 • ラスターとベクター • キャッシュの仕組み – 使い方 – データ形式 – 戦略 © OLM Digital, Inc. 58
59. ラスターとベクター © OLM Digital, Inc. 59
60. 典型的なラスターとベクター © OLM Digital, Inc. 60 入力 レンダリング結果
61. レンダリングの統一 © OLM Digital, Inc. 61 入力 レンダリング結果 状態
62. ハイブリッド © OLM Digital, Inc. 62 入力 レンダリング結果 状態
63. キャッシュの仕組み © OLM Digital, Inc. 65
64. キャッシュの必要性 • 作画のソフトとは動画のソフト • キャッシュの仕組みが必要 – 不要な再計算を防ぐ – 動画の結果を再生して見られるように • ラスターとベクターのハイブリッド – 実装に必要 • AE – 画像データ • Nuke – 画像データ – ViewerとPlayback – ノードの計算 • Maya – ノードの計算出力 – 2021からPlayback • Houdini – Cooking – シミュレーション – キャッシュノード © OLM Digital, Inc. 66
65. キャッシュの使い方 © OLM Digital, Inc. 67
66. キャッシュの使い方 © OLM Digital, Inc. 68 1万動作 レンダリング
67. キャッシュの使い方 © OLM Digital, Inc. 69 キャッシュ 1万動作 レンダリング
68. キャッシュの使い方 © OLM Digital, Inc. 70 キャッシュ 1万+1動作 動作 1万動作 レンダリング
69. キャッシュの使い方 © OLM Digital, Inc. 71 キャッシュ 1万+1動作 取り消し 1万動作 レンダリング
70. キャッシュの使い方 © OLM Digital, Inc. 72 キャッシュ 1万+1動作 やり直し 1万動作 レンダリング
71. キャッシュの使い方 © OLM Digital, Inc. 73 キャッシュ 1万+1動作 やり直し 1万動作 レンダリング 再 レンダリング 状態 カーブリスト
72. キャッシュの使い方 © OLM Digital, Inc. 74 キャッシュ 1万+1動作 やり直し 1万動作 レンダリング 読み込み レンダリング 結果
73. キャッシュの使い方 © OLM Digital, Inc. 75 キャッシュ 1万+1動作 やり直し 1万動作 レンダリング 動作の履歴 動作の再実行 レンダリング 結果
74. • 動作の履歴が必要 – 1万動作 ～10MB • キャッシュされるものは – レンダリング画像 – 状態 • キャッシュされるデータが大きい – 8k RGBA の画像 ～130MB – 1万動作、30フレーム ～200MB – データ形式を最適に • キャッシュをとる頻度が難しい – 動作毎・レイヤー毎・フレーム毎 のすべてとれない！ – 戦略が必要 まとめ © OLM Digital, Inc. 76
75. SAKUGADOのまとめ • 新しい挑戦 – 大規模のソフト – デジタル化に向けての仕様 • アニメのため – 手描きを大事に – 他社とコラボ • 実装をしっかり – 動画ソフトの仕様 – キャッシュの仕組み © OLM Digital, Inc. 87
76. 全体のまとめ • デジタル化を進めている – 一気には難しい – 移行期間が必須 • デジタル作画へ乗り換えるためのツール – OLM Peg Hole Stabilizer – OLM Genga Cleaning • デジタル作画のためのツール – SAKUGADO • 現場の声を聴きつつ、新しい提案しつつ、バランスをとる © OLM Digital, Inc. 88
77. ご清聴ありがとうございました © OLM Digital, Inc. 89 OLM Open Toolsが更新されました 公開してほしいツールがあれば、 ぜひアンケートにご協力ください