Guía sobre la fotogrametría y sus aplicaciones. Si quieres tener más información sobre la fotogrametría, el equipo de la revista The Times ha publicado una guía donde cubre prácticamente todo lo que necesitas saber. Han creado una guía en profundidad sobre el tema. Y publicado varios artículos donde se explican a fondo todos los aspectos y matices de la fotogrametría.
Para quien no lo sepa, la fotogrametría es la ciencia y la tecnología de obtener información fiable sobre objetos físicos y del entorno a través del proceso de registro, medición e interpretación de imágenes fotográficas y patrones de imágenes electromagnéticas y otros fenómenos. Los periodistas del equipo del Times utilizan esta técnica para recrear los lugares sobre los que escriben.
Subiendo escenas 3D a la web
Hay varios métodos diferentes subir un modelo 3D a un sitio web. Elegir el mejor para tu proyecto depende de algunas cosas, incluida la cantidad de interacciones, control y personalización de las escenas necesarias, así como el tamaño del modelo 3D.
A continuación, compartiremos cuatro demostraciones que muestran los métodos que hemos encontrado más útiles para publicar fotogrametría en la web. Ten en cuenta que las demostraciones aumentarán en complejidad a lo largo de esta guía. Y la primera ofrecerá el enfoque más simple de usar el Visor de modelos de Google para cargar una escena 3D como un elemento HTML.
La próxima demostración utiliza Sketchfab, lo que hace que sea bastante fácil cargar y publicar modelos 3D con un poco de personalización. La tercera demostración que cubrimos con más detalle que las otras porque es más compleja. Y porque forma la base de la cuarta demostración utiliza Three.js, una librería JavaScript para trabajar en 3D. Junto con uno de nuestros esquemas de control de código abierto. La demostración final utiliza nuestra biblioteca de carga de mosaicos 3D de código abierto para cargar el modelo en una escena de Three.js.
Lo que cubre esta guía sobre la fotogrametría y sus aplicaciones
Cuatro opciones sobre cómo publicar modelos 3D dentro de artículos periodísticos basados en la web, incluida una demostración para cada opción.
Lo que necesitarás:
- Familiaridad con HTML y CSS.
- Conocimientos de JavaScript para demostraciones 2, 3 y 4.
- Para las demostraciones 3 y 4, necesitas saber como trabaja Three.js, será útil.
- Estar familiarizado con la línea de comandos será útil, pero no es indispensable
- Un editor de código.
- Alojamiento web.
Hay que tener en cuenta el tamaño de tu modelo 3D
El tamaño del modelo se refiere al recuento de triángulos, el número de texturas y la resolución de texturas. En nuestras pruebas, hemos descubierto que los iPhone funcionan mejor con texturas 2K, los teléfonos Android pueden admitir texturas hasta 4K y los navegadores de escritorio pueden admitir texturas de hasta 8K.
Para una sola malla, no aconsejamos usar más de seis texturas, y recomendamos usar un recuento de triángulos entre 1 y 2 millones. En modelos más grandes y detallados, esta es una limitación importante, ya que un tamaño de modelo de seis texturas 2K, por ejemplo, no renderizaría el entorno con suficiente claridad para leer texto dentro de la escena.
Puedes superar esta limitación convirtiendo el modelo 3DTiles a un formato desarrollado por Cesium que divide el modelo en trozos más pequeños de diferentes resoluciones. Cuando se cargan en el navegador, los fragmentos de mayor resolución solo se muestran cuando se encuentran dentro de una cierta distancia de visualización de la cámara. Lo que reduce la cantidad de geometría y textura cargada en un momento dado.
Demostración de fotogrametría con el visor 3D de Google
Nuestra primera demostración simplemente utiliza el Visor de modelos de Google para mostrar el modelo 3D. Es una biblioteca de uso gratuito que te permite cargar un modelo 3D similar a cómo cargaría una imagen en HTML. Garantiza que el modelo esté siempre bien enmarcado en diferentes tamaños de la pantalla y permite la personalización a través de código.
Para usar Model Viewer, el modelo primero debe convertirse a un formato glTF/GLB, lo que se puede hacer con una variedad de herramientas como el editor Three.js, Blender o Autodesk Maya utilizando un complemento, o herramientas de línea de comandos como FBX2glTF de Facebook. Model Viewer también te permite ver el modelo en el espacio físico a través de un modo de realidad aumentada. Para obtener más información sobre cómo usamos Model Viewer, explora nuestro código aquí ó consulta la documentación de Google.
Demostración de fotogrametría con Sketchfab
Sketchfab es una plataforma web que facilita la carga y publicación de modelos 3D. El plan gratuito permite cargas de hasta 100 MB, y una cuenta profesional te permitirá trabajar con modelos de hasta 200 MB. Sketchfab optimizará el modelo si es necesario, también lo convertirá a otros formatos que puedes descargar. Sketchfab ofrece un visor e inspector de modelos que te ofrece la posibilidad de hacer anotaciones, iluminación y otras personalizaciones.
Con Sketchfab, la forma más fácil de incluir tu modelo en un sitio web es a través del código de inserción que se proporciona después de la carga. Con la API Viewer de Sketchfab, puedes cargar mediante programación un modelo en una página web. Lo que permite interacciones personalizadas y control de la cámara.
En nuestra segunda demostración, utilizamos la interfaz web de Sketchfab para crear una ruta de cámara identificando fotogramas clave y creando anotaciones en esos puntos. El encuadre de la cámara para cada anotación también se puede personalizar a través de la interfaz. Luego usamos GSAP, una biblioteca de animación para la web, para crear una ruta de cámara suave entre nuestros puntos seleccionados en función de la posición de desplazamiento de la página web.
Nota aclaratoria sobre la herramienta Three.js
Las siguientes dos demostraciones usan Three.js, una biblioteca JavaScript rica en funciones para contenido 3D en la web. Si bien permite una gran cantidad de personalizaciones y control sobre cómo se cargará el modelo 3D. El uso de Three.js es más complejo que los dos enfoques anteriores. Three.js viene con cargadores para varios formatos de modelos como glTF, OBJ y FBX. Así como una variedad de mecanismos de control, como controles de órbita y controles en primera persona.
Recientemente se han añadido dos bibliotecas de código abierto para aumentar lo que ya proporciona Three.js. Incluido un cargador de Tiles 3D para cargar modelos grandes que están en formato 3D tiles y un kit de herramientas de cámara que puedes usar para crear tus propios esquemas de controles.
En las demostraciones 3 y 4 que veremos a continuación, puedes explorar dos ejemplos que hemos creado para mostrar algunas de las características disponibles en Three.js.
Demostración de fotogrametría con modelo glTF y controles de desplazamiento
Esta demostración carga un modelo glTF bastante comprimido. Exactamente con un millón de triángulos, seis texturas 2K, usando compresión Draco, y una ruta de cámara diseñada en Autodesk Maya. A medida que el espectador se desplaza por la página web, puede arrastrar la animación de la cámara para moverse a través del modelo. Hemos encontrado que este enfoque es una técnica de narración versátil e inmersiva.
Configuración html/css
En esta guía sobre la fotogrametría y sus aplicaciones, configuramos un contenedor para el elemento Canvas, seguido de un DIV largo para crear el área desplazable que impulsará la animación de la cámara. Ambos elementos están envueltos en otro DIV, y el envoltorio de lienzo está marcado como «sticky» para que permanezca en su lugar mientras nos desplazamos.
Configuración de la herramienta Three.js para fotogrametría
En nuestro archivo JavaScript, los componentes se cargan desde Three.js, junto con glTFLoader y DRACOLoader. Los componentes también se cargan desde la biblioteca de controles de código abierto de I+D con controles de tres niveles. Esto incluye el código repetitivo necesario para empezar.
Cargando el modelo para la fotogrametría
El cargador gLTF de Three.js se inicializa con una referencia a una instancia de cargador DRACO y se utiliza para cargar el modelo. Three.js a menudo interpreta las texturas que vienen con el modelo como materiales iluminados (materiales que responden a la luz). Sin embargo, para los modelos de fotogrametría, rara vez queremos usar materiales iluminados. Ya que las normales de la superficie a menudo no se resuelven correctamente. Este código atraviesa el modelo y reemplaza todos los materiales con materiales sin iluminación, manteniendo el mapa o textura del material.
Configurar los controles
Para configurar los controles, la cámara se envuelve primero en un objeto CameraRig. La animación se carga con el cargador gLTF. Posteriormente se extrae y envía a la plataforma con los nombres de los objetos de traslación y rotación tal como se establecieron en Autodesk Maya.
ScrollControls y ThreeDOF Controls están configurados, lo que permitirá que la cámara diverja ligeramente de su posición en la ruta para que los espectadores puedan mirar a su alrededor. Ambos controles se actualizan en el bucle de renderizado.
Demostración de fotogrametría con transmisión de mosaicos 3D y controles de Story Point
Utiliza nuestra biblioteca de streaming de mosaicos 3D de código abierto para cargar el modelo de fotogrametría.
Cargador de mosaicos o tiles de código abierto
Three.js no admite la carga de mosaicos o tiles 3D de forma nativa, pero sí con el cargador de mosaicos de código abierto de I+D. Un modelo en mosaico se puede cargar en una escena como cualquier otro tipo de activo. El cargador ofrece una serie de opciones que se pueden optimizar para mejorar el rendimiento. Así como establecer materiales y sombreados personalizados, establecer la transformación inicial para el modelo y modificar otras características.
Recomendamos usar la compresión Draco en el mosaico y convertir las texturas al formato Basis para un rendimiento óptimo. Lo que se puede hacer con esta herramienta. Cubrimos esto con más detalle en la parte de esta guía dedicada al procesamiento y alineación de escenas 3D.
Para esta demostración, identificamos puntos de interés con la biblioteca de controles de tres niveles, utilizando la herramienta auxiliar de cámara. Y exportamos los datos para usarlos con el esquema de control StoryPoints.
Una nota sobre la optimización de mosaicos o tiles 3d
Al simplificar los modelos para la transmisión de mosaicos 3D en RealityCapture, recomendamos crear una malla triangular de 10 millones con un estilo de tamaño de texel fijo y un tamaño de texel establecido en la resolución óptima de 8192 X 8192. Lo que producirá un gran recuento de texturas basado en el tamaño del modelo.
Hasta aquí esta guía sobre la fotogrametría y sus aplicaciones. El concepto de fotogrametría e introducción de las distintas formas más usuales que tienen estos periodistas para trabajar con la fotogrametría en la web. Pero la información es más amplia todavía, si estás interesado en el tema, te recomendamos que leas los siguientes artículos. Están directamente ligados con este que acabas de leer. También escrito por los mismos responsables.
Este artículo sobre la fotogrametría ha sido publicado originalmente en inglés por un equipo de periodistas gráficos del The Times. Dejo a continuación todos los enlaces conocidos sobre el tema.
En estas páginas, podrás encontrar tanto ejemplos como el código necesario para representarlos.
Subir escenas 3D a la web.
Procesar y alinear escenas 3D.
Captura de imágenes para fotogrametría.
Monta un equipo de cámara para capturar espacios complejos en 3D.
Reconstruir escenas periodísticas en 3D.
Y si ninguna de estas formas de hacer fotogrametría te convencen, aquí mismo y en el foro tienes también más información, sigue leyendo…