Scene Viewer es un visor envolvente que permite experiencias en 3D y RA desde tu sitio web o app para Android. Permite que los usuarios de dispositivos móviles Android obtengan vistas previas, coloquen, vean e interactúen fácilmente con modelos en 3D alojados en la Web en su entorno.
La mayoría de los navegadores de Android admiten Scene Viewer. Muchos socios de Google implementaron Scene Viewer con éxito para admitir de forma confiable experiencias en 3D y RA. También potencia estas experiencias en la Búsqueda de Google.
La implementación es sencilla:
Las experiencias basadas en la Web solo requieren vínculos con el formato adecuado en una página web.
Las experiencias basadas en apps solo requieren la integración de algunas líneas de código Java.
Requisitos de tiempo de ejecución de Scene Viewer
Para disfrutar de 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 versiones posteriores
- 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 también se mantiene actualizada automáticamente en la gran mayoría de los dispositivos compatibles con ARCore
Para los casos en los que no estén presentes los Servicios de Google Play para RA o la app de Google, o bien 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 creado.
Casos prácticos compatibles
| Caso de uso previsto | Aplicación recomendada | Beneficios |
|---|---|---|
|
Desde un botón o vínculo en un sitio web o una app para Android, inicia una vista de RA nativa de un modelo 3D.
Si los Servicios de Google Play para RA no están presentes en el dispositivo, recurre de forma correcta a mostrar el modelo en un modo 3D potenciado por Scene Viewer. |
Inicia Scene Viewer con una intención explícita en el paquete de Búsqueda de Google y elige un parámetro de configuración mode adecuado para mostrar el modelo 3D.
|
|
|
Desde un botón o vínculo en un sitio web o una app para Android, inicia una vista de RA nativa de un modelo 3D.
Si los Servicios de Google Play para RA no están presentes en el dispositivo, controla el comportamiento de resguardo. |
Inicia Scene Viewer con una intents explícita para los Servicios de Google Play para RA (ARCore) y elige un parámetro de configuración mode adecuado para mostrar el modelo 3D.
|
Usa tu propio visor de modelos 3D o proporciona otra respuesta alternativa de tu propio diseño para los casos de uso que no son de RA. |
| Aloja una vista intercalada de un modelo 3D en tu sitio web y permite que el usuario ingrese manualmente a un modo de RA nativo en pantalla completa. | Usa <model-viewer> o cualquier otro visor 3D basado en la Web para iniciar Scene Viewer y mostrar de forma nativa el modelo 3D en RA. |
|
Cómo iniciar Scene Viewer con un intent explícito (3D o RA)
Para admitir la mayor cantidad posible 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 nativa para Android. La app de Google que viene preinstalada en los dispositivos Android compatibles con ARCore controlará el intent.
Según los parámetros de intención 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 los Servicios de Google Play para RA están presentes en el dispositivo y están actualizados, 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 presentes o no están actualizados, Scene Viewer recurre a mostrar el modelo en una vista 3D.
Si no se puede mostrar un modelo 3D, por ejemplo, porque no está instalada la app de Google o porque se trata de 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 la intención explícita 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 de la intención se indica con el número de versión después de arvr.google.com/scene-viewer. Por ejemplo, el lanzamiento inicial usó la versión 1.0. Cuando se requieren funciones más recientes de Scene Viewer, puedes iniciar Scene Viewer con una versión de intent más alta que corresponda a las funciones que necesitas.
La versión 1.1 de intents agregó compatibilidad con vínculos intent://, que pueden iniciar directamente una app para Android en lugar de una URL. Si quieres que Scene Viewer garantice que esta funcionalidad esté disponible cuando se inicie y que no se inicie de otro modo, inicia Scene Viewer con un intent para intent://arvr.google.com/scene-viewer/1.1.
Parámetros de intents admitidos
Se admiten los siguientes parámetros para una intención explícita del paquete de Búsqueda de Google.
| Parámetro del 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 se admite para las implementaciones basadas en la Web. Cuando la app de Google 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 un botón Ver en tu espacio.
Si los Servicios de Google Play para RA no están presentes en el dispositivo, se oculta el botón Ver en tu espacio. 
|
3d_only |
El Visor de escenas se inicia con el modelo que se muestra en modo 3D, incluso si los Servicios de Google Play para RA están presentes en el dispositivo.
Nunca se muestra el botón Ver en tu espacio.
|
|
ar_preferred |
Scene Viewer se inicia en el modo nativo de RA como modo de entrada. El usuario tiene la opción de cambiar entre los modos de RA y 3D a través de los botones Ver en tu espacio y Ver en 3D.
Si no están presentes los Servicios de Google Play para RA, Scene Viewer recurre al modo 3D como modo de entrada.
|
|
ar_only |
Cuando uses este valor, debes iniciar la actividad a través de un intent explícito de Android hacia com.google.ar.core.
Nota: No uses el modo ar_only cuando lances la app a través de un intent explícito de Android a la app de Google.
|
|
link (opcional) |
Una URL válida |
Es la URL de una página web externa. Si está presente, en la IU aparecerá un botón que dirige a esta URL cuando se hace 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 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. Se debe proporcionar junto con un archivo glTF con una animación de la misma duración. Si está presente, el sonido se repite en bucle después de que se carga el modelo. Debe tener escape de URL. |
resizable (opcional) |
true (predeterminada)
|
Cuando se establece en false, los usuarios no podrán ajustar el tamaño del modelo en la experiencia de RA. El ajuste de escala funciona con normalidad 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 sobre UX
Para brindar la mejor UX posible a los usuarios, recomendamos que los llamados a la acción visibles transmitan que el usuario está a punto de ingresar a un entorno inmersivo.
Para las experiencias del visualizador 3D, recomendamos un llamado a la acción etiquetado como Ver en 3D que se vea como una de las siguientes imágenes:
Cómo iniciar Scene Viewer con una intención explícita para los Servicios de Google Play para RA (solo en modo de RA)
El modo de RA en Scene Viewer usa 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 desde un sitio web o una app para Android nativa para lanzar Scene Viewer a través de com.google.ar.core package y proporcionar un browser_fallback_url. De esta manera, puedes asegurarte de que todos los usuarios tengan una experiencia de RA nativa a través de Scene Viewer o una experiencia alternativa que hayas creado tú mismo. Por ejemplo, puedes crear experiencias alternativas, como tu propio visualizador 3D o un mensaje de error elegante.
Para activar la intención explícita 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
Se admiten los siguientes parámetros para una intención explícita del paquete de Servicios de Google Play para AR.
| Parámetro del intent | Valores permitidos | Comentarios |
|---|---|---|
browser_fallback_url (obligatorio para intents basados en HTML) |
Una URL válida | Esto solo se admite para las implementaciones basadas en la Web. Esta es la URL a la que se navega cuando los Servicios de Google Play para RA no están presentes en el dispositivo o no están actualizados. |
mode (opcional) |
ar_only |
Scene Viewer siempre inicia el modelo 3D en una vista de RA nativa y oculta cualquier IU para cambiar al visor 3D de Scene Viewer.
Si no están presentes los Servicios de Google Play para RA, Scene Viewer inicia la URL que estableciste en browser_fallback_url para las 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 el modo nativo de RA como modo de entrada y brinda a los usuarios la opción de alternar entre los modos de RA y 3D a través de los botones Ver en tu espacio y Ver en 3D.
Si no están presentes los Servicios de Google Play para RA, Scene Viewer inicia la URL que estableciste en browser_fallback_url para las 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 |
Es la URL de una página web externa. Si está presente, en la IU aparecerá un botón que redirecciona a esta URL cuando se hace 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 se debe especificar cuando se garantiza que hay un controlador de intents 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 60 caracteres.
La versión 1.1 agregó compatibilidad con el diseño en HTML del contenido del título, con una cantidad arbitraria de texto permitida. 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 archivo glTF con una animación de la misma duración. Si está presente, el sonido se repite después de que se carga el modelo. |
resizable (opcional) |
true (predeterminada)
|
Cuando se establece en false, los usuarios no podrán ajustar el tamaño del modelo en la experiencia de RA. El ajuste de escala funciona con normalidad en la experiencia 3D.
|
disable_occlusion (opcional) |
false (predeterminada)
|
Cuando se configura en true, los objetos colocados en la escena siempre aparecen delante de los objetos del mundo real en la escena. Consulta [Habilita la oclusión](/ar/develop/depth#enable_occlusion) para obtener más información.
|
Orientación sobre UX
Para brindar 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 en un entorno envolvente. 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 la resiliencia, y 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);
Cómo usar <model-viewer> para iniciar Scene Viewer
Puedes habilitar Scene Viewer desde tu sitio web si incluyes 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 visualiza 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 el que se muestra en el siguiente ejemplo.
Cuando se usa el modo scene-viewer en ar-modes, se cambia a una vista de RA nativa y se invita al usuario a colocar el modelo en su entorno con Scene Viewer.
Si no están presentes los Servicios de Google Play para RA, presionar este botón 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 los modelos
Scene Viewer tiene la siguiente compatibilidad y limitaciones para los modelos.
| Compatibilidad con formatos de archivo | glTF 2.0/glb, con estas extensiones:
|
| Animación |
glTF contiene varias animaciones, Scene Viewer solo reproducirá la primera.
|
| Límites recomendados |
El rendimiento general de los recursos depende de la configuración de restricciones y de las compensaciones entre los vértices, los materiales, la resolución de la textura, la malla por material y otros factores. Sigue estos lineamientos para optimizar tus recursos.
|
| Compatibilidad con sombras | Scene Viewer renderiza automáticamente las sombras duras cuando se coloca un objeto, por lo que no recomendamos incluir sombras en el modelo. |
| Compatibilidad con texturas |
|
| Material | PBR |
| Carga de archivos | HTTPS |
| Scene |
|
Cómo usar la herramienta de vista previa para validar tus modelos 3D
Para asegurarte de que el archivo de 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, los archivos .bin y de imagen asociados, y un archivo de audio opcional. El archivo de audio se repetirá junto con la animación 0.
Puedes seleccionar varios archivos individuales o, de manera opcional, colocar el archivo .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, haz lo siguiente:
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:
Arrastrar y soltar 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, elige Scene Viewer > Load File. Selecciona un archivo .glb o .glTF y todos sus archivos asociados (o un archivo .zip que contenga estos archivos) y haz clic en Abrir.
Después de cargar los archivos que componen tu modelo 3D en la herramienta de vista previa, en la consola que se encuentra en la parte inferior del navegador, se muestran los resultados, incluidos los mensajes de error.
Cómo agregar modelos 3D para la validación
Para validar un modelo 3D, agrega los archivos que lo componen a nuestra herramienta Model Editor.
Para validar un modelo, el visualizador necesita el archivo GLB o glTF del modelo, los archivos bin y de imagen asociados, y un archivo de audio opcional. Puedes seleccionar varios archivos individuales o agregar un solo archivo ZIP.
Cuando agregas un archivo ZIP, el visualizador carga el primer archivo .glb o .glTF que encuentra, así como los archivos .bin y de imagen asociados dentro de ese archivo ZIP.
Abre la herramienta Model Editor 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 varios archivos .glb o .glTF, y cualquier archivo asociado (o selecciona un archivo .zip que contenga estos archivos), y arrástralos a la herramienta de vista previa.
Selecciona archivos de la herramienta de vista previa. En la herramienta de vista previa, elige Scene Viewer > Load File. Selecciona varios archivos GLB o glTF y todos sus archivos asociados (o un archivo ZIP que contenga estos archivos) y haz clic en Abrir.
Errores de validación
| Código de error | Gravedad | Mensaje | Valores admitidos actualmente |
|---|---|---|---|
INVALID_INPUT_FILE_EXTENSION |
Error | El archivo de entrada [nombre de archivo] tiene una extensión que no admite el validador. | ['.glb', '.gltf'] |
REC_INPUT_BINARY_SIZE_EXCEEDED |
Advertencia | La entrada del usuario proporcionada 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 del usuario proporcionada 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] del 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, algo que la especificación de Scene Viewer no admite. | |
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 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 articulaciones del glTF supera el límite admitido por la especificación de Scene Viewer, que es un máximo de [num] articulaciones. | 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 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 de triángulos, 6 : Abanico de triángulos} |
MISSING_PBR_METALLIC_ROUGHNESS |
Información |
Al material en el índice [idx] le falta la propiedad pbrMetallicRoughness. Esto no es obligatorio para la especificación de Scene Viewer si se usan en su lugar factores metálicos y de aspereza. Si no se usa ninguna de las dos opciones, el material utilizará los valores predeterminados, que pueden dar lugar a comportamientos imprevistos.
|