Artículos
Ambiente Web 3D inmersivo para la educación universitaria
Immersive Web 3D Environment for University Education
Ambiente Web 3D inmersivo para la educación universitaria
Revista UIS ingenierías, vol. 23, no. 3, pp. 47-60, 2024
Universidad Industrial de Santander
Received: 19 January 2024
Accepted: 15 June 2024
Resumen: El metaverso es la próxima gran revolución de internet, permitiendo la comunicación entre usuarios desde una perspectiva virtual mapeada al mundo real. Esta tecnología ha atraído un gran interés de estudiantes, investigadores y empresas, y ha propuesto múltiples aplicaciones en sectores como educación, comercio, salud y otros. Sin embargo, su desarrollo se encuentra en sus etapas iniciales, ya que aún está en discusión cómo se estandarizará frente a las nuevas soluciones planteadas. Este artículo presenta el marco referencial de los principales componentes que conforman un metaverso (modelamiento 3D, ambiente Web 3D y aspectos de comunicación), la metodología implementada para el desarrollo del metaverso de la Escuela de Ingeniería de Sistemas y Computación - EISC Metaverse, la arquitectura, las tecnologías usadas y el prototipo desarrollado con los componentes mencionados en la revisión de la literatura, además de discutir los resultados obtenidos al desarrollar este tipo de tecnologías emergentes.
Palabras clave: Metaverso, avatares, navegabilidad, inmersión, interacción.
Abstract: The metaverse is the next major revolution of the internet, enabling communication between users from a virtual perspective mapped to the real world. This technology has attracted significant interest from students, researchers, and businesses, and has proposed multiple applications in sectors such as education, commerce, health, and others. However, its development is in its initial stages, as it is still under discussion how it will be standardized in the face of new proposed solutions. This article presents the theorical framework of the main components that make up a metaverse (3D modeling, Web 3D environment and communication aspects), the methodology implemented for the development of the metaverse of the School of Systems Engineering and Computing - EISC Metaverse, the architecture, the technologies used, and the prototype developed with the components mentioned in the literature review, in addition to discussing the results obtained in developing these types of emerging technologies.
Keywords: Metaverse, avatars, navigability, immersion, interaction.
1. Introducción
La pandemia limitó el movimiento y la interacción entre las personas, causando nuevos cambios en la comunicación [1]. Uno de esos cambios se produjo cuando el 28 de octubre de 2021, Mark Zuckerberg, director ejecutivo de Facebook, anunció un cambio de nombre de la red social Facebook a Meta Platforms Inc, en el cual mostró al mundo entero una nueva visión que implicaba construir un "metaverso" como la próxima gran revolución de la internet [2]. La idea presentada fue que los usuarios a través de avatares virtuales navegarán en un ecosistema virtual tridimensional, a través de HMDs, aplicaciones de escritorio, web o móviles [3], de forma que, el año 2021 se le denomina el primer año del metaverso [4].
El concepto ha tenido un gran foco de interés para instituciones educativas, investigadores, empresas, entre otros. Sin embargo, la evolución detrás del metaverso tiene aproximadamente 30 años [5]. El metaverso se desarrolla gradualmente, comenzando con aspectos de comunicación e interacción y avanzando hacia el apoyo a las actividades de enseñanza y aprendizaje en el contexto de la educación [6].
Este artículo presenta la metodología utilizada para realizar el metaverso de la Escuela de Ingeniería de Sistemas y Computación - EISC Metaverse, la arquitectura y tecnologías usadas del prototipo desarrollado como se aprecia en la Figura 1 y la discusión de resultados obtenida.

Desde el punto de vista del metaverso, se puede decir que "se compone de tres niveles: el contenido, lo que hay dentro del metaverso; el software, los programas que hacen que el metaverso funcione; y finalmente, el hardware, es decir, las herramientas para acceder al metaverso" [7]. Teniendo en cuenta lo mencionado anteriormente, a continuación, se describirán el concepto del metaverso y los componentes principales que conforman el mismo.
Metaverso: El metaverso se basa en Realidad Extendida (XR), Blockchain, Inteligencia Artificial (IA), Interacción Humano Computadora (HIC) y otras tecnologías que integran un mundo virtual digital paralelo con la realidad [4]. Esta tecnología pretende con el tiempo combinar de forma inteligente los entornos 2D "bidimensionales" que tenemos en aplicaciones web, escritorio, móviles con espacios virtuales 3D "tridimensionales", de modo que, uniendo sus características, se puedan obtener ventajas únicas de cada una [8]. El metaverso ofrece aplicaciones en el ámbito político, económico, social, cultural y educativo [9], siendo este último un nuevo patrón de suma importancia para mejorar la calidad y eficiencia de la educación en los campus universitarios [6]. La palabra metaverso es un acrónimo formado por 'meta' que significa "después" o "más allá", y 'verso' que hace referencia a "universo" [10]. El origen del término metaverso se utilizó por primera vez en la novela de ciencia ficción Snow Crash de Neal Stevenson publicada en 1992 [11], y hoy en día esta palabra se refiere al metaverso OASIS de la novela de ciencia ficción Ready Player One, escrita por Ernest Cline en 2012 [12]. OASIS es un juego de realidad virtual VR en línea donde los usuarios se conectan con HMDs, guantes y trajes hápticos [11]. A diferencia de las aplicaciones bidimensionales tradicionales, el concepto de metaverso es "en lugar de simplemente ver cosas, sumergirse en ellas". Los soñadores del metaverso anticipan un universo virtual para todos, en el que las personas pueden viajar de un mundo virtual a otro con el mismo avatar que es la representación del usuario [13].
Mundo virtual: Los mundos virtuales son espacios en línea donde los usuarios por medio de su avatar pueden interactuar remotamente en tiempo real [14]. Es un mundo simulado por computadora, donde se compone de dos palabras, "mundo" que abarca la totalidad de las actividades y experiencias humanas, y "virtual" cualquier cosa en línea simulado mediante software [15]. "Este entorno virtual combina el mundo físico y lo digital, consta de varias escenas, personajes no jugadores (NPC), y personajes jugadores (avatares)" [16].
Avatar: Las personas están representadas virtualmente en el metaverso por un avatar, cuyo propósito es viajar por el mundo virtual, participando en actividades académicas, políticas, económicas, sociales y culturales en tiempo real [12]. El avatar es un alter ego digital [17], que proyecta perfiles y características deseadas del usuario [18]. Las personas tienen el control de sus avatares, lo que significa que pueden crear la apariencia, cambiarse de ropa y gestionar su comportamiento [12].
NPC: Desde la perspectiva de la Inteligencia Artificial, existen varios roles que se pueden implementar en el metaverso por medio de los personajes no jugadores NPC (Non- Player Characters), de los cuales permiten "simular" a humanos en el metaverso, tomar decisiones siguiendo reglas predefinidas, entre otros [19].
Navegabilidad: Otro aspecto importante para tener en cuenta en el metaverso es la navegabilidad que se refiere a la percepción que tienen los usuarios para mover sus avatares en el mundo virtual [20] entre tres a seis grados de libertad siendo el último caso utilizando en los HMDs [7]. La navegabilidad debe responder a las tres preguntas, ¿de dónde vengo?, ¿dónde estoy?, y ¿para dónde voy? [21].
Interacción: El concepto interacción hace referencia al intercambio o influencia mutua [15]. La interacción es un elemento clave para el éxito del metaverso, puesto que los usuarios deben interactuar entre sí y con los NPCs de forma natural y fluida [22]. Con la ayuda de equipos multisensoriales como HMDs, trajes hápticos, cintas de correr omnidireccionales se amplifica los sentidos de visión, sonido, tacto y movimiento [23], permitiendo la interacción entre los actores del mundo virtual.
Inmersión: La inmersión es una propiedad cualitativa ligada a la percepción del usuario [15] que tiene un efecto positivo al estar presente en un mundo simulado [20]. La inmersión se produce a través del hardware, de los cuales en el metaverso las interfaces más atractivas para la inmersión tridimensional son las pantallas montadas en la cabeza - HMDs (Head-Mounted Displays), teléfonos inteligentes y computadores [7]. Además de estos dispositivos, otros elementos como la calidad del sonido, la interactividad y la representación gráfica realista contribuyen significativamente a la experiencia inmersiva. Las tecnologías de realidad aumentada (AR) y realidad virtual (VR) juegan un papel crucial en esta inmersión, ofreciendo una experiencia más rica y envolvente.
2. Metodología
Para el desarrollo este metaverso se utilizó un proceso de diseño centrado en el usuario a fin de identificar necesidades, comportamientos y expectativas de los usuarios y una metodología de desarrollo ágil (Scrum) para la implementación del metaverso.
2.1. Investigación de usuarios
Con el fin de analizar expectativas y conocimientos de los usuarios con metaversos, se realizó una investigación de usuarios, donde se aplicaron entrevistas, se construyó un mapa de afinidad y se identificaron cinco protopersonas.
2.1.1. Entrevistas
Se utilizo como herramienta de indagación y diagnostico la entrevista, dado que, el proceso de investigación de usuarios es no probabilístico, y se trabajó con una muestra de cinco usuarios. Los usuarios se seleccionaron de la siguiente forma: un profesor investigador con experiencia en enseñanza en las TICs poco familiarizado con interacciones 3D, un profesor joven investigador y administrativo del programa de Ingeniería de Sistemas familiarizado con entornos 3D, un estudiante de último semestre del programa de Ingeniería de Sistemas familiarizado con espacios virtuales 3D, una estudiante gamer de semestres intermedios del programa Ingeniería de Sistemas familiarizada con mundos virtuales 3D, y una estudiante investigadora del programa de Química que no está familiarizada con espacios virtuales 3D.
Esta muestra garantiza que los usuarios seleccionados son representativos de la población universitaria a la que va dirigido el metaverso.
Para llevar a cabo las entrevistas se realizó un guion con preguntas relacionadas sobre ¿qué es el metaverso?, ¿cómo debería ser la interacción en el metaverso?, ¿cómo les gustaría verse representados en ese espacio virtual?, ¿qué les gustaría hacer?, ¿que desearían ver?, así como también, ¿cómo piensan que se debería verse el edificio de la EISC?, de forma que al indagar sobre sus expectativas se recolectaron insumos para el desarrollo de los artefactos de la investigación de usuarios que se presentarán en la sección 2.1.3.
Pensar en voz alta: Como complemento de la entrevista se realizó el método de evaluación "Thinking aloud" (del inglés, pensar en voz alta), con la finalidad de apreciar el comportamiento de los usuarios entrevistados en un entorno Web 3D desarrollado para tal fin.
El entorno se denominó DomoGallery (ver Figura 2), el cual ofrece una experiencia inmersiva en la web en primera persona, donde en primera instancia se muestra en una vista aérea el Campus de la Universidad del Valle y en una galería de arte se exhiben un conjunto de piezas de poesía de creación original con diversos temas de la vida cotidiana.
![(a) Vista del domo (b) Vista de gallery. Fuente: adaptado de [24].](../2145-8456-uisi-23-03-47-gf2.png)
A cada usuario se le asigno la tarea de que navegaran en el mundo virtual, hasta reproducir uno de los videos de poesía que se encuentran en la galería de arte. Cada usuario fue describiendo en voz alta las interacciones y navegabilidad que utilizaban en el mundo virtual, de forma que, se evidenció como los usuarios que no estaban acostumbrados a este tipo de tecnologías les era más difícil realizar la tarea de desplazarse en el ambiente Web 3D, al tener utilizar sincrónicamente el ratón y teclado.
2.1.2. Artefactos de la investigación de experiencias de usuarios
Para plasmar los resultados de la investigación de usuarios, se construyó el mapa de afinidad y las protopersonas.
Mapa de afinidad: Teniendo en cuenta el análisis cualitativo realizado a los usuarios (la entrevista), se organizaron y categorizaron los datos por medio del mapa de afinidad, de forma que se encontraron patrones que formaron grupos tales como representación del usuario en el metaverso: avatar con características semejantes al usuario, el cual pueda ser personalizado; visibilidad del avatar: activo siempre y cuando el usuario este navegando en el metaverso; acciones a realizar en el metaverso: recorrer el edificio y conversar con los estudiantes, profesores y administrativos; modo de persona en el metaverso: ver el avatar en tercera persona; dimensión del metaverso: tridimensional mapeado del mundo real; interfaces tangibles a usarse en el metaverso: teclado y ratón, de manera opcional joystick y HMDs; opciones que deben estar siempre visible en el metaverso: un instructivo y menú de opciones; inmersión en el metaverso: experiencia que haga sentir que cambie de espacio; acceso del metaverso: accesible desde computadores y móviles (tablets y smartphones); representación de la EISC en el metaverso: representación realista de la EISC.
En [25] se puede acceder al mapa de afinidad construida.
Proto-personas: Con el propósito de abstraer los diferentes tipos de usuarios que tendrá el metaverso, se definieron cinco proto-personas, cada una de las cuales representa un usuario genérico.
Las proto-personas definidas son: Pablo es un profesor investigador con experiencia en las TICs, cuya motivación es atender a sus estudiantes bien sea en su oficina, grupo de investigación o salón de clases. Es un usuario poco familiarizado con entornos 3D pero dispuesto a aprender si ve las ventajas que le pueda ofrecer el metaverso; Federico es un profesor joven administrativo e investigador conocedor de las TICs y familiarizo con espacios virtuales 3D, quien tiene interés en atender a sus estudiantes y orientarlos en sus procesos académicos en la dirección del programa o en su oficina; Elizabeth es una estudiante investigadora poco familiarizada con entornos virtuales 3D, cuyo objetivo es ver simulaciones de experimentos científicos a escala; Stephany es una estudiante gamer cuyo interés es sentirse que está en un mundo real navegando en un mundo virtual; Roberto es un estudiante con conocimientos avanzados en las TICs y familiarizado con entornos tridimensionales, donde su motivación se centra en poder acceder al metaverso desde cualquier dispositivo.
En [26] se puede acceder a las protopersonas construidas.
2.2. Agilismo
Para llevar a cabo el desarrollo del prototipo EISC Metaverse se usó la metodología Scrum, con el fin de gestionar el proyecto de manera eficaz y rápida. A continuación, se presentan las herramientas utilizadas para el desarrollo de este.
2.2.1. Product Backlog
Como técnica para construir el Product Backlog se usó el User Story Mapping con el fin de identificar las épicas correspondientes a las grandes historias de usuario que el sistema debe soportar, de los cuales se muestran en la Tabla 1.

2.2.2. Historias de usuarios
De acuerdo con la información recopilada en la investigación de usuarios (sección 2.1), se plantearon las siguientes historias de usuarios, con el propósito de desarrollar la aplicación centrada al cliente.
HU-1 Login usuario de la Universidad del Valle.
HU-2 Login invitado.
HU-3 Registro de datos del usuario estudiante. de la Universidad del Valle.
HU-4 Registro de datos del usuario docente de la EISC de la Universidad del Valle.
HU-5 Creación del avatar.
HU-6 Menú del metaverso.
HU-7 Visualización del perfil del usuario.
HU-8 Edición de datos del usuario.
HU-9 Edición del avatar.
HU-10 Navegabilidad del avatar.
HU-11 Conexión de avatares en tiempo real.
HU-12 Messenger.
HU-13 Chat de voz.
HU-14 Visualización instructivo del metaverso.
HU-15 NPC guía del metaverso.
HU-14 Visualización y exploración de las oficinas administrativas de la EISC.
HU-17 Visualización y exploración de los auditorios 1, 2, 3, 4 de la EISC.
HU-18 Visualización y exploración de los salones 2002 y 2008 de la EISC.
HU-19 Visualización y exploración de las salas de cómputo de 1, 2, 4, 5, 6 de la EISC.
HU-20 Visualización y exploración del Cenesis de la EISC.
HU-21 Visualización y exploración de la sala de comité de profesores nombrados de la EISC.
HU-22 Visualización y exploración de los salones de posgrados 1, 2 y 3 de la EISC.
HU-23 Visualización y exploración del auditorio de posgrados de la EISC.
HU-24 Visualización y exploración de los laboratorios de los grupos de investigación de la EISC.
HU-25 Visualización y exploración de las oficinas de los profesores nombrados de la EISC.
2.2.3. Backlog del sprint
Con el fin de priorizar las historias de usuarios y crear un mínimo producto viable (MVP) en cada sprint, se definieron ocho sprints como se aprecia en la Tabla 2. Cada sprint tiene una duración de dos semanas.

3. Prototipo desarrollado
El metaverso de la Escuela de Ingeniería de Sistemas y Computación - EISC Metaverse, se desarrolla con el propósito de soportar aspectos de comunicación entre miembros de la comunidad universitaria. Este metaverso como se aprecia en la Figura 3 esta implementado en la Web 3D con el fin de que los estudiantes, profesores, administrativos, e invitados puedan acceder desde un navegador web e interactuar en el espacio virtual en tiempo real sin limitación alguna.

3.1. Arquitectura
La Figura 4 presenta el diagrama de componentes de prototipo EISC Metaverse desarrollado. La arquitectura de componentes del prototipo de EISC Metaverse inicia con el componente principal, index, el cual se encarga de renderizar el componente Experience, que a su vez carga los proveedores AuthProvider, UserProvider y AvatarProvider.

El AuthProvider es responsable de la autenticación con Google mediante el servicio de Google Authentication. Por otro lado, UserProvider almacena en tiempo de ejecución la información del usuario, como correo, nombre, nickname, biografía, Url de la foto de Google, Url del avatar 3D, Url de la foto del avatar, y estados que indican si es la primera vez del usuario en el metaverso y si es profesor. El AvatarProvider guarda la referencia del avatar en 3D, su cuerpo rígido, su estado de animación, posición, rotación y su cuaternio. Finalmente, Experience también renderiza el componente RoutesEISCMetaverse, que gestiona el enrutamiento de las múltiples rutas del metaverso, de forma que controla que el usuario no ingrese una ruta diferente a la inicial del metaverso.
Al abrir la página web del metaverso, se carga automáticamente el componente Login, que a su vez renderiza UnivalleUserLogin y GuestLogin. El primero emplea el contexto de AuthContext para autenticar a usuarios con cuentas institucionales terminadas en "@correounivalle.edu.co", de forma que primero verifica si el usuario existe en la base de datos alojada en la Cloud Firestore y, de no ser así, lo redirige al registro de usuario; en caso contrario, lo dirige al metaverso. El segundo componente, GuestLogin, gestiona el acceso de usuarios invitados comprobando en el Local Storage del navegador su existencia. Si no existe, lo redirige al registro de usuario; de lo contrario, al metaverso. Cuando el usuario inicia sesión, el sistema renderiza el componente Register. Este, a su vez, carga diferentes componentes según el tipo de usuario: FormUser para estudiantes, profesores externos de la EISC o miembros de la comunidad universitaria; FormTeacher para profesores nombrados de la EISC; y FormGuest para usuarios invitados. Los componentes FormUser y FormTeacher se encargan de almacenar la información del usuario en la base de datos ubicada en Cloud Firestore. Por otro lado, FormGuest guarda la información del usuario invitado en el Local Storage del navegador. Después de completar el proceso de registro, la aplicación procede a cargar el componente CreateAvatar, que establece comunicación con la API de Ready Player Me. Esta API proporciona la interfaz que permite al usuario crear su avatar 3D. Una vez que el usuario finaliza la creación del avatar, el sistema guarda la Url del avatar en 3D y del avatar en formato PNG dentro del contexto de UserContext.
Una vez que el avatar es creado, el sistema redirige al usuario al componente Metaverse, el núcleo del ambiente virtual Web 3D. En este espacio, el componente Metaverse renderiza una escena 2D superpuesta que incluye los componentes de Messenger, el chat de texto, Voice, el chat de voz y Menu, que a su vez contiene los componentes de Logout, Instructive, y Profile. Este último da acceso a EditUser, una interfaz que permite la edición de los datos del usuario y del avatar, ofreciendo FormEditUser o FormEditTeacher según el tipo de usuario, y finaliza con EditAvatar para personalizar el avatar. Adicionalmente, el componente Metaverse renderiza el Canvas que contendrá los elementos 3D, que están conformados por el componente de Controls, que gestiona el movimiento de la cámara y del avatar; el componente EISC, que carga el modelo 3D de la Escuela de Ingeniería de Sistemas con todos sus pisos, escaleras y zonas exteriores alojados en los componentes EISCFirstFloor, EISCSecondFloor, EISCThirdFloor, EISCFourthFloor, EISCFifthFloor, Stairs, y Outside; El componente Lights ajusta la iluminación de la escena; el componente User, responsable de renderizar los avatares de otros usuarios conectados en tiempo real; y por último Alu, el NPC que se integra como un elemento de guía y asistencia para la navegación dentro del metaverso que su información de los pasos de navegabilidad se encuentran en el componente Guide.
La interacción en tiempo real entre avatares dentro del metaverso se facilita cuando el componente Metaverse invoca a SocketManager. Este último actúa como una variable global atómica accesible desde cualquier componente del metaverso, permitiendo al componente Metaverse comunicarse con el servidor de WebSockets para enviar información del usuario como su email, nickname, y la Url del modelo del avatar. Seguido, el componente Controls envía al servidor de WebSockets información de posición, rotación, y animación que realiza el avatar. Por último, el componente Messenger envía los mensajes escritos por el usuario a través del chat. Cabe resaltar, que el componente Voice tiene la responsabilidad de conectarse con el servidor de WebRTC del metaverso para enviar y recibir datos de voz del usuario. De esta manera, se mantiene una comunicación fluida y sincronizada entre los usuarios en el entorno virtual.
3.2. Tecnologías usadas
Para el desarrollo del prototipo de EISC Metaverse se utilizaron las siguientes tecnologías como se puede apreciar en la Figura 5.

3.2.1. Front End
El lado del cliente de EISC Metaverse se basa en las siguientes tecnologías, con el fin de mostrar al usuario la interfaz con los elementos 2D y 3D que conforman el metaverso:
React (v18.2.0): librería de Javascript para crear interfaces de usuarios en la web.
Three.js (v0.156.1): biblioteca de WebGL para crear y renderizar gráficos 3D en la web.
React Three Fiber (v8.14.2): Renderizador de React para Three.js basado en Fiber.
Drei (v9.84.2): Colección de helpers para React Three Fiber.
React Three Rapier (v1.1.1): API de Rapier compatible con Three.js para representar físicas en entornos virtuales 2D/3D.
Ready Player Me (v0.1.5): Herramienta de creación de avatares en línea.
Firebase (v10.4.0): Plataforma de Google para el desarrollo de aplicaciones web y móviles.
Socket.io-client (v4.7.2): Framework del lado del cliente para enviar eventos en tiempo real al servidor.
Simple peer (v9.11.1): Librería para desarrollar aplicaciones WebRTC (Web Real-Time Communication), que permite la comunicación en tiempo real (RTC) de contenido de multimedia de audio y video dentro de las páginas web.
Adicionalmente, se utilizaron las siguientes tecnologías para el modelado 3D del edificio de la EISC y animaciones de avatares:
Blender (v3.6.2): Se utilizó la suite de creación 3D gratuita llamada Blender para crear los modelos 3D del metaverso. Esta suite contiene funcionalidades para realizar animaciones 3D, renderizado, edición de videos, composición y simulación. De esta forma, se modeló la estructura del edificio de la EISC (ver Figura 6) incluyendo elementos como muros, vidrios, puertas y rejillas, así como detalles tales como sillas, tableros, computadoras y mesas, con el propósito de lograr una verosimilitud del edificio de la vida real. Cabe resaltar que se emplearon múltiples técnicas de optimización, tales como redimensionar las texturas, comprimir materiales PBR, eliminar caras no visibles para el usuario, y reducir vértices y caras.

En suma, por medio de esta herramienta se modelo también al NPC Alu (ver Figura 7) con su animación de inactivo (Idle), y su tablero donde mostrará la información del tutorial de los pasos a seguir de la navegabilidad del metaverso.

Mixamo: plataforma de servicio en línea gratuita para animar avatares 3D, en el cual se realizaron las animaciones de loa avatares masculinos y femeninos (Figura 8). Para el despliegue del Front End se utilizó Vercel como plataforma en la nube como servicio, de forma que el metaverso puede ser accedido desde el siguiente enlace [28] desde cualquier navegador web compatible con WebGL.
3.2.2. Back End
En el lado del servidor del EISC Metaverse, se emplearon las siguientes tecnologías para facilitar la funcionalidad cliente-servidor a través de WebSockets y la comunicación en tiempo real de contenido multimedia WebRTC.
Socket.io (v4.7.2): biblioteca que establece comunicación WebSockets por medio de un canal de comunicación de bajo costo entre servidor y cliente. Para el despliegue del Back End de los servidores de WebSockets y WebRTC de EISC Metaverse, se utilizó el servicio en la nube de servidores llamado Render. Este permite el acceso al servidor desde el Front End a través de una URL, con el objetivo de establecer comunicación en tiempo real entre los usuarios mediante la arquitectura cliente-servidor.
3.3. Prototipo
EISC Metaverse es un ambiente inmersivo Web 3D, donde los usuarios pueden recorrer el edificio de la Escuela de Ingeniería de Sistemas y Computación de la Universidad del Valle, el cual esta mapeado del mundo real al mundo virtual. El metaverso permite a los usuarios de la Universidad del Valle e invitados crear su avatar para interactuar con otros usuarios en tiempo real y explorar las oficinas administrativas, salones de clases, salas de cómputo, laboratorios de grupos de investigación, salas de profesores, entre otros.
A continuación, se presenta en esta subsección los elementos que conforman el metaverso.
3.3.1. Avatares
Se implementó la funcionalidad en el metaverso para que los usuarios por medio de una foto de ellos o en su defecto por formas genéricas de avatares pudiesen crear su avatar como se ilustra en la Figura 9, para luego ser utilizado en el metaverso.
3.3.2. Avatares
Se modelo el edificio de la EISC con sus proporciones y espacios con el fin de que cuando se explore este espacio virtual la inmersión que se generé sea como si estuviesen caminando en su espacio real.
En el primer piso como se ilustra en la Figura 10a y Figura 10b, comprenden de las oficinas administrativas, auditorios y salones de clases.
En el segundo piso del edificio de la EISC como se ilustra en la Figura 11a, se pueden explorar salones de clase y en la Figura 11b salas de cómputo. Así como también el centro de estudios estudiantil - Cenesis.
En el tercer piso del edificio de la EISC como se ilustra en la Figura 12, comprende de los laboratorios de los grupos de investigación, así como también la sala de comités de profesores de la escuela.
En el cuarto piso del edificio de la EISC como se ilustra en la Figura 13, comprende de oficinas de profesores y salones de posgrados. Así como también la sala de comités de posgrados.
En el quinto piso del edificio de la EISC como se ilustra en la Figura 14, comprende de oficinas de profesores nombrados de la escuela.
3.3.3. NPC Alu
Los usuarios del metaverso expresaron que como valor agregado deseaban tener un guía en el metaverso cuya representación visual tenga relación con el mundo de la computación. Es por este motivo, que se implementó el NPC guía llamado "Alu" (ver Figura 15), cuya representación visual es similar al logotipo de Linux, el cual es reconocido por toda la comunidad académica de la EISC. Su propósito en esta versión beta es enseñar al usuario la navegabilidad del metaverso.
3.3.4. Navegabilidad
Con el propósito de que los usuarios por medio de sus avatares pudiesen explorar sin limitación alguna en el espacio virtual, se implementó la funcionalidad de navegar el metaverso por medio de movimientos de teclado y gestos del ratón en simultaneo, así como se aprecia en el instructivo del metaverso en la Figura 16.
Los movimientos en el espacio virtual son:
Tecla W o flecha arriba: moverse hacia adelante.
Tecla S o flecha abajo: moverse hacia atrás.
Tecla A o flecha izquierda: moverse hacia la izquierda.
Tecla D o flecha derecha: moverse hacia la derecha.
Clic izquierdo presionado: movimiento de cámara.
3.3.5. Interacción
Para llevar a cabo la interacción entre los usuarios del metaverso se implementó el chat de texto y de voz, así como se aprecia en la Figura 17, de forma que cuando dos o más avatares cuando estén conectados en el metaverso puedan chatear o hablar.
3.3.6. Inmersión
La inmersión se refleja en el modelado 3D que se realizó del espacio físico del edificio de la EISC, dado que, su representación sigue una línea gráfica realista como por ejemplo los salones de clase, auditorios, oficinas, además de los detalles interiores (sillas, escritorios, tableros) que están proporcionados y ubicados tal como son en el mundo real. El usuario puede desplazar su avatar subiendo, bajando escaleras e ingresando a espacios como lo haría si estuviera en el espacio real. Adicionalmente, los avatares siguen también un estilo realista brindando al usuario la posibilidad de configurarlos en cualquier momento de acuerdo con su gusto tal como lo haría un usuario cuando va a la universidad presencialmente. Finalmente, se facilita el proceso de comunicación entre los avatares como se realiza en un espacio real, es decir que se pueden comunicar vía voz o por mensaje de texto.
3.4. Prueba de rendimiento
Se realizó la prueba de rendimiento del metaverso (ver Figura 18) utilizando la librería de monitoreo R3F-Perf [29], de modo que el metaverso muestra mantenerse en 50 cuadros por segundo - FPS en un computador gama media con las siguientes características: CPU: Ryzen 5 5500U, Memoria RAM: 12 GB DDR4 3200 Mhz, GPU: AMD Raedon Graphics 7, SSD: M.2 256 GB. Esto asegura que computadores con menos recursos puedan experimentar por lo menos 30 cuadros por segundos -FPS que es aceptable para ambientes Web 3D.
El motor gráfico de este metaverso utiliza el frustum de la cámara para optimizar el proceso de renderizado. Esto significa que solo se renderizan los triángulos de los objetos 3D que están dentro del campo de visión de la cámara, lo cual reduce la carga de procesamiento. Sin embargo, en áreas con una mayor densidad de objetos, como el segundo o tercer piso del edificio de la EISC, la cantidad de triángulos que necesita ser renderizada puede aumentar significativamente. Esta variabilidad puede influir en los cuadros por segundo (FPS), afectando así la fluidez de la experiencia.
Por último, se aprecia que la GPU y CPU hacen el consumo esperado puesto que al ser una experiencia Web 3D el metaverso no entra en un cuello de botella.
4. Discusión
Se evidenció en las entrevistas y en la técnica de "Thinking Aloud" que aquellos usuarios que no tienen relación con tecnologías asociadas a entornos virtuales 3D no pudieron desplazarse adecuadamente para realizar la tarea de reproducir un video alojado en la galería de arte. Esto sirvió como punto de partida para implementar futuras soluciones en la implementación del metaverso desarrollado un instructivo con los controles del metaverso y enseñar al usuario cómo navegar por medio del NPC Alu. Además, para abordar el desarrollo de este prototipo fue de gran ayuda realizar el proceso centrado en el usuario, lo que implicó la investigación de usuarios, la creación de un mapa de afinidad, y el desarrollo de proto-personas. Esto permitió que, al realizar el Product Backlog, se pudieran definir historias de usuarios acordes a las necesidades de los usuarios. Por otro lado, al desarrollar el metaverso en un ambiente Web 3D, se posibilitó que los usuarios, ya sean estudiantes, profesores, administrativos o invitados, puedan acceder sin la necesidad de utilizar hardware especiales. Por último, el uso de React Three Fiber como tecnología principal para el desarrollo del metaverso, ayudo mucho, ya que esta tecnología emergente cuenta con un gran ecosistema en constante evolución, lo que permite a los desarrolladores implementar funcionalidades de manera óptima y con mayor facilidad.
5. Conclusiones
La construcción de metaversos está en sus etapas iniciales, y se han implementado múltiples soluciones y estándares para hacer el metaverso accesible para todos. Este metaverso, construido en la Web 3D con la tecnología de React Three Fiber, puede servir como marco referencial para futuras investigaciones que busquen implementar entornos virtuales 3D, ya sea en la Web 3D, en escritorio, móvil o realidad extendida. Es importante resaltar que el desarrollo de estas aplicaciones debe centrarse en el usuario, ya que al abrir una nueva dimensión de interacciones entre personas virtualmente, es esencial comprender las necesidades de los usuarios, pues se está mapeando el mundo real con el virtual y es indispensable conocer qué desean los usuarios mientras navegan en el mundo virtual. Además, se concluye que no todos los usuarios están familiarizados con estas tecnologías, por lo que es necesario implementar soluciones que faciliten el aprendizaje de la navegación en estos espacios virtuales.
Como trabajo futuro, este prototipo puede mejorarse implementando inteligencia artificial en el NPC Alu para que responda preguntas relacionadas con la Escuela de Ingeniería de Sistemas y Computación, desarrollar sonido biaural que varíe su intensidad en función de la proximidad de un avatar. Por último, implementar un entorno de desarrollo SDK y un Builder para que profesores y administrativos puedan editar sus oficinas, así como permitir que los estudiantes personalicen los grupos de investigación, mostrando elementos 3D que los representen.
Agradecimientos
Los autores expresan agradecimiento a la Universidad del Valle, quien presto sus instalaciones físicas para realizar el prototipo EISC Metaverse.
Referencias
S. Mirjalili, "Dragonfly algorithm: a new metaheuristic optimization technique for solving single-objective, discrete, and multi-objective problems," Neural Comput Appl, vol.27, no.4, pp. 1053-1073, 2016, doi: https://doi.org/10.1007/S00521-015-1920-1
S. Kraus, D.K. Kanbach, P. M. Krysta, M. M. Steinhoff, and N. Tomini, "Facebook and the creation of the metaverse: radical business model innovation or incremental transformation?" International Journal of Entrepreneurial Behavior & Research, vol. 28, no. 9, pp. 52-77, 2022, doi: https://doi.org/10.1108/IJEBR-12-2021-0984
D. P. Barráez-Herrera, "Metaversos en el Contexto de la Educación Virtual," Revista Tecnológica-Educativa Docentes 2.0, vol. 13, no. 1, pp. 11-19, 2022, doi: https://doi.org/10.37843/rted.v13i1.300
D. Lulu, and Z. Zheng, "On the Translation of Metaverse," Terminología científica y tecnológica china, vol. 24, no. 3, p. 49, 2022, doi: https://doi.org/10.12339/j.issn.1673-8578.2022.03.007
H. Duan, J. Li, S. Fan, Z. Lin, X. Wu, W. Cai, "Metaverse for social good: A university campus prototype," in Proceedings of the 29thACM international conference on multimedia, 2021, pp. 153-161, doi: https://doi.org/10.1145/3474085.3479238
B. Zhou, "Building a smart education ecosystem from a metaverse perspective," Mobile Information Systems, vol. 2022, pp. 1 -10, 2022, doi: https://doi.org/10.1155/2022/1938329
F. De Felice, C. De Luca, S. Di Chiara, and A. Petrillo, "Physical and digital worlds: implications and opportunities of the metaverse," Procedia Comput Sci, vol. 217, pp. 1744-1754, 2023, doi: https://doi.org/10.1016/j.procs.2022.12.374
J. Smart et al., "A cross-industry public foresight project," Proc. Metaverse Roadmap Pathways 3DWeb, pp. 1-28, 2007.
S. M. Park and Y.-G. Kim, "A metaverse: Taxonomy, components, applications, and open challenges," IEEE access, vol. 10, pp. 4209- 4251, 2022, doi: https://doi.org/10.1109/ACCESS.2021.3140175
T. Türk, "The concept of metaverse, its future and its relationship with spatial information," Advanced Geomatics, vol. 2, no. 1, pp. 17-22, 2022.
S. Mystakidis, "Metaverse," Encyclopedia, vol. 2, no. 1, pp. 486-497, 2022, doi: https://doi.org/10.3390/encyclopedia2010031
J. P. A. Campos, R. Rieder, "Procedural Content Generation using Artificial Intelligence for Unique Virtual Reality Game Experiences," 2019 Simposio sobre Realidad Virtual y Aumentada (SVR) 2019, Río de Janeiro, Brasil, pp. 147-151, doi: https://doi.org/10.1109/SVR.2019.00037
C. Andrew, Metaverse for Beginners: A Guide to Help You Learn About Metaverse, Virtual Reality and Investing in NFTs. 2022.
J. D. N. Dionisio, W. G. B. Iii, and R. Gilbert, "3D virtual worlds and the metaverse: Current status and future possibilities," ACM Computing Surveys (CSUR), vol. 45, no. 3, pp. 1-38, 2013, doi: https://doi.org/10.1145/2480741.2480751
K. J. L. Nevelsteen, "Virtual world, defined from a technological perspective and applied to video games, mixed reality, and the Metaverse," Comput Animat Virtual Worlds, vol. 29, no. 1, p. e1752, 2018, doi: https://doi.org/10.1002/CAV. 1752
Y. Zhao et al., "Metaverse: Perspectives from graphics, interactions and visualization," Visual Informatics, vol. 6, no. 1, pp. 56-67, 2022, doi: https://doi.org/10.1016/j.visinf.2022.03.002
A. Dudoglo and F. Ritter, Avatar Selection in the Metaverse: How users choose their digital persona in VRChat. 2022.
A. Alvarez-Risco, S. Del-Aguila-Arcentales, M. A. Rosen, and J. A. Yáñez, "Social Cognitive Theory to Assess the Intention to participate in the Facebook Metaverse by citizens in Peru during the COVID-19 pandemic," Journal of Open Innovation: Technology, Market, and Complexity, vol. 8, no. 3, p. 142, 2022, doi: https://doi.org/10.3390/joitmc8030142
G. J. Hwang and S.-Y. Chien, "Definition, roles, and potential research issues of the metaverse in education: An artificial intelligence perspective," Computers and Education: Artificial Intelligence, vol. 3, p. 100082, 2022, doi: https://doi.org/10.1016/j.caeai.2022.100082
E. Dincelli, A. Yayla, "Immersive virtual reality in the age of the Metaverse: A hybridnarrative review based on the technology affordance perspective," The Journal of Strategic Information Systems, vol. 31, no. 2, p. 101717, 2022, doi: https://doi.org/10.1016/j.jsis.2022.101717
D. Jackson, J. Gilbert, "WebGL Specification." Accessed: Nov. 17, 2023. [Online]. Available: https://registry.khronos.org/webgl/specs/latest/1.0/
Y. K. Dwivedi et al., "Metaverse beyond the hype: Multidisciplinary perspectives on emerging challenges, opportunities, and agenda for research, practice and policy," Int J Inf Manage, vol. 66, p. 102542, 2022, doi: https://doi.org/10.1016/j.ijinfomgt.2022.102542
S. Mystakidis, "Metaverse," Encyclopedia, vol. 2, no. 1, pp. 486-497, 2022.
"DomoGallery," [Online]. Available: https://domogallery.vercel.app/
”Mapa de afinidad - EISC Metaverse,". [Online]. Available: https://drive.google.com/drive/folders/1eqclHd8w6TEaa_plbsfV--0jFeXLmmpml?usp=sharing
"Proto-personas - EISC Metaverse," [Online]. Available: https://drive.google.com/drive/folders/1 gSq5JhfYLANPcY3SRwJDT-mJGyN32hd?usp=sharing
"Mixamo," [Online]. Available: https://www.mixamo.com/
"EISC Metaverse," [Online]. Available: https://eiscmetaverse.vercel.app/
"r3f-perf - npm," [Online]. Available: https://www.npmjs.com/package/r3f-perf
Como citar:
Financiación
Contribución de los autores
Declaración de la Junta de Revisión Institucional
Declaración de consentimiento informado
Author notes
a Correos electrónicos: fabian.cordoba@correounivalle.edu.cobpaola.rodriguez@correounivalle.edu.cocjavier.reyes@con-eounivalle.edu.co
Conflict of interest declaration