Novedades de la web espacial

Hola, soy Eddy del equipo de Safari de visionOS. Este es un gran año para la web espacial, con nuevas funcionalidades que llevarán la experiencia web a una nueva dimensión.

Agregamos la renderización estereoscópica de modelos 3D, junto con otro contenido web, para que las personas interactúen con el modelo. También agregamos soporte para contenido multimedia envolvente, un tipo de contenido que va más allá de la pantalla plana.

Agregamos funcionalidades de vista previa para desarrolladores, como entornos de sitios web. Quiero mostrarte cómo puedes adoptar estas funcionalidades. Te mostraré cómo insertar modelos 3D en tu página web, presentar contenido multimedia envolvente y un entorno de página web personalizado. Empecemos. En las últimas décadas, el elemento HTML Image permitió a los desarrolladores colocar imágenes en la web. Con la llegada de la computación espacial, presentamos una nueva forma de llevar tu contenido a la siguiente dimensión permitiendo integrar y mostrar modelos 3D en tu página web. Este es un nuevo elemento HTML Model. Se presentó a los organismos de estándares web hace algunos años, y este año lo incluimos de forma predeterminada en Safari en visionOS. Con un marcado sencillo, ahora se pueden ver modelos 3D integrados junto con otro contenido web. A diferencia de cualquier biblioteca de renderizado, el elemento Model se renderiza estereoscópicamente, para percibir la profundidad del objeto y poder moverse para ver los diferentes ángulos. Profundizaremos en muchos aspectos de la incrustación de modelos 3D, desde preparar el contenido hasta renderizarlo con interacciones y animaciones, etc. El primer paso para insertar un modelo 3D es crearlo. Con Safari en visionOS, el elemento Model es compatible con el formato USDZ, un formato muy usado en la industria del contenido 3D. Con las herramientas existentes, puedes capturar, convertir o crear archivos USDZ. Puedes capturar un objeto real en un archivo de modelo 3D con un iPhone. Solo tienes que descargar la app Reality Composer del App Store para empezar. La API Object Capture en iOS permite a las apps capturar y generar archivos de modelo de forma similar. Es posible que tengas algunos modelos 3D para tu caso de uso, pero posiblemente estén en otros formatos. macOS permite la conversión de formatos de modelos 3D a USDZ con herramientas de vista previa o línea de comandos. Para usuarios avanzados, hay un software de modelado 3D que se usa para crear hermosos y sorprendentes modelos 3D, como Blender, Houdini, Maya, Reality Composer Pro y muchos más. Muchos admiten la exportación a USDZ. El ecosistema de USD tiene varias herramientas que puedes usar en tu flujo de trabajo. Para más información ve la sesión de la WWDC23: “Explore the USD ecosystem”. Si nunca antes creaste un modelo 3D, puedes ver “Meet Reality Composer Pro”, también de la WWDC23. Te resultará útil tener listo un archivo USDZ de prueba cuando experimentes con el elemento del modelo. La forma más rápida de obtener el archivo USDZ es descargarlo de developer.apple.com. Algunos se hicieron con Object Capture y otros se crearon cuidadosamente con software de modelado 3D. Como todos los componentes web, el tamaño del archivo debe ser pequeño para cargar rápido. Mi forma favorita es usar Vista previa en la Mac para exportar una copia con texturas comprimidas. Hay muchas más formas de optimizar el archivo, que se explican en profundidad en la sesión de la WWDC24: “Optimize your 3D assets for spatial computing”. Con el archivo listo, insertémoslo en la página web. La sintaxis para insertar un modelo es simple. Aplica un archivo USDZ en el atributo de origen del elemento Model. No olvides la etiqueta de cierre. Otra opción es colocar el elemento de origen en un elemento del modelo vacío, como lo harías con el elemento de imagen.

El elemento del modelo funciona igual que otros elementos visuales del DOM, lo colocas donde quieras que se muestre el modelo. Debes saber que el modelo se representa detrás de la superficie de la página. Piensa que el elemento del modelo es una abertura a un espacio virtual detrás de la página y el modelo vive dentro de ese espacio. Esto evita que el contenido sobresalga de la página a medida que el elemento del modelo se desplaza hacia la vista. El navegador escalará el modelo para que se ajuste a los límites del elemento. Lo hace ajustando y centrando la cara x-y del cuadro delimitador del modelo dentro del elemento.

Algunos servidores web o CDN antiguos podrían no reconocer la extensión USDZ y devolver un tipo de contenido incorrecto en la respuesta HTTP. Para devolver el tipo de contenido correcto, debes agregar alguna configuración a tu servidor web. Estos son ejemplos de cómo especificar el tipo MIME de USDZ para servidores web. Para más información, consulta la documentación de tu software de servidor web. Para crear un buen sitio web, es fundamental que sea accesible para usuarios con distintos dispositivos. Es importante proporcionar una alternativa compatible con versiones anteriores. Puedes incluir una imagen alternativa dentro del elemento del modelo.

Me gusta brindar un renderizado 2D de mi modelo para que personas en otros navegadores tengan una idea de cómo se ve el objeto. En vez de una imagen estática, puedes brindar una experiencia de visualización en 2D usando bibliotecas de terceros, como Three.js, BabylonJS, model-viewer y más.

Este es un ejemplo con la biblioteca model-viewer. Esta dibuja un modelo determinado en un lienzo 2D con JavaScript. Puedes usarlo como alternativa ajustando el elemento del modelo al código de visualización 2D. Así, las personas que usen Safari en visionOS verán el modelo renderizado estereoscópicamente con profundidad y quienes usen otros navegadores verán un renderizado 2D. Para un comportamiento alternativo personalizado, puedes usar JavaScript para comprobar si el elemento del modelo es compatible.

Puedes comprobar la existencia del objeto window.HTMLModelElement. Recuerda que es una mala idea detectar si el agente de usuario es VisionOS Safari. Es frágil y podría fallar si otros navegadores empiezan a ser compatibles con el elemento del modelo. Debes detectar la funcionalidad, no el agente. Un archivo USDZ puede superar los 10 MB, por lo que puede tardar en cargarse en redes más lentas. Tal vez quieras saber cuándo el modelo termina de cargarse para poder realizar actualizaciones en la IU. Un ejemplo común es el indicador de carga.

El elemento del modelo tiene la propiedad ready, que devuelve un objeto Promise. Cuando el modelo esté cargado, el problema se resolverá. Puedes ocultar el indicador de carga y mostrar el elemento del modelo. La promesa ready puede fallar en caso de un error de carga, así que no olvides manejarlo, por ejemplo con un botón para reintentar. En mi experiencia, brindar señales visuales de que algo se está cargando realmente ayuda a que los visitantes no abandonen la página.

Ahora tienes el modelo integrado. Es hora de que se vea bien en el sitio web. El elemento del modelo define un espacio virtual para renderizarlo. Es una buena idea establecer el color del espacio en el mismo color que el contenido web, para que el elemento del modelo se integre bien en la página.

Al agregar un elemento del modelo a una página, todo el elemento se reemplaza por el espacio virtual y las personas no verán el color de fondo original de esa región. Para arreglarlo, debes establecer el color del espacio virtual con el atributo background-color de CSS. Esto debe establecerse en el elemento del modelo en sí, no en sus predecesores. Si especificaste un color de fondo con alfa, se convertirá en opaco. Si no quieres repetir la definición de color, puedes usar una propiedad personalizada de CSS para tener tu código limpio. Cuando el elemento del modelo se mezcla con la página, es mucho más fácil ser creativo.

En el ejemplo, extendí el elemento del modelo debajo del panel de la derecha. Apliqué un efecto de vidrio esmerilado al panel, mostrando la cámara debajo en un cierto ángulo, lo que da sensación de superposición.

Hay varias formas de lograr el mismo efecto, solo te mostraré mi forma de hacerlo. Me aseguro de que el elemento del modelo se extienda detrás del panel con position: absolute. backdrop-filter da el efecto de vidrio esmerilado difuminando los pixeles del elemento del modelo. linear-gradient resalta el borde para dar una sensación de grosor, al tiempo que mantiene el color claro del panel para que el texto sea fácil de leer. Todos estos son trucos CSS que existen desde hace tiempo, pero que brillan cuando se combinan con el efecto de profundidad del elemento del modelo. La página se ve muy bien, pero podemos hacer que el modelo se vea aún mejor ajustando el efecto de iluminación. Aquí, aplico una iluminación diferente al mismo archivo de modelo. Fíjate en lo diferentes que se ven en función de la iluminación. Para controlar el efecto de iluminación, se usa un tipo especial de imagen para definir cómo se ve el entorno para el modelo y que este refleje las luces aportadas por el entorno. Esta técnica se llama iluminación basada en imágenes, o IBL. La imagen se denomina archivo IBL. El archivo IBL puede aparecer distorsionado porque proyecta los 360 grados del entorno en una imagen plana. Esta proyección esférica aplanada, también conocida como proyección equirrectangular, es muy común. El archivo IBL no forma parte del archivo USDZ, por lo que debe especificarse en el renderizado.

Para especificar el IBL en elementos del modelo, debes usar el atributo EnvironmentMap. Si no proporcionas una, el navegador aplicará una iluminación predeterminada. Como el IBL no es parte del archivo USDZ, cuando se use fuera de la página web, no tendrá el mismo efecto de iluminación. Esto permite que la app de presentación aplique la iluminación adecuada para la experiencia visual. Deberías considerar el uso de formatos OpenEXR y Radiance HDR para tu archivo IBL. Estos dos formatos harán que los reflejos sean más realistas, ya que representan el nivel de brillo en muchos órdenes de magnitud. Por otro lado, un IBL JPEG se verá muy opaco y plano. Ahora que tu modelo se ve bien, es hora de que los visitantes interactúen con él. El elemento del modelo admite una variedad de interacciones. Al pellizcar y mantener presionado el elemento del modelo, se activa una interacción de arrastrar y soltar. Los usuarios pueden soltar el modelo en otra app o en una ubicación vacía para ver el modelo en su espacio con Vista Rápida. Esta es una forma genial para que las personas vean el modelo en su tamaño real, con efectos de iluminación para que parezca real. Pueden pegarlo sobre una superficie, darle la vuelta, agrandarlo o reducirlo. Además de arrastrar y soltar, también puedes habilitar el gesto de pellizcar y arrastrar sobre el elemento del modelo para rotarlo en línea. Puedes inclinar el modelo hacia arriba y abajo, y restablecerá la inclinación al soltarlo.

Este comportamiento de rotación se activa al especificar stagemode=“orbit” en el elemento del modelo. La rotación se realiza a lo largo del eje Y, con una inclinación vertical permitida durante el gesto. El navegador ajustará la escala y posición del modelo para que permanezca detrás de la superficie de la página al rotar. Si el comportamiento de rotación con stagemode no es suficiente, puedes crear interacciones personalizadas manualmente. Si quieres mover y orientar el modelo manualmente, puedes hacerlo con JavaScript. Puedes controlar la ubicación exacta y la orientación en la que quieres que esté en el espacio virtual. Esto se hace cambiando la matriz de transformación expuesta por el elemento del modelo.

La matriz de transformación se muestra con la propiedad entityTransform. Cuando se carga el modelo, el explorador calcula la transformación necesaria para la ubicación predeterminada y la guarda en entityTransform. La propiedad se asignará cuando se resuelva la promesa ready.

Te mostraré un ejemplo de cómo personalizar la ubicación del modelo. Queremos ofrecer un enlace que rotará el modelo hacia la derecha. En la función turnRight, lee la matriz de transformación calculada por el navegador a partir de entityTransform. Aplica una rotación de 90 grados a lo largo del eje Y con el método rotateAxisAngle, que es una API de la clase DOMMatrix. 0-1-0 representa el eje Y, y 90 significa rotar 90 grados. Cuando tengas la nueva matriz, configúrala de nuevo en entityTransform para que surta efecto. Las operaciones compatibles con la matriz entityTransform son escalado uniforme, rotación y traslación. Recibirás un error si intentas asignar una matriz que contiene operaciones no compatibles con entityTransform. La entityTransform predeterminada debería ser suficiente en la mayoría de casos. Pero algunos quizá quieran entender las matemáticas detrás del cálculo predeterminado. Para eso, hay que volver y ver el comportamiento de transformación de entidades para una matriz de identidad.

Si estableces la transformación de la entidad como una matriz de identidad, se alineará el origen del archivo USDZ con el centro del elemento del modelo. El modelo solo se renderiza dentro del espacio detrás de la superficie de la página. Se recortará cualquier parte que se extienda. Se muestra de forma que 1 cm en el USDZ equivale a 1 cm en CSS, lo que equivale a 38 pixeles en CSS. En visionOS, la ventana de Safari se agranda cuando se aleja del usuario. Cuando el modelo se muestra en la página web, no hay relación entre las unidades usadas en el archivo USDZ y las unidades físicas en el mundo real. Si necesitas mostrar tu objeto en su tamaño físico real, lo mejor es dejar que las personas lo arrastren fuera de la página y lo vean con Vista Rápida, como mostré anteriormente. La propiedad entityTransform se puede usar de formas creativas. En el ejemplo, se amplía en diferentes partes del modelo cuando avanzamos por las funcionalidades de la cámara. Con tan solo moverla, puedes animar la pantalla de la cámara para abrirla y cerrarla con animaciones del modelo. Te mostraré cómo. El formato USDZ admite la definición de animaciones en el archivo y es una funcionalidad compatible con las herramientas principales. Algunos archivos USDZ también tienen pistas de animaciones. El elemento del modelo admite la reproducción de la primera pista definida en el archivo USDZ. Para animaciones en bucle simples, puedes usar los atributos de loop y autoplay. Si quieres controlar la animación manualmente, puedes usar los métodos play y pause en el elemento del modelo. Puedes determinar si la animación se está reproduciendo con la propiedad paused. Estas pocas API pueden resultarte familiares porque en realidad son las mismas que las del elemento de video.

Para casos de uso más complejos, puedes usar tu software de modelado 3D para crear una línea de tiempo y animar entre distintos estados. En mi archivo de modelo de cámara, primero animo la apertura y el cierre del flash de la cámara, seguido de la apertura y el cierre de la pantalla. La información de la animación se guarda en el archivo USDZ. Al colocar un modelo animado en el elemento del modelo, puedes saltar a cualquier punto de la línea de tiempo con currentTime. Por ejemplo, si quiero abrir el flash de la cámara, solo tengo que establecer currentTime en 1. La unidad de la propiedad currentTime son los segundos. Si quiero abrir la pantalla, simplemente lo pongo en 3. Mira cómo el modelo se actualiza al instante sin ninguna animación implícita. Esto te permite saltar a marcas de tiempo discontinuas para lograr cualquier efecto específico. Puedes crear experiencias interesantes conectando la propiedad currentTime con algunas interacciones.

Aquí tengo un regulador con un rango de valores entre 2 y 3. Pretende cubrir la parte de la línea de tiempo donde la pantalla se abre. Agrego un receptor de eventos para ver si cambia el valor. Cuando eso sucede, establezco la hora actual en el valor del regulador. Así, los visitantes pueden controlar la posición de la pantalla. Puedes ampliar esta idea a otras interacciones, como el desplazamiento o un evento de arrastre. También puedes combinar currentTime y entityTransform de formas creativas. En el ejemplo de la cámara, la animación se controla con un temporizador. Las partes individuales se animan con la propiedad currentTime, mientras que el movimiento de toda la cámara con la propiedad entityTransform. La página va quedando bien, pero es posible que quieras mejorarla agregando un toque personal, como permitir que las personas graben en el producto. Pero no es posible que sepas qué texto insertar en el modelo USDZ de antemano. Ahí es donde entran los modelos generados dinámicamente. Si necesitas mostrar un modelo dependiente de la entrada del usuario, puedes usar JavaScript para generar de forma programática un archivo USDZ en el navegador y mostrarlo en el elemento del modelo. Three.js es una biblioteca de JavaScript que permite crear modelos 3D con programación. Three.js es un tema complejo, por lo que hoy no hablaremos de los detalles. En un nivel alto, tienes un objeto THREE.Scene que contiene el modelo que creaste por procedimientos. Supongamos que ya tienes un objeto de escena bien diseñado. Three.js incluye un módulo exportador de USDZ que puedes importar. Una vez importado, puedes usar parseAsync para generar el blob de datos para el USDZ completo de la escena del modelo. Puedes crear una URL de objeto que apunte al blob de datos que generaste con el método URL.createObjectURL. Ahora que tienes la URL del objeto, puedes establecerla en el atributo de origen del elemento del modelo y se renderizará. Con esta técnica, ya no solo debes usar archivos USDZ estáticos preparados sin conexión.

Puedes agregar personalizaciones a los modelos según los datos que ingresen los visitantes, como un nombre de producto o cambiar el color del texto.

Lo bueno de esto es que el modelo aún se puede arrastrar y ver en el espacio de las personas.

Hay muchas más API compatibles con el elemento del modelo y hasta ahora solo hablamos de algunas. El resto pueden ser útiles a medida que adoptes modelos en tus páginas web.

Puedes obtener información del elemento del modelo en la documentación de MDN y la propuesta del elemento en el sitio web de W3C. Encontrarás las URL en los enlaces de la sesión. Déjame hablarte de otra categoría de contenido, multimedia envolvente. El año pasado, presentamos formas de mostrar fotos panorámicas y espaciales de tu sitio web. Estamos ampliando la admisión de video espacial, video de 180 grados, 360 grados y con campo de visión amplio, también de Apple Immersive Video. También actualizamos las presentaciones de fotos panorámicas y espaciales. Con el iPhone 15 Pro o posterior, puedes capturar video espacial directamente desde la app Cámara y verlo espacialmente desde Fotos en el Apple Vision Pro. Con visionOS, hay compatibilidad con tres tipos de contenido multimedia envolvente: video de 180 grados, de 360 grados y de campo de visión amplio. Estos tipos de contenido van más allá de una superficie plana y brindan al usuario una experiencia envolvente. Ahora también se admite la presentación de Apple Immersive Video, con video estéreo de alta resolución calibrado con precisión para cada lente de la cámara. Para más información de estos nuevos tipos de contenido multimedia en, ve la sesión de WWDC “Explora experiencias de video para visionOS”.

Cuando se inserta un archivo multimedia envolvente en la página, como este video, se renderiza como un video 2D. Para que las personas lo vean envolvente, presenta tu video en pantalla completa y se ajustará al usuario con la proyección correcta. El reproductor de pantalla completa también admite contenido estereoscópico, que se encuentra en formatos de 180 grados y Apple Immersive Video. Tal vez ya experimentaste con multimedia envolvente antes. Ahora es el mejor momento para mostrarla en tu sitio web. Puedes insertar estos tipos de contenido multimedia con el elemento de video existente. No hay ningún elemento o atributo nuevo involucrado. También puedes usar HTTP Live Streaming para ofrecer videos grandes. Para videos de 180, 360 y campo de visión amplio, el archivo debe cumplir con APMP, que contiene metadatos adicionales para describir la proyección del contenido multimedia. Para saber cómo convertir tu contenido multimedia a APMP, consulta la sesión de la WWDC: “Más información sobre Apple Projected Media Profile”. Para más información sobre Apple Immersive Video, consulta “Conoce las tecnologías de Apple Immersive Video”. Este es un ejemplo de APMP de campo de visión amplio. Los metadatos capturan los parámetros de la cámara usados en la grabación. visionOS mostrará el contenido en una forma que posiciona cada pixel en el lugar correcto, asegurando una proyección precisa al reproducirse. Las líneas rectas se verán rectas incluso en los bordes cuando se vean en pantalla completa. Este es el poder de APNP. Los controles para el elemento de video permiten acceder a pantalla completa. También puedes acceder a la pantalla completa con programación con requestfFullScreen de JavaScript. Esta es la misma API que usarías para presentar fotos panorámicas y espaciales desde tu página web. En panorámicas, ahora puedes brindar diferentes fuentes para el mismo elemento de imagen, para mostrar una miniatura antes de la pantalla completa. Al entrar en pantalla completa, se usará la más amplia.

En fotos espaciales, la API requestFullscreen funciona igual. La foto espacial se renderizará como una imagen 2D plana cuando se muestre en línea, y espacialmente cuando se muestre en pantalla completa. Siempre tengo que comunicar a mis visitantes que esta imagen en particular es realmente espacial y que deben tocarla para ver su verdadera belleza. Esto puede ser más fácil en el futuro si se usa el nuevo atributo, controls, que se agregó como una vista previa para desarrolladores desde visionOS 2.4. controls agrega una insignia de foto espacial, que indica que esta imagen es una foto espacial. Junto con el botón Pantalla completa, los visitantes pueden ver fácilmente la versión espacial de la imagen, sin tener que escribir una sola línea de JavaScript. Como todas las funcionalidades de vista previa, tendrás que activar esta función para probarla. Ve a Configuración > Apps > Safari > Avanzado > Cambios de función y activa la API Spatial Image Controls. Mientras estamos aquí, activemos también Website environments, ya que hablaremos de esta a continuación. Website environment es una funcionalidad de vista previa para desarrolladores que permite que los sitios web brinden un entorno virtual para sus visitantes. Así es como funciona. En esta página se especificó un archivo USDZ como entorno y las personas pueden elegir mostrar el entorno a través del menú de la página, sin dejar de ver Safari y el sitio web. Pueden usar la Digital Crown para sumergirse por completo en el entorno sin distracciones. Es una forma genial de ampliar tu sitio web más allá de los límites de la ventana del navegador.

Para brindar un entorno, usa un elemento de enlace que especifique rel=“spatial-backdrop”. Usa el atributo href para señalar el archivo USDZ de tu entorno. Puedes usar el atributo environmentmap para proporcionar un IBL personalizado para tu archivo USDZ. Con un entorno bien diseñado, los visitantes se sentirán teletransportados a otro lugar, como un restaurante, un submarino o un calabozo. Como se trata de una vista previa para desarrolladores, tendrás que activarla en Configuración antes de poder probarla. El marcado puede cambiar a medida que pasa por el proceso de estándares web. Apple lidera activamente el desarrollo de esta funcionalidad y tus comentarios ayudarán a darle forma. Para más información de cómo crear un entorno personalizado, consulta “Create custom environments for immersive apps in visionOS” de la WWDC24. Hablamos de muchas funcionalidades espaciales nuevas. Hablamos sobre el nuevo elemento del modelo HTML, con su soporte para interacciones, iluminación y colocación. Con el elemento de video puedes mostrar una variedad de contenido multimedia envolvente desde tu sitio web. Tienes un adelanto de cómo serán los entornos de sitios web en el futuro.

Para ayudarte a empezar, agregamos ejemplos de uso del elemento del modelo en webkit.org. No hay mejor manera de experimentarlo que verlo a través del Apple Vision Pro. Cuando estés preparado, agrega modelos 3D a tu página web cuando corresponda para ofrecer una experiencia nueva y sorprendente. Si tu sitio web tiene videos, es un buen momento para incluir contenido multimedia envolvente. Nos encantaría que experimentaras agregando entornos personalizados y compartieras tus comentarios. Hay muchas más funcionalidades nuevas para la web, de las que puedes obtener más información en la sesión “Novedades de Safari y WebKit” de este año.

Envía informes de errores y solicitudes de funcionalidades en bugs.webkit.org, el rastreador de problemas de WebKit. Si tienes problemas con la interfaz de Safari o con visionOS u otras plataformas de Apple, regístrate en feedbackassistant.apple.com. Estamos deseando ver todas las cosas increíbles que vas a crear con estas nuevas tecnologías. Gracias, que tengas una gran WWDC.