Composição de SDF 2D

Como funciona

Um campo de distância com sinal descreve uma forma com um número por ponto: a distância até a borda, negativa por dentro. O que interessa é que distâncias se combinam. O min de dois campos é as duas formas ao mesmo tempo (uma união), o max é só onde elas se sobrepõem (uma interseção) e max(a, -b) é a primeira forma com a segunda recortada dela (uma subtração). Um mínimo suave funde duas formas numa só com uma junta arredondada, como se fossem de massinha.

Assim, uma forma complexa não precisa de fórmula própria. Um retângulo arredondado é uma caixa cuja distância foi encolhida e depois crescida de volta; uma seta é a união de dois segmentos de reta; um anel é um disco menos um disco menor. O resultado continua sendo um campo de distância, então o passo seguinte pode usá-lo do mesmo jeito.

É por isso que vale aprender a compor. Uma distância dá vários visuais de graça: o preenchimento (abaixo de zero), um contorno (perto de zero dos dois lados), um brilho ou uma sombra projetada suave (um smoothstep largo do lado de fora), cada um uma borda recortada do mesmo número. E, como a borda sai de uma distância, ela pode ser suavizada com precisão, com um pixel de largura em qualquer tamanho, usando a derivada em espaço de tela fwidth. Elementos de interface, ícones, marcadores de mapa e glifos de fonte são desenhados assim quando precisam continuar nítidos em qualquer zoom.