Desenho de malha dinâmica no Unreal Engine 4

Neste tutorial do Unreal Engine 4, você aprenderá a desenhar cores em qualquer tipo de malha.

O desenho em malha permite aos jogadores colorir objetos no jogo. Exemplos de desenho de malha: graffiti (gosma) em Super Mario Sunshine , géis no Portal 2 e tinta no Splatoon . O desenho pode ser usado como um elemento de jogabilidade ou apenas como um design gráfico. Seja como for, o desenho por malha abre novas possibilidades para designers e artistas de jogabilidade.

Embora esse efeito seja usado quase igualmente nos exemplos listados acima, você pode usar o desenho de malha para muitos outros efeitos. Por exemplo, você pode pintar objetos com latas de tinta, fazer feridas nos personagens ou até mesmo deixar os jogadores desenharem seu próprio rosto por conta própria!

Neste tutorial, você aprenderá como desenhar em uma malha esquelética. Para fazer isso, faremos o seguinte:

• Expanda a malha em sua forma UV
• Use o ponto de interseção do traçado da linha para criar uma máscara de malha esférica
• Renderize a malha expandida e a máscara esférica no destino de renderização usando a captura de cena
• Use uma máscara para misturar texturas no material do personagem.

Observe que este tutorial não trata de desenhar vértices. O desenho de vértices depende da resolução da malha e não pode ser alterado durante o jogo. O método usado neste tutorial, por outro lado, funciona independentemente da resolução da malha e pode ser usado durante o jogo.

Nota: entende-se que você já conhece o básico do trabalho com o Unreal Engine. Se você é novo no Unreal Engine, consulte nossa série de tutoriais em 10 partes do Unreal Engine para iniciantes .

Nota: este tutorial é a quarta parte de uma série de tutoriais sobre o uso de destinos de renderização no Unreal Engine:

• Parte 1: desenhando com destinos de renderização
• Parte 2: neve deformável
• Parte 3: grama interativa
• Parte 4: desenho por malha

Começando a trabalhar

Comece baixando os materiais para este tutorial. Descompacte-os, vá para MeshPainterStarter e abra MeshPainter.uproject . Clique em Play para ver o personagem que iremos colorir.


Como nos tutoriais sobre neve e grama, esse método também precisa de uma captura de cena. Para economizar tempo, eu já criei um plano para capturar a cena. Se você quiser saber mais sobre as opções de captura, leia nosso tutorial sobre como criar pegadas na neve .

Primeiro, vamos descobrir como desenhar em uma malha.

Desenho de malha

Na maioria dos casos, as malhas com as quais você precisa trabalhar já têm uma varredura UV. Portanto, seria lógico criar uma máscara usando o destino de renderização e aplicá-la à malha. No entanto, a geração de uma máscara diretamente em um destino de renderização (usando Draw Material para Render Target) geralmente leva a quebras nos shells UV.

Aqui está um exemplo de uma varredura de cubo UV e textura de máscara esférica:


E aqui está a máscara aplicada ao cubo:


Como você pode ver, a máscara esférica bidimensional em 2D não se dobra nos cantos e não leva em consideração a geometria. Para gerar a máscara correta, uma máscara esférica deve ter uma amostra de posições no mundo . Como obter acesso a posições no mundo ao usar o nó Draw Material to Render Target?

Se você estudou os métodos de desenho por malhas, talvez tenha encontrado um vídeo de Ryan Brooke sobre o desenho de danos aos personagens usando alvos de renderização (o método usado no meu tutorial é baseado no método dele). No vídeo, ele gera com êxito máscaras esféricas tridimensionais e as acumula no destino da renderização. Ele conseguiu fazer isso porque cria um alvo de renderização para armazenar posições de malha no mundo, que pode ser amostrado usando uma máscara esférica. Vejamos esse método com mais detalhes.

Método Ryan

Este método consiste em quatro etapas. O primeiro passo é "implantar" a malha desejada. Você só precisa mover todos os vértices para obter a malha em sua forma UV. Por exemplo, aqui estão as coordenadas UV do personagem:


E aqui está o personagem depois de implantar no Unreal:


Você pode expandir a malha usando cálculos simples dos deslocamentos das posições do mundo (que discutiremos abaixo).

O segundo passo é codificar as posições mundiais no destino da renderização. Isso pode ser feito definindo a cor do material da varredura como Posição mundial absoluta e usando a captura de cena para capturar a varredura. Veja como seria o destino de renderização:

Nota: o destino da renderização muda de cor porque o personagem é animado. Isso leva a uma constante mudança de posição no mundo.

O terceiro passo é criar máscaras esféricas. Tendo acessado as posições da malha no mundo, podemos amostrá-las em uma máscara esférica e, em seguida, desenhar uma máscara esférica diretamente no segundo alvo de renderização.

A etapa final é aplicar uma máscara ao material do personagem para misturar cores, texturas ou materiais. Aqui está a visualização do terceiro e quarto estágios:


Agora vamos olhar para o meu método proposto.

Método proposto

Embora o método de Ryan funcione, ele precisa do seguinte:

• Duas renderizações de destino de renderização. O primeiro captura a malha não desenvolvida e o segundo acumula máscaras esféricas.
• Um alvo de renderização para armazenar posições no mundo
• Renderize o alvo para coletar máscaras esféricas. Para cada ator no qual você deseja desenhar, você precisará de um destino de renderização separado.

O método descrito neste tutorial recusa a segunda renderização e renderiza a posição de destino no mundo. Isso é possível combinando as máscaras de varredura e esféricas em um único material (material de varredura). Depois disso, a varredura é capturada usando o modo composto aditivo para o acúmulo de máscaras esféricas.

Vale ressaltar que ambos os métodos funcionam melhor quando a malha não possui UVs sobrepostos. Se os UV se sobrepuserem, os pixels terão um espaço UV comum e, portanto, as mesmas informações sobre as máscaras. Por exemplo, as duas mãos de um personagem podem ser implantadas em UV no mesmo espaço. Se uma máscara for aplicada a uma mão, ela também será aplicada à outra.

Agora que nos familiarizamos com o método, vamos começar criando um material de varredura.

Criar material plano

Vá para a pasta Materiais e crie um novo material. Nomeie-o como M_Unwrap e abra-o.

Altere as seguintes opções:

• Modelo de sombreamento: Apagado. Graças a isso, a captura de cena não captura informações de iluminação.
• Frente e verso: ativado. Às vezes, as faces expandidas podem parecer de outra maneira (isso depende de como a varredura UV da malha foi realizada). O parâmetro Frente e verso garante que vejamos todas as faces invertidas.
• Uso \ Usado com Malha Esquelética: Ativado. Quando esse parâmetro é ativado, os shaders necessários para o material funcionar nas malhas esqueléticas serão compilados.

Em seguida, expandimos a malha. Para fazer isso, crie o diagrama abaixo. Observe que eu já criei os parâmetros CaptureSize e UnwrapLocation no ativo MPC_Global.


Portanto, realizaremos a varredura UV da malha no local especificado e com o tamanho especificado. Observe que, se a varredura UV exclusiva da sua malha estiver em um canal separado, você precisará alterar o Índice de coordenadas do nó TextureCoordinate . Por exemplo, se as coordenadas UV exclusivas estiverem no canal 1, o Índice de coordenadas deverá ser definido como 1 .

O próximo estágio é a criação de uma máscara esférica. Para fazer isso, precisamos de dois parâmetros: o ponto de interseção e o raio da esfera. Crie os nós selecionados:


Esse esquema retornará branco para pixels dentro da máscara esférica e preto para pixels fora dela. Não se preocupe em definir valores para os parâmetros, porque faremos isso de maneira embotada.

É importante definir o nó Posição mundial absoluta como Posição mundial absoluta (excluindo compensações de sombreador de material) . Isso é necessário porque a posição do pixel no mundo mudará devido ao desenrolamento. A exclusão de compensações de sombreador de material fornece uma posição inicial no mundo antes da implantação.

E isso é o suficiente para o material de varredura. Clique em Aplicar e feche o material. Em seguida, precisamos aplicar o material ao personagem para expandi-lo.

Implantação de caracteres

Neste tutorial, o blueprint da garra fará a implantação e agarre. Primeiro, precisamos de uma instância dinâmica do material de varredura. Vá para a pasta Blueprints e abra BP_Capture . Em seguida, adicione os nós destacados ao Event BeginPlay . Verifique se Parent está definido como M_Unwrap .


Em seguida, precisamos de uma função para executar uma varredura e captura. Crie uma nova função chamada PaintActor . Em seguida, crie as seguintes entradas:

• ActorToPaint: o tipo deve ter o valor Actor . Este é um ator para quem faremos uma varredura e captura.
• HitLocation: digite Vector . Este será o ponto central da máscara esférica.
• BrushRadius: digite Float . O raio da máscara esférica em unidades do mundo.

Embora esse método de desenho possa funcionar com qualquer ator, verificaremos apenas se o ator resultante é herdado da classe Character . E para simplificar o código, armazenaremos o componente de malha de esqueleto em uma variável, pois precisaremos fazer referência a ele várias vezes. Para isso, adicionaremos os nós selecionados:


Agora é hora de desenvolver e aplicar uma máscara esférica. Para fazer isso, adicione nós selecionados ao final da cadeia de nós:


Aqui está o que cada linha faz:

1. Primeiro, preservamos o material de origem da malha para que possamos reaplicá-lo mais tarde. Em seguida, aplicamos o material de varredura.
2. Essa linha passa o material de digitalização pelo ponto de interseção e pelo raio da escova para aplicar uma máscara esférica

Para testar a varredura, primeiro precisamos traçar a linha do jogador para obter o ponto de interseção.

Obtendo ponto de interseção

Clique em Compilar e retorne ao editor principal. Depois feche o BP_Player . Abra a função Disparar e adicione os nós destacados. Para este tutorial, defina Raio do pincel como 10 .


Clique em Compilar e feche o BP_Player . Clique em Reproduzir e clique com o botão esquerdo no personagem para detalhar e aplicar uma máscara esférica.


Se você não entender por que a máscara continua a se mover, isso ocorre porque as partes se movem em relação à máscara esférica. No entanto, isso não é um problema, porque apenas realizamos uma captura de varredura no momento do cruzamento.

Agora que desembrulhamos a malha, precisamos fazer uma captura de varredura.

Captura de varredura

Para iniciantes, seria bom adicionar um plano preto apagado atrás da malha expandida. Isso evita as costuras na borda das conchas UV. Abra BP_Capture e adicione um componente Plane chamado BackgroundPlane . Para economizar tempo, eu já criei material preto. Para o material, selecione M_Background .


Neste tutorial, usamos 500 × 500 unidades para desdobrar e capturar, para que o plano de fundo não seja menor que esses tamanhos. Defina Escala como (5.0, 5.0, 1.0) .


Como a posição do avião e a posição da varredura são as mesmas, seria bom deslocar o avião para baixo para evitar conflitos-z. Para fazer isso, defina o valor do local (0,0, 0,0, -1,0) .


Em seguida, precisamos realizar uma captura. Volte para a função PaintActor e adicione os nós destacados:


Então, capturaremos a malha expandida, após a qual o material de origem da malha será aplicado novamente.

No esquema resultante, a captura de cena substitui o conteúdo do destino de renderização. Para que as máscaras esféricas se acumulem, precisamos adicionar a captura da cena ao conteúdo anterior. Para fazer isso, selecione o componente SceneCapture e defina o Capture Scene \ Modo Composite como Aditivo .


Clique em Compilar e feche o blueprint. Agora precisamos usar o alvo de renderização no material do personagem.

Uso de máscara

Vá para Personagens \ Manequim \ Materiais e abra M_Mannequin . Em seguida, adicione os nós destacados. Defina a amostra de textura como RT_Capture .


Esse esquema exibirá a cor vermelha, onde a máscara é branca, e laranja, onde a máscara é preta. No entanto, podemos misturar texturas ou camadas de materiais.

Clique em Aplicar e feche o material. Clique em Reproduzir e clique com o botão esquerdo no personagem para começar a desenhar.

Para onde ir a seguir?

O projeto finalizado pode ser baixado aqui .

Embora tenhamos usado máscaras esféricas neste tutorial, essa não é a única figura que pode ser usada. Afinal, existem cubos, cilindros, cones e muito mais! Para saber mais sobre essas formas de formas e como usá-las, leia as duas postagens a seguir:

• Modelagem com funções de distância Inigo Kileza
• Renderização volumétrica: funções de distância assinada Alana Zucconi

Se você quiser aprender outra maneira de desenhar em uma malha, leia o artigo de Tom Lohman Rendering Wounds on Characters . Em vez de acumular máscaras esféricas, ele usa um número fixo de máscaras esféricas. A vantagem desse método é seu baixo custo (que depende do número de máscaras esféricas) e a relativa simplicidade de animar as máscaras. A desvantagem deste método é a restrição estrita no número de máscaras esféricas.