ReactVision Studio
ReactVision Studioは、ブラウザでAR/VRシーンを視覚的に作成し、React NativeとViroReactでiOS、Android、Meta Questへネイティブ配信できるXRエディタです。
ReactVision Studioとは?
ReactVision Studioは、ReactVisionスタックの一部として拡張現実と仮想現実のシーンを構築するための、ブラウザベースのビジュアルエディタです。コンポーネントをキャンバスへドラッグしてシーンを組み立て、StudioGoでスマートフォンやヘッドセット上で変更をプレビューし、同じシーンをViroReact経由でReact Nativeアプリ内にネイティブ配信できます。
この製品は、iOS、Android、Meta Questでのネイティブレンダリングを維持しながら、作成ワークフローをブラウザ内に保つよう設計されています。ページによると、Studioはシーングラフを自動生成し、クラウドアンカーとジオスペーシャルアンカーをサポートし、AIベースの3Dアセットを生成してプロジェクトライブラリに追加できます。
主な機能
- AR/VR向けのブラウザベースシーンエディタ: デスクトップエンジンではなく、ブラウザ上で視覚的にシーンを構築します。
- ViroReactによるReact Native配信: 単一のシーン形式を1つのコンポーネントでアプリに読み込めるため、実行時はReact Nativeコードベース内に収まります。
- ネイティブプラットフォームレンダリング: iOSではARKit、AndroidではARCore、Meta QuestではHorizonOSでレンダリングします。
- StudioGoによるライブ端末プレビュー: 作業中に、接続された実機へローカルネットワーク経由で編集内容が反映されるのを確認できます。
- アセットとシーンの管理ツール: エディタにはコンポーネントインスペクタ、モデル・テクスチャ・音声用のアセットライブラリ、アンカー駆動のナビゲーションを備えたマルチシーンプロジェクトが含まれます。
- AI支援の3Dアセット生成: テキストでアセットを説明して3Dモデルを生成し、そのままプロジェクトライブラリに配置できます。
- Expo対応: ページでは、Studioは開発ビルド付きでExpoプロジェクトに組み込めると説明されています。
ReactVision Studioの使い方
一般的なワークフローはブラウザから始まり、開発者またはXRクリエイターがStudioを開いてキャンバス上にコンポーネントを配置してシーンを作成します。各ノードを確認し、アセットを追加し、アニメーションやアンカーを設定し、StudioGoを使ってスマートフォンやヘッドセット上でシーンをプレビューできます。
シーンの準備ができたら、StudioSceneNavigatorコンポーネントをReact Nativeアプリに追加します。ViroReactが実行時にシーンを読み込むため、変更ごとにアプリを再ビルドすることなく、チームはビジュアルシーンの反復を続けられます。
ユースケース
- レイアウトや配置の確認中に実機プレビューが必要なAR製品デモを作成する。
- 別のヘッドセット専用プロジェクトを立ち上げずに、Meta Quest向けのVRまたは複合現実体験を作成する。
- 空間シーンを含み、JSXに慣れたモバイルチームが保守できるReact Nativeアプリを出荷する。
- シーン配置やナビゲーションを頻繁に調整する必要がある、ジオスペーシャルまたはアンカー आधारित体験をプロトタイピングする。
- テキストプロンプトからプレースホルダーまたは初期段階の3Dアセットを生成し、より速く組み立てるためにシーンライブラリへ追加する。
FAQ
ReactVision Studioはブラウザで動作しますか?
はい。エディタはブラウザベースで、レンダリングされた体験はReact NativeとViroReact経由でネイティブ配信されます。
実行時出力はどのプラットフォームに対応していますか?
ページでは、iOS、Android、Meta Questが挙げられており、ARKit、ARCore、HorizonOSによるネイティブレンダリングに対応しています。
シーンを変更するたびにアプリを再ビルドする必要がありますか?
ページでは、StudioSceneNavigatorがStudioから実行時にシーンを読み込むと説明されており、アプリを再ビルドせずにシーンを反復できるようにすることを意図しています。
Expoは使えますか?
はい。ページでは、StudioはExpoに対応しており、開発ビルド付きでExpoプロジェクトに組み込めると説明されています。
ARプレビューにシミュレーターは対応していますか?
いいえ。ページでは、ARプレビューには実機が必要で、このワークフローではシミュレーターとエミュレーターはサポートされないと説明されています。
代替手段
- UnityベースのXR開発: AR/VRプロジェクトでよく使われる代替手段で、通常はブラウザエディタとReact Nativeのシーン実行時環境よりも、フルエンジンのワークフローを伴います。
- UnrealベースのXR開発: もう一つのエンジン中心の選択肢で、JSX駆動のReact Native統合よりも、より広いゲームエンジンワークフローを望むチームで一般的に使われます。
- WebXRアプリケーション: ネイティブアプリ配信を避けるブラウザ配信のXR体験ですが、ページではReactVisionをブラウザ専用ではなくネイティブ優先の विकल्पとして位置づけています。
- 手動のReact Native + プラットフォームSDK統合: チームはネイティブのARKit、ARCore、またはQuestツールで直接構築できますが、通常はStudioのビジュアル作成フローよりも多くのプラットフォーム固有実装が必要です。
代替品
FigPrompt
FigPromptはAIでFigmaプラグインのロジックを生成するノーコードビルダー。コード不要で、説明から数秒で実装可能。
MakerLoft
MakerLoftは開発不要でAIがGitHub連携し、認証・決済・ファイルアップロード・定期処理・管理画面などの機能付きアプリを生成。
Rork
RorkはAIとExpo(React Native)で、文章の説明から完成度の高いモバイルアプリを素早く生成。アイデアから稼働アプリへ。
Ably Chat
Ably Chatはカスタムリアルタイムチャット用のAPI/SDK。リアクション、プレゼンス、メッセージ編集/削除に対応し高負荷も設計。
Make Real
tldraw SDKを使用してUIを描き、実現します。
AakarDev AI
AakarDev AIは、シームレスなベクターデータベース統合を通じてAIアプリケーションの開発を簡素化し、迅速な展開とスケーラビリティを実現する強力なプラットフォームです。