This is created using and following
a tutorial by Chris Albeluhn
The first step in creating fog
within UDK was for me to set up the textures needed for the fog. In order to do
this used Photoshop, I set up a 1024x1024 pixel template and then created the
fog texture using their pre-set filter called ‘Clouds’ which can be found under
the header ‘Filter’ > ‘Render’ > ‘Clouds’. Doing this your then present
with what looks like a simple cloud texture. Although it’s a cloud texture this
can work really well as a fog texture.
After creating one and calling it
‘Red’ I then repeated this process two more times to create a ‘Green’ and
‘Blue’ named version of the cloud texture. The great feature about the cloud
filter is that it’s random every time.
In order to create a texture that will work well and is suitable for the
fog in UDK I needed to combine the RGB channels from all three textures into
one RGB texture. To do this I made the ‘Red’ cloud my base source texture. The
next step was to change the mode of the ‘Blue’ and ‘Green’ file to ‘Greyscale’
instead of ‘RGB Colour’, this can be found under the tab ‘Image > Mode >
Greyscale’. Then I went over to the ‘Blue’ and pressed Crtl + A which selected
the image as a whole, then Ctrl + C which copies the selection which in this
case I selected the blue channel from the ‘Channel’ section next to ‘Layers’.
Then with blue channel copied I went over to the ‘Red’ base texture and
selected the red channel and press Ctrl + V to paste. This then pasted the blue
channel of the cloud texture from the ‘Blue’ file into the blue channel on the
‘Red’ base file. I then repeated this process for the ‘Green’ file and left the
red channel from the ‘Red’ base file as it is.
I then closed down the ‘Green’ and
‘Blue’ file as they were no longer needed for the next process or future ones.
Now back on the ‘Red’ base file I selected the RGB channel which displayed all
three channels combined. This is end result of combing all three cloud channels
together.
I then saved this file as a ‘Targa’
file since UDK seemed to work best with reading the ‘Targa’
extension.
The next phase of the fog test was
to create a plane that can act a static mesh in UDK. To do this I went into
Maya and created a flat plane, changed the input values to 1024x1024 and
changed the grid to 10x10, this would ensure that the texture would fit nicely
onto the plane.
After creating the plane I exported
the selection, i.e the flat plane as an FBX file
ready to import into UDK.
Now it was time to go into UDK
knowing that I had all the necessary assets to create fog in UDK. Once in UDK I
switched the render mode to DX11 to take full advantage of the engine. I then
proceed with creating a new package in the ‘Content Browser’.
The next step was to import the
plane and texture file into UDK. This is a simple process, I clicked on my
package, clicked on ‘Import’ and selected the files that I needed.
This will be how it appears once it
has been imported into the package in UDK.
I then right clicked on an empty
space within the content browser and created a ‘New Material’, this is the
material that I create the node network for creating fog with.
The next process was to create the node
network system for creating fog.
First I started off by creating 4
texture coordinates, these will determine where the texture sits on the
material. Each texture coordinate has a specific U and V coordinate.
I then add 4 Panner nodes, these
will allow the texture to move to a certain speed and in a certain direction
from the texture coordinate node. I connect the ‘TexCoord’
node to the input ‘Coordinate’ on the ‘Panner’ node.
I then added the ‘cloud’ texture
from the content browser into the material editor by left clicking and dragging
it from the package into the material editor. I copied and pasted the texture 3
more times created 4 in total. These then showed as ‘Texture Sample’ nodes. I
then created a connection between the ‘Panner’ and ‘Texture Sample’.
Next I created 2 ‘Add’ nodes which
simply added the different colour channels from the textures into the ‘A’ and
‘B’ inputs on the ‘Add’ node. I then added 2 more ‘Panner’ nodes as well as 2 ‘TexCoord’
nodes to accompany them. The next 2 nodes that I created are ‘BumpOffset’
nodes, this from what I can gather information on detertime
the height and coordinate of the texture. The ‘TexCoord’
node connects to the ‘Panner’ node which then connects into the ‘Coordinate’
and ‘Height’ inputs on the ‘BumpOffset’
node. The next two nodes in line are the
texture files as ‘Texture Sample’.
I then connected both ‘Texture
Samples’ into an ‘Add’ node. Beneath the ‘Add’ node is a ‘Constant’ node, this
essentially is a colour node, so the colour shown is 1.5, similar to the colour
white as 255.
The next two nodes in line are the
‘Power’ node and ‘Constant Clamp’.
The ‘Constant Clamp’ essentially
clamps down the min and max value set on the node, for instance if it were set
to min=0 and max=1 then it wouldn’t be able to go below 0 as a minimum and
wouldn’t be able to go higher than 1 as a maximum. The ‘Power’ node takes two
inputs, raises Base to the Exp
power, and outputs the result; in other words, Base multiplied by itself Exp
times.
This is how it looked up until now:
To make sure that the fog texture
would work as fog and transparent I made sure that the material blend mode was
set to ‘BLEND_Additive’, this then ensured that any black value to be
transparent, and the white is visible.
The final stage was to create a set
of nodes to act as the opacity. The first node going from left to right was the
‘DepthBiasedAlpha’ node. This node makes sure that it cuts down the amount of
sharpness within the texture, so for example in my water test project I had
bubble foam that form around other static meshes introduced in the water, the
‘DepthBiasedAlpha’ node made sure that the bubble foam was less harsh and more
soft around the edges. This node has a Bias Scale of 50. The next node is a ‘Multiply’ node, this is
as it sounds, it simply multiplies nodes together. The ‘Multiply’ node was
inputted into the Alpha input on the ‘DepthBiasedAlpha’ node. From the
‘Multiply’ node there is another ‘Multiply’ node and to the right of that a
‘Constant’ node of 0.15. beneath this node is a ‘Fresnel’ node, the ‘Fresnel’
node calculates a falloff based on the dot product of the surface normal and
the direction to the camera. To the left of the ‘Fresnel’ node is a ‘OneMinus’
node, this takes an input value and outputs one minus that value. The final
node is another ‘Constant’ node of 0.5 which is underneath the ‘OneMinus’
node.
Once I then connected the
‘DepthBiasedAlpha’ node to the Opacity option on the material and the ‘Constant
Clamp’ node to the Diffuse option I then get a complete node network for the
fog:
The final step in the material
editor was to press the green tick button to apply the node network to the
material which can be found at the top left hand corner of the material editor.
Now back in UDK I created a small
scene using the pre built assets in UDK.
I then added in the Fog plane that I
imported from Maya
I than left clicked the material
that I just created and dragged in onto the plane creating my fog example.
In order for the scene to work and
the shadows to actually take cast in the scene I needed to rebuild my lighting,
to do this I clicked on ‘Build’ in the top bar and then ‘Build lighting’.
Final outcome renders and video
Overall I am very happy with the
outcome of making fog and if in the future it may even be a good idea for me to
add it into my final scene along with the water effect. The only thing that I
have to make sure of it that I create a plane to can ‘droop’ down over the edge
of the walkways in my BA8 scene so that the fog droops over the edge, this can
of course be done by finding a way for the fog to have some weight and a drop
off point but for now this is what it looks like.
No comments:
Post a Comment