Scene Viewer es un visor envolvente que habilita experiencias en 3D y de RA desde tu sitio web o app para Android. Permite a los usuarios de dispositivos móviles Android obtener una vista previa de los modelos 3D alojados en la Web, ubicarlos, interactuar con ellos y también interactuar con ellos en su entorno.
La mayoría de los navegadores Android admiten Scene Viewer. Muchos socios de Google implementaron correctamente Scene Viewer para brindar compatibilidad confiable con experiencias en 3D y de RA. También potencia estas experiencias para la Búsqueda de Google.
La implementación es sencilla:
Las experiencias basadas en la Web solo requieren vínculos con el formato correcto en una página web.
Las experiencias basadas en apps solo requieren la integración de unas pocas líneas de código Java.
Requisitos del tiempo de ejecución de Scene Viewer
Para experimentar la RA con Scene Viewer, los usuarios deben tener lo siguiente:
- Un dispositivo compatible con ARCore que ejecute Android 7.0 Nougat (nivel de API 24) o una versión posterior
- Una versión actualizada (reciente) de los Servicios de Google Play para RA Este servicio se instala automáticamente y se mantiene actualizado en la gran mayoría de los dispositivos compatibles con ARCore.
- Una versión actualizada de la app de Google (que viene preinstalada y se mantiene actualizada automáticamente en la gran mayoría de los dispositivos compatibles con ARCore)
Para prever casos en los que los Servicios de Google Play para RA o la app de Google no estén presentes, o en los que las versiones instaladas sean demasiado antiguas, puedes especificar una URL de resguardo que inicie una experiencia alternativa, por ejemplo, una página web, un mensaje de error o una experiencia de resguardo que hayas compilado.
Casos de uso compatibles
| Caso de uso previsto | Aplicación recomendada | Beneficios |
|---|---|---|
|
Desde un botón o vínculo en un sitio web o app para Android, inicia una vista nativa de RA de un modelo 3D.
Si el dispositivo no cuenta con los Servicios de Google Play para RA, recurre, de manera sencilla, a mostrar el modelo en un modo 3D con la tecnología de Scene Viewer. |
Inicia Scene Viewer con un intent explícito en el paquete de la Búsqueda de Google y elige una configuración de mode adecuada para mostrar el modelo 3D.
|
|
|
Desde un botón o vínculo de un sitio web o una app para Android, inicia una vista nativa de RA de un modelo 3D.
Si el dispositivo no cuenta con los Servicios de Google Play para RA, controla el comportamiento de resguardo. |
Inicia Scene Viewer con un intent explícito en los Servicios de Google Play para RA (ARCore) y elige una configuración de mode adecuada para mostrar el modelo 3D.
|
Usa tu propio visor de modelos 3D o proporciona otra respuesta de resguardo de tu propio diseño para casos de uso que no sean de RA. |
| Aloja una vista intercalada de un modelo 3D en tu sitio web y permite que el usuario ingrese manualmente en un modo de RA nativo de pantalla completa. | Usa <model-viewer> o cualquier otro visor 3D basado en la Web para iniciar Scene Viewer de forma nativa el modelo 3D en RA. |
|
Inicia Scene Viewer con un intent explícito (3D o RA)
Si quieres admitir la más amplia gama de dispositivos Android, usa un intent explícito de Android para iniciar Scene Viewer. El intent explícito se puede activar desde una página HTML o una app para Android nativa. La app de Google que viene preinstalada en los dispositivos Android compatibles con ARCore controlará el intent.
Según los parámetros de intent configurados y las capacidades del dispositivo, los modelos 3D interactivos se pueden colocar en el entorno del usuario o volver a mostrarse en un visor 3D.
Si el dispositivo cuenta con Servicios de Google Play para RA, como está actualizado, Scene Viewer mostrará el modelo en una vista nativa de RA o en una vista 3D.
Si los Servicios de Google Play para RA no están disponibles o no están actualizados, Scene Viewer podrá mostrar fácilmente el modelo en una vista 3D.
Si no se puede mostrar un modelo 3D (por ejemplo, porque la app de Google no está instalada o es una versión anterior), se usará el parámetro
S.browser_fallback_urlpara mostrar una página web de resguardo.
Cómo iniciar Scene Viewer desde HTML o Java
HTML
Para activar el intent explícito desde HTML, usa la siguiente sintaxis:
<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
Para activar el intent explícito desde Java, usa el siguiente código:
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);
Control de versiones de intents
La versión del intent se indica mediante el número de versión después de arvr.google.com/scene-viewer. Por ejemplo, en la versión inicial, se usó la versión 1.0. Cuando necesites funciones más nuevas de Scene Viewer, podrás iniciarlo con una versión de intent más alto que coincida con las funciones que necesitas.
La versión 1.1 del intent agregó compatibilidad con vínculos intent://, que pueden iniciarse directamente en una app para Android, en lugar de una URL. Si quieres que Scene Viewer garantice que esta función esté disponible cuando se inicie y no se inicie en el caso contrario, inicia el visualizador de escena con un intent para intent://arvr.google.com/scene-viewer/1.1.
Parámetros de intents admitidos
Los siguientes parámetros son compatibles con un intent explícito en el paquete de la Búsqueda de Google.
| Parámetro de intent | Valores permitidos | Comentarios |
|---|---|---|
file (obligatorio) |
Una URL válida | Esta URL especifica el archivo glTF o glb que se debe cargar en Scene Viewer. Debe tener escape de URL. |
S.browser_fallback_url (obligatorio para intents basados en HTML) |
Una URL válida | Esta es una función de Google Chrome que solo es compatible con implementaciones basadas en la Web. Cuando Google app no está presente en el dispositivo, esta es la URL a la que navega Google Chrome. |
mode (opcional) |
3d_preferred (predeterminada) |
Scene Viewer muestra el modelo en modo 3D con el botón View in yourspace.
Si el dispositivo no cuenta con Servicios de Google Play para RA, el botón Ver en el espacio estará oculto. 
|
3d_only |
Se iniciará Scene Viewer con el modelo en modo 3D, incluso si el dispositivo cuenta con los Servicios de Google Play para RA.
El botón Ver en tu espacio nunca se muestra.
|
|
ar_preferred |
Scene Viewer se iniciará en modo nativo de RA como modo de entrada. El usuario tendrá la opción de alternar entre los modos RA y 3D con los botones Ver en tu espacio y Ver en 3D.
Si no están presentes los Servicios de Google Play para RA, Scene Viewer regresa con facilidad al modo 3D como modo de entrada.
|
|
ar_only |
Cuando uses este valor, debes iniciar el sistema a com.google.ar.core mediante un intent explícito de Android.
Nota: No uses el modo ar_only cuando inicies la app con un intent explícito de Android en Google app.
|
|
link (opcional) |
Una URL válida |
Una URL para una página web externa. Si está presente, aparecerá un botón en la IU que intente dirigir a esta URL cuando se haga clic en él.
|
title (opcional) |
Cadena válida |
Es un nombre para el modelo. Si está presente, se mostrará en la IU.
El nombre se truncará con puntos suspensivos después de los 60 caracteres.
|
| sonido (opcional) | Una URL válida | Es una URL a una pista de audio en bucle que se sincroniza con la primera animación incorporada en un archivo glTF. Debe proporcionarse junto con un glTF y una animación de la misma longitud. Si está presente, el sonido se repite después de que se carga el modelo. Debe tener escape de URL. |
resizable (opcional) |
true (predeterminada)
|
Cuando se configura en false, los usuarios no podrán escalar el modelo en la experiencia de RA. El escalamiento funciona normalmente en la experiencia 3D.
|
enable_vertical_placement (opcional) |
false (predeterminada)
|
Cuando se establece en true, los usuarios podrán colocar el modelo en una superficie vertical.
|
Orientación en UX
Para proporcionar la mejor UX posible a los usuarios, recomendamos que los llamados a la acción visibles transmitan que el usuario está a punto de entrar en un entorno envolvente.
Para las experiencias del visor 3D, recomendamos un llamado a la acción etiquetado como Ver en 3D que se vea como una de las siguientes imágenes:
Inicia Scene Viewer con un intent explícito en los Servicios de Google Play para RA (solo en modo RA)
El modo de RA en Scene Viewer cuenta con la tecnología de los Servicios de Google Play para RA.
Para asegurarte de que la RA esté disponible en Scene Viewer, puedes usar un intent explícito de Android de un sitio web o una app para Android nativa a fin de iniciar Scene Viewer mediante com.google.ar.core package y proporcionar browser_fallback_url. De esta manera, te aseguras de que todos los usuarios tengan una experiencia nativa de RA mediante Scene Viewer o una experiencia de resguardo que hayas creado tú mismo. Por ejemplo, puedes crear experiencias de resguardo, como tu propio visor 3D o un mensaje de error correcto.
Para activar el intent explícito desde HTML, usa la siguiente sintaxis:
<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>;
Para activar el intent explícito desde Java, usa el siguiente código:
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);
Parámetros de intents admitidos
Los siguientes parámetros son compatibles con un intent explícito en el paquete de Servicios de Google Play para RA.
| Parámetro de intent | Valores permitidos | Comentarios |
|---|---|---|
browser_fallback_url (obligatorio para intents basados en HTML) |
Una URL válida | Esto es compatible solo con implementaciones basadas en la Web. Cuando los Servicios de Google Play para RA no están presentes en el dispositivo o no están actualizados, esta es la URL a la que navega. |
mode (opcional) |
ar_only |
Scene Viewer siempre inicia el modelo 3D en una vista nativa de RA y oculta las IU para cambiar al visor 3D de Scene Viewer.
Si los Servicios de Google Play para RA no están presentes, Scene Viewer inicia la URL que configuraste en browser_fallback_url para experiencias basadas en la Web.
En el caso de las experiencias basadas en apps, Scene Viewer recurre a una experiencia alternativa, como un mensaje de error o alguna otra experiencia que hayas creado tú mismo.
|
ar_preferred |
Scene Viewer se inicia en modo nativo de RA como modo de entrada y ofrece a los usuarios la opción de alternar entre los modos RA y 3D con los botones View in yourspace y View in 3D.
Si los Servicios de Google Play para RA no están presentes, Scene Viewer inicia la URL que configuraste en browser_fallback_url para experiencias basadas en la Web.
En el caso de las experiencias basadas en apps, Scene Viewer recurre a una experiencia alternativa, como un mensaje de error o alguna otra experiencia que hayas creado tú mismo.
|
|
link (opcional) |
Una URL válida |
Una URL para una página web externa. Si está presente, aparecerá un botón en la IU que intente dirigir a esta URL cuando se haga clic en él.
La versión 1.1 agregó compatibilidad con los vínculos intent:// en Scene Viewer para permitir que el botón de visita de Scene Viewer se active directamente en otras apps. Ten en cuenta que esto se debe usar con cuidado y solo debe especificarse cuando se garantiza la presencia de un controlador de intent para el intent determinado. |
title (opcional) |
Cadena válida |
Es un nombre para el modelo. Si está presente, se mostrará en la IU.
El nombre se truncará con puntos suspensivos después de los 60 caracteres.
La versión 1.1 agregó compatibilidad con el estilo HTML del contenido del título; se permite una cantidad arbitraria de texto. Ten en cuenta que el título debe tener escape de URL. |
sound (opcional) |
Una URL válida | Es una URL a una pista de audio en bucle que se sincroniza con la primera animación incorporada en un archivo glTF. Se debe proporcionar junto con un glTF y una animación de la misma longitud. Si está presente, el sonido se repite después de que se carga el modelo. |
resizable (opcional) |
true (predeterminada)
|
Cuando se configura en false, los usuarios no podrán escalar el modelo en la experiencia de RA. El escalamiento funciona normalmente en la experiencia 3D.
|
disable_occlusion (opcional) |
false (predeterminada)
|
Cuando se establece en true, los objetos ubicados en la escena siempre aparecen frente a objetos del mundo real en la escena. Consulta [Cómo habilitar la oclusión](/ar/develop/depth#enable_occlusion) para obtener más información.
|
Orientación en UX
Para proporcionar la mejor UX posible a los usuarios, te recomendamos que sigas estos lineamientos.
En el caso de las experiencias de RA, el llamado a la acción visible debe transmitir que el usuario está a punto de ingresar a un entorno inmersivo. Te recomendamos que uses el llamado a la acción Ver en tu espacio:
Es posible que los usuarios no tengan instalados los Servicios de Google Play para RA en sus dispositivos. Así es como
<model-viewer>controla el resguardo, puedes usar ese fragmento de código como punto de partida.// 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);
Usa <model-viewer> para iniciar Scene Viewer
Para habilitar Scene Viewer desde tu sitio web, incluye el componente web <model-viewer> con el atributo ar.
<model-viewer ar
ar-modes="scene-viewer webxr quick-look"
alt="A 3D model of an astronaut."
src="Astronaut.gltf"></model-viewer>
Cuando se ve en un dispositivo Android compatible con ARCore, un sitio web que incluye el componente <model-viewer> con el atributo ar muestra un botón como se indica en el siguiente ejemplo.
Cuando se usa el modo scene-viewer en ar-modes, este cambia a una vista nativa de RA y, luego, invita al usuario a colocar el modelo en su entorno mediante Scene Viewer.
Si no ves los Servicios de Google Play con RA, cuando presiones este botón, se mostrará el modelo en el visor 3D de <model-viewer>.
Consulta la documentación de <model-viewer> para obtener más información sobre cómo comenzar a usar <model-viewer>.
Requisitos de los archivos para modelos
Scene Viewer cuenta con las siguientes compatibilidad y limitaciones para modelos.
| Compatibilidad con formatos de archivo | glTF 2.0/glb, con estas extensiones:
|
| Animación |
glTF contiene varias animaciones, Scene Viewer solo reproduce la primera animación.
|
| Límites recomendados |
El rendimiento general de los elementos depende de la configuración de restricciones y la compensación entre los vértices, los materiales, la resolución de texturas, la malla por material y otros factores. Sigue estos lineamientos para optimizar tus recursos.
|
| Compatibilidad paralela | Scene Viewer renderiza automáticamente las sombras fuertes cuando colocas un objeto, por lo que te recomendamos que no integres sombras en el modelo. |
| Compatibilidad con texturas |
|
| Material | PBR |
| Carga de archivos | HTTPS |
| Scene |
|
Cómo utilizar la herramienta de vista previa para validar tus modelos 3D
Para asegurarte de que el archivo de tu modelo 3D se muestre correctamente en Scene Viewer, usa nuestra herramienta de vista previa en línea para validar los archivos en tu PC.
Valida tu modelo 3D
Para validar un modelo, la herramienta de vista previa necesita un archivo glb o glTF, cualquier archivo de imagen y discretización asociado, y un archivo de audio opcional. El archivo de audio se repetirá en bucle con la animación 0.
Puedes seleccionar varios archivos individuales o, de manera opcional, colocar el glb o glTF y sus archivos asociados en un archivo ZIP. (El método de archivo ZIP no admite archivos de audio).
Para validar tu modelo 3D, sigue estos pasos:
Abre la herramienta de vista previa en línea en un navegador.
Usa uno de estos métodos para agregar los archivos a la herramienta de vista previa:
Arrastra y suelta. Selecciona un archivo glb o glTF y todos sus archivos asociados (o un archivo ZIP que contenga estos archivos) y arrastra los archivos seleccionados o el archivo ZIP a la herramienta de vista previa.
Desde la herramienta de vista previa. En la herramienta de vista previa, selecciona Scene Viewer > Load File. Selecciona un archivo glb o glTF y todos los archivos asociados (o un archivo ZIP que contenga estos archivos) y haz clic en Open.
Después de cargar los archivos compuestos por tu modelo 3D en la herramienta de vista previa, aparecerá una consola en la parte inferior del navegador con los resultados, incluidos los mensajes de error.
Agregar modelos 3D para validación
Para validar un modelo 3D, agrega los archivos que conforman el modelo a nuestra herramienta Editor de modelos.
Para validar un modelo, la vista previa necesita el archivo glb o glTF del modelo, cualquier archivo de imagen y discretización asociado, y un archivo de audio opcional. Puedes seleccionar múltiples archivos individuales o agregar un solo archivo ZIP.
Cuando agregas un archivo ZIP, la vista previa carga el primer glb o glTF que encuentra, así como la imagen y los archivos bin asociados dentro de ese archivo ZIP.
Abre la herramienta Editor de modelos en un navegador.
Usa uno de estos métodos para agregar los archivos a la herramienta de vista previa:
Para arrastrar y soltar archivos para la validación, selecciona varias veces el archivo glb o glTF y los archivos asociados (o selecciona un archivo ZIP que contenga estos archivos) y arrástralo a la herramienta de vista previa.
Selecciona archivos de la herramienta de vista previa. En la herramienta de vista previa, selecciona Scene Viewer > Load File. Selecciona de forma múltiple el archivo glb o glTF y todos sus archivos asociados (o un archivo ZIP que contenga estos archivos) y haz clic en Open.
Errores de validación
| Código de error | Gravedad | Mensaje | Valores admitidos actuales |
|---|---|---|---|
INVALID_INPUT_FILE_EXTENSION |
Error | El archivo de entrada [filename] tiene una extensión que el validador no admite. | ['.glb', '.gltf'] |
REC_INPUT_BINARY_SIZE_EXCEEDED |
Advertencia | La entrada proporcionada por el usuario tiene un tamaño binario que supera el límite recomendado por la especificación de Scene Viewer, que es un límite de tamaño recomendado de [size] MB. | 10 |
MAX_INPUT_BINARY_SIZE_EXCEEDED |
Error | La entrada proporcionada por el usuario tiene un tamaño binario que supera el límite máximo admitido por la especificación de Scene Viewer, que es de [size] MB. | 15 |
UNSUPPORTED_GLTF_EXTENSION_USED |
Error | La especificación de Scene Viewer no admite la extensión [ext] en el glTF. | ['KHR_materials_pbrSpecularGlossiness', 'KHR_materials_unlit', 'KHR_texture_transform'] |
ANIMATION_LIMIT_EXCEEDED |
Error | La cantidad de animaciones del glTF supera el límite admitido por la especificación de Scene Viewer, que es un máximo de [num] animaciones. | 1 |
MORPH_TARGET_USED |
Error | El glTF contiene un objetivo de transformación, lo cual no es compatible con la especificación de Scene Viewer. | |
MATERIAL_LIMIT_EXCEEDED |
Advertencia | La cantidad de materiales del glTF supera el límite máximo recomendado por la especificación de Scene Viewer, que es de [num] materiales. | 10 |
TEXTURE_RESOLUTION_LIMIT_EXCEEDED |
Advertencia | La resolución de la imagen ubicada en el índice [idx] del glTF supera el límite recomendado por la especificación de Scene Viewer, que es una resolución máxima de [res] x [res]. | 2048 x 2048 |
UV_LIMIT_EXCEEDED |
Error | La cantidad de UV por malla en el glTF supera el límite admitido por la especificación de Scene Viewer, que es un máximo de [num] UV por malla. | 1 |
VERTEX_COLOR_USED |
Error | El glTF contiene un color de vértice, algo que la especificación de Scene Viewer no admite. | |
JOINT_LIMIT_EXCEEDED |
Error | La cantidad de juntas del glTF supera el límite admitido por la especificación de Scene Viewer, que es un máximo de [num] juntas. | 254 |
TRIANGLE_LIMIT_EXCEEDED |
Advertencia | La cantidad de triángulos del glTF supera el límite recomendado por la especificación de Scene Viewer, que es un máximo de [num] triángulos. | 100,000 |
PRIMITIVE_MODE_UNSUPPORTED |
Error | La especificación de Scene Viewer no admite el modo primitivo [mode]. | {4 : Lista de triángulos, 5 : Tira triangular, 6 : Ventilador de triángulo} |
MISSING_PBR_METALLIC_ROUGHNESS |
Información |
Al material del índice [idx] le falta la propiedad pbrMetallicRoughness. Si en su lugar se usan factores metálicos y de aspereza, la especificación de Scene Viewer no requiere esto. Si no se usa ninguno, el material usará valores predeterminados, lo que puede generar comportamientos no deseados.
|