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

Blog

Trim Textures: Cómo se hizo

3/31/2020

0 Comments

 
English
Se me encargó el modelado y texturizado del exterior de nuestro juego para Decentraland 'Tomb Chaser', así que pensé que este sería un buen ejemplo para probar en producción y, aprovechando para matar dos pájaros de un tiro, mostrar una de las técnicas que aprendí hace unos meses.
La Misión

Mostrar cómo hacemos Trim Textures para usar en nuestros entornos.
Recursos

  • Zbrush 2018+
  • Maya, o tu software 3D preferido
  • Substance Painter 2018.2+
Trim textures proceso principio a fin
Planeando

Lo primero que tenemos que hacer es planear cómo vamos a hacer nuestra Trim Texture. Porque una textura solo puede ser de proporciones 1:1 (en realidad no, pero para este ejemplo lo haremos así), así que vamos a crear un plano 1:1.
Plano de proporciones 1:1
Vamos a dividirlo en diferentes secciones. Es más una guía sobre cómo creemos que podremos aprovechar cada pixel de la textura, pero como esto se puede cambiar después, vamos a hacer algo que funcione por ahora.
Plano 1:1 dividido en secciones
Después separamos cada sección para que sea su propia malla.
Plano dividido en diferentes mallas
Esculpiendo

Vamos a importar nuestro plano a Zbrush y empezaremos a separar todas las secciones que tendremos.
Plano en Zbrush dividido en secciones
Ahora separamos los diferentes ladrillos que queremos.
Plano en Zbrush dividido en ladrillos
Muro en Zbrush dividido en secciones
Puedes subdividir cada sección con el Smooth deshabilitado para tener una densidad uniforme.
Zbrush subdividir smooth deshabilitado
Muro en zbrush con detalles
Debería quedar algo similar a esto una vez que hayamos hecho los detalles. Puedes aprovecharte del alpha, pinceles y booleanos y otros trucos para hacer este proceso más rápidamente.

Una vez terminado, ¡podemos pasar al bake!
Baking

Puedes usar xNormal, Marmoset o incluso Painter para bakear tu modelo high-poly a un modelo low-poly. Asegúrate que usas un plano que tenga todo el espacio de las UVs desde U(0,1)-V(0,1) en uso para una máxima eficiencia.
Muro en Painter bakeado
Texturizar

Si bakeaste en Painter, podrás empezar a pintar directamente. Si has usado otro software puedes importar tus bakes en Painter y después texturizar a tu gusto!
​
Se consciente del estilo y tipo de Trim que estás haciendo. No es lo mismo hacer algo estilizado que algo realista (aunque esto no debería notarse en el proceso de esculpido), pero cosas como la suciedad, las grietas y los detalles de la superficie dependen mucho del estilo que estés buscando. Es un proceso de capas e intentar obtener la cantidad de detalle donde importa.
Muro en painter bakeado y pintado
Así es como queda para mí después de texturizar. Cabe señalar que después de la implementación decidimos que era muy soso y realista, así que mi compañera Laura lo cambió un poco para hacerlo más saturado y colorido.

Después de acabar esto, lo exportamos y comenzamos a hacer el exterior y algunos props con esta textura.
Tomb Chaser muros texturizados
Tomb Chaser columna texturizada
Conclusión

Crear Trim Textures es un proceso simple y permite un nivel de detalle que es muy difícil adquirir con otras técnicas de texturizado como desenvolver cada isla de UV por separado.
​
Espero que hayas aprendido algo nuevo hoy y puedas implementarlo en tu método de trabajo.
Nos vemos por aquí! :)

Picture
Álex
GENERALISTA 3D
Alejandro Bielsa is a junior 3D artist working at Polygonal Mind's in-house team. Passionate about videogames, vivid tutorial drinker and cat lover.
Twitter
0 Comments

Trim Textures: Making Of

3/31/2020

0 Comments

 
Español
I was tasked with the texturing and modelling of the exterior of our Tomb Chaser DCL game so I decided this would be a great example to try in production and, killing two birds with one stone, also show one of the techniques I've larned just a few months ago.
The Mission

To show you how I make Trim Textures to use in the environments we make.
Resources

  • Zbrush 2018+
  • Maya, or your 3D software of preference
  • Substance Painter 2018.2+
Trim textures start to finish process
Planning

So first we need to plan how we are going to make our Trim Texture. Because a texture can only be 1:1 proportions (not really, but for this example we're going to go with that) we are going to make a regular 1:1 plane too.
Plane 1:1
Let's now divide it into different sections. It's more of a guide on how we think we're going to able to take advantage of every pixel in the texture, but this can be changed later so just go with something that works for now.
Plane divided in different sections
Then separate every section so it's its own mesh
Plane with separated meshes
Sculpting

Let's import our plane into Zbrush and start blocking out all the different sections we're going to have.
Zbrush plane block out
Let's block out all the different bricks we want
Zbrush wall block out
Zbrush wall block out
You can now Subdivide each section with the smooth disabled so we can have even density
Zbrush subdivide smooth disabled
Wall zbrush with details
It should look something like this once the detail pass is done. You can take advantage of Alphas, Brushes and Booleans and any other tricks you want to make this process faster. When you're done, it's time to bake!
Baking

You can use xNormal, Marmoset or even Painter to bake your high poly into your low poly. Make sure to use a plane that has all the UV Space from U(0,1)-V(0,1) in use for max efficiency.
Wall in Painter baked
Texturing

If you have baked in Painter, you can start painting right away. If you've used something else you can import the bakes into Painter, and then start texturing to your liking!

​Be mindful of the style and type of Trim you're making. It's not the same to do something stylized and doing something realistic (althought this should've been noted in the sculpting process too!), but things like dirt, cracks and just sheer surface detail depend a lot on the style you're going for. It's an exercise of layering and trying to get the right amount of detail where it matters.
Wall baked in painter finished
This is what it looks like for me after texturing. It should be noted that after implementing it we decided it was too bland and realistic and my coworker Laura changed it up a bit to make it more saturated and colourful.

​After this was done, we exported it and started making the exterior and some props with this texture.
Tomb Chaser textures baked
Tomb chaser column baked
Conclusion

Creating trim textures is a very simple process and it allows for a level of detail that is very hard to get with other regular texturing techniques like unwrapping every UV island by itself.

Hope you learned something today that you can implement into your own workflow!
​See you around :)

Picture
​Alex
3D GENERALIST
​Alejandro Bielsa is a junior 3D artist working at Polygonal Mind's in-house team. Passionate about videogames, vivid tutorial drinker and cat lover.
Twitter
0 Comments

Trim Textures: una nueva esperanza

3/27/2020

0 Comments

 
English
La Misión

Comprender el concepto sobre el uso de texturas tileables o trimsheets que pueden ser reutilizadas tanto como sea posible.
Recursos

  • Zbrush 2018+
  • Maya LT 2018
  • Substance Painter 2018+
Trim... ¿Qué? Tile... ¿Quién?

Lo primero es lo primero, ¿qué son las texturas tileables?

Una textura tileable, también conocida como textura seamless (sin bordes), es una textura que puede ser repetida a través de una malla sin que los bordes sean notados por la persona que los mira.
​
Como puedes ver, puedo expandirlo o contraerlo tanto como quiera sin que se note visualmente la junta entre las repeticiones.
Picture
Aquí tenemos el mismo ejemplo con una textura no tileable. Mucho peor, ¿verdad?
Picture
Cuanto más tileable o repetido, más aparente se hace la repetición. Las texturas tileables funcionan mejor cuando se mezclan con otras texturas tileables a través de "vertex painting" o "heigh blends" para enmascarar esas marcas que nos hacen saber que... ¡Ahí, ahí está el patrón!
Picture
*Imagen de Arif Pribadi ([https://www.facebook.com/arifcreations](https://www.facebook.com/arifcreations) & [http://arifcreations.com/](http://arifcreations.com/blog/))*
Las trim textures, también conocidas como trimsheets, son texturas compuestas de múltiples mini texturas, tileables o no, algo similar al Atlas o Tileset (para los que recordáis cómo se trabajaba en RPG Maker :D).
Picture
*Imagen de Keegan Keene ([https://www.artstation.com/silver593](https://www.artstation.com/silver593) & [https://twitter.com/silver593](https://twitter.com/silver593))*
Picture
*Imagen de Keegan Keene ([https://www.artstation.com/silver593](https://www.artstation.com/silver593) & [https://twitter.com/silver593](https://twitter.com/silver593))*
¿Para qué es útil?

Para reducir el tiempo de texturizar un área general y mantenerlo consistente. Imagina un templo de la franquicia de Uncharted o God Of War 2018: es necesario mantener una cohesión y conectividad entre todos los ornamentos y motivos a través del edificio.
Picture
*Imagen de Megan Parks ([https://www.artstation.com/megific](https://www.artstation.com/megific))*
Las trim textures son especialmente útiles para los PBR (Physically Based Rendering), donde no importa que haya superposicionamientos en las UVs del modelo final. Reutilizar trim textures es una manera super rápida y segura de crear variaciones de texturas y usarlas de diferentes formas. Por ejemplo, el mismo trim puede ser usado para texturizar props o el edificio entero.
Picture
Picture
Picture
Picture
Imagen de Polygon Academy (Tim Simpson) (https://www.polygon-academy.com/, https://twitter.com/polygon_academy & https://www.youtube.com/channel/UCGXr6E_g91ue1rfhA9j4TLA)
Metodología general

Este método de texturizado depende mucho de cómo desenvuelvas (unwrap) tu malla y de cómo la trim texture esté dispuesta. Puede bien planear las texturas antes de modelar, o al revés. Necesitaremos un plan en cualquier caso, porque ambos afectan al siguiente paso.
Picture
Vamos a reusar las texturas del exterior de la pirámide de Tomb Chaser para hacer una simple columna que puede ser reusada en el interior. Este es el trim texture usado para embellecer todo el exterior. Sí, ¡es todo un único material!
Picture
Vamos a hacer una columna dividida en secciones y verás cómo de rápido puedes cambiar el diseño una vez tengamos la geometría, simplemente intercambiando las UVs de alrededor.
Picture
Esta será nuestra columna. Como puedes ver, tiene muchas secciones bien diferenciadas que serán asignadas a diferentes partes de la textura. Cortamos las secciones en las UVs, justo donde cambian de una sección a otra.
Picture
Picture
¿Ves cómo los cilindros se desenvuelven en una moda lineal? esto es clave a la hora de sacarle toda la ventaja al espacio de la textura y los patrones a través del modelo.
Picture
Después de esto podemos empezar a modificar las UVs para encajarlas en las secciones de la trim texture.
Picture
Una vez hecho, crear variaciones es realmente fácil. Tan solo necesitamos mover las UV Shells a otras secciones recortadas.
Picture
Conclusión

Podemos crear variaciones con la misma geometría y la misma textura, solo modificando las UVs de la malla. También podemos hacer variaciones de la textura y se aplicarán automáticamente a las UVs de la malla con diferentes colores o patrones, siempre que dejes la separación del patrón consistente.
Picture
¡Espero que hayas aprendido algo nuevo hoy! Nos vemos :)

Picture
Alex
GENERALISTA 3D
Alejandro Bielsa is a junior 3D artist working at Polygonal Mind's in-house team. Passionate about videogames, vivid tutorial drinker and cat lover.
Twitter
0 Comments

Trim Textures: A New Hope

3/27/2020

0 Comments

 
Español
The Mission

To understand the concept of using tileable textures/trimsheets that can be reused as much as possible.
Resources

  • Zbrush 2018+
  • Maya LT 2018
  • Substance Painter 2018+
Trim... What? Tile... Who?

First things first, what is a tileable texture?
​
A tileable texture, also known as a seamless texture, is a texture that can be repeated across a mesh without the borders being noticeable to the person looking at it.
​
As you can see, I can expand or make it smaller as much as I want without it giving away a clear visual indication of a seam between the repetitions.
Tileable texture wood pattern
This is the same example with a non-tielable texture. Much worse, right?
Non tileable texture wood
The more you tile it or repeat it, the more apparent the repetition is. Tileable textures work best when mixed with other tileables via vertex painting or height blends to mask those landmarks that make us go: "Aha! There's the pattern!"
Arif Pribadi textures mixed
*Pic by Arif Pribadi ([https://www.facebook.com/arifcreations](https://www.facebook.com/arifcreations) & [http://arifcreations.com/](http://arifcreations.com/blog/))*
Trim textures, also known as a trimsheets, are textures composed of multiple mini textures, tileable or not, something similar to an atlas or tileset (for those of you who remember working on RPG Maker :D).
Keegan Keene tileable texture
*Pic by Keegan Keene ([https://www.artstation.com/silver593](https://www.artstation.com/silver593) & [https://twitter.com/silver593](https://twitter.com/silver593))*
Keegan Keene tileable texture
*Pic by Keegan Keene ([https://www.artstation.com/silver593](https://www.artstation.com/silver593) & [https://twitter.com/silver593](https://twitter.com/silver593))*
What's it useful for?

Reducing the time for texturing of a general area and keeping it consistent. Imagine a temple from the Uncharted franchise or God Of War 2018: there needs to be cohesion and connectivity between all the ornaments and motives throughout a building.
Ornaments and motives textures
*Pic by Megan Parks ([https://www.artstation.com/megific](https://www.artstation.com/megific))*
Trim textures are specially useful for PBR (Physically Based Rendering), where you don't care if there are overlaps in the UVs of the final model. Repurposing trim textures is a super fast and relaible way to create texture variation and use it in different ways. For example, the same trim can be used for texturing props or for texturing the whole building.
Wall tileable texture
Wall tileable texture
Square and columns with tileable textures
Ornaments with tileable textures
Pics by Polygon Academy (Tim Simpson) (https://www.polygon-academy.com/, https://twitter.com/polygon_academy & https://www.youtube.com/channel/UCGXr6E_g91ue1rfhA9j4TLA)
General workflow

This texturing method relies a lot on how you unwrap your mesh and how the trim texture is laid out. you can either start planning the textures first before modelling, or the other way around. We'll need to plan it either way, because both affect the next step.
Tomb Chaser tileable textures
Let's reuse the textures from the exterior of the Tomb Chaser pyramid to make a simple column that could be reused in the interiors. This is the current Trim Texture used to beautify the whole exterior. Yes, it's all a single material!
Trim texture for tomb chaser pyramid
So let's make a column divided in sections and you'll see how fast you can change the design once we have our geometry there, just by switchting the UVs around.
Uvs in a column
This is going to be our column. As you can see, it has many differentiated sections that are going to be assigned to different sections of the texture. Let's cut those sections in the UVs, right where they change from section from section.
Column UVs
Sections of UVs in a column
See how cylinders are unwrapped in linear fashion? This is key for taking advantage of our texture space and patterns throughout the model.
How to unwrap the UVs of a column
After this we can begin modifying the UVs to fit into the preexisting "sections" of the Trim Texture.
sections of trim textures in a column
And once that's done, creating variations of this is really, really easy. We just need to move the UV Shells around to other Trim sections!
moving the uv shells to other trim sections
Conclusion

We can create variations with the same geometry and the same texture, just by modifying the UVs of the mesh. We can also make a variation of the texture and it'll automatically apply to the already UV'd mesh with different colours/patterns as long as you leave the pattern separation consistent
Columnd with trim textures
I hope you learned something new today! See you around :)

Picture
Álex
3D GENERALIST
Alejandro Bielsa is a junior 3D artist working at Polygonal Mind's in-house team. Passionate about videogames, vivid tutorial drinker and cat lover.
Twitter
0 Comments

Clavos, arandelas y un poco de cinta aislante. Escenarios bonitos en una plataforma con bajos requisitos

3/24/2020

0 Comments

 
English
La Misión

Todos queremos buenos resultados en nuestras tareas diarias creando escenarios impresionantes y experiencias rejugables (o no) para un rango de audiencia determinado. Este artículo continene unos cuantos consejos y secretillos cuando necesitamos trabajar con limites técnicos muy justos que están fuera de nuestro control, y debemos trabajar con ellos en vez de darnos de bruces.
Recursos

  • MayaLT 2018+
  • Unity 2018+
  • DCL Unity Plugin (externo)
  • Decentraland
  • Photoshop CC (software de edición fotográfica)
Picture
#01 Primeros pasos: entendiendo tu plataforma, Decentraland

Cuando se desarrolla para una plataforma en específico, se tiene la ventaja de saber qué puedes y no puedes hacer. De esa forma tienes una idea como para empezar a pensar qué te permitirá hacer el motor de forma rápida y empezar a pensar en trucos para solucionar los problemas que saldrán al empezar la producción.

Decentraland (DCL desde ahora) es una plataforma que intenta crear un mundo digital 3D cuyos propietarios son los propios usuario, sólamente limitado por (aparentemente) unas pocas limitaciones técnicas y que se apoya en la tecnología del blockchain. Debo añadir que el motor de la plataforma está todavía en desarrollo y puede cambiar conforme se acerque la fecha del lanzamiento final. Aunque esta documentación es escasa cuando se trata de explicar cómo trabajar con escenarios 3D y no queda claro cómo funciona el motor, los artistas puedes intuir cómo sus creaciones se comportarán sabiendo que Decentraland usa Unity como base.

Su guía de "publishing-tech-constrains" está ahí para tenerla en cuenta, >>Link<<, pero hay algo que Unity adora cuando renderizas tu escena: déjala lo más simplificada que puedas y reduce el número de drawcalls al mínimo.

No entres en pánico si tu escena tiene una cantidad enorme de drawcalls, DCL renderizará tu escena haciéndolo de la mejor forma posible para el motor y reducirá el tiempo que tu creación está en pantalla.

Estos son los puntos más importantes de DCL:
​
  • Todos los hijos de una malla serán comprimidos en una sola malla (el padre), si la malla tiene que interactuar con el jugador, deberías sacarla de la jerarquía y ponerla en el root.
    • En Unity el mejor escenario es hacer un solo material para prevenir varios drawcalls, pero no está claro si esto afecta DCL de la misma forma.
 
  • Para crear colliders, necesitas crear otra mesh con el sufijo "_collider" para indicarle a DCL que esa mesh funcionará como un mesh colliders y no debería ser visible.
 
  • Dentro de Unity, el plugin de exportación detectará la instanciación de materiales como materiales independientes, pero durante la exportación este "problemilla" se arreglará. Tienes que llevar un conteo manual del numero de materiales que estás usando.
 
  • Unity funciona con el eje X invertido, y esto es un problema enorme al principio porque al exportar el modelo invertirá el modelo y causará que tus modelos se salgan de los límites de tu parcela (o se deformarán). Este problema se soluciona rotando el modelo 180º en el eje Y en el editor de Unity. Las transforms se resetean una vez exportes (y así se verán en Decentraland de la misma forma que se ve en Unity).
 
  • DCL usa un "Ambient Light" mezclada con la skybox básica de Unity que ilumina un poquito más tu escena, tenlo en cuenta cuando estés creando la paleta de colores o planeando tus texturas: los tonos claros brillarán mucho.
​
  • Aunque acepta el workflow PBR y el Standard Material de Unity, no aprovecha todo su potencial, haciendo que sea difícil conseguir buenos resultados sin aplicar canales de texturas o ser capaz de modificar los shaders para ahorrar el número de uso de texturas.
    • Los Emisivos son una buena forma de mejorar tus creaciones, el renderer de DCL tiene un efecto de postprocesado de bloom.
DCL no funciona con extensiones de archivo comunes (.fbx, .obj, ...) y en su lugar utiliza la extensión .gltf donde todos los datos están guardados y comprimidos para que el motor lo coloque en la escena.
Documentación oficial de DCL para este problema:
https://docs.decentraland.org/3d-modeling/3d-models/
https://docs.decentraland.org/3d-modeling/meshes/
https://docs.decentraland.org/3d-modeling/materials/
#02 Diluyendo los límites de DCL, atlas packing

A privera vista puede parecer que DCL sea bastante restrictivo con la cantidad y tamaño de texturas permitidas, pero con reutilización, reconversión y un poquito de creatividad puedes lograr resultados geniales a la vez que reduces el uso de texturas.
​
Por ejemplo, en esta terrorífica torre compuesta por una cantidad elevada de triángulos hemos usado solo 2 texturas para todo el modelo, consiguiendo buenos resultados.
Torre sur en Decentraland
La torre terrorífica como estaba el día 27 de diciembre de 2019. La Base de la torre estaba todavía en desarrollo.
Torre Sur en Decentraland
Torre Sur en Decentraland
La clave en este tipo de proyectos es trabajar con un Atlas y reusar texturas tileables. Incluso texturas pequeñas pueden tener un gran impacto en tu escena.
Una textura de Atlas fue diseñada para todo el "suelo" y el barro, como las escaleras y el jardín. La otra textura fue diseñada para todos los elementos de las casas. Es importante mantener las texturas tan neutrales como sea posible para que no se noten tanto las repeticiones al reusarlas.
Textura de 512px para Decentraland
Los edificios (512px x 512px)
Este es el Atlas hecho con texturas neutrales cuyo propósito es ser reusadas constantemente en el entorno.
Textura de 512px para Decentraland
Los suelos (512px x 512px)
Esta es tileable, fácilmente reusable y que permite las repeticiones
En muchos casos, puedes cortar y poner las UVs de forma creativa para usar sólamente una textura y texturizar todo un edificio.
Textura con UVs para Decentraland
Las UVs de las paredes interiores están desplegadas de una forma que hace que las paredes parezcan que tengan dos colores, y lo mismo pasa con otras partes de la casa: siguen tileandose y repitiéndose sin notarse los cortes. Cabe destacar que todas las piezas usan esta textura, creando coherencia entre habitaciones sin que haya mucha repetición.
Casa con unica textura de 512
Esto está hecho con una única textura de 512x512 px!
Además, tener en cuenta la proyección de geometría en un espacio de UVs reducido puede dar resultados válidos como cualquier otra ténica. Los texels deben tenerse en cuenta, así que piensa en darle un espacio más grande a las UVs a las zonas que se van a ver más de cerca que a las que el jugador no va a poder ver.
UVs texturas para casa de Decentraland
La parte de arriba del tejado no se puede ver desde un punto de vista normal, así que usa un mínimo de espacio para sus UVs, simplemente con un color parecido al de los alrededores.
UVs colocadas en la textura
Sus UVs están localizadas abajo a la izquierda bajo la barandilla de piedra
El edificio por supuesto comparte materiales con otros props del escenario, como metal, oro e incluso roca, que están compartidos de forma no exclusiva por todo un área del entorno.
Unity materiales de roca, oro, metal
#03 VFX para una plataforma que no soporta VFX

Los efectos visuales son un dolor de muelas, un problema y a veces difícil de solucionar, muchas veces ni siquiera se utilizan mientras se desarrolla porque el motor no los soporta. Incluso un poquito de Ambient Occlusion o Bloom pueden matar tus fps en una plataforma de bajos requisitos (e incluso en una de altos requisitos) y DCL no soporta ninguno de esos efectos de post-procesado (excepto el Bloom) así que aquí es cuando hay que ponerse el sombrero de pensar y encontrarse con algunas soluciones creativas para simular Luz Volumétrica, oclusión ambiental y bloom.

Por suerte, DCL permitió hace poco utilizar el canal Emisivo en el Standard Shader y con esta característica introdujeron el efecto de bloom en el postprocesado. El bloom es controlado por la Intensidad del valor en el canal emisivo: cuanto más alto sea ese valor de Intensidad, el bloom se hace más grande y más brillante.
​
Para el resto de efectos de post-procesado tendremos que hacer un par de triquiñuelas fáciles. Creamos un set de materiales que utilizamos para ayudarnos a darle un toque bonito a nuestro escenario.
Unity set de materiales
Cada fade fue hecho con un propósito muy específico, pero todos usan la misma textura.
Por ejemplo, en el entorno decidimos poner un poco de AO en las esquinas de un edificio blanco porque la luz excesiva de Decentraland mataba cualquier perspectiva o sensación de oclusión ambiental natural.
Oclusión de ambiente en las esquinas
El Ambient Occlussion está construído con geometría flotante a ambos lados de la esquina.
Oclusión de ambiente en las esquinas
Otro logro que conseguimos con este escenario era la falsa luz volumétrica, renderizándola suavemente pero dándole a la habitación el "feeling" que estábamos buscando. En este caso usamos el bloom emisivo mezclado con material semitransparente.
​
Como puedes ver, el efecto casi ni se nota pero se aprecia en el contexto gráfico y la composición. El bloom puede ser una espada de doble filo, dándote la oportundiad de mejorar tu composición y hacer algo precioso o básicamente arruinarla completamente.
Falsa luz volumétrica en Decentraland
Falsa luz volumétrica en Decentraland
#04 Pensando de manera creativa

La única forma de lograr resultados mejor de los esperados es entender las bases de lo que estás haciendo.

​Hacer click a una secuencia de botones de una interfaz de usuario para conseguir resultados esperados solo hace que te des de bruces con una pared. Saber qué es lo que está pasando entre bambalinas te permite encontrar soluciones creativas cuando problemas técnicos y bugs visuales aparezcan, porque sabrás lo que son.

Hay algo genial sobre trabajar con límites técnicos, y es que te obliga a crear assets que tengan múltiples propósitos. Haz de una roca un ladrillo, y de un ladrillo una puerta, la puerta ahora es una ventana, y luego una viga rota en el techo. Creo que se ve por dónde voy.

Hacer una composición de un escenario completo con una textura de 512x512 px es difícil, pero no necesitas una textura de alta resolución o teselación para obtener buenos resultados. Al final la composición y la coherencia visual es lo que define un buen escenario. Hay un montón de juegos preciosos de todos los géneros y direcciones artísticas porque se apoyan en coherencia visual y un entendimiento de los límites técnicos muy profundo, y cómo superarlos para adaptar las ideas del proyecto para la plataforma.

Aunque el post esté orientado a una producción de un entorno en la plataforma de Decentraland, todos estos tips pueden ser utilizados para desarrollar para móvil u otras plataformas que hace que los artistas lo pasemos mal con los límites para alcanzar nuestras metas visuales.

Hasta la próxima, au revoir!

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

Nails, bolts and some ducktape, good looking scenarios in a low spec platform

3/24/2020

0 Comments

 
Español
The Mission

We all want to get great results in our daily tasks of creating stunning scenarios and replayable (or not) experiences for a selected range of audience. This article goes through tips and workarounds when working with high technical constrains that are out of our control and we just have to get along with them.
Resources

  • Maya LT 2018 or higher
  • Unity 2018 or higher
  • DCL Unity Plugin (external)
  • DCL (Target Platform)
  • Photoshop CC (Bitmap editing tool)
Good looking scenarios in low spec platforms
#01 First of all, understanding your platform: DCL

When developing for a specific platform, you get the advantage of knowing what can and what cannot be done. This way you can get an idea of what you were thinking of doing won't get along with the engine at first sight and start thinking workarounds for the first production expected-unexpected troubles to get the same visible results.

Decentraland (DCL from now on) is an online 3D-powered-platform that aims to create a vivid digital world as a life sim owned by its users, ruled by a few (apparently) technical constrains and backed by blockchain technology. I must add that the platform engine is still in development and can change as the final first release of the platform is made. Although its documentation is scarce when explaining how to work with 3D scenarios and is not well told how the engine works, artists can take a huge hint on how their creations will look or behave in scene by knowing that Decentraland runs in its core Unity.

Their "publishing-tech-constrains" are online to take a general boundary, >>Link<<, but overall there is one thing that Unity loves when rendering your scene: keep it as simple as possible and drawcall reduced at maximum.

Don't panic if your scene has an incredibly amount of theoretical drawcalls, DCL will end rendering your stuff but making it easier for the engine will reduce the time your creation appears on screen.
​
So what are the tech highlights in DCL:
​
  • All childs of a mesh will be blended into one mesh (parent), if the mesh has to interact with the player, you should remove it from the hierarchy and place it in root.
    • In Unity the best suitable scenario is to make one mesh with only one material to avoid drawcall duplication, but is not clear if DCL is affected.
 
  • In order to create colliders you must create another mesh with the name "_collider" on its end to indicate DCL that the mesh will work as a mesh collider and should not be considered as a visible model.
 
  • Within Unity, the export plugin will detect the instance of materials as independent materials, but during the export this "issue" is fixed. You have to keep a manual count of the materials you are using.
 
  • Unity works with the X axis inverted, this is a huge trouble at first because the export will flip the model and cause the model to surpass your LAND boundaries (or just make it look displaced). This issue is fixed by rotating the model 180 degrees on its Y axis to preview and test inside the Unity Editor. The transforms are reset once you export (and they will look as its shown in Unity).
 
  • DCL uses a general "Ambience Light" mixed with the basic skybox of Unity that highly lightens your scene, keep that in mind when creating your palette of colours or planning textures, as clear tones will get highly lighted.
​
  • Although it accepts the PBR pipeline and the Standard Material from Unity, it doesn't get all of its capabilities, making it tricky to get good results without applying texture channels or being able to modify the shader texture input to save texture count.
    • Emissives are a good way to enhance your creations, the DCL renderer has a bloom post-effect.
DCL doesn't work with common 3D file extensions (.fbx .obj ...) instead uses its own file extension .gtlf where all data is stored and compressed for the engine to place in scene.
Useful DCL official docs for this issue:
https://docs.decentraland.org/3d-modeling/3d-models/
https://docs.decentraland.org/3d-modeling/meshes/
https://docs.decentraland.org/3d-modeling/materials/
#02 Blending DCL boundaries, atlas packaging

At first sight it may seem that DCL is quite restrictive with the amount and size of textures permited but through reutilization, reconversion and a little bit of creativity you can achieve great results and at the same time not use a lot of textures.
​
For example we have this spooky tower composed by a notable amount of triangles but using only 2 textures for the whole appearence, achieving nice looking results.
South Tower in Decentraland
The spooky tower as seen the 27th of December of 2019. The Base of the tower is still in development.
South tower in Decentraland
South tower in Decentraland
The key in this type of projects is to work with Atlas and reusable-tileable textures. Even small textures can make a difference in your scenes.
One atlas texture was designed for all the "ground" and the dirt elements such as the rocky stairs and the wasted garden. The other texture was designed for all the house elements. It is important to keep the textures as neutral looking as posible to avoid repetition to be noticed.
512 px textures for south tower in Decentraland
The building (512px x 512px)
This is an Atlas made out of neutral looking textures with the purpose of being reused constantly in the environment.
512 px textures for south tower in Decentraland
The grounds (512px x 512px)
This is a tileable, easily reusable and seamless texture
In multiple cases by folding the UV geometry you can place the whole model within the atlas and get the desired results.
UVs for south tower in Decentraland
The Uv-s of the interior walls are folded in a way that it seems a wall with double color, the same goes for other parts of the house as they keep on repeating without being clear. Note that all the pieces use this texture, creating coherence between rooms without being noticeable that they are just repetitions.
512 px textures for dark house in Decentraland
A texture of 512px made this!
Furthermore even hosting the geometry projections in a really reduced UV area can be valid as a result. Texels are quite important here, so keep in mind to give a major space to uvs that will be seen closer than the ones that cant be barely visible.
Textures in Decentraland
The top roof cant be seen from a normal point of view, it simply uses a minimum of space where matches with the surrounding colors.
UVs position textures decentraland
Its Uvs are located bottom-left under the ston railing
The building of course shares other materials with other props among the scenario, materials representing bare metal, gold or even rock are shared and non-exclusive from an area of the environment.
Unity materials for rock, metal, gold
#03 VFX for a non-VFX platform

Visual effects are a  ̶p̶a̶i̶n̶ ̶i̶n̶ ̶t̶h̶e̶ ̶a̶s̶s̶ troubling and sometimes messy issue, commonly avoided when developing just because the engine is not used to it. Even a simple AO or Bloom can ruin your frame rate in a low platform (or even in the high ones) and DCL doesnt support any (but bloom) **so here is when you put on your creative-mood-hat and you get to work with some useful workarounds for Volumetric Lighting, Ambient Occlusion and Bloom.

Luckily DCL enabled recently the emissive channel from the Standard Shader and with this feature they introduced the Bloom post-effect. Bloom is handled with the Intensity value in the emissive channel, as you increase the Intensity value, the bloom gets bigger and brighter.
​
For the rest of post effects we will have to do an easy workaround. We created a set of materials that were going to help us in the journey of embellishing our scenario.
Unity set of materials
Each fade was made with a specific purpose, but they all share the same texture.
For example, in the environment we decided to place some AO in a white building as the scene lighting killed all perspective or sense of geometry occlusion/collision.
Ambient Occlusion for South Tower in Decentraland
The AO is built with one quad placed on both sides of the corner.
Ambient Occlusion for South Tower in Decentraland
Another achievment in the scenario was to fake volumetric lighting, being rendered softly but giving the room the approach we were looking for. In this case we used the emissive bloom mixed with a fade to transparent material.
​
As you can see, the effect is barely noticeable but appreciated in the graphical context and composition. Bloom can be a double side effect, giving you the opportunity to turn your composition into something stunning or basically ruining it.
fake volumetric lighting in Decentraland
fake volumetric lighting in Decentraland
#04 Thinking outside the box

The only way to achieve higher results than expected is to understand the basics of what are you doing.

Matching a sequence of UI buttons to get supposed results leads only to unexpected crashes. Getting to know whats happening behind the frame will help you create workarounds once the technical problems and visual bugs appear, because you know they will.

There is a thing when working with high technical constrains that leads to reuse and think constantly about multi-purpose asset creation. Turn a rock into a brick, make the brick be a door, the door now will be a window, later a broken beam on the ceiling and so on.

Composing a whole scenario with a 512 pixels square texture is harsh, but you don't need high texture detail or mesh tessellation to get good results. In the end the composition and graphical coherence is what defines a good environment. There are a bunch of good looking games of all type of genre and art direction because they rely on visual coherence and strong technical understanding of constrains and how to surpass them adapting your project ideas to the platform.
​
Although the post is heavily oriented towards the production of an environment in the Decentraland platform, all this tips can be easily used when developing for mobile or other platforms that make us artists struggle with different constrains to reach our graphic goals.
​
Until next time, au revoir!

Picture
Kourtin
ENVIRONMENT ARTIST
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
<<Previous

    Categories

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

    Archives

    February 2021
    January 2021
    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