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