Diseño de una interfaz de usuario adaptativa basada en web para visualizar una réplica digital de Ciudad Antigua
Enrique José Araujo Tabares Estudio de Maestría: Proyecto de grado
Departamento de Diseño, Facultad de Arquitectura y Diseño, Universidad de los Andes
Tabla de contenido
1. Introducción ... 4
2. Tecnologías ... 5
2.1. Transmisión y presentación de modelos 3D con WebGL ... 5
2.2. Uso de diferentes medios de entrada ... 8
3. Referentes de uso de contenido 3D ... 10
3.1. Tráiler interactivo con sonido biaural ... 11
3.2. Galería de arte ... 13
3.3. Presentación de proyectos ... 14
3.4. Visualizaciones para National Geographic ... 16
3.4.1. Cassini's Grand Tour ... 16
3.4.2. The Atlas of Moons ... 17
3.5. NASA's Eyes ... 18
3.5.1. Mars 2020 Entry Descent Landing ... 18
3.5.2. Eyes on the Earth ... 19
4. Diseño de la interfaz adaptativa para navegación en 3D ... 20
4.1. Conceptos básicos de las interfaces ... 20
4.2. Definición de la interacción para navegar los modelos ... 22
4.2.1. Computadores de escritorio ... 23
4.2.2. Dispositivos móviles ... 24
4.3. Prototipo de la aplicación web ... 25
5. Discusión ... 26
5.1. Limitaciones técnicas ... 26
5.2. La relación de los modelos 3D con el patrimonio cultural ... 27
5.3. Conclusiones ... 28 Referencias ... 29
Diseño de una interfaz de usuario adaptativa basada en web para visualizar una réplica digital de Ciudad Antigua
1. Introducción
En el 2020 el proyecto Archaeological Remote Sensing realizó la primera reconstrucción mediante fotogrametría de la Ciudad Antigua de la Sierra Nevada de Santa Marta. Mediante trabajo de campo con teodolito, drones y tecnologías LiDAR, capturaron datos que fueron procesados para crear una réplica digital del sitio arqueológico. Uno de los objetivos del proyecto es generar interés en la historia y arquitectura de Ciudad Antigua. Para ello, gracias a una colaboración con la Universidad de Purdue, se produjeron 4 modelos 3D a partir de fotogrametría: capturando un número masivo de imágenes del sitio con drones y luego procesándolas con el software especializado Pix4DMapper. Al contar con varias imágenes desde diferentes perspectivas y datos GPS, el software identificó puntos en el espacio y los reunió en modelos de superficies y terrenos. El resultado son modelos 3D de diferentes zonas de interés del sitio arqueológico; una réplica digital de Ciudad Antigua.
Sin embargo, el acto de distribuir y mostrar estos modelos 3D de digitalizaciones arqueológicas presenta sus propios desafíos. Debido a la cantidad de información que contienen, se trata de archivos de gran tamaño que no son sencillos de compartir rápidamente a través de internet, y mucho menos en tiempo real. En el caso específico de Archaeological Remote Sensing, se produjeron modelos 3D
accesibles mediante Unreal Engine 4. El producto final es un programa de Windows que pesa más de 3GB. Para encontrar soluciones, trabajos recientes han estudiado el uso de tecnologías web como un medio viable para facilitar el acceso a la información (Scopigno et al., 2017) (Cots et al., 2018). Dichos estudios encuentran que hoy es técnicamente posible transmitir los datos de modelos de alta
resolución, así como visualizarlos directamente en el navegador web instalado en cualquier tipo de computador, laptop, tableta e incluso en algunos smartphones.
Aunque las tecnologías web representan una excelente oportunidad para divulgar el patrimonio cultural, todavía falta resolver cuál es la mejor forma de presentar el contenido específico al público en general. Hoy existe una amplia gama de dispositivos capaces de acceder a internet, y garantizar el acceso significa que el contenido que queremos transmitir pueda ser visto por todos por igual. En este contexto, el presente documento describe el diseño e implementación de una aplicación web que presenta los modelos 3D producidos por el proyecto Archaeological Remote Sensing a través de una interfaz adaptativa, es decir, capaz de ajustar su forma de uso automáticamente de acuerdo al
dispositivo del usuario (What Are Adaptive User Interfaces?, 2017). Esta aplicación emplea estándares abiertos para transmitir y visualizar los modelos, así como para navegarlos con diferentes medios de entrada, con el objetivo de que sea accesible para más personas.
2. Tecnologías
2.1. Transmisión y presentación de modelos 3D con WebGL
El proyecto Archaeological Remote Sensing produjo 4 modelos 3D utilizando Agisoft Metashape. Uno de ellos es una vista general de Ciudad Antigua, mientras que los 3 restantes son modelos individuales de mayor resolución de áreas de interés. Los archivos finales están en formato OBJ, con las texturas en un archivo complementario en formato de imagen JPEG. El formato OBJ
representa únicamente la geometría 3D de un objeto: las coordenadas de los vértices y la posición de las texturas, y no guarda unidades de escala. Como es un formato abierto, puede ser leído por varios programas de edición 3D.
Figura 1
Vista del modelo 3D del muro occidental en formato OBJ luego de ser importado a Blender
Ahora, para visualizar contenido 3D en los navegadores web, se aprovecha el elemento canvas que fue introducido con el estándar HTML5, el cual permite dibujar gráficos mediante el lenguaje JavaScript. En su forma más básica, este elemento permite dibujar figuras geométricas primitivas a través de código, pero su propiedad más importante es su capacidad de ser actualizado constantemente (Keith & Andrew, 2016). Aprovechando esto, un canvas puede ser usado para la renderización de gráficos 3D por medio del estándar WebGL (WebGL 2.0 Specification, s. f.). Desarrollado por el grupo Khronos, este estándar presenta una API (interfaz de programación de aplicaciones) implementada en JavaScript para despliegue y procesamiento de información en tres dimensiones. Una API define protocolos para permitir la integración de diferentes softwares y, en este sentido, WebGL permite
aprovechar el estándar abierto OpenGL, capaz de ser ejecutado por cualquier unidad de procesamiento gráfico, para mostrar contenido 3D dentro del canvas. Hoy, WebGL es soportado por todos los
navegadores principales en diferentes plataformas (WebGL - 3D Canvas graphics | Can I use... Support tables for HTML5, CSS3, etc, s. f.).
No obstante, WebGL es un lenguaje de bajo nivel considerablemente complejo y, por lo tanto, existen diferentes herramientas para facilitar programar con él. Primero, están los framework como Babylon o Three.js, los cuales presentan una colección de funciones para cargar, renderizar e interactuar con contenido 3D. El desempeño de ambos es similar, así como la experiencia de desarrollo (Johansson, 2021), y su principal diferencia es el uso de TypeScript versus JavaScript como lenguaje de
programación. Por otro lado, herramientas de software como el motor de juegos Unity3D son capaces de exportar contenido 3D para ser leído por el navegador. No obstante, su uso requiere familiaridad con los flujos de trabajo específicos de dichas herramientas. Three.js fue seleccionado para el desarrollo de este proyecto pues, debido a que está implementado en JavaScript, es más sencillo de integrar con una página web.
Finalmente, para poder visualizar los modelos de Ciudad Antigua en el navegador, es necesario prepararlos para su transmisión. Los archivos OBJ originales son muy pesados para ser transmitidos en tiempo real y no son soportados directamente por Three.js. Para prepararlos, utilizo Blender: primero, para disminuir el número total de vértices mediante el modificador "decimate", y segundo, para comprimir y exportar el modelo resultante a formato GLTF (Graphics Language Transfer Format). Este formato es un estándar también desarrollado por el grupo Khronos específicamente para ser utilizado en conjunto con WebGL (Khronos Releases GlTF 2.0 Specification, 2017). Three.js cuenta con funciones para leer modelos de este formato.
Tabla 1
Pesos de los modelos 3D originales más sus texturas en comparación con los comprimidos
Nombre del modelo Geometría OBJ (MB) Textura JPG (MB) Archivo final GLB (MB)
General View 902 24.3 47.5
Horizontal Terrace 531 7.3 19.8
Opposite Side Wall 375 7.3 16.4
Side Wall 302 6.9 14.5
El producto final del proceso de preparación son archivos con extensión .GLB, la versión binaria comprimida del formato GLTF. El proceso de exportación reúne la descripción geométrica, la texturas y las animaciones en un mismo archivo, el cual es comprimido utilizando un algoritmo llamado DRACO.
Nuevamente, el estándar define el medio para descomprimir estos archivos: es necesario transmitir un archivo ejecutable adicional, el cual es usado por Three.js (o el framework equivalente) al momento de cargar los modelos. Este archivo ejecutable está implementado en WebAssembly, el cual es un estándar de los navegadores web para la ejecución de código binario (Introduction — WebAssembly 1.1 (Draft 2021-06-01), s. f.). Este estándar permite a los desarrolladores aprovechar las capacidades de hardware en común de los dispositivos para garantizar el máximo desempeño. En resumen, el estándar GLTF minimiza la cantidad de datos que se deben transmitir al dispositivo del usuario aprovechando la compresión.
2.2. Uso de diferentes medios de entrada
También dentro de la especificación de HTML5 se han desarrollado varias API, operadas a través de JavaScript, que permiten capturar distintos dispositivos de entrada, como mouse, pantallas táctiles y giroscopios. Varios de ellos resultan útiles para construir interfaces para contenido 3D, especialmente para videojuegos. Al estar implementada en JavaScript, la librería Three.js es capaz de utilizar estas especificaciones directamente para interactuar con los contenidos de una escena.
Para dispositivos tradicionales como el mouse y otros punteros, Pointer lock captura el puntero en un elemento y permite captar movimientos continuos que normalmente saldrían de la ventana (Pointer Lock 2.0 – W3C Working Draft, 2019). Para las pantallas táctiles, existe la especificación de Touch event, que permite al navegador captar toques en una superficie táctil y distinguir entre el uso de uno o varios dedos (Touch Events – W3C Recommendation, 2013).
Más recientemente, se han creado especificaciones para acceder a sensores de movimiento y otros tipos de hardware externo. DeviceOrientationdefine el acceso a la información de la orientación física y movimiento de un dispositivo, lo cual es especialmente útil para teléfonos inteligentes que cuentan con giroscopio (DeviceOrientation Event Specification – W3C Working Draft, 2019). Por su parte, la especificación Gamepad provee acceso a controles de videojuego (Gamepad – W3C Working Draft, 2021). Ambas se encuentran en estado de madurez "Working Draft", lo que significa que ha sido publicado para aprobación de la comunidad y revisión de satisfacción de requisitos técnicos (7 W3C Recommendation Track Process, s. f.). Sin embargo, esto no significa que no puedan ser utilizadas hoy, pues ambas ya han sido adoptadas por los principales navegadores web (DeviceOrientation &
DeviceMotion events | Can I use... Support tables for HTML5, CSS3, etc, s. f.; Gamepad API | Can I use...
Support tables for HTML5, CSS3, etc, s. f.).
En un futuro, las capacidades de los navegadores pueden ser aún más flexibles. Existen
propuestas de interfaces que extenderían las posibilidades de interacción con hardware externo, como Web Serial (Web Serial API – Living Document, 2021). Este API permitiría a los sitios web comunicarse con dispositivos a través de puertos USB, dando acceso a microcontroladores de tarjetas de desarrollo como Arduino.
3. Referentes de uso de contenido 3D
De acuerdo con Scopigno, la forma de presentación del patrimonio digital es a través de plataformas comerciales como Sketchfab o el proyecto X3D (desarrollado por AutoDesk para el museo Smithsonian), o con la plataforma abierta 3DHOP (Scopigno et al., 2017). Las primeras son fáciles de usar, pero inflexibles, ya que lo que se hace es cargar modelos a la galería de un comerciante. Por otro lado, emplear la plataforma 3DHOP es más complejo ya que requiere cierta programación, pero permite integrar visores de modelos con el resto de la página web.
Figura 2
Ejemplo de 3DHOP que muestra la función de zonas clicqueables
La galería de proyectos creados con 3DHOP muestra cómo es la interacción que promueve la plataforma (3DHOP - Gallery, s. f.). Los modelos 3D cargan en un marco que permite rotarlos,
trasladarlos y hacer zoom mediante el mouse. La integración con el resto de la página se evidencia en los controles externos que permiten cambiar los modelos que se visualizan, o bien, revelar nuevo contenido al hacer clic en zonas específicas del modelo. En este sentido, 3DHOP es una implementación de un museo virtual, en donde los modelos 3D de los artefactos son exhibidos junto a material
descriptivo.
No obstante, la web es un medio mucho más flexible y permite combinar distintos tipos de medios junto al 3D de formas creativas. En este sentido, un modelo 3D puede tener usos más allá de ser exhibido. Por ejemplo, un modelo puede ser animado para explicar procesos complejos, o también puede ser usado como parte de una visualización de datos. Hoy existen diversos proyectos que exhiben distintos tipos de interacción. Estos proyectos son en campos diferentes a la arqueología, pero muestran el potencial de la web como medio.
3.1. Tráiler interactivo con sonido biaural
En octubre de 2019, la compañía de ópera inglesa Opera North comisionó al artista James Bulley para promocionar su interpretación de la obra Turn of the Screw de Benjamin Britten (Mudd, 2020; Turn of the Screw, s. f.). Bulley, un artista de sonido, colaboró con Lusion Studiospara crear un tráiler
interactivo que combina gráficos 3D en tiempo real con un arreglo espacial de audio (The Turn of the Screw Immersive Trailer, s. f.). El tráiler representa los 5 capítulos de las obras presentando una escena para cada uno de ellos con iluminación correspondiente al momento del día.
El producto final es una escena 3D donde la cámara viaja automáticamente. Utilizando el ratón, se puede rotar ligeramente la vista mientras se mueve un cursor 3D que ilumina la escena. Mientras ocurre esto, la página reproduce sonido biaural. En la escena, se colocan distintas fuentes de audio y el volumen de cada una depende de la distancia al usuario. Así, el sonido cambia conforme la cámara se desplaza dentro de la escena. Adicionalmente, ubican modelos que representan cantantes de ópera, los
cuales pueden ser señalados con el cursor. Al hacer esto, aumenta el volumen de la voz y se puede escuchar claramente.
Figura 3
Segundo capítulo del trailer interactivo con el cursor señalando a un cantante
El uso de la escena 3D en conjunto con el sonido es lo que hace único a este trailer. No obstante, esto último refleja el contexto desde el que se espera que los usuarios visiten la página: sentados frente al computador y con audífonos. Esta página web no admite dispositivos móviles.
Adicionalmente, vale la pena resaltar el trabajo necesario para ejecutar este proyecto. En su página, Lusion describe el proceso para crear los modelos empezando con la digitalización del terreno.
Luego, para optimizar el tamaño, desarrollaron un algoritmo para eliminar de la escena los polígonos que no son visualizados desde la cámara (Lusion – The Turn Of The Screw Trailer, s. f.). Este paso es
importante debido a que todos estos modelos deben ser transmitidos eficientemente para ser renderizados por computadores de los cuales no se conoce el desempeño.
3.2. Galería de arte Figura 4
Vista inicial de la galería
SHUTDOWN Gallery es un proyecto por Patrik Hübner desarrollado en el 2020 (Hübner, s. f.). El objetivo es ofrecer un espacio de exhibición para arte que cambia semanalmente. Esta página web presenta una galería 3D donde se colocan imágenes y modelos de acuerdo con el artista invitado. La galería exhibe las obras y el usuario puede acercarse, mas no interactuar con ellas. El modelo del espacio es constante, mientras que las obras son actualizadas mensualmente.
Figura 5
Controles en pantalla dentro de la galería cuando se accede desde un iPad
El sitio ofrece una experiencia "AR/VR 3D" con controles adaptativos para navegar el espacio 3D de la galería. Al ingresar desde un computador, se puede navegar con el mouse y teclado, mientras que desde los dispositivos móviles se maneja mediante giroscopio y controles táctiles sobre la pantalla. El movimiento es simple, con el teclado o los botones en pantalla se traslada la cámara, y con el mouse o la orientación del dispositivo, se rota. Esta accesibilidad es el aspecto más destacado del sitio, porque permite compartirlo con la confianza de que los nuevos visitantes pueden experimentarlo.
3.3. Presentación de proyectos
Los modelos 3D pueden ser usados para explicar diseños o procesos complejos. Por ejemplo, Soletanche Bachy los emplea en su portafolio para detallar el proceso de diseño y construcción de algunos de sus proyectos. Esta firma colaboró con el studio Immersive Gardenpara crear artículos donde
utilizan diferentes vistas de modelos 3D en conjunto con animaciones (Immersive Garden, s. f.). El producto final es una página web con información sobre 4 proyectos, en donde modelos 3D
estructurales de bajo detalle aparecen en el fondo, detrás del texto de la página (Soletanche Bachy, s. f.).
Las animaciones del elemento canvas están ligadas al desplazamiento vertical. Entonces, conforme se baja, se desencadenan animaciones que cambian la vista para resaltar elementos específicos. La única otra interacción posible es rotar ligeramente el modelo desplazando el mouse horizontalmente dentro de la página.
Figura 6
La página de Soletanche Bachy vista desde un iPad
Este es un proyecto de comunicación en el cual el uso de 3D y animaciones hace más llamativos los artículos. Como la interacción es limitada, es una página que puede ser visualizada desde dispositivos móviles.
3.4. Visualizaciones para National Geographic
Brian Jacobs, Senior Graphics Editor de National Geographic, diseña visualizaciones interactivas (B. T. Jacobs, s. f.). Su trabajo para esta publicación es principalmente en forma de artículos que incluyen visualizaciones 2D y 3D. En estos, la narrativa es el elemento principal, y las visualizaciones deben soportarla. Su trabajo es ejemplo de cómo el navegador permite reunir diferentes tipos de medios para narrar una historia de forma más clara. El uso de WebGL permite crear contenido interactivo, animado en tiempo real, que puede ser visualizado por diversas clases de dispositivos.
3.4.1. Cassini's Grand Tour
Figura 7
La página web de Cassini ajusta el contenido de acuerdo con el formato del dispositivo
Cassini's Grand Tour narra la historia de la misión Cassini-Huygens de la NASA que tuvo el objetivo de estudiar a Saturno y sus lunas (B. Jacobs & Drake, s. f.). Es un artículo en donde las
animaciones son reproducidas conforme se desplaza hacia abajo. Aquí, el uso de las visualizaciones 3D permite animar la ruta de la sonda junto a las órbitas lunares y planetarias. Para desarrollarlas, Jacobs
calcula las órbitas utilizando datos de la NASA (B. Jacobs, 2017). Luego, incluye imágenes y videos captados por la sonda, para destacar las actividades que llevó a cabo durante cada etapa.
3.4.2. The Atlas of Moons
Figura 8
Modelo 3D de nuestra luna en Atlas of Moons visto desde dos dispositivos
El trabajo más reciente de Jacobs, titulado The Atlas of Moons, es un catálogo de las lunas del sistema solar, que muestra modelos 3D de cada una (The Atlas of Moons, s. f.). También está presentado como un artículo por el cual nos desplazamos verticalmente. Sin embargo, por la longitud del contenido, cuenta con una taxonomía que relaciona las lunas y permite navegar por todo el catálogo. Existe una navegación principal que lista las lunas por planeta, así como categorías que aparecen luego del modelo 3D de cada luna que vinculan a sus símiles. Cada forma de navegación reproduce una animación en la cual se salta desde la órbita de la luna actual hasta el destino.
3.5. NASA's Eyes
Esta plataforma, mantenida por el Jet Propulsion Laboratory de la NASA en conjunto con el California Institute of Technology, reúne diversas aplicaciones de visualización en 3D con datos reales (NASA’s Eyes, s. f.). Contiene experiencias narrativas, como Mars 2020 Entry Descent Landing, así como aplicaciones de visualización más complejas como Earth Now.
3.5.1. Mars 2020 Entry Descent Landing
Figura 9
Simulación del aterrizaje de perseverance en web
Esta página utiliza modelos 3D para simular el proceso de aterrizaje del Perseverance en Marte (Mars 2020 Entry Descent Landing, s. f.). A diferencia de los ejemplos anteriores, aquí las animaciones están ligadas a una línea de tiempo. Varias interacciones manipulan el tiempo: el desplazamiento vertical adelanta a la siguiente fase del proceso; los controles de reproducción permiten ajustar la velocidad de la simulación o pausarla. En el centro de la página está el modelo de la astronave,
presentado en relación al planeta. La interacción con el modelo consiste en rotar la cámara alrededor de él, por lo que se adapta fácilmente a dispositivos con pantallas táctiles.
3.5.2. Eyes on the Earth
Figura 10
Diferentes visualizaciones de datos en Eyes on the earth
La segunda aplicación, por su parte, es un sistema visualización de datos en 3D donde el usuario puede escoger qué métricas observar mediante la interfaz gráfica (Earth Now, s. f.). En el centro de la página, está un modelo 3D de la tierra que puede ser rotado. Las vistas posibles están organizadas en dos categorías: misiones y "signos vitales". En la primera, es posible ver las órbitas de los satélites en relación con la tierra, así como modelos 3D de los mismos. En la segunda, se pueden visualizar conjuntos de datos como los niveles de dióxido de carbono atmosféricos o la temperatura. Al escoger uno, cambia la apariencia del globo terráqueo.
4. Diseño de la interfaz adaptativa para navegación en 3D
En el contexto del proyecto Archaeological Remote Sensing, contamos con digitalizaciones de espacios arquitectónicos que son patrimonio cultural de Colombia. En este sentido, lo más apropiado sería permitir la navegación dentro de estos espacios virtuales. Por suerte, el diseño de interfaces de usuario para la manipulación de elementos 3D es un problema que tiene décadas de estudio. En este caso, habilitar la interacción deseada requiere manipular una cámara dentro de los modelos de Ciudad Antigua.
4.1. Conceptos básicos de las interfaces
Las Interfaces Gráficas de Usuario (GUI) de computador suelen ser creadas bajo el paradigma de
"manipulación directa". Esto significa utilizar un medio de entrada para seleccionar elementos gráficos, como usar un mouse para manipular un puntero que selecciona botones en una interfaz de
computador. En su tesis de 1996George Fitzmaurice define estas interacciones como una serie de 3 pasos: adquirir un dispositivo físico, adquirir el dispositivo lógico y manipular dicho dispositivo lógico (Fitzmaurice, 1996).
En las interfaces estándares, los dispositivos lógicos o visuales son necesarios porque un dispositivo físico debe ser capaz de cumplir distintas funciones. Fitzmaurice llama estos dispositivos como "time-multiplex" o multiplexados en el tiempo, para indicar que pueden hacer varias tareas únicamente de manera secuencial. El mouse es un ejemplo de esto, pues habilita todas las interacciones en un computador, pero solo es capaz de realizar una a la vez. Contrario a estos dispositivos, existen los
"space-multiplex" o multiplexados espacialmente, aquellos donde el dispositivo físico está configurado para ejecutar una única función. Partiendo de esto, Fitzmaurice define su concepto de “Graspable UI”, donde existen diversos dispositivos discretos manipulables espacialmente. Un ejemplo de esta interfaz es la consola de mezcla de audio. Una interfaz gráfica es capaz de replicar su función, pero sería
necesario un mouse para seleccionar y manipular los deslizadores. La consola física, en contraste, permite acceso directo a cada control e incluso puede cambiar varios al mismo tiempo.
La distinción que hace Fitzmaurice entre tiempo y espacio está directamente ligada a la facilidad de uso de una interfaz. Mientras más funciones sean dedicadas a un mismo control físico, menos elementos gráficos son necesarios en una interfaz. De la misma forma, tener múltiples medios de entrada permite realizar acciones de forma simultánea en vez de secuencial. Por el contrario, si no existen suficientes dispositivos físicos, será necesario agregar controles en la interfaz gráfica para poder cubrir las funciones que necesita una aplicación.
En el caso de interfaces para la manipulación de objetos 3D, las principales interacciones son de manipulación espacial: traslación, rotación y escala. En las tres dimensiones cartesianas, una interfaz que permite realizar estas operaciones para cada uno de los ejes se dice que tiene 9 grados de libertad.
En el caso del mouse, hablamos de un dispositivo de entrada con únicamente 2 grados de libertad:
movimiento horizontal en 2 ejes. Es por esta razón que en los programas CAD es necesaria una interfaz gráfica con múltiples dispositivos lógicos (botones, ejes) para permitir al usuario ejecutar todas las transformaciones. Existen controles físicos capaz de manipular más grados de libertad, pero, son
interfaces especializadas para tareas específicas. El SpaceMouse de 3Dconnexion es un ejemplo de esto:
permite navegar de 6 grados de libertad y está pensado para profesionales que trabajan con software CAD. Sin embargo, a pesar de proveer acceso directo a más operaciones, los estudios muestran que no son más efectivos que un mouse normal (Bérard et al., 2009).
En el presente, nuevas tecnologías de sensores, así como de visualización, traen consigo nuevas posibilidades para la manipulación de objetos 3D. Un estudio reciente por Daniel Mendes resume las tendencias y desafíos en este campo (Mendes et al., 2019). Los investigadores discriminan entre 3 tipos de interfaces: Las de escritorio basadas en mouse en teclado; las basadas en tacto y las interfaces
basadas en aire que emplean sensores de movimiento y ubicación. Así, dan recomendaciones de diseño para cada categoría que tienen en cuenta los dispositivos de entrada y las formas de visualización.
En el caso de las interfaces de escritorio, por las limitaciones de mouse y teclado, usualmente se tienen manipulaciones de solo un grado de libertad. Las acciones más complejas requieren del uso de elementos gráficos. Por otro lado, en el caso de las interfaces táctiles directas, aunque permiten una interacción directa, encuentran que es importante realizar una separación de acciones de acuerdo al número de dedos para evitar transformaciones indeseadas. Finalmente, para interacciones en el aire, resaltan la importancia importante diseñar las manipulaciones teniendo en cuenta el tipo de pantalla donde se mostrará el contenido. En resumen, para el diseño de una interfaz en 3D lo principal para tener en cuenta es qué transformaciones específicas queremos permitir y asignarlas a los medios de entrada apropiados. Adicionalmente, para interfaces de movimiento, se debe prestar particular atención a la forma en que se visualiza el contenido en relación con las transformaciones que se realizan.
4.2. Definición de la interacción para navegar los modelos
Teniendo en cuenta lo anterior, podemos definir la interfaz adaptativa para los modelos de la Ciudad antigua. Recordemos que la interacción que buscamos es el movimiento libre dentro de los espacios. En este sentido, para lograr una experiencia inmersiva, el contenido 3D será mostrado en pantalla completa. Hay que tener en cuenta que una página web puede ser visitada desde
computadores de escritorio y portátiles, así como teléfonos y tablets. Por tanto, es necesario especificar diferentes interacciones que puedan acomodarse a las diferentes capacidades de los medios de entrada.
La interacción que deseamos depende de manipular la ubicación y rotación de una cámara dentro del espacio tridimensional. En este sentido, no hay necesidad de planear para las interacciones de selección. Así, la interfaz debe permitir dos manipulaciones principalmente: trasladar y rotar la cámara. Los dispositivos que deben soportar esta interfaz pueden separarse en dos categorías
principales: computadores de escritorio y dispositivos móviles. A los primeros los caracteriza el mouse y
el teclado, mientras que a los segundos, las pantallas táctiles y, en ciertos casos, los acelerómetros y giroscopios.
4.2.1. Computadores de escritorio
Para computadores tradicionales que poseen mouse y teclado, dedicamos un medio de entrada a una transformación específica. El teclado se encargará de la traslación de la cámara en el plano horizontal, así como subirla o bajarla en el vertical. Este tipo de control será familiar para quienes han jugado videojuegos en primera persona. Mientras tanto, el mouse se encargará de la rotación de la cámara. Como la interfaz será de pantalla completa, utilizamos el API PointerLock para capturar el cursor y así permitir que el usuario mueva la cámara con libertad. A través de esta configuración, es posible trasladar y rotar la cámara simultáneamente.
Figura 11
El prototipo visto desde un computador de escritorio mostrando el modelo general de Ciudad Antigua
4.2.2. Dispositivos móviles
Para dispositivos que cuentan únicamente con pantallas táctiles, uso la implementación de OrbitControls de Three.js, donde la cámara se mueve en una órbita alrededor del modelo. Al aprovechar la capacidad de multi tacto, estos controles permiten 3 operaciones distintas: rotar la cámara alrededor del modelo arrastrando con un dedo, trasladar la cámara horizontal o verticalmente arrastrando con dos dedos y acercarse o alejarse del modelo pinchando con dos dedos. Este es un tipo de control
multiplexado en tiempo, necesario por la limitación del medio de entrada.
Figura 12
La aplicación vista desde dispositivos móviles con giroscopio
Para los dispositivos móviles que cuentan con giroscopios capaces de reportar su orientación, implementé controles que igualan la experiencia del computador. Mediante el API de DeviceOrientation, la interfaz utiliza la orientación del dispositivo para rotar la cámara. Esto permite una interacción
intuitiva en donde la pantalla del dispositivo sirve como una ventana hacia el entorno virtual. Para la traslación en el plano horizontal, se usa la pantalla táctil como un joystick virtual al tocar y arrastrar con
un dedo. En este caso, para mover la cámara verticalmente, es necesario agregar botones a la interfaz gráfica.
4.3. Prototipo de la aplicación web
Para implementar esta interfaz, desarrollé una SPA (Single Page Application) con Svelte, un compilador de JavaScript que permite crear páginas interactivas de alto desempeño (Harris, 2018). La publiqué en Vercel, una plataforma de desarrollo que permite la publicación de este tipo de aplicaciones sin necesidad de configurar un servidor web. El objetivo de la aplicación es garantizar la accesibilidad al contenido desde múltiples dispositivos y medios de entrada. Sus funciones principales serán identificar qué tipo de dispositivo está visitando la página; transmitir y visualizar los modelos; e inicializar los controles. Un dispositivo generalmente se identifica ante el servidor al solicitar una página web. Sin embargo, limitarse a leer el agente de usuario reportado por el navegador puede llevarnos a hacer asunciones erróneas (Jehl, 2014). Por ejemplo, un iPad actual se identifica como un computador de escritorio, a pesar de que no cuenta con un teclado físico o un mouse. Por ende, la mejor forma de realizar la identificación es detectando las capacidades mediante JavaScript.
JavaScript provee API para detectar eventos táctiles o de movimiento, pero no la presencia de un teclado físico. Así, podemos asumir que se accede desde un computador con mouse y teclado, pero al detectarse un evento de tacto, podemos ajustar como corresponde. La aplicación emplea este tipo de detección junto al agente de usuario para definir el esquema de control.
Tabla 2
Variables de decisión para el tipo de control que se aplica al modelo 3D
Agente de usuario móvil DeviceMotion TouchEvent Tipo de control
Sí Sí Sí Control por orientación con joystick
táctil
Sí No Sí Controles táctiles
No importa No No Controles de mouse y teclado
No obstante, detectar el API de deviceOrientation no es tan simple debido a que es implementado de diferentes formas en iOS y Android. Apple sigue la recomendación de la W3C y requiere que un usuario interactúe con la página para poder pedir el permiso de acceso a los datos de orientación. Por el contrario, la implementación de Google en Android otorga acceso automáticamente.
Para solucionar este inconveniente, la aplicación agrega un paso adicional cuando es visitada desde un dispositivo móvil. En vez de cargar los modelos automáticamente, el usuario debe presionar un botón.
Al hacer esto, en los dispositivos iOS aparecerá en mensaje solicitando acceso a los datos de orientación.
Una vez el usuario seleccione el modelo que quiere visualizar, la página envía el archivo correspondiente y el dispositivo empieza a descomprimirlo para cargarlo en la escena. Cuando el modelo se muestra, es posible interactuar con él. En el caso de los controles de mouse y teclado, es necesario hacer clic sobre la escena para poder empezar a moverse. Mientras tanto, para los demás controles, se puede interactuar directamente.
5. Discusión
5.1. Limitaciones técnicas
El prototipo desarrollado cumple con la función de volver más accesibles los modelos de Ciudad Antigua. En comparación con la experiencia inmersiva original de más de 3GB, el tamaño total de esta aplicación web está alrededor de los 150MB. También, es accesible desde dispositivos móviles, con controles intuitivos. Sin embargo, existen ciertas limitaciones técnicas. El tamaño y la complejidad de los modelos resulta problemático para dispositivos móviles. El formato GTLF comprimido con DRACO es excelente para transmitir archivos por internet. Pero, al descomprimirlos para su visualización, el uso de memoria RAM es considerable.
Tabla 3
Utilización de RAM para visualizar modelos ·3D en la aplicación reportada por Edge 91 en macOS 11.4
Nombre del modelo Uso de RAM (MB) Uso de VRAM (GB)
General View 1910 1.86
Horizontal Terrace 745 1.023
Opposite Side Wall 594 0.993
Side Wall 545 1.0
En las pruebas realizadas con un iPhone 7, encontré que es capaz de cargar todos los modelos exceptuando el de la vista general por límites de RAM. En estos dispositivos de Apple, cuando una página web consume más memoria que la disponible, Safari recarga la página. Esta es una limitación bastante importante. ya que un teléfono Android de bajo costo de hoy ofrece desempeño comparable a un iPhone de 2012/13 (Russell, 2021). Teniendo en cuenta las figuras de la tabla 3, esto implica que la mayoría de los visitantes con teléfonos no podrá visualizar los modelos.
Es posible que este problema pueda solucionarse con métodos alternativos para transmitir los modelos. La plataforma 3DHOP implementa un algoritmo de streaming llamado Nexus que convierte los modelos a un formato donde la resolución depende de la vista (Ponchio & Dellepiane, 2015). De esta forma, el modelo carga primero como uno de baja resolución, mientras la aplicación constantemente descarga datos adicionales de las caras visibles. Es una alternativa que vale la pena integrar en proyectos como este, donde los modelos 3D son de gran tamaño y el formato GTLF no es suficiente para garantizar que puedan visualizarse desde cualquier dispositivo.
5.2. La relación de los modelos 3D con el patrimonio cultural
Más allá de la solución del problema técnico del acceso a los modelos 3D de una investigación, socializar el patrimonio digital debe involucrar el resto de los resultados. Una de las principales críticas del uso de modelos 3D en el campo del patrimonio cultural, es que un modelo fotorrealista no es
suficiente para entender la importancia del patrimonio (Rahaman, 2019). Una solución apropiada debe comunicar el contexto y sus interpretaciones.
Para el público general, esto significa que proyectos como este, que buscan socializar los
resultados de la investigación para generar interés, deben incluir contenido de esta. Esto se puede lograr vinculando los hallazgos arqueológicos al mismo modelo 3D o a la página. Pero desde luego, crear este contenido e implementarlo en una plataforma web requiere colaboración y trabajo.
5.3. Conclusiones
Los navegadores web permiten mostrar modelos 3D complejos e interactuar con ellos de diferentes maneras y desde diferentes dispositivos. Este desarrollo muestra que es posible utilizar estándares web novedosos para distribuir los modelos 3D de Ciudad Antigua creados en el proyecto de Archaeological Remote Sensing. La interfaz diseñada garantiza que los usuarios finales puedan navegar dentro de ellos utilizando diferentes dispositivos. Sin embargo, proveer un medio de interacción no es suficiente para comunicar todo el valor cultural ligado a los sitios digitalizados. Futuros trabajos que exploren el uso de la web como medio de difusión del patrimonio cultural deben encontrar formas novedosas de integrar más contenido con estos modelos 3D. El objetivo final debe ser comunicar el valor de los artefactos y espacios digitalizados; el acceso es simplemente la mitad de la ecuación.
Referencias
3DHOP - Gallery. (s. f.). Recuperado 21 de junio de 2021, de https://3dhop.net/demo.php 7 W3C Recommendation Track Process. (s. f.). Recuperado 21 de junio de 2021, de
https://www.w3.org/2004/02/Process-20040205/tr.html
Bérard, F., Ip, J., Benovoy, M., El-Shimy, D., Blum, J. R., & Cooperstock, J. R. (2009). Did “Minority Report” get it wrong? Superiority of the mouse over 3D input devices in a 3D placement task.
IFIP Conference on Human-Computer Interaction, 400-414.
Cots, I., Vilà, J., Diloli, J., Ferré, R., & Bricio, L. (2018). Virtual archaeology: From archaeological
excavation to the management and diffusion of heritage. Les Cases de la Catedral (Tortosa) and the protohistorical settlement of La Cella (Salou), Tarragona. Virtual Archaeology Review, 9(19), 102-113. https://doi.org/10.4995/var.2018.9754
DeviceOrientation & DeviceMotion events | Can I use... Support tables for HTML5, CSS3, etc. (s. f.).
Recuperado 21 de junio de 2021, de https://caniuse.com/deviceorientation DeviceOrientation Event Specification – W3C Working Draft. (2019, abril 16).
https://www.w3.org/TR/orientation-event/
Earth Now. (s. f.). Recuperado 21 de junio de 2021, de https://eyes.nasa.gov/apps/earth/#/
Fitzmaurice, G. W. (1996). GRASPABLE USER INTERFACES [PhD Thesis, University of Toronto].
http://www.dgp.toronto.edu/~gf/papers/Thesis.gf.final.pdf Gamepad – W3C Working Draft. (2021, abril 8). [W3C Working Draft].
https://www.w3.org/TR/gamepad/
Gamepad API | Can I use... Support tables for HTML5, CSS3, etc. (s. f.). Recuperado 21 de junio de 2021, de https://caniuse.com/gamepad
Harris, R. (2018, diciembre 27). Virtual DOM is pure overhead. https://svelte.dev/blog/virtual-dom-is- pure-overhead
Hübner, P. (s. f.). SHUTDOWN Gallery. A web-based, AR/VR 3D experience. • Patrik Hübner – Generative Design and Creative Coding for brands and agencies. Patrik Hübner - Generative Design and Creative Coding for Agencies, Brands and Cultural Institutions. Recuperado 21 de junio de 2021, de https://www.patrik-huebner.com/work/shutdown-gallery-a-web-based-ar-vr-3d-experience/
Immersive Garden. (s. f.). Immersive Garden. Recuperado 21 de junio de 2021, de https://immersive- g.com/cases/soletanche-bachy
Introduction—WebAssembly 1.1 (Draft 2021-06-01). (s. f.). Recuperado 21 de junio de 2021, de https://webassembly.github.io/spec/core/intro/introduction.html
Jacobs, B. (2017, octubre 3). How We Made Cassini’s Grand Tour.
https://source.opennews.org/articles/how-we-made-cassinis-grand-tour/
Jacobs, B., & Drake, N. (s. f.). Cassini’s Grand Tour. National Geographic. Recuperado 21 de junio de 2021, de https://www.nationalgeographic.com/science/graphics/cassini-saturn-nasa-3d-grand- tour
Jacobs, B. T. (s. f.). Brian T. Jacobs—Design / Development / Visualization. Brian T. Jacobs - Design / Development / Visualization. Recuperado 21 de junio de 2021, de http://briantjacobs.com/
Jehl, S. (2014). Responsible responsive design. A Book Apart.
Johansson, J. (2021). Performance and Ease of Use in 3D on the Web: Comparing Babylon.js with Three.js. http://urn.kb.se/resolve?urn=urn:nbn:se:bth-20977
Keith, J., & Andrew, R. (2016). HTML5 for Web Designers, Second Edition. A Book Apart.
Khronos Releases glTF 2.0 Specification. (2017, junio 5). The Khronos Group.
https://www.khronos.org/news/press/khronos-releases-gltf-2.0-specification Lusion – The Turn Of The Screw Trailer. (s. f.). Lusion. Recuperado 21 de junio de 2021, de
https://lusion.co/work/the-turn-of-the-screw-trailer
Mars 2020 Entry Descent Landing. (s. f.). Recuperado 21 de junio de 2021, de https://eyes.nasa.gov/apps/mars2020/#/home
Mendes, D., Ferreira, A., Jorge, J., Caputo, F. M., & Giachetti, A. (2019). A Survey on 3D Virtual Object Manipulation: From the Desktop to Immersive Virtual Environments. Computer Graphics Forum, 38(1), 21-45. https://doi.org/10.1111/cgf.13390
Mudd, N. (2020, enero 17). MUSIC | Something in the Air... Sound artist James Bulley on Britten, Oram and The Sonics! The CULTURE VULTURE. https://theculturevulture.co.uk/cultures/james-bulley- artist-opera-north/
NASA’s Eyes. (s. f.). NASA’s Eyes. Recuperado 21 de junio de 2021, de https://eyes- cms.jpl.nasa.gov/index.html
Pointer Lock 2.0 – W3C Working Draft. (2019, agosto 28). https://www.w3.org/TR/pointerlock/
Ponchio, F., & Dellepiane, M. (2015). Fast decompression for web-based view-dependent 3D rendering.
Proceedings of the 20th International Conference on 3D Web Technology, 199-207.
Rahaman, H. and C. (2019). The Scholarly Rewards and Tragic Irony of 3D Models in Virtual Heritage Discourse. M. Haeusler, M. A. Schnabel, T. Fukuda (eds.), Intelligent & Informed - Proceedings of the 24th CAADRIA Conference - Volume 2, Victoria University of Wellington, Wellington, New Zealand, 15-18 April 2019, pp. 695-704. http://papers.cumincad.org/cgi-
bin/works/BrowseTree=series=AZ/Show?caadria2019_305
Russell, A. (2021, marzo 7). The Mobile Performance Inequality Gap, 2021. Infrequently Noted.
https://infrequently.org/2021/03/the-performance-inequality-gap/
Scopigno, R., Callieri, M., Dellepiane, M., Ponchio, F., & Potenziani, M. (2017). Delivering and using 3D models on the web: Are we ready? Virtual Archaeology Review, 8(17), 1-9.
Soletanche Bachy. (s. f.). Soletanche Bachy. Recuperado 21 de junio de 2021, de https://experience.soletanche-bachy.com/es/T219-metro-singapur
The Atlas of Moons. (s. f.). National Geographic. Recuperado 21 de junio de 2021, de https://www.nationalgeographic.com/science/graphics/the-atlas-of-moons
The Turn of the Screw immersive trailer. (s. f.). The Turn of the Screw Immersive Trailer. Recuperado 21 de junio de 2021, de https://www.operanorth.co.uk/turn-of-the-screw-immersive-trailer/
Touch Events – W3C Recommendation. (2013, octubre 10). https://www.w3.org/TR/touch-events/
Turn of the Screw. (s. f.). James Bulley. Recuperado 21 de junio de 2021, de http://www.jamesbulley.com/turn-of-the-screw
Web Serial API – Living Document. (2021, abril 22). https://wicg.github.io/serial/
WebGL - 3D Canvas graphics | Can I use... Support tables for HTML5, CSS3, etc. (s. f.). Recuperado 21 de junio de 2021, de https://caniuse.com/webgl
WebGL 2.0 Specification. (s. f.). Recuperado 21 de junio de 2021, de https://www.khronos.org/registry/webgl/specs/latest/2.0/
What are Adaptive User Interfaces? (2017, diciembre 18). GPII DeveloperSpace.
https://ds.gpii.net/content/what-are-adaptive-user-interfaces
