Contornos
Desenhar linhas de tinta em volta das silhuetas e ao longo das bordas dentro da imagem.
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
normaisUm vetor unitário perpendicular a uma superfície, apontando para onde ela está virada. Iluminação e efeitos Fresnel o comparam com outras direções. Normal Um vetor unitário perpendicular a uma superfície, apontando para onde ela está virada. Iluminação e efeitos Fresnel o comparam com outras direções. Shader de vértice O programa da GPU que roda uma vez para cada vértice de uma malha. Ele posiciona o vértice na tela escrevendo gl_Position e repassa valores para o shader de fragmento.
Imagem: detecção de bordas. Renderize a cena primeiro e depois rode um passe de
pós-processamentoPassadas de tela cheia rodadas em ordem sobre o quadro pronto, cada uma lendo a imagem que a anterior escreveu. Bloom, tone mapping e correção de cor ficam aqui. Cadeia de pós-processamento Passadas de tela cheia rodadas em ordem sobre o quadro pronto, cada uma lendo a imagem que a anterior escreveu. Bloom, tone mapping e correção de cor ficam aqui. Kernel Uma pequena grade de pesos. Cada pixel de saída é a soma ponderada dos vizinhos, o que desfoca, aumenta a nitidez ou encontra bordas, conforme os pesos. Operador de Sobel Um par de kernels 3×3 que medem o quanto a imagem muda na horizontal e na vertical. Combinados, dão uma força de borda por pixel, grande onde a imagem muda de repente.out = Σ weight(i, j) · texel(x + i, y + j)edge = length(vec2(gx, gy))
Renderizadores de produção fazem a detecção também sobre o depth bufferUma imagem do tamanho do framebuffer que guarda, para cada pixel, a distância da superfície mais próxima desenhada até agora. O teste de profundidade a usa para esconder o que fica atrás. Buffer de profundidade Uma imagem do tamanho do framebuffer que guarda, para cada pixel, a distância da superfície mais próxima desenhada até agora. O teste de profundidade a usa para esconder o que fica atrás.
Leitura complementar
- Relative luminance (abre em uma nova aba)Referência
- Blend modes (abre em uma nova aba)Referência
- Alpha compositing (abre em uma nova aba)Referência
- dFdx, dFdy (abre em uma nova aba)Referência
- fwidth (abre em uma nova aba)Referência
- Filterable procedurals (abre em uma nova aba)Artigo
- Kernel (image processing) (abre em uma nova aba)Referência
- Gaussian blur (abre em uma nova aba)Referência
- Sobel operator (abre em uma nova aba)Referência
- Depth testing (abre em uma nova aba)Artigo
- glDepthFunc (abre em uma nova aba)Referência
- Spatial shaders (abre em uma nova aba)Documentação
- Framebuffers (abre em uma nova aba)Artigo
- glFramebufferTexture2D (abre em uma nova aba)Referência
- EXT_color_buffer_float extension (abre em uma nova aba)Documentação
- Coordinate Systems (abre em uma nova aba)Artigo
- The OpenGL ES Shading Language, version 3.00 (abre em uma nova aba)Documentação
- Cel shading (abre em uma nova aba)Referência
- Face culling (abre em uma nova aba)Artigo
- GuiltyGearXrd's Art Style: The X Factor Between 2D and 3D (abre em uma nova aba)Vídeo
- normalize (abre em uma nova aba)Referência
- Screen-reading shaders (abre em uma nova aba)Documentação