$30 off During Our Annual Pro Sale. View Details »

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

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

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

OLM Digital R&D
PRO

October 20, 2022
Tweet

More Decks by OLM Digital R&D

Other Decks in Research

Transcript

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

    View Slide

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

    View Slide

  3. タップ穴補正ツールとは
    © OLM Digital, Inc. 3

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. 特殊ケース
    • タップ穴に×
    • 回転あり
    • 穴が多い
    © OLM Digital, Inc. 7

    View Slide

  8. 自動検出できるタップ穴
    © OLM Digital, Inc. 8

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. タップ穴修正
    © OLM Digital, Inc. 12
    スケール
    回転
    移動

    View Slide

  13. タップ穴修正:スケール
    • ●のタップ穴への最大距離に合わせる
    © OLM Digital, Inc. 13

    View Slide

  14. タップ穴修正:回転
    • 水平になるように回転
    • スキャンの全体が入るようにリサイズ
    © OLM Digital, Inc. 14

    View Slide

  15. タップ穴修正:移動
    • ●のタップ穴の全位置を平均計算
    • スキャンを平均値にずらす
    • 移動の分スキャンのリサイズ
    © OLM Digital, Inc. 15

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. OLM Genga Cleaning
    スキャンデータの自動トレース
    © OLM Digital, Inc. 21

    View Slide

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

    View Slide

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

    View Slide

  24. トレース作業
    © OLM Digital, Inc. 24
    最終結果~40分
    著作権の関係により
    画像を掲載しておりません

    View Slide

  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]

    View Slide

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

    View Slide

  27. ベクター化手法
    © OLM Digital, Inc. 27

    View Slide

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

    View Slide

  29. 前処理(半自動)
    • 原画を二値化
    – 黒、赤、青、緑を原画での色を指定
    – ガンマ補正
    – 色相や彩度のしきい値を設定
    • 色ごとにパラメータ調整可能
    – 黒、赤、青、緑に変換
    – 薄い線とハッチング排除
    • リアルタイムにプレビュー
    © OLM Digital, Inc. 29
    原画 しきい値 黒・赤・青・緑
    に変換
    ©Project Vanguard2019/Aichi Television
    著作権の関係により
    画像を掲載しておりません

    View Slide

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

    View Slide

  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.
    *

    View Slide

  32. 線画抽出の結果
    © OLM Digital, Inc. 32
    自動抽出の結果 < 5秒
    修正しないといけないところ・・・
    手作業での抽出結果 ~40分
    ©Project Vanguard2019/Aichi Television
    著作権の関係により
    画像を掲載しておりません
    著作権の関係により
    画像を掲載しておりません

    View Slide

  33. グラフのスムージング
    © OLM Digital, Inc. 33
    • 法線上を重心方向に動かす
    適用前 適用後
    著作権の関係により
    画像を掲載しておりません
    著作権の関係により
    画像を掲載しておりません

    View Slide

  34. 分岐点修復の実行例
    © OLM Digital, Inc. 34
    著作権の関係により
    画像を掲載しておりません
    著作権の関係により
    画像を掲載しておりません

    View Slide

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

    View Slide

  36. SAKUGADO
    アニメ用の作画ソフト
    © OLM Digital, Inc. 36

    View Slide

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

    View Slide

  38. なぜまた?
    © OLM Digital, Inc. 38

    View Slide

  39. 描きソフトが多い
    • オープンソース・無償
    – Krita
    – GIMP
    – OpenToonz
    – FireAlpaca
    • 商用
    – CLIP STUDIO PAINT
    – TVPaint
    – Photoshop
    – Affinity
    – Harmony
    – CACANi
    – Sketchbook
    – RETAS STUDIO(アップデート無し)
    © OLM Digital, Inc. 39

    View Slide

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

    View Slide

  41. ロードマップ
    © OLM Digital, Inc. 41

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  48. テーマは効率
    © OLM Digital, Inc. 48

    View Slide

  49. 効率
    開発
    現場 開発
    現場
    効率!
    © OLM Digital, Inc. 49
    早い
    使いやすい
    メンテ
    しやすい
    コラボ
    しやすい
    アニメに
    特化
    スケール
    アップ可能

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  56. SAKUGADOの実装
    © OLM Digital, Inc. 56

    View Slide

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

    View Slide

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

    View Slide

  59. ラスターとベクター
    © OLM Digital, Inc. 59

    View Slide

  60. 典型的なラスターとベクター
    © OLM Digital, Inc. 60
    入力 レンダリング結果

    View Slide

  61. レンダリングの統一
    © OLM Digital, Inc. 61
    入力 レンダリング結果
    状態

    View Slide

  62. ハイブリッド
    © OLM Digital, Inc. 62
    入力 レンダリング結果
    状態

    View Slide

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

    View Slide

  64. ハイブリッドとの比較
    © OLM Digital, Inc. 64
    入力 レンダリング結果
    状態
    キャッシュされるもの
    ラスター ベクター ハイブリッド
    頂点データ 持たない 持つ 持つ
    頂点数 多い 少ない 多い
    編集 ピクセル単位 頂点単位 両方
    状態のメモリ消費 とても多い 少ない 多い
    動作の履歴

    View Slide

  65. キャッシュの仕組み
    © OLM Digital, Inc. 65

    View Slide

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

    View Slide

  67. キャッシュの使い方
    © OLM Digital, Inc. 67

    View Slide

  68. キャッシュの使い方
    © OLM Digital, Inc. 68
    1万動作
    レンダリング

    View Slide

  69. キャッシュの使い方
    © OLM Digital, Inc. 69
    キャッシュ
    1万動作
    レンダリング

    View Slide

  70. キャッシュの使い方
    © OLM Digital, Inc. 70
    キャッシュ
    1万+1動作
    動作
    1万動作
    レンダリング

    View Slide

  71. キャッシュの使い方
    © OLM Digital, Inc. 71
    キャッシュ
    1万+1動作
    取り消し
    1万動作
    レンダリング

    View Slide

  72. キャッシュの使い方
    © OLM Digital, Inc. 72
    キャッシュ
    1万+1動作
    やり直し
    1万動作
    レンダリング

    View Slide

  73. キャッシュの使い方
    © OLM Digital, Inc. 73
    キャッシュ
    1万+1動作
    やり直し
    1万動作
    レンダリング

    レンダリング
    状態
    カーブリスト

    View Slide

  74. キャッシュの使い方
    © OLM Digital, Inc. 74
    キャッシュ
    1万+1動作
    やり直し
    1万動作
    レンダリング
    読み込み
    レンダリング
    結果

    View Slide

  75. キャッシュの使い方
    © OLM Digital, Inc. 75
    キャッシュ
    1万+1動作
    やり直し
    1万動作
    レンダリング
    動作の履歴
    動作の再実行
    レンダリング
    結果

    View Slide

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

    View Slide

  77. キャッシュのデータ形式
    © OLM Digital, Inc. 77

    View Slide

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

    View Slide

  79. 画像データ
    © OLM Digital, Inc. 79

    View Slide

  80. 永続データ構造で状態保存
    • 画像と同じように差分だけ保存
    • データ共有
    – immer*ライブラリ
    © OLM Digital, Inc. 80
    * 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

  81. 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*ライブラリ
    © OLM Digital, Inc. 81
    * 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

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

    View Slide

  83. キャッシュの戦略
    © OLM Digital, Inc. 83

    View Slide

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

    View Slide

  85. キャッシュ戦略
    © OLM Digital, Inc. 85
    RAM
    メモリーに
    ハード
    ディスクに
    ディスクから
    メモリーへ
    基本データ
    から再計算
    欲しい
    派生データ
    欲しい
    派生データ
    ある
    ない
    ある
    ない
    基本データ
    いつディスクに
    戻る?
    いつハードディス
    クから消す?
    いつメモリーから
    消す?
    キャッシュに保
    存?メモリー?
    ディスク?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide