giok77

giok77

giok77

slot bonus new member

rumah88

AR, VR y modelo 3D en HTML | trucos CSS

Ubicado en algún lugar de Safari Technology Preview 161 notas de la versión es una línea aparentemente inocente para admitir un nuevo elemento y atributo HTML:

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

Cada vez que veo una mención de algún elemento que no reconozco, mi mente se dirige directamente a él. ¡Decir ah! Nuevo para mí, pero probablemente viejo para todos los demásSé que esta es una mala postura porque fácilmente podría ser:

  • Hmm, parece una especie de experimento patentado.
  • Wow, cosas realmente nuevas!

La verdad es que son los tres.

Este es un concepto en evolución.

Además de la primera cosa que suena algo oficial que encontré <model> no estaba en la especificación W3C, pero en Repositorio de WebKit para explicadoresTodo lo que hay en el LÉAME es una nota enorme de 2021 que dice "El <model> el elemento se movió a Immersive Web CG ". Estaba a punto de saltar, pero me llamó la atención HistoryAndEvolution.md archivo que tiene una buena visión general del contexto inicial de la <model> concepto:

Él <model> elemento nació del deseo de dar el siguiente paso y mejorar la experiencia de integración de Safari con iOS Vista rápida de realidad aumentada rasgo.

Tuve que revisar 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 Enlaces de Apple a un buen estudio de caso del Museo Metropolitano de Arte.

Artículo Recomendado:  Consejos de Mondrian Art CSS en CSS de 5 programadores

Como lo entiendo desde este contexto limitado:

  • Suelta un <model> elemento en el documento.
  • Agregue un archivo fuente externo, por ejemplo <model src="https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/assets/example.usdz">.

La propuesta original fue del Immersive Web Committee Group

este 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 explicadorEsta no es la especificación ni nada, sino la propuesta original. Mucho mejor definición de artículo!

HTML permite mostrar muchos tipos de medios a través de elementos como <img>, <picture>o <video>pero no proporciona una forma declarativa de mostrar contenido 3D directamente. Incrustar contenido 3D en una página es relativamente engorroso y depende de scripts de <canvas> Creemos que es hora de poner los modelos 3D en pie de igualdad con otros tipos de medios ya admitidos.

[…]

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 se sirvan como un recurso independiente del servidor.

El ejemplo principal reúne esto. realmente se siente como <video> o <picture> elementos:

<model style="width: 400px; height: 300px">
  <source src="https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/assets/example.usdz" type="model/vnd.usdz+zip">
  <source src="https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/assets/example.glb" type="model/gltf-binary">
</model>

.usdz? .glb? Estos no son el tipo de archivos que suelen cruzar mi escritorio. Supongo que tendré que actualizar esos y otros tipos de archivos que <model> Una vez más, todo esto es solo la sugerencia inicial.

Artículo Recomendado:  Más de Slap Paint en un sitio web | trucos CSS

El borrador de propuesta aún no ha sido silenciado

pero lo hace proporcionar un buen esquema donde podrían ir las cosas:

  • Agregar una plantilla a un documento
  • Habilitar interactividad
  • Soporta múltiples formatos
  • Provisión de contenido de respaldo
  • Haciéndolo accesible

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

Se remonta aún más atrás

La primera mención de modelado 3D que encontré fue Publicación de Keith Clarke de 2018 en el que hizo un prototipo de un elemento de usuario llamado <x-model>Él lo describe como "un marcador de posición que brinda acceso al DOM y CSSOM" donde la carga y el renderizado tienen lugar en el tres.js.

La idea de Keith es seguida por <model-viewer> componente compartido por Joe Medley en 2020 (y así actualizar a él). Incluso hay un página de inicio para él y es divertido llevar a Neil Armstrong al espacio.

¿Tal vez es solo un experimento?

Me refiero a que el borrador de especificación no está desarrollado. Apple parece dispuesto a jugar a la pelota gracias al anuncio de Safari TP 161. Eso tiene mucho sentido, considerando qué tan optimista es Apple sobre AR en general. (vasos de manzana¿cualquiera?)

Google parece tener un pie en la puerta, aunque del lado de los componentes web. Es fácil ver cómo podría haber un conflicto de intereses entre lo que Apple y Google quieren de AR en la web.

Artículo Recomendado:  Gracias (Edición 2022) | trucos CSS

Estas son solo mis notas de tratar de hacer trampa en todo. Debe haber muchos más matices en esto que lo poco que sé al respecto hasta ahora. Estoy seguro de que alguien más inteligente podría atar una cinta más bonita <model> en los comentarios 😉

Y hablando de Safari Technology Preview, 162 recién lanzado el otro día y permite el anidamiento de CSS y la sintaxis de color relativo de CSS.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir