Círculos, caixas e linhas

Como funciona

Um shader de fragmento não desenha um círculo como um programa de desenho. Não existe um comando “círculo”. Cada pixel roda o mesmo código sozinho e decide uma coisa só: que cor eu tenho? Uma forma aparece quando essa decisão depende de onde o pixel está.

A receita tem duas partes. Primeiro, transforme a UV do pixel num número que diga a que distância ele está da forma: o comprimento do vetor até um centro, para um círculo; a distância até a borda mais próxima, para uma caixa; a distância até o ponto mais próximo de um segmento, para uma linha. Depois corte esse número com um limiar: dentro quando ele é menor que o raio, fora quando é maior. Um step duro deixa a borda serrilhada; um smoothstep ao longo de um ou dois pixels a deixa limpa e, ao longo de mais, vira um brilho suave.

Todo o resto depende do que você entrega ao limiar. Use a diferença absoluta em relação ao raio e o disco vira um anel. Faça o raio seguir um seno do tempo e o anel respira. A mesma medida, combinada com outras, é o começo dos campos de distância com sinal sobre os quais as técnicas de composição de SDF 2D e de raymarching são construídas.

Engines e ferramentas raramente trazem isso como um nó pronto, porque é pequeno demais: um length e um smoothstep, ou um nó Distance e um nó SmoothStep num grafo. É também por isso que a técnica funciona igual em qualquer lugar.