Ajustando um shader de brilho para torná-lo melhor


9

Eu tenho um jogo simples ee assuntos são essas pequenas linhas. Ele é direcionado para iOS e Android, portanto, possui uma enorme variedade de processadores nos quais pode ser executada agora.

insira a descrição da imagem aqui

Estou tentando adicionar brilho em tempo real a eles por duas razões

  1. Estou tentando esconder o fato de que não tenho tempo de renderização para processar a suavização de serrilhado na maioria dos dispositivos.
  2. O assunto do jogo deve ser luz pura, portanto a imagem deve parecer que essas coisas são luz pura.

Estou ajustando um sombreador gaussiano separável por um bom tempo e cheguei a um ponto de frustração, não consigo fazer com que pareça certo, talvez o problema seja que estou tentando ocultar futilmente as bordas irregulares da luz enquanto isso, não deixando a luz embaçada.

Meu maior problema são todas as variáveis ​​envolvidas para torná-lo o melhor.

Eu sou muito novo em gráficos / renderizações e não sou de forma alguma um artista. Talvez a coisa mais frustrante em me render sejam todas as variáveis ​​que parecem estar envolvidas. Com brilho, vi tantas mudanças possíveis.

  • A. Adicione o modo de mesclagem, modo de mesclagem de tela ou alguma outra mistura
  • B.Pesando o borrão, e normal de forma diferente antes da combinação
  • C. O Sigma da função de sino gaussiano (eu tenho usado esta calculadora confusa, mas ela não parece dar os mesmos valores que outras pessoas possuem)
  • D. Escalares nos valores "x" enviados para a função sigma
  • E. Escala de amostra (tornando o raio de desfoque menor ou maior)
  • F. Alterando a resolução do buffer de brilho

Como encontrar as constantes "mais bonitas" ao trabalhar com tantas variáveis ​​como essa?

Também estou tendo problemas, porque o tempo entre eu fazendo um ajuste e vendo que é muito difícil ver mudanças, eu o faria em um shader toy, mas não consigo carregar esta imagem ou gerar processualmente uma como essa.

No momento, estou realmente preso ao sigma do kernel da curva de sino gaussiano, especialmente porque codifico os números e não a fórmula porque preciso da velocidade do processador. Você pode sugerir um bom sigma para usar ?

Respostas:


8

Sigma e tamanho do kernel do filtro gaussiano

Sobre como escolher o sigma e o tamanho do kernel (pixels) do Gaussian: você define o sigma com base na largura de um desfoque que deseja (julgando visualmente) e depois escolhe o tamanho do kernel com base no sigma. É um jogo de encontrar um tamanho de kernel que capte o suficiente da curva de sino (matematicamente infinita) para parecer bom, embora não seja muito caro.

Como regra geral, o tamanho do kernel deve ser pelo menos 6 vezes o sigma. Em seguida, o núcleo se estende a 3 sigmas em cada direção, o que é suficiente para cobrir quase todo o peso da curva matemática do sino. Também é bom arredondar o tamanho do pixel para o próximo número ímpar, para que o filtro seja simétrico. Por exemplo, com sigma = 1,5 px, você usaria um filtro de 9 pixels; com sigma = 2,0 px, use um filtro de 13 pixels etc.

Como alternativa, se você tiver limitações de desempenho que controlam o tamanho do kernel que você pode usar, divida por 6 para obter o máximo de sigma possível. (Observe que o sigma pode ser fracionário, pois é apenas uma entrada para a equação da curva de sino.)

A propósito, um truque para obter melhor desempenho em grandes borrões gaussianos é reduzir a amostra da imagem, realizar um desfoque menor e depois aumentar a amostra. Por exemplo, para obter um desfoque eficaz de 13 pixels, você pode reduzir a amostragem da imagem em 2x (usando a filtragem bilinear), executar um desfoque de 7 pixels e depois aumentar a amostragem (usando a filtragem bilinear). Ele parecerá quase tão bom quanto o desfoque de 13 pixels, mas será consideravelmente mais rápido.

Criando um filtro de brilho bonito

Um truque comum é usar vários gaussianos de raio diferente, somados. Faz um efeito de brilho melhor do que qualquer gaussiano sozinho. Por exemplo, aqui está uma maquete no Photoshop criada com três camadas combinadas de forma aditiva. Os três gaussianos são do tamanho 3px, 5px e 11px (correspondendo a sigma = 0,5px, 0,83px, 1,83px, respectivamente).

filtro de flor mock-up

Você também pode adicionar gaussianos ainda maiores para aumentar ainda mais o raio aparente do brilho. É assim que o efeito "bloom" padrão é implementado nos mecanismos de jogos em 3D.

Se o desempenho for uma preocupação, o menor gaussiano pode ser substituído por uma cópia da imagem original sem desfocagem; o efeito resultante parecerá mais nítido, não tão suave, mas ainda terá um brilho ao seu redor. Como mencionado anteriormente, gaussianos maiores podem ser feitos através de downsampling, embaçamento e upsampling; e a upsampling pode ser feita usando a filtragem bilinear de hardware, dobrada na passagem que mistura as camadas.

Jaggies

Você notará que os jaggies ainda são visíveis em algumas áreas da imagem acima. Infelizmente, o desfoque não é muito eficaz para ocultar jaggies, a menos que o raio do desfoque seja bastante grande. Não há maneira fácil de usar um pós-processo para livrar-se de jaggies: a melhor maneira de evitá-los é não renderizá-los em primeiro lugar. :)

Ouvi dizer que você não pode usar o MSAA por motivos de desempenho, mas pode ser outra opção. Dependendo de como você renderiza as trilhas de brilho, você pode aumentar um pouco o tamanho delas e escrever um sombreador que aplique um gradiente para desbotar a cor a alguns pixels da borda. Isso deve ajudá-los a parecer mais suaves. Aqui está um shadertoy que demonstra uma queda de borda de 1px de largura usada para suavizar uma forma processual.


@ Nathan_Reed Eu apliquei a maioria das suas dicas, exceto em vez de fazer o MSAA, que por incrível que pareça, fez o truque com quase nada de 2x. Se eu tiver uma pergunta sobre como adicionar mais destaques ao efeito atual, devo editar a pergunta ou criar uma nova?
J.Doe

@ J.Doe Ótimo, fico feliz em saber que está dando certo! Eu diria que é melhor fazer uma nova pergunta sobre como ajustar o efeito se você tiver uma aparência específica.
Nathan Reed
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.