Tip:
Highlight text to annotate it
X
My name is Julien, Mr.Vux.
Today I am going to explain how to do pixel shaders.
Well shaders are... obviously, because of real-time graphics, for example for VJ,
you'll always have different set of layers coming from different sources,
and you, obviously, want to composite that. So, shaders now are quite a new
standard way to composite with video, because
their graphic cards accelerated,
which means if you want to blend several layers of
HD content, it's going to be very hard if you do it
on the CPU, so use of the graphic card is really
a new standard for all this type of image processing.
You can also do more advanced stuff like graphics; there is a lot of different applications.
You can do standard image processing,
it's not only compositing, but there is a lot of visual effects.
If you look in the Texture FX Library of VVVV,
there are more than 60 different visual effects that you can apply for image treatment,
like edge detection, unsharp masking,
glows, there are a lot of different types of blurring,
there are a lot of different effects to apply on your video content.
It can be used for real-time graphics, but it can also be used for
just video rendering or compositing.
We use VVVV, because it has a very nice shader interface, but you can
easily take the concept from the lesson and use it in any platform
which supports shaders, for example, Quartz Composer, Touch Designer, Cinder...
well, anything that supports shaders, you will be able to apply it onto it.
For this lesson, if you want to use the template that I'll provide, you will need to have VVVV installed.
You need VVVV, Windows, or BootCamp PC if you are Mac User.
And you will be able to run the template, which you will be able to download (see the link in the video description).
So, before the start with pixel shaders, I'll just give a quick introduction,
because we're going to use... there are 2 types of shaders... Well, there are more then 2 types,
but for this lesson I'll use only this 2, which is vertex shader and pixel shader.
I think vertex shader is a bit harder to
get at the beginning, so we will start with pixel shader.
I'm going to use it on the recording screen. Basically, when you have a 3D pipeline,
you run the triangles, so every
point of your triangle is called "vertex".
And then you have a list of connection between those vertexes, which are triangles.
So, the vertex shader will potentially process these vertexes
and the pixel shader will process pixels. It's like if you have
an image in Photoshop, you are going to process it pixel per pixel.
vertex shaders are used for more like... you can use it for geometry,
you can use it for light calculations, for 3D, vertex shader is very important part of it.
So, lots of the light calculations are done in vertex shader,
but you can do some fancy graphics as well.
Okay, so to start to explain shaders, I'm going to show you a very simple setup.
As you see, that's like a very basic setup for pixel shaders. So, what you have
is just a full screen quad here,
you need to have this in full screen, so we have a full screen quad,
and you see this template here, this is a piece of code, which is a shader we have.
So there're few little bits, that's a very basic template,
which is normally enough to get started.
Let's have a look a bit on what it's like.
You have here these defines, which are just PI, TwoPI, HalfPI.
It's just some values that we use very often for some trigonometric functions,
so it's always very useful to have.
So, you can see here a vertex shader part, which I'll go in further lessons,
we just text position and multiply X by Scale here.
So, it just really transforms the quad, which is normally this size
into a quad which is this size.
And this here is the Texture Coordinate, which is something we going to use
a lot in the pixel shader.
So, now you can see here - you have the pixel shader unit which returns color,
so color is in R, G, B, Alpha format.
The minimum is 0 and the maximum is 1.
For example, if I here return 1, so it's white.
If I return here, I return 0.
So, you can see VVVV is very handy for this prototyping, because
as soon I change the value in my shader and save,
it recompiles it and it's already running directly in real-time.
There is last part here, which is called the technique.
When you have to render, you need to have one vertex shader and one pixel shader.
So the technique will tell you... you can create several techniques,
it's a way of quickly switching.
So for example here, you can see red.
I'm just going to call this piece "_Red".
So you see I need to attach PS_Red.
And I'm going to call my technique "TRed". So you can see it also updates here.
Let's say I want another technique which returns me blue.
So, I'm going to create blue. PS_Blue.
And I, obviously, need to create a little shader unit,
which is called PS_Blue.
And return some blue.
Now you can see here, it's updated, so I can also switch the technique directly.
The advantage of it is that it's really fast, because it's only functions,
so it's like, you can really have very quick switching between
different methods of processing your picture.
As you see, for the moment I've just used the static color,
you have to understand there's a pixel shader and every single pixel goes through this function.
And you can see here for example I have the texture coordinate,
which normally goes from 0 to 1,
if I want to create, for example, Red Gradient,
instead of having a static color, I'm just going to say: I want gradient on the X axis.
So here now i get the gradient on the X axis,
so it goes from 0 Red to Maximum Red on the right side.
If I want to have it on the vertical gradient, I can change it to "p.y".
So, also of course, I can use it as grayscale.
Okay, so now I have a grayscale gradient.
So let's now, for example, change a bit
the way we are going to under the things, so, let's say, I'm just going to create the line.
I'm just going to change the name here, TLine.
Very simple way to change the line - we just going to create a little function with a sine wave.
sin(p.x)
and (d,d,d,1).
So, you can see for the moment, it's not exactly the same as the gradient, because the sine function
from 0 to 1 will not go for full here.
So, we are going to also have a couple of little variables,
which are always useful to have. So, we need Time.
You can see also - as soon as I created this Time variable here,
it also appears here, it means I can change this parameter directly from here.
We're going to want a frequency.
And let's say, call it 20.
Normally, when using gradient, a nice valuable is Scale.
Which we're going to use 1, and we're going to use
also often a power function.
Now we have a nice basic setup.
Here power. Now we can change this and multiply by frequency.
And you can see - the lines are changing, so instead of Float I'm going to use Int.
And you can see - you have a lot of vertical lines,
you can automatically change it, if you want to make them move, we have this Time here.
So I'm just going to create a simple timer.
So now we have this little timer -
you can see how time is progressing. It's just going to progress in linear fashion.
So let's move a bit over.
And now, for example, you can just have a time function here.
And speed up a tiny bit.
I sped up quite a lot.
So now we have moving lines.
Of course, you can change the frequency and time.
You can change the speed, if you want the lines to move in another side,
you can just change it on the Y.
That's very simple way.
You can quite easily create some very simple graphics, as you see, with a little bit of code.