Células de Voronoi
Divida uma superfície em células irregulares ao redor de pontos espalhados e use as distâncias e o id de cada célula para desenhá-las.
Cards
Um exemplo ao vivo para ajustar, aprender e copiar.
Como funciona
Espalhe pontos por uma superfície e entregue cada lugar ao ponto mais próximo dele. As regiões que surgem formam um
diagrama de VoronoiUma divisão do plano numa região por ponto semente, em que cada lugar pertence ao ponto mais próximo dele. As bordas ficam onde dois pontos estão à mesma distância. Diagrama de Voronoi Uma divisão do plano numa região por ponto semente, em que cada lugar pertence ao ponto mais próximo dele. As bordas ficam onde dois pontos estão à mesma distância.
O ruído celular calcula isso por pixel. Ele põe um ponto em cada célula de uma grade, num deslocamento aleatório tirado
de um hashUma função que embaralha a entrada num valor que parece aleatório, mas é sempre o mesmo para a mesma entrada. Shaders a usam para ter aleatoriedade por pixel e por célula. Hash Uma função que embaralha a entrada num valor que parece aleatório, mas é sempre o mesmo para a mesma entrada. Shaders a usam para ter aleatoriedade por pixel e por célula.h = fract(sin(dot(p, k)) × big), e procura na célula do pixel e nas oito vizinhas. Essa busca devolve três coisas
úteis, e cada visual de Voronoi é uma escolha entre elas:
- F1, a distância até o ponto mais próximo: calombos redondos, escamas e bolhas.
- F2 − F1, a distância até o segundo mais próximo menos a do mais próximo: vale zero nas bordas, então um
smoothstepUm limiar suave. Vale 0 abaixo da primeira borda, 1 acima da segunda e segue uma curva em S com as pontas planas entre elas.Fundamento
Smoothstep
Um limiar suave. Vale 0 abaixo da primeira borda, 1 acima da segunda e segue uma curva em S com as pontas planas entre elas.
t = clamp((x − e0) / (e1 − e0), 0, 1); s = t² (3 − 2t)Fontessobre ela desenha paredes, rachaduras e linhas de chumbo.- smoothstep (abre em uma nova aba)Referência
- Smoothstep (abre em uma nova aba)Referência
- O id da célula, qual ponto venceu: um valor constante por região, para cores, alturas ou materiais aleatórios por célula.
O padrão funciona em espaço de UV, num quad ou numa malha, e a mesma busca em três dimensões (27 células) funciona sobre a posição no mundo, então até uma malha sem UVs boas ganha células sem emendas.
Cada engine que traz Voronoi pronto calcula algo um pouco diferente (outro deslocamento aleatório, outra métrica de distância, outra faixa para o resultado), então um visual ajustado numa não passa para outra copiando os números. Os guias de cada plataforma dizem o que cada uma entrega.
Leitura complementar
- Cellular noise (abre em uma nova aba)Livro
- Worley noise (abre em uma nova aba)Referência
- Voronoi edges (abre em uma nova aba)Artigo
- Voronoi diagram (abre em uma nova aba)Referência
- Came glasswork (abre em uma nova aba)Referência
- length (abre em uma nova aba)Referência
- smoothstep (abre em uma nova aba)Referência
- FastNoiseLite (abre em uma nova aba)Documentação
- NoiseTexture2D (abre em uma nova aba)Documentação
- CanvasItem shaders (abre em uma nova aba)Documentação