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

GREE Tech Conference 2025で発表された資料です。
https://techcon.gree.jp/2025/session/TrackC-1

1. 「魔法少女まどか☆マギカ Magia Exedra」の IPのキャラクターを描くための3Dルック開発 株式会社WFS エンジニア 礒部 直人
2. 礒部 直人 2021年に株式会社ポケラボ（現：株式会社 WFS）へ入社 『魔法少女まどか☆マギカ Magia Exedra』にて テクニカルアーティストとして、とりわけルック 開発業務に務めつつ、アーティストのUnityでの ワークフロー改善業務なども担当 株式会社WFS テクニカルアーティスト 2
3. 目次 • 「魔法少女まどか☆マギカ Magia Exedra」についての概要と開発要件 • シェーダー機能紹介 ◦ キャラクター用トゥーンシェーダー ◦ エネミー用シェーダー ◦ 背景用シェーダー • Unity ShaderGraphの活用 • アート作業担当者との連携 3 ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS
4. 4 「魔法少女まどか☆マギカ Magia Exedra」について ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS
5. 5 ルック開発の要件 原作IPの画作り要素を分析し、3Dゲームに 落とし込むためのシェーダー活用 劇団イヌカレー（泥犬）先生の作り出す世界 と、多彩でかわいらしいキャラクター表現の 対比 シェーダーでそれぞれの特徴の表現を可能に できるよう、色々な機能を追加 ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS
6. 6 開発環境 Unity 2022.3.62f2 UniversalRenderPipeline 14.0.10 ※発表時点のものになります
7. 7 シェーダー機能紹介 キャラクターシェーダー ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS
8. 髪ハイライト 原作アニメに合わせたハイライト表現 頭部ボーンに追従するスクリーンマッピング 後ろに回り込むと隠れたり、カメラとの角度 によってアーチ状に曲げている 8 シェーダー機能紹介 - キャラクターシェーダー ©Magica Quartet / Aniplex・Madoka Movie Project ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS 実際に使用しているテクスチャ→
9. 前髪の透過 眉・まつ毛・瞳にかかった部分の前髪が透過 する実装 ステンシルで一度完全に透過した状態で 描画し、その後上から前髪を半透明で 描画し直す 9 シェーダー機能紹介 - キャラクターシェーダー ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS
10. 深度マップをライト方向でオフセットしてサンプル 深度差を比較してその差分に対してしきい値にかけ得られるリムライト この仕組みのために深度マップを先に描画している（Depth Prepass） 深度リムライト 10 シェーダー機能紹介 - キャラクターシェーダー ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS 深度マップ リムライトなし リムライトあり
11. キャラクターのみのシャドウマップを生成しそれを利用することで、高解像度なリアルタイムシ ャドウを受け取る実装 セルフシャドウ 11 シェーダー機能紹介 - キャラクターシェーダー ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS セルフシャドウマップ セルフシャドウなし セルフシャドウあり
12. キャラクターの頭部付近の頂点をカメラの奥行き方向に潰すことで、 視野角の差によってセルルックキャラクターの顔の印象が変わりづらいようにする機能 パースキャンセル 12 シェーダー機能紹介 - キャラクターシェーダー ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS パースキャンセルなし パースキャンセルあり
13. ACESトーンマッピングされることを見越した値にシェーダー側で事前に補正しておくことで、ACESトーンマッ ピングを利用しながらモデリング時の印象に近づけ、鮮やかな色味が出るようにした トーンマッピングの事前補正 13 シェーダー機能紹介 - キャラクターシェーダー ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS トーンマッピングそのまま 事前補正（調整）
14. シェーダー機能紹介 エネミーシェーダー 14 ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS
15. スクリーンマッピング UVではなく、指定のボーンを中心に追従する スクリーン座標でテクスチャをマッピング アスペクト比や、カメラからの距離・FOVが 変わっても見た目が変化しない補正 15 シェーダー機能紹介 - エネミーシェーダー ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS
16. ボロノイうねり モデルの形状がボロノイノイズによってうね るような動きをするようになる ボロノイノイズをスクリーン上でサンプルし、 その結果でメッシュの頂点をスクリーン上で 左右に揺らす 16 シェーダー機能紹介 - エネミーシェーダー ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS
17. フリップブック モデルやアニメーションだけでは表現できな い部分はFlipbookのテクスチャで表現 17 シェーダー機能紹介 - エネミーシェーダー ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS
18. 18 シェーダー機能紹介 背景シェーダー ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS
19. 指定したテクスチャを、UVスクロールさせながら２回描画し、乗算や加算で合成できる 天球などで使われることが多い 多重UVスクロール 19 シェーダー機能紹介 - 背景シェーダー ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS
20. フローマップ用のテクスチャで流体の擬似表現ができる 天球背景などに違和感のある動きを追加することも可能 フローマップ 20 シェーダー機能紹介 - 背景シェーダー ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS
21. PBRシェーダーがベースになっていますが、Unlitな状態との補間によって 逆に平面的な印象を与えることが可能 Unlit状態との補間 21 シェーダー機能紹介 - 背景シェーダー ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS
22. 22 ShaderGraphの活用
23. Unity ShaderGraphの活用 23 ShaderGraphの活用 本プロダクトでは、多くのシェーダーをShaderGraphで作成しました 特にルック開発フェーズにおいては以下のメリットを享受できました • とにかく絵が出るまでが早い ◦ 構文エラーなどでも悩まなくて良い • 結果が想像しやすく、視覚的に理解しやすい • チーム内でも何度か勉強会を実施 ◦ アーティストさんの中には率先して作成し、 「これどうですか？」と提案してくださる方もいた
24. 24 コードで書くと ノードで書くと ShaderGraphの活用
25. ただし、ShaderGraphはより自由に実装したいシチュエーションでは不向きです • ステンシル • マルチパス、カスタムパス • Fogのオンオフ • メンテナンス性に乏しい などなど... そういった場合はコードで実装しています （先ほど紹介した３つのシェーダーも最初ShaderGraphで書いたのちにコードで書き直しています） Unity6ではShaderGraphのアップデートもいくつか、ShaderGraph2が開発中という話もある 引き続きアップデートに期待したいところ コードのシェーダーとの使い分け 25 ShaderGraphの活用
26. 26 アート作業担当者との連携
27. ルック開発はスピード感も大事 27 アート作業担当者との連携 特にプロダクト立ち上げ初期などのルック開発 フェーズにおいては、 試行錯誤のためにも品質よりもスピードが 求められるシーンが多くありました 依頼があればなるべく早く見れる形で投げ返す ことを意識 そういったフェーズではShaderGraphは 大きく活躍してくれました こんな表現したい... やりました!!
28. アーティストにUnityとなかよくしてもらうために... 28 ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS アート作業担当者との連携 Unityを初めて触るアーティストさんにもルック調整などを依頼することが多かった中で、いくつ か作業環境改善のためにエディター拡張を実装しました 特に役立った実感があったのはカスタムツールバーでした Unity6.3では、カスタムツールバーがエディター標準機能として実装されるらしいので期待
29. まとめ 29 • 原作IPの魅力を3Dで再現するためのシェーダー開発 ◦ キャラクターの可愛らしさと、劇団イヌカレー（泥犬）先生の世界観の対比的な表現が肝要 ◦ 髪のハイライト 、前髪の透過 、深度リムライト 、セルフシャドウ など、原作アニメの表現を 3Dに落とし込むための様々な工夫 • ShaderGraphによる開発速度とチーム連携の向上 ◦ 開発初期フェーズではShaderGraphを積極的に活用し、視覚的で迅速な試行錯誤を実践 ◦ より複雑な機能はコードで実装し、適材適所で使い分けることが重要 • アーティストとの円滑なコミュニケーションとワークフロー改善 ◦ ルック開発のスピード感を保つため、依頼には素早く対応し、まず形にして見せることが重要 ◦ Unityや作業環境の改善にも取り組んだ
30. ご清聴ありがとうございました 30 ©2024 Magica Quartet/Aniplex,Magia Exedra Project ©WFS