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.

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.

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.

Después separamos cada sección para que sea su propia malla.

Vamos a importar nuestro plano a Zbrush y empezaremos a separar todas las secciones que tendremos.

Ahora separamos los diferentes ladrillos que queremos.

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!

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.

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.

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.

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í! :)

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.

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.

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.

Then separate every section so it's its own mesh

Let's import our plane into Zbrush and start blocking out all the different sections we're going to have.

Let's block out all the different bricks we want

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!

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.

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.

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.

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 :)

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.

Aquí tenemos el mismo ejemplo con una textura no tileable. Mucho peor, ¿verdad?

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!

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).

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.

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.

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.

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!

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.

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.

¿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.

Después de esto podemos empezar a modificar las UVs para encajarlas en las secciones de la trim texture.

Una vez hecho, crear variaciones es realmente fácil. Tan solo necesitamos mover las UV Shells a otras secciones recortadas.

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.

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.

This is the same example with a non-tielable texture. Much worse, right?

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!"

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).

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.

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.

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.

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!

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.

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.

See how cylinders are unwrapped in linear fashion? This is key for taking advantage of our texture space and patterns throughout the model.

After this we can begin modifying the UVs to fit into the preexisting "sections" of the Trim Texture.

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!

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

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.

Documentación oficial de DCL para este problema:

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.

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.

En muchos casos, puedes cortar y poner las UVs de forma creativa para usar sólamente una textura y texturizar todo un edificio.

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.

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.

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.

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.

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.

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!

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.

Useful DCL official docs for this issue:

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.

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.

In multiple cases by folding the UV geometry you can place the whole model within the atlas and get the desired results.

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.

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.

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.

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.

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.

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!