Pular para o conteúdo
Estilizar · TécnicaIntermediário

Contornos

Desenhar linhas de tinta em volta das silhuetas e ao longo das bordas dentro da imagem.

UVPosiçãoNormalTelaVérticeTela / pós

Cards

2 exemplos ao vivo para ajustar, aprender e copiar.

Como funciona

São as linhas que fazem uma renderização parecer desenho. Há duas famílias de formas de obtê-las, e elas falham em lugares opostos; é por isso que esta técnica tem dois cards.

Geometria: a casca invertida. Desenhe a malha uma segunda vez, um pouco inflada ao longo das normais, na cor da linha, descartando as faces da frente. Só o lado de dentro da parte de trás dessa casca é desenhado, e a malha de verdade esconde tudo, menos uma borda em volta da silhueta. Isso roda no estágio de vértice, não precisa ler a tela e funciona em qualquer engine que desenhe um segundo passe de material. Só desenha contornos, onde a superfície vira de costas para a câmera, e custa um segundo desenho de cada malha contornada.

Imagem: detecção de bordas. Renderize a cena primeiro e depois rode um passe de pós-processamento que compara cada pixel com os vizinhos por meio de um pequeno kernel, como o operador de Sobel, e põe tinta onde a imagem muda de repente. Um único passe de tela inteira contorna tudo de uma vez, inclusive as bordas internas, a um custo que não cresce com o número de malhas. Ele só vê o que foi parar na tela, então perde bordas entre duas superfícies da mesma cor e acha bordas em texturas que você não queria contornar.

Renderizadores de produção fazem a detecção também sobre o depth buffer e as normais, além da cor, o que encontra dobras e sobreposições que a cor sozinha não vê. O card de Sobel aqui começa só com a cor, a versão mais simples e a que qualquer passe de pós-processamento consegue fazer.

Leitura complementar