Scene Viewer は、ウェブサイトや Android アプリから 3D および AR エクスペリエンスを実現する没入型ビューアです。Android モバイル デバイスのユーザーは、ウェブでホストされている 3D モデルを環境内で簡単にプレビュー、配置、表示、操作できます。
ほとんどの Android ブラウザは Scene Viewer をサポートしています。Scene Viewer は、多くの Google パートナーによって実装され、3D と AR のエクスペリエンスを確実にサポートしています。また、Google 検索のこれらの機能も強化します。
実装は簡単です。
ウェブベースのエクスペリエンスでは、ウェブページ上の適切な形式のリンクのみが必要です。
アプリベースのエクスペリエンスでは、数行の Java コードを統合するだけで済みます。
Scene Viewer のランタイム要件
Scene Viewer で AR を体験するには、次のものが必要です。
- Android 7.0 Nougat（API レベル 24）以降を搭載した ARCore 対応デバイス。
- Google Play 開発者サービス（AR）の最新（最近の）バージョン。 このサービスは、ARCore 対応デバイスの大部分に自動的にインストールされ、最新の状態に保たれます。
- 最新バージョンの Google アプリ。このアプリはプリインストールされており、ARCore をサポートするほとんどのデバイスで自動的に最新の状態に保たれます。
Google Play 開発者サービス（AR）または Google アプリが存在しない場合や、インストールされているバージョンが古すぎる場合に備えて、代替エクスペリエンス（ウェブページ、エラー メッセージ、構築したフォールバック エクスペリエンスなど）を起動するフォールバック URL を指定できます。
サポートされるユースケース
| 想定されるユースケース | 推奨されるアプリケーション | 利点 |
|---|---|---|
|
ウェブサイトまたは Android アプリのボタンやリンクから、3D モデルのネイティブ AR ビューを起動します。 デバイスに Google Play 開発者サービス（AR）がない場合は、Scene Viewer を利用した 3D モードでモデルを表示するように適切にフォールバックします。 |
Google 検索パッケージへの明示的インテントを使用して Scene Viewer を起動し、3D モデルを表示するための適切な mode 設定を選択します。
|
|
|
ウェブサイトまたは Android アプリのボタンまたはリンクから、3D モデルのネイティブ AR ビューを起動します。 デバイスに Google Play 開発者サービス（AR）がない場合は、フォールバック動作を制御します。 |
Google Play 開発者サービス（AR）（ARCore）への明示的インテントを使用して Scene Viewer を起動し、3D モデルを表示するための適切な mode 設定を選択します。
|
独自の 3D モデルビューアを使用するか、AR 以外のユースケース向けに独自の設計による別のフォールバック レスポンスを提供します。 |
| ウェブサイトで 3D モデルのインライン ビューをホストし、ユーザーが手動で全画面ネイティブ AR モードに切り替えられるようにします。 | <model-viewer> または他のウェブベースの 3D ビューアを使用して、AR で 3D モデルをネイティブに表示する Scene Viewer を起動します。 |
|
明示的インテントを使用して Scene Viewer を起動する（3D または AR）
幅広い Android デバイスをサポートするには、明示的な Android インテントを使用して Scene Viewer を起動します。明示的インテントは、HTML ページまたはネイティブ Android アプリからトリガーできます。インテントは、ARCore 対応の Android デバイスにプリインストールされている Google アプリによって処理されます。
構成されたインテント パラメータとデバイスの機能に応じて、インタラクティブな 3D モデルをユーザーの環境に配置したり、3D ビューアでの表示にフォールバックしたりできます。
Google Play 開発者サービス（AR）がデバイスに存在し、最新の状態である場合、Scene Viewer はモデルを AR ネイティブ ビューまたは 3D ビューで表示します。
AR 用 Google Play 開発者サービスが存在しない場合や、最新の状態でない場合、Scene Viewer は 3D ビューでモデルを表示するように適切にフォールバックします。
Google アプリがインストールされていない、または古いバージョンであるなどの理由で 3D モデルを表示できない場合は、代わりに
S.browser_fallback_urlパラメータを使用してフォールバック ウェブページが表示されます。
HTML または Java から Scene Viewer を起動する
HTML
HTML から明示的インテントをトリガーするには、次の構文を使用します。
<a href="intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;">Avocado</a>
Java
Java から明示的インテントをトリガーするには、次のコードを使用します。
Intent sceneViewerIntent = new Intent(Intent.ACTION_VIEW);
sceneViewerIntent.setData(Uri.parse("https://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf"));
sceneViewerIntent.setPackage("com.google.android.googlequicksearchbox");
startActivity(sceneViewerIntent);
インテントのバージョニング
インテントのバージョンは、arvr.google.com/scene-viewer の後のバージョン番号で示されます。たとえば、初回リリースではバージョン 1.0 が使用されました。新しい Scene Viewer の機能が必要な場合は、必要な機能に対応するより高いインテント バージョンで Scene Viewer を起動できます。
インテント バージョン 1.1 では、intent:// リンクのサポートが追加されました。このリンクを使用すると、URL ではなく Android アプリを直接起動できます。Scene Viewer で、この機能が起動時に利用可能であることを保証し、それ以外の場合は起動しないようにするには、intent://arvr.google.com/scene-viewer/1.1 のインテントで Scene Viewer を起動します。
サポートされているインテント パラメータ
Google 検索パッケージへの明示的インテントでは、次のパラメータがサポートされています。
| インテント パラメータ | 使用できる値 | コメント |
|---|---|---|
file（必須） |
有効な URL | この URL は、Scene Viewer に読み込む glTF ファイルまたは glb ファイルを指定します。これは URL エスケープする必要があります。 |
S.browser_fallback_url（HTML ベースのインテントで必須） |
有効な URL | これは Google Chrome の機能であり、ウェブベースの実装でのみサポートされます。デバイスに Google アプリがない場合、Google Chrome が移動する URL です。 |
mode（任意） |
3d_preferred（デフォルト） |
Scene Viewer には、3D モードでモデルが表示され、[周囲のスペースに表示する] ボタンが表示されます。
デバイスに Google Play 開発者サービス（AR）がない場合、[空間で表示] ボタンは非表示になります。 
|
3d_only |
Google Play 開発者サービス（AR）がデバイスに存在する場合でも、Scene Viewer は 3D モードでモデルを表示して起動します。[周囲のスペースに表示] ボタンは表示されません。
|
|
ar_preferred |
Scene Viewer は、エントリ モードとして AR ネイティブ モードで起動します。ユーザーは、[AR モードで見る] ボタンと [3D で見る] ボタンを使用して、AR モードと 3D モードを切り替えることができます。
Google Play 開発者サービス（AR）が存在しない場合、Scene Viewer はエントリ モードとして 3D モードに適切にフォールバックします。
|
|
ar_only |
この値を使用する場合は、com.google.ar.core への明示的な Android インテントで起動する必要があります。注: Google アプリに 明示的な Android インテントで起動する場合は、 ar_only モードを使用しないでください。
|
|
link（任意） |
有効な URL |
外部ウェブページの URL。この URL が存在する場合、クリックするとこの URL にインテントするボタンが UI に表示されます。
|
title（任意） |
有効な文字列 |
モデルの名前。存在する場合は、UI に表示されます。名前は 60 文字を超えると省略記号で切り捨てられます。
|
| sound（省略可） | 有効な URL | glTF ファイルに埋め込まれた最初のアニメーションと同期される、ループする音声トラックの URL。長さが一致するアニメーションを含む glTF とともに提供する必要があります。存在する場合、モデルの読み込み後にサウンドがループされます。これは URL エスケープする必要があります。 |
resizable（任意） |
true（デフォルト）
|
false に設定すると、ユーザーは AR エクスペリエンスでモデルを拡大縮小できなくなります。3D エクスペリエンスでは、スケーリングは正常に機能します。 |
enable_vertical_placement（任意） |
false（デフォルト）
|
true に設定すると、ユーザーはモデルを垂直面に配置できます。 |
UX ガイダンス
ユーザーに最適な UX を提供するため、ユーザーが没入型環境に入ろうとしていることを示す行動を促すフレーズを、表示される行動を促すフレーズに含めることをおすすめします。
3D ビューア エクスペリエンスでは、次のいずれかの画像のような [3D で表示] というラベルの行動を促すフレーズをおすすめします。
Google Play 開発者サービス（AR）への明示的インテントを使用して Scene Viewer を起動する（AR モードのみ）
Scene Viewer の AR モードは、Google Play 開発者サービス（AR）によって実現されています。
Scene Viewer で AR を利用できるようにするには、ウェブサイトまたはネイティブ Android アプリから明示的な Android インテントを使用して com.google.ar.core package 経由で Scene Viewer を起動し、browser_fallback_url を提供します。これにより、すべてのユーザーが Scene Viewer を介したネイティブ AR エクスペリエンスか、デベロッパーが独自に構築したフォールバック エクスペリエンスを利用できるようになります。たとえば、独自の 3D ビューアやグレースフルなエラー メッセージなどのフォールバック エクスペリエンスを構築できます。
HTML から明示的インテントをトリガーするには、次の構文を使用します。
<a href="intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf&mode=ar_only#Intent;scheme=https;package=com.google.ar.core;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;">Avocado</a>;
Java から明示的インテントをトリガーするには、次のコードを使用します。
Intent sceneViewerIntent = new Intent(Intent.ACTION_VIEW);
Uri intentUri =
Uri.parse("https://arvr.google.com/scene-viewer/1.0").buildUpon()
.appendQueryParameter("file", "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf")
.appendQueryParameter("mode", "ar_only")
.build();
sceneViewerIntent.setData(intentUri);
sceneViewerIntent.setPackage("com.google.ar.core");
startActivity(sceneViewerIntent);
サポートされているインテント パラメータ
AR パッケージの Google Play 開発者サービス（AR）への明示的インテントでは、次のパラメータがサポートされています。
| インテント パラメータ | 使用できる値 | コメント |
|---|---|---|
browser_fallback_url（HTML ベースのインテントで必須） |
有効な URL | これはウェブベースの実装でのみサポートされています。デバイスに Google Play 開発者サービス（AR）がない場合や、最新の状態でない場合は、この URL に移動します。 |
mode（任意） |
ar_only |
Scene Viewer は常にネイティブの AR ビューで 3D モデルを起動し、Scene Viewer の 3D ビューアに切り替えるための UI を非表示にします。 Google Play 開発者サービス（AR）が存在しない場合、Scene Viewer はウェブベースのエクスペリエンス用に browser_fallback_url で設定した URL を起動します。
アプリベースのエクスペリエンスの場合、Scene Viewer はエラー メッセージや、デベロッパーが独自に構築した別のエクスペリエンスなどの代替エクスペリエンスにフォールバックします。
|
ar_preferred |
Scene Viewer は、エントリ モードとして AR ネイティブ モードで起動し、[周囲のスペースに表示する] ボタンと [3D で表示する] ボタンを使用して AR モードと 3D モードを切り替えるオプションをユーザーに提供します。 Google Play 開発者サービス（AR）が存在しない場合、Scene Viewer はウェブベースのエクスペリエンス用に browser_fallback_url で設定した URL を起動します。
アプリベースのエクスペリエンスの場合、Scene Viewer はエラー メッセージや、デベロッパーが独自に構築した別のエクスペリエンスなどの代替エクスペリエンスにフォールバックします。
|
|
link（任意） |
有効な URL |
外部ウェブページの URL。存在する場合、クリックするとこの URL にインテントするボタンが UI に表示されます。
バージョン 1.1 では、Scene Viewer の intent:// リンクのサポートを追加し、Scene Viewer のアクセスボタンから他のアプリを直接起動できるようにしました。これは慎重に使用する必要があり、指定されたインテントのインテント ハンドラが確実に存在する場合にのみ指定する必要があります。 |
title（任意） |
有効な文字列 |
モデルの名前。存在する場合は、UI に表示されます。名前は 60 文字を超えると省略記号で切り捨てられます。
バージョン 1.1 では、タイトル コンテンツの HTML スタイリングのサポートが追加され、任意の量のテキストが許可されるようになりました。タイトルは URL エスケープする必要があります。 |
sound（任意） |
有効な URL | glTF ファイルに埋め込まれた最初のアニメーションと同期するループ音声トラックの URL。長さが一致するアニメーションを含む glTF とともに提供する必要があります。存在する場合、モデルの読み込み後にサウンドがループされます。 |
resizable（任意） |
true（デフォルト）
|
false に設定すると、ユーザーは AR エクスペリエンスでモデルを拡大縮小できなくなります。3D エクスペリエンスでは、スケーリングは正常に機能します。 |
disable_occlusion（任意） |
false（デフォルト）
|
true に設定すると、シーンに配置されたオブジェクトは常にシーン内の現実世界のオブジェクトの前に表示されます。詳しくは、[オクルージョンを有効にする](/ar/develop/depth#enable_occlusion) をご覧ください。 |
UX ガイダンス
ユーザーに最高の UX を提供するため、以下のガイドラインに沿って対応することをおすすめします。
AR 体験の場合、表示される行動を促すフレーズは、ユーザーが没入型環境に入ろうとしていることを伝える必要があります。スペースで表示の行動を促すフレーズを使用することをおすすめします。
ユーザーのデバイスに Google Play 開発者サービス（AR）がインストールされていない可能性があります。
<model-viewer>がフォールバックを処理する方法は次のとおりです。このコードを出発地として自由に使用できます。// Check whether this is an Android device. const isAndroid = /android/i.test(navigator.userAgent); // This fallback URL is used if the Google app is not installed and up to date. const fallbackUrl = 'https://arvr.google.com/scene-viewer?file=https%3A%2F%2Fstorage.googleapis.com%2Far-answers-in-search-models%2Fstatic%2FTiger%2Fmodel.glb&link=https%3A%2F%2Fgoogle.com&title=Tiger'; // This intent URL triggers Scene Viewer on Android and falls back to // fallbackUrl if the Google app is not installed and up to date. const sceneViewerUrl = 'intent://arvr.google.com/scene-viewer/1.0?file=https://storage.googleapis.com/ar-answers-in-search-models/static/Tiger/model.glb&title=Tiger#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=' + fallbackUrl + ';end;'; // Create a link. var a = document.createElement('a'); a.appendChild(document.createTextNode('Tiger')); // Set the href to the intent URL on Android and the fallback URL // everywhere else. a.href = isAndroid ? sceneViewerUrl : fallbackUrl; // Add the link to the page. document.body.appendChild(a);
<model-viewer> を使用して Scene Viewer を起動する
ar 属性を含む <model-viewer> ウェブ コンポーネントを含めることで、ウェブサイトから Scene Viewer を有効にできます。
<model-viewer ar
ar-modes="scene-viewer webxr quick-look"
alt="A 3D model of an astronaut."
src="Astronaut.gltf"></model-viewer>
ar 属性を含む <model-viewer> コンポーネントを含むウェブサイトを ARCore 対応の Android デバイスで表示すると、次の例に示すようにボタンが表示されます。
ar-modes で scene-viewer モードが使用されている場合、ネイティブ AR ビューに切り替わり、Scene Viewer を使用してモデルを環境内に配置するようユーザーに促します。
AR 対応の Google Play 開発者サービスがない場合、このボタンをタップすると、<model-viewer> の 3D ビューアにモデルが表示されます。
<model-viewer> の使用を開始する方法については、<model-viewer> のドキュメントをご覧ください。
モデルのファイル要件
Scene Viewer では、モデルに関して次のサポートと制限事項があります。
| サポートされているファイル形式 | glTF 2.0/glb（次の拡張機能を使用）:
|
| アニメーション |
glTF ファイルに複数のアニメーションが含まれている場合、Scene Viewer は最初のアニメーションのみを再生します。 |
| 上限の推奨値 |
アセットの全体的なパフォーマンスは、制約を設定し、頂点、マテリアル、テクスチャ解像度、マテリアルごとのメッシュなどの要素間でトレードオフを行うことによって決まります。アセットを最適化するには、次のガイドラインに沿って対応してください。
|
| シャドウのサポート | ハード シャドウはオブジェクトの配置時に Scene Viewer によって自動的にレンダリングされるため、モデルにシャドウをベイク処理しないことをおすすめします。 |
| テクスチャのサポート |
|
| 素材 | PBR |
| ファイルの読み込み | HTTPS |
| シーン |
|
プレビュー ツールを使用して 3D モデルを検証する
3D モデルファイルが Scene Viewer で正しく表示されるようにするには、オンライン プレビュー ツールを使用して、PC 上のファイルを検証します。
3D モデルの検証
モデルを検証するには、プレビュー ツールに 1 つの glb ファイルまたは glTF ファイル、関連する画像ファイルと bin ファイル、およびオプションの音声ファイルが必要です。音声ファイルはアニメーション 0 とともにループします。
個々のファイルを複数選択することも、glb または glTF とその関連ファイルを zip ファイルにまとめることもできます。（ZIP ファイルの方法では音声ファイルはサポートされていません）。
3D モデルを検証するには:
ブラウザでオンライン プレビュー ツールを開きます。
次のいずれかの方法で、プレビュー ツールにファイルを追加します。
ドラッグ＆ドロップ。glb ファイルまたは glTF ファイルと、それに関連付けられているすべてのファイル（またはこれらのファイルを含む zip ファイル）を選択し、選択したファイルまたは zip ファイルをプレビュー ツールにドラッグします。
プレビュー ツールから。プレビュー ツールで、[Scene Viewer > Load File] を選択します。glb ファイルまたは glTF ファイルと、それに関連付けられているすべてのファイル（またはこれらのファイルを含む zip ファイル）を選択し、[開く] をクリックします。
3D モデルを構成するファイルをプレビュー ツールに読み込むと、ブラウザの下部にあるコンソールに、エラー メッセージなどの結果が表示されます。
検証用の 3D モデルを追加する
3D モデルを検証するには、3D モデルを構成するファイルを モデル エディタ ツールに追加します。
モデルを検証するには、プレビューアにモデルの glb ファイルまたは glTF ファイル、関連する画像ファイルと bin ファイル、必要に応じて音声ファイルが必要です。個々のファイルを複数選択することも、1 つの zip ファイルを追加することもできます。
zip ファイルを追加すると、プレビューアは最初に見つかった glb または glTF と、その zip ファイル内の関連する画像ファイルと bin ファイルを読み込みます。
ブラウザでモデル エディタ ツールを開きます。
次のいずれかの方法で、プレビュー ツールにファイルを追加します。
検証するファイルをドラッグ＆ドロップするには、glb ファイルまたは glTF ファイルと関連ファイルを複数選択（またはこれらのファイルを含む zip ファイルを選択）し、プレビュー ツールにドラッグします。
プレビュー ツールからファイルを選択します。プレビュー ツールで、[Scene Viewer > Load File] を選択します。glb ファイルまたは glTF ファイルと、それに関連付けられているすべてのファイル（またはこれらのファイルを含む zip ファイル）を複数選択し、[開く] をクリックします。
検証エラー
| エラーコード | 重大度 | メッセージ | 現在サポートされている値 |
|---|---|---|---|
INVALID_INPUT_FILE_EXTENSION |
エラー | 入力ファイル [filename] のファイル拡張子は検証ツールで対象外です。 | ['.glb', '.gltf'] |
REC_INPUT_BINARY_SIZE_EXCEEDED |
警告 | 指定されたユーザー入力のバイナリサイズが、Scene Viewer の仕様で推奨されている上限（[サイズ] MB）を超えています。 | 10 |
MAX_INPUT_BINARY_SIZE_EXCEEDED |
エラー | ユーザー入力のバイナリサイズが、Scene Viewer の仕様でサポートされている上限（[サイズ] MB）を超えています。 | 15 |
UNSUPPORTED_GLTF_EXTENSION_USED |
エラー | glTF の拡張子 [ext] は Scene Viewer の仕様でサポートされていません。 | ['KHR_materials_pbrSpecularGlossiness', 'KHR_materials_unlit', 'KHR_texture_transform'] |
ANIMATION_LIMIT_EXCEEDED |
エラー | glTF のアニメーション数が、Scene Viewer の仕様でサポートされている上限（最大 [num] 件のアニメーション）を超えています。 | 1 |
MORPH_TARGET_USED |
エラー | glTF に、Scene Viewer の仕様でサポートされていないモーフィング ターゲットが含まれています。 | |
MATERIAL_LIMIT_EXCEEDED |
警告 | glTF のマテリアル数が、Scene Viewer の仕様で推奨されている上限（最大 [num] 個のマテリアル）を超えています。 | 10 |
TEXTURE_RESOLUTION_LIMIT_EXCEEDED |
警告 | glTF のインデックス [idx] の画像の解像度が、Scene Viewer の仕様で推奨されている上限（最大 [res] x [res] の解像度）を超えています。 | 2048x2048 |
UV_LIMIT_EXCEEDED |
エラー | glTF のメッシュ当たり UV 数が、Scene Viewer の仕様でサポートされている上限（メッシュあたり最大 [num] 個の UV）を超えています。 | 1 |
VERTEX_COLOR_USED |
エラー | glTF に、Scene Viewer の仕様でサポートされていない頂点のカラーが含まれています。 | |
JOINT_LIMIT_EXCEEDED |
エラー | glTF のジョイント数が、Scene Viewer の仕様でサポートされている上限（最大 [num] 個のジョイント）を超えています。 | 254 |
TRIANGLE_LIMIT_EXCEEDED |
警告 | glTF の三角形の数が、Scene Viewer の仕様で推奨されている上限（最大 [num] 個）を超えています。 | 100,000 |
PRIMITIVE_MODE_UNSUPPORTED |
エラー | プリミティブ モード [mode] は Scene Viewer の仕様でサポートされていません。 | {4 : 三角形リスト, 5 : 三角形ストリップ, 6 : 三角形ファン} |
MISSING_PBR_METALLIC_ROUGHNESS |
情報 |
インデックス [idx] のマテリアルには、pbrMetallicRoughness プロパティが設定されていません。Scene Viewer の仕様では、プロパティの代わりにメタリックやラフの設定値が使用されている場合、このプロパティは必要ありません。どちらの設定も使用されていない場合、マテリアルはデフォルトの値を使用しますが、予期しない動作をする可能性があります。 |