Mostrar e interactuar con el contenido web

Use WebSlate para mostrar contenido web interactivo en el entorno de 3D Mesh. Obtenga una experiencia de exploración completa en PC o Quest 2 con entrada intuitiva, personalización, seguridad y administración del rendimiento.

Puede usar WebSlates para:

• Interacción con mapas, diagramas y datos

• Visualización de paneles, páginas web, fotos y vídeos

• Mostrar contenido que resalta productos y servicios, historias de clientes e identidad de marca

Características de WebSlate

• Especifique una dirección URL predeterminada: elija su ubicación, arrastre y coloque el objeto prefabricado y agregue una dirección URL. Repita si desea varios WebSlates en la escena.

• Entrada y audio integrado: la navegación web del usuario final, la interacción con las aplicaciones y la visualización de vídeos están disponibles en Mesh.

• Navegación segura: bloquee las direcciones URL de redirección para evitar redirecciones malintencionadas y navegaciones de hipervínculos no deseadas.

• Personalización visual: modifique la calidad para optimizar los dispositivos de los usuarios. Atraer a los usuarios desde una distancia con contenido fácil de ver.

• Scriptable: con scripting visual y scripting en la nube, puede habilitar alternar entre páginas con un botón.

• Integración de herramientas de Analizador de rendimiento de contenido: mida el tiempo promedio que tarda URP en representar WebSlates en un marco y busque problemas de carga de contenido.

• Probar en modo de reproducción con emulación de malla: interactúe con el contenido como lo haría un usuario directamente desde el editor de Unity.

• Autenticación manual en la experiencia: acceda a contenido seguro desde dentro de la experiencia iniciando sesión en su cuenta y viendo contenido en tiempo de ejecución.

Funcionamiento de WebSlate

Si tiene un proyecto de Unity configurado para crear entornos de malla, agregar un WebSlate a su entorno es un proceso sencillo.

En Mesh, WebSlate carga una página interactiva a través de una dirección URL proporcionada. La dirección URL que se le asigna en el entorno será la misma cargada en Mesh. En el kit de herramientas de Mesh, el objeto prefabricado WebSlate contiene un parámetro de dirección URL que los desarrolladores pueden especificar para controlar el contenido mostrado en su entorno de Malla.

• Cuando se carga en la aplicación mesh para PC y Quest, las páginas web cargadas por un WebSlate se pueden interactuar a través de la entrada del mouse, el teclado y el controlador XR de Quest.

• El tamaño y la forma del WebSlate coincidirán con el del quad GameObject en el que se coloca. Normalmente, se trata del quad baked dentro del prefabricado WebSlate.

• Se pueden agregar varios WebSlates a una escena. El número de usuarios del entorno de Mesh no afecta al rendimiento de WebSlate; Los recursos de WebSlate se inicializan localmente en el equipo del usuario.

• WebSlates se puede configurar con scripting visual o en la nube para agregar comportamientos interactivos y sincronización entre los usuarios.

• WebSlate puede mostrar páginas web y admite la interacción, pero no funciona como explorador y no admite marcadores, historial o desplazamiento hacia atrás.

• Puede obtener una vista previa de WebSlate en el proyecto de Unity antes de cargar la escena en Mesh presionando Reproducir.

Requisitos y dependencias

WebSlate depende de los paquetes Unity.InputSystem y Unity.XR.Interaction.Toolkit de Unity, ubicados en el kit de herramientas de Mesh.

Agregar un objeto prefabricado WebSlate al proyecto de Unity

Hay dos tipos de objetos prefabricados de WebSlate disponibles en el kit de herramientas mesh que puede agregar a la escena. Si prefiere un WebSlate limpio sin componentes adicionales, agregue el objeto prefabricado WebSlate. Si desea un WebSlate contenido en un marco estilizado con características adicionales, agregue el objeto prefabricado WebSlateFramed .

Agregar el objeto prefabricado WebSlate desde un menú

Para agregar cualquiera de los objetos prefabricados a la escena:

1. Haga clic con el botón derecho en la jerarquía y, a continuación, en el menú contextual, realice una de las acciones siguientes:

   Para agregar el webSlate limpio sin componentes adicionales:
   Seleccione Mesh Toolkit>WebSlate.

   Para agregar webSlate con el marco estilizado y características adicionales:
   Seleccione Mesh Toolkit>WebSlateFramed.

2. Agregue una dirección URL al WebSlate para mostrar el contenido.

   Sugerencia: También puede hacer clic en el botón "+" situado en la parte superior izquierda de la ventana Jerarquía para ver el mismo menú.

   

   

Busque y agregue el objeto prefabricado WebSlate.

También puede buscar y agregar un objeto prefabricado WebSlate.

1. En el campo Buscar, escriba "WebSlate". Asegúrese de que tiene seleccionado el filtro Todo .

   

2. Arrastre el objeto prefabricado que desee a la vista Escena o a la jerarquía.

   

3. En inspector, vaya al componente WebSlate y agregue la dirección URL que desea mostrar en WebSlate:

   

Asegúrese de que webSlate es legible

Es importante asegurarse de que todos los asistentes de una experiencia de Mesh puedan leer todo el contenido de un WebSlate cómodamente. Se recomienda crear un espacio vacío delante de un WebSlate para que los asistentes puedan acercarse a él y ajustar su posición para una mejor vista. Si su experiencia contiene asientos, vea webSlate desde cada asiento para asegurarse de que un asistente sentado en ese asiento pueda leer el texto en WebSlate. Si tiene control sobre el contenido que aparecerá en un WebSlate, experimente con varios tamaños de fuente para el texto para determinar el tamaño óptimo para su visualización. En la experiencia de ejemplo siguiente, el texto "Microsoft Teams" en el centro de WebSlate es lo suficientemente grande como para una visualización cómoda, pero el texto mucho más pequeño en las esquinas es difícil de leer. En este tipo de escenario, no tendría control sobre el texto del vídeo de streaming, por lo que debería considerar la posibilidad de acercar los asientos. Además, los asientos que están más centrados y mirando directamente al WebSlate proporcionarán una mejor vista que los asientos que están fuera de los lados.

Vista previa de WebSlate en modo de reproducción con emulación de malla

Para ver una dirección URL que se muestra en webSlate más rápidamente, puede usar el modo de reproducción con emulación de malla. Además de realizar pruebas en este modo, la única manera de ver webSlate es cargarla con el cargador del kit de herramientas de Mesh y verla en una experiencia de Mesh.

Para agregar el modo de reproducción con emulación de malla al proyecto, siga las instrucciones del artículo Emulador de Malla.

Para ver la página web en WebSlate:
Presione el botón Reproducir del editor de Unity.

Habilitar la interacción de WebSlate para el modo de reproducción con emulación de malla

Para habilitar la interacción en WebSlate, debe configurar algunas cosas.

1. Agregue el emulador de malla a la escena para habilitar el modo de reproducción con emulación de malla.

2. Cree un nuevo Objeto GameObject de plano . Este será su piso. Asegúrese de que GameObject está situado en el origen (0,0,0):

   

3. Coloque webSlate para que se sitúe delante del carácter MeshEmulatorSetup :

   

4. Haga clic en el botón Reproducir y, a continuación, haga doble clic para interactuar con la página web que se muestra en WebSlate:

   

Buen trabajo. Ha agregado un webSlate personalizado a la escena de Unity y ha probado la interacción en modo de reproducción con emulación de malla.

Ahora ya está listo para cargar el entorno en Mesh y compartir su creación con el mundo.

WebSlate en Scripting visual

Con Visual Scripting, los desarrolladores pueden implementar la funcionalidad y el comportamiento de WebSlate sin necesidad de escribir código. En su lugar, se proporciona una interfaz visual basada en nodos, lo que permite a los usuarios definir y conectar diversas acciones y eventos en una escena. Algunos desarrolladores encuentran que esto puede simplificar el proceso de agregar interactividad y comportamiento.

Para habilitar el scripting visual mediante WebSlate, debe configurar algunas cosas.

1. Vaya a Editar>configuración del proyecto.

2. En la lista de la izquierda, seleccione Visual Scripting.

   

3. Expanda Biblioteca de nodos. Esto muestra la lista de ensamblados.

4. En la parte inferior de la lista de ensamblados de la derecha, haga clic en el botón Agregar (+). Esto agrega un nuevo elemento a la lista que muestra "(Sin ensamblado)".

5. Haga clic en la nueva entrada de ensamblado y, a continuación, en el campo Buscar, escriba "Webslate". Esto limita la lista a Microsoft.Mesh.WebSlate. Seleccione este elemento para agregarlo a la lista Ensamblado .

   

   Visual Scripting agrega Microsoft.Mesh.WebSlate y sus nodos a la biblioteca de nodos. Para usar los nodos del proyecto, seleccione el botón Regenerar nodos .

   

   Dirección URL de carga

   Los desarrolladores ahora pueden cambiar dinámicamente el contenido web en tiempo real cargando nuevas direcciones URL a través de Visual Scripting. Esta funcionalidad amplía el ámbito de varias aplicaciones, incluida la modificación del contenido web en función de las preferencias del usuario o su actualización en respuesta a los datos en tiempo real.

   

   Cargar contenido HTML

   Esta nueva característica de WebSlate permite a los desarrolladores quitar archivos HTML como TextAssets en la escena de Unity con poco esfuerzo. Esta integración no solo simplifica el flujo de trabajo, sino que también permite comentarios inmediatos en el modo de reproducción de Unity, lo que mejora la edición y la depuración en tiempo real. Además, admite el cambio dinámico de contenido, ofreciendo flexibilidad y una experiencia de usuario más interactiva.

   

   Cree o reutilice html existente para ver o interactuar en el entorno de Mesh: si no desea hospedar contenido HTML o tiene archivos sin conexión seguros, puede agregar HTML en el lugar e incluirlo como parte del recurso en la escena.

   Carga dinámica en tiempo de ejecución: cargar HTML desde archivos permite a los desarrolladores realizar cambios en tiempo real mediante Visual Scripting. Esta funcionalidad dinámica mejora la experiencia del usuario.

   Bucle de comentarios rápidos en el modo de reproducción de Unity: con el contenido HTML cargado de archivos, los desarrolladores pueden ver instantáneamente los efectos de sus cambios mientras se encuentra en el modo de reproducción de Unity.

WebSlate in Cloud Scripting

Los desarrolladores también pueden agregar webSlate a entornos mediante scripting en la nube mesh. Esto significa que un webSlate puede navegar por un script en la nube de Mesh y, a continuación, sincronizarse entre los usuarios. Por ejemplo, puede crear un script en la nube mesh que contenga un nodo WebSlate y uno o varios nodos interactables. A continuación, puede configurar el controlador de eventos click de InteractableNode para navegar por WebSlate a una dirección URL diferente. Al agregar un script en la nube de Mesh junto con WebSlate, los usuarios pueden actualizar el contenido de WebSlate de forma interactiva.

Para obtener más instrucciones sobre el nodo WebSlate en Mesh Apps, consulte la introducción al scripting visual.

Sugerencias generales

• Puedes colocar un WebSlate en GameObjects distinto de un Quad agregando WebSlate.cs como componente de script directamente al objeto 3D que prefieras y agregando UnlitWebSlate.mat a MeshRenderer Materials. Tenga en cuenta que esto puede dar lugar a la ampliación, inversión o rotación de texturas visuales.

• Un WebSlate carga una dirección URL predeterminada. Debe reemplazar esta dirección URL por una que prefiera para cada WebSlate en uso. El parámetro de brillo se establece en 1,0 (100 % del brillo del navegador).

• WebSlates se suspenderá automáticamente después de estar fuera de la pantalla durante demasiado tiempo. Si necesita asegurarse de que una pizarra determinada esté siempre en ejecución (como una reproducción de audio continua o streaming en vivo), compruebe el botón "Impedir suspensión" en la asociación WebSlate. Consulte a continuación para ver las implicaciones de rendimiento.

• Para ajustar el tamaño de la dirección URL de la imagen al tamaño de WebSlate, encapsula la dirección URL en HTML. Use La API WebSlate LoadHTML mediante scripting visual para representar este contenido HTML en webSlate. Agregue el CÓDIGO HTML construido a la propiedad HTMLContent. Como alternativa, puede usar la API LoadHTMAsset y pasar el código HTML como un recurso. Reemplace la dirección URL de la imagen por la dirección URL de la imagen.

  HTML de ejemplo con la dirección URL de imagen y el grafo de scripting visual mediante loadHTML y LoadHTMLAsset API:

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width initial-scale=1.0"><title>Microsoft</title></head><body style="margin: 0; height: 100vh; overflow: hidden; background-color: black;"><img src="https://learn.microsoft.com/en-us/mesh/media/webview-developer-guide/ArcadeWebSlate.png" loading="lazy" style="width: 100%; height: 100%;"></body></html>

  

  

Rendimiento

• Dado que webSlate es una página web cargada, es importante tener en cuenta las implicaciones de rendimiento:

  • Las escenas suelen tener un rendimiento de 60 fps con hasta 10 WebSlates activos. La degradación general del rendimiento y la velocidad de fotogramas se pueden observar en proporción al número de WebSlates colocados en una escena, independientemente del contenido.

  • El contenido se carga y ejecuta en WebSlate en un subproceso independiente de la actualización y representación de los subprocesos de representación de la escena y, por tanto, es poco probable que afecte directamente a la velocidad de fotogramas. Sin embargo, todavía es importante tener en cuenta el costo de JavaScript que se ejecuta en una página web tanto en términos de complejidad en tiempo de ejecución como de uso de memoria.

  • Para ayudar a ahorrar rendimiento, los WebSlates que están fuera de pantalla para más de 30 se suspenden automáticamente. Se reanudan rápidamente al volver a la pantalla, pero esto puede afectar a los servicios que se ejecutan activamente en la página hospedada. Si se trata de un problema, los desarrolladores pueden deshabilitar la suspensión con la casilla "Impedir suspensión" del objeto prefabricado. Tenga en cuenta que hacerlo puede hacer que la escena consuma más recursos, ya que estos WebSlates permanecen activos en todo momento.

  

• Dado que WebSlates no tiene ninguna interfaz de usuario de navegación externa de forma predeterminada, el procedimiento recomendado es cargar solo direcciones URL personalizadas, donde la navegación del sitio es cíclica y se puede realizar dentro de la página. Esto se puede hacer con una barra lateral de navegación o vínculos a una página central, por ejemplo.

• La herramienta Content Analizador de rendimiento (CPA) incluye un analizador de WebSlate que mide el tiempo medio que tarda la canalización de representación de Unity en representar WebSlates en un marco.

  • Las medidas se basan en la grabadora del generador de perfiles de Unity y requieren el modo de reproducción. El analizador mueve la cámara a través de cada WebSlate para recopilar muestras de generador de perfiles suficientes y calcula el tiempo medio de representación.

  • Esto proporciona un análisis de primera fase y de alto nivel de los tiempos de representación de WebSlate en el contexto de la canalización de representación de Unity. No proporciona la velocidad de fotogramas del propio contenido webSlate.

  • Si la canalización de representación de Unity supera el umbral para representar WebSlates (actualmente 10 ms), la herramienta CPA proporciona una advertencia.

  • Las mismas medidas también están disponibles para el Generador de perfiles de rendimiento. El grupo del Generador de perfiles de rendimiento normalmente cambia los colores de verde a rojo cuando se supera la asignación presupuestaria de una categoría. Por ahora, el grupo WebSlate solo se muestra como verde hasta que se racionaliza un presupuesto de tiempo de representación razonable para WebSlates.

  

Restricciones de seguridad

• WebSlates están bloqueados en las direcciones URL a las que navegan, lo que impide redirecciones malintencionadas. Todas las navegaciones de hipervínculos no deseadas a dominios externos se bloquean, a menos que se muestren explícitamente como un dominio permitido (consulte a continuación).

• Los webSlates están restringidos a la navegación dentro del dominio inicial o a las redirecciones del servidor y de la dirección URL especificadas.

• La navegación dentro de un WebSlate se limita exclusivamente a HTTPS.

• El acceso del dispositivo a la cámara web, el micrófono y la geolocalización están bloqueados.

WebSlate domain allow-list

Para garantizar la seguridad frente a vectores de ataque no deseados basados en direcciones URL, como la suplantación de identidad (phishing), WebSlates restringe de forma predeterminada la navegación a las direcciones URL que se incluyen en el dominio de la primera página cargada en WebSlate. Por ejemplo, un WebSlate iniciado en https://www.microsoft.com/ solo navegará a páginas cuya dirección URL comience por "www.microsoft.com". Aunque esto garantiza que los usuarios no se desintejan accidentalmente del flujo de navegación previsto, puede ser un valor predeterminado demasiado restrictivo para algunos casos de uso, como la autenticación de usuario, durante el cual puede haber redireccionamientos a subdominios o proveedores de autenticación de terceros.

La forma de adaptarse a estos casos de uso es agregar dominios a la lista de permitidos de WebSlate.

Agregar dominios automáticamente (recomendado)

Al trabajar con WebSlates en el editor de Unity, tiene la opción de habilitar "Recopilar dominios permitidos". Esto quitará la restricción de navegación del dominio para que pueda navegar libremente al ejecutarse en modo De reproducción para probar su escenario. Mientras navega en modo de reproducción, WebSlate registrará los dominios que visite en segundo plano.

En este caso, vamos a expandir la navegación desde microsoft.com para incluir también learn.microsoft.com.

Una vez que salga del modo de reproducción, encontrará un recurso denominado "WebViewAllowedDomains.asset" en la carpeta Assets de nivel superior.

Al hacer clic en este recurso, se le proporcionará la lista de dominios adicionales que visitó más allá del dominio de la dirección URL inicial. Puede hacer clic con el botón derecho, copiar y, a continuación, pegar los valores en el campo "Dominios permitidos" del componente WebSlate.

Nota:

Esta opción es imposible habilitar en escenas cargadas. Si se deja habilitada la opción "Recopilar dominios permitidos", NO se quitará la restricción en la escena final. Sin embargo, la lista de dominios permitidos se conservará y permitirá la navegación siempre que los dominios se agreguen al WebSlate.

Agregar dominios manualmente

Si ya sabe qué dominios necesitará, puede agregarlos manualmente a WebSlate expandiendo la lista desplegable "Dominios permitidos" y agregando los dominios complementarios a la lista en la GUI de Unity.

Transmisiones en directo con tecnología de WebSlate

Para ello, integre el objeto Prefab WebSlate en su entorno y proporcione la dirección URL de streaming en vivo. En el caso de que la dirección URL de streaming en vivo no esté disponible de antemano, podría usar un servicio de redirección de direcciones URL para generar una dirección URL y proporcionarla a WebSlate. Este enfoque proporciona la flexibilidad de actualizar la dirección URL de redireccionamiento en el último momento sin necesidad de volver a publicar el entorno grande con la dirección URL de streaming en vivo. Asegúrese de seleccionar la opción "Impedir suspensión" durante la configuración de WebSlate para evitar que se suspenda después de 30 segundos si alguien no está viendo activamente el WebSlate. Los webSlates no requieren configuración con las herramientas de host, por lo que los eventos sin host se pueden crear y servir como espacios de colocación con contenido significativo.

Limitaciones y problemas conocidos

Limitaciones generales

• Los webSlates se admiten actualmente en la aplicación Mesh en dispositivos independientes de PC y Quest. WebSlates solo están disponibles para obtener una vista previa en el Editor de Unity en Windows.

• Los webSlates en la versión preliminar del editor faltan algunas funcionalidades de entrada (doble clic, arrastrar).

• Al ver desde una distancia en Quest, la legibilidad es baja.

• El audio no está localizado espacialmente.

• La sincronización de contenido web se limita a las aplicaciones que usan API web para sincronizar el contenido.

Problemas conocidos

Consulte las secciones WebSlate del artículo Problemas conocidos del kit de herramientas de Mesh.

Comentarios sobre el contenido web en Mesh

¡Nos encantan los comentarios y los informes de errores! Si desea proporcionar comentarios, use el botón Comentarios dentro de cualquier experiencia de Malla. Esto garantiza que los comentarios y los informes de errores se revisarán e incorporarán rápidamente. Para los comentarios de WebSlate, incluya "[contenido web]" o una mención de WebSlate en sus comentarios.