「魔法少女まどか☆マギカ Magia Exedra」のIPのキャラクターを描くための3Dルック開発

by gree_tech

Slide 1

Slide 1 text

「魔法少女まどか☆マギカ Magia Exedra」の IPのキャラクターを描くための3Dルック開発株式会社WFS エンジニア礒部直人

Slide 2

Slide 2 text

礒部直人 2021年に株式会社ポケラボ（現：株式会社 WFS）へ入社『魔法少女まどか☆マギカ Magia Exedra』にてテクニカルアーティストとして、とりわけルック開発業務に務めつつ、アーティストのUnityでのワークフロー改善業務なども担当株式会社WFS テクニカルアーティスト 2

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

6 開発環境 Unity 2022.3.62f2 UniversalRenderPipeline 14.0.10 ※発表時点のものになります

Slide 7

Slide 7 text

Slide 8

Slide 8 text

髪ハイライト原作アニメに合わせたハイライト表現頭部ボーンに追従するスクリーンマッピング後ろに回り込むと隠れたり、カメラとの角度によってアーチ状に曲げている 8 シェーダー機能紹介 - キャラクターシェーダー ©Magica Quartet / Aniplex・Madoka Movie Project ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS 実際に使用しているテクスチャ→

Slide 9

Slide 9 text

Slide 10

Slide 10 text

深度マップをライト方向でオフセットしてサンプル深度差を比較してその差分に対してしきい値にかけ得られるリムライトこの仕組みのために深度マップを先に描画している（Depth Prepass）深度リムライト 10 シェーダー機能紹介 - キャラクターシェーダー ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS 深度マップリムライトなしリムライトあり

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

ACESトーンマッピングされることを見越した値にシェーダー側で事前に補正しておくことで、ACESトーンマッピングを利用しながらモデリング時の印象に近づけ、鮮やかな色味が出るようにしたトーンマッピングの事前補正 13 シェーダー機能紹介 - キャラクターシェーダー ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS トーンマッピングそのまま事前補正（調整）

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

22 ShaderGraphの活用

Slide 23

Slide 23 text

Unity ShaderGraphの活用 23 ShaderGraphの活用本プロダクトでは、多くのシェーダーをShaderGraphで作成しました特にルック開発フェーズにおいては以下のメリットを享受できました ● とにかく絵が出るまでが早い ○ 構文エラーなどでも悩まなくて良い ● 結果が想像しやすく、視覚的に理解しやすい ● チーム内でも何度か勉強会を実施 ○ アーティストさんの中には率先して作成し、「これどうですか？」と提案してくださる方もいた

Slide 24

Slide 24 text

24 コードで書くとノードで書くと ShaderGraphの活用

Slide 25

Slide 25 text

ただし、ShaderGraphはより自由に実装したいシチュエーションでは不向きです ● ステンシル ● マルチパス、カスタムパス ● Fogのオンオフ ● メンテナンス性に乏しいなどなど... そういった場合はコードで実装しています（先ほど紹介した３つのシェーダーも最初ShaderGraphで書いたのちにコードで書き直しています） Unity6ではShaderGraphのアップデートもいくつか、ShaderGraph2が開発中という話もある引き続きアップデートに期待したいところコードのシェーダーとの使い分け 25 ShaderGraphの活用

Slide 26

Slide 26 text

26 アート作業担当者との連携

Slide 27

Slide 27 text

ルック開発はスピード感も大事 27 アート作業担当者との連携特にプロダクト立ち上げ初期などのルック開発フェーズにおいては、試行錯誤のためにも品質よりもスピードが求められるシーンが多くありました依頼があればなるべく早く見れる形で投げ返すことを意識そういったフェーズではShaderGraphは大きく活躍してくれましたこんな表現したい... やりました!!

Slide 28

Slide 28 text

アーティストにUnityとなかよくしてもらうために... 28 ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS アート作業担当者との連携 Unityを初めて触るアーティストさんにもルック調整などを依頼することが多かった中で、いくつか作業環境改善のためにエディター拡張を実装しました特に役立った実感があったのはカスタムツールバーでした Unity6.3では、カスタムツールバーがエディター標準機能として実装されるらしいので期待

Slide 29

Slide 29 text

まとめ 29 ● 原作IPの魅力を3Dで再現するためのシェーダー開発 ○ キャラクターの可愛らしさと、劇団イヌカレー（泥犬）先生の世界観の対比的な表現が肝要 ○ 髪のハイライト、前髪の透過、深度リムライト、セルフシャドウなど、原作アニメの表現を 3Dに落とし込むための様々な工夫 ● ShaderGraphによる開発速度とチーム連携の向上 ○ 開発初期フェーズではShaderGraphを積極的に活用し、視覚的で迅速な試行錯誤を実践 ○ より複雑な機能はコードで実装し、適材適所で使い分けることが重要 ● アーティストとの円滑なコミュニケーションとワークフロー改善 ○ ルック開発のスピード感を保つため、依頼には素早く対応し、まず形にして見せることが重要 ○ Unityや作業環境の改善にも取り組んだ