O destino de renderização é essencialmente uma textura na qual você pode gravar em tempo de execução. Do ponto de vista do mecanismo, eles armazenam informações como cor base, normais e oclusão do ambiente.
Do ponto de vista do usuário, os destinos de renderização são usados principalmente como um tipo de câmera adicional. Você pode definir a captura de cena em algum momento e salvar a imagem no destino de renderização. Em seguida, você pode exibir o alvo de renderização na malha, por exemplo, para simular uma câmera de vigilância.
Após o lançamento da versão do mecanismo 4.13, a Epic adicionou a capacidade de desenhar materiais diretamente no alvo de renderização usando embotamentos. Esse recurso permite criar efeitos complexos, como simulação de fluidos e deformação da neve. Parece incrível, certo? Mas antes de passar a efeitos tão complexos, é melhor se sentir confortável com algo simples. O que poderia ser mais simples do que desenhar em um destino de renderização?
Neste tutorial, você aprenderá o seguinte:
- Crie destinos de renderização dinamicamente com embotamentos
- Exibir destino de renderização na malha
- Desenhar textura no destino de renderização
- Alterar o tamanho e a textura do pincel durante o jogo
Nota: este tutorial supõe que você já esteja familiarizado com os conceitos básicos de trabalho com o Unreal Engine. Se você é novo no Unreal Engine, confira nossa série de dez partes de tutoriais do Unreal Engine para iniciantes .
Começando a trabalhar
Vamos começar fazendo o download de materiais para este tutorial (você pode obtê-los
aqui ). Descompacte-os, vá para
CanvasPainterStarter e abra o
CanvasPainter.uproject . Se você clicar em
Reproduzir , verá o seguinte:
O quadrado no meio (tela) é o que desenharemos. Os elementos da interface do usuário à esquerda serão a textura que vamos desenhar e seu tamanho.
Primeiro, vejamos o método usado para desenhar.
Método de desenho
A primeira coisa que precisamos é de um destino de renderização, usado como uma tela. Para determinar onde desenhar o alvo de renderização, traçaremos a linha reta que sai da câmera para a frente. Se a linha cruzar a tela, podemos obter a interseção no espaço UV.
Por exemplo, se a tela tiver uma ligação perfeita das coordenadas UV, a interseção no centro retornará o valor
(0,5, 0,5) . Se a linha cruzar a tela no canto inferior direito, obteremos o valor
(1, 1) . Depois, você pode usar cálculos simples para calcular o local do desenho.
Mas por que obter as coordenadas no espaço UV? Por que não usar as coordenadas do espaço real do mundo? Ao usar o espaço do mundo, primeiro precisamos calcular a interseção em relação ao plano. Você também terá que levar em consideração a rotação e a escala do avião.
Ao usar o espaço UV, todos esses cálculos não são necessários. Em um plano com uma ligação perfeita das coordenadas UV, a interseção com o meio sempre retorna
(0,5, 0,5) , independentemente da localização e rotação do plano.
Nota: o método considerado neste tutorial geralmente funciona apenas com planos ou superfícies semelhantes aos planos. Outros tipos de geometria requerem um método mais complexo, que abordarei em outro tutorial.
Primeiro, criaremos material que renderizará o destino de renderização.
Criar material de tela
Vá para a pasta
Materiais e abra
M_Canvas .
Neste tutorial, criaremos destinos de renderização dinamicamente usando embotamentos. Isso significa que temos que configurar a textura como um parâmetro para que possamos transmiti-la para renderizar o destino. Para fazer isso, crie um
TextureSampleParameter2D e chame-o
RenderTarget . Em seguida, conecte-o à
BaseColor .
Por enquanto, não se preocupe em escolher uma textura - faremos isso mais tarde nas plantas. Clique em
Aplicar e feche
M_Canvas .
O próximo passo é criar um destino de renderização, após o qual o usaremos como material de tela.
Criando um destino de renderização
Existem duas maneiras de criar um destino de renderização. Primeiro: crie no editor clicando em
Adicionar novo \ Materiais e texturas \ Render Target . Esse método permite que você faça referência conveniente ao mesmo destino de renderização para vários atores. No entanto, se precisarmos de várias telas, teremos que criar um destino de renderização manualmente para cada tela.
Portanto, é melhor criar destinos de renderização usando embotamentos. A vantagem dessa abordagem é que criamos destinos de renderização apenas quando necessário e eles não aumentam o tamanho dos arquivos do projeto.
Primeiro, precisamos criar um destino de renderização e salvá-lo como uma variável para uso futuro. Vá para a pasta
Blueprints e abra
BP_Canvas . Localize o
Event BeginPlay e adicione os nós selecionados.
Defina
Largura e
Altura como
1024 . Então, alteramos a resolução do destino de renderização para
1024 × 1024 . Quanto maior o valor, maior a qualidade da imagem, mas também maior o custo da memória de vídeo.
Em seguida, vem o nó
2D Clear Target Target . Podemos usar esse nó para definir a cor do destino de renderização. Defina
Cor clara como
(0,07, 0,13, 0,06) . Nesse caso, todo o destino de renderização será preenchido com uma cor esverdeada.
Agora, precisamos exibir o destino de renderização na malha da tela.
Render Target Display
Nesse ponto, a malha da tela usa o material padrão. Para exibir o destino de renderização, você precisa criar uma instância dinâmica de
M_Canvas e passar o destino de renderização para ele. Então você precisa aplicar uma instância dinâmica do material à malha da tela. Para isso, adicionaremos os nós selecionados:
Primeiro, vamos para o nó
Create Dynamic Material Instance e defina o valor
Parent como
M_Canvas . Então, criaremos uma instância dinâmica de
M_Canvas .
Em seguida, vá para o nó
Definir valor do parâmetro de textura e defina o
Nome do
parâmetro como
RenderTarget . Portanto, passaremos o destino de renderização para o parâmetro de textura criado anteriormente.
Agora, o destino da renderização será exibido na malha da tela. Clique em
Compilar e retorne ao editor principal. Clique em
Reproduzir para ver como a tela muda de cor.
Agora que temos a tela, precisamos criar material que possa ser usado como pincel.
Criar material de pincel
Vá para a pasta
Materiais . Crie o material
M_Brush e abra-o. Primeiro, defina o
Blend Mode para
Translucent . Isso nos permitirá usar texturas com transparência.
Assim como no material da tela, definimos a textura do pincel em blunt. Crie um
TextureSampleParameter2D e
denomine BrushTexture . Conecte-o da seguinte maneira:
Clique em
Aplicar e feche o
M_Brush .
A próxima coisa a fazer é criar uma instância dinâmica do material do pincel para que você possa alterar a textura do pincel. Abra
BP_Canvas e adicione os nós selecionados.
Em seguida, vá para o nó
Criar instância dinâmica de material e defina o
Pai como
M_Canvas .
Criamos o material do pincel e agora precisamos de uma função para pintar com o pincel no destino da renderização.
Pintura com pincel no alvo de renderização
Crie uma nova função e
chame -a de
DrawBrush . Primeiro, precisamos dos parâmetros: textura usada, tamanho do pincel e local para desenhar. Crie a seguinte entrada:
- BrushTexture: selecione o tipo Textura 2D
- BrushSize: selecione o tipo de flutuador
- DrawLocation: selecione o tipo Vector 2D
Antes de desenhar um pincel, precisamos definir sua textura. Para fazer isso, crie o circuito mostrado abaixo. Verifique se
BrushTexture está selecionado como o
nome do
parâmetro .
Agora precisamos fazer a renderização no destino de renderização. Para fazer isso, crie os nós selecionados:
Iniciar o Draw Canvas para renderizar destino permitirá que o mecanismo saiba que queremos iniciar a renderização para um destino de renderização específico.
Desenhar material permite desenhar material em um local especificado com o tamanho e a rotação selecionados.
O cálculo da posição de renderização é um processo de duas etapas. Primeiro, precisamos
escalar o DrawLocation para caber na resolução do destino de renderização. Para fazer isso, multiplique
DrawLocation por
tamanho .
Por padrão, o mecanismo renderiza materiais usando o canto superior esquerdo como ponto de partida. Portanto, a textura do pincel não será centrada em nós onde queremos renderizar. Para corrigir isso, precisamos dividir o
BrushSize por
2 e subtrair o resultado da etapa anterior.
Em seguida, conectamos tudo da seguinte maneira:
Finalmente, precisamos informar ao mecanismo que queremos parar a renderização no destino da renderização. Adicione o nó
End Draw Canvas ao nó
Render Target e conecte-o da seguinte maneira:
Agora, cada vez que o
DrawBrush é executado
, ele primeiro define a textura transmitida como uma textura para o
BrushMaterial . Ela renderizará o
BrushMaterial no
RenderTarget , usando a posição e o tamanho passados.
E com isso a função de renderização está pronta. Clique em
Compilar e feche
BP_Canvas . O próximo passo é traçar a linha da câmera e desenhar no local da tela em que a interseção ocorreu.
Rastreio direto da câmera
Antes de desenhar na tela, precisamos especificar a textura e o tamanho do pincel. Vá para a pasta
Blueprints e abra
BP_Player . Em seguida, defina a variável BrushTexture como
T_Brush_01 e a variável
BrushSize como
500 . Por isso, atribuímos uma imagem de pincel de um macaco com um tamanho de
500 × 500 pixels.
Em seguida, você precisa rastrear a linha. Localize o
InputAxis Paint e crie o seguinte diagrama:
Então, traçaremos a linha direcionada diretamente da câmera enquanto o jogador mantém a tecla atribuída ao
Paint (no nosso caso, este é o
botão esquerdo do mouse ).
Agora precisamos verificar se a tela reta cruzou. Adicione nós selecionados:
Agora, quando a linha e a tela se
cruzam , a função
DrawBrush será executada, usando as variáveis do pincel e as coordenadas UV passadas para ela.
Para que o nó
Find Collision UV funcione, precisamos alterar dois parâmetros. Primeiro, vá para o nó
LineTraceByChannel e
ative o Trace Complex .
Em segundo lugar, vá em
Edit \ Project Settings e, em seguida, em
Engine \ Physics . Ative
Support UV From Hit Results e reinicie o projeto.
Após reiniciar, para desenhar na tela, clique em
Reproduzir e
clique com o botão esquerdo .
Você pode até criar várias telas e desenhar em cada uma delas separadamente. Isso é possível porque cada tela cria dinamicamente seu próprio destino de renderização.
Na próxima seção, implementamos a funcionalidade de alterar o tamanho do pincel de um jogador.
Redimensionar pincel
Abra
BP_Player e localize o nó
InputAxis ChangeBrushSize . Essa ligação de eixo está configurada para usar
a roda do mouse . Para alterar o tamanho do pincel, basta alterar o valor do
BrushSize, dependendo do valor do
eixo . Para fazer isso, crie o seguinte esquema:
Ele executará adição ou subtração do
BrushSize quando o jogador usar a roda do mouse. A primeira multiplicação determina a taxa de adição ou subtração.
Grampo (flutuador) foi adicionado como uma medida de segurança. Isso garante que o tamanho do pincel não seja menor que
0 ou maior que
1000 .
Clique em
Compilar e retorne ao editor principal. Gire
a roda do mouse para redimensionar o pincel enquanto desenha.
Na última seção, criaremos uma funcionalidade que permite ao jogador alterar a textura do pincel.
Alterar textura do pincel
Primeiro, precisamos de uma matriz para armazenar as texturas que o jogador pode usar. Abra
BP_Player e crie uma variável de
matriz . Selecione o tipo de
textura 2D e nomeie-o de
texturas .
Em seguida, crie
três elementos em
Texturas . Atribua a eles os seguintes valores:
- T_Brush_01
- T_Brush_02
- T_Brush_03
Essas serão as texturas que o jogador pode desenhar. Para adicionar novas texturas, basta adicioná-las a esta matriz.
Em seguida, precisamos de uma variável para armazenar o índice atual da matriz. Crie uma variável
inteira e
chame -a de
CurrentTextureIndex .
Em seguida, precisamos de uma maneira de percorrer todas as texturas em um loop. Para este tutorial, configurei um mapeamento de ação chamado
NextTexture e o
vinculei ao
botão direito do mouse . Quando o jogador pressiona essa tecla, a transição para a próxima textura deve ser realizada. Para fazer isso, localize o nó
InputAction NextTexture e crie o seguinte diagrama:
Esse esquema incrementará o
CurrentTextureIndex sempre que você
clicar com o botão direito do mouse . Se o índice atingir o final da matriz, ele será redefinido novamente como
0 . Por fim, o
BrushTexture define a textura apropriada.
Clique em
Compilar e feche o
BP_Player . Clique em
Reproduzir e
clique com o
botão direito do mouse para alternar entre texturas.
Para onde ir a seguir?
O projeto finalizado pode ser baixado
aqui .
O destino de renderização é uma ferramenta extremamente poderosa e, neste tutorial, abordamos apenas o básico. Se você quiser saber do que os destinos de renderização são capazes, confira
Renderização multipass orientada a conteúdo no UE4 . Este vídeo contém exemplos de mapas de fluxo de desenho, desenho volumétrico, simulações de fluidos e muito mais.
Verifique também o vídeo do tutorial
Desenho do Blueprint para renderizar alvos para aprender como criar um mapa de altura com o destino da renderização.