Durante a fase de prototipagem de um jogo, é comum usar uma textura xadrez para os objetos do mundo. Essa textura ajuda a dar uma noção de profundidade, escala e outras coisas. Por esses motivos, decidi implementar esse padrão no meu projeto. No entanto, essa tarefa acabou sendo muito mais trabalhosa do que eu pensava.

Por que não usar apenas um .png?

Criar um padrão de xadrez na Unity parecia uma tarefa simples para mim, até perceber que a maioria dos tutoriais sobre o assunto se limita a aplicar uma textura a um objeto ou usar apenas o nó Checkerboard puro do Shader Graph. O problema dessas abordagens, se você deseja uma textura de xadrez bem feita, é que, ao aplicar isso a um objeto e depois alterar a escala dele em apenas um dos eixos, a textura acaba se distorcendo.

O problema do nó Triplanar nativo do Shader Graph para este tipo de textura

Tentei resolver o problema do esticamento da textura usando o nó Triplanar, e funcionou bem para objetos como um plano ou um cubo. O problema surgiu quando apliquei isso a objetos curvados, como uma esfera.

foi então que percebi que o nó Triplanar funciona bem para misturar texturas orgânicas, como terra ou grama, mas não é eficaz para padrões geométricos contrastantes, como uma textura xadrez.

O segredo para implementar o padrão xadrez

Minha motivação para escrever este tutorial veio da minha própria frustração. Passei semanas buscando uma solução para criar um padrão procedural que respeitasse a escala do objeto e funcionasse bem em superfícies curvas.

Eu sei pouco sobre shaders e, sem encontrar uma solução pronta, comecei a testar várias ideias. Uma delas foi tentar recriar o nó Triplanar manualmente no Shader Graph. Isso me ensinou algo crucial para resolver o problema: isolar as faces de um objeto.

Então, pensei: "Se preciso evitar que a textura do objeto estique, primeiro eu tenho que isolar as faces do objeto e depois aplicar o padrão xadrez considerando a escala do objeto."

Isolando as faces do objeto

Todo objeto tem faces, e essas faces sempre apontam em uma direção, que chamamos de normais. A intensidade da luz que atinge as faces de um objeto curvado é calculada com base na diferença entre a direção da luz e a direção dessas normais, por exemplo.

Com base nesse raciocínio, as faces do objeto que estão voltadas na direção da luz serão iluminadas. À medida que as faces se curvam na direção oposta, a intensidade da luz que incide sobre o objeto diminui gradualmente.

É muito importante lembrar disso, pois nos mostra que podemos identificar a proximidade entre duas direções (dois vetores).

Dot Product

O Produto Escalar (ou Dot Product) é a maneira como conseguimos medir o quanto um vetor está apontado para outro, em outras palavras, funciona como um “termometro de direções”. Podemos visualizar o Produto Escalar funcionando mais ou menos da seguinte forma:

Sabendo disso, podemos criar uma máscara para isolar as faces de um objeto que estão na direção de alguma coisa.

Criando as máscaras de eixo

Como discutimos anteriormente, nós precisamos isolar cada face do nosso objeto antes de aplicarmos a textura. Isso significa que vamos ter que criar uma máscara para cada um dos dois eixos e essa máscara será responsavel por isolar as faces do objeto que estão apenas naquele eixo específico.

Para implementar isso, precisamos da direção para onde as faces do objeto estão voltadas (Normal Vector: Object) e do eixo que queremos isolar. Em seguida, usamos o Dot Product com essas duas informações para selecionar apenas as faces que apontam para esse eixo.

Nessa configuração de nós, estamos pegando as direções das faces do objeto e comparando com a direção que o eixo X (Horizontal) está apontando. Isso retorna todas as faces do objeto que estão de frente para o eixo X.

Se pararmos por aqui, existirá um problema. Nós vamos ter apenas as faces que estão viradas de frente para o eixo X, porém o nosso objeto também tem faces viradas de costas para o mesmo eixo.

Por esse motivo eu estou passando o resultado desse nó Dot Product por um nó Absolute, isso básicamente diz para o shader que “queremos tanto as faces que estão apontadas para as direções positivas (de frente), como para as direções negativas (de costas) do eixo X”.

Se você repetir esses passos também para os outros dois eixos restantes (Y e Z), conseguirá obter 3 máscaras, cada uma dessas máscaras é capaz de isolar as faces do objeto que estão apenas em um eixo específico.

Nesse passo, usamos o eixo X como exemplo mas caso esteja com dúvida, esses são os vetores que representam cada eixo:

Configurando o nó Checkerboard

Agora que temos as 3 máscaras de eixo, utilizaremos um nó Checkerboard para gerarmos a nossa textura de xadrez proceduralmente. No entanto, precisamos garantir que a nossa textura de xadrez não se estique para nenhum dos 3 eixos.

A grande sacada aqui é ajustar o número de quadrados de acordo com a escala do nosso objeto. Isso faz com que a textura se ajuste, aumentando ou diminuindo o número de quadrados ao invés de esticar enquanto a escala do objeto muda.

O nó Checkerboard nativo do Shadergraph tem uma entrada chamada Frequency, essa entrada controla a quantidade de quadrados que a textura vai ter. A nossa missão é apenas fazer com que o Frequency “saiba” a escala do objeto e ajuste a quantidade de quadrados sempre se baseando nessa escala.

Nessa configuração, usamos a saída Scale de um nó Object, essa saída retorna exatamente um Vector3 com a escala do nosso objeto. Ao passar essa saída por um nó Split, nós separamos os 3 valores que compõem esse Vector3 da escala do nosso objeto, dessa maneira podemos acessar esses valores individualmente.

O nó Split separa os eixos da escala do nosso objeto da seguinte maneira:

Essa textura será aplicada apenas nas faces do nosso objeto que estão no eixo X. Sabendo disso, para garantir que a textura não estique nas faces que estão no eixo X, precisamos utilizar as escalas corretas como referência para a entrada do Frequency.

Pense nisso da seguinte maneira: O Frequency recebe apenas um Vector2. Isso acontece porque você está trabalhando com a escala de uma textura 2D, como essa textura vai ser aplicada apenas nas faces do objeto que estão no eixo X do mundo nós podemos ignorar a escala do objeto para esse eixo. por isso estamos pegando apenas os eixos Y e Z do Split nesse exemplo.

Para montar esse Vector2, certifique-se sempre de ignorar o valor de escala do eixo para qual a textura será aplicada, assim como no exemplo acima que estamos ignorando o eixo X do Split. Como a textura já vai ser aplicada no eixo X, o valor da escala desse eixo não vai ser útil em nada para o ajuste da nossa textura.

Agora nós temos o Vector2 que vai servir para “dizer” ao nosso Frequency em qual eixo que a nossa textura deve ajustar o tamanho, evitando o esticamento. Depois disso eu multiplico esse Vector2 por uma propriedade, para poder controlar a quantidade de quarados na textura pelo próprio inspetor da unity.

Se você repetir essa configuração de nós para que a textura se ajuste também nos outros eixos (Y e Z), o resultado final será 3 texturas, cada uma configurada para ajustar a quantidade de quadrados em um eixo específico de acordo com a escala do objeto.

Aplicando as textura nas máscaras

Temos tudo o que precisamos para finalizar a nossa textura procedural de xadrez, basta ligarmos as texuras nas máscaras e conectarmos tudo.

Depois disso, basta somar os 3 nós Lerp com as texturas de cada eixo e ligar o resultado no base color. caso tenha alguma dúvida, veja o gráfico completo aqui.

Agora não importa o quão grande ou pequeno seja o objeto em um único eixo, a textura nunca vai ficar esticada e você pode aplicar essa ela em objetos curvos também sem que a mesclagem deixe a cor do objeto distorcida.