
ReactVision Studio
ReactVision Studioは、ブラウザベースのAI搭載ビジュアルエディターで、ライブデバイスプレビュー(StudioGo経由)と、オープンソースのViroReactレンダラーを介したReact Nativeアプリへのワンクリックデプロイメントにより、ネイティブiOS(ARKit)、Android(ARCore)、Meta Quest(HorizonOS)ランタイムをサポートするAR/VRシーンを構築できます。
https://reactvision.xyz/studio?ref=producthunt&utm_source=aipure

製品情報
更新日:2026年05月19日
ReactVision Studioとは
ReactVision Studioは、低レベルの3Dレンダリングコードを書くことなくARおよびVRエクスペリエンスを作成するためのReactVision空間スタックのビジュアルエディターです。コンポーネントをキャンバスにドラッグしてシーンを構成し、アセット(モデル、テクスチャ、オーディオ)を管理し、StudioGoコンパニオンアプリを使用して物理デバイスでリアルタイムプレビューをすばやく反復できます。出荷準備が整ったら、StudioシーンはViroReact(ReactVisionのMITライセンスのオープンソースネイティブレンダラー)を使用して任意のReact Native(またはExpo開発ビルド)アプリケーション内にロードされるため、同じオーサリングされたシーンがiOS、Android、およびMeta Questで実行できます。
ReactVision Studioの主な機能
ReactVision Studioは、React Nativeアプリ向けのARおよびVRシーンを構築するためのブラウザベースのビジュアルエディターです。コンポーネントをドラッグ&ドロップしてシーングラフを作成し、アセットを管理し、StudioGoコンパニオンアプリを介して実際のデバイスで変更をライブプレビューできます。シーンはViroReact(MITライセンス、オープンソース)を介してアプリ内に組み込まれ、iOS(ARKit)、Android(ARCore)、およびMeta Quest(HorizonOS)でネイティブにレンダリングされ、クラウド/地理空間アンカーやAIアシストによる3Dアセット生成などのReactVision Platformサービスへの組み込みアクセスが可能です。
ブラウザベースのビジュアルシーンエディター: 低レベルのレンダリングやシーングラフコードを記述することなく、ドラッグ&ドロップによる構成、コンポーネント検査、マルチシーンプロジェクト構造でAR/VRシーンを設計します。
ViroReactを介したネイティブクロスプラットフォームレンダリング: WebXR/ブラウザのパフォーマンス上のトレードオフを回避し、React Nativeを介してiOS(ARKit)、Android(ARCore)、およびMeta Quest(HorizonOS)で1つのシーン形式をネイティブに実行します。
StudioGoによるライブデバイスプレビュー: 編集中に物理的な電話/ヘッドセットでシーンをほぼリアルタイムでプレビューおよび操作でき、繰り返しの再構築サイクルなしで迅速な反復が可能です。
ワンコンポーネントアプリ統合: 単一のコンポーネント(例:StudioSceneNavigator)を追加することで、Studioで作成されたシーンをReact Nativeアプリに組み込み、アプリの残りのアーキテクチャとナビゲーションをそのまま維持します。
AIを活用した3Dアセット生成: Studio内でプロンプトから直接3Dアセットを生成し、プロジェクトのアセットライブラリにドロップします。Studio外でも再利用できる標準形式を使用します。
プラットフォームがサポートする高度なAR機能: StudioプロジェクトとViroReactランタイムを介して、クラウドアンカー、地理空間アンカー、アセットストレージ/配信などの管理されたバックエンド機能(ReactVision Platform)にアクセスします。
ReactVision Studioのユースケース
マーケティング活動とブランド体験: ビジュアルオーサリングとiOS/Androidでのネイティブパフォーマンスにより、インタラクティブなAR製品ショーケースや体験型キャンペーンを迅速にプロトタイプ作成し、展開します。
小売およびEコマースの視覚化: 家具、家庭用品、または製品プレビュー向けの「部屋に配置」AR体験を構築し、クラウドアンカーを使用して配置を永続化するオプションがあります。
ロケーションベースのARと観光: 実世界の座標に紐付けられた地理空間アンカーを使用して、地理空間的に固定されたコンテンツ(例:ランドマーク、ガイド付きツアー、宝探し)を作成します。
トレーニング、シミュレーション、安全ウォークスルー: ガイド付きAR/VR手順とインタラクティブな学習モジュールを開発し、ライブデバイスプレビューで迅速に反復し、React Nativeアプリを介して展開します。
製品チーム向けのプロトタイプから生産までのXR: デザイナー/クリエイターが視覚的にシーンを構築し、エンジニアが最小限のコードで統合することで、引き継ぎの摩擦を減らし、反復を高速化します。
WebARからネイティブへの移行(例:8th Wallの代替): ドラッグ&ドロップスタイルのオーサリングを再現しつつ、ブラウザベースのARよりもネイティブのARKit/ARCoreパフォーマンスとより深いOSレベルの機能を実現します。
メリット
単一のシーン形式からiOS、Android、Meta Quest全体でのネイティブレンダリング(ARKit/ARCore/HorizonOS)。
高速な反復ワークフロー:ブラウザエディター + StudioGoを介したライブオンデバイスプレビュー。
React Nativeチーム向けの低い統合オーバーヘッド(単一コンポーネントの埋め込み)とオープンソースレンダラー基盤(ViroReact、MIT)。
カード不要の無料ティアが利用可能。ViroReact自体にはランタイム料金はかかりません。
デメリット
ARプレビュー/テストには物理デバイスが必要です(シミュレーター/エミュレーターはサポートされていません)。
一部の高度なプラットフォーム機能(例:クラウド/地理空間アンカー)は、プラットフォームの利用可能性/ベータステータスと使用量クォータによって制限されます。
Expo Goはサポートされていません。Expo開発ビルドまたは標準のReact Nativeネイティブビルドパイプラインが必要です。
iOS/Android/Quest以外のプラットフォーム(例:visionOS、Android XR)のサポートはまだ一般提供されていません。
ReactVision Studioの使い方
1) 無料のReactVision Studioアカウントを作成する: https://studio.reactvision.xyz にアクセスして登録します(カードは不要です)。シーンとアセットを保存するための新しいプロジェクトを作成します。
2) ブラウザでReactVision Studioを開く: プロジェクトダッシュボードからStudio(ブラウザベースのビジュアルエディター)を開きます。コンポーネントをキャンバスにドラッグしてAR/VRシーンを作成します。Studioはシーングラフを自動的に作成します(低レベルの3D/レンダリングコードは不要です)。
3) 最初のシーンを視覚的に構築する(ドラッグ&ドロップ): エディターで、シーンコンポーネント(例:3Dオブジェクト、アンカー)をキャンバスに追加します。インスペクターを使用してノードの位置/回転/スケールを設定し、プロパティを構成します。必要に応じて、コンテンツをマルチシーンプロジェクトに整理します。
4) プロジェクトにアセットを追加する(インポートまたはAI生成): アセットライブラリを使用してモデル/テクスチャ/オーディオ/ビデオを取り込むか、StudioのAI生成を使用してテキスト(および/または画像)から3Dアセットを作成し、シーンに配置するためにプロジェクトライブラリに自動的に追加します。
5) ライブプレビューのために物理デバイスにStudioGoをインストールする: iOS(App Store)またはAndroid(Google Play)でStudioGoをダウンロードします。ARプレビューには実際のデバイスが必要です(シミュレーター/エミュレーターはサポートされていません)。デバイスとコンピューターが同じローカルネットワーク上にあることを確認してください。
6) StudioGoをStudioプロジェクトにリンクしてライブプレビューする: StudioGoを開き、Studioプロジェクトに接続してから、デバイスでシーンをプレビューします。ブラウザで編集する(モデルを移動したり、プロパティを調整したりする)と、変更はほぼリアルタイムでデバイスに表示されます。ネイティブの再構築は不要です。
7) 反復:レイアウト、ナビゲーション、アニメーションを調整する: シーンの改良を続けます。オブジェクトの再配置、マテリアルの更新、変換/マテリアルアニメーションの追加、StudioGoを介してデバイス上で継続的に検証しながら、複数のシーン間でのナビゲーション(例:アンカー駆動フロー)を設定します。
8) (オプション) プラットフォーム機能を使用する:クラウドアンカーと地理空間アンカー: エクスペリエンスに永続性または実世界での配置が必要な場合は、Studioプロジェクトからプラットフォームがサポートする機能を有効にします。クラウドアンカー(セッション/デバイス間でコンテンツを永続化)と地理空間アンカー(GPS座標にコンテンツを固定)です。
9) ViroReactを使用してReact Native(またはExpo開発ビルド)アプリを作成する: React Nativeアプリ(または開発ビルドを使用するExpoプロジェクト)を設定します。ViroReactはネイティブモジュールを必要とするためExpo Goでは実行できませんが、開発ビルドでは動作します。
10) ViroReactを追加し、StudioSceneNavigatorでStudioシーンをロードする: アプリにViroReactをインストールして構成し、'@reactvision/react-viro'からStudioSceneNavigatorコンポーネント(1コンポーネント統合)を追加して、Studioで作成したシーンをレンダリングします。
11) ターゲットプラットフォーム(iOS、Android、Meta Quest)で実行する: サポートされているデバイスでアプリをビルドして実行します。同じStudioシーンは、ARKit(iOS)、ARCore(Android)、およびHorizonOS(Meta Quest)を介してネイティブにレンダリングされ、ViroReactがプラットフォームの違いを処理します。
12) アプリを再構築せずに更新を出荷する(シーン反復ワークフロー): ViroReactは実行時にStudioプロジェクトからシーンをロードするため、Studioでシーンを更新すると、ユーザーは次回の起動時に変更を受け取ることができます。これにより、シーンのみの変更に対する頻繁なネイティブ再構築の必要性が減ります。
ReactVision Studioのよくある質問
ReactVision Studioは、ReactVisionスタックでARおよびVRシーンを構築するためのブラウザベースのビジュアルエディタです。コンポーネントをキャンバスにドラッグアンドドロップし、StudioGoを介してスマートフォンやヘッドセットでリアルタイムにプレビューし、ViroReactを使用してReact Nativeアプリ内にシーンをデプロイします。











