Polygonal Mind
  • Home
  • SERVICES
  • Projects
  • Decentraland
  • Blog
  • Assets
  • / CryptoAvatars

Blog

Creamos un Sistema de Transporte Virtual para Decentraland

4/6/2020

0 Comments

 
English
Premisa

El 20 de febrero Decentraland fue abierta al público. Para aquellos que no lo sepan, Decentraland es un mundo virtual que se apoya en el blockchain de Ethereum donde su comunidad define la utilidad y la estética de sus parcelas, creando una relación innovadora y dinámica entre propietarios y visitantes. Bajo esta premisa, el único límite es la imaginación.
​
Tuvimos la oportunidad de formar parte del desarrollo del contenido de varias parcelas antes del lanzamiento, desde aventuras laberínticas y arte experimental sonora hasta galerías de arte, jardines e incluso un sistema de transporte. Darle forma al futuro del transporte virtual, hoy os enseñamos como creamos el Trail Transit System en el sur de Decentraland de inicio a fin, el día anterior al lanzamiento.
Picture
El Objetivo

Decentraland apunta alto con su concepto innovador y donde destacan las creaciones que los usuarios crean, poseen y controlan sus diseños desde el blockchain. Este paso a paso del proyecto puede ayudar a diseñadores, usuarios y compañeros de Decentraland a entender el proceso creativo o incluso servir de introducción a nuevos creadores de contenido.
Recursos

  • MayaLT
  • Substance Painter
  • Photoshop
  • Unity 2018.3.6f1
  • Decentraland SDK
Transporte virtual Decentraland
Transporte virtual Decentraland
Transporte virtual Decentraland
Antes de empezar

Para este workflow, en Polygonal Mind hemos usado un plugin para Unity que puedes encontrar en GitHub [https://github.com/fairwood/DecentralandUnityPlugin/]. Este plugin nos ha permitido trabajar de forma nativa en Unity, componer y crear los escenarios sin tocar demasiado código. Es importante recalcar que no hemos usado exactamente la misma versión que puedes descargar en el link de arriba, el plugin ha sido modificado para sacarle todo el partido en nuestro caso particular y para nuestras necesidades, mejorando su rendimiento y dejándolo listo para el motor gráfico de DCL.
Transporte virtual Decentraland Unity
Vista del proyecto dentro del Editor de Unity.
Cada proyecto requiere un acercamiento distinto y una pipeline de producción diferente, es por eso que el plugin fue modificado conforme nos fuimos encontrando con distintos desafíos y problemas técnicos, principalmente relacionados con el rendimiento una vez deployeados en Decentraland.
#00 - Conceptos básicos de un sistema de transporte

La idea inicial era crear un sistema de transporte moderno que encajase en una serie de parcelas de Decentraland que tuviera paradas interesantes entre el inicio y el final.
Cuando empezamos dando los primeros pasos Daniel y yo nos encontramos con algunos desafíos interesantes.
  • ¿Cómo iba a parar el tren?
  • ¿Cómo van a subir los usuarios al andén?
  • ¿Debe darse la vuelta el tren para volver al principio?
Los primeros bocetos contemplaban tener dos niveles de altura para crear conexiones entre parcelas.
Dibujo Transporte virtual Decentraland
Dibujo Transporte virtual Decentraland
Tan pronto como empezamos a definir sobre papel todo el trabajo que teníamos que hacer decidimos inclinarnos por hacer que todo el entorno fuera una estructura megalítica con un ascensor al que se podía acceder desde el suelo. El problema del tren girando a la hora de volver fue solucionado teniendo dos vagones yendo en direcciones opuestas para evitar tener que esperar demasiado tiempo a un tren. Esto creaba un problema visual y de diseño: necesitábamos 4 plataformas por nivel y estos niveles debían estar conectados, para que el usuario pudiera subir libremente por toda la estructura.
Dibujo Transporte virtual Decentraland
Hice una mood board visual y la propuse para basar todo el aspecto visual para poder empezar con los primeros diseños. Para el estilo artístico me inspiré mucho en los entornos y diseño artístico de Bioshock, y en el sistema de transporte de Fallout 4. Ambos juegos tienen una influencia muy grande en el retrofuturismo, pero apoyándose en distintos estilos artísticos. Bioshock* tiene unos preciosos entornos, muy influenciados por el art-deco, mezclados con entornos monumentalisticos de hierro forjado. Respecto a Fallout 4**, tiene un mundo muy bien construido basado en un futurismo desde los ojos de la gente en los 50 y los 60, lleno de detalles.
Referencia Transporte virtual Decentraland
Esto se convirtió en la principal referencia e inspiración para la forma, paleta de color y su funcionalidad como tren.
Referencia Transporte virtual Decentraland
Otro concept interesante, la forma nos gustaba mucho.
Referencia Transporte virtual Decentraland
Una de las posibles formas de sujetar el tren.
Referencia Transporte virtual Decentraland
Concepto de una vía de tren doble.
Bioshock captura Referencia Transporte virtual Decentraland
Bioshock captura Referencia Transporte virtual Decentraland
Bioshock captura Referencia Transporte virtual Decentraland
Bioshock captura Referencia Transporte virtual Decentraland
Bioshock hace un uso magistral del canal metálico en sus entornos y esto fue algo decisivo como inspiración para mí cuando decidimos tomar nuestra propia aproximación al entorno art-deco.
Una vez los límites del arte fueron establecidos, pudimos empezar a trabajar. Vamos a hacer el desglose de cómo se crearon los assets, empezando por la primera versión del tren, el que va encima del rail; seguido del disñeo de la estación y su integración con su entorno. Y por último pero no menos importante enseñaremos la iteración con el segundo tren, el situado bajo el rail.
*Bioshock, desarrollado por 2K Boston / Irrational Games y publicado por Take Two.
**Fallout 4, desaroolado por Bethesda Game Studios y publicado por Bethesda Softworks.
#01 El tren: dándole forma al vagón virtual

Para un terreno de 55 parcelas the Scene Limitations were pretty high for a environment that was basically a train system so we decided to go for a high-polygon mesh level of detail instead of a more blocky low-res shape resolution. The limits were a maximum of 550k tris, 116 materials and 58 textures (512 square max) to be implemented along the scene.
​
El diseño resultante que salió basado en una sola imagen encajaba perfectamente en la idea que llevábamos para el "feeling" del entorno, pero nos salió el tiro por la culata durnate el desarrollo por ser una imagen dibujada a mano, sin referencia real y con perspectiva forzada de una vista del futuro durante los años 50.
Referencia Transporte virtual Decentraland
La referencia principal.
Transporte virtual Decentraland
Transporte virtual Decentraland
Una de las primeras iteraciones, la ventana era un poco más grande y la rueda tenía un agujero bastante más grande.
Así como el diseño iba avanzando, los problemas empezaron a manifestarse en la zona de la rueda (porque deformaba la estructura principal) y cómo el tren se iba a mover en el raíl. Esto llevó a cambiar el diseño, favoreciendo una cubierta para la rueda más gande y más suavizada, y un raíl también más ancho que se adaptaba a una rueda nueva, también más ancha.
Transporte virtual Decentraland
Transporte virtual Decentraland
Si vamos al interior, se puede observar que el diseño del vagón está basado en concepts de los años 50 y el uso del contraste entre madera y hierro. Lo más complicado fue darle "controles" al tren, lo que queire decir que hacía falta incluir un pane lde mandos o algo similar, con palancas y botones.
Transporte virtual Decentraland
Transporte virtual Decentraland
Transporte virtual Decentraland
El diseño de materiales consiste en utilizar principalmente dos materiales, uno para el exterior y otro para los props del interior, y uno extra para el emisivo que tenía el panel de control. De nuevo la falta de contenido dado que las parcelas iban a funcionar como un sistema de transporte significaba que podíamos dedicarle más mimo, detalle y recursos, con el límite de las texturas de 512x512 px.
Tras unas cuantas iteraciones teníamos nuestro primer modelo del tren viajando por el rail y listo para hacer las primeras pruebas.
#02 La estación: un balance entre composición y utilidad

Como hemos dicho antes, la estación tenía que tener dos niveles de plataformas: una a 16 metros con conexiones a ambos lados de la parcela y otra a la altura de 32 metros. Todas las plataformas tenían que estar conectadas de uan forma u otra para ser jugable para los jugadores y debía ser sencillo girar hacia el lado contrario en caso de que te hubieras pasado una parada, como en un sistema de metro real. Además, desde un punto de vista artístico, la idea era evitar en la medidad de lo posible el uso de escaleras o caminos largos para poder encajarlo con la visión más mecánica y futurista de lo que un transporte debería ser que teníamos. Tomando los entornos de Bioshock y concept art como ejemplo en materiales y composición, empecé a hacer los primeros esbozos de la forma que tendría la estación.
Empecé a definir el diseño del ascensor, basado en cómo Bioshock hace uso del art-deco mezclado con steampunk para sus ascensores. Decidí seguir un diseño similar desde 0 hasta el look final del modelo. El diseño terminó siendo de concepto abierto y sin apredes, para evitar la claustrofobia y que sirviera como un punto de referencia en detalle de modelo y material.
Bioshock Transporte virtual Decentraland
Pantallazo durante el gameplay. Bioshock (2006) es un juego desarrollado por 2K Boston y publicado por Take Two.
Ascensor Transporte virtual Decentraland
Ascensor Transporte virtual Decentraland
Version 1.0 del material
Ni dioses ni reyes, solo eth
El texto original antes de transpasarlo al normal map.
Desde el principio quise hacer un sistema de apertura y cierre mecánico para el asvensor así que empecé a planificar cómo iba a ser la animación. Tuve que tener en cuenta dónde tenían que estar los pivotes y como tenía que ser la jerarquía para que la animación se realice correctamente.
Gif Ascensor Transporte virtual Decentraland
Una vez el ascensor estaba terminado y situado en su posición final, se colocó la carcasa alrededor para permitir el acceso al ascensor. Los andenes empezaban a tomar forma.
Empezamos el desarrollo de los andenes con idea de cómo iban a funcionar desde un punto de vista jugable, así que era crucial diseñar cómo la estación iba a ser jugada y experienciada por el jugador primero. Así que hice un level design o graybox definiendo los límites jugables y anticipando la parte visual que vendría después y todos los problemas que podrían venir después, y así es como encontramos y lidiamos con los problemas de conexión que había entre el suelo y el andén de 16 metros, así como otros problemas que complicaban la integración visual de todo el set.
Transporte virtual Decentraland
Uno de los problemas originales que teníamos era el gran agujero entre la entrada y los andenes superiores e inferiores con el problema añadido de la estrechez de la parcela.
Transporte virtual Decentraland
Transporte virtual Decentraland
Transporte virtual Decentraland
Cómo la conexión entre el ascensor y el andén fueron conceptualizados.
Transporte virtual Decentraland
Transporte virtual Decentraland
El primer modelo de la carcasa exterior antes de "mezclarla" con la superior.
Transporte virtual Decentraland
El primer block out fue terminado, usamos el modelo del avatar para tener referencia del tamaño. Aunque también tuvimos que tener en cuenta el Campo de Visión de la cámara como otro límitante extra. El segundo tren todavía estaba en la lista de "por hacer" y por ello no teníamos ni idea de la escala real. Así que cogí el del rail superior y lo puse debajo, como un block out.
Siguiendo la idea original, el concepto era subir al usuario del andén de 16 metros al de 32 con un ascensor situado encima del andén superior. Esto nos hizo darnos cuenta de todos los problemas de integración visual y de gameplay y decidimos descartarlo rápidamente porque sobrecargaba la escena de polígonos. En su lugar, encontramos la solución en una plataforma entre los dos andenes principales.
Transporte virtual Decentraland
Aquí podemos ver la conexión entre ambos andenes antes de poner las carcasas.
Transporte virtual Decentraland
La idea era crear una composición dinámica con conexiones que no parecieran de construcción barata.
Transporte virtual Decentraland
Una vez ambas carcasas estaban situadas, el diseño se modificó a una forma que recueda a un 8.
Transporte virtual Decentraland
Un pequeño descansillo al lado de la parada del tren en el andén.
Con los últimos retoques era hora de pintar y diseñar sus materiales. Me decidí por usar texturas tileables seamless para los objetos más grandes, porque me daría más control de los detalles. Para los andenes y el ascensor, hice sus UVs y lo empaqueté en un atlas, maximizando el control sobre el detalle y mejorando los resultados del apartado gráfico. También nos aprovechamos del canal de metalness/smoothness para que el entorno brillase de forma natural.
Textura exterior Transporte virtual Decentraland
Transporte virtual Decentraland
Transporte virtual Decentraland
Transporte virtual Decentraland
Transporte virtual Decentraland
Transporte virtual Decentraland
Transporte virtual Decentraland
Gif exterior Transporte virtual Decentraland
Los normal maps ayudan un montón a darle un detalle muy definido a una estructura muy grande.
#03 El segundo tren: Reinventando el mismo concepto

Cuando las estaciones estaban colocadas y funcionando, era hora de incorporar un segundo tren al rail. Este diseño estaba planeado para estar colgado del mismo rail que el vagón original pero con modificaciones claramente aparentes.
La principal limitación para remodelar el exterior fue mantener las UVs para no tener que rehacer el texturizado, porque ambos trenes usan los mismos materiales.
Referencia Transporte virtual Decentraland
La principal inspiración para la forma del tren
Referencia Transporte virtual Decentraland
Este dibujo ayudó a escoger la forma que tendría la variación del raíl inferior.
Transporte virtual Decentraland
Transporte virtual Decentraland
Transporte virtual Decentraland
Como la rueda penetraba abruptamente dentro den tren, una cubierta era necesaria para ocultarla.
Transporte virtual Decentraland
Transporte virtual Decentraland
Transporte virtual Decentraland
The malla adicional que se utilizó para ocultar la rueda.
Transporte virtual Decentraland
El diseño final antes de aplicarle el material
Transporte virtual Decentraland
El modelo final en el editor de Unity.
#04 Límites en los materiales y optimización de assets

Los trenes estaban acabados y colocados en su sitio, las estaciones estaban en su posición final y los primeros tests daban buenos resultados, porque para este proyecto decidimos usar una aproximación por prefabs, y A. Picazo, nuestro programador, sugirió e implementó algunas modificaciones al plugin para reconocer las mismas meshes e instanciarlos en lugar de exportar cada uno de ellos individualmente como GLTFs diferentes.
Totalidad de Transporte virtual Decentraland
Utilizamos un único modelo de roca y lo reusamos constantemente cambiando la rotación y la escala para hacerlo parecer único. Lo mismo para las estaciones, pues el GLTF de la estación sólo carga una vez y se copia en runtime 3 veces.
El rendimiento en general mejoró muchísimo y era hora entonces de recortar un poco en el campo de las texturas, no porque realmente fuera necesario, sino porque siempre es buena idea revisitar el trabajo realizado y mejorar o borrar archivos irrelevantes.
Conforme fui adentrándome más en la relación entre uso de textura y resultado final concluí que el Normal map no era realmente necesario para darle el look que buscábamos. Es porque el ambient light de Decentraland MATA este tipo de microdetalle y la luz direccional no ayuda realmente en estas situaciones. Así que los normal maps fueron eliminados de todos los materiales que no necesitasen simular información de bump.
Suelo Transporte virtual Decentraland
Los normal maps de microdetalles como el suelo y la suciedad fueron eliminados porque cualquier impacto que tuvieran era dejado al mínimo por el ambient light
I must say, that one thing that really helped the graphical level we accomplished in this scene was the use of the metallic/smoothness channel, as it meant a discrete type of shinning without being visually invasive as it is the glow channel.
Transporte virtual Decentraland
Transporte virtual Decentraland
Como se puede apreciar, el canal de Smoothness le da al normal map un tono perfecto.
Packing ORM de Texturas y Decentraland
Decentraland recomienda la optimización de texturas usando texutras RGB empaquetadas como ORM (Occlusion, Roughness, Metalness). Es una buena idea cuando trabajas con un workflow PBR pero para este proyecto evitamos usar Ambient Occlusion y en cambio lo bakeamos en el albedo, con un modo de fusión Multiplicar.
Más info de este tipo de texturas se puede encontrar en la documentación de Khronos Group:
https://www.khronos.org/blog/art-pipeline-for-gltf
Creando Colliders
Los colliders en Decentraland se crean superponiendo una malla en el modelo que quieras que tenga colisión y añadiéndole el sufijo "_collider" (en minúscula, MUY IMPORTANTE) al nombre de la mesh que quieras usar de collider. Es importante no tener el mismo nombre dos veces en la misma jerarquía o que el padre e hijo con el mismo nombre haría que el GLTF export crashee. La jerarquía y las convenciones de nombramiento (naming conventions) son muy importantes.
​
En cuanto a rendimiento se refiere, recomiendo usar una versión low-res de la malla cuando se cree el collider porque Decentraland crea Mesh Colliders basados en la malla con el sufijo que comento antes. Si eres familiar con Unity, sabrás que los Mesh Colliders no son lo más adecuado para escenas complejas y lo mejor es evitar colliders con formas muy complejas e intentar hacer sus boundaries.
Transporte virtual Decentraland
Base mesh
Transporte virtual Decentraland
Collider para que las boundaries de la mesh original no se compliquen demasiado.
Problemas básicos al usar el wokflow de Unity
Decentraland corre en una versión modificada del motor de Unity con modificaciones centradas en sus actuales y futuras características de la plataforma. Esto es algo bueno porque puedes ver cómo está quedando tu proyecto en tiempo real dentro de Unity, y lo parecido que quedará una vez deployeado. Aunque hay diferencias visuales significativas por el Ambient Light y Directional Light dentro de Decentraland.

A pesar de la mejora de eficiencia, hacerlo significa que trabajar con el editor de Unity haya dos limitaciones a tener en cuenta.

La mayor parte de los componentes no se exportarán por el formato GLTF y por ello no se verán tras el deploy: sistemas de partículas, luces, cámaras, componentes 2d, colliders y vfx no funcionarán. Los GTLFs solo te dejan tener los mesh renderer, materiales y un Animator con funcionalidad limitada.
A tener en cuenta es que el eje X en Unity está flippeado y puede dar lugar a colocar cosas fuera de lugar, porque DCL n otiene el eje invertido.
X = -X

Además, el exporter no se lleva bien con escenas muy grandes y puede hacer que el editor se ralentice. Lo recomendable con escenas grandes es tener plugin de DCL escondido mientras se edita y abrirlo para evaluar las entidades y tener en mente si te estás saliendo de los límites de la parcela.
#05 Fondos

Tan pronto como las estaciones principales estuvieron colocadas en su sitio y el transporte era funcional, era hora de desarollar los alrededores del suelo. Me decidí por algo casi desértico, sin plantas, porque quería evitar a toda costa pasarme con los polígonos y quería mejorar el detalle de la experiencia del tren, y no empeorarla.
Exterior Transporte virtual Decentraland
Exterior Transporte virtual Decentraland
Exterior Transporte virtual Decentraland
Esto fue lo que decidimos hacer, el entorno rocoso fue detallado con algunas áreas de descanso y tuberías decorando los caminos. Las áreas de descanso reusan las texturas de los props de la estación. Se crearon 3 materiales más para la suciedad, las rocas y las estructuras de cristal.
#06 Arreglos finales

Durante la parte final del desarrollo y con el lanzamiento de Decentraland a la vuelta de la esquina, KnownOrigin decidió ser el anfitrión del art que se expondría en las estructuras para ser visto por el público. Un numero limitado de piezas fueron seleccionadas para ponerlas a lo largo del rail, permitiendo que fueran vistas mientras se viaja en el tren de una estación a otra y mientras se espera al tren.
Ascensor Transporte virtual Decentraland
Ascensor Transporte virtual Decentraland
Ascensor Transporte virtual Decentraland
La misma base ha sido usada en las areas de descanso que de base para el ascensor en la parte inferior de las parecelas.
NFT crypto arte Transporte virtual Decentraland
NFT crypto arte Transporte virtual Decentraland
Dos ejemplos de cryptoarte NFT de Known Origin colocados en la estación. Los usuarios pueden contemplar el cryptoarte mientras esperan al tren.
#07 Conclusión

Este entorno fue un desafío enorme para el equipo, porque necesitábamos desarollar un sistema personalizado para que le tren se moviera y se parara en todas las paradas. Todas mis fleicitaciones a A. Picazo por conseguir que quede así de bonito. Para mí, que fui quien estuvo a cargo de todo el entorno, significó mucho porque pude darle vida a un diseño genial basado en dos juegos y un estilo artístico que me encantan.
​
Además hubo bajas limitaciones en cuanto al apartado gráfico porque acabamos reusando muchos assets, eso sí, sin hacer la composición aburrida o repetitiva. Esto me dio la libertad de mejorar la apareciencia añadiendo geometría y acercándome a un diseño de materiales realistas, dándole un toque extra de detalles a una plataforma en la que reina el flat-shading y el low-poly en los entornos como es Decentraland.

Picture
Kourtin
ARTISTA DE ENTORNOS
I purr when you're not looking. I'm passionate about environments and all the techie stuff to make them look rad. Learning and improving everyday to be a better hooman.
Twitter
0 Comments



Leave a Reply.

    Categories

    All
    Decentraland
    Decentraland En Español
    Maya
    Mixamo
    Morphite
    Substance Painter
    Totally Reliable Delivery Service
    Unity 3D
    Updates
    VRChat

    Archives

    December 2020
    October 2020
    August 2020
    July 2020
    June 2020
    May 2020
    April 2020
    March 2020
    February 2020
    December 2019
    October 2019
    September 2019
    August 2019
    June 2019
    May 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2016

    Picture
Home
Projects
Assets

Picture
Crypto
Friendly
Picture

Subscribe to get some 💚 in your inbox once in a while.

Follow us and your visit will never be forgotten!
Picture
Picture
Picture

 © 2015-2020 POLYGONAL MIND LTD. ALL RIGHTS RESERVED.
  • Home
  • SERVICES
  • Projects
  • Decentraland
  • Blog
  • Assets
  • / CryptoAvatars