こんにちは、開発運営支援/先端コンテンツチームの平野です。先日は朝日田より、Cygames展 Artworksの展示コンテンツの一つ、Shadowverseのデジタルサイネージ展示に関する記事をお届けしましたが、皆様ご覧になりましたでしょうか？
Cygames展 Artworksで展示したデジタルコンテンツは、まだまだそれだけではありません。今回フォーカスするコンテンツは、バハムート像のARコンテンツです。ARコンテンツは皆さんがお手元のスマホにインストールしたガイドアプリにARカメラ機能として実装されており、起動してバハムート像を映すと自動的にバハムート像を認識し、その上に煙や雷などのエフェクトを載せてより迫力のある映像をお楽しみいただけました。ただでさえ巨大なバハムート像ですから、それに加えてARのエフェクトが乗っかり、とても強烈なインパクトのあるコンテンツにできたかなと思っています。
また一部の方はもしかしたら、エフェクトが実際のバハムート像に隠れているように描画されているぞ、バハムート像自体はCGではないはずなのに稲妻や溶岩からの光で明るくなっているぞ、とお気づきになったかもしれません。そう、我々は今回のARコンテンツでバハムート像とエフェクトのオクルージョンや、各種ライトからの照り返しといった表現に挑戦しました。
今回の技術ブログでは、そういった開発チームのこだわりが詰まったARコンテンツを実現する技術要素を中心に、それを実装するうえで必要となった各種周辺技術についても話していこうと思います。
まずは、ARコンテンツを再生する土台となっていたARカメラ機能について軽く整理しましょう。ガイドアプリのARカメラ機能には、主に以下のような機能が実装されていました:
- ARコンテンツ本体 (カメラに映ったバハムート像の位置を検出し、それに合わせた形で演出を再生する機能)
- カメラのUIを描画する機能
- 写真、動画を撮影して共有する機能
- ガイドアプリの他の画面に遷移する機能
今回の記事では主にARコンテンツ本体で使われた技術についてお話したいのですが、その前に、ARカメラ機能全体のアーキテクチャについてご説明します。
ARカメラ機能のアーキテクチャ: Unity as a Library
ARカメラ機能の開発は、ネイティブアプリとして開発が進んでいたガイドアプリにUnity製のARコンテンツを埋め込むUnity as a Libraryという形で進めました。一般的なAndroid, iOSのネイティブアプリとして開発されたガイドアプリ本体から、ARコンテンツの再生に関わる部分だけを切り出してUnity側で開発し、それをガイドアプリ本体に組み込む形です。
既に開発が進んでいたガイドアプリ自体の技術スタックを、AR機能のためだけに大きく変えることが現実的でない一方、ARコンテンツの開発に携わる3DCGアーティストが高いクオリティの演出を作成するためには、彼らの使い慣れたゲームエンジンで演出を作成・調整できるようにする必要があったため、このような技術選択をしました。
これから話す内容は、Unityで実装したARコンテンツの再生に関わる部分になります。今回のARコンテンツでは以下のような演出を実装し、カメラ映像に重ねる形で描画しました:
- 目や口内が光る
- バハムート像を煙が取り巻く
- 背景を稲妻が走る
- ひび割れた地面から見える溶岩
- 稲妻や溶岩の光をバハムート像がそれを照り返す
ARコンテンツを実装するにあたっては以下のような問題を解決する必要がありました:
- どのようにしてカメラ映像に映るバハムート像の位置を検出するか？
- どのように描画すれば、自然な形でカメラ映像にコンテンツを重ね合わせられるか？
これらの問題に関してどのように対処していったか、各章に分けてそれぞれ解説していきます。
どのようにしてカメラ映像に映るバハムート像の位置を検出するか？
ARコンテンツを違和感なく再生するためには、カメラに映る空間上どの位置にバハムート像が映っているか検出して、それをUnity上の仮想空間と正確にマッチングさせることが不可欠です。どんなに綺麗なエフェクトが実装できたとしても、的外れな位置にエフェクトが再生されてしまっては物理的な世界と仮想的なエフェクトの一体感は出ず、台無しになってしまいます。
今回のARコンテンツでは、バハムート像の位置検出にVuforiaというARライブラリの「モデルターゲット機能」を使用しました。モデルターゲット機能とは、オブジェクトの形状をベースに現実世界のオブジェクトを認識・トラッキングする機能です。3Dのメッシュデータをもとに認識用の学習済みデータを事前作成しておき、そのデータを使ってカメラに映った現実世界のオブジェクトを端末側で直接認識、位置推定をすることができるのです。
Vuforiaのモデルターゲット機能は、イメージターゲット機能や他のARライブラリと比較するとエンターテインメント用途での実績が薄いことが難点でしたが、平面的なターゲット画像ではなく実物のバハムート像を映すとコンテンツが始まる体験としたかったため、また、同等機能を有する様々なARライブラリを比較検証した結果、Vuforiaのモデルターゲット機能が一番精度と認識速度に優れていたため、ARコンテンツの実装に採用することとなりました。
3Dデータの準備: スキャンスタジオの方々による3Dスキャン
さて、バハムート像の位置検出はVuforiaのモデルターゲット機能を使用することに決めたとして、今度は3Dのメッシュデータをどのようにして用意するかを考えなければなりません。モデルターゲット機能を端末側で実行するために必要となる学習済みデータを作成するためには、実際に展示されるバハムート像と寸分違わず同じ形状のメッシュデータを用意する必要がありました。
学習済みデータ作成のための元データとしては当初、社内に存在していたバハムート像作成のためのリファレンス用3Dデータを使用する計画で検証を進めていたのですが、検証の結果、リファレンス用データと実際の造形物には大きな形状の差異があり、元データとして使用できないことがわかりました。
折角精度の高いVuforiaのモデルトラッキング機能があっても、このままでは正確にバハムート像の位置を検出することができません。どうすればこの形状の差異を解決できるのでしょうか？答えは簡単、実物とCGが合わないのであれば、逆に実物からCGを作成してしまえば良いのです。
今回、社内のスキャンスタジオの方々に実物のバハムート像を3Dスキャンし、実物と同じ形状の3Dデータを作成いただく事ができました。バハムート像は全高約3m、幅約5mとあまりにも巨大で、社内のスキャンスタジオには入りきらないため、実際にバハムート像を制作している工房へ機材を持ち込んでいただき、その場で3Dデータをスキャンいただきました。
こちらが実際にスキャンスタジオの方にスキャンしていただいたバハムート像の3Dデータです:
実際に美術館に置かれたバハムート像がこちらです。実際のバハムート像の写真と3Dデータを比較すると、どれだけ高精度にバハムート像の形状がスキャンできているかお分かりになるかと思います:
ここでスキャンスタジオの方に作成頂いたバハムート像の3Dデータは最終的に、Vuforiaのモデルターゲット機能でバハムート像の位置を認識するためだけではなく、後述するように演出の描画でも使用しています。
どのように描画すれば、自然な形でカメラ映像にコンテンツを重ね合わせられるか？
以上のようにして、Vuforiaのモデルターゲット機能を使用することで、カメラ映像に映るバハムート像の位置を高い精度で検出・トラッキングできるようになりました。今度は検出したバハムート像にARコンテンツを自然かつ効果的に重ね合わせるための技術が必要です。
コンテンツを重ね合わせる方法に関しては、「バハムート像が稲妻やマグマから受ける照り返し」と「オブジェクトのオクルージョン」「煙の描画」に分けて解説します。
バハムート像が稲妻やマグマから受ける照り返しについて
まずは、バハムート像が稲妻やマグマから受ける照り返しに関して考えます。ゲームで広く使われている局所照明のモデルに、「Phongの反射モデル」というものがあります。このモデルでは、各オブジェクトの描画色を「環境色と、オブジェクトに当たっているすべてのライトの拡散光と鏡面反射光を足し合わせたもの」として近似します。
ARでは、既に現実にある物体はカメラ映像に映っているはずですので、追加の演出を行うために必要となる残りのライトを加算描画すれば、あたかも現実の物体に稲妻の光が照り返しているような表現が可能となるはずです。
今回のARコンテンツでは上述の理論のもと、演出で追加されるライトの拡散光と鏡面反射光だけを加算描画するシェーダーを作成することで照り返しの表現を実現しました。URPのLitシェーダーをベースにシェーダーを作成し、設定画面上のパラメータもLitシェーダーから極力挙動を変えない形で変更を加えました。
シェーダー作成後、現実のバハムート像と同じ位置に先述のフォトスキャンで作成したバハムート像の3Dモデルを配置して、作成した照り返し表現用のシェーダーを適用したマテリアルを適用しました。その後、質感も含めて3DCGアーティストの方に調整いただくことで、最終的に高クオリティーな照り返し表現へと仕上がりました。
オブジェクトのオクルージョン
次に、煙や稲妻の本体等、画面に直接エフェクトとして書き込む必要のあるオブジェクトについて考えます。これらのオブジェクトをあたかもバハムート像と同一の空間上に存在するように描画するためには、バハムート像によってオブジェクトが隠される、オクルージョンをしっかりと考慮して描画する必要があります。オクルージョンを考慮しないでエフェクトを描画してしまうと、エフェクトと現実のオブジェクトの前後関係が曖昧になってしまうだけではなく、現実のオブジェクトがエフェクトに隠されて見えない、といった状況になりかねません。
バハムート像によるオクルージョンを考慮するため、深度バッファのバハムート像が映っているとVuforiaが認識した位置に、あらかじめバハムート像の深度値を書き込んでおくという手法を取りました。他のオブジェクトはバハムート像の深度値が書き込まれてから描画されるようにすることで、バハムート像に隠れる部分は深度テストに引っかかって描画されないのです。これは、一般的にゲームで広く用いられている隠面消去の一つ「Zバッファ法」を応用した手法です。ここでも照り返し表現同様、フォトスキャンで作成したバハムート像の3Dモデルを使用し、バハムート像の深度データを現実のバハムート像と同じ位置に書き込んでいます。
ここで注意しなければいけないポイントとしては、「バハムート像の深度値を書き込む順番は必ず他オブジェクトより先である必要がある」ということです。一般的にZバッファ法で描画される不透明なオブジェクトは、描画順がどうであれ一番前にあるオブジェクトの色で上書きされるのですが、今回深度値を書き込むバハムート像に関しては色を書き込まないため、先に描き込んでしまったオブジェクトの色が不自然に描画されてしまうことになります。
深度バッファのみを描画すること自体は、カスタムシェーダーで容易に実現できます。描画順を制御する事に関してもUnity自体にRenderQueueという手法が用意されてはいます。しかしながら、後述する最適化とのかみ合わせの都合上、描画順の制御はURPのカスタムパスを作成することで制御しました。
煙の描画
ここまで、バハムート像によるオブジェクトのオクルージョンに関して語ってきましたが、次はオブジェクト自体の描画の話に移ります。基本的にオブジェクト自体は、一般的にゲームで用いられているようなメッシュ描画の仕組みやパーティクルシステムを用いて描画しています。
特に我々が注力したものは、バハムート像の周囲に配置された煙のエフェクトです。煙のエフェクトでは、シェーダー内に仮想ライト機能を実装することで、マグマや稲妻の光が煙の微粒子に散乱して局所的に明るくなる現象(チンダル現象)の表現を実現しました。煙エフェクトのシェーダーは、Shader Graphでアーティスト側が作成したものをベースとして、エンジニア側が最適化を行ったものを本番向けのものとしました。
煙の表現はアーティストのこだわりを詰め込んで作成しましたが、煙は画面上で大きく目立つエフェクトであり、意図通りの見た目を担保するためにはパーティクルをある程度沢山出現させる必要があったため、端末によっては処理負荷の懸念がありました。
そこで今回、端末上で再生されるコンテンツのフレームレートをリアルタイムに計測し、フレームレートが低下する端末では煙だけ描画解像度を落とした「軽量版」の表現に切り替える機能を実装する対応を行いました。軽量版への切り替えは、問題の発生する機種を決め打ちで判定するのではなく、端末の実際の負荷をみつつ自動で切り替えを行う形で実装を行いました。
おわりに
いかがだったでしょうか。今回、バハムート像のARコンテンツを実現する上での技術要素について解説させていただきました。
ARコンテンツはガイドアプリに実装されていましたので、ゲーム開発とは少し関連が薄いものに思えるかもしれませんが、案外ゲーム開発で一般的に用いられるような技術をベースとして開発されていたことを感じ取っていただけたのではないでしょうか。
私たち開発運営支援の先端コンテンツチームでは、ARをはじめとしたxRコンテンツで、次世代のエンターテイメント体験を創り出すため刺激的で革新的な技術を活用しています。世界中のユーザーに感動を届けるため、最先端の技術を駆使しエンターテイメントコンテンツを開発する仲間を募集しています。
本記事をご覧いただき興味を持っていただけましたらこちらをご確認ください。
私たちと一緒に、エンターテイメントの未来を切り開いていきましょう！