AR デバイスシミュレーター

デバイスシミュレーターを開く。デバイスを装着しなくても、カメラをオンにしなくても、Augma の空間レイヤーとアプリの操作を体験できます。

シミュレーションビューを探索する

ビューは Augma のオリジナルサイト を踏襲しています。初期状態では、灰色の背景、上部の時計と白いライン、下部の 9 つの円形アイコンだけが表示されます。アプリをクリックするとフローティングウィンドウが開き、もう一度クリックするか Escape で閉じます。カメラをオンにすると、現実の映像が背景になります。

下部には順に、映像の反転、天気、HUD 表示、サウンド、空間、カメラ、ナビ、GitHub、コンポーネントのドキュメントが並びます。右上のシステムメニューには、フルスクリーン、カメラの切り替え、テーマ、設定、通知、デバイスの操作があります。左上のマイクを押すと、クリックで試せる模擬音声コマンドが開きます。マイクの許可は求めません。

インターフェースは简体中文、English、日本語に対応しています。このドキュメントから開くと、読んでいる言語をそのまま引き継ぎます。直接開いた場合は前回の選択を使い、初回はブラウザの言語に従います。「設定 → 言語」で切り替えられ、選択は現在のブラウザに保存されます。音声コマンドを実行すると、結果を現在の言語で読み上げます。ブラウザが音声合成に対応していない場合はテキストだけを表示します。「音声読み上げ」は設定でオフにできます。

アプリ	試せる操作
天気	都市を切り替えてサンプルの気温を表示（リアルタイムの天気ではありません）
空間	空中庭園 / シティウォークの切り替え、スキャンとキャンセル、アンカーの固定 / 解除、シーン内の場所のクリック
ナビ	目的地の選択、色分けされたルートの切り替え、模擬ナビの開始、到着まで一歩ずつ進める、ナビの終了
サウンド	ローカルで合成した和音の再生、一時停止、曲の切り替え、再生位置と音量の調整
通知	この体験中の操作履歴を表示。開くと既読になり、履歴は消去できます
設定	言語、パネルの不透明度、ダークビュー、集中モード、映像の反転、音声読み上げ、奥行きアニメーション、カーブビュー、初期設定に戻す

システムメニューの「デバイス」では、スタンバイ、起動、切断、再接続ができます。スタンバイまたは切断すると、スキャン、ナビ、サウンド、カメラ、空間 AR が止まります。下部の目のアイコンでアプリと空間レイヤーを一時的に隠し、もう一度クリックすると元に戻ります。

地図、場所、距離、スキャン結果はすべてシミュレーションで、位置情報、実環境の認識、リアルタイムの交通情報を表すものではありません。インターフェースは Augma の現実に重なるレイヤー、円形のアプリコントロール、浮かぶルートを参考に、操作できる SVG で実装しています。

表示設定と音量は現在のブラウザに保存されます。通知とシーンの進み具合は、この体験の間だけ保持されます。サウンドの再生中にブラウザのタブを切り替えると自動で一時停止し、自動では再開しません。

オプションのビュー効果

右上の「システムメニュー → 設定 → ビューの効果」には、独立した 2 つのスイッチがあります。既定ではオフで、自動的に保存されます。

• 奥行きアニメーション：マウスを動かすと、空間レイヤーとフローティングウィンドウにわずかな視差と遠近感が生まれます。ウィンドウを開くとフェードインしながらピントが合い、地図やカメラの背景が少しぼけます。タッチ操作では登場アニメーションだけを残し、指の動きには追従しないため、スクロールやタップを妨げません。
• カーブビュー：上下の白いラインが浅い弧になり、下部の 9 つの円形アイコンが弧に沿って並びます。奥行きアニメーションとは別に、単独でオンにできます。

システムで動きを減らす設定がオンの場合、奥行きアニメーションは止まりますが、カーブの外観は残ります。HUD を隠したとき、デバイスのスタンバイ中、空間 AR に入ったとき、バックグラウンドに切り替えたときも奥行きアニメーションは止まります。初期設定に戻すと、両方の効果がオフになります。

カメラをつなぐ

下部の「カメラ」アプリを開いて「カメラをオン」をクリックすると、そこで初めてブラウザが許可を求めます。カメラの映像はこのページ内にだけ表示され、アップロードされません。カメラの切り替え、設定での映像の反転、HUD を含まないカメラのスナップショットの保存ができます。許可を待っている間はキャンセルでき、カメラをオフにしたとき、デバイスのスタンバイ中、ページを離れたときにビデオトラックを解放します。

カメラには HTTPS（開発時の localhost は例外）と MediaDevices に対応したブラウザが必要です。許可が拒否された場合やデバイスが使えない場合も、シミュレーション画面は引き続き体験できます。

空間 AR

immersive-ar に対応したブラウザでは「空間 AR を準備」ボタンが表示されます。クリックして初めて Babylon と XR のコードを読み込みます。準備ができたらもう一度「空間 AR に入る」をクリックし、このユーザー操作でセッションを開始します。カメラモードに戻ることもできます。

一般的なデスクトップブラウザでは、通常はシミュレーションモードかカメラモードだけが使えます。空間 AR のデバイス対応、環境の参照空間、許可はブラウザの実際の機能によります。自動テストは実機での検証の代わりにはなりません。

Vue サンプルの構成

シミュレーターは Vue 3.5 の <script setup lang="ts">、リアクティブな Props の分割代入、型付きのイベント、defineModel、useTemplateRef を使っています。エントリーはデバイスの機能を組み合わせるだけで、各アプリは Props で状態を受け取り、Events で操作を伝えます。

• SystemBar、DeviceDock、DeviceWindow は、システムバー、アプリの入口、フローティングウィンドウを管理します。アプリが開いていないときは空のビューを保ちます。
• useSimulator は、接続、シーン、スキャン、ナビ、通知を管理します。
• useDisplaySettings は表示設定とローカルへの保存を管理し、読み込んだ設定を検証します。
• useSoundscape、useCamera、useXr はブラウザのリソースを管理し、終了時に後片付けをします。
• デバイスのアプリは公開されている Augma コンポーネントを再利用し、アプリの状態、シーンのデータ、Babylon はデモプロジェクト内に留めます。