Textures
Aprende cómo funcionan las textures en Decentraland
Las texturas son una parte clave del pipeline de arte 3D para lograr el aspecto y la sensación que deseas para tu escena. En esta sección encontrarás todo lo que necesitas saber para crear tus texturas, limitaciones, nodos en Blender y cómo optimizarlas para que rindan al máximo.
Limitaciones
Restricciones de tamaño de textura
Actualmente el Explorer de Decentraland comprime las texturas a un máximo de 1024 px para fines de optimización utilizando un Asset Bundle Converter después de que la escena se carga en los servidores de contenido. ¡Asegúrate de tener en cuenta estas limitaciones al crear tus activos!
Otro punto importante a tener en cuenta es que las texturas siempre deben ser potencias de dos; cualquier textura que no siga esta especificación puede causar problemas al renderizar la escena.
Los tamaños de textura deben usar números de ancho y alto (en píxeles) que coincidan con los siguientes números:
1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024Esta secuencia está compuesta por potencias de dos:
f(x) = 2 ^ x. 512 px es el tamaño máximo que permitimos para una textura. Este es un requisito bastante común entre otros motores de render, se debe a optimizaciones internas de los procesadores gráficos.
El ancho y la altura no necesitan tener el mismo número, pero ambos deben pertenecer a esta secuencia.
El tamaño recomendado para texturas es 1024x1024, hemos encontrado que este es el tamaño óptimo para ser transportado por redes domésticas y para ofrecer experiencias razonables de carga/calidad.
Ejemplos de otros tamaños válidos:
32x32px
64x32px
512x256px
512x512px
1024x1024pxPor otro lado, existe un límite de texturas por parcela:
UVMapping
UVmapping es el proceso de desplegar las caras de tu modelo 3D en una coordenada 2D que se usará más tarde para añadir los diferentes mapas a tus activos. Es una parte clave del proceso de creación. Hacer un unwrap correcto de tus modelos es un factor clave para aprovechar la resolución de tus modelos y además organizará tus mapas para que sean flexibles de modificar.
Para saber más sobre UV Unwrapping puedes ver este increíble video realizado por la Blender Foundation:
Hay otro gran tutorial de nivel intermedio para unwrap de UVs hecho por [Blender Guru] (https://www.youtube.com/@blenderguru) que explica cómo desplegar un modelo más complejo:
Mapas
En el sección de materiales explicamos cómo Decentraland trabaja con los shaders PBR. En esta sección te mostraremos cómo cada mapa de textura modifica el shader y el aspecto del objeto 3D que luego será exportado al world.
Mapas Diffuse
Este es el color base de la superficie del objeto. Tener una paleta de colores equilibrada entre tus modelos es clave para lograr un aspecto y sensación coherentes en tu experiencia.
¡Aquí hay un genial generador de paletas gratuito por si lo necesitas!
Coolors: https://coolors.co/
O alguna inspiración de paletas provista por películas increíbles:
Movies in Color: https://moviesincolor.com/
Mapas Metallic
En un mapa Metallic, el mapa en escala de grises representa el grado de metalicidad que posee un objeto, siendo blanco completamente metálico y negro no metálico. En el siguiente ejemplo vemos cómo la luz afecta al modelo y cómo interactúa con el entorno.
En la imagen podemos ver cómo las partes oscuras de la textura afectan al modelo. Las franjas oscuras son opacas, mientras que la franja blanca se comporta según las propiedades del shader metálico y el gris es una mezcla entre ambos.
Mapas Roughness
En un mapa de roughness, las áreas más oscuras corresponden a superficies más lisas, mientras que las áreas más brillantes corresponden a superficies rugosas. Esta representación en escala de grises es utilizada por los motores de render para determinar cómo la luz debe dispersarse o reflejarse en distintos puntos de la superficie.
Mapas Transparentes
Alpha Clip
Alpha Clip en Blender, cuando se usa con una textura, implica usar el canal alfa de la textura para determinar qué partes del material deben ser visibles. Los píxeles con valores alfa por encima de un umbral especificado se muestran, mientras que los que están por debajo del umbral se descartan, creando un efecto de recorte basado en la información de transparencia de la textura.
En el siguiente ejemplo usamos un material con alpha clip, usando 2 texturas: el color diffuse y la textura alpha en blanco y negro conectando el color al canal alfa.
Como resultado podemos ver que las áreas pintadas en negro son descartadas mientras que las áreas blancas se renderizan
Alpha Blend
Alpha Blend te permite elegir valores intermedios por región.
Alpha Blend en Blender, cuando se usa con una textura, implica mezclar las áreas transparentes y opacas de la textura en función de su canal alfa. Esto permite que la textura combine de forma suave porciones visibles y translúcidas, interactuando de forma natural con el fondo u otros objetos en la escena.
Mientras que Alpha Clip renderiza valores siendo 0 o 1 (según un umbral específico), Alpha Blend interpola los valores entre 0 y 1. En el ejemplo anterior el material con alpha blend muestra la transición de gradiente completa mientras que el alpha clip excluye parte de la textura según el umbral de clip
🔥Consejo de optimización🔥
Ten en cuenta que las texturas transparentes (RGB+A) siempre son más costosas en términos de rendimiento que usar un valor en escala de grises para transparencias.
La transparencia siempre es una operación costosa al renderizar la escena. Procura mantener las transparencias al mínimo y usa Alpha Blend solo cuando sea necesario; de lo contrario, se prefiere Alpha Clip en lugar de Alpha Blend.
Mapas Emissive
Un mapa emissive es un tipo de mapa de textura usado para controlar la auto-iluminación o la luz emitida por una superficie en una escena 3D. Es un componente del shader que determina cuánta luz (y el color de la luz) emite una parte particular de un modelo 3D, independientemente de las fuentes de luz externas. Los mapas emissive se usan comúnmente para simular materiales u objetos que aparentan emitir su propia luz.
En este ejemplo podemos ver el uso de un mapa emissive combinado con la intensidad emissive en un entorno que usa postprocesado de brillo para probar aproximadamente cómo se comporta lo emissive en world.
Mapas Normal
Un normal map es un tipo de textura usado en gráficos 3D para simular detalles finos de la superficie y crear la ilusión de geometría compleja sin alterar realmente la geometría subyacente de un modelo. Se usa comúnmente para mejorar el realismo de modelos low-poly añadiendo la apariencia de bultos, hendiduras y otras irregularidades de la superficie. También permite mantener los propios objetos más ligeros, ya que muchos detalles pueden proporcionarse en la capa de normal map en lugar de con geometría compleja.
Para añadir un normal map a tu material usando el Shader Editor, necesitarás conectar el Normal Map node entre la textura y el Principled BSDF shader.
⚠️Importante⚠️: Nunca uses una textura como albedo y normal al mismo tiempo porque puede crear problemas al renderizar la escena.
Optimizando Texturas
El proceso de optimizar texturas trae muchos beneficios al renderizar la escena en el explorer, pero también es una buena forma de mantener el estilo de tu escena consistente y más flexible en el proceso de diseño. Algunos de estos beneficios son:
Tener texturas optimizadas en tamaño y compresión hará que la escena funcione mucho más fluida y rápida, facilitando su descarga y su renderizado (especialmente para jugadores con conexión a Internet lenta).
Reduce la cantidad de memoria y potencia de procesamiento para renderizar tu experiencia, resultando en una mejor experiencia de usuario para tus jugadores.
Ahorra espacio en los servidores de contenido de la comunidad.
Usando Texture Atlases y/o Trim Sheets te dará más flexibilidad para iterar la creación de tu escena y coherencia de estilo entre los objetos. Usando estas técnicas puedes intercambiar texturas fácilmente, ajustar colores o patrones en lugar de hacerlo individualmente para cada modelo.
Compartir texturas entre modelos permite tener menos texturas por escena, reduciendo drásticamente las draw calls en el juego. Si trabajas con glbs (con texturas embebidas) encontrarás un extractor en las siguientes guías para extraer las texturas de éstos, redirigiendo los modelos para usar la misma textura.
Texturas compartidas entre modelos glTF
Una práctica sabia y común para optimizar tu escena es compartir texturas y materiales entre modelos en la escena. Hacer esto reducirá drásticamente las draw calls y tu escena de Decentraland funcionará mucho más fluida.
La siguiente herramienta basada en glTF pipeline, ofrece algunas optimizaciones que harán los modelos 3D más ligeros y más rápidos de descargar para los jugadores en tu escena.
Mac: MAC GLB Extractor
PC: PC GLB Extractor
Convierte el formato .gltf a .glb, que es binario y por tanto ocupa mucho menos. También coloca los archivos de textura fuera del modelo 3D, lo que te permite usar la misma textura en varios modelos.
📔 Nota: el formato .glb por defecto siempre tiene las texturas embebidas en el archivo. El engine no puede reconocer dos texturas embebidas como la misma; necesitan ser archivos externos que compartan el mismo hash.
Cómo usar GLB Texture Extractor
En esta escena de ejemplo, tenemos una simple escena sci-fi en Blender.
Esta escena contiene el entorno base para los modelos estáticos pero también hay otros dos assets, un droide y una nave espacial que queremos exportar por separado para moverlos luego por código, de modo que puedan interactuar con los jugadores. En este caso usamos 4 texturas (una para el suelo, un atlas de color para la mayoría de los assets, una emissive y una textura sci-fi de UI para los paneles)
Una vez que exportamos todos estos assets a la carpeta models tenemos 3 modelos: la escena estática del entorno, la nave espacial y el droide.
Pero tenemos un problema: los archivos .glb tienen las texturas embebidas, así que si exportas diferentes assets que reutilizan las texturas, estas se duplicarán cada vez que haya un nuevo asset en la carpeta. Para evitar tener texturas duplicadas podemos usar esta herramienta útil.
⚠️ NOTA IMPORTANTE: Antes de usar la herramienta haz una COPIA DE SEGURIDAD de tus modelos, ¡por si algo sale mal!
En Mac
Una vez que hayas exportado todos los assets a tu carpeta models puedes arrastrar el archivo del script a ella.
1 - Abre la carpeta en la terminal arrastrando la carpeta a la terminal.
2 - Arrastra texture-extractor.sh a la terminal.
3 - Ejecuta el comando. Puede tomar algunos segundos procesar todos los assets. Después de eso, verás algo como esto:
4 - Ve a tu carpeta models y habrá una nueva carpeta llamada "out" en la que verás tus nuevos assets con las texturas extraídas.
5 - Reemplaza todos los assets por los nuevos. Además, una vez que termines borra "texture-extractor.sh" y la carpeta vacía "out".
En Windows
Una vez que hayas exportado todos los assets a tu carpeta models puedes arrastrar el archivo del script dentro de ella.
1 - Haz doble clic en glb_texture_extract.bat para extraer los archivos. Si Windows te advierte sobre una aplicación no reconocida, ve a More Info y luego a Run anyway.
2 - El script generará una carpeta llamada out; allí encontrarás todos los nuevos archivos .glb con sus texturas extraídas.
5 - Reemplaza todos los assets con los nuevos. Una vez finalizado, elimina el script "texture-extractor.bat" y la carpeta vacía "out".
Si sigues todos los pasos tu escena será mucho más rápida y los assets compartirán la misma textura. Cuando trabajamos con varios assets y escenas grandes la mejora es bastante notable. ¡Con esta herramienta puedes ahorrar bastantes megabytes de información!
⚠️ Tras completar este paso, es crucial verificar que cada textura siga las directrices. Si las texturas no cumplen las directrices o son demasiado pesadas, optimízalas para que sean más ligeras antes de desplegar. El tamaño de textura recomendado para escenas con buen rendimiento es 512x512 px. También verifica la resolución; imágenes con más de 72 DPI afectarían el rendimiento y no mejorarán la apariencia de la imagen.
Texture Atlas/ Trim Sheets
Un texture atlas es un único archivo de imagen que contiene datos de varias imágenes más pequeñas empaquetadas juntas. En lugar de tener una textura para cada malla, varias mallas comparten una textura mayor.
Puedes crear un texture atlas antes de hacer el asset, lo que significa que el asset se UV-unwrapea según el texture atlas. Esto requiere una planificación temprana al crear la textura.
Alternativamente, puedes crear el texture atlas después de que el asset esté terminado fusionando texturas en software de pintura. Sin embargo, esto también significa que las islas UV deben reorganizarse según la textura.
A continuación hay una imagen que muestra varios objetos 3D que usan un conjunto de texturas:
Otra forma de hacer Atlases es el uso de Trim Sheets, una técnica común en modelado 3D y desarrollo de juegos que los grandes estudios e industria usan para asegurar consistencia visual y un pipeline de arte eficiente. Trim Sheets es el uso de una sola imagen o textura que contiene múltiples pequeños detalles o elementos que pueden aplicarse a diferentes partes de un modelo. Esta técnica es muy útil al crear escenas grandes y debe considerarse en la primera etapa del pipeline de arte.
Un ejemplo en collage de un Trim Sheet que usa una textura diffuse, normal y emissive.
Hay un gran tutorial por Jennifer McGarry que explica el uso de Trim Sheets usando Blender!
Nomenclatura de Texturas
Es crucial nombrar nuestras texturas correctamente. Tener una nomenclatura correcta para la textura hará:
Hacer tu pipeline de arte más eficiente, flexible, organizado, fácil de orientar y modificar si es necesario.
Evitar solapamientos de texturas con el mismo nombre al usar el texture extractor u otras herramientas.
Evitar problemas de superposición de texturas al usar Asset Bundles.
Una forma más eficiente de apuntar a problemas al analizar la escena.
Cómo nombrar correctamente tus Texturas:
Nombre del asset debería representar claramente lo que es la textura.
Los nombres de texturas deberían comenzar con el prefijo
T_.El nombre de la textura debería terminar con el sufijo que define el tipo de textura:
_D- Diffuse/ Color Map_A- Alpha Texture_MT- Metallic_R- Roughness_N- Normal Map_E- Emission
Ejemplo: Si es un mapa diffuse de una textura de ladrillo para una pared, el nombre T_BrickWall_D podría ser apropiado. Si es un Normal Map del mismo asset el nombre podría ser T_BrickWall_N
Ejemplos:
🟢 Prefiere comenzando el nombre de textura con -
T_Parquet_D,T_Floor_R,T_Pipes_MT,🔴 Evita comenzando el nombre de textura con -
Image_,sprite_,Untitled
Herramientas Opcionales
Hay muchos addons y herramientas externas que facilitan el trabajo al crear assets para hacer el pipeline más rápido y eficiente; algunas son gratuitas y otras de pago, por nombrar algunas:
UVTools
UV Packer (Free):https://www.uv-packer.com/blender/
Zen UV: https://blendermarket.com/products/zen-uv
Uvpackmaster 3: https://blendermarket.com/products/uvpackmaster
Compresores de Imagen
Hay varios compresores de imagen en línea que puedes usar para hacer tus texturas más ligeras. Por nombrar algunos:
CompressPNG: https://compresspng.com/
TinyPNG: https://tinypng.com/
FreeConvert: https://www.freeconvert.com/
Última actualización