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 リアル トゥーン 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません