# Textures Textures são uma parte fundamental do pipeline de arte 3D para alcançar o aspeto e a sensação que pretende para a sua Scene. Nesta secção, encontrará tudo o que precisa de saber para criar as suas Textures, limitações, nodes no Blender e como otimizá-las para terem o melhor desempenho possível! ## Limitações ### Restrições de tamanho de Texture Atualmente, o Decentraland Explorer comprime as Textures a um máximo de 1024px para fins de otimização, usando um Asset Bundle Converter após a scene ser carregada para os content servers. Certifique-se de ter estas limitações em conta ao criar os seus assets! Outro ponto importante a ter em conta é que as Textures devem ser sempre power of two; quaisquer Textures que não sigam esta especificação podem causar problemas ao renderizar a scene. Os tamanhos das Textures devem usar números de largura e altura (em pixels) que correspondam aos seguintes valores: ``` 1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024 ``` > Esta sequência é composta por powers of two: `f(x) = 2 ^ x` . **1024 é o número máximo que permitimos para o tamanho de uma Texture.** Este é um requisito bastante comum noutros rendering engines, devido a otimizações internas dos processadores gráficos. A largura e a altura não precisam de ter o mesmo valor, mas ambas precisam de pertencer a esta sequência. **O tamanho recomendado para Textures é 1024x1024**, descobrimos que este é o tamanho ideal para ser transportado através de redes domésticas e para proporcionar experiências razoáveis de carregamento/qualidade. Exemplos de outros tamanhos válidos: ``` 32x32px 64x32px 512x256px 512x512px 1024x1024px ``` Por outro lado, existe um limite de Textures por Parcel: ``` log2(n+1) x 10 Quantidade de Textures por Parcel. Inclui Textures importadas como parte de modelos. ``` ## UVMapping UVmapping é o processo de desdobrar as faces do seu modelo 3D para uma coordenada 2D que será usada mais tarde para adicionar os diferentes maps aos seus assets. É uma parte fundamental do processo de criação. Fazer um unwrap correto dos seus modelos é um fator-chave para aproveitar ao máximo a resolução dos seus modelos e também organizar os seus maps para que sejam flexíveis para modificação. Para saber mais sobre UV Unwrapping, pode ver este vídeo incrível feito pela Blender Foundation: [![Video Preview](https://i.ytimg.com/vi/Y7M-B6xnaEM/maxresdefault.jpg)](https://youtu.be/Y7M-B6xnaEM?si=qMnWTMsXxC-vxZAH) Há outro excelente tutorial de nível intermédio para unwrap de UVs feito por \[Blender Guru] () que explica como fazer unwrap de um modelo mais complexo: [![Video Preview](https://i.ytimg.com/vi/scPSP_U858k/maxresdefault.jpg)](https://youtu.be/scPSP_U858k?si=Uw0xHbv9jtqVstDS) ## Maps Na [secção de materials](https://docs.decentraland.org/creator/3d-modeling/materials/) explicámos como o Decentraland funciona com os shaders PBR. Nesta secção vamos mostrar-lhe como cada texture map modifica o shader e o aspeto da 3D object que depois será exportado para o world. ## Diffuse Maps Esta é a cor base da superfície do objeto. Ter uma paleta de cores equilibrada entre os seus modelos é fundamental para alcançar um aspeto e uma sensação coesos para a sua experiência. ![](/files/8e5aa04a30fa108dc821f24fbf413e284add8a41) Aqui tem um gerador de paletas gratuito muito interessante, caso precise! * **Coolors:** Ou alguma inspiração de paletas fornecida por filmes incríveis: * **Movies in Color:** ## Metallic Maps Num Metallic map, o mapa em tons de cinzento representa o grau de metalicidade que um objeto possui, sendo branco totalmente metálico e preto não metálico. No exemplo seguinte, vemos como a luz afeta o modelo e como interage com o ambiente. ![](/files/e855bdad5826132acd204ca214c2151f4fddd3a0) *Na imagem, podemos ver como as partes escuras da texture afetam o modelo. As riscas escuras são opacas, enquanto a risca branca está a comportar-se sob as propriedades do metallic shader e o cinzento é uma mistura entre ambos.* ## Roughness Maps Num roughness map, as áreas mais escuras correspondem a superfícies mais suaves, enquanto as áreas mais brilhantes correspondem a superfícies mais ásperas. Esta representação em tons de cinzento é usada pelos rendering engines para determinar como a luz deve ser espalhada ou refletida em diferentes pontos da superfície. ![](/files/61994fb00bf32a775095c4c9040833f5e7c8f689) ![](/files/9311b2f9b0e9bda95f4730f2c4631b37d228192f) ## Transparent Maps ### Alpha Clip Alpha Clip no Blender, quando usado com uma textura, envolve usar o canal alpha da textura para determinar quais partes do material devem ficar visíveis. Pixels com valores alpha acima de um limiar especificado são mostrados, enquanto os abaixo desse limiar são descartados, criando um efeito recortado com base nas informações de transparência da texture. No exemplo seguinte, usamos um material com alpha clip, utilizando 2 Textures: a cor diffuse e a texture alpha em preto e branco, ligando a cor ao canal alpha. ![](/files/4882e41528f51fad22e074d234178a44b8cd8a12) ![](/files/bd8af6e9201848355578810f3fcef0798380f9b3) ![](/files/59443ea2b04c38d0de7fe9a332c364aed1088b08) *Como resultado, podemos ver que as áreas pintadas a preto são descartadas, enquanto a área branca está a ser renderizada* ### Alpha Blend *Alpha Blend* permite-lhe escolher valores intermédios por região. Alpha Blend no Blender, quando usado com uma textura, envolve misturar as áreas transparentes e opacas da texture com base no seu canal alpha. Isto permite que a texture combine suavemente as partes visíveis e as partes transparentes, interagindo de forma natural com o fundo ou com outros objetos na scene. ![](/files/26e9dcd685ae77f46e2e8fc195df85a0ad866a2c) *Enquanto o Alpha Clip renderiza valores 0 ou 1 (num limiar específico), o Alpha Blend interpola os valores entre 0 e 1. No exemplo acima, o material alpha blend mostra a transição completa em gradiente, enquanto o alpha clip exclui parte do texture set definida pelo limiar de clip* {% hint style="warning" %} **🔥Dica de Otimização🔥** * Tenha em conta que Textures transparentes (RGB+A) são sempre mais caras em termos de desempenho do que usar um valor em tons de cinzento para transparências. * A transparência é sempre uma operação dispendiosa ao renderizar a scene. Tente manter as transparências sempre no mínimo e use Alpha Blend apenas quando for necessário; caso contrário, Alpha Clip é preferível em vez de Alpha Blend. {% endhint %} ## Emissive Maps Um emissive map é um tipo de texture map usado para controlar a autoiluminação ou a luz emitida por uma superfície numa 3D scene. É um componente do shader que determina quanta luz (e cor de luz) uma determinada parte de um 3D model emite, independentemente de fontes de luz externas. Os emissive maps são normalmente usados para simular materiais ou objetos que parecem emitir a sua própria luz. ![](/files/8c0dbaa9fbb922e1ae64ef7635727fcf21531355) *Neste exemplo, podemos ver o uso de um emissive map combinado com emissive strenght num ambiente que usa glow postprocessing para testar aproximadamente como o emissive se comporta no world.* ## Normal Maps Um normal map é um tipo de textura usado em gráficos 3D para simular detalhes finos de superfície e criar a ilusão de geometria complexa sem alterar realmente a geometria subjacente de um modelo. É normalmente usado para melhorar o realismo de modelos low-poly, adicionando a aparência de saliências, fendas e outras irregularidades da superfície. Também lhe permite manter os objetos mais leves, uma vez que muitos detalhes podem ser fornecidos na layer do normal map em vez de geometria complexa. ![](/files/1a607441e8cc9aed3eca75d545f362fb8f3304dc) ![](/files/0a251e3dc0ee16b2dae5d13389d372310cf2a6d1) Para adicionar um normal map ao seu material usando o *Shader Editor*, terá de ligar o ***Normal Map*** node entre a textura e o *Principled BSDF* shader. ![](/files/cf19f0715e3a27e375806500e9c2ef0d484bbb5c) {% hint style="warning" %} **⚠️Importante⚠️:** Nunca use uma texture como albedo e normal ao mesmo tempo, pois isso pode criar problemas ao renderizar a scene. {% endhint %} ## Otimização de Textures O processo de otimização de textures traz muitos benefícios ao renderizar a scene no Explorer, mas também é uma boa forma de manter o estilo da sua scene consistente e mais flexível no processo de design. Alguns desses benefícios são: * Ter Textures otimizadas em tamanho e compressão fará com que a scene seja executada de forma muito mais fluida e rápida, tornando-a mais rápida de descarregar e mais fácil de renderizar (especialmente para jogadores com uma ligação à internet lenta). * Reduz a quantidade de memória e poder de processamento necessários para renderizar a sua experiência, resultando numa melhor experiência de utilizador para os seus jogadores. * Poupa armazenamento nos community content servers. * Usar **Texture Atlases** e/ou **Trim Sheets** dar-lhe-á mais flexibilidade para iterar a criação da sua scene e consistência de estilo entre os objetos. Usando estas técnicas, pode facilmente trocar Textures, ajustar cores ou padrões em vez de o fazer individualmente para cada model. * Partilhar Textures entre models permite ter menos Textures por scene, reduzindo drasticamente os draw calls no jogo. Se estiver a trabalhar com glbs (com textures embebidas), encontrará um extrator nas seguintes guidelines para extrair as Textures, redirecionando os models para usar a mesma texture. ## Textures Partilhadas Entre modelos glTF Uma prática inteligente e comum para otimizar a sua scene é partilhar Textures e materials entre models ao longo da scene. Fazer isto reduzirá drasticamente os draw calls e a sua scene do Decentraland funcionará de forma muito mais fluida. A seguinte ferramenta baseada em [**glTF pipeline**](https://github.com/AnalyticalGraphicsInc/gltf-pipeline)**,** oferece algumas otimizações que tornarão os 3D models mais leves e mais rápidos de descarregar para os jogadores na sua 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) Converte o formato .gltf em .glb, que é binário e, por isso, ocupa muito menos espaço. Também coloca os texture files fora do 3D model, o que lhe permite usar a mesma texture em vários models. > 📔 Nota: o formato .glb, por defeito, tem sempre Textures embebidas no ficheiro. O engine não consegue reconhecer duas Textures embebidas como sendo a mesma; elas precisam de ser ficheiros externos que partilhem o mesmo hash. ### Como Usar o GLB Texture Extractor Nesta scene de exemplo, temos uma simples scene sci-fi no Blender. ![](/files/cf7da1c62edd9a54df7c65e1579199f2e4ff70ef) Esta scene contém o ambiente base para os modelos estáticos, mas também existem outros dois assets, um droid e uma spaceship que queremos exportar separadamente para os podermos mover mais tarde por código, para que possam interagir com os jogadores. Neste caso, usámos 4 Textures (uma para o floor, um atlas color map para a maioria dos assets, um emissive e uma texture UI sci-fi para os panels) ![](/files/f261254c1ff897f6f5cf59287ee5fd25abaefc23) ![](/files/357802a288746db49f9afa9d15a0d568810c17b6) Depois de exportarmos todos estes assets para a pasta de models, temos 3 models: a scene estática do ambiente, a spaceship e o droid. ![](/files/cf67eb2a84d696953ab50f622a2c7284c397db4a) Mas temos um problema: os ficheiros .glb têm as Textures embebidas, por isso, se estiver a exportar assets diferentes que reutilizam as Textures, estas serão duplicadas sempre que houver um novo asset na pasta. Para evitar Textures duplicadas, podemos usar esta ferramenta útil. {% hint style="warning" %} ⚠️ NOTA IMPORTANTE: Antes de usar a ferramenta, faça um BACKUP dos seus models, caso algo corra mal!!! {% endhint %} **No Mac** Depois de ter exportado todos os assets para a sua pasta de models, pode arrastar o ficheiro de script para lá. ![](/files/6c98b72ce75dbcddfa09b014c282e9546adfe102) 1 - Abra a pasta no terminal arrastando a pasta para ele. ![](/files/b16b5e6113734ae9f7fd333fc571e63c4f8aa4ed) 2 - Arraste o texture-extractor.sh para o terminal. ![](/files/54b38d70be5fa4fca3660540ad9736fc0281ab2c) 3 - Execute o comando. Pode demorar alguns segundos a processar todos os assets. Depois disso, verá algo como isto: ![](/files/b31aef434c1e958164e8132255311c8d7a7dc43b) 4 - Vá à sua pasta de models e haverá uma nova pasta chamada "out", na qual verá os seus novos assets com as Textures extraídas. ![](/files/40162de1a244f0c2b1d94aa24a6e4c9aee7793ed) 5 - Substitua todos os assets pelos novos! Além disso, quando terminar, apague o "texture-extractor.sh" e a pasta vazia "out". ![](/files/6c0202ecc2c9733a158439a04bb27f01d9abded2) **No Windows** Depois de ter exportado todos os assets para a sua pasta de models, pode arrastar o ficheiro de script para lá. ![](/files/f54dbd1fd239d6178a66e23c2b0be69d8e70b65c) 1 - Faça duplo clique em glb\_texture\_extract.bat para extrair os ficheiros. Se o Windows o avisar sobre uma aplicação não reconhecida, vá a **Mais Informações** e depois a **Executar na mesma**. ![](/files/674c293ca19f68b9d139c2bed9a9ed4ff8fa77e5) ![](/files/e62e96363ba008d1ca02e94687d0f102609de0ad) 2 - O script irá gerar uma pasta chamada out, aí encontrará todos os novos ficheiros .glb com as Textures extraídas. ![](/files/3a56ef8a2a25514738944f846af231f89f64e92f) 5 - Substitua todos os assets pelos novos. Quando terminar, elimine o script "texture-extractor.bat" e a pasta vazia "out". Se seguir todos os passos, a sua scene ficará muito mais rápida agora e os assets irão partilhar a mesma texture! Quando trabalhamos com vários assets e grandes scenes, a melhoria é bastante percetível! Com esta ferramenta, pode poupar vários megabytes de informação! {% hint style="warning" %} ⚠️ Depois de concluir este passo, é crucial verificar se todas as Textures seguem as guidelines. Se as Textures não seguirem as guidelines ou forem demasiado pesadas, otimize-as para ficarem mais leves antes de fazer o deploy. O tamanho de Texture recomendado para scenes com bom desempenho é 1024x1024. Verifique também a resolução; imagens com mais de 72 DPI afetarão o desempenho e não farão a imagem parecer melhor. {% endhint %} ## Texture Atlas/ Trim Sheets Um texture atlas é um único ficheiro de imagem que contém dados de várias imagens menores agrupadas. Em vez de ter uma Texture para cada mesh, várias meshes partilham uma Texture maior. Pode criar um texture atlas antes de fazer o asset, o que significa que o asset é UV-unwrapped de acordo com o texture atlas. Isto requer algum planeamento prévio ao criar a Texture. Em alternativa, pode criar o texture atlas depois de o asset estar terminado, juntando Textures em software de pintura. No entanto, isto também significa que as UV islands devem ser reorganizadas de acordo com a texture. Abaixo está uma imagem que mostra vários objetos 3D que usam um conjunto de Textures: ![](/files/b71fb5ad2717bc05cecc4269be521d1e23dcc291) ![](/files/2301033f806e3e7a38d4f8b8591a453482d87da0) Outra forma de fazer Atlases é usar Trim Sheets, uma técnica comum em modelação 3D e desenvolvimento de jogos que grandes estúdios e a indústria dos jogos usam para garantir consistência visual e um pipeline de arte eficiente. Trim Sheets é a utilização de uma única imagem ou texture que contém vários pequenos detalhes ou elementos que podem ser aplicados a diferentes partes de um model. Esta técnica é muito útil ao criar grandes scenes e deve ser considerada na primeira fase do pipeline de arte. ![](/files/63520c7768670ac18ab931a79943c31ece37c2fd) *Um exemplo em colagem de um Trim Sheet que usa uma texture diffuse, normal e emissive.* Há um excelente [tutorial](https://www.artstation.com/blogs/jennifermcgarry/yd4Q/jenns-guide-to-trim-sheets) de [Jennifer McGarry](https://www.artstation.com/jennifermcgarry/blog) que explica o uso de Trim Sheets usando Blender! ## Nomeação de Textures **É crucial nomear corretamente as nossas Textures.** Ter uma nomeação correta para a texture irá: * Tornar o seu art pipeline mais eficiente, flexível, organizado, fácil de direcionar e modificar, se necessário. * Evitar sobreposição de Textures com o mesmo nome ao usar o texture extractor ou outras ferramentas. * Evitar problemas de sobreposição de Textures ao usar Asset Bundles. * Forma mais eficiente de resolver problemas ao analisar a scene. **Como nomear corretamente as suas Textures:** * **Nome do asset** deve representar claramente o que é a texture. * Os nomes das Textures devem começar com o prefixo `T_`. * O nome da Texture deve terminar com o sufixo que define o tipo de textura: * `_D` - **Diffuse/ Color Map** * `_A` - **Alpha Texture** * `_MT` - **Metallic** * `_R` - **Roughness** * `_N` **- Normal Map** * `_E` - **Emission** Exemplo: Se for um diffuse map de brick texture para uma wall, o nome `T_BrickWall_D` poderia ser adequado. Se for um Normal Map do mesmo asset, o nome poderia ser `T_BrickWall_N` **Exemplos:** * 🟢 **Preferir** começar o nome da texture com - `T_Parquet_D`, `T_Floor_R`, `T_Pipes_MT`, * 🔴 **Evitar** começar o nome da texture com - `Image_`, `sprite_`,`Untitled` ## Ferramentas Opcionais Existem muitos addons e ferramentas externas que facilitam o trabalho ao criar assets para tornar o pipeline mais rápido e eficiente; algumas são gratuitas e outras para compra, para citar algumas: ### UVTools * **UV Packer (Gratuito)**: * **Zen UV:** * **Uvpackmaster 3:** ### Comressores de Imagem Existem vários compressores de imagem online que pode usar para tornar as suas Textures mais leves. Para citar alguns: * **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-pt/modelacao-e-animacoes-3d/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.