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

OLM R&D祭2022 10/20 アニメのためのシェーダー

OLM R&D祭2022 10/20 アニメのためのシェーダー

3DCGでも日本のアニメスタイルを活かせるようにR&Dではインハウスシェーダーを作っています。輪郭線、アニメ風の目の表現・質感のために開発した最新技術を発表します。

OLM Digital R&D

October 25, 2022
Tweet

More Decks by OLM Digital R&D

Other Decks in Technology

Transcript

  1. アニメのためのシェーダー
    - Lit Sphere, Smooth Voronoi, Eye, Toon -
    市川 翔大
    Alexandre Derouet-Jourdan
    Marc Salvati
    1

    View full-size slide

  2. 目次
    © OLM Digital, Inc. 2
    OLM Toon
    OLM Eye
    OLM Lit Sphere Smooth Voronoi
    ©TOMY/ZW製作委員会・テレビ東京
    ©Nintendo·Creatures·GAME FREAK·TV Tokyo·Shoro·JR Kikaku ©Pokémon
    ©2019 PIKACHU PROJECT
    著作権の関係により
    画像を掲載しておりません
    著作権の関係により
    画像を掲載しておりません

    View full-size slide

  3. OLM Lit Sphere
    © OLM Digital, Inc. 3

    View full-size slide

  4. OLM Lit Sphere
    © OLM Digital, Inc. 4
    Always Look At Camera パラメータ OFF / ON
    車体
    金属
    ガラス
    ウィンカー
    タイヤ
    シート
    内装
    • 追加パラメーター
    – Always Look At Camera: カメラのパースを無視
    U
    V
    N
    N

    View full-size slide

  5. OLM Lit Sphere - Always Look At Camera -
    © OLM Digital, Inc. 5
    メッシュ
    カメラ
    Z NV
    通常のLitSphere:
    Lit Sphere は通常、カメラの位置ではなく行列 (方向)を使用
    カメラスペースでのシェーディングポイント の法線により、テクスチャ
    のUVが決まる
    Z: カメラのZ軸
    NV: カメラスペースの シェーディングポイントの法線
    : シェーディングポイント
    Z
    NV
    カメラ
    メッシュ
    テクスチャの
    評価点
    メッシュ
    カメラ
    CM NV*
    Always Look At Camera:
    Always Look At Camera がONの場合、カメラ位置 と オブジェクト (Bounding Box)
    の中心 との方向を使用
    シェーディングポイント のカメラスペースの法線が、カメラの位置によりシ
    フトする
    NV* = NV + CM * (-(NV • CM))
    CM
    カメラ
    メッシュ
    テクスチャの
    評価点
    NV*
    CM: カメラからメッシュへの方向
    NV*: シフトされた「カメラスペースの シェーディングポイントの法線」
    : シェーディングポイント

    View full-size slide

  6. OLM Lights Lit Sphere
    • OLM Lights Lit Sphere: カメラだけでなくライト情報も使用
    – 移動/スケール/回転 によるシェーディングの制御
    – メッシュ上で一貫性のあるレンダリング
    – 効果: リム、ストローク、など
    © OLM Digital, Inc. 6
    Lights Lit Sphere の様々な例 (リム、ハッチング)
    Hideki Todo, Ken Anjyo, Shun'ichi Yokoyama. Lit-Sphere extension for artistic rendering. The Visual Computer, Volume 29, Issue 6, pp. 473-480 (2013)

    View full-size slide

  7. • Lights Lit Sphere: メッシュの法線を使い、各ライトからテクスチャを投影
    • DiffuseとSpecularライティングをサポート
    OLM Lights Lit Sphere - 技術 -
    © OLM Digital, Inc. 7
    Hideki Todo, Ken Anjyo, Shun'ichi Yokoyama. Lit-Sphere extension for artistic rendering. The Visual Computer, Volume 29, Issue 6, pp. 473-480 (2013)
    左: Diffuseのライティングテクスチャ
    中 / 右: 異なるカメラからの描画結果 (ライト: 正面から)

    View full-size slide

  8. OLM Lights Lit Sphere の機能
    © OLM Digital, Inc. 8
    移動/スケール/回転
    ハッチングテクスチャ
    ハッチング
    (シェーディングされたストローク)
    リムライト
    (ポジティブ / ネガティブ)
    ライトを使用した結果

    カメラを使用した結果

    View full-size slide

  9. OLM Lights Lit Sphere 描画結果
    © OLM Digital, Inc. 9
    Diffuseのライティング
    テクスチャ
    ハッチング
    テクスチャ

    View full-size slide

  10. 参考文献
    • 参考文献
    – Lit Sphere
    • Sloan, Peter-pike & Martin, William & Gooch, Amy & Gooch, Bruce. The Lit Sphere: A Model for Capturing NPR Shading from Art. In:
    Proceedings of Graphics Interface 2001, pp. 143-150 (2001)
    – Lights Lit Sphere
    • Hideki Todo, Ken Anjyo, Shun'ichi Yokoyama. Lit-Sphere extension for artistic rendering. The Visual Computer, Volume 29, Issue 6, pp. 473-
    480 (2013)
    • 謝辞
    – Cow Mesh: https://github.com/ics-creative/160914_aframe/tree/master/assets
    – Car Mesh: https://sketchfab.com/3d-models/ac-cobra-red-51249171d0ec4af38765a8eb118358b7
    © OLM Digital, Inc. 10

    View full-size slide

  11. Smooth Voronoi
    © OLM Digital, Inc. 11

    View full-size slide

  12. Smooth Voronoi
    • OLM Cellular Noise の Output Type に Polynomial Smooth Distance を追加
    • Smooth Voronoi : ボロノイの境界をフェードする
    © OLM Digital, Inc. 12
    Distance から Polynomial
    Smooth Distance を引き算
    しきい値
    (0.6以下なら白)
    Smooth Voronoi のアニメーション結果
    Cellular Noise (Distance), Cellular Noise (Polynomial Smooth Distance), Smooth Voronoi

    View full-size slide

  13. • 両モードの共通点:
    – シェーディングポイントから最も近い母点 (ボロノイの中心) までの距離を計算
    • Distanceモード (通常):
    – min() 関数を使用し不連続性をもたらす最小距離を計算
    • Polynomial Smooth Distanceモード:
    – polynomial smooth minimum() 関数を使用
    Polynomial Smooth Distance
    © OLM Digital, Inc. 13
    Distance と Polynomial Smooth Distance の比較
    (黒いほど母点に近い)

    View full-size slide

  14. Polynomial Smooth Minimum 関数
    © OLM Digital, Inc. 14
    For more details, see the article about polynomial smooth minimum by Inigo Quilez: https://iquilezles.org/articles/smin/
    𝑓 𝑥 = 1 と 𝑔 𝑥 = 𝑥 − 1 の2つの関数
    𝑚𝑖𝑛(𝑓 𝑥 , 𝑔 𝑥 ) 関数
    ◻ の近くで不連続な見た目になる
    欲しい結果:
    - min() 関数の挙動を維持
    - 不連続な部分を滑らかにする
    Polynomial smooth minimum 関数

    View full-size slide

  15. Polynomial Smooth Minimum 関数
    © OLM Digital, Inc. 15
    For more details, see the article about polynomial smooth minimum by Inigo Quilez: https://iquilezles.org/articles/smin/
    これらの不連続点に補正 𝑤(𝑘) を適用する範囲 −𝑘, 𝑘 を定義:
    𝑠𝑚𝑖𝑛 𝑓 𝑥 , 𝑔 𝑥 , 𝑘 =
    𝑔 𝑥 , 𝑔 𝑥 − 𝑓 𝑥 ≤ −𝑘
    𝑓 𝑥 , 𝑔 𝑥 − 𝑓 𝑥 ≥ 𝑘
    𝑚𝑖𝑛 𝑓 𝑥 , 𝑔 𝑥 − 𝑤 𝑘 , −𝑘 < 𝑔 𝑥 − 𝑓 𝑥 < 𝑘
    Polynomial smooth minimum 関数
    𝑤 𝑘 を次の多項式円弧として定義:
    𝑤 𝑘 =
    0, 𝑔 𝑥 − 𝑓 𝑥 ≤ −𝑘
    0, 𝑔 𝑥 − 𝑓 𝑥 ≥ 𝑘
    𝑠 ∙ ℎn 𝑥 , −𝑘 < 𝑔 𝑥 − 𝑓 𝑥 < 𝑘
    Where:
    - 𝑠 は 𝑤 𝑘 によって定義された多項式円弧の最大値
    - ℎ 𝑥 は [0, 1] の範囲の角度 𝑛 の出力曲線: ℎ 𝑥 = 1 ± 𝑔 𝑥 − 𝑓 𝑥 /𝑘

    View full-size slide

  16. Polynomial Smooth Minimum 関数
    © OLM Digital, Inc. 16
    For more details, see the article about polynomial smooth minimum by Inigo Quilez: https://iquilezles.org/articles/smin/
    polynomial smooth minimum (𝑘パラメータのアニメーション)
    Polynomial Smooth Distance モード
    (polynomial smooth minimum関数を使用)
    Distance モード
    (min() 関数を使用)

    View full-size slide

  17. Cellular Noise – Smooth Voronoi の結果
    © OLM Digital, Inc. 17
    Smooth Voronoi Smooth Voronoi を使い水面の白波を表現

    View full-size slide

  18. OLM Eye
    アニメからリアルまで幅広いスタイルの目の表現
    © OLM Digital, Inc. 18

    View full-size slide

  19. 目の構造
    https://dictionary.goo.ne.jp/word/medical/目のしくみ © OLM Digital, Inc. 19
    瞳孔
    虹彩
    強膜
    角膜
    眼球を上から見た断面図
    眼球のイメージ図

    View full-size slide

  20. 眼球ジオメトリ
    © OLM Digital, Inc. 20
    瞳孔
    虹彩
    強膜
    眼球のイメージ図
    ジオメトリで作成した眼球
    角膜

    View full-size slide

  21. 要件
    • 眼球モデルの形状
    – 楕円体
    – 特殊な形状
    • 猫、爬虫類の目
    • 共通のリグで扱いたい
    • 物理現象の再現
    – 角膜の中の屈折
    – キャッチライト、コースティクス
    • コンポジット時に調整
    • リアル、トゥーン
    © OLM Digital, Inc.
    ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT
    21
    著作権の関係により
    画像を掲載しておりません

    View full-size slide

  22. 基本的な機能
    © OLM Digital, Inc. 22

    View full-size slide

  23. シェーダーで眼球を作成
    • 様々な形の眼球に対応するために……
    シェーダーで目を作成
    • 眼球オブジェクトにUVを投影
    • 視線移動 = 投影方向を変える
    © OLM Digital, Inc. 23
    UV Beauty

    View full-size slide

  24. ルック
    • レンダリング時
    – 瞳孔・虹彩・強膜
    – 虹彩の模様
    – 虹彩や瞳孔のエッジ
    • グラデーション可能
    – 猫目
    – 角膜内の屈折
    – キャッチライト、コースティクス
    • コンポジット時
    – キャッチライトテクスチャを貼り付け
    – 各成分のAOVを使用
    コースティクス
    キャッチライト
    猫目 /
    瞳孔エッジ
    角膜内の屈折
    © OLM Digital, Inc. 24
    デフォルト

    View full-size slide

  25. 虹彩・強膜 (白目) のテクスチャ
    虹彩を横方向につぶした状態
    猫目
    レンダリング結果
    強膜テクスチャ
    © OLM Digital, Inc. 25
    虹彩テクスチャ
    UV

    View full-size slide

  26. 強膜 (白目) のテクスチャのデフォーム
    © OLM Digital, Inc. 26

    View full-size slide

  27. キャッチライト
    © OLM Digital, Inc. 27
    コンポ時の入力
    レンダリング コンポジット
    キャッチライト
    テクスチャ
    投影されたUV
    AOV
    Beauty
    調整
    ・移動
    ・回転
    ・スケール
    UVで貼り付け
    +

    View full-size slide

  28. コースティクス
    • 極座標上の楕円として作成
    • 大きさ・明るさ (パラメータ)
    – 強さ
    – サイズ
    • 位置
    – 角度 (θ) はキーライト方向
    – 中心からの距離 (r) はパラメータ
    r
    θ
    © OLM Digital, Inc. 28
    コースティクスのAOV (RGBとアルファ)

    View full-size slide

  29. Viewport (GPU) プレビューの機能
    • 虹彩テクスチャのマッピング
    • 角膜内の疑似屈折
    • キャッチライト (擬似)
    Viewportプレビュー
    © OLM Digital, Inc. 29

    View full-size slide

  30. リアルなルックの目
    © OLM Digital, Inc. 30

    View full-size slide

  31. 角膜のふくらみ
    • 映り込んだ光の形などが変わる
    – 擬似的に再現
    • シェーダーで法線を計算
    – レイと角膜の疑似楕円体の交差判定
    – 交差点上の楕円体の法線を使用
    R
    角膜の疑似楕円体
    眼球
    H
    N
    P
    © OLM Digital, Inc. 31
    バンプなし
    バンプあり
    R: レイ (視線)
    N: 法線
    H: 角膜の高さ
    P: 評価点

    View full-size slide

  32. コンポジット時の動的なキャッチライト
    © OLM Digital, Inc.
    ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT
    32
    静的なキャッチライト 動的なキャッチライト
    著作権の関係により
    画像を掲載しておりません
    著作権の関係により
    画像を掲載しておりません

    View full-size slide

  33. コンポジット時の動的なキャッチライト
    • レンダリング時に以下を出力
    – キーライトの方向
    – カメラの行列
    – 法線のAOV
    • コンポジットで作成
    © OLM Digital, Inc.
    ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT
    33
    法線のAOV テクスチャの位置の調整
    Lit Sphere
    スクリーンスペースに投影
    された法線をUVに
    自動調整
    スクリーンスペースに投影
    されたキーライト方向
    手動
    位置調整
    + +
    UV =
    著作権の関係により
    画像を掲載しており
    ません

    View full-size slide

  34. セルルックの目
    © OLM Digital, Inc. 34

    View full-size slide

  35. まぶたの影
    • まぶたの影を常に落とす
    – ライト関係なし
    – オクルージョンを使用
    © OLM Digital, Inc. 35
    判定方向による
    影の幅の変化
    判定範囲による
    グラデーション幅の変化
    判定方向のアニメーション

    View full-size slide

  36. トゥーンのキャッチライトとコースティクス
    • 複数のキャッチライト
    • キャッチライトの位置調整
    • コースティクスの位置調整
    • アニメのようにデザインされた虹彩
    – テクスチャで表現
    © OLM Digital, Inc.
    ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT
    36
    著作権の関係により
    画像を掲載しておりません

    View full-size slide

  37. 実写合成の目
    © OLM Digital, Inc. 37

    View full-size slide

  38. 虹彩/強膜のバンプマップ
    © OLM Digital, Inc. 38
    バンプマップ: ON

    View full-size slide

  39. 虹彩/強膜のバンプマップ
    © OLM Digital, Inc. 39
    バンプマップ: OFF

    View full-size slide

  40. 実写に対応
    • キャッチライト、コースティクスのシェーディング機能
    © OLM Digital, Inc. 40
    対応前 対応後

    View full-size slide

  41. 実写に対応
    • Directional Light以外のキーライトに対応
    • キーライトのテクスチャをキャッチライトのテクスチャとして使用
    © OLM Digital, Inc. 41
    IBL画像
    エリアライトとキャッチライトテクスチャ

    View full-size slide

  42. 今後の課題
    • プロシージャルにジオメトリを作成
    – シェーダーは利点があるが、リアリティ向上には限界がある
    • パラメータ調整だけで作れる利点を保つ
    © OLM Digital, Inc. 42
    ジオメトリで眼球を作成した例 OLM Eye と ジオメトリの眼球 との比較

    View full-size slide

  43. まとめ
    • 効率化
    – シェーダーで作成
    – UVを投影
    – コンポジットで調整
    • 表現力
    – テクスチャの使用
    – リアルな表現
    – トゥーンの表現
    – 実写のための改良
    © OLM Digital, Inc.
    ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT
    43
    リアル トゥーン
    著作権の関係により
    画像を掲載しておりません
    著作権の関係により
    画像を掲載しておりません

    View full-size slide

  44. OLM Toon
    アニメのための輪郭線とセルシェーダー
    © OLM Digital, Inc.
    ©TOMY/ZW製作委員会・テレビ東京 44

    View full-size slide

  45. トゥーンシェーダーの役割
    • 作画のアニメに合わせる
    • セルルックのフルCG
    – 作画・イラスト調
    © OLM Digital, Inc. 45
    ©TOMY/ZW製作委員会・テレビ東京
    ©Nintendo·Creatures·GAME FREAK·TV Tokyo·Shoro·JR Kikaku ©Pokémon
    ©2019 PIKACHU PROJECT
    著作権の関係により
    画像を掲載しておりません
    著作権の関係により
    画像を掲載しておりません

    View full-size slide

  46. トゥーンシェーダーの実装
    • OLM Toon for mental ray
    – Arnoldが標準レンダラーになったため使えない
    • ラインの描画方法
    – フィルターで描画
    – シェーディング時に描画
    © OLM Digital, Inc. 46
    レイ
    スクリーン シーン
    フィルターサイズ

    View full-size slide

  47. トゥーンシェーダーの実装
    • OLM Toon for mental ray
    – Arnoldが標準レンダラーになったため使えない
    • ラインの描画方法
    – フィルターで描画
    – シェーディング時に描画
    © OLM Digital, Inc. 47
    レイ
    スクリーン シーン
    フィルターサイズ

    View full-size slide

  48. トゥーンシェーダーの実装
    • OLM Toon for mental ray
    – Arnoldが標準レンダラーになったため使えない
    • ラインの描画方法
    – フィルターで描画
    – シェーディング時に描画
    © OLM Digital, Inc. 48
    レイ
    スクリーン シーン
    フィルターサイズ

    View full-size slide

  49. トゥーンシェーダーの実装
    • OLM Toon for mental ray
    – Arnoldが標準レンダラーになったため使えない
    • ラインの描画方法
    – フィルターで描画
    – シェーディング時に描画
    © OLM Digital, Inc. 49
    レイ
    スクリーン シーン
    フィルターサイズ

    View full-size slide

  50. Arnold aiToon
    • シェーダー + 輪郭線フィルター
    • 太い輪郭線の場合は遅い
    • 輪郭線の太さの微調整が難しい
    • 他のフィルターと組み合わせることができない
    • 機能不足
    • 拡張不可能
    © OLM Digital, Inc. 50
    フィルターサイズ

    View full-size slide

  51. トゥーンシェーダーの自社開発
    • 当時代替ツールがなかった
    • 自社開発の利点
    – デザイナーの要望対応
    – ほかのArnoldシェーダーとの併用
    © OLM Digital, Inc.
    ©Nintendo·Creatures·GAME FREAK·TV Tokyo·Shoro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 51
    ほかのArnoldシェーダー
    著作権の関係により
    画像を掲載しており
    ません

    View full-size slide

  52. OLM Toon の機能の概要
    • セルシェーダー
    – ベース、シャドー、ハイライト
    – トランジション
    • ハード
    • ソフト
    • 輪郭線
    – オブジェクトの間
    – 法線・デプスなどの差
    • Mayaでのプレビューと
    Arnoldでのレンダリング
    © OLM Digital, Inc. 52

    View full-size slide

  53. セルシェーダー
    © OLM Digital, Inc.
    ©TOMY/ZW製作委員会・テレビ東京 53

    View full-size slide

  54. セルシェーダーの基本機能
    • 基本は3色
    – ノーマル、影色、ハイライト
    – 輝度を三色にマップ
    – トランジションの制御が可能
    • ハード
    • ソフト
    • 影とハイライトの追加 (2号影)
    • テクスチャ
    © OLM Digital, Inc. 54
    H1
    NM
    S1
    H2
    S2

    View full-size slide

  55. リムライト
    • ランプのオフセット
    • 後ろからのライトを疑似的に表現
    – カメラの方向と法線の角度で範囲が決まる
    55
    リムなし リムあり リム幅: 大 リム
    アルファ調整
    リム
    グラデーション
    リム
    色変更
    © OLM Digital, Inc.

    View full-size slide

  56. Maya上でのセルシェーダー
    • ビューポートプレビュー
    • UI (アトリビュートエディター)
    – ランプUI
    © OLM Digital, Inc. 56
    セルシェーダーのアトリビュートエディター
    MayaでのGPUプレビュー

    View full-size slide

  57. 輪郭線シェーダー
    © OLM Digital, Inc.
    ©TOMY/ZW製作委員会・テレビ東京 57

    View full-size slide

  58. 輪郭線の基本機能
    • 線の種類
    – オブジェクト、UV、シェーダー、デプス、法線、色
    – ソフトしきい値
    • 種類ごとに設定
    – 色
    – 太さ
    • 透過、レイヤー
    58
    © OLM Digital, Inc.
    ©TOMY/ZW製作委員会・テレビ東京
    セルシェーダー
    輪郭線
    セルシェーダー + 輪郭線
    著作権の関係により
    画像を掲載しておりま
    せん
    著作権の関係により
    画像を掲載しておりま
    せん
    著作権の関係により
    画像を掲載しておりま
    せん

    View full-size slide

  59. 輪郭線の種類
    59
    © OLM Digital, Inc.
    オブジェクト同士の
    交差による輪郭線
    背景との輪郭線
    オブジェクト同士の
    輪郭線 シェーダー
    輪郭線
    法線
    輪郭線
    Wireframe
    輪郭線
    デプス
    輪郭線

    View full-size slide

  60. 輪郭線の見た目
    • 色
    – 単色、テクスチャ
    • 太さ
    – 一定の値、シェーダーごと指定も可能
    – テクスチャで指定可能
    • 手書きの表現
    • 線の削除にも利用可能
    60
    © OLM Digital, Inc.
    ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon
    ©2019 PIKACHU PROJECT
    著作権の関係により
    画像を掲載しておりません

    View full-size slide

  61. コントラスト色の輪郭線
    • 色の差がある部分に線を描画
    • パーツごとに異なる色を設定
    – パーツ間に線を描画
    • タイル状に並べ、タイルごと異なる色に
    61
    Contrast ColorとUV
    © OLM Digital, Inc.
    ©TOMY/ZW製作委員会・テレビ東京
    著作権の関係により
    画像を掲載しておりません
    著作権の関係により
    画像を掲載しておりません

    View full-size slide

  62. ソフトしきい値
    • デプスや法線などによる線のフェードイン・アウト
    © OLM Digital, Inc. 62
    ソフトしきい値なし ソフトしきい値あり
    デプスによる輪郭線

    View full-size slide

  63. 輪郭線の透明度
    • 半透明なオブジェクトの向こうに輪郭線を描く
    • 眼鏡、窓、コックピットなど
    © OLM Digital, Inc. 63
    ©L5/YWP·TX
    著作権の関係により
    画像を掲載しておりません

    View full-size slide

  64. 奥のオブジェクトを手前に描画
    • まゆ毛 を 髪の毛 の手前に描画
    • 虹彩 を まぶたの影 の手前に描画
    © OLM Digital, Inc. 64

    View full-size slide

  65. 奥のオブジェクトを手前に描画 (半透明)
    • 前髪がかかっている目やまゆ毛を半透明に透過
    © OLM Digital, Inc. 65

    View full-size slide

  66. プロダクションにおけるOLM Toonの活用
    • 様々な作品で利用
    • ロボット系
    • 動物、人間
    66
    © OLM Digital, Inc.

    View full-size slide

  67. 技術面
    © OLM Digital, Inc. 67

    View full-size slide

  68. サンプルデータの評価
    • サブピクセルごとにサンプルデータ作成
    • サンプルデータを比較 → ライン描画をマーク
    © OLM Digital, Inc. 68
    …輪郭線のソース
    サブピクセル 輪郭線のソース
    …評価中のサブピクセル
    オブジェクト
    …評価点
    線を描くエッジをマーク

    View full-size slide

  69. 輪郭線の描画
    • エッジへの距離に応じて線のアルファ決定
    © OLM Digital, Inc. 69
    …輪郭線
    …輪郭線 (半透明)
    線を描くエッジ
    線の幅

    View full-size slide

  70. サンプルデータのキャッシュ
    • サンプルデータをキャッシュする
    – 近傍点のデータも必要
    © OLM Digital, Inc. 70
    現在のサブピクセル
    と近傍サブピクセル
    https://docs.arnoldrenderer.com/display/a5af3dsug/system
    バケット
    線の幅

    View full-size slide

  71. サンプリング
    • Arnoldは中心にレイキャストしない
    • サブピクセルの中心に自分でレイキャスト
    © OLM Digital, Inc. 71
    Arnoldのサンプリング例 OLMToonのサンプリング

    View full-size slide

  72. レイヤー (透過)
    • 透過先のサンプルデータも保存
    • レイヤーごとに管理
    • 手順
    – サンプリング (サンプルデータを保存)
    – レイをそのまま通す
    – 次のレイヤーの計算
    • 透過するレイヤー分のメモリが必要
    – 上限設定
    © OLM Digital, Inc. 72

    View full-size slide

  73. OLM Toon VS aiToon
    • OLM Toonはフィルターを使わない
    – 通常のフィルター(ガウシアンなど)を利用できる → 描画結果がきれい
    © OLM Digital, Inc. 73
    線の太さ レンダリング時間 メモリ使用量 カメラレイの数
    OLM Toon aiToon OLM Toon
    (サンプルデータ)
    aiToon
    (AOV)
    OLM Toon aiToon
    1 00:03 00:02 94 MB 273 MB 12,523,233 4,817,475
    2 00:04 00:02 96 MB 273 MB 12,549,051 4,971,780
    4 00:05 00:04 102 MB 290 MB 13,673,467 5,287,680
    10 00:17 00:22 120 MB 346 MB 17,861,315 6,293,700
    20 01:02 02:25 153 MB 449 MB 21,450,627 8,164,800
    線が太くても高速 メモリ消費少ない
    中心への再レイキャストにより
    レイが増える

    View full-size slide

  74. まとめ
    • Arnoldで輪郭線シェーダー実装
    – 自社開発 → カスタマイズ可能
    • いくつかの技術的な問題を解決
    – レンダリング時の後処理
    – グローバルキャッシュ
    – バケットごとのキャッシュ
    • 今後
    – アニメレンダラーの自社開発?
    © OLM Digital, Inc. 74

    View full-size slide

  75. まとめ
    © OLM Digital, Inc. 75
    OLM Toon
    OLM Eye
    OLM Lit Sphere Smooth Voronoi
    ©TOMY/ZW製作委員会・テレビ東京
    ©Nintendo·Creatures·GAME FREAK·TV Tokyo·Shoro·JR Kikaku ©Pokémon
    ©2019 PIKACHU PROJECT
    著作権の関係により
    画像を掲載しておりません
    著作権の関係により
    画像を掲載しておりません

    View full-size slide