[Prática de desenvolvimento de jogos 3D] Interpretação do código-fonte Cocos Cyberpunk - ensiná-lo a adicionar um Shader de efeitos posteriores

Cocos Cyberpunk é um jogo TPS 3D de código aberto completo lançado pela equipe oficial do mecanismo Cocos para demonstrar os recursos de produção de jogos 3D pesados ​​do mecanismo e aumentar a motivação de aprendizado da comunidade.

Esta série de artigos interpretará o código-fonte de vários aspectos para melhorar a eficiência do aprendizado de todos. Espero que possa ajudá-lo a ir mais longe no desenvolvimento de jogos 3D.

Página de download gratuito do código-fonte do projeto:
https://store.cocos.com/app/detail/4543

O conteúdo de hoje é relativamente simples, adequado para os jovens jogarem, mas também adequado para o entretenimento de pessoas de meia-idade e idosos, você deve lê-lo.

No artigo anterior, compartilhei com você como mover o pipeline de renderização personalizado (CRP) no Cocos Cyberpunk para seu próprio projeto .

Vendo o efeito de Bling Bling , muitos amigos também estão ansiosos para tentar, mas ficam presos quando estão prestes a começar. Então eu corri e perguntei:

• Como escrever o Shader do pipeline personalizado?
• Como o diagrama de pipeline de renderização está conectado?
• Eu quero adicionar um efeito sozinho, como consertar isso?

Não se preocupe, agende já!

Quem deixou Qilinzi ser um bom orador profissional?

Você deve ter notado que, embora os artigos de Qilinzi sempre tenham uma frase no início do artigo para aliviar a atmosfera tensa de aprendizado, a estrutura do artigo ainda mantém a estrutura total-ponto-total.

Porque tal estrutura é muito adequada para compartilhar conteúdo de aprendizagem.

Se houver sugestões melhores, sinta-se à vontade para me dizer, farei ajustes de acordo com a situação.

Sem mais delongas, vamos começar.

resumo do conteúdo

Se você deseja adicionar um pós-efeito ao CRP do Cocos Cyberpunk , você só precisa resolver os seguintes problemas:

1. Quais efeitos de postagem adicionar
2. Como escrever um passe
3. Como adicionar um passe ao pipeline

Vamos enfrentá-los um por um.

selecione o efeito

Cocos Cyberpunk tem pós-processamento integrado de Bloom e TAA com uma taxa de aparição de 90%+. Se você quiser adicionar, deve haver:

• Lut
• Vinheta
• DOF
• Desfoque de movimento
• SSR
• SSAO

Além do fato de que Lut e Vignette são muito simples, o resto é complicado.

Eles estão listados aqui para todos verem.

O objetivo deste artigo é demonstrar o fluxo de trabalho de adicionar um efeito posterior, portanto, não há necessidade de complicar tanto, precisamos apenas implementar um efeito simples.

Ter! Podemos obter um efeito que torna a imagem cinza.

Embora esse efeito seja simples, ele pode ser usado como o escurecimento da tela quando o personagem do jogador morre para melhorar a atmosfera do jogo, e seu valor prático não é pequeno.

Vamos fazer uma renderização primeiro para evitar a perda de visualizadores!

Escreva um passe

diretório de recursos

Vamos dar uma olhada no que um Passe envolve:

• pipeline/passes : scripts relacionados
• pipeline/recursos/efeitos : Shader relacionado
• pipeline/recursos/materiais : materiais relacionados

senha

Em seguida, vamos ignorar todos os princípios e detalhes e obter rapidamente um efeito grisalho, para dominar o processo.

1. Construção rápida de fxaa

Criamos um novo grayscale-pass.ts e copiamos o conteúdo em fxaa.ts.

2. Modifique o conteúdo do código

Modifique o código relacionado ao nome da classe da seguinte maneira (verifique linha por linha):

@ccclass('GrayscalePass')
export class GrayscalePass extends BasePass {
    
    
    _materialName = 'grayscale';
    ...
    @property({
    
     override: true })
    name = 'GrayscalePass';
    
    @property({
    
     override: true })
    outputNames = ['GrayscalePassColor'];
    ...
    rener(camera: renderer.scene.Camera, ppl: rendering.Pipeline){
    
    
      ...
      passUtils.addRasterPass(width, height, 'post-process', `Camera_Grayscale_Pass${
      
      cameraID}`);
      ...
    }
}

Exclua as seguintes linhas de código:

...
checkEnable () {
    
    
    return super.checkEnable() && !!HrefSetting.fxaa;
}
...
_offset = new Vec2
texSize = new Vec4
...
material.setProperty('texSize', this.texSize.set(width, height, 0, 0))

Ok, nosso grayscale-pass.ts está pronto.

Coco Shader

Em seguida, criamos um Shader que esmaece a imagem .

Para alcançá-lo rapidamente, ainda copiamos pipeline/resources/fxaa.effect primeiro e o renomeamos como grayscale.effect .

Altere a função principal para o seguinte:

void main () {
  vec4 color = texture(inputTex,v_uv);
  float Y = 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b;
  fragColor = vec4(Y,Y,Y ,1.0);
}

Para a limpeza do código Shader, excluímos as partes não utilizadas:

#include <unpack>
#include <./chunks/fxaa>
...
uniform Params {
  vec4 texSize;
};

Observe, em vec2 v_uv; não exclua por engano, mantenha-o.

Ok, nosso Shader está pronto

material

O material é o mais simples, basta copiar pipeline/resources/fxaa.mtl no Cocos Creator e renomeá-lo em tons de cinza.

Em seguida, especifique seu efeito como grayscale.effect.

Neste ponto, um GrayscalePass é criado.

Adicionar novo passe

carregamento de material

1. Clique duas vezes em pipeline/resources/pipeline.prefab .

2. No painel de propriedades, localize o componente PipelineAssets .

3. Adicione 1 ao número atrás de Materiais (deve ser 8 se não foi alterado, vamos mudar para 0), e você verá que há um elemento na parte inferior.

4. Arraste pipeline/resources/materials/grayscale.mtl e salve pipeline.prefab .

O material será carregado quando o pipeline começar.

Adicionar GrayscalePass aos dados do gráfico

Para poder adicionar nós no CRP Graph , precisamos primeiro registrar o GrayscalePass nos dados do gráfico .

Abra pipeline/graph/nodes/pass.ts e adicione uma linha de código no final:

createPassGraph(BasePass);
createPassGraph(BloomPass);
...
//GrayscalePass
createPassGraph(GrayscalePass);

adicionar nó

Esqueça-o de acordo com o método ensinado antes
e ensine-o novamente desde o início.

Abrir Gráfico de CRP

1. Crie um novo nó vazio
2. Arraste o componente pipeline/graph/pipeline-graph.ts para este nó
3. Marque a caixa de seleção Edit no componente e a janela RenderPipeline Graph aparecerá
   

Você deve ver uma janela como esta:

Adicionar GrayscalePass

Clique com o botão direito do mouse na janela, o menu de primeiro nível aparecerá, selecione AddNode .

No novo menu que aparece, selecione pipeline (parte inferior).

Em seguida, selecione GrayscalePass no novo menu que aparece (parte inferior).

Você pode obter um nó GrayscalePass .

Basta colocá-lo onde ele se encaixa no pipeline principal . Aqui Qilinzi o coloca antes do BloomPass .

Feche esta janela, volte ao editor e você verá que a tela está acinzentada.

Finalmente desenhe um bolo

Isso conclui o conteúdo de hoje.
Embora não tenhamos analisado os detalhes do pipeline e o princípio de implementação , conseguimos um efeito de pós-processamento que torna a imagem cinza referindo-se a FXAA.

Isso se chama: pisar nos ombros de gigantes.

No próximo artigo, começaremos com o princípio e explicaremos o design de pipelines personalizados.

Os artigos subseqüentes incluirão: pipeline de encaminhamento, pipeline de atraso, explicação de BLOOM, TAA, FSR, etc.

Artigos posteriores adicionarão recursos mais avançados com base nesse pipeline, incluindo, entre outros: SSR, SSAO, etc.

Claro, muitos amigos também estão perguntando sobre as funções relacionadas ao desenvolvimento nativo. Acontece que o Cocos Cyberpunk também fez muita otimização e processamento de compatibilidade no lado nativo. O conteúdo desta parte também será compartilhado a seguir artigos, portanto, fique atento.