Upgrade to Pro — share decks privately, control downloads, hide ads and more …

OLM R&D祭2022 10/20 アニメのためのAEプラグイン

OLM R&D祭2022 10/20 アニメのためのAEプラグイン

OLMSmootherをはじめ、OLMでは長期間アニメ制作を支えるAEのプラグインを作ってきました。今回はブラー、フレア、パーティクル、ライト効果などについて発表します。また最新の事例として、CG素材との連携を考え、レンダリング画像の輪郭線をAEで調整できるプラグインも紹介します

OLM Digital R&D

October 25, 2022
Tweet

More Decks by OLM Digital R&D

Other Decks in Technology

Transcript

  1. アニメのためのAEプラグイン
    園部華子
    Marc Salvati
    Martin Dulhoste
    Maxime Garcia
    © OLM Digital, Inc. 1

    View full-size slide

  2. 概要:After Effects Plugin
    • 主に撮影で使用
    • 目標
    – 新しい表現
    • 機能・パラメータの追加
    – 効率化
    • パラメータを簡単・直感的に制御
    • 手動を自動化・簡略化
    • 複数のソフトウェアの処理をAEで完結
    • 40以上の独自プラグインを現場で使用
    • OLM Open Toolsとして一部公開(olm.co.jp/rd/technology/tools/)
    © OLM Digital, Inc. 2

    View full-size slide

  3. 概要:ツール開発の流れ
    • 動機は課題解決
    • 開発→テストを繰り返してリリース
    © OLM Digital, Inc. 3
    課題分析 設計 実装 テスト リリース
    問題
    報告
    提案
    フィード
    バック
    要望
    ヒアリング
    現状調査
    課題解決
    方法検討
    仕様決定
    プロダクションで
    使用
    更なる
    課題…

    View full-size slide

  4. 概要:今回の内容
    • 開発事例を紹介
    • 今回紹介するツール
    – OLM Radial Blur
    – OLM Lens Flare
    – OLM Light Ray
    – OLM Particles
    – OLM Cellular Noise AE
    – OLM Toon AE
    © OLM Digital, Inc. 4
    更新
    新規
    新規
    更新
    新規
    新規
    Open Tools

    View full-size slide

  5. OLM Radial Blur
    © OLM Digital, Inc. 5

    View full-size slide

  6. 概要: OLM Blurs
    • 2Dアニメ向けに標準ブラーをカスタマイズ
    – 2017年~ 2Dアニメに特化したブラーとして開発
    • ディテールを保つ
    • お化けブラーなど
    • 多数のカスタム版
    – OLM Blur : 全体にブラー
    – OLM Directional Blur: 直線的な方向ブラー
    – OLM Radial Blur: 放射・回転の方向ブラー
    – OLM Weight Blur: ブラーの程度をレイヤーで制御
    • SIGGRAPH Asia 2018 にてポスター発表
    © OLM Digital, Inc. 6
    ©LEVEL-5/FCイナズマイレブンGO・テレビ東京 ©Hiro Morita, BBBProject, TV TOKYO
    OLM Directional Blur OLM Radial Blur
    著作権の関係で
    画像を掲載して
    おりません
    著作権の関係で
    画像を掲載して
    おりません

    View full-size slide

  7. 概要: OLM Radial Blur
    • 特殊な方向ブラー
    – Zoom : 拡大縮小
    – Rotation : 回転
    • Rotationの特徴
    – 2方向ブラー
    • Inner Blur(時計回り)
    • Outer Blur(反時計回り)
    • 組み合わせ可能
    – ブラーの強さ・形状など調整可能
    © OLM Digital, Inc. 7
    適用前
    OLM Radial Blur
    (Zoom)
    OLM Radial Blur
    (Rotation)

    View full-size slide

  8. 概要: デモ
    © OLM Digital, Inc. 8

    View full-size slide

  9. 概要: Radial Blurのパラメータ
    • Strength: ブラーの強さ
    • Ellipse: 楕円形の回転
    • Quality: 回転方向の解像度
    • Noise Blur: ブラーにノイズを追加
    • Edge Fade: α値のブラーの調整
    © OLM Digital, Inc. 9
    Edge Fade なし Edge Fade あり
    Ellipse Noise Blur

    View full-size slide

  10. OLM Radial Blurによる回転
    課題
    • 中心部は長さが小さくなる
    – Strengthは角度指定
    – ブラーの長さは一定でない
    • 中心付近: 小
    • 外側: 大
    • 中央にブラーがかからない
    © OLM Digital, Inc. 10
    元画像

    View full-size slide

  11. 方法: Offset Blurを追加
    • Offset = 中心からの距離によらない一定長さのブラー
    • 半径/2のブラーを基準にOffsetブラーの強さを指定
    • 中心からの距離に応じて、長さが一定になるよう Offsetブラーの
    強さを逆算
    © OLM Digital, Inc. 11
    ↑基準の長さ

    View full-size slide

  12. 方法: Offsetの合成
    • 最終ブラーはStrengthとOffsetの合成
    • 3つの合成モード
    – Add: StrengthにOffsetを追加
    – Max: StrengthとOffsetの大きい方を採用
    – Override: Offsetの値を採用
    © OLM Digital, Inc. 12
    Add: Strength + Offset Max: Max(Strength, Offset) Override: Offset
    Offset
    Strength

    View full-size slide

  13. 結果: 合成モード
    © OLM Digital, Inc. 13
    適用前
    Add Max Override
    Strength:300 Offset:0
    Offsetなし
    Strength:300 Offset:150

    View full-size slide

  14. 結果: 中心部の比較
    © OLM Digital, Inc. 14
    オフセット機能なし オフセット機能あり

    View full-size slide

  15. 技術詳細: Rotation Blurのアルゴリズム
    1. レンダリング範囲取得
    2. ブラー描画
    – バッファ用意
    𝐻𝑒𝑖𝑔ℎ𝑡: 𝐷𝑖𝑠𝑡𝑎𝑛𝑐𝑒
    𝑊𝑖𝑑𝑡ℎ ∶ 𝐴𝑛𝑔𝑙𝑒 ∗ 𝑞𝑢𝑎𝑙𝑖𝑡𝑦
    – 座標変換
    – バッファ上で直線Blurを適用
    – Offset 追加
    3. ピクセル描画
    – 座標変換 → (x, y)
    𝑟: 中心からの距離, θ: 角度
    x = 𝑟 ∗ cos(θ) + 𝑐𝑒𝑛𝑡𝑒𝑟. 𝑥
    y = 𝑟 ∗ sin(θ) + 𝑐𝑒𝑛𝑡𝑒𝑟. 𝑦
    – サンプリング
    © OLM Digital, Inc. 15
    Distance
    Angle*quality
    Distance
    Angle*quality
    θ
    d
    d
    θ
    Strength Offset

    View full-size slide

  16. 技術詳細: Offsetの強さ計算
    • 中心からの距離によって強さが違う
    • 基準ブラーの長さ
    𝑙𝑒𝑛𝑔𝑡ℎ = 𝑜𝑓𝑓𝑠𝑒𝑡 ∗ 𝑟ℎ𝑎𝑙𝑓
    • 中心からの距離がdの時の強さ
    𝑜𝑓𝑓𝑠𝑒𝑡𝑑
    ∗ 𝑑 = 𝑙𝑒𝑛𝑔𝑡ℎ
    = 𝑜𝑓𝑓𝑠𝑒𝑡 ∗ 𝑟ℎ𝑎𝑙𝑓
    𝑜𝑓𝑓𝑠𝑒𝑡𝑑
    = 𝑜𝑓𝑓𝑠𝑒𝑡 ∗ 𝑟ℎ𝑎𝑙𝑓
    /𝑑
    © OLM Digital, Inc. 16
    𝑟ℎ𝑎𝑙𝑓
    𝑜𝑓𝑓𝑠𝑒𝑡
    𝑙𝑒𝑛𝑔𝑡ℎ
    𝑑
    𝑜𝑓𝑓𝑠𝑒𝑡𝑑
    𝑙𝑒𝑛𝑔𝑡ℎ

    View full-size slide

  17. まとめ
    • メリット
    – 中心部にブラーをかけられる
    – 表現の幅が広がった
    • ステータス
    – プロダクションで使用
    – Open Tools で公開
    © OLM Digital, Inc. 17

    View full-size slide

  18. OLM Lens Flare
    © OLM Digital, Inc. 18

    View full-size slide

  19. 概要
    • レンズフレアを描画するエフェクト
    – 2022年~ カスタム可能な自社レンズフレアとして新規開発
    – 開発・テスト中
    • 特徴
    – Type: 様々な形状のフレアに対応
    – 多様なパラメータ
    • Location: フレアの位置指定
    • Color: フレアの色
    • Brightness: 明るさ
    • Mode: 2つの合成モード (Add / Over)
    など
    © OLM Digital, Inc. 19

    View full-size slide

  20. 課題
    • AEのレンズフレアは3タイプ
    – レンズの種類: 50-300mmズーム, 35mm, 105mm
    • AEのレンズフレアにない表現がしたい
    – 多様な形状
    – 複数のレンズフレアを同時に作成
    – Color, Scaleなどの調整
    – 点滅・ストロボライトの表現
    • 今後もカスタマイズしたい
    © OLM Digital, Inc. 20

    View full-size slide

  21. 方法: Flareタイプ
    • 11のタイプを作成
    – アーティストのリクエスト
    – 組み合わせて使用
    • タイプごとに調整用UIを表示
    – 例) Disc
    © OLM Digital, Inc. 21
    Disc(Ellipse) Glow
    Stripe
    Shape Spread
    Polygon
    Spikes
    Chroma Fan Chroma Hoop
    Photon Spikes
    Star Filter
    Faded Ring Random Fan

    View full-size slide

  22. 方法: フレアを複数追加
    • ライトレイヤーでPosition指定
    • 同時に追加可能
    • 文字列パラメータを実装
    – レイヤー名を直接指定
    – 文字列の部分一致で複数のレンズフレアを同時作成
    例) “Flare” → FlareMain, Flare01, Flare02 など全て取得
    © OLM Digital, Inc. 22

    View full-size slide

  23. 結果: 様々なフレア
    © OLM Digital, Inc. 23

    View full-size slide

  24. 結果: デモ
    © OLM Digital, Inc. 24

    View full-size slide

  25. Disc
    技術詳細: タイプ別パラメータ
    • 必要なパラメータのみ取得
    – Globalパラメータとタイプ固有のパラメータを分離
    – Flare Typeごとに関数を用意
    • パラメータ取得
    • レンダリング
    – Flare Typeに応じて呼び出し
    • 新規タイプを追加しやすい
    • 修正しやすい
    © OLM Digital, Inc. 25
    Globalパラメータ取得
    Flare Type
    パラメータ
    取得
    レンダリング
    Glow
    パラメータ
    取得
    レンダリング
    Spikes
    パラメータ
    取得
    レンダリング
    レンダリング開始

    View full-size slide

  26. 技術詳細: 描画範囲の計算
    • 全pixelを走査する必要は無い
    • 描画範囲のBounding Boxを先に計算
    • 複数パーツから成るフレアは、それぞれを計算して合成
    © OLM Digital, Inc. 26

    View full-size slide

  27. まとめ
    • メリット
    – フレアの自由度が高まった
    – 複数のフレアを1つのエフェクトで追加できる
    • ステータス
    – テスト中
    • 今後の課題
    – 異なるタイプを1つのエフェクトで追加
    – フレアタイプを追加
    © OLM Digital, Inc. 27

    View full-size slide

  28. OLM Light Ray
    © OLM Digital, Inc. 28

    View full-size slide

  29. 概要
    • 発光による光線(レイ)を描画するエフェクト
    – 2018年~ カスタム可能な自社開発レイとしてスタート
    • 特徴
    – Boost Lightで明るさを調整
    – 独自のRampパラメータによる色指定
    – レイの揺らめき
    – 多様なブレンドモード
    • Add, Multiply, Screen, Overlay, Soft Light…
    © OLM Digital, Inc. 29

    View full-size slide

  30. 概要: デモ
    © OLM Digital, Inc. 30

    View full-size slide

  31. 概要: パラメータ
    – Ray Length: レイの長さ
    – Boost Light: ライトの明るさ
    – Colorize: レイの色指定
    – Shimmer
    – Fractal Noise など
    © OLM Digital, Inc. 31
    BoostLight:0 BoostLight:5 BoostLight:10
    Shimmer Fractal Noise

    View full-size slide

  32. 課題: Boost Lightの挙動
    • Boost Light 有効時、透明な背景が不透明黒になる
    • マスク + 加算で対応?
    – 手順が多い・白背景だと加算ではレイが見えない
    © OLM Digital, Inc. 32
    Boost=0.0 Boost=5.0 Boost=10.0
    加算
    マスク

    View full-size slide

  33. 方法: 最終出力の計算
    • 現在の色味はそのまま背景を透明に
    – 「黒背景に重ねて同じ色になるよう 色と不透明度を変更」と定義
    • 現在のLight Rayの計算
    – underColor: 元の画像の色
    – overColor: パラメータから取得したライトのRGBA
    • Boostの計算 ← ここを変更
    𝑜𝑣𝑒𝑟𝐶𝑜𝑙𝑜𝑟. 𝑟𝑔𝑏 ∗= exp(0.15 ∗ 𝐵𝑜𝑜𝑠𝑡𝐿𝑖𝑔ℎ𝑡)
    𝑜𝑣𝑒𝑟𝐶𝑜𝑙𝑜𝑟. 𝑎 = 1.0
    – outputColor = underColorとoverColorを合成 ※Blend Modeによる
    © OLM Digital, Inc. 33

    View full-size slide

  34. 方法: Boost Lightの調整
    • Boost Lightの不透明度
    – RGBに合わせて不透明度を調整
    𝑜𝑣𝑒𝑟𝐶𝑜𝑙𝑜𝑟. 𝑎 ∗= exp(0.15 ∗ 𝐵𝑜𝑜𝑠𝑡𝐿𝑖𝑔ℎ𝑡)
    • Boost Lightの色
    – 不透明度を下げた分、全体が暗くなる
    𝑜𝑢𝑡𝑝𝑢𝑡𝐶𝑜𝑙𝑜𝑟. 𝑟𝑔𝑏 ∗ 𝑜𝑢𝑡𝑝𝑢𝑡𝐶𝑜𝑙𝑜𝑟. 𝑎 = 元の色 としたい
    – 最終出力を調整
    𝑜𝑢𝑡𝑝𝑢𝑡𝐶𝑜𝑙𝑜𝑟. 𝑟𝑔𝑏 /= 𝑜𝑢𝑡𝑝𝑢𝑡𝐶𝑜𝑙𝑜𝑟. 𝑎
    © OLM Digital, Inc. 34

    View full-size slide

  35. 結果
    © OLM Digital, Inc. 35
    従来 最新バージョン

    View full-size slide

  36. まとめ
    • メリット
    – Boost Light実行時も背景の透明度を保つ
    – Boost Lightの合成が簡単に
    • ステータス
    – プロダクションで使用
    © OLM Digital, Inc. 36
    ©LEVEL-5/ムサシプロジェクト

    View full-size slide

  37. OLM Particles
    © OLM Digital, Inc. 37

    View full-size slide

  38. 概要
    • パーティクルを生成・描画するエフェクト
    – 2017年~ カスタム可能な自社開発パーティクルとしてスタート
    • 特徴
    – エミッターのカスタマイズ
    • Emitter の 形状、Transform/Rotate/Scale
    • パーティクル発生速度
    – 多様なパーティクルの種類
    • Particle Type
    • パーティクルのLife, Size, Opacity, Colorなど
    – 物理演算
    • 空気抵抗
    • 障害物との衝突
    – サブパーティクル など
    © OLM Digital, Inc. 38
    ©LEVEL-5/映画「妖怪ウォッチ」プロジェクト2017
    著作権の関係で
    画像を掲載しておりません

    View full-size slide

  39. 概要: デモ
    © OLM Digital, Inc. 39

    View full-size slide

  40. 概要: 様々なパーティクル
    © OLM Digital, Inc. 40

    View full-size slide

  41. 使用例
    © OLM Digital, Inc. 41
    ©LEVEL-5/映画「妖怪ウォッチ」プロジェクト2017
    著作権の関係で
    画像を掲載しておりません

    View full-size slide

  42. 課題
    • Particle Typeによる制限
    – Particleの見た目は、Particle Typeから選ぶ
    • Particle Type追加のコストがかかる
    – Normal Rendering
    – Toon Rendering
    – 円・球へのテクスチャマッピング
    – Glow (Sphere以外)
    • 表現の自由度を高めたい
    © OLM Digital, Inc. 42
    Square Sphere Cloudlet
    Bubble Glow Sphere Star
    Sprite Sprite
    Colorize
    Sprite Fill
    Textured
    Polygon
    Textured Polygon
    Colorize
    Texture Polygon
    Fill

    View full-size slide

  43. 方法: Particle Typeの見直し
    • 汎用的なタイプを残し、残りは他のパラメータと併用して再現
    – Square, Sphere, Star のみ
    • オプション効果 Rotate, Glow, Cloudlet, Bubble, Normal…
    • テクスチャマッピング
    – UV座標を持たせる
    • 例
    – Sprite: Square +テクスチャマッピングあり+ rotateYのみ
    – Polygon: Square +テクスチャマッピングあり+ rotateXYZ
    – Glow Sphere: Sphere+ Glow効果あり
    © OLM Digital, Inc. 43
    Sprite Polygon Glow
    Sphere

    View full-size slide

  44. 結果
    © OLM Digital, Inc. 44
    例) Sphere + Normal Rendering

    View full-size slide

  45. 技術詳細: データフローの見直し
    • 3つのプロセス
    1. パラメータ取得
    2. アトリビュート計算: 各パーティクルの位置、サイズ、など
    3. レンダリング: パーティクルごとに各ピクセルの色を計算
    • 全タイプ共通のものは共有
    © OLM Digital, Inc. 45
    パラメータ
    取得
    アトリビュート計算 レンダリング
    アトリビュート計算 レンダリング
    アトリビュート計算 レンダリング
    パラメータ
    取得 アトリビュート計算
    タイプ固有の
    アトリビュート
    全タイプ共通
    アトリビュート
    レンダリング
    タイプ固有の
    計算
    Sphere
    Square
    Bubble
    全タイプ共通の
    計算
    . . .
    変更前 変更後

    View full-size slide

  46. 技術詳細: スタイル追加
    1. パラメータ追加
    2. 必要なアトリビュートの計算
    3. レンダリングの計算
    © OLM Digital, Inc. 46
    パラメータ
    取得
    アトリビュート計算 レンダリング
    アトリビュート計算 レンダリング
    アトリビュート計算 レンダリング
    Sphere
    Square
    Bubble
    アトリビュート計算 レンダリング
    アトリビュート計算 レンダリング
    パラメータ
    取得 アトリビュート計算
    タイプ固有の
    アトリビュート
    全タイプ共通
    アトリビュート
    レンダリング
    タイプ固有の
    計算
    全タイプ共通の
    計算
    法線計算
    Normal(XYZ) → RGB
    Normal
    Sphere
    Normal
    Square
    変更前 変更後
    パーティクルタイプ追加
    Normal Sphere, Normal Square...
    Normal Rendering on/off
    rotate, size など
    例) Normal Rendering

    View full-size slide

  47. 技術詳細: データの整理
    • Render Data: レンダリングに必要なデータ
    – 全パーティクル共通
    – Emitter情報, Normal, Glowなど
    • Particle Data: 個々のパーティクルのデータ
    – 従来は、タイプ別に構造体を作成
    • Sphere_Data, Cloudred_Data, Glow_Data …
    – タイプ固有データと全タイプ共通データを分離
    • ID、速度、座標、トランスフォームなどは全タイプ共通
    – 全タイプ共通データをParticle_Dataとして保持
    © OLM Digital, Inc. 47
    Particle_Data
    u32 id
    v3 pos
    v2 screen_pos
    v3 v
    f32 life
    Frame_Time emission_frame
    f32 z
    v2 size
    v3 rotate
    v4 rgba
    f32 op
    Bounds b
    f32 feather
    f32 radius
    v3 x_camera
    f32 r_camera
    Particle_Class particle_class
    i32 dof_radius
    Bounds dof_bounds

    View full-size slide

  48. 技術詳細:高速化
    • レンダリング領域を先に計算
    – パーティクルのBounding Boxを組み合わせ
    • 共有できる計算は先に行う
    – 例) Square: Scale, Rotate変換前のUVは同じ
    • マルチスレッディング
    • SIMD
    – 複数データをまとめて計算
    – rgba_f32x4 に4pixel分の色データを格納
    – レイヤーの1/4のサイズのrgba_f32x4バッファで計算
    © OLM Digital, Inc. 48
    R G B A
    rgba_f32x4
    → 4pixel

    View full-size slide

  49. まとめ
    • メリット
    – コードが整理され管理しやすくなった
    – 新規スタイルが追加しやすくなった
    • ステータス
    – フィードバックを元に改良中
    • 今後の課題
    – AEでライティング
    – Toon FX: 手描きのようなエフェクト
    • トゥーンレンダリング
    • Blob, メタボール
    © OLM Digital, Inc. 49
    メタボール

    View full-size slide

  50. OLM Cellular Noise AE
    © OLM Digital, Inc. 50

    View full-size slide

  51. 概要
    • Cellular Noiseを描画するエフェクト
    – 2018年~ After Effectsでは表現できないノイズ追加
    – Cellular Noise
    • 自然界に存在
    • アニメでも多用
    • 特徴
    – 輝度・明度を調整
    – パラメータによる乱雑さ調整
    • Grid Parameters: ノイズの密度設定(全体)
    • Split Probability: ノイズの密度を調整
    • Complexity: ノイズの複雑さ
    © OLM Digital, Inc. 51

    View full-size slide

  52. 課題
    • AEの「セルパターン」は密度が一様
    – AEのセルパターン: バブルの結果
    • 密度をカスタマイズできるCellular Noiseが欲しい
    – MayaではOLM Cellularノードを実装している → AEでも実装
    © OLM Digital, Inc. 52
    分散 = 0.0 分散 = 1.0 分散 = 1.5 (最大)

    View full-size slide

  53. 方法: Regular Grid Cellular Noise
    • Cellular Noiseの実装
    1. サンプル点を配置
    2. 近傍サンプル点への距離でピクセル色を決定
    • 例) 一番近い点への距離
    サンプル点付近は暗く、離れるほど明るく
    • 高速化のためGridで分割
    – 近傍セルの点だけを見ればよい
    – 分割するほど細かい
    © OLM Digital, Inc. 53

    View full-size slide

  54. 方法: Multi-level Grid
    • セルを多段階で分割する仕組み
    – 4分木で分割
    – 高レベルから再帰的に分割
    • 不均一なノイズを生成
    © OLM Digital, Inc. 54
    1 2 3 4
    1, 1 1,2 1, 3 1, 4 4, 1 4,2 4, 3 4, 4
    4,1,1 4,1,2 4,1,3 4,1,4
    分割数: 小 ↔ 分割数: 大
    4分割
    4分割
    4分割

    View full-size slide

  55. 方法: Multi-level Grid
    • パラメータで調整
    • Grid Parameters:
    – Min/Max Num Cell: 1つのセルに複数の点
    – Min Multi Level: ベースとなる分割数
    – Depth: 何段階分割するか
    • Split Probability: 分割の起こりやすさを調整
    – 一部だけ分割数を増やす
    – レイヤーで指定可能
    © OLM Digital, Inc. 55
    Min/Max Num Cell
    Min Multi Level
    Depth

    View full-size slide

  56. 結果: Grid Parameters
    © OLM Digital, Inc. 56
    Min Num Cell:1
    Min Multi Level:1
    depth:1
    Min Num Cell: 3 Min Multi Level : 3 depth: 3
    • Min/Max Num Cell: 1つのセルに複数の点
    • Min Multi Level: ベースとなる分割数
    • Depth: 何段階 分割するか

    View full-size slide

  57. 結果: Split Probability
    © OLM Digital, Inc. 57
    Split Probability Layer 出力結果

    View full-size slide

  58. 技術詳細: セル走査
    • 近傍セルから近傍サンプル点を探索
    • 効率的な走査順がある
    • ピクセルの位置に応じて、走査順番を決定
    • Multi-level Gridに拡張
    – セルが分割されていれば再帰的に走査
    © OLM Digital, Inc. 58
    10 8 9
    15 4 0 2 12
    14 3 1 11
    16 7 5 6 13
    19 17 18
    0 2
    3 1
    7
    6
    5
    4

    View full-size slide

  59. 技術詳細: 論文
    • Procedural Non Uniform Cellular Noise
    Theo Jonchier, Marc Salvati and Alexandre Derouet-Jourdan
    – Symposium MEIS2016で発表
    – Multi-level Gridの提案
    – 最適な近傍セルの走査順を提案
    • Implementation of Fast and Adaptive Procedural Cellular Noise
    Théo Jonchier, Alexandre Derouet-Jourdan, Marc Salvati
    – Journal of Computer Graphics Techniques (JCGT)掲載 vol. 8, no. 1, 35-44, 2019
    – Multi-level Gridの最適な走査を高次元に一般化
    – 3Dノイズで15~20%高速化
    • Worleyのアルゴリズムと比較
    © OLM Digital, Inc. 59

    View full-size slide

  60. まとめ
    • メリット
    – 不均一なCellular Noiseを生成できる
    • ステータス
    – プロダクションで使用
    – ノイズ生成部をライブラリ化
    • OLM Noise Library
    • 各DCCのプラグインと共有
    • 他ノイズも多数 (現在ver2.0)
    ‐ Gabor Noise, Billow Noise, Perlin Noise, White Noise, Voronoi noise
    • 今後の課題
    – 新規ノイズの追加
    © OLM Digital, Inc. 60

    View full-size slide

  61. OLM Toon AE
    © OLM Digital, Inc. 61

    View full-size slide

  62. 概要
    • AEでトゥーン表現を行うエフェクト
    – 2022年~ トゥーン表現の自由度を高めるため新規開発
    – 特に、輪郭の調整をAEで行う
    – 開発中
    • 特徴
    – Mayaのトゥーンレンダリング結果をAEで調整
    – 輪郭の見え方を調整
    • Contour Width: 輪郭の太さ
    • Override Contour: 輪郭の色
    • Width Modifier Layer: 輪郭の太さをレイヤーで指定
    © OLM Digital, Inc. 62
    Mayaの OLMToon
    レンダリング結果
    OLM Toon AE で
    太さ・色を修正

    View full-size slide

  63. 課題
    • 輪郭の見え方は、Maya のOLM Toonシェーダで調整
    → コンポジット段階で調整をしたい
    • 輪郭の調整
    – 輪郭の太さ
    • 均一・不均一
    – 輪郭の色
    • 重なりに対応
    – オブジェクトによる遮蔽
    – オブジェクトの透明度
    – 輪郭の透明度
    – 重なりで色が変わる
    © OLM Digital, Inc. 63
    OLM Toon シェーダでのレンダリング結果

    View full-size slide

  64. 方法: 描画に必要なデータ
    • Mayaのレンダリング結果の輪郭の情報
    – OLM Toon Contour Shaderで設定
    – 輪郭の太さ, 色, 透明度, depth, 所属オブジェクト,
    輪郭タイプ など
    • Mayaのレンダリング結果のグローバル情報
    – オブジェクトの重なり, オブジェクトの透明度,
    輪郭幅の上限
    • ユーザーが後から変更するパラメータ
    – 輪郭の太さ, 色
    © OLM Digital, Inc. 64
    レンダリング時に
    Mayaからエクスポート
    AEで設定
    エフェクトのパラメータ

    View full-size slide

  65. 方法: 透明オブジェクトへの対応
    © OLM Digital, Inc. 65
    Information Color(RGB) Transparency(A)
    Layer
    1
    2
    3
    • 重なりでレイヤを分ける
    • AOVとして出力
    Information AOV
    • R: オブジェクト
    • G: オブジェクトグループID
    • B: Depth
    通常レンダリング結果

    View full-size slide

  66. 方法: 実行手順
    1. Mayaからデータエクスポート
    – AOV: オブジェクトID, depth, レイヤなどPixelベースのデータ
    – Contour Dataファイル: 輪郭情報、レイヤ情報など
    2. データをAEにインポート
    – AOVとContour Dataを読み込み
    3. レンダリング結果を再合成
    – レイヤ毎に輪郭とオブジェクトをレンダリング ←ここで輪郭の太さや色を調整
    – 手前からレイヤを重ね合わせる
    • 不透明度に応じてアルファブレンド
    © OLM Digital, Inc. 66
    Layer1 Layer2 Layer3

    View full-size slide

  67. 結果: 輪郭の調整
    © OLM Digital, Inc. 67
    OLM Toon AEの出力結果
    入力

    View full-size slide

  68. 結果: 透明オブジェクトの重なり
    © OLM Digital, Inc. 68
    OLM Toon AEの出力結果
    入力

    View full-size slide

  69. 技術詳細: データ
    • MayaからExport
    – AOV
    • マルチチャンネル OpenEXRでエクスポート
    • 自作のシェーダ OLM Toon ContourなどのAOVを使用
    – Contour Data
    • バイナリファイルでエクスポート compressedz.contour
    • AEへのImport
    – AOV
    • EXtractoR エフェクトで各チャンネルを分離
    – Contour Data
    • パラメータでファイル指定 → キャッシュに保存
    © OLM Digital, Inc. 69

    View full-size slide

  70. 技術詳細: Sub Pixelの扱い
    • AOVにはSub Pixelが存在
    – 輪郭など情報量多い箇所では、1pixelに複数のサンプル
    – 輪郭のレンダリングではSub Pixel情報も必要
    • Sub Pixel情報をContour Dataに格納
    – [初期の手法] 全ピクセルについて、サンプル数・輪郭情報を保存
    • 全ピクセルを走査し、輪郭であればSub Pixelを取得
    • 実際、ほとんどのピクセルの情報は不要
    – [高速化] 輪郭のSub Pixelのみを保存
    • 効率的に輪郭のみ描画可能
    © OLM Digital, Inc. 70

    View full-size slide

  71. まとめ
    • メリット
    – AEでのトゥーン表現の可能性
    – Mayaでの作業をAEに
    • ステータス
    – 開発中
    • 今後の課題
    – 高速化
    – 調整の自由度を高める
    – プロダクションでの実用化
    © OLM Digital, Inc. 71

    View full-size slide

  72. まとめ
    © OLM Digital, Inc. 72

    View full-size slide

  73. まとめ
    • ツール開発の流れ
    – 動機はプロダクションでの課題解決
    – アーティストとのコミュニケーションが重要
    • 自社開発のメリット
    – 現場の声をすぐに反映
    – カスタマイズ
    • 今後もツールを改善
    – MFR対応中
    © OLM Digital, Inc. 73
    課題分析 設計 実装 テスト リリース

    View full-size slide

  74. OLM Open Tools
    • OLM Digital R&Dのサイトからダウンロード
    – https://olm.co.jp/rd/technology/tools/
    • 今回ご紹介できなかったツールも
    – OLM Blurs
    – OLM Smoother
    – OLM KiraKira
    – OLM Color Key
    – Distance Gradation
    – Color Keep, Auto Color Keep 他
    • 更新情報
    – HP: olm.co.jp/rd/ Twitter: @OLMDRD
    © OLM Digital, Inc. 74

    View full-size slide