Half-Life 2 Game Source Shaders Tutorial tutorial

I have been wanting to learn about shaders for source for a while now, but the content that was available to me (including the other shader tutorials here on moddb) was very confusing, so i decided to share what i found out.

Also this tutorial is about teaching, not giving out code, so please don't ask for it.

---

For the shader compile to work, you need to have Perl installed, so get ActivePerl and install it from here.

You will also need the DirectX SDK if you do not already, which you can get here
Add the include, bin, and library paths to your Visual Studio.
If you do not know how to do that:
go to Tools -> Options:

then go to Projects and Solutions -> VC++ Directories

and add your directX directories.
You can change from executables to includes or libraries by going here:

Navigate to:
~MOD_SOURCE~\materialsystem\stdshaders
and double click on
"stdshader_dx9-2005.sln"

now since the shaders were updated and the code was not, we first have to fix some things. We need to change the names of alot of the shader names to put an SDK in front of it.
the easiest way to do this is press "ctrl+F" (find)
enter in this for the "Find What" box
DEFINE_FALLBACK_SHADER|BEGIN_VS_SHADER\( [^S][^D][^K]
And set the rest of the params to look like this:

now keep pressing "Find Next", and with everything it finds, before the shader name, add "SDK_" (no quotes)
so for example:
BEGIN_VS_SHADER( Refract_DX90, "Help for Refract" )
would become
BEGIN_VS_SHADER( SDK_Refract_DX90, "Help for Refract" )

---

The very basics of what a shader is:

Shaders almost always have two parts:
Pixel Shaders - Modifies each rendered pixel
Vertex Shaders - Modifies each rendered vertex

Shaders can be programmed with several languages. The common ones are:
GLSL - OpenGL Shading Language (OpenGL)
HLSL - High Level Shader Language (DirectX)
now since we are using DirectX for the source engine, we will be programming in HLSL.

There are several types of shaders.
Post Process - shaders that simply affect the entire screen
Per Object - shaders that are applied to objects.

The basic shader structure is within 3 files:
TestShader_ps20.fxc - "ps" being "pixel shader", 20 being the shader version.
TestShader_vs20.fxc - "vs" being "vertex shader", 20 being the shader version.
TestShader.cpp - the shader configuration file.

TestShader.cpp is the only file that will be compiled with the stdshader solution that you should still have open. the .fxc files are separate and will take another technique to compile. However all of these files go in the same directory, the one you should still be in:
~MOD_SOURCE~\materialsystem\stdshaders

---

Some things to keep in mind while coding in HLSL

when using float2,float3...etc, that simply defines how many variables are held inside of it.
for example:

now if i had 3 values in float2:

it would return an error during compile, i would need to use

now when getting values FROM a variable, you would use something like this:
say you wanted to get value_2 from a float3. there are multiple ways, all can work:

or i could EVEN get two of the 3 parameters

that now holds:

Now you can use tex2D or tex3D.... etc for sampling texture data. here are the major ones:
tex1D(s, t) - 1D texture lookup. s is a sampler. t is a scalar.
tex2D(s, t) 2D - texture lookup. s is a sampler. t is a 2D texture coordinate.
tex3D(s, t) 3D - volume texture lookup. s is a sampler. t is a 3D texture coordinate.
texCUBE(s, t) - Cubemap lookup. s is a sampler. t is a 3D texture coordinate.

[page=Shader Structure - Vertex Shader]
i am now editing "TestShader_vs20.fxc"

The main purpose of this file is sending the variables that you want to send, to the pixel shader.

the 1st line that you want in your vertex shader is

this adds the pre-designed shader functions and headers for ease of use.

now this part is easier to understand if you are familiar with structures of classes, no matter what language.

if we were coding in C++ this part would be in the ".h" file (just to give you some reference)
it is simply defining the variables, except with HLSL you don't define the functions as well. only the variables.

pos is going to be the position of the vertex
tex is going to be the texture coordinate.

now we set the "Main()" function.

in the parenthesis of the function we set the variables we want. but we put a "in " before it.
then we define an output, set the variables of it, and return it (that goes to the pixel shader)

---

I am now editing "TestShader_ps20.fxc"

The main purpose of this file is to actually modify the screen however you wish.

the 1st line that you want in your pixel shader is

that IS a different file than the one we used for the vertex shader!!!
now right away we need to declare the sampler.

you can use and manipulate more than 1 sampler, but for now i am just going to use 1.
now since i am going to be using the variable "Color" later on, i am going to define it up here

again, for this next part we are just going to declare the variable names:

now lets get to the fun part

inside the main() function parenthesis i again define the variables we are getting. put "in " before them again also.

and that is the basic structure, go on to the next part, which is making some effects!

[page=Shader Effects Examples]

Ok i will be workin only in the pixel shader, and only adding to the middle of the main() function, where i have:
// your modification code will go here.

BLUR

what i have done here is added the coordinants of slightly off the current position to the current color and divided it by how many there are so that it averages out the brightness, creating a blur effect.

SEPIA

RIPPLE / UNDERWATER EFFECT

I will be adding to this alot so hang tight!
also if i made an error or you want to add something, please do!!!