Presentamos la versión 1.1

Modelos 3D para tu página web es tan fácil como escribir HTML.

José Medley

Rob Kochman

Los modelos 3D son más relevantes que nunca. Los minoristas llevan experiencias de compra en las tiendas a los hogares de los clientes. Los museos ponen modelos en 3D de sus artefactos a disposición de todos en la Web. Lamentablemente, puede ser difícil agregar un modelo 3D a un sitio web de una manera que brinde una excelente experiencia del usuario sin un conocimiento profundo de las tecnologías 3D o sin recurrir al hosting de contenido 3D en un sitio de terceros. El componente web <model-viewer>, que se introdujo a principios de 2019, busca que poner modelos 3D en la Web sea tan fácil como escribir unas pocas líneas de HTML. Desde entonces, el equipo trabaja para abordar los comentarios y las solicitudes de la comunidad. La culminación de ese trabajo fue la versión 1.0 de <model-viewer>, que se lanzó a principios de este año. Ahora anunciamos el lanzamiento de <model-viewer> 1.1. Puedes leer las notas de la versión en GitHub.

¿Cuáles son las novedades desde el año pasado?

La versión 1.1 incluye compatibilidad integrada con realidad aumentada (RA) en la Web, mejoras en la velocidad y la fidelidad, y otras funciones solicitadas con frecuencia.

Realidad aumentada

Ver un modelo 3D en un lienzo en blanco es genial, pero poder verlo en tu espacio es aún mejor. Para lograr una 3D y RA completamente en el navegador, Chrome, Android admite la realidad aumentada mediante WebXR .

Una demostración de la función de RA de <model-viewer>.

Cuando esté lista, podrás usarlo agregando un atributo ar a la etiqueta <model-viewer>. Otros atributos te permiten personalizar la experiencia de RA de WebXR, como puedes ver en la muestra de WebXR en modelviewer.dev. En la siguiente muestra de código, se puede ver cómo sería.

<model-viewer src="Chair.glb"
  ar ar-scale="auto"
  camera-controls
  alt="A 3D model of an office chair.">
</model-viewer>

Se parece al video incorporado que aparece debajo de este encabezado.

Controles de cámara

<model-viewer> ahora brinda el control total de la cámara virtual de la vista (la perspectiva del visor). Esto incluye el objetivo de la cámara, la órbita (posición relativa al modelo) y el campo visual. También puedes habilitar la rotación automática y establecer límites en la interacción del usuario (p.ej., campos visuales máximos y mínimos).

Anotaciones

También puedes anotar tus modelos con HTML y CSS. A menudo, esta capacidad se usa para “adjuntar” etiquetas a partes del modelo de una manera que se mueva con el modelo mientras se lo manipula. Las anotaciones son personalizables, lo que incluye su apariencia y el grado en que el modelo las oculta. Las anotaciones también funcionan en RA.

<style>
  button{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 3px solid blue;
    background-color: blue;
    box-sizing: border-box;
  }

  #annotation{
    background-color: #dddddd;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
  }
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
  <button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
    <div id="annotation">Whistle</div>
  </button>
</model-viewer>

Un traje espacial con una anotación.

Consulta la página de documentación de las anotaciones para obtener más información.

Editor

La versión 1.1 presenta y aloja una herramienta de"edición" <model-viewer>, que te permite obtener una vista previa rápida de tu modelo, probar diferentes configuraciones de <model-viewer> (p.ej., exposición y suavidad de las sombras), generar una imagen de póster y obtener de forma interactiva las coordenadas de las anotaciones.

Mejoras en la renderización y el rendimiento

Se mejoró considerablemente la fidelidad de renderización, en especial para entornos de alto rango dinámico (HDR). <model-viewer> ahora también usa una ruta de renderización directa cuando solo hay un elemento <model-viewer> en el viewport, lo que aumenta el rendimiento (especialmente en Firefox). Por último, con el ajuste dinámico de la resolución de renderización, la velocidad de fotogramas mejoró drásticamente. En el siguiente ejemplo, se muestran algunas de estas mejoras recientes.

<model-viewer camera-controls
              skybox-image="spruit_sunrise_1k_HDR.hdr"
              alt="A 3D model of a well-worn  helmet"
              src="DamagedHelmet.glb"></model-viewer>

Modelo 3D de un casco que se usa bien.

Estabilidad

Ahora que <model-viewer> alcanza su primera versión principal, la estabilidad de la API es una prioridad, por lo que se evitarán los cambios rotundos hasta el lanzamiento de la versión 2.0.

¿Qué sigue?

La versión 1.0 de <model-viewer> incluye las capacidades más solicitadas, pero el equipo aún no ha terminado. Se agregarán más funciones, al igual que mejoras en el rendimiento, la estabilidad, la documentación y las herramientas. Si tienes sugerencias, informa un problema en GitHub. Además, las PR son siempre bienvenidas. Para mantenerte en contacto, sigue a <model-viewer> en Twitter y revisa el chat de la comunidad en Spectrum.