En este codelab, aprenderás a crear una galería virtual inspirada en el Vivero Virtual utilizando Spatial. A lo largo de este ejercicio, importarás elementos como imágenes 2D, objetos 3D, texturas y un skybox (imagen 360°). El resultado final será un escenario interactivo en el que los usuarios podrán explorar tu galería. Aunque trabajaremos con varios elementos, deberás seleccionar al menos uno de ellos para personalizar, pero puedes experimentar con todos si lo deseas.

En tutoriales anteriores aprendiste cómo instalar las herramientas base para crear metaversos en esta plataforma, estas se listan a continuación:
  1. En primer lugar abriremos nuestro proyecto base en el Unity Hub. Este traerá por defecto una plantilla que nos permitirá trabajar para desarrollar un metaverso en Spatial.

Desde el Unity Hub ve a la ventana "Projects" y da Click en el botón "Add" para abrir el proyecto.

Este debe estar en el administrador de archivos en la ventana de descargas.

Para abrir el proyecto debes abrir la carpeta con el mismo nombre dentro de la carpeta spatial-unity-starter-template-main. Es importante seleccionar la carpeta interior para evitar fallas con la lectura del proyecto.

  1. Advertencia: Es posible que aparezca la siguiente advertencia. En este caso debes seleccionar la versión de Unity correcta: 2021.3.21f1

  1. Nota: Una vez abra el proyecto. Es posible que veas un cuadro de diálogo de actualización. Haz clic en "sí" para actualizar a la última versión del SDK de Unity Spatial.

  1. En caso de que aparezca este anuncio, oprime el botón "Skip new version" para no actualizar la versión de Unity. Para el propósito de este tutorial no es necesario. Sin embargo, puedes comprobar las versiones compatibles de Unity con el SDK de Spatial en esta pagina

Como lo hemos visto antes, para desarrollar un metaverso en Spatial necesitaremos de una aplicación denominada Unity Editor, es la aplicación principal de desarrollo de Unity, donde se crean y editan los proyectos. Es la interfaz de usuario en la que se trabaja directamente en el diseño.

Además de esto, en los pasos anteriores estuvimos trabajando con el Unity Hub, el cual es una aplicación de gestión que permite a los usuarios organizar múltiples versiones de Unity Editor en su sistema, administrar proyectos y acceder a servicios y recursos relacionados con Unity, como tutoriales y documentación. Unity Hub actúa como un administrador de versiones y proporciona un punto de entrada centralizado para administrar el flujo de trabajo de desarrollo con Unity Editor.

  1. Luego de un tiempo de carga, podrás ver la ventana de edición de Unity. En ella se pueden distinguir las siguientes áreas (aunque esta distribución se puede cambiar):

1. Hierarchy

2. Scene y Game

3. Inspector

4. Project

5. Console

  1. Ahora vamos a abrir la escena que vamos a usar. Para esto: Abre la escena "Environment.unity". Esta está en la ventana de Project en: "Assets / Examples / Space_Spatialisland / Scenes / Environment.unity"

Una vez abierta nuestra escena debería verse de la siguiente manera:

  1. Ahora aprenderemos a usar los controles de navegación:

Puedes utilizar las flechas del teclado para moverte por la escena como si estuvieras "caminando" a través de ella. Las flechas hacia arriba y hacia abajo mueven la cámara hacia adelante y hacia atrás. Las flechas izquierda y derecha desplazan la vista hacia los lados. Mantén presionada la tecla Shift para moverte más rápido.

Mover: para moverte sobre la escena puedes hacer clic derecho y arrastrar el mouse.

Órbita: Mantén presionada la tecla Alt, haz clic izquierdo y arrastra para rotar la cámara alrededor del punto de pivote actual. Esta opción no está disponible en modo 2D.

  1. Una vez sabemos como movernos en nuestra escena aprenderemos a editar nuestros modelos presentes en esta.

Mover objeto: Para mover un objeto tienes que seleccionar la "move tool" y seleccionar el objeto que deseas mover. De esta forma aparecerán unas flechas sobre el objeto. Arrastrando estas flechas puedes poner el objeto en el lugar que desees.

Rotar objeto: Selecciona la herramienta de rotación "rotate tool" y arrastra las órbitas en el eje en el que desees rotar el objeto.

Reescalar objeto: Selecciona la herramienta de reescalar "Scale Tool" y arrastra los cuadrados para obtener el tamaño deseado

Las transformaciones anteriores también se pueden realizar desde la ventana "Inspector". Para esto también debes tener seleccionado el objeto a transformar, puedes realizar cambios más precisos alterando las medidas directamente.
  1. Crea una carpeta nueva para almacenar todos los recursos de tu escena:

Para esto haz click derecho sobre "Assets" en la ventana "Project". Se abrirá una ventana, da click a "Create / Folder".

Puedes ponerle el nombre que desees. En este caso puedes llamarla "Mi_escena"

  1. Crea una nueva escena dentro de la carpeta que acabas de crear. Esto se hace dando click derecho dentro de la carpeta y oprimiendo "Create / Scene"

  1. Abre la nueva escena dando doble click sobre esta.

Antes de que se abra la escena es probable que aparezca una ventana preguntando si deseas guardar los cambios sobre la escena anterior, en este caso no es necesario guardarlos.

  1. La nueva escena tendrá únicamente dos elementos:

Elimina el elemento de Main Camera (Dando click derecho sobre él y escogiendo la opción Delete), ya que no es necesario y podría ocasionar errores.

Para poder testear y publicar la escena con Spatial debes agregar 3 elementos principales:

En los siguientes pasos se explicará con más detalle.

  1. Crea un plano haciendo click derecho sobre la jerarquía del proyecto: "3D Object / Plane". Reescala el plano aumentando las medidas de X y Z. Esto se puede tanto usando la herramienta de reescalamiento o la ventana del inspector

  1. Es importante comprobar que el plano cuente con Mesh Collider, ya que este componente le agrega colisión al modelo. Para que no solo sea visible, sino que no se pueda atravesar ni por el avatar ni por otros elementos que también cuenten con colisión.

  1. Entrance Point: El punto donde aparecerá el avatar.

Para crear el punto de entrada debes hacer click derecho sobre la ventana de "Hierarchy". Aquí debes dar clic en "Spatial / Entrance Point".

Luego puedes acomodar el punto de entrada donde desees utilizando la herramienta de movimiento "Move tool" o haciéndolo directamente en el inspector.

Es importante que el punto de acceso quede encima del plano, para que, de esta forma, el avatar pueda aparecer en ese punto y no caer.

  1. Ahora vamos con la Thumbnail Camera, esta será la miniatura que se verá al publicar el mundo en Spatial.

Para crear la miniatura debes hacer click derecho sobre la ventana de "Hierarchy", y aquí dar clic en "Spatial / Thumbnail Camera".

Puedes acomodarlo de la misma forma que el Entrance Point.

  1. Para poder probar la escena en la web en el Sandbox de Spatial debes Crear e iniciar sesión.

Da clic a la tuerca para modificar la configuración. Ahí dale clic a "Get login Token" para obtener el Token de acceso.

Esto abrirá una ventana en tu navegador, donde deberás iniciar sesión con tu cuenta previamente creada.

  1. Luego de abrir tu cuenta (o crear una en caso de no tener una) debes copiar el "Access Token" dandole clic al botón de "Copy to Clipboard".

A continuación pega este token de acceso, dándole clic al botón "Paste Login Token" en Unity.

Si se inició correctamente la sesión debería verse la ventana de la siguiente forma:

  1. Para poder testear la escena debes ir a la ventana de configuración de Spatial, haz clic en la tuerca y luego en el tab de "Config".

Luego, allí debes elegir tu escena en la ventana de "Active Package / Scene". La escena que aparezca en esta configuración es la que aparecerá en la Sandbox (el lugar donde puedes probar tu metaverso). Aún NO debes dar click en publicar.

Para probar la escena haz clic en Test Active Scene

  1. Si todo sale bien, se debería abrir una ventana en el navegador mostrando la escena actual. Puedes moverte utilizando las flechas del teclado, y mover la vista con click izquierdo y arrastrando en la dirección a rotar.

Recuerda cerrar la ventana del navegador entre pruebas para evitar errores de carga, puesto que cada vez que des click en se abrirá una nueva ventana

La temática de nuestro metaverso será una galería inspirada en el Vivero Virtual. Para construir esta galería, primero estableceremos una estructura principal que servirá como base para organizar y presentar el contenido. Esta estructura inicial será un modelo 3D que funcionará como el marco de la galería, brindando el espacio adecuado para exhibir los diferentes elementos. A partir de esta base, podremos agregar otros modelos 3D que aporten detalles específicos, incorporar imágenes y texturas relevantes, y realizar modificaciones que personalizan el espacio de acuerdo a la temática.

  1. Para esto descargaremos el modelo base desde este link: https://drive.google.com/file/d/1tRp1jTklzgv1OeEerERCyyENjPOczMku/view?usp=sharing

Al ingresar al link se nos abrirá una página desde la cual podremos descargar nuestro modelo base. Para esto daremos click en el botón que dice Descargar:

  1. Una vez hayamos descargado nuestro modelo base procederemos a importarlo en nuestro proyecto.

Para esto iremos dentro de la carpeta de mi escena "Mi_escena", y crearemos otra carpeta donde guardaremos todos los modelos que importemos. Esto es para tener los recursos de la forma más organizada posible.

Para ello, crearemos la carpeta "Models" dentro de la carpeta "Mi escena":

  1. Importa el modelo a Unity Editor arrastrando el modelo .fbx desde el administrador de archivos hasta la ventana de "Project" dentro de la carpeta "Models".

  1. Finalmente, importa el modelo en la escena. Esto se puede hacer arrastrando el objeto desde la ventana "Project" hasta la de "Hierarchy" o "Scene"

Con la ayuda de los controles revisados en la sección anterior puedes trasladar, girar y re escalar el modelo de la forma en que queramos.

Preferiblemente, realiza pruebas con "Test active scene" durante el proceso de edición para así poder resolver diferencias de escala o errores generales de forma temprana.

Para agregar modelos 3D y comenzar a personalizar tu escena, puedes dirigirte a la Asset Store de Unity o a Sketchfab. A continuación, te mostraremos cómo importar modelos desde estos dos lugares.

Descargar Modelos de Sketchfab

Descarga los modelos en sketchfab ingresando en el siguiente link https://sketchfab.com/ Aquí deberás crear una cuenta e iniciar sesión para poder buscar modelos:

Una vez iniciada sesión, puedes buscar el modelo que más se adecue a tu espacio.

Para este ejemplo, vamos a descargar un objeto de decoración para nuestro espacio. Para ello, debes dirigirte a la barra de búsqueda, y escribir el nombre del objeto de interés.

Para buscar únicamente modelos que se puedan descargar de forma gratuita, selecciona la opción de Downloadable y filtra por los modelos cuyas licencias sean de uso público, como las que se muestran en la imagen.

Para descargar el modelo haz click en la esquina superior derecha, en el botón de descargar:

Para poder importarlos en Unity es necesario que tengan un formato compatible. Por lo que debes buscar modelos con formato .fbx

¡Ahora tu modelo está listo para importarlo a Unity!

Descargar Modelos de Unity Asset Store

También puedes descargar modelos de la tienda de Unity. Para ello, dirígete en Unity a Window -> Asset Store.

Allí, se abrirá la siguiente ventana, da click en Search Online.

También puedes buscar directamente Unity Asset Store en tu navegador https://assetstore.unity.com/ Allí debes iniciar sesión y estás listo para comenzar a buscar los modelos que mejor se adecuen a tu experiencia.

Una vez hayas buscado algún item puedes dar click en el filtro Price, para filtrar por precio.

Una vez hayas seleccionado el modelo, das click para abrirlo y selecciona Add to my Assets.

Aceptas los términos y condiciones y ya tienes el paquete de assets en tu cuenta.

Ahora, debes ir a Unity, seleccionar Window -> Package Manager y seleccionar My assets.

Allí, encontrarás el paquete de assets que descargaste, lo seleccionas y das click en Download.

Una vez descargado, da click en Import para poder agregarlo en tu proyecto.

Agregar Modelos al proyecto de Unity

Bien sea que descargaste modelos de Sckeycfab o de Unity Asset Store es hora de integrarlos con tu proyecto. Para ello ve a la ventana project de Unity, en Assets debes encontrar la carpeta con tu modelo si lo descargaste de la Asset Store de Unity. En caso de que hayas descargado el modelo de Scketchfab u otra plataforma, debes agregarlo a tu proyecto de Unity.

Nota: Si vas a importar un modelo descargado de sketchfab te recomendamos importar la carpeta completa para que así también se descarguen las texturas

Finalmente, importa el modelo en la escena. Esto se puede hacer arrastrando el objeto desde la ventana "Project" hasta la de "Hierarchy" o "Scene"

Ahora, puedes ajustarlo para acomodarlo en tu escena.

¡Ya puedes personalizar tu escena en Unity!

Un "skybox" es una técnica utilizada en gráficos 3D y videojuegos para simular el fondo o el entorno lejano que rodea una escena tridimensional. Consiste en mapear una textura o imagen en 6 lados de un cubo virtual que rodea la escena, creando la ilusión de un paisaje lejano o cielo realista.

  1. Descarga la siguiente imagen 360 desde el siguiente link: https://drive.google.com/file/d/1L9C0pGtr4sCNR9obJ0qlQHWSpvOPTm0_/view?usp=sharing


Nota: Si quieres puedes usar otra imagen 360 descargada de sitios como Flickr siguiendo estas instrucciones

  1. Importa la imagen 360 arrastrándola desde el "editor de archivos" a la ventana de "Project" de la carpeta de tu escena.

  1. Al hacer click sobre la imagen en el editor de Unity, aparecerá una ventana en el inspector donde debes hacer los siguientes cambios:

Al finalizar, te aparecerá una ventana preguntándote si deseas aplicar los cambios realizados. Responde que sí deseas aplicarlos "Apply"

  1. Para poder posicionar el Skybox es necesario que sea un material. Para esto crea un nuevo material tipo Skybox de la siguiente forma:

Haz clic derecho sobre la ventana de Project dando clic a "Create / Material". En la ventana del Inspector escoge como Shader "Skybox / Cubemap".

Luego escoge la imagen que importaste previamente como Cubemap

  1. Finalmente. Para posicionar el Skybox en la escena arrastra el material al fondo de la escena.

  1. Para ver cómo quedó tu escena puedes ir Test active scene en la parte superior y comprobar tus cambios.
  1. Para agregar imágenes crea un plano y luego le agrega la imagen como textura. Para crear el plano, haz clic derecho en la ventana de Hierarchy "3D Object / Plane".

  1. Luego puedes cambiar la orientación del plano para ajustarlo a tus preferencias

  1. Para poner la textura importa la imagen y luego arrastrarla a la imagen.

4. Es importante verificar que nuestro Shader esté en "Universal Render Pipeline/2D/Sprite-Until-default"

5. Finalmente cambia el nombre de la imagen por un nombre más representativo

6. Recuerda ajustar tu plano al lugar donde lo quieres poner en tu escena.

¡Felicidades! Has completado el codelab para crear una galería del Vivero Virtual en Spatial. A lo largo de este tutorial, configuraste un entorno en Unity, importaste modelos 3D, imágenes y aplicaste un skybox 360° . Estos pasos te brindan una base sólida para seguir personalizando y optimizando tus metaversos en Spatial.