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

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

View Slide

目次
© 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 Slide

OLM Lit Sphere

View Slide

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

View Slide

OLM Lit Sphere - Always Look At Camera -
メッシュ
カメラ
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 Slide

OLM Lights Lit Sphere
• OLM Lights Lit Sphere: カメラだけでなくライト情報も使用
– 移動/スケール/回転によるシェーディングの制御
– メッシュ上で一貫性のあるレンダリング
– 効果: リム、ストローク、など
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 Slide

• Lights Lit Sphere: メッシュの法線を使い、各ライトからテクスチャを投影
• DiffuseとSpecularライティングをサポート
OLM 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)
左: Diffuseのライティングテクスチャ
中 / 右: 異なるカメラからの描画結果 (ライト: 正面から)

View Slide

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

View Slide

OLM Lights Lit Sphere 描画結果
Diffuseのライティング
テクスチャ
ハッチング
テクスチャ

View Slide

参考文献
• 参考文献
– 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

View Slide

Smooth Voronoi

View Slide

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

View Slide

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

View Slide

Polynomial Smooth Minimum 関数
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 Slide

これらの不連続点に補正 𝑤(𝑘) を適用する範囲 −𝑘, 𝑘 を定義:
𝑠𝑚𝑖𝑛 𝑓 𝑥 , 𝑔 𝑥 , 𝑘 =
𝑔 𝑥 , 𝑔 𝑥 − 𝑓 𝑥 ≤ −𝑘
𝑓 𝑥 , 𝑔 𝑥 − 𝑓 𝑥 ≥ 𝑘
𝑚𝑖𝑛 𝑓 𝑥 , 𝑔 𝑥 − 𝑤 𝑘 , −𝑘 < 𝑔 𝑥 − 𝑓 𝑥 < 𝑘
Polynomial smooth minimum 関数
𝑤 𝑘 を次の多項式円弧として定義:
𝑤 𝑘 =
0, 𝑔 𝑥 − 𝑓 𝑥 ≤ −𝑘
0, 𝑔 𝑥 − 𝑓 𝑥 ≥ 𝑘
𝑠 ∙ ℎn 𝑥 , −𝑘 < 𝑔 𝑥 − 𝑓 𝑥 < 𝑘
Where:
- 𝑠 は 𝑤 𝑘 によって定義された多項式円弧の最大値
- ℎ 𝑥 は [0, 1] の範囲の角度 𝑛 の出力曲線: ℎ 𝑥 = 1 ± 𝑔 𝑥 − 𝑓 𝑥 /𝑘

View Slide

polynomial smooth minimum (𝑘パラメータのアニメーション)
Polynomial Smooth Distance モード
(polynomial smooth minimum関数を使用)
Distance モード
(min() 関数を使用)

View Slide

Cellular Noise – Smooth Voronoi の結果
Smooth Voronoi Smooth Voronoi を使い水面の白波を表現

View Slide

OLM Eye
アニメからリアルまで幅広いスタイルの目の表現

View Slide

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

View Slide

眼球ジオメトリ
瞳孔
虹彩
強膜
眼球のイメージ図
ジオメトリで作成した眼球
角膜

View Slide

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

View Slide

基本的な機能

View Slide

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

View Slide

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

View Slide

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

View Slide

強膜 (白目) のテクスチャのデフォーム

View Slide

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

View Slide

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

View Slide

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

View Slide

リアルなルックの目

View Slide

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

View Slide

コンポジット時の動的なキャッチライト
32
静的なキャッチライト動的なキャッチライト

View Slide

コンポジット時の動的なキャッチライト
• レンダリング時に以下を出力
– キーライトの方向
– カメラの行列
– 法線のAOV
• コンポジットで作成
33
法線のAOV テクスチャの位置の調整
Lit Sphere
スクリーンスペースに投影
された法線をUVに
自動調整
スクリーンスペースに投影
されたキーライト方向
手動
位置調整
+ +
UV =
画像を掲載しており
ません

View Slide

セルルックの目

View Slide

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

View Slide

トゥーンのキャッチライトとコースティクス
• 複数のキャッチライト
• キャッチライトの位置調整
• コースティクスの位置調整
• アニメのようにデザインされた虹彩
– テクスチャで表現
36

View Slide

実写合成の目

View Slide

虹彩/強膜のバンプマップ
バンプマップ: ON

View Slide

虹彩/強膜のバンプマップ
バンプマップ: OFF

View Slide

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

View Slide

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

View Slide

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

View Slide

まとめ
• 効率化
– シェーダーで作成
– UVを投影
– コンポジットで調整
• 表現力
– テクスチャの使用
– リアルな表現
– トゥーンの表現
– 実写のための改良
43
リアルトゥーン

View Slide

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

View Slide

トゥーンシェーダーの役割
• 作画のアニメに合わせる
• セルルックのフルCG
– 作画・イラスト調

View Slide

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

View Slide

レイ

View Slide

Arnold aiToon
• シェーダー＋輪郭線フィルター
• 太い輪郭線の場合は遅い
• 輪郭線の太さの微調整が難しい
• 他のフィルターと組み合わせることができない
• 機能不足
• 拡張不可能

View Slide

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

View Slide

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

View Slide

セルシェーダー

View Slide

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

View Slide

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

View Slide

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

View Slide

輪郭線シェーダー

View Slide

輪郭線の基本機能
• 線の種類
– オブジェクト、UV、シェーダー、デプス、法線、色
– ソフトしきい値
• 種類ごとに設定
– 色
– 太さ
• 透過、レイヤー
58
セルシェーダー
輪郭線
セルシェーダー＋輪郭線
画像を掲載しておりま
せん
せん
せん

View Slide

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

View Slide

輪郭線の見た目
• 色
– 単色、テクスチャ
• 太さ
– 一定の値、シェーダーごと指定も可能
– テクスチャで指定可能
• 手書きの表現
• 線の削除にも利用可能
60
©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon

View Slide

コントラスト色の輪郭線
• 色の差がある部分に線を描画
• パーツごとに異なる色を設定
– パーツ間に線を描画
• タイル状に並べ、タイルごと異なる色に
61
Contrast ColorとUV

View Slide

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

View Slide

奥のオブジェクトを手前に描画
• まゆ毛を髪の毛の手前に描画
• 虹彩をまぶたの影の手前に描画

View Slide

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

View Slide

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

View Slide

技術面

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

OLM Toon VS aiToon
• OLM Toonはフィルターを使わない
– 通常のフィルター(ガウシアンなど)を利用できる → 描画結果がきれい
線の太さレンダリング時間メモリ使用量カメラレイの数
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 Slide

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

View Slide

まとめ
OLM Toon
OLM Eye
OLM Lit Sphere Smooth Voronoi

View Slide

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

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

OLM Digital R&D
PRO

More Decks by OLM Digital R&D

Other Decks in Technology

Featured

Transcript

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

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

OLM Digital R&D PRO

More Decks by OLM Digital R&D

Other Decks in Technology

Featured

Transcript

OLM Digital R&D
PRO