# Textures Las Textures 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 Textures, limitaciones, nodos en Blender y cómo optimizarlas para que rindan al máximo. ## Limitaciones ### Restricciones de tamaño de Texture 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 power of two; cualquier texture que no siga esta especificación puede generar 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, 1024 ``` > Esta secuencia está formada por powers of two: `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 rendering engines; 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 las textures es 1024x1024**, hemos comprobado que este es el tamaño óptimo para transportarse 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 1024x1024px ``` Por otro lado, existe un límite de textures por parcel: ``` log2(n+1) x 10 Cantidad de textures por parcel. Incluye textures importadas como parte de modelos. ``` ## 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 diferentes 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 exprimir la resolución de tus modelos y además organizará tus maps para que sean flexibles a modificaciones. Para saber más sobre UV Unwrapping puedes ver este increíble video hecho por la Blender Foundation: [![Video Preview](https://i.ytimg.com/vi/Y7M-B6xnaEM/maxresdefault.jpg)](https://youtu.be/Y7M-B6xnaEM?si=qMnWTMsXxC-vxZAH) También hay otro gran tutorial de nivel intermedio para hacer unwrap de UVs hecho por \[Blender Guru] () que explica cómo desplegar un modelo más complejo: [![Video Preview](https://i.ytimg.com/vi/scPSP_U858k/maxresdefault.jpg)](https://youtu.be/scPSP_U858k?si=Uw0xHbv9jtqVstDS) ## Maps En la [sección de materials](https://docs.decentraland.org/creator/3d-modeling/materials/) explicamos cómo Decentraland funciona con los shaders PBR. En esta sección te mostraremos cómo cada texture map modifica el shader y el aspecto 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 sensación cohesivos para tu experiencia. ![](/files/1e7bf31cf095ac4698b59e1742c3207c4b0a120c) Aquí tienes un generador de paletas gratuito por si lo necesitas. * **Coolors:** O algo de inspiración de paletas proporcionada por películas increíbles: * **Movies in Color:** ## 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. ![](/files/11def3fb4ed3ffa5f95b6850d60021b1d78a4691) *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 shader metálico y el gris siendo una mezcla entre ambas.* ## Roughness Maps En un roughness map, las áreas más oscuras corresponden a superficies más suaves, mientras que las áreas más brillantes corresponden a superficies más rugosas. Esta representación en escala de grises es usada por los rendering engines para determinar cómo la luz debe dispersarse o reflejarse en distintos puntos de la superficie. ![](/files/1fd1daa4f351a6f41b7ad3c0f0db32eec608780c) ![](/files/3ea5b66fef022b31b7131f08e85f158f2f257e66) ## Transparent Maps ### Alpha Clip Alpha Clip en Blender, cuando se usa con una texture, implica usar el alpha channel 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, usando 2 textures, el color diffuse y la alpha texture en blanco y negro conectando el color al alpha channel. ![](/files/2de8de47899d52d429c50309f97401df2aaa69ea) ![](/files/6c458346ce96e743e2db2a5bebf1bda8a3613304) ![](/files/5b1864b95002cc3db31d1259a2095025fa5734b7) *Como resultado podemos ver que las áreas pintadas en negro son descartadas 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 basándose en su alpha channel. Esto permite que la texture combine suavemente tanto las porciones visibles como las translúcidas, interactuando de forma natural con el fondo u otros objetos en la scene. ![](/files/fc38e72e51b9cc973b35c090305744602c672d53) *Mientras que Alpha Clip render values siendo 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 gradiente mientras que el alpha clip excluye parte del set de texture por el clip threshold* {% hint style="warning" %} **🔥Consejo de optimización🔥** * Ten en cuenta que las transparent textures (RGB+A) siempre son más costosas en términos de performance que usar un valor en escala de grises para 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. {% endhint %} ## Emissive Maps Un emissive map es un tipo de texture map usado 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) emite una parte particular de un modelo 3D, independientemente de fuentes de luz externas. Los emissive maps se usan comúnmente para simular materiales u objetos que parecen emitir su propia luz. ![](/files/995de7b629dd93d5017b61de22468c8810ac363e) *En este ejemplo podemos ver el uso de un emissive map combinado con emissive strenght 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 usada 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 aumentar el realismo de modelos low-poly añadiendo la apariencia de bultos, grietas y otras irregularidades de la superficie. También te permite mantener los objetos en sí más ligeros, ya que muchos detalles pueden proporcionarse en la capa del normal map en lugar de mediante geometría compleja. ![](/files/a25c78d63fdc3a5aa312a7cad0f0e2002b51f4ef) ![](/files/1e27012b0740e7c18197c8ea9988e972d4a3cf05) 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. ![](/files/f304759162d8f300fe64bf6da5c84f6d3e13e735) {% hint style="warning" %} **⚠️Importante⚠️:** Nunca uses una texture como albedo y normal al mismo tiempo porque puede crear problemas al renderizar la scene. {% endhint %} ## Optimización de 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 estos beneficios son: * Tener textures optimizadas en tamaño y compresión hará que la scene funcione de manera 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 que tienen una conexión a internet lenta). * Reduce la cantidad de memoria y potencia de procesamiento necesarias para renderizar tu experiencia, lo que resulta en una mejor experiencia de usuario para tus players. * Ahorra almacenamiento en los community content servers. * Usar **Texture Atlases** y/o **Trim Sheets** te dará más flexibilidad para iterar la creación de tu scene y coherencia de estilo entre los objetos. Usando estas técnicas puedes intercambiar textures fácilmente, ajustar colores o patrones en lugar de hacerlo individualmente para cada modelo. * Compartir textures entre modelos permite tener menos textures por scene, reduciendo drásticamente los draw calls en el game. Si estás trabajando con glbs (con textures embebidas) encontrarás un extruder en las siguientes pautas para extraer las textures de ellos, redirigiendo los modelos para usar la misma texture. ## Shared Textures Between glTFs Models Una práctica sabia y común para optimizar tu scene es compartir textures y materials entre modelos a lo largo de la scene. Hacer esto reducirá drásticamente los draw calls y tu scene de Decentraland funcionará mucho más fluida. La siguiente herramienta basada en [**glTF pipeline**](https://github.com/AnalyticalGraphicsInc/gltf-pipeline)**,** ofrece algunas optimizaciones que harán que los modelos 3D sean más ligeros y más rápidos de descargar para los players en tu scene. **Mac:** [MAC GLB Extractor](https://github.com/decentraland/docs-creator/blob/main/images/3d-models-and-animations/glb-extractor/texture_extractor.sh) **PC:** [PC GLB Extractor](https://github.com/decentraland/docs-creator/blob/main/images/3d-models-and-animations/glb-extractor/glb_texture_extract.bat) Convierte el formato .gltf en .glb, que es binario y por 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 modelos. > 📔 Nota: el formato .glb por defecto siempre tiene textures incrustadas en el archivo. El engine no puede reconocer dos textures incrustadas como la misma; necesitan ser archivos externos que compartan el mismo hash. ### Cómo usar GLB Texture Extractor En este ejemplo de scene, tenemos una simple scene sci-fi en Blender. ![](/files/06014d510d4c43d34973ef2906086e605bcc1d21) Esta scene contiene el entorno base para los modelos estáticos, pero también hay otros dos assets, un droid y una spaceship que queremos exportar por separado para poder moverlos después por código, de modo que puedan interactuar con los players. En este caso usamos 4 textures (una para el floor, un atlas color map para la mayoría de los assets, una emissive y una texture sci-fi de UI para los panels) ![](/files/87a633f102a734aae799ef3bc7e9da51dc3e825b) ![](/files/b1a6f6c7e832b5375868c3d0ef32a0760028cfbe) Una vez exportamos todos estos assets a la carpeta de modelos tenemos 3 modelos: la scene estática del entorno, la spaceship y el droid. ![](/files/4d396195fbe8f6421f106753e4297434a397d4d7) 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. {% hint style="warning" %} ⚠️ NOTA IMPORTANTE: antes de usar la herramienta, haz un BACKUP de tus modelos, ¡por si algo sale mal!!! {% endhint %} **En Mac** Una vez que hayas exportado todos los assets a tu carpeta de modelos, puedes arrastrar el archivo script hasta ella. ![](/files/13caa149890192174297c546637bd6cc58b88e87) 1 - Abre la carpeta en la terminal arrastrando la carpeta hasta ella. ![](/files/0a615759763ed8b12f075ffd958abf08994fd4d1) 2 - Arrastra el texture-extractor.sh a la terminal. ![](/files/c19d1845b9b8a87b99f67cd348fa4a37947d9120) 3 - Ejecuta el comando. Puede tardar unos segundos en procesar todos los assets. Después de eso, verás algo como esto: ![](/files/5436b1de6644c2ef986f06e2c6309178978213c6) 4 - Ve a tu carpeta de modelos y habrá una nueva carpeta llamada "out" en la que verás tus nuevos assets con las textures extraídas. ![](/files/4780d8275704c1212daa23e9bbba401a15387b5c) 5 - ¡Reemplaza todos los assets por los nuevos! Además, una vez que termines borra "texture-extractor.sh" y la carpeta vacía "out". ![](/files/7dec8ef17230f55846a5d1db1257fd546e70c846) **En Windows** Una vez que hayas exportado todos los assets a tu carpeta de modelos, puedes arrastrar el archivo script dentro de ella. ![](/files/86719db21c8f440fd78662b837b0117fff59df1e) 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 a **Ejecutar de todos modos**. ![](/files/38f84be814ce16410c723bcdc0c6df7fdee707f1) ![](/files/ea509038bd56d46a1204fde9b5dda8b6aafa7ae0) 2 - El script generará una carpeta llamada out, allí encontrarás todos los nuevos archivos .glb con sus textures extraídas. ![](/files/ba404457e8d4d230a7a26d8390050b32bdbc136a) 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 y los assets compartirán la misma texture! Cuando trabajamos con varios assets y escenas grandes, ¡la mejora es bastante notable! ¡Con esta herramienta puedes ahorrar bastantes megabytes de información! {% hint style="warning" %} ⚠️ 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 deploy. El tamaño recomendado de texture para escenas performantes es 1024x1024. Comprueba también la resolución; las imágenes con más de 72 DPI afectarían al performance y no harán que la imagen se vea mejor. {% endhint %} ## 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 UV-unwrapped según el texture atlas. Esto requiere cierta planificación temprana al crear la texture. Alternativamente, puedes crear el texture atlas después de que el asset esté terminado, combinando textures en software de pintura. Sin embargo, esto 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 solo set de texture: ![](/files/0945f9eb7e6b2dce79ef9d632e7e902411f13cca) ![](/files/ae717d0483ff058405a5866cc599c59182fd0a20) Otra forma de hacer Atlases es usando Trim Sheets, una técnica común en modelado 3D y desarrollo de videojuegos que los grandes estudios y la industria del videojuego usan para garantizar consistencia visual y un pipeline de arte eficiente. Trim Sheets es el uso de una sola imagen o texture 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. ![](/files/1b9b9044f5a0df6d4c5a9e256b2300e7a97f8806) *Un ejemplo en collage de un Trim Sheet que usa una texture diffuse, normal y emissive.* Hay un gran [tutorial](https://www.artstation.com/blogs/jennifermcgarry/yd4Q/jenns-guide-to-trim-sheets) de [Jennifer McGarry](https://www.artstation.com/jennifermcgarry/blog) que explica el uso de Trim Sheets usando Blender. ## Nomenclatura de Textures **Es crucial nombrar correctamente nuestras textures.** Tener un nombre correcto para la texture: * Harà que tu pipeline de arte sea más eficiente, flexible, organizado, fácil de dirigir y modificar si es necesario. * Evitará que se superpongan textures con el mismo nombre al usar el texture extractor u otras herramientas. * Evitará problemas de superposición de textures al usar Asset Bundles. * Es una forma más eficiente de detectar problemas de puntos críticos al analizar la scene. **Cómo nombrar correctamente tus Textures:** * **Asset name** debe representar claramente qué es la texture. * Los nombres de las Textures deben 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` - **Metallic** * `_R` - **Roughness** * `_N` **- Normal Map** * `_E` - **Emission** Ejemplo: si es un diffuse map de una texture de ladrillo para una wall, 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:** * 🟢 **Preferir** comenzar el nombre de la texture con - `T_Parquet_D`, `T_Floor_R`, `T_Pipes_MT`, * 🔴 **Evitar** comenzar el nombre de la texture 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)**: * **Zen UV:** * **Uvpackmaster 3:** ### Compresores de imágenes Hay varios compresores de imágenes en línea que puedes usar para hacer tus textures más ligeras. Por nombrar algunos: * **CompressPNG:** * **TinyPNG:** * **FreeConvert:** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.decentraland.org/creator/content-creator-es/modelado-3d-y-animaciones/textures.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.