はじめに
こんにちは、エンジニアの仁科と稲田です。
2025年5月22日から25日にわたって、弊社が演出を手掛ける「旧芝離宮夜会 by ワントゥーテン 〜ひかりめぐる庭〜」を開催いたしました。その中で私たちは”枯滝「石組の記憶」”というプロジェクションコンテンツの制作・実装を担当いたしました。
夜会とは？
1→10（ワントゥーテン）によるアートプログラム「夜会」は、先端テクノロジーによりその場所を最も魅力的に表現し､ここだけの美食を愉しむことができる“食と文化の地産地消”をテーマに掲げています。
また、限られた範囲ではありますが、制作サイドとしては新しい表現・技術を取り入れる試みも同時に行っている場でもあります。
このブログではざっくりながら全体的な制作の過程(下図参照)に沿いながら、サイトスペシフィック（Site-Specific）なコンテンツの制作過程をご紹介させていただけたらと思います！
Phase1: プランニング
枯滝「石組の記憶」について
旧芝離宮恩賜庭園に存在する「枯滝（かれたき）」は、水を用いることなく、巧みに配置された石組によって、山間の渓谷を流れ落ちる滝の雄大な姿を表現したスポットです。
今年の旧芝離宮夜会では、庭園に現存するモノそのものの物語や記憶に着目し、それらの持つ魅力を引き立たせるという視点で空間演出の企画を考えました。
いくつか着目したスポットの内の1つとして、この枯滝とその両脇にそびえる築山「大山」に映像を投影することで、枯滝が持つ物語を視覚的に表現する試みを行いました。
Phase1: フィジビリティ確認
事前の現地投影テスト
企画を進めるにあたり、枯滝における空間演出のフィジビリティ（実現性）を高めるため事前にプロジェクターを現地へ持ち込みテスト投影を行いました。ここでの確認ポイントは大きく2点です：
- 芝生や石組みが入り混じる環境に対して映像を投影した際の見映え確認
- プロジェクターの設置可能位置と、それに伴う投影範囲の確認
テスト投影を経て、枯滝周囲の隆起した地形が持つ立体感や奥行き感を引き立たせ、目には見えない水や空気の流れを視覚的に表現できるといったことから投影演出が効果的であると判断し実際に演出の開発へ移る運びとなりました。
その後、制作フローを固めていく上で課題に挙がったのが、このコンテンツがとてもサイトスペシフィックで現地に行かない限り、実装→テスト→確認→修正のイテレーションが回せないことでした。
さらにコンセプトとして、場そのものやその場を構成しているものの形状を生かしたコンテンツを作り上げていくということを決めていたので、作っていく最中にも常に投影しながら作っていくというプロセスが必要でした。
そこで今回は3Dスキャンしたモデルを使用した投影シミュレーターをUnreal Engine5(以下UE5)で作り、そのシミュレーション環境を使ってコンテンツを制作していくことに決めました。
Phase2: 開発環境構築
スキャンしてみた
今回スキャンするにあたり、Niantic社が提供しているScaniverseとiPhone 16 Proという組み合わせで行いました。Scaniverseは対応機種(iPhone Proシリーズ等)を使うとLidarでのスキャンが可能になります。カメラのみを使用するスキャンと比べ、部屋や屋外空間など広めのスペースを素早く比較的きれいにスキャンすることが可能です。またスキャンしたデータは3Dモデルデータ(.fbx, .obj, .glb, .usdz, .stl)や点群データ(.ply, .las)としてエクスポートすることができます。
雨が降っていたこともあり手早くスキャン(早く動かしすぎると警告がでます)をしたのですが、10分もかからず大体今回必要である範囲のスキャンはできました。それを今回はFBX形式で書き出しました。
UE5にインポート
ScaniverseからエクスポートしたFBXファイルをUE5にインポートしていきます。その際、FBXインポートオプションのImport Uniform Scaleを100にしておくとUE5内のスケールとマッチします。
そのほかの設定としてFBXインポートオプションでgenerate missing collisionにチェックを入れておくと自動でコリジョンを生成してくれるのですが、大きすぎることが多いです。モデル内を歩き回るような機能を実装したいのであればスタティックメッシュエディタ(コンテンツブラウザで編集したいスタティックメッシュをダブルクリック)でコリジョンを編集する必要があります。
レベル作成
モデルのインポートが終わると、そこからレベルを作りこんでいきます。今回のシミュレーターの役割として、
- コンテンツを作りながら即座にどう投影されるか確認できること
- 社内外でコンテンツの確認ができること
- 設置位置やプロジェクターのレンズを選定できること
が主に必要とされている部分になります。
要件に合わせてレベルの作りこみや実装するべき機能を決めていきます。すべての機能について紹介しようとすると膨大になってしますので割愛させていただきますが、今回はシミュレーター内のプロジェクターについて軽くご紹介させていただきます。
プロジェクターはUE5内のスポットライトとLight Functionマテリアルをベースに制作しました。Light Functionマテリアルはライトに適用するとライトが照らす範囲にマスクをかけられるUE5内の機能です。それを使い基本的な映像を投射する機能をを作り、今回使用予定だったプロジェクターレンズの投射比率もシミュレートすることで投影範囲の確認や適切なプロジェクターの設置位置の検証も行いました。
また外部システムのプログラムと連携するためにNDIを使用しました。NDIで受け取った映像をテクスチャーに書き込み、そのテクスチャーをLightFunctonマテリアルのエミッシブカラーに適用しました。
NDIを使用することでコンテンツを送出する側のシステムとシミュレーターをそれぞれ切り分けることができ、送出する側は実際のグラフィックボードからの映像出力とNDIを切り替えるだけで本番とシミュレーターを使い分けることができます。
マッピング
次にシミュレーターに対してNDIを送信します。使ったツールはTouchdesignerで全体的なシステムと各役割は以下となります。
Touchdesignerの主な役割としては、コンテンツのスイッチング、投影補正、マスクや本番でのシーケンスの制御になります。今回は投影補正に関してはTouchdesignerのPalette→Derivative→Mappingに入っているstonerを使用して行いました。stonerはコーナーピンやグリッドワープなど平面の補正にかかわる処理を簡単に行うことができて便利です。コンテンツ制作前の準備として、ビューポイントからの投影補正、使用する箇所のマスクの作成などを行いました。
Phase2: 演出開発/シミュレーション
コンテンツ実装・確認
今回の演出映像はUnityでリアルタイムに描画されたものを使用し、先述の通り開発期間中はUE5のシミュレーション環境上で見映えの確認をしながら演出を制作しました。
結果としては、いざ実際に現場で投影した際の見え感とシミュレーター上での見え感に大きな差は無く、概ねシミュレーター上で予測していた通りの演出を実現することができました。
例えば、山の頂点から水が流れ落ちるといった投影環境の立体形状を活かす演出については想像だけできれいに流れているように見える映像をつくるのが難しく、特にシミュレーターの恩恵を感じました。
以下に実際のUnityで描画された映像がシミュレーター環境と本番環境それぞれで映し出された様子を添付します。
本番
こちらが本番の様子です。
まとめ
1-10では今回のプロジェクトに限らず様々なプロジェクトや用途でシミュレーターを用いた制作手法を採用しています。
今回はその一例としてサイトスペシフィックなプロジェクションコンテンツの制作フローをご紹介させていただきました。昨今では3Dスキャンを行う手法が充実してきたことにより、誰でも簡単にシミュレーション環境を構築することが可能です。シミュレーター製作は一見手間のようにも感じますが、コンテンツ制作の精度や速度の向上、そして実装者とその他の役割の方とのコミュニケーション促進にも寄与します。特に今回制作させていただいたような実際に現場に行かないと確認ができないものの場合、シミュレーターを用いた制作フローはとても有用だと思います。