AR, VR y un modelo para 3D en HTML

Escondido en algún lugar del Safari Technology Preview 161 notas de la versión es una línea aparentemente inocua sobre la compatibilidad con un nuevo elemento y atributo HTML:

Se agregó soporte para <model src> y honor <source type> atributos ([email protected])

Cada vez que veo la mención de algún elemento que no reconozco, mi mente va directamente a ¡Eh! Nuevo para mí, pero probablemente noticias viejas para todos los demás.. Es una mala postura, lo sé, como podría ser fácilmente:

• Hmm, parece un experimento patentado.
• Wow, una cosa realmente nueva!

La verdad es que es algo así como los tres.

Es un concepto en evolución.

Como en, la primera cosa que suena algo oficial que encontré en <model> no estaba en la especificación W3C pero en Repositorio de WebKit para explicadores. Todo lo que hay en el LÉAME es una nota gigante de 2021 que dice "El <model> El elemento se ha trasladado a Immersive Web CG”. Estaba a punto de saltar, pero mi ojo captó el HistoryAndEvolution.md archivo que tiene un buen resumen del contexto inicial en el <model> concepto:

La <model> elementos nació del deseo de dar el siguiente paso y mejorar la experiencia de la integración de Safari con iOS AR Vista rápida .

Tuve que mirar la página de inicio de Apple para AR Quick Look. ¿Conoce la nueva característica que tienen algunas tiendas donde puede transponer una representación 3D de un producto en su propia casa usando la cámara de su teléfono? Ese es el tipo de cosas de las que estamos hablando, y Apple vincula un buen caso de estudio del Museo Metropolitano de Arte.

Como lo entiendo desde este contexto limitado:

• Soltar un <model> elemento en el documento.
• Agregue un archivo fuente externo, por ejemplo <model src="assets/example.usdz">.

La propuesta original es del Immersive Web Committee Group

ese es el equipo buscando hacer que la Realidad Virtual (VR) y la Realidad Aumentada (AR) sean parte de la web. Apple vinculó su repositorio, así que di el salto y fui directo al explicador. Esta no es la especificación ni nada, sino la propuesta original. ¡Una definición mucho mejor del elemento!

HTML permite la visualización de muchos tipos de medios a través de elementos como <img>, <picture>o <video>, pero no proporciona una forma declarativa de mostrar directamente contenido 3D. Incrustar contenido 3D dentro de una página es comparativamente engorroso y depende de la creación de secuencias de comandos <canvas> elemento. Creemos que es hora de poner los modelos 3D en pie de igualdad con otros tipos de medios que ya son compatibles.

[...]

El HTML <model> El elemento tiene como objetivo permitir que un sitio web incruste modelos 3D interactivos tan convenientemente como cualquier otro medio visual. Se espera que los modelos se creen mediante herramientas de creación 3D o se generen dinámicamente, pero el servidor los sirve como un recurso independiente.

El ejemplo básico reúne esto. Realmente se siente como el <video> or <picture> elementos:

<model style="width: 400px; height: 300px"> <source src="assets/example.usdz" type="model/vnd.usdz+zip"> <source src="assets/example.glb" type="model/gltf-binary">
</model>

.usdz? .glb? No es el tipo de archivos que normalmente cruzan mi escritorio. Supongo que tendré que repasar esos y otros tipos de archivos que <model> podría apoyar. Una vez más, todo esto es simplemente la propuesta original.

El borrador de la propuesta aún no se ha eliminado.

Pero lo hace proporcionar un buen esquema de adónde podrían ir las cosas:

• Agregar un modelo a un documento
• Habilitación de la interactividad
• Admite múltiples formatos
• Proporcionar contenido alternativo
• Haciéndolo accesible

Hay mucho que averiguar. La mayor parte de lo que hay son problemas documentados que deben abordarse. Sin embargo, arroja más luz sobre <model> como atributos propuestos que lo hacen sentir uniforme más, como <video> como autoplay, controls, loop, muted, poster, etc.

Se remonta aún más atrás

La primera mención de modelado 3D que encontré fue Publicación de Keith Clark de 2018 en el que crea un prototipo de un elemento personalizado llamado <x-model>. Lo describe como "un marcador de posición que brinda acceso al DOM y CSSOM" donde la carga y el renderizado se realizan en tres.js.

La idea de Keith es seguida por la <model-viewer> componente que Joe Medley compartió en 2020 (y una posterior actualización lo). Incluso hay un página de inicio para ello y es divertido arrastrar a Neil Armstrong por el espacio.

¿Es posible que solo sea un experimento?

Quiero decir, el borrador de especificación no se ha desarrollado. Apple parece dispuesto a jugar a la pelota gracias al anuncio de Safari TP 161. Eso tiene mucho sentido dado qué tan optimista es Apple en AR como un todo. (Vasos de manzana, ¿alguien?)

Google parece tener su pie en la puerta, aunque en el lado de los Componentes Web. Es fácil ver cómo puede haber un conflicto de intereses entre lo que Apple y Google quieren de AR en la web.

Estas son solo mis notas de tratar de asimilar todo. Tiene que haber muchos más matices que lo poco que sé al respecto hasta ahora. Estoy seguro de que alguien más inteligente puede atar un lazo más ordenado <model> en los comentarios 😉

Y mientras hablamos de Safari Technology Preview, 162 recién lanzado el otro día y permite Anidamiento de CSS y del Sintaxis de color relativo CSS.

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
• Fuente: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/