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

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

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

目次 • 「魔法少女まどか☆マギカ Magia Exedra」についての概要と開発要件 • シェーダー機能紹介 ◦ キャラクター用トゥーンシェーダー ◦
エネミー用シェーダー ◦ 背景用シェーダー • Unity ShaderGraphの活用 • アート作業担当者との連携 3 ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS

5 ルック開発の要件原作IPの画作り要素を分析し、3Dゲームに落とし込むためのシェーダー活用劇団イヌカレー（泥犬）先生の作り出す世界と、多彩でかわいらしいキャラクター表現の対比シェーダーでそれぞれの特徴の表現を可能にできるよう、色々な機能を追加 ©2024
Magica Quartet/Aniplex,Magia Exedra Project ©WFS

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

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

前髪の透過眉・まつ毛・瞳にかかった部分の前髪が透過する実装ステンシルで一度完全に透過した状態で描画し、その後上から前髪を半透明で描画し直す 9 シェーダー機能紹介 - キャラクターシェーダー
©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS

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

キャラクターのみのシャドウマップを生成しそれを利用することで、高解像度なリアルタイムシャドウを受け取る実装セルフシャドウ 11 シェーダー機能紹介 - キャラクターシェーダー ©2024 Magica Quartet/Aniplex,Magia
Exedra Project ©WFS セルフシャドウマップセルフシャドウなしセルフシャドウあり

キャラクターの頭部付近の頂点をカメラの奥行き方向に潰すことで、視野角の差によってセルルックキャラクターの顔の印象が変わりづらいようにする機能パースキャンセル 12 シェーダー機能紹介 - キャラクターシェーダー ©2024 Magica Quartet/Aniplex,Magia
Exedra Project ©WFS パースキャンセルなしパースキャンセルあり

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

スクリーンマッピング UVではなく、指定のボーンを中心に追従するスクリーン座標でテクスチャをマッピングアスペクト比や、カメラからの距離・FOVが変わっても見た目が変化しない補正 15 シェーダー機能紹介 - エネミーシェーダー ©2024
Magica Quartet/Aniplex,Magia Exedra Project ©WFS

ボロノイうねりモデルの形状がボロノイノイズによってうねるような動きをするようになるボロノイノイズをスクリーン上でサンプルし、その結果でメッシュの頂点をスクリーン上で左右に揺らす 16 シェーダー機能紹介 - エネミーシェーダー
©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS

フリップブックモデルやアニメーションだけでは表現できない部分はFlipbookのテクスチャで表現 17 シェーダー機能紹介 - エネミーシェーダー ©2024 Magica Quartet/Aniplex,Magia
Exedra Project ©WFS

22 ShaderGraphの活用

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

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

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

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

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

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

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

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

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

gree_tech PRO

More Decks by gree_tech

Other Decks in Technology

Featured

Transcript