Como desenhar contornos em jogos

• Introdução

  • A renderização de contorno em jogos é frequentemente usada por razões estéticas ou para apoiar a jogabilidade. Por exemplo, em Sable é usada para criar um estilo de história em quadrinhos, enquanto em The Last of Us ela é usada para destacar inimigos.

• Efeito Rim

  • Técnica

    • É possível renderizar contornos nas bordas dos objetos usando o efeito de Fresnel, que é mais forte nas extremidades do objeto.

  • Implementação

    • Usa-se um shader customizado com efeito de Fresnel implementado para renderizar o contorno dos objetos. Isso funciona bem para objetos suaves, como esferas ou cápsulas, mas não é adequado para objetos pontiagudos, como cubos.

• Extrusão de vértices

  • Técnica

    • Formam-se contornos usando uma cópia do objeto original. Aumenta-se os vértices da cópia para que ela fique maior que o original.

  • Direção de extrusão

    • Ajusta-se o tamanho do objeto escolhendo a direção de deslocamento dos vértices. Move-se os vértices no espaço do objeto para formar o contorno.

  • Espaço de extrusão

    • Existem métodos para mover os vértices no espaço do objeto e no espaço de clip. O deslocamento no espaço de clip oferece contornos uniformes.

  • Máscara

    • Remove-se a face frontal da malha duplicada para que apenas o contorno seja visível.

• Buffer de desfoque

  • Técnica

    • Renderiza-se a silhueta do objeto para um buffer e depois aplica-se desfoque para formar contornos.

  • Buffer de silhueta

    • Cria-se um buffer de silhueta renderizando o objeto com uma cor única.

  • Passagem de desfoque

    • Usa-se uma passada de desfoque para expandir o buffer de silhueta, geralmente com box blur ou Gaussian blur para melhorar o desempenho.

  • Passagem de contorno

    • Combina-se a silhueta desfocada com a cena original para formar os contornos.

• Algoritmo Jump Flood

  • Utiliza-se o algoritmo jump flood para renderizar contornos. Ele permite renderizar contornos largos com baixo custo de desempenho.

• Detecção de bordas

  • Técnica

    • Uma passada de tela inteira é usada para detectar descontinuidades na cena e renderizar os contornos.

  • Detecção de descontinuidade

    • Detecta-se descontinuidade usando os operadores Roberts Cross ou Sobel.

  • Fontes de descontinuidade

    • Detecta-se descontinuidade em profundidade, normal e textura de cor para formar contornos.

  • Ajuste de detecção de borda

    • Ajusta-se o limiar usado na detecção de descontinuidade para remover artefatos.

  • Fonte de descontinuidade personalizada

    • É possível controlar os contornos fornecendo uma fonte de descontinuidade personalizada.

• Conclusão

  • Existem cinco formas de desenhar contornos, oferecendo compensações entre desempenho, fidelidade visual e ajustes manuais.

[GN⁺]

Comentário do Hacker News

• Li com muito interesse o artigo sobre o algoritmo Jump Flood. É divertido pensar em várias abordagens em nível de pixel.

  • É um método muito inteligente para gerar SDF (Signed Distance Field). O que chama atenção é que ele consegue gerar contornos da largura desejada em tempo linear.
  • O SDF pode ser usado de várias formas, como vetorial, baseado em função ou baseado em texel/voxel. O Houdini suporta muito bem SDF raster e também tem versão gratuita.
  • O SDF é útil em diversos campos.

• Ele propõe obter contornos renderizando o modelo com uma cor única e, em seguida, detectando bordas. Isso exige uma passada extra de renderização.

• Estou interessado em projetos de P&D para gráficos 3D estilizados. Há várias perguntas sem resposta.

  • Como reduzir o detalhe de um modelo 3D renderizado em estilo cartoon conforme a câmera dá zoom out
  • Como renderizar um fundo 3D com estilo aquarela
  • Como renderizar fumaça, fogo, árvores e coisas do tipo em um jogo 3D estilizado
  • Como ajustar automaticamente o modelo com uma câmera com movimento livre
  • Como seria um ideal editor de malha e fundo em renderizadores 3D estilizados
  • A possibilidade de renderizar pixel art retrô a partir de modelos 3D simples
  • Como tornar o mundo de um jogo 3D mais fisicamente preciso por meio da estilização

• No jogo Astral Divide, foi desenvolvida uma técnica semelhante ao blur buffer. Usa antialialing para formar as bordas. É barata em termos de performance e simples de implementar.

• Tenho paixão por arte técnica e espero melhorias no pipeline de compute shader do Godot. A configuração atual do plugin compositor ainda é meio complicada.

• Fico curioso se os desenvolvedores migraram para Unreal e Godot após a polêmica de preços da Unity.

• Ele saiu do desenvolvimento de aplicativos VR para desenvolvimento web, mas sente falta da sensação mágica de trabalhar com gráficos 3D, colisão e shaders.

• O resultado da renderização com detecção de borda ficou muito bom, com cara de uma cena do gibi holandês Franka.

• Encontrei uma ótima nota sobre o método de detecção de borda proposto pelo desenvolvedor da Mars First Logistics.

• Uma sugestão simples para desenhar contornos

  • Criar um array que armazene as arestas únicas de cada face
  • Transformar as arestas para o espaço de visão e desenhá-las conforme certas condições