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

タップ穴補正・作画トレースツール紹介
＋”作画ツール”共同開発中！
Marc Salvati
木下美紀
Arno In Wolde Lubke
Tanguy Cesaratto
市川翔大
© OLM Digital, Inc. 1

View Slide

OLM Peg Hole Stabilizer
作画用紙データのタップ穴の位置を自動で揃える

View Slide

タップ穴補正ツールとは

View Slide

背景
• 高速スキャナ
– オートフィード（自動給紙）
– 同じサイズの紙でも微妙にサイズが変わる
• バラバラのサイズで当然タップ穴がずれる
• TVPaint
– 既存のタップ穴補正機能
– 色々と要望あり

View Slide

現場からの要望
• TVPaintのタップ穴補正機能の問題解消
– 1枚目のサイズにトリミング
• 1枚目より大きいものがトリミング
• タップ穴がないタイムシートやカット袋をトリミング
• 異なるサイズが混在すると大変
– タップ穴の位置（上下左右）を手動で指定
– 200枚以上だと処理ができない
– ファイル名が連番じゃないと取り込まない
• フォルダ指定でバッチ処理
• 他のアニメ会社と共有
– OLM Open Toolsでの公開
• 特殊ケースの対応

View Slide

特殊ケース
• 位置
– 上下混在
– 横
– 上下の余白のサイズのばらつき
• 色
– 白や黒のタップ穴
• 紙の継ぎ足し

View Slide

特殊ケース
• タップ穴に×
• 回転あり
• 穴が多い

View Slide

自動検出できるタップ穴

View Slide

アルゴリズム
スキャン
ファイル
修正された
画像出力
タップ穴
検索
タップ穴
修正
90度回転
タップ穴が
ない
見つけ
た？
一周
完成？
条件緩
める？
条件を
緩める

View Slide

タップ穴検出
上の部分を引き抜く
グレースケール
二値化（Canny）
輪郭線検出
シェイプマッチング
入力のスキャン
前処理
ブラー、コントラスト

View Slide

条件を緩めるとは？
• 条件 ⇔ パラメーターリスト
– 条件のリスト
– 厳しいから緩いまで
• 開発者が決める
• パラメーター
– 上の部分指定パラメーター（縦の何パーセント）
– 前処理
• ブラー・コンロラストの強さ
• OpenCV’s Canny のパラメーター
– 輪郭検出パラメーター
• OpenCVのfindContours とconvexHull
– シェイプマッチング
• OpenCVのmatchShapesのパラメーター
• タップ穴の形のパラメータ（高さ、領域）
– タップ穴同士の距離

View Slide

タップ穴修正
スケール
回転
移動

View Slide

タップ穴修正：スケール
• ●のタップ穴への最大距離に合わせる

View Slide

タップ穴修正：回転
• 水平になるように回転
• スキャンの全体が入るようにリサイズ

View Slide

タップ穴修正：移動
• ●のタップ穴の全位置を平均計算
• スキャンを平均値にずらす
• 移動の分スキャンのリサイズ

View Slide

速さ
• タップ穴がない画像は2倍時間がかかる
– 4回の回転
– 輪郭線が多い
• ミスとは
– タップ穴があるのに見つけられなかった
– タップ穴がないのに見つけた
タップ穴のあり・無し処理画像（枚/秒）エラー
タップ穴ありの画像処理 4.97 2%
タップ穴無しの画像処理 2.37 9%

View Slide

ツール作成前後での違い
• ツール作成前～30分
– TV Paintの補正機能を使用
– 1枚目のサイズにトリミングされる
• 一番大きいサイズの画像をリネーム
• 実行後元の順番に再リネーム
– ファイル名が連番じゃないと取り込まない
⇒ ファイルのリネーム
– 枚数が多すぎると処理ができない
⇒ 200枚前後に分けて作業
• ツール作成後～2-3分
– 全自動化

View Slide

使い方
• 入力先を指定
• 出力先を指定
• 出力画像のタップ穴の位置を指定
– 左・右・上・下
• 実行

View Slide

機能詳細
• 再帰的にサブディレクトリも
• 入力ファイル個別指定
• 言語
– 英語
– 日本語

View Slide

まとめ
• 作業時間が1/10に短縮
• OLM Open Toolsでリリース
– すでにフィードバックをもらい修正
• 今後
– 特殊ケースへの対応
– ペーパーレスになったら不要になる？

View Slide

OLM Genga Cleaning
スキャンデータの自動トレース

View Slide

原画とは
• 鉛筆風
• ハッチング
• 注釈
• デジタルの場合
– レイヤー分け可能
– 色分け可能
©Project Vanguard2019/Aichi Television
著作権の関係により
画像を掲載しておりません

View Slide

23
トレース色塗り
トレース作業
• 色塗りを可能にする
– 線をなぞって描く
• 必要な線のみ描く
– 二値化+修正
• 領域を閉じる
• 不要な情報消す
• 時間がかかる
– 自動でやりたい
© OLM Digital, Inc.

View Slide

トレース作業
最終結果～40分

View Slide

原画の自動トレース
ラフのクリーンアップ
[2]
[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]

View Slide

原画の自動トレース
• ベクター化
– 作品のスタイルに依存しない
– 修正可能
• 形
• 色
• 太さ
– 修正ツールが必須
• AI
– 作品ごとに再トレーニング
• 許諾問題？
– 画像出力
– 解像度問題
– 最近AIでベクター化手法も・・・

View Slide

ベクター化手法

View Slide

フレームワーク
前処理
(半自動)
線画抽出
(自動)
後処理
(半自動)
レンダリング
(自動)
画像画像画像
ベクター化の
グラフ
ベクター化の
グラフ

View Slide

前処理（半自動）
• 原画を二値化
– 黒、赤、青、緑を原画での色を指定
– ガンマ補正
– 色相や彩度のしきい値を設定
• 色ごとにパラメータ調整可能
– 黒、赤、青、緑に変換
– 薄い線とハッチング排除
• リアルタイムにプレビュー
原画しきい値黒・赤・青・緑
に変換

View Slide

二値化手法
• HSV空間で比較
– H、S、Vそれぞれの許容範囲
– 黒、赤、青、緑の色ごとにパラメータを指定
• 許容範囲外
– 白
• 許容範囲内
– 緑、青、赤、黒に置き換える
– 色線が優先！
基準の色
色相の
許容範囲
彩度の
許容範囲
明度の
許容範囲

View Slide

線画抽出
a. 頂点候補の抽出
b. 頂点候補の移動
c. グラフの構築
d. グラフから線の再構築
* Noris, Gioacchino, et al. "Topology-driven vectorization of clean line drawings." ACM Transactions on Graphics (TOG) 32.1 (2013): 1-11.
*

View Slide

線画抽出の結果
自動抽出の結果 < 5秒
修正しないといけないところ・・・
手作業での抽出結果 ~40分

View Slide

グラフのスムージング
• 法線上を重心方向に動かす
適用前適用後

View Slide

分岐点修復の実行例

View Slide

今後
• スキャンからの二値化
– ゴミとり未実装
– スライダーがちょっと多い
• ベクター化の新アルゴリズム
– 数秒でも遅すぎ
– 高速化
• 二値化前提
• 並列化・SIMD
• 修正ツール
– UIなどがまだ足りないところ
• 作画のツールと合体する予定

View Slide

SAKUGADO
アニメ用の作画ソフト

View Slide

概要
• なぜまた作画ソフト？
• ロードマップ
• テーマは効率
• SAKUGADOの実装
– ラスターとベクター
– キャッシュの仕組み
• 今後

View Slide

なぜまた？

View Slide

描きソフトが多い
• オープンソース・無償
– Krita
– GIMP
– OpenToonz
– FireAlpaca
• 商用
– CLIP STUDIO PAINT
– TVPaint
– Photoshop
– Affinity
– Harmony
– CACANi
– Sketchbook
– RETAS STUDIO（アップデート無し）

View Slide

既存のソフトの問題
• 静止画を作るためのソフトが多い
– 動画機能は途中追加
– アニメをターゲットとしていない
• オープンソースの土台を使うのは難しい
– 歴史が長いものほどカスタムしにくい
• 自動化・スクリプトのサポートが少ない
– パイプラインの実装がしにくい
• ラスターとベクターが別物
– 混在させにくい
• レイヤー・フレーム増やすと遅くなる
– アニメ制作にフィットさせるとレイヤーが多くなる
• それぞれの線の色
• 修正・作画監督など用のレイヤー
– 4K/8Kの動画が難しそう

View Slide

ロードマップ

View Slide

アニメ制作の流れ
企画・シナリオ絵コンテ動画
レイアウト
美術
原画仕上げ撮影編集
紙が多いデジタルが多い
作画
スキャン
移行しやすい

View Slide

アニメ制作の流れ
企画・シナリオ絵コンテ動画
レイアウト
美術
原画仕上げ撮影編集
紙が多いデジタルが多い
作画
スキャン
移行しやすい
最後の工程からが
やりやすい

View Slide

ロードマップ
仕上げ動画原画
シンプルな描き味
色塗り・パレット
線の編集
コア開発
動画用の描き味
タイムライン
タイムシート
オニオンスキン
原画用の描き味
スクリプト
さらに
スキャンのクリーニング
自動彩色
フレーム補間
美術
音のサポート
MacOS・タブレット版
ペーパーレス可能

View Slide

最初の案
既存のソフト
（開発者・アーティスト）
OpenToonz
Krita
CLIP STUDIO
Sketchbook
開発
使うライブラリ
OpenSourceのソフト
プロトタイプ作成（勉強）
ヒアリング
仕上げ
動画
原画
検証準備 OpenSourceカスタム版
本開発
開発
プロトタイプ作成（設計）
開発
OpenToonz改訂版
本開発
フィードバックもとに
テストとヒアリング

View Slide

OpenToonz改訂版は諦め
• 長い歴史
– Toonzの世代
– ジブリの世代
– OpenSource世代
⇒APIが複雑
⇒カスタムするのに時間がかかりすぎ
• 開発者が本開発を優先したい

View Slide

テーマは効率

View Slide

効率
開発
現場開発
現場
効率！
早い
使いやすい
メンテ
しやすい
コラボ
しやすい
アニメに
特化
スケール
アップ可能

View Slide

使いやすい・アニメに特化
• 必要なものを作る
– 作画スタッフの研修動画で勉強
– 常に現場のヒアリング
• OLM
• 他社とのコラボ
• ラスター感覚
• 色をIDで管理
• パイプラインツール
– Pythonスクリプト可能
• OS・言語対応
– Windows, Linux, Mac, iPad
– 日本語、英語
効率
開発
現場開発
現場
早い
使いやすい
メンテ
しやすい
コラボ
しやすい
アニメに
特化
スケール
アップ可能

View Slide

早い・スケールアップ可能
• 数百枚のレイヤー・4K/8K対応
• レンダリングが早く
– 並列化・SIMD
– どうしても必要ならGPU
• メモリ使用少なく
– 最適なデータの構築
– ベクターデータ
効率
開発
現場開発
現場
早い
使いやすい
メンテ
しやすい
コラボ
しやすい
アニメに
特化
スケール
アップ可能

View Slide

メンテしやすい・コラボしやすい
• メンテしやすい
– できればGPUを使わない
– シンプルなAPI
• コア以外はメンテのしやすさ重視
– ライブラリ使用
• Qt、Immer、Imath、Catch
• コラボしやすい
– OLMのC++ガイドライン
• ネーミングコンベンション
• C++CoreGuidelinesベースに
– Git、Jenkins、Trello、Doxygen+Sphynx
効率
開発
現場開発
現場
早い
使いやすい
メンテ
しやすい
コラボ
しやすい
アニメに
特化
スケール
アップ可能

View Slide

SAKUGADOの特徴のまとめ
• 開発
– 色の管理はIDで
– Pythonスクリプト
– レンダリングが早く、メモリ使用少なく
– GPUを使わない、シンプルなAPI
• 現場
– ラスター感覚
– マニュアルがなくても使えるUI
– 数百枚のレイヤー・4K/8K対応
– 常にヒアリング、目的を仕様にまとめる
– 多OS対応、多言語対応

View Slide

• 開発
• 現場
ハイブリッド

View Slide

• 開発
• 現場
キャッシュの仕組み

View Slide

SAKUGADOの実装

View Slide

社内と社外のコラボ
• OLM Asia
– 仕上げ作業
– CLIP STUDIOの使用経験
• 東映アニメーション様
– 作画のすべての工程
– 歴史が長い、経験者が多い
– 社内開発の試みも
– デジタルタイムシート

View Slide

概要
• ラスターとベクター
• キャッシュの仕組み
– 使い方
– データ形式
– 戦略

View Slide

ラスターとベクター

View Slide

典型的なラスターとベクター
入力レンダリング結果

View Slide

レンダリングの統一
状態

View Slide

ハイブリッド
状態

View Slide

ハイブリッド
状態
共通状態
状態
• 現在のレンダリング
• 合成結果
• レイヤー毎
• フレーム毎
• 動作毎
• カーブリスト
• 制御点
• 接線
• 制御点毎
• 質圧
• 太さ
• レイヤー
• 構成
• 名前
• 表示・非表示
• 動作モード
• 選択範囲
• レンダリング結果
• ペンタブ
• 位置
• 質圧
• 傾き
• 動作
• ブラシ
• 消しゴム
• レイヤー追加
• パラメーター
• ブラシの太さ
• ブラシの色
• レイヤー名

View Slide

ハイブリッドとの比較
状態
キャッシュされるもの
ラスターベクターハイブリッド
頂点データ持たない持つ持つ
頂点数多い少ない多い
編集ピクセル単位頂点単位両方
状態のメモリ消費とても多い少ない多い
動作の履歴

View Slide

キャッシュの仕組み

View Slide

キャッシュの必要性
• 作画のソフトとは動画のソフト
• キャッシュの仕組みが必要
– 不要な再計算を防ぐ
– 動画の結果を再生して見られるように
• ラスターとベクターのハイブリッド
– 実装に必要
• AE
– 画像データ
• Nuke
– 画像データ
– ViewerとPlayback
– ノードの計算
• Maya
– ノードの計算出力
– 2021からPlayback
• Houdini
– Cooking
– シミュレーション
– キャッシュノード

View Slide

キャッシュの使い方

View Slide

1万動作
レンダリング

View Slide

キャッシュ
1万動作
レンダリング

View Slide

キャッシュ
1万+1動作
動作
1万動作
レンダリング

View Slide

キャッシュ
1万+1動作
取り消し
1万動作
レンダリング

View Slide

キャッシュ
1万+1動作
やり直し
1万動作
レンダリング

View Slide

キャッシュ
1万+1動作
やり直し
1万動作
レンダリング
再
レンダリング
状態
カーブリスト

View Slide

キャッシュ
1万+1動作
やり直し
1万動作
レンダリング
読み込み
レンダリング
結果

View Slide

キャッシュ
1万+1動作
やり直し
1万動作
レンダリング
動作の履歴
動作の再実行
レンダリング
結果

View Slide

• 動作の履歴が必要
– 1万動作～10MB
• キャッシュされるものは
– レンダリング画像
– 状態
• キャッシュされるデータが大きい
– 8k RGBA の画像～130MB
– 1万動作、30フレーム～200MB
– データ形式を最適に
• キャッシュをとる頻度が難しい
– 動作毎・レイヤー毎・フレーム毎のすべてとれない！
– 戦略が必要
まとめ

View Slide

キャッシュのデータ形式

View Slide

画像データ
• タイル形式
– 描いてないところは空
• 差分だけ更新
– 変わったタイルを更新
– 変わっていないタイルを共有
ストローク
追加

View Slide

画像データ

View Slide

永続データ構造で状態保存
• 画像と同じように差分だけ保存
• データ共有
– immer*ライブラリ
* Puente, Juan Pedro Bolívar. "Persistence for the masses: RRB-vectors in a systems
language." Proceedings of the ACM on Programming Languages 1.ICFP (2017): 1-28.
L0 L1 L2 L3 L4 L5 L6 L7 L8 L9 L10 L11 L12 L13 L14 L15 L16 L17 L18 L19
animation.layers

View Slide

L0 L1 L2 L3 L4 L5 L6 L7 L8 L9 L10 L11 L12 L13 L14 L15 L16 L17 L18 L19 L16 L20 L18 L19
animation.layers animation.layers' = animation.layers.insert(17, L20)
永続データ構造で状態保存
• 画像と同じように差分だけ保存
• データ共有
– immer*ライブラリ
* Puente, Juan Pedro Bolívar. "Persistence for the masses: RRB-vectors in a systems
language." Proceedings of the ACM on Programming Languages 1.ICFP (2017): 1-28.

View Slide

永続データ構造のメリット
• 状態のキャッシュがしやすい
– メモリ消費が低い
• 並列化しやすい
– データが変わらないから
• Immerなら動作毎の状態のキャッシュをとれる？
– キャッシュ戦略が一部シンプルに
状態のデータ+履歴
1万回動作 18MB
1万回動作、動作毎キャッシュ数GB
1万回動作、動作毎キャッシュ（immer） 21MB

View Slide

キャッシュの戦略

View Slide

キャッシュ戦略
RAM
メモリーに
ハード
ディスクに
ディスクから
メモリーへ
基本データ
から再計算
欲しい
派生データ
欲しい
派生データ
ある
ない
ある
ない
基本データ

View Slide

RAM
メモリーに
ハード
ディスクに
ディスクから
メモリーへ
基本データ
から再計算
欲しい
派生データ
欲しい
派生データ
ある
ない
ある
ない
基本データ
いつディスクに
戻る？
いつハードディス
クから消す？
いつメモリーから
消す？
キャッシュに保
存？メモリー？
ディスク？

View Slide

• 頻度
– Ｎｘ動作ごとに
– Ｎの決め方？
• レンダリングされるピクセル数？
• ストロークの数？
– レイヤー・ストロークの合成
• 階層構造キャッシュ？
– カレントタイムも考えないと
• メモリ・ディスク保存
– 再計算よりも読み込みが早い場合
• 削除
– メモリがいっぱい
• メモリから古い順にディスクに移動・メモリから削除
– ディスクがいっぱいだと古い順に削除
• いっぱい＝ユーザーパラメーター

View Slide

SAKUGADOのまとめ
• 新しい挑戦
– 大規模のソフト
– デジタル化に向けての仕様
• アニメのため
– 手描きを大事に
– 他社とコラボ
• 実装をしっかり
– 動画ソフトの仕様
– キャッシュの仕組み

View Slide

全体のまとめ
• デジタル化を進めている
– 一気には難しい
– 移行期間が必須
• デジタル作画へ乗り換えるためのツール
– OLM Peg Hole Stabilizer
– OLM Genga Cleaning
• デジタル作画のためのツール
– SAKUGADO
• 現場の声を聴きつつ、新しい提案しつつ、バランスをとる

View Slide

ご清聴ありがとうございました
OLM Open Toolsが更新されました
公開してほしいツールがあれば、
ぜひアンケートにご協力ください

View Slide

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

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

OLM Digital R&D
PRO

More Decks by OLM Digital R&D

Other Decks in Research

Featured

Transcript

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

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

OLM Digital R&D PRO

More Decks by OLM Digital R&D

Other Decks in Research

Featured

Transcript

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

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

OLM Digital R&D
PRO