2Dキャラをリッチに魅せる描画テクニック

2Dキャラのクオリティをもう一段階上げたいと思ったことはありませんか。このセッションでは2Dキャラに適用できる「擬似ライティング」「擬似被写界深度」など、Universal Render Pipelineにおける実装例を交えて、2Dキャラをリッチに魅せるテクニックを紹介します。

Transcript

1. 2Dキャラをリッチに 魅せる描画テクニック 2022/02/03 CA.Unity
2. 自己紹介 ⼆宮 章太 2015年にサイバーエージェントに⼊社、Sumzapに配属 iOS/Android向けUnity製ゲームアプリの新規開発を多数経験 対戦アクションバトル/コマンドバトル/UI/ADVなど 幅広い機能の開発に携わる 最近では, ShaderやRendering Pipelineの拡張などを駆使して Unityのデフォルトの機能ではできないような特別な演出を実現する業務が多い いろいろ開発をする中で出てきたアイデアの中から 2Dキャラをリッチに⾒せる仕組みを紹介します
3. はなすこと 擬似ライティング 光彩表現 擬似被写界深度
4. 擬似ライティング/光彩表現
10. 擬似ライティング/光彩表現 システム 1. 元の絵に対してQuadを重ねる 2. 対象Rendererからマスクテクスチャを⽣成 3. マスクテクスチャをShaderで⾊付けし、元絵にブレンド (Additive/AlphaBlend/Multiply) 元絵を外して Quadだけを表⽰した図 対象Renderer をキャプチャ アルファチャネル を抽出 加⼯ Quadのテクスチャ として設定して 元絵の上から描画
11. 擬似ライティング/光彩表現 システム URPでは RenderFeatureにより、描画処理の途中に任意の描画処理を差し込める 重ねたQuadに設定したマスクテクスチャを毎フレーム更新するため 通常の描画⼯程の前にイベントを差し込む 通常の描画処理 マスクテクスチャ の更新処理 RenderFeatureにより 描画処理を挿⼊
12. Rendererのキャプチャ 対象RendererのみのRenderingを⾏う - キャプチャを挟むことでSpineやLive2Dも対象にできる - もし不要ならキャプチャはスキップして元画像をそのまま使ってもよい
14. 該当エリアをキャプチャするためのmatrix を設定する DisableにしたCameraを⽤意しこのエリア のみ映すよう配置 Camera.projectionMatrix Camera. worldToCameraMatrix で、パラメタを取得できる
15. 対象Rendererには renderingLayerMaskの設定をしておく Rendering時にカリングに利⽤する あとはRenderingしてキャプチャ完了
16. キャプチャからアルファ画像 取れたキャプチャからアルファ画像を作成
17. 加工方法色々 抽出された アルファチャネル 外側光彩 内側光彩 内外光彩 ブラー グラデーション ブラー グラデーション
18. 事例色々 オーラ Light Shadow
19. 擬似被写界深度
20. 2Dキャラ x 被写界深度について ２Dキャラへの被写界深度表現は難しい ZWrite Offだと裏のアイテム依存してボケる
21. 2Dキャラ x 被写界深度について ２Dキャラへの被写界深度表現は難しい ZWrite Onにすると… Z Fightingしたり 地⾯と⼲渉したりする
22. 2Dキャラ x 被写界深度について ２Dキャラへの被写界深度表現は難しい ZWrite Onにすると… Z Fighting: 深度Offset 地⾯と⼲渉: 位置調整
23. 2Dキャラ x 被写界深度について ２Dキャラへの被写界深度表現は難しい ZWrite Onにすると… Z Fighting: 深度Offset 地⾯と⼲渉: 位置調整 透明pixelもZ書かれる問題
24. 2Dキャラ x 被写界深度について ２Dキャラへの被写界深度表現は難しい ZWrite Onにすると… Z Fighting: 深度Offset 地⾯と⼲渉: 位置調整 透明pixelもZ: アルファカットアウト
25. 2Dキャラ x 被写界深度について ２Dキャラへの被写界深度表現は難しい ZWrite Onにすると… Z Fighting: 深度Offset 地⾯と⼲渉: 位置調整 透明pixelもZ: アルファカットアウト それでも半透明部分は綺麗にならない
26. 2Dキャラ x 被写界深度について ２Dキャラへの被写界深度表現は難しい ZWrite Onにすると… 左の半透明部分は本来 ぼかした背景の上に鮮明に載せたい 逆に, 背景にピントを当てるなら 鮮明な背景の上にぼかして載せたい ポストエフェクトで ⼀度にぼかすのは無理
27. 擬似被写界深度 奥レイヤ/⼿前レイヤの２層ブラー ⼀度のポストエフェクトでは厳しいので２回に分けよう というアイデア ⼿前レイヤ描画 奥レイヤ描画 Blur
28. 擬似被写界深度 奥レイヤ/⼿前レイヤの２層ブラー - 半透明もサポート
29. 応用 2レイヤ Directional Blur
30. 応用 2レイヤ Directional Blur 奥レイヤ/通常描画/⼿前レイヤの3層分離 2層ポストエフェクト 奥レイヤ描画 Directional Blur Directional Blur ⼿前レイヤ描画 通常描画
31. 3層描画システム RenderFeatureにより 描画処理を挿⼊ 通常の半透明描画処理 奥レイヤの描画 ポストエフェクト 通常の不透明描画処理 ⼿前レイヤの描画 ポストエフェクト バッファ合成 通常のポストプロセス RenderFeatureにより 描画処理を挿⼊ Directional Blur 奥レイヤ描画 通常描画 ⼿前レイヤ描画 Directional Blur
32. 3層描画システム RenderFeatureにより 描画処理を挿⼊ 通常の半透明描画処理 奥レイヤの描画 ポストエフェクト 通常の不透明描画処理 ⼿前レイヤーの描画 ポストエフェクト バッファ合成 通常のポストプロセス RenderFeatureにより 描画処理を挿⼊ Directional Blur 奥レイヤ描画 通常描画 ⼿前レイヤ描画 Directional Blur 奥レイヤオブジェクトにRenderer.renderingLayerMaskを設定 カリング処理により奥レイヤのみを描画 DirectionalBlurのポストエフェクトを⾏う
33. 3層描画システム RenderFeatureにより 描画処理を挿⼊ 通常の半透明描画処理 奥レイヤーの描画 ポストエフェクト 通常の不透明描画処理 ⼿前レイヤの描画 ポストエフェクト バッファ合成 通常のポストプロセス RenderFeatureにより 描画処理を挿⼊ Directional Blur 奥レイヤ描画 通常描画 ⼿前レイヤ描画 Directional Blur 同様に、通常の半透明描画処理、⼿前レイヤオブジェクトにも Renderer.renderingLayerMaskを設定 カリング処理により各レイヤを描画する
34. 手前レイヤの描画と合成 アルファ付きRenderTextureにオブジェクトとポストエフェクトを描画する その後、フレームバッファに合成 ⼿前レイヤに描画するオブジェクトの持つShaderのブレンドモードを Blend One OneMinusSrcAlpha に制限することで加算とアルファブレンドをサポートした 通常の半透明描画処理 ⼿前レイヤの描画 ポストエフェクト バッファ合成 通常描画 ⼿前レイヤ描画 Directional Blur
35. 描画パスの最適化 ポストエフェクトを使わない時には奥/⼿前レイヤ描画パスが無駄になる ポストエフェクトの使⽤有無によって, パスを省略したい 通常の半透明描画処理 奥レイヤの描画 ポストエフェクト 通常の不透明描画処理 ⼿前レイヤの描画 ポストエフェクト バッファ合成 通常のポストプロセス Directional Blur 奥レイヤ描画 通常描画 ⼿前レイヤ描画 Directional Blur
36. 描画パスの最適化 通常の半透明描画処理 奥レイヤの描画 ポストエフェクト 通常の不透明描画処理 ⼿前レイヤの描画 ポストエフェクト バッファ合成 通常のポストプロセス Directional Blur 奥レイヤ描画 通常描画 ⼿前レイヤ描画 Directional Blur URPの半透明描画パス の描画対象のrenderingLayerMaskを動的に変更し 不要なパスの描画対象も⼀緒に描画する UniversalRenderer.Setupにて半透明描画パスのもつFilteringSettingsを加⼯し、 該当のポストエフェクトがないときには - 奥/⼿前レイヤ描画パス の対象も半透明描画パスで描画 - RenderFeatureで追加した奥/⼿前レイヤ描画パスを無効化 した ポストエフェクトが有効なフレームのみ 奥/⼿前レイヤ描画パスを実⾏することが可能になった
37. まとめ
38. まとめ 注⽬オブジェクトをキャプチャ, 加⼯しブレンドする 擬似ライティング/光彩表現 を紹介しました 対象Renderer をキャプチャ アルファチャネル を抽出 加⼯ Quadのテクスチャ として設定して 元絵の上から描画 背景と合わせた図
39. まとめ オブジェクト描画パスを分離し、ポストエフェクトをそれぞれかける - 2Dキャラに対する擬似被写界深度 - 2レイヤ Directional Blur をそれぞれ紹介しました 奥レイヤ描画 Directional Blur Directional Blur ⼿前レイヤ描画 通常描画
40. ありがとうございました