Pieter Mans' Blog

Introduction

In this post I’ll be going over how you can use UV Offsetting to create a dynamic, runtime editable Oscilloscope for the UDK with a single material. Oscilloscopes are used to measure constantly varying signals.

Oscilloscopes are great for creating a retro scifi look. The one we’ll be creating will show a sine wave. We’ll be able to change it’s frequency, amplitude, and the speed at which is moves across the material. We’ll also be able to do a few cosmetic things like adjust the colour and adding a vignette effect.

Sine Waves – A Quick Breakdown

 

So that we’re all on the same page I’m just going to quickly go over some of the terms involved in sine waves. Frequency refers to the space between the valleys or peaks of the curve. A frequency of one will give you a single peak and a single valley. More than one will give you more, less than one will give you only part of the sine curve. The amplitude refers to the height and depth of the valleys and peaks. More will give you more extreme peaks and valleys, less will give you very shallow peaks and valleys.

Textures

Technically you really dont need any textures at all for this, but for cosmetic reasons I’m using a single channel-packed image. I’ve included it below, feel free to grab it.

 

The Material – An Overview

There are several parts to this material. “Grid”, “Glow” and “Line” are all cosmetic. They take the images from the channels of the channel packed material and combine them into something that resembles an oscilloscope.

“Sine Wave” creates the sine wave pattern. “Inject Into UV” combines the sine wave pattern with the UV’s for the green channel (the one containing the flat line) to create the appearance of a sine wave. “Vignette Blend” and “Vignette Generation” can be used to reduce the amplitude of the sine wave towards the edges of the material (cosmetic, just for a stylised retro look).

Grid, Line and Glow

Let’s get the simple stuff out of the way here. If you aren’t familiar with parameters I suggest you read the first part of this series.

Each of the above sections take the appropriate image from the appropriate channel and colourises it according to the “Colour” parameter and then changes it’s intesity to make it darker or brighter. Straight forward stuff. The Line section is already accepting the offset UVs that we’ll be digging into in a moment.

Creating the Sine Wave

To create the sine wave we’re going to take advantage of a useful material node called, appropriately, “Sine”. It can be found in the Math section. When given a range of values from 0 to 1 it produces the iconic “sine wave”:

 

So we need to give the sine node a range of number ranging from 0 to 1. Now picture in your mind what that would like as an image. You know that a constant value of 0 will give you black and that a constant of 1 will give you white. So a series that ranges from 0 to 1 will give you a black and white gradient. This might seem obvious, but it really helps to see all the images show in the nodes as representations of series of numbers, rather than just images.

Now, we could simply create a gradient image in Photoshop and import that. The problem with that, however, is that it’s not a true gradient. It’s made up of pixels. If the nodes end up asking for a value that’s between pixels we’re going to get distortion. Luckily for us theres an “algorithmic” way of doing this. The UV Coords node is actually a combination of two perfect, algorithmic gradients. We can extract this gradient with a Component Mask and use it instead of an image, giving us the same result but with no distortion and using less texture memory.

Above is a breakdown of the first section (in red) of the sine wave generation section. Remember that this is all going to be fed back into a UV Coord node at some point. We also want our sine wave to scroll across the material. We could use a panner but we also want to be able to control the speed with a parameter. We can mimic the behaviour of panning by multiplying our speed parameter with a time node.

The second section (in blue) is where we extract the gradient from the UV Coord node. Make sure you get the red channel. If you’re not familiar with component masks, I reccomend that you read the first part of this series.

 

The third part of this section (in green) is where we add in our frequency paramter. All this does is take the gradient (which represents 0-1, remember) and makes it represent 0 – 4, or whatever the frequency is set at.

This is the most important part. The first step here is to add the fraction node. What this does is to look at each value and discard the part that comes before the decimal place, replacing it with zero. This gives the striped appearance seen in the nodes preview.

Next we pass this on to the Sine node which turns the series of 0-1 values into individual sine curves (represented here in black and white columns of pixels, of course).

Finally the output of the Sine node is multiplied by out Amplitude parameter.

Vignetting – Generation

You sometimes see oscilloscopes in movies and comics, especially retro scifi stuff, where the amplitude tapers off to the edges. We can mimic this by multiplying in a vignette on the left and right edge of the material.

We’re doing basically the same thing we did to get a gradient for the sine node. The multiplication node makes the black part of the gradient smaller. By doing this once, reversing the gradient, doing it again and multiplying the two together we get the vignette effect we’re after. The parameter here influences the amount of multiplication and can be used to change the smoothness of the tapering effect the vignette will cause.

Vignetting – Blend

The simplest way to create a blend from “no vignette” to “full vignette” is to use a Linear Interpolate node. Just plug stuff in like you see below:

Vignette Blend

UV Injection

Okay, we now have all the setup we need to finally be able to inject our sine wave data into the UV Coords that will be distorting our line.

What we’re doing here is seperating out the red and green channels of the UV Coord and adding the sine data to the green channel. We then recombine the red and modified green channel with a Vector Append node. Finally we plug the modified UV Coords into the Line texture.

Finishing Up

You should now create an instanced material from the material we just made. If you’re not sure how to do that, check out part 1 of this series. You should end up with something like this:

Introduction

This is a slightly more polished version of the tutorials that I posted in the Polycount forums. It shows how you can use UV offsetting, or distortion, to create variation in your materials.

In this tutorial we’ll be modifying this material below.

At the moment the waves in the sand are very straight. In reality, these waves would curve all over the place., as seen bellow.

We could solve this by simply adding the curves into the texture maps but the proble there would likely be obvious tiling artefacts. What we can do instead is use a texture map to distort the UV coordinates of the texture. Since we can change the UV scale of this new map we can minimise tiling problems.

Setting Up the Material

Over the next few images I’ll go over the basic material tree.

We’re interested in the three nodes on the right here.

Because we’re going to be eventually creating a Material Instance (I will explain what that is later) I’m using a Scalar Parameter here. Scalar paramters do exactly the same job as constants with one big difference but we’ll come to that later. Make sure you enter “Noise Scale” into the name property of the Scalar Parameter.

What we’re doing with these three nodes is actually scaling the UV Coords. This is just like when you type the values in the UTiling and VTiling fields in the properties of the TexCoord node.

The next three nodes (circled in red) scale the intensity of a special texture that will introduce noise into the waves. It has to be very blurred with no sharp transitions in intensity anywhere and it must tile. Here’s one I made earlier that you can use.

Once again we’re using a Scalar Parameter here. All it does is lower the brightness of the texture. Make sure you enter “Noise Intensity” into the name property of the Scalar Parameter.

Okay, this is the complicated part (not too bad when you know whats going on). Now, the TexCoord node represents an image with two channels, Red and Green. We want to play with those those channels. In the past I’ve tended to get better results when splitting the two channels off and working on them individually. I have no idea why this should be the case but it seems to be.

To split off the channels we use a node called a Component Mask. The component mask masks out all channels except for the ones that you chose in the node’s properties. Whats especially useful is that the material editor remembers what colour that channel represents rather than just thinking of it as a greyscale image. This means that when you combine it later with a green channel you get your two channels back again.

Create component masks as above, two red masks and two green masks, One pair of red/green masks gets the value of the multiply from the last section and the other gets another TexCoord. This new TexCoord node is the one we’re going to be distorting and using.

Okay, next we add the outputs of the red component masks together and we do the same to the green ones. It’s important to make sure that you add values that come from component masks only when you’re doing this or the material editor will forget that the greyscale values represent a particular colour channel.

Finally. we need to use another special node called an Append Vector that looks for colour channel info and combines it all back into what is essentially a Constant2Vector or Constant3Vector. This is out distorted UV Coords. It might not look very different but even minute changes can have a big effect!

Now it’s a case of simply attaching our distorted UVs to the normal map and, of course, plugging in some kind of sandy diffuse.

Material done!

Creating the Material Instance Constant

Save and go back to the content browser where you made the material. Right click on your sand material and select “Create New Material Instance (Constant)”.

This is why we used Scalar Parameters instead of Constants. A material instance is a, well, instance of a material. What that means is that we can change the values of the any “parameter” nodes of the material without having to recompile the material. Because theres a bit of trial and error involved in getting this material to look right being able to adjust the amount of distortion in real time without having to recompile is a huge time saver.

You should have a new material constant now, like above. Double click on that.

You should see a screen similar to the one above now. Click the triangle next to “Scalar Paramter Values” and then make sure you check the boxes next to “Noise Intensity” and “Noise Scale”.

Using the Material

It’s a good idea too apply your instanced material to a flat BSP surface like I have below.

Now move the Material Instance Editor window over so you can see the Scalar Parameter values and the texture on the BSP surface. If you move your cursor over the up down arrows next to the parameter values your cursor will change to an up/down arrow. If you click and drag up or down you can smoothly change the value and the material will change in real time on the BSP surface!

By playing with the two values you can get greater or smaller amounts of distortion. Here’s two different settings I had: