OLM R&D祭 2020 11/26 OLM EYE: アニメからリアルまで幅広いスタイルの目の表現 / matsuri2020-Eye

アニメ作品からリアルな表現まで、幅広いスタイルの目を作成するためのシステムについて紹介いたします。より簡単に、よりフレキシブルに、より表現力豊かに、キャラクターの目を作成することを目指します。（甘口)

Transcript

1. OLM Eye - アニメからリアルまで幅広いスタイルの目の表現 - 市川 翔大 Alexandre Derouet-Jourdan Marc Salvati 1
2. 目次 • どうやって目を作る？ • Version. 01 – ルドルフとイッパイアッテナ (2016) – スナックワールド (2017-2018) • Version. 02 – ミュウツーの逆襲 EVOLUTION (2019) – ポケモンマスターズ (2019) • 結果 © OLM Digital, Inc. 2
3. 著作権の関係により 画像を掲載しておりません 目の構造 https://dictionary.goo.ne.jp/word/medical/目のしくみ © OLM Digital, Inc. 3 瞳孔 虹彩 強膜 角膜 眼球を上から見た断面図 眼球のイメージ図
4. 要件 • 眼球モデルの形状 – 楕円体 – 特殊な形状 • 猫・爬虫類の目 • 共通のリグで扱いたい • 物理現象の再現 – 角膜の中の屈折 – キャッチライト、コースティクス • コンポジット時に調整 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 4 著作権の関係により 画像を掲載しておりません
5. Version. 01 - 最初のバージョン - © OLM Digital, Inc. 5
6. 使用した作品 © OLM Digital, Inc. ©2016「ルドルフとイッパイアッテナ」製作委員会 / ©LEVEL-5／スナックワールドプロジェク卜・テレビ東京 6 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
7. シェーダで眼球を作成 • 様々な形の眼球に対応するために…… シェーダで目を作成 • 眼球オブジェクトにUVを投影 • 視線移動 ＝ 投影方向を変える © OLM Digital, Inc. 7 UV Beauty
8. ルック • フルCG作品のために作成 • レンダリング時 – 虹彩の模様 – 虹彩や瞳孔のエッジ、グラデーション – 猫目 – 角膜内の屈折 – キャッチライト、コースティクス • コンポジット時 – キャッチライトテクスチャを貼り付け – 各成分をAOVを使用 コースティクス キャッチライト キャットネス / 瞳孔エッジ 角膜内の屈折 © OLM Digital, Inc. 8
9. レンダリング・コンポジットフロー シェーダ、リグ への入力 ・視線方向 ・キーライト ・各部の色 ・瞳孔・虹彩の形状 ・コースティクス コンポジット コースティクスAOV RGB + アルファ 虹彩の模様 投影されたUV AOV Beauty コンポ時の入力 ・キャッチライト テクスチャ レンダリング © OLM Digital, Inc. 9
10. リグ © OLM Digital, Inc. ©LEVEL-5／スナックワールドプロジェク卜・テレビ東京 10 リグで視線をコントロール 投影されたUVを使って目を描画 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
11. 目の模様 • 虹彩の模様 – 極座標のランプグラデーション • 虹彩と瞳孔のエッジ 虹彩の模様 瞳孔と虹彩のエッジ © OLM Digital, Inc. ©LEVEL-5／スナックワールドプロジェク卜・テレビ東京 11 著作権の関係により 画像を掲載しておりません
12. 猫目の作り方 1. W と H から大きな2つの外円を計算 – W: 瞳孔の幅 – H: 瞳孔の高さ © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 12 H W H W 著作権の関係により 画像を掲載しておりません
13. 猫目の作り方 2. 大きな外円と B から内円を計算 – W: 瞳孔の幅 – H: 瞳孔の高さ – B: 瞳孔の上下の丸み © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 13 B H W B/2 R 著作権の関係により 画像を掲載しておりません
14. 角膜内の屈折 • 瞳孔は奥にあるので、横から見ると凹んで見える • これを疑似的に再現 屈折なし / あり © OLM Digital, Inc. 14 − 1 − 2 = 2 o: 原点 (瞳孔の中心) p: シェーディングポイント c: シフト後の瞳孔の中心
15. キャッチライトとコースティクス © OLM Digital, Inc. ©LEVEL-5／スナックワールドプロジェク卜・テレビ東京 15 著作権の関係により 画像を掲載しておりません
16. 著作権の関係により 画像を掲載しておりません キャッチライトとコースティクス © OLM Digital, Inc. ©LEVEL-5／スナックワールドプロジェク卜・テレビ東京 16 キャッチライト コースティクス
17. キャッチライト © OLM Digital, Inc. 17 コンポ時の入力 レンダリング コンポジット キャッチライト テクスチャ 投影されたUV AOV Beauty 調整 ・移動 ・回転 ・スケール UVで貼り付け +
18. コースティクス • 極座標上の楕円として作成 • 大きさ・明るさ (パラメータ) – 強さ – サイズ • 位置 – 角度 (θ) はキーライト方向 – 中心からの距離 (r) はパラメータ r θ © OLM Digital, Inc. 18 コースティクスのAOV (RGBとアルファ)
19. 瞳孔や虹彩のサイズアニメーション © OLM Digital, Inc. ©LEVEL-5／スナックワールドプロジェク卜・テレビ東京 19 著作権の関係により 画像を掲載しておりません
20. 瞳孔や虹彩のサイズアニメーション © OLM Digital, Inc. ©LEVEL-5／スナックワールドプロジェク卜・テレビ東京 20 著作権の関係により 画像を掲載しておりません
21. Viewport (GPU) プレビュー • 虹彩、瞳孔の形、色のみプレビュー Viewportプレビュー © OLM Digital, Inc. 21
22. Version. 02 - 改良版 - よりリアルな作品、トゥーン作品にも対応 © OLM Digital, Inc. 22
23. 使用したプロジェクト © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 23 ポケモンマスターズ CM映像 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
24. OLM Eye Version.02 • よりリアルに – 虹彩と強膜のテクスチャ • 瞳孔や虹彩の形状に追従 – 角膜のふくらみ – キャッチライト • ライト方向や眼球の形状を反映 • トゥーン作品に対応 – まぶたの影 – 複数のキャッチライト – コースティクスの位置を自由に調整 • Viewport (GPU) プレビューを強化 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 24 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
25. 虹彩・強膜 (白目) のテクスチャ 虹彩を横方向につぶした状態 猫目 レンダリング結果 強膜テクスチャ © OLM Digital, Inc. 25 虹彩テクスチャ UV
26. 虹彩のUVマッピング 45° 135° 225° 315° 45° 135° 225° 315° P © OLM Digital, Inc. 26 投影UVの座標 虹彩テクスチャのUV座標 Q : シェーディングポイント P : UV座標上の点 内側 1 = 1 + 1 cos 1 + 1 = 1 1 2 2 −= −1 1 (, ) 2 (, ) 外側 2 = 2 + 2 cos 2 + 2 1 (, ) = 1 1 − + 2 2 (, ) = 1 1 − + 2 以下を繰り返す = 1 + 2 − 1 = 1 − × 135° + × 225° − 135° = 1 − × 1 + × 2 = 1 + 2 − 1 内側 外側の円弧
27. 強膜 (白目) のテクスチャ、UVマッピング • 虹彩は縦横につぶして楕円にできる • 虹彩 (内側) から 強膜の外周 (外側) への座標の連続性 • Q (シェーディングポイント) に対応する UV座標を計算 © OLM Digital, Inc. 27
28. 強膜 (白目) のテクスチャ、UVマッピング • 虹彩は縦横につぶして楕円にできる • 虹彩 (内側) から 強膜の外周 (外側) への座標の連続性 • Q (シェーディングポイント) に対応す るUV座標を計算 ? © OLM Digital, Inc. 28
29. 強膜 (白目) のテクスチャ、UVマッピング • Q (シェーディングポイント) から P (UV座標上の点) を見つける – 三角形 EJI において Intercept Theorem (平行線と線分の比の定理) を使用 • a : b = c : d – 多項式を解く © OLM Digital, Inc. 29 a b c d
30. 強膜 (白目) のテクスチャのデフォーム © OLM Digital, Inc. 30
31. 角膜のふくらみ • 映り込んだ光の形などが変わる – 擬似的に再現 • シェーダで法線を計算 – レイと角膜の疑似楕円体の交差判定 – 交差点上の楕円体の法線を使用 R 角膜の疑似楕円体 眼球 H N P © OLM Digital, Inc. 31 バンプなし バンプあり R: レイ (視線) N: 法線 H: 角膜の高さ P: 評価点
32. コンポジット時の動的なキャッチライト © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 32 静的なキャッチライト 動的なキャッチライト 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
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 = 著作権の関係により 画像を掲載しておりません
34. コンポジット時の動的なキャッチライト © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 34 著作権の関係により 画像を掲載しておりません
35. まぶたの影 • まぶたの影を常に落とす – ライト関係なし – オクルージョンを使用 © OLM Digital, Inc. 35 判定方向による 影の幅の変化 判定範囲による グラデーション幅の変化 判定方向のアニメーション
36. まぶたの影 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 36 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
37. トゥーンのキャッチライトとコースティクス • 複数のキャッチライト • キャッチライトの位置調整 • コースティクスの位置調整 • アニメのようにデザインされた虹彩 – テクスチャで表現 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 37 著作権の関係により 画像を掲載しておりません
38. Viewport (GPU) プレビューの機能を強化 • 虹彩テクスチャのマッピング • 虹彩のエッジを描画 • 角膜内の疑似屈折 • キャッチライト (擬似) 以前 (ver.01) のViewportプレビュー / 現在 (ver.02) のViewportプレビュー © OLM Digital, Inc. 38
39. まとめ • 効率化 – シェーダで作成 – UVを投影 – コンポジットで調整 • 表現力 – テクスチャの使用 – リアルな表現 – トゥーンの表現 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 39 リアル トゥーン 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません