Drawing with Render Targets in Unreal Engine

Drawing with Render Targets in Unreal Engine
 
Render target is, in fact, a texture in which you can write while the application is running. From the engine's point of view, they store information such as the base color, normals and ambient occlusion.
 
 
From the perspective of the user, render target is mainly used as a kind of additional camera. You can set the scene capture (scene capture) at some point and save the image in render target. Then you can display the render target on the mesh, for example, to simulate the surveillance camera.
 
 
After the release of the ??? version of the engine, Epic added the ability to render the material directly to the render target with the help of the blueprints. This function allows you to create complex effects, for example, fluid simulation and snow deformation. Sounds fabulous, right? But before proceeding to such complex effects, it is best to get comfortable with something simple. What could be simpler than drawing on render target?
 
 
In this tutorial you will learn the following:
 
 
 
Dynamically create a render target using the blueprints
 
Show render target on the mesh
 
Draw the texture on render target
 
Change the brush size and texture during the game process
 
Unreal Engine for Beginners .
 

Let's get to work


 
Let's start with downloading materials for this tutorial (you can take them here ). Unzip them, go to
CanvasPainterStarter
and open
CanvasPainter.uproject
. If you press
Play
, then you will see the following:
 
 

 
The square in the middle (canvas) is what we will paint on. The UI elements on the left will be the texture that we will draw, and its size.
 
 
First, let's look at the method used for drawing.
 
 

Method of drawing


 
The first thing we need is a render target, used as a canvas. To determine where to draw on render target, we will trace the straight line leaving the camera forward. If the straight line crosses the canvas, then we can get the intersection point in the UV-space.
 
 
For example, if the canvas has an ideal binding of UV coordinates, then the intersection at the center will return the value
(0.? 0.5)
. If the straight line crosses the canvas in the lower right corner, then we get the value
(? 1)
. Then you can use simple calculations to calculate the drawing location.
 
 

 
But why get coordinates in the UV-space? Why not use the coordinates of the real world space? When using the space of the world, we first have to calculate the intersection with the plane. Also it is necessary to take into account the rotation and scale of the plane.
 
 
When using UV-space, all these calculations are not required. On a plane with an ideal binding of UV coordinates, the intersection with the middle always returns
(0.? 0.5)
, regardless of the location and rotation of the plane.
 
 
Note:
The method considered in this tutorial generally works only with planes or surfaces that are similar to a plane. For other types of geometry, a more complex method is required, which I'll cover in another tutorial.
 
First we will create the material that will render the render target.
 
 

Creating canvas material


 
Go to the folder
Materials
and open
M_Canvas
.
 
 
In this tutorial, we will create a render target dynamically, using the bluesprints. This means that we will have to adjust the texture as a parameter so that we can transfer it to render target. To do this, create
TextureSampleParameter2D
and call it
RenderTarget
. Then connect it with
BaseColor
.
 
 

 
Do not worry about choosing a texture yet - we'll do it further in the bluprints. Press
Apply
, and then close
M_Canvas
.
 
 
The next step is to create a render target, after which we use it as a canvas material.
 
 

Creating the Render Target


 
There are two ways to create a render target. First: create in the editor by clicking on
Add NewMaterials & TexturesRender Target
. This method makes it convenient to refer to the same render target to several actors. However, if we need several canvases, we'll have to create render target manually for each canvas.
 
 
Therefore, it's better to create a render target with the help of the bluesprints. The advantage of this approach is that we create render targets only when necessary and they do not inflate the size of the project files.
 
 
First, we need to create a render target and save it as a variable for later use. Go to the folder
Blueprints
and open
BP_Canvas
. Find
Event BeginPlay
and add the selected nodes.
 
 

 
Assign the parameters
Width
and
Height
the value
1024
. So we change the render target resolution to
1024 × 1024
. The higher the value, the better the image quality, but also the higher the video memory.
 
 

 
Next is the node
Clear Render Target 2D
. We can use this node to set the render target color. Specify
Clear Color
the value
(0.0? 0.1? ???)
. In this case, the entire render target is filled with a greenish color.
 
 

 
Now we need to display the render target on the canvas mesh.
 
 

Display Render Target


 
At this point, the canvas mesh uses the default material. To display the render target, you need to create a dynamic instance of
M_Canvas
and pass it to render target. Then you need to apply a dynamic instance of the material to the canvas mesh. For this we will add the selected nodes:
 
 

 
First, go to the node
Create Dynamic Material Instance
and set it as
Parent
the value
M_Canvas
. So we create a dynamic instance of
M_Canvas
.
 
 

 
Next, go to the node
Set Texture Parameter Value
and set for
Parameter Name
the value
RenderTarget
. So we will pass the render target to the previously created texture parameter.
 
 

 
Now render target will be displayed on the canvas mesh. Click on
Compile
and return to the main editor. Click on
Play
to see how the canvas will change color.
 
 

 
Now that we have the canvas, we need to create a material that can be used as a brush.
 
 

Create a material for the brush


 
Go to the folder
Materials
. Create the material
M_Brush
and open it. First set to
Blend Mode
the value
Translucent
. This will allow us to use textures with transparency.
 
 

 
As with the canvas material, we set the texture for the brush in the bluprints. Create
TextureSampleParameter2D
and call it
BrushTexture
. Connect it as follows:
 
 

 
Click on
Apply
, and then close
M_Brush
.
 
 
The next thing to do is create a dynamic instance of the brush material so that you can change the texture of the brush. Open
BP_Canvas
and add the selected nodes.
 
 

 
Next, go to the node
Create Dynamic Material Instance
and set for
Parent
the value
M_Canvas
.
 
 

 
We created a brush material, and now we need a function for drawing with a brush on render target.
 
 

Drawing with a brush on Render Target


 
Create a new function and call it
DrawBrush
. First we need the parameters: the texture used, the size of the brush and the place for drawing. Create the following input input dаta:
 
 
 
BrushTexture:
select type
Texture 2D
 
 
BrushSize:
select type
float
 
 
DrawLocation:
select type
Vector 2D
 
 

 
Before we draw a brush, we need to specify its texture. To do this, create the scheme shown below. Make sure that the quality is
Parameter Name
the value
is selected. BrushTexture
.
 
 

 
Now we need to render in render target. To do this, create the selected nodes:
 
 

 
Begin Draw Canvas to Render Target
Let the engine know that we want to start rendering in a certain render target.
Draw Material
Allows you to draw the material at the specified location with the selected size and rotation.
 
 
Calculating the drawing position is a two-stage process. First we need to scale
DrawLocation
To fit into the render target. To do this, multiply
DrawLocation
on
Size
.
 
 

 
By default, the engine will draw the materials using the upper left corner as the starting point. Therefore, the texture of the brush will not be centered to us, where we want to draw. To fix this, we need to divide
BrushSize
on
2
, and then subtract the result from the previous step.
 
 

 
Then connect it all as follows:
 
 

 
Finally, we need to tell the engine that we want to stop rendering in render target. Add the node
End Draw Canvas to Render Target
and connect it as follows:
 
 

 
Now for each execution of
DrawBrush
it will first set as a texture for
BrushMaterial
the transmitted texture. Then it will draw
BrushMaterial
in
RenderTarget
, using the transferred position and size.
 
 
And this is the function of rendering. Click on
Compile
and close
BP_Canvas
. The next step is to trace the straight from the camera and draw at the place where the canvas intersected.
 
 

Tracing straight from the camera


 
Before You Drawon the canvas, we need to specify the texture of the brush and the size. Let's move to the folder
Blueprints
and open
BP_Player
. Then assign the variable
BrushTexture
the value
T_Brush_01
, and the variable
BrushSize
the value
500
. So we will assign a brush image of a monkey sized
500 × 500
pixels.
 
 

 
Next, you must perform a straight trace. Find
InputAxis Paint
and create the following scheme:
 
 

 
So we will perform a straight trace directed from the camera directly, while the player will hold the key assigned to
Paint
(in our case this is
? the left mouse button is
).
 
 
Now we need to check if the straight canvas has crossed. Add the selected nodes:
 
 

 
Now when the line and the canvas intersect, the function
will be executed. DrawBrush
, using the brush variables and UV coordinates transferred to it.
 
 
To the node
Find Collision UV
I need to change two parameters. First, go to the node
LineTraceByChannel
and include
Trace Complex
.
 
 

 
Secondly, let's go to
EditProject Settings
, and then in
EnginePhysics
. We turn on
Support UV From Hit Results
and restart the project.
 
 

 
After restarting to draw on canvas, press
Play
and
left mouse button
.
 
 

 
You can even create several canvases and draw on each of them separately. This is possible, because each canvas dynamically creates its own render target.
 
 

 
In the next section, we implement the functionality of changing the player's brush size.
 
 

Change the size of the brush


 
Open
BP_Player
and find the node
InputAxis ChangeBrushSize
. This axis binding is configured to use
the mouse wheels are
. To change the size of the brush, it is enough to change the value
BrushSize
depending on
Axis Value
. To do this, create the following scheme:
 
 

 
It will perform the addition or subtraction from
BrushSize
when the player uses the mouse wheel. The first multiplication determines the rate of addition or subtraction. As a security measure added
Clamp (float)
. He guarantees that the brush size will not be less than
0
or more
1000
.
 
 
Click on
Compile
and return to the main editor. Turn it around
mouse wheel
to change the brush size when drawing.
 
 

 
In the last section, we will create a functional that allows the player to change the texture of the brush.
 
 

Change the texture of the brush


 
To begin with, we need an array for storing textures that a player can use. Open
BP_Player
and create the variable
array
. Select the type
for it. Texture 2D
and call it
Textures
.
 
 

 
Then create
three
element in
Textures
. Assign them the following values:
 
 
 
T_Brush_01
 
T_Brush_02
 
T_Brush_03
 
 

 
These are the textures that a player can draw. To add new textures, just add them to this array.
 
 
Next, we need a variable to store the current index of the array. Create the variable
integer
and call it
CurrentTextureIndex
.
 
 

 
Next, we need a way to bypass all textures in the cycle. For this tutorial, I set up an action mapping called
NextTexture
and tied it to
right mouse button
. When the player presses this key, the transition to the next texture should be performed. To do this, find the node
InputAction NextTexture
and create the following scheme:
 
 

 
This scheme will increase
CurrentTextureIndex
with each press on
the right mouse button is
. If the index reaches the end of the array, then it is reset to
again. 0
. Finally,
BrushTexture
the appropriate texture is set.
 
 
Click on
Compile
and close
BP_Player
. Press
Play
and click
with the right mouse button
to switch between textures.
 
 

 

Where to move next?


 
The finished project can be downloaded hence .
 
 
Render target is an extremely powerful tool and in this tutorial we touched only the very basics. If you want to know what render targets are, see Content-Driven Multipass Rendering in UE4 . In this video, there are examples of drawing flow charts, volumetric drawing, fluid simulation and much more.
 
 
Also see our training video Blueprint Drawing to Render Targets , to learn how to create using the render target drawing map heights.
+ 0 -

Add comment