VPS体験の開発
Lightship VPS {#enabling-lightship-vps}の有効化
WebAR プロジェクトで VPS を有効にするには、enableVPS を true に設定する必要があります。
A-Frame プロジェクトの場合、<a-scene> の xrweb コンポーネントに enableVps: true を設定する。
非AFrameプロジェクトでは、エンジン始動の前にXR8.XrController.configure()の呼び出しでenableVps: trueを設定してください。
例 - AFrame
<a-scene
coaching-overlay
landing-page
xrextras-loading
xrextras-runtime-error
...
xrweb="enableVps: true;">
例 - ノンAフレーム
XR8.XrController.configure({enableVps: true})
// 次に、8番目のウォー ルエンジンをスタートさせる。
オーダーメイドのVPS体験の開発
オーダーメイドのVPSシーンは、単一のロケーション用にデザインされ、ARコンテンツを配置するためにGeospatial Browserの参照メッシュを利用します。
その1:シーンに場所を追加する
- 地理空間ブラウザを開く(左側の地図アイコンǺ)。
- VPSが有効なロケーションを探す(または自分で指名/有効化
- ロケーションをプロジェクトに追加する

パート2:カスタムARアニメーションのリファレンスとしてロケーションGLBを使用する
- 行の右側から参考GLBをダウンロードする。
- これを3Dモデリ ングソフトウェア(Blender、Maya、A-Frameなど)で使用して、ARコンテンツをメッシュの原点に対して相対的に配置します。

*重要この3Dモデルの原点はLocationの原点です。 原点をリセットしないでください。 原点をリセットしないでください。
_オプション_です:もし、Geospatial Browserからダウンロードしたメッシュが、ベイクドアニメーションや物理演算、オクルーダーのマテリアルに使用するのに十分な品質でない場合は、 、Scaniverseのようなサードパーティのアプリケーションを使ってスキャンし、その高品質メッシュと Geospatial Browserからダウンロードしたメッシュをアライメントすることを検討してください。
- アニメーションGLBをクラウドエディタにインポートし、シーンに追加する
- named-locationコンポーネントをアセットの
<a-entity>に追加します。 name' 属性は、Geospatial Browser の Project Location のnameを参照する。 name' 属性は、Geospatial Browser の Project Location のnameを参照する。
ジャジャーン! 🪄 アニメーションは、現実世界のロケ地と一直線上に表示されるはずです。
パート3:オクルージョンと影の追加
- シーンに
<a-entity named-location="name: LOCATIONNAME"><a-entity>を追加する。 - この要素の中に、子要素として
を3つ追加する。 これらはオクルーダー・メッシュ、シャドウ・メッシュ、VPSアニメーションとなる。 これらはオクルーダー・メッシュ、シャドウ・メッシュ、VPSアニメーションとなる。 - 最初の
<a-entity>にxrextras-hider-materialとgltf-model="#vps-mesh"を追加する。 "#vps-mesh"は、 、テクスチャが削除され、ジオメトリが縮小されたリファレンスGLBのバージョンを参照する必要があります。 "#vps-mesh"は、 、テクスチャが削除され、ジオメトリが縮小されたリファレンスGLBのバージョンを参照する必要があります。 - 2番目の
<a-entity>に、shadow-shader、gltf-model="#vps-mesh"、shadow="cast: false"を追加する。 シャドウシェーダは、Zファイトを防ぐためにポリゴンオフセットで参照メッシュにシャドウマテリアルを適用します。 shadow="cast:true"`で、vps-meshに実世界に影を落とすかどうかを選択できる。 シャドウシェーダは、Zファイトを防ぐためにポリゴンオフセットで参照メッシュにシャドウマテリアルを適用します。 shadow="cast:true"`で、vps-meshに実世界に影を落とすかどうかを選択できる。 - 3番目の
<a-entity>に、gltf-model="#vps-anim"、reflections="type: realtime"、play-vps-animation、shadow="receive:false"を追加する。 play-vps-animationは、vps-coaching-overlay`が消えるまで待ってからVPSアニメーションを再生する。 play-vps-animationは、vps-coaching-overlay`が消えるまで待ってからVPSアニメーションを再生する。