Home » カヤックのVR制作チームが語る「傷物語VR」の作り方&VRの展示空間シミュレーション – VIVE JAPAN デベロッパーミートアップ2018講演レポ


開発 2018.12.17

カヤックのVR制作チームが語る「傷物語VR」の作り方&VRの展示空間シミュレーション – VIVE JAPAN デベロッパーミートアップ2018講演レポ

HTC NIPPON株式会社は、2018年12月3日に開発者向けカンファレンスイベントVIVE JAPAN デベロッパー ミートアップ 2018を開催しました。本記事では、株式会社カヤックの技術部/企画部のディレクター・プランナーそしてテクニカルディレクターを務める天野清之氏らが行った、「現実を拡張する体験を作るカヤックXRチームの実績事例と傷物語VR制作手法について」のレポートをお送りします。また、本講演の全編を収録した動画はこちらから。

はじめに

まずは天野氏からのカヤックの製作事例解説や、講演のアジェンダなどの説明。今回の講演は前半と後半の2部構成となっており、前半は「傷物語VR」について、後半はオルセー美術館特別企画のピエール・ボナール展で展示している「AIT(Art Immersion Technology)」について、といった内容。それぞれ開発を担当したエンジニアが講演を行いました。

傷物語VR:2年前の開発ながら今でも活きる技術の話

前半はエンジニアの佐々木晴也氏が登壇し、「傷物語VR」の制作手法について語りました。「傷物語VR」の制作を行ったのは約2年前、開発環境は「Unity5.5.2」だったとのこと。「現在の環境とは異なりますが、今もおよそ活きる話だと思う」と佐々木氏は語りました。

傷物語VR」は、ソニー・インタラクティブエンタテインメントジャパンアジア、アニプレックス、カヤックの3社が共同開発したPSVR向けコンテンツ。西尾維新氏の「物語シリーズ」をもとに制作された作品で、2017年7月よりPlayStation Storeで無料配信されています。(傷物語VRの体験レポートはこちら

VRコンテンツのレンダリング設計

傷物語VRではレンダリング方法を選ぶ際、アンチエイリアシング(AA)など複数の項目別に検討したうえでフォワードレンダリングを選んだそうです(アンチエイリアシング:ピクセルで斜めの線を描くときに出来る輪郭線のギザギザをなめらかに見せる技術。フォワードレンダリング:いわゆる従来方式のレンダリング。光源の数が増えれば増えるほどパフォーマンスが落ちる)


(AAなし)


(AAあり)

今回はMSAA(MultiSample Anti-Aliasing)をメインで採用しており、佐々木氏は「MSAAが入っていると綺麗に映る」と述べていました。FXAA(Fast Approximate Anti-Aliasing)は比較的簡易に処理できるものの、クオリティ面での難があるため、MSAAとの併用で採用したそうです。採用されなかったTXAA(Temporal Anti-Aliasing)は「VRには不向き」とのこと。

以下佐々木氏が講演で用いていた表をまとめたものです。

Forward(採用)

Deferred

Aniti-Aliasing

MSAA:◯

MSAA:利用不可

Aniti-Aliasing
(ScreenSpace)

FXAA:三角(併用)
TXAA:☓

FXAA:△
TXAA:☓

Lighting(主に数)

Dynamic:2~3
負荷は許容範囲内
(Pixel Lightingするライトの数は制限)

数のメリットがそこまで必要ない
(ScreenSpaceの範囲などに依存)

G-Buffeerを使う表現

利用不可

SSRなどは利用しない

アルファを使った表現

◯映像に合わせたダイナミックな表現が多い

△半透明苦手、ForwardのShaderとの組み合わせが必要

Single Pass Stereo

有効化 SinglePass対応したPostProcessも採用予定だったので問題なし

ColorSpace

Linearを採用 ハードウェアの性質や絵の色域表現の自然さから採用 特にBloomなど

それでも足りないエイリアシング対策

上のエイリアシング対策では十分ではない箇所が2箇所あったそうです。1つ目が「ポリゴンが密集することによるちらつき」で、2つ目が「スペキュラエイリアシング」です。

1つ目「ポリゴンが密集することによるちらつき」。もともと凹凸になっているオブジェクトが変形してポリゴンが密集した場合、ちらつきがひどかったそうです。解決策として、中景以降の凹凸ポリゴンを平面化して、シェーダー側でマスクして形状を再現したとのこと。

2つ目の「スペキュラエイリアシング」とは、ポリゴンの法線の角度とそのスペキュララフネスあたりの光がちらつくことです。フレーム内に明るいピクセルが入ってきてしまったそうです。GDC2015でValveが発表していた資料にハッキーな手法が書いてあったので、そちらを参考にしたとのことでした。

映像プロジェクションシステム

傷物語VRの特徴のうちの1つである、VR空間上へのプロジェクションマッピングは、Unityのプロジェクター機能を拡張して実装しています。オリジナルのシェーダーを作成し、映像の配置やブレンディングなどを調整をしやすいようにしたそうです。それにより、実際にプロジェクターを置く感覚で配置の調整が出来たとのこと。


(画像はPlayStation Storeの公式サイトより)

映像のマルチ出力

映像のプロジェクションでは、映像の展開合わせて複数の映像を空間に出します。傷物語VRでは最大5つの映像を表示させたそうです。初期の段階に発生した問題で「5つ映像を再生させるとエンコードでCPUを必要とし、大きな負荷がかかりフレームレートを維持できなくなってしまうという問題があった」とのこと。

解決策として、1つの大きい映像に複数の動画を配置して、その動画から1つずつ取り出して使用するようにしたそうです。できるだけ高い解像度で出力するために、プラットフォームでの実際の処理負荷と技術的に可能な解像度マックスまで検証を重ねた、と佐々木氏は語りました。

映像ベースのタイムライン

傷物語VRでは「投射されている映像で十字架が飛んできて、VR空間内でも同様に十字架が飛んでくる」というシーンがあります。このような演出ではタイミングが重要となります。佐々木氏はタイミングを揃えるためには2つ必要なことがあると述べました。1つ目が「処理速度に影響されないイベントシステムの構築」、2つ目がコンマ秒単位で揃えていく作業となるため、「細かいチェックバックのイテレーション」です。

「処理速度に影響されないイベントシステムの構築」と「細かいチェックバックのイテレーション」の双方を実現するために使用したのはGoogle Spread Sheet。Google Spread Sheetで映像のTimestanp,システム的に使うEventID,SceneIDを取得して、Google Apps Scripでスクリプトを書き、Unityに送っているとのこと。処理が落ちたとしても正しい映像のタイミングに出せるようにし、Unityでは独自のタイムライン処理でイベントを管理しているそうです。

VRならではの演出・工夫

ポストプロセス着想の場面転換表現

傷物語VRでは、見えてる絵が分割されバラバラに散るシーンがあります。このシーンを実装するには、まずカメラの至近距離にランタイムで作成・更新される特殊なテクスチャを生成し、瞬時に破壊させ分割させます。この演出により、VR空間で3Dから2D表現的に転換する表現となるとのこと。佐々木氏はこのときに大切なのは、「ハッチとスケール感とタイミングとごまかし」だと述べていました。

影による実在感の演出

傷物語VRではプレイヤーのモデルは表示されません。ですが特定の箇所では床にメッシュの影のみを表示させています。そのことにより自分が傷物語の主人公である阿良々木君と認識させています。佐々木氏によると「(演出は)これだけだが、驚きや実在感があるとのユーザーからのコメントを多数もらっている」とのこと。

音響演出(3Dオーディオ)

傷物語VRは3Dオーディオに対応させているとのこと。十字架が飛んでくるシーンでは向づけをし、AudioSourceのパラメーターを調整することで、瞬間的に音の左右の差が分かりやすいように工夫してるそうです。登場人物が傘をさしてくれる箇所は3Dオーディオの調整だけでなく、AudioFilterなどを利用しScript側で状況の変化を音で演出しているとのことでした。

酔いと映像・空間変化について

佐々木氏は最後に傷物語VRで工夫した2つの点について話し、講演の前半パートを締めました。1つ目は「移動時の酔いの問題」についてです。同氏によると、位置移動をするシーンは、当初酔いやすかったそうです。そこで移動時のみ空間のライティングを暗くし、視界の絵の変化を極力減らし自然と映像を注視するような状況を作り酔いを軽減させたとのこと。

2つ目が「映像と空間変化について」です。傷物語VRは基本映像を見るコンテンツだが、空間などの変化をつけすぎると体験者がどこに意識を集中すべきかわからなくなることがあるそうです。同氏は「映像を見せつつ、こちらの作る演出をみせるバランスが難しい。感覚的になってしまうが、“メリハリ”が大切。5分程度のコンテンツだが、あっという間に終わるようなコンテンツになった」と語っていました。佐々木氏いわく、静と動、空間情報の多さを交互に調整しつつ映像を見させる展開も交えることで映像視聴体験の拡張を成り立たせるとように工夫がされています。

AIT(Art Immersion Technology)とは

続く後半はカヤックでArt Immersion Technologyの制作を行ったエンジニアの永田俊輔氏が、展示・イベントでのシミュレーションアプリについて語りました。

カヤックは日経イノベーションラボと共同で、「Art Immersion Technology(AIT)」という作品を描く上で画家が見ていた世界をVRで再現する技術を開発。AITを使った展示は、2018年9月から開催されている「オルセー美術館特別企画 ピエール・ボナール展」で公開されました。

AITは「作家によって描かれなかった風景を体験できる」、いわば拡張体験です。制作チームは、画が描かれた場所へ赴き360°写真を撮り、撮影した画像をもとの絵画をベースにした機械学習変換を行い、作者が絵画の外を描いていいたらどうなっていたかを再現しています。

展示・イベントで大変なこと

永田氏は展示・イベントで一番大変なこととして、本番環境がギリギリまでないことを挙げていました。アプリケーションなどを事前に作ることは出来るものの、それをインストールする空間がないとのこと。

本番環境をギリギリまで作れない

本番環境をギリギリまで作れないのはなぜか、永田氏は「展示スペースでは自分たちが展示を行う期間の前にも展示が行われている。前展示は終了後に撤収作業があり、その後に会場設備の入れ替え、造作物の施工、システムの設営が行われ、それから本番環境を作る」がゆえと説明。オンライン上やバーチャル上で完結するシステムに比べ、どうしても作業時間が足りなくなりがちです。

本番環境をギリギリまで作れないことによる課題

本番環境をギリギリまで作れないことによる課題は「技術面」「制作面」双方にあると永田氏。技術面での課題は、なんといっても本番環境で初めて遭遇するトラブル。材質や環境光等の要因により、アプリケーションが上手く動かないことがあるそうです。また人的トラブルなどもあり、「図面ではわからないが、実際にやると出てくるトラブル」があるそうです。

一方、制作面での課題は、100%の体験がわからないこと。数値上のサイズ感などは分かっているものの、現場での「本当のスケール感」は現場ならではのもの。「作ってみて施工したら、なんだか少し違う」といったこともあるそうです。人の流入による変化もあるそうで、リアルな場での展示特有の苦労をうかがわせました。

永田氏は「(制作チームは本番環境を想定して)思考を重ねながら作っていますが、やはり本番環境があれば最高」と語ります。そこで同氏はVRで本番環境を代替できないかと考え、シミュレーションアプリを作成したそうです。

展示のためのシュミレーションアプリ

カヤックでは、これまでの展示でも必要に応じてシミュレーションアプリを制作してきたそうです。今回はVRヘッドセットで確認できるものシミュレーションアプリを初めて試みたととのこと。

作成したもの

作成したのは、本番の会場の大きさと同じ広さのボックスエリアと、実写と機械学習変換後のテスト素材です。シミュレーションアプリを作成したのは企画段階だったそうで、「実装よりもずっと前に作った、くらいの感覚です」と永田氏は述べていました。

シミュレーションを通じた変化

今回、シミュレーションを行ったことで展示にも変化があったそうです。永田氏は「コンテンツの配置」「絵のサイズ感」「展開画像の見え方」「機械学習画像の見え方」「実際の光景」「イメージの共有」6つのポイントを挙げ、それぞれどのように変化をしたのかを述べていました。

コンテンツの配置

展示における視線感覚が、シミュレーションアプリを利用することでわかるそうです。入り口に入ってからどの位置が自然に目がいくか、見やすいかが分かるとのこと。そのことにより、絵のハイを適切な場所に決められたそうです。

絵のサイズ感

空間に対する絵の適切なサイズ感が、シミュレーションアプリで確認することで分かるそうです。今回の展示では、実際のサイズでは壁面との対比として小さすぎたため、2~3倍の縮尺に変更して迫力を出したとのこと。

展開画像の見え方

今回の展示で使用した360°写真は、空間の中央を基準に画像を展開しました。「部屋の中央以外から見たときに破綻するのでは?」と永田氏らは懸念していたそう。シミュレーションアプリを通してみてみると、床面との整合性が大きく外れるものの、空間全体を調整することで体験として十分成立することが判明しゴーサインとなったそうです。

機械学習画像の見え方

機械学習で変換された画像を見たとき、「はじめは『絵画っぽい』と思えるが、シミュレーションアプリを通して見てみると、『ブラーのかかった画像だな』くらいにしか見えない」と永田氏。何度かの調整を経て、最終的には、色彩よりも形状変化を強めた学習変換画像を使用しています。

実際の光景

絵画の中には実際の光景とは異なる風景が描かれているものがあります。360°画像をそのまま使用することが出来ないので、別途望遠カメラなどで撮影を行い、中間画像として使用したそうです。

イメージの共有

クライアントや制作陣らが、最初にシミュレーションアプリを見たことで同じゴールイメージを持って、制作過程に望むことができたそうです。撮影・制作・MTGの場で円滑なコミュニケーションが出来たとのこと。

今後の展望と「やはり再現しきれないこと」

永田氏は最後に、VRヘッドセットを利用したシミュレーションアプリの課題について語りました。「今回の展示では再現する形状が簡単だったので、時間がかからず作ることが出来たが、複雑な形だと時間がかかるのではないか」とのこと。しかし、この問題点も「デフォルメして簡単なオブジェクトを組み合わせらば十分対応できるのではないか」とも語りました。

一方、VRヘッドセットを使用してのシミュレーションはあくまで視覚的なものに限られていると永田氏。「他の部分はなかなかシミュレーションしづらく、視覚的な面においても会場で使うプロジェクターの輝度値などを細かく再現できないため、(大事な要素を)見落とすことは十分ありえる」と同氏は強調しました。

これらのVRヘッドセットを使ったシミュレーションは課題はありつつも、随所でコンテンツ制作の助けになっているとのこと。図面などの数値では測りきれない現場の感覚値が見えると同氏は述べていました。永田氏はVRを使うことで現実の「かつてあった」や「まだない」を持ち込んでくることができる、と述べ、講演を締めくくりました。


VR/AR/VTuber専門メディア「Mogura」が今注目するキーワード