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 quieres para tu scene. En esta sección encontrarás todo lo que necesitas saber para crear tus texturas, sus limitaciones, nodes en Blender y cómo optimizarlas para que rindan al máximo.
💡 Consejo: instala el plugin Decentraland Tools Blender plugin. Incluye varias funciones útiles para ayudarte a editar y exportar modelos 3D, wearables y emotes.
Limitaciones
Restricciones del tamaño de textura
Actualmente, el Decentraland Explorer comprime las textures a un máximo de 1024px con fines de optimización usando un Asset Bundle Converter después de que la scene se haya subido a los content servers. ¡Asegúrate de tener en cuenta estas limitaciones al crear tus assets!
Otro punto importante a tener en cuenta es que las textures siempre deben ser potencias de dos; cualquier texture que no siga esta especificación puede traer problemas al renderizar la scene.
Los tamaños de texture 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. 1024 es el número máximo que permitimos para el tamaño de una texture. Este es un requisito bastante común entre otros motores de renderizado; se debe 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 las textures es 1024x1024, hemos encontrado que este es el tamaño óptimo para transportarse a través de redes domésticas y ofrecer experiencias razonables de carga/calidad.
Ejemplos de otros tamaños válidos:
32x32px
64x32px
512x256px
512x512px
1024x1024pxPor otro lado, hay un límite de textures por parcel:
UVMapping
UVmapping es el proceso de desplegar las faces de tu modelo 3D en una coordenada 2D que luego se usará para añadir los distintos maps a tus assets. Es una parte clave del proceso de creación. Hacer un unwrap correcto de tus modelos es un factor clave para aprovechar al máximo la resolución de tus modelos y también organizará tus maps para que sean flexibles a las modificaciones.
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 unwrap de UVs hecho por [Blender Guru] (https://www.youtube.com/@blenderguru) que explica cómo hacer unwrap de un modelo más complejo:
Maps
En la sección de materials explicamos cómo Decentraland trabaja con los shaders PBR. En esta sección te mostraremos cómo cada texture map modifica el shader y el aspecto y la sensación del objeto 3D que luego se exportará al World.
Diffuse Maps
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 una sensación coherentes para tu experiencia.
Aquí tienes un generador de paletas gratuito muy interesante por si lo necesitas!
Coolors: https://coolors.co/
O alguna inspiración de paletas proporcionada por películas increíbles:
Movies in Color: https://moviesincolor.com/
Metallic Maps
En un Metallic map, el mapa en escala de grises representa el grado de metalness 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 texture afectan al modelo. Las franjas oscuras son opacas, mientras que la franja blanca se comporta según las propiedades del metallic shader y el gris es una mezcla entre ambos.
Roughness Maps
En un roughness map, las zonas más oscuras corresponden a superficies más lisas, mientras que las zonas más brillantes corresponden a superficies más rugosas. Esta representación en escala de grises la utilizan los motores de renderizado para determinar cómo se debe dispersar o reflejar la luz en distintos puntos de la superficie.
Transparent Maps
Alpha Clip
Alpha Clip en Blender, cuando se usa con una texture, implica usar el canal alpha de la texture para determinar qué partes del material deben ser visibles. Los píxeles con valores alpha 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 texture.
En el siguiente ejemplo usamos un material con alpha clip, utilizando 2 textures, el color diffuse y la texture alpha en blanco y negro, conectando el color al canal alpha.
Como resultado podemos ver que las áreas pintadas en negro se descartan mientras que el área blanca se está renderizando
Alpha Blend
Alpha Blend te permite elegir valores intermedios por región.
Alpha Blend en Blender, cuando se usa con una texture, implica mezclar las áreas transparentes y opacas de la texture según su canal alpha. Esto permite que la texture combine suavemente las partes visibles y las transparentes, interactuando de forma natural con el fondo u otros objetos de la scene.
Mientras que Alpha Clip renderiza valores de 0 o 1 (en un umbral específico), Alpha Blend interpola los valores entre 0 y 1. En el ejemplo anterior, el material de alpha blend muestra la transición completa del degradado, mientras que alpha clip excluye parte de la texture establecida por el umbral de clip.
🔥Consejo de optimización🔥
Ten en cuenta que las textures transparentes (RGB+A) siempre son más costosas en términos de rendimiento que usar un valor en escala de grises para las transparencias.
La transparencia siempre es una operación costosa al renderizar la scene. Intenta mantener siempre 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.
Emissive Maps
Un emissive map es un tipo de texture map utilizado para controlar la autoiluminación o la luz emitida de una superficie en una scene 3D. Es un componente del shader que determina cuánta luz (y de qué color de luz) emite una parte concreta 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 emissive strength en un entorno que usa glow postprocessing para probar aproximadamente cómo se comporta el emissive en el world.
Normal Maps
Un normal map es un tipo de texture 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 relieves, hendiduras y otras irregularidades de la superficie. También te permite mantener los objetos más ligeros, ya que muchos detalles pueden proporcionarse 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 texture y el Principled BSDF shader.
⚠️Importante⚠️: Nunca uses una texture como albedo y normal al mismo tiempo porque puede crear problemas al renderizar la scene.
Optimizando Textures
El proceso de optimización de textures aporta muchos beneficios al renderizar la scene en el Explorer, pero también es una buena forma de mantener el estilo de tu scene consistente y más flexible durante el proceso de diseño. Algunos de esos beneficios son:
Tener textures optimizadas en tamaño y compresión hará que la scene funcione mucho más fluida y rápida, facilitando la descarga y el renderizado (especialmente para los players que tienen una conexión a internet lenta).
Reduce la cantidad de memoria y potencia de procesamiento necesarias para renderizar tu experiencia, lo que se traduce en una mejor experiencia de usuario para tus players.
Ahorra almacenamiento en los content servers de la comunidad.
Usar Texture Atlases y/o Trim Sheets te dará más flexibilidad para iterar en la creación de tu scene y coherencia de estilo entre los objects. Usando estas técnicas puedes intercambiar textures, ajustar colores o patrones fácilmente en lugar de hacerlo individualmente para cada model.
Compartir textures entre models permite tener menos textures por scene, reduciendo drásticamente los draw calls en el juego. Si estás trabajando con glbs (con textures embebidas) encontrarás un extruder en las siguientes guías para extraer las textures de ellos, redirigiendo a los models para que usen la misma texture.
Texturas compartidas entre modelos glTF
Una práctica sabia y común para optimizar tu scene es compartir textures y materials entre models a lo largo de la scene. Hacerlo reducirá drásticamente los draw calls y tu scene de Decentraland funcionará mucho más fluida.
La siguiente herramienta basada en glTF pipeline, ofrece algunas optimizaciones que harán que los modelos 3D sean más ligeros y se descarguen más rápido para los players de tu scene.
Mac: MAC GLB Extractor
PC: PC GLB Extractor
Convierte el formato .gltf en .glb, que es binario y por lo tanto ocupa mucho menos. También coloca los archivos de texture fuera del modelo 3D, lo que te permite usar la misma texture en múltiples models.
📔 Nota: por defecto, el formato .glb siempre tiene textures embebidas en el archivo. El engine no puede reconocer dos textures embebidas como si fueran 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 scene contiene el entorno base para los models estáticos, pero también hay otros dos assets, un droid y una spaceship que queremos exportar por separado para moverlos después mediante código, de modo que puedan interactuar con los players. En este caso usamos 4 textures (una para el floor, un atlas de color para la mayoría de los assets, una emissive y una texture UI sci-fi para los panels)
Una vez exportamos todos estos assets a la carpeta models tenemos 3 models: la scene estática del entorno, la spaceship y el droid.
Pero tenemos un problema: los archivos .glb tienen las textures embebidas, así que si estás exportando distintos assets que reutilizan las textures, estas se duplicarán cada vez que haya un nuevo asset en la carpeta. Para evitar tener textures duplicadas podemos usar esta útil herramienta.
⚠️ NOTA IMPORTANTE: Antes de usar la herramienta haz una COPIA DE SEGURIDAD de tus models, ¡por si acaso algo sale mal!!!
En Mac
Una vez que hayas exportado todos los assets a tu carpeta models, puedes arrastrar el archivo de script hasta ella.
1 - Abre la carpeta en la terminal arrastrando la carpeta hasta ella.
2 - Arrastra texture-extractor.sh a la 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 textures extraídas.
5 - ¡Reemplaza todos los assets por los nuevos! Además, una vez terminado, 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 de 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 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 textures extraídas.
5 - Reemplaza todos los assets por los nuevos. Una vez terminado, elimina el script "texture-extractor.bat" y la carpeta vacía "out".
Si sigues todos los pasos, tu scene será mucho más rápida ahora y los assets compartirán la misma texture. ¡Cuando trabajamos con varios assets y scenes grandes, la mejora es bastante notable! ¡Con esta herramienta puedes ahorrar bastantes megabytes de información!
⚠️ Después de completar este paso, es crucial comprobar que cada texture siga las pautas. Si las textures no siguen las pautas o son demasiado pesadas, optimízalas para que sean más ligeras antes de desplegar. El tamaño de texture recomendado para scenes con buen rendimiento es 1024x1024. Comprueba también la resolución: las imágenes con más de 72 DPI afectarían al 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 texture para cada mesh, varios meshes comparten una texture más grande.
Puedes crear un texture atlas antes de hacer el asset, lo que significa que el asset se hace unwrap en UV según el texture atlas. Esto requiere una planificación temprana al crear la texture.
Alternativamente, puedes crear el texture atlas después de terminar el asset fusionando textures en un software de pintura. Sin embargo, eso también significa que las UV islands deben reorganizarse según la texture.
A continuación hay una imagen que muestra varios objetos 3D que usan un mismo set de textures:
Otra forma de hacer Atlases es usar Trim Sheets, una técnica común en modelado 3D y desarrollo de juegos que los grandes estudios y la industria del videojuego usan para asegurar coherencia visual y un art pipeline eficiente. Trim Sheets es el uso de una sola imagen o texture que contiene múltiples detalles pequeños o elementos que pueden aplicarse a distintas partes de un model. Esta técnica es muy útil al crear scenes grandes y debe considerarse en la primera etapa del art pipeline.
Un ejemplo en collage de un Trim Sheet que usa una texture diffuse, normal y emissive.
Hay un gran tutorial de Jennifer McGarry que explica el uso de Trim Sheets usando Blender!
Nomenclatura de textures
Es crucial nombrar correctamente nuestras textures. Tener una nomenclatura correcta para la texture:
Harás que tu art pipeline sea más eficiente, flexible, organizado, fácil de localizar y modificar si es necesario.
Evitarás superponer textures con el mismo nombre al usar el texture extractor u otras tools.
Evitarás problemas de superposición de textures al usar Asset Bundles.
Una forma más eficiente de detectar puntos conflictivos al analizar la scene.
Cómo nombrar correctamente tus Textures:
Nombre del asset debe representar claramente qué es la texture.
El nombre de las textures debe comenzar con el prefijo
T_.El nombre de la texture debe terminar con el sufijo que define el tipo de texture:
_D- Diffuse/Color Map_A- Alpha Texture_MT- Metálico_R- Roughness_N- Normal Map_E- Emisión
Ejemplo: Si es un diffuse map de texture 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:
🟢 nombres - iniciar el nombre de la texture con -
T_Parquet_D,T_Floor_R,T_Pipes_MT,🔴 Evita iniciar el nombre de la texture con -
Image_,sprite_,Sin título
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 (Gratis):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 textures más ligeras. Por nombrar algunos:
CompressPNG: https://compresspng.com/
TinyPNG: https://tinypng.com/
FreeConvert: https://www.freeconvert.com/
Última actualización