Texturas
Aprende cómo funcionan las texturas en Decentraland
Las texturas son una parte clave del flujo de trabajo 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 funcionen lo mejor posible.
Limitaciones
Restricciones de tamaño de textura
Actualmente el Explorer de Decentraland comprime las texturas a un máximo de 1024px para fines de optimización usando un Asset Bundle Converter después de que la escena se sube a los servidores de contenido. ¡Asegúrate de tener en cuenta estas limitaciones al crear tus assets!
Otro punto importante a tener en cuenta es que las texturas siempre deben ser potencia 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á formada por potencias de dos:
f(x) = 2 ^ x. 512px es el número máximo que permitimos para el tamaño de una textura. Este es un requisito bastante común entre otros motores de renderizado; existe debido a optimizaciones internas de los procesadores gráficos.
El ancho y el alto 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 a través de 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 assets. Es una parte clave del proceso de creación. Hacer un unwrap correcto de tus modelos es un factor clave para exprimir 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 hecho por la Blender Foundation:
Hay otro gran tutorial de nivel intermedio para desplegar UVs hecho por [Blender Guru] (https://www.youtube.com/@blenderguru) que explica cómo unwrapear 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 más tarde se exportará al world.
Mapas Difusos
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 generador de paletas gratuito en caso de que lo necesites!
Coolors: https://coolors.co/
O algo de inspiración de paletas proporcionada por películas increíbles:
Movies in Color: https://moviesincolor.com/
Mapas Metálicos
En un mapa Metallic, el mapa en escala de grises representa el grado de metalicidad que posee un objeto, siendo blanco totalmente 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 bandas oscuras son opacas, mientras que la banda blanca se comporta bajo las propiedades del shader metálico y el gris es una mezcla entre ambos.
Mapas de Rugosidad
En un mapa de roughness, las áreas más oscuras corresponden a superficies más lisas, mientras que las áreas más claras corresponden a superficies rugosas. Esta representación en escala de grises es usada por los motores de renderizado para determinar cómo la luz debe dispersarse o reflejarse en diferentes 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 difuso y la textura alfa 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 están renderizando
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 basándose en su canal alfa. Esto permite que la textura combine suavemente porciones visibles y translúcidas, interactuando de forma natural con el fondo u otros objetos en la escena.
Mientras Alpha Clip renderiza valores 0 o 1 (en 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 establecida por 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 es siempre una operación costosa al renderizar la escena. Procura siempre mantener las transparencias al mínimo y usar Alpha Blend sólo cuando sea necesario; de lo contrario, se prefiere Alpha Clip antes que Alpha Blend.
Mapas Emisivos
Un mapa emissive es un tipo de mapa de textura usado para controlar la autoiluminación o la luz emitida de una superficie en una escena 3D. Es un componente del shader que determina cuánta luz (y color de luz) emite una parte particular de un modelo 3D, independientemente de las fuentes de luz externas. Los emissive maps se usan comúnmente para simular materiales u objetos que parecen emitir su propia luz.
En este ejemplo podemos ver el uso de un emissive map combinado con la intensidad emisiva en un entorno que usa postprocesado de glow para probar aproximadamente cómo se comporta el emissive en world.
Mapas Normales
Un normal map es un tipo de textura utilizada 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, grietas y otras irregularidades de superficie. También permite mantener los propios objetos más ligeros, ya que muchos detalles pueden estar en la capa del normal map en lugar de 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.
Optimización de Texturas
El proceso de optimizar texturas aporta muchos beneficios al renderizar la escena en el explorer pero también es una buena manera 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 se ejecute mucho más fluida y rápida, haciendo que sea más rápido de descargar y más fácil de renderizar (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 almacenamiento en los servidores de contenido de la comunidad.
Usar Texture Atlases y/o Trim Sheets te dará más flexibilidad para iterar la creación de tu escena y consistencia 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 los 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 él, 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 los draw calls y tu escena en 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 múltiples modelos.
📔 Nota: el formato .glb por defecto siempre tiene 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 sencilla escena sci-fi en Blender.
Esta escena contiene el entorno base para los modelos estáticos pero también hay otros dos assets, un droid y una nave espacial que queremos exportar por separado para moverlos más tarde 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 emisiva y una textura UI sci-fi 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 droid.
Pero tenemos un problema: los archivos .glb tienen las texturas embebidas, así que si estás exportando diferentes assets que reutilizan las texturas, estas se duplicarán cada vez que haya un nuevo asset en la carpeta. Para evitar texturas duplicadas podemos usar esta útil herramienta.
⚠️ 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 el terminal arrastrando la carpeta dentro del terminal.
2 - Arrastra texture-extractor.sh al terminal.
3 - Ejecuta el comando. Puede tardar unos segundos en 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 el "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 app no reconocida, ve a Más información y luego Ejecutar de todos modos.
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 terminado, 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 ahora 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.
⚠️ Después de completar este paso, es crucial verificar que cada textura siga las directrices. Si las texturas no siguen las directrices o son demasiado pesadas, optimízalas para aligerarlas antes de desplegar. El tamaño de textura recomendado para escenas con buen rendimiento es 512x512px. También revisa la resolución; imágenes con más de 72 DPI afectarían el rendimiento y no harán que la imagen se vea mejor.
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 mesh, varios meshes comparten una textura más grande.
Puedes crear un texture atlas antes de hacer el asset, lo que significa que el asset se UV-unwrapping según el texture atlas. Esto requiere cierta 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 del gaming 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 detalles pequeños 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 de 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 utilizando Blender.
Nomenclatura de Texturas
Es crucial nombrar correctamente nuestras texturas. Tener una nomenclatura correcta para la textura va a:
Hacer tu pipeline de arte más eficiente, flexible, organizado, fácil de identificar y modificar si es necesario.
Evitar la superposición de texturas con el mismo nombre usando el texture extractor u otras herramientas.
Evitar problemas de texturas superpuestas cuando se usan Asset Bundles.
Forma más eficiente de localizar puntos problemáticos al analizar la escena.
Cómo nombrar correctamente tus Texturas:
Nombre del asset debe representar claramente lo que es la textura.
Los nombres de las texturas deben empezar con el prefijo
T_.El nombre de la textura debe 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 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 iniciando el nombre de la textura con -
T_Parquet_D,T_Floor_R,T_Pipes_MT,🔴 Evita iniciando el nombre de la 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; algunos son gratuitos y otros de pago. Para nombrar algunos:
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 online que puedes usar para hacer tus texturas más ligeras. Para nombrar algunos:
CompressPNG: https://compresspng.com/
TinyPNG: https://tinypng.com/
FreeConvert: https://www.freeconvert.com/
Última actualización