Effects and HLSL Tutorials

These tutorials are an introduction to HLSL and effect files. HLSL is a programming language that can be used to program modern graphics cards. It allows you to do everything from lighting, to texturing, to bump, normal, and environment mapping, and just about anything else you can dream up.

HLSL can be tough for beginners, so I've tried to make it as gentle of an introduction as possible. Having said that, though, HLSL is, in fact, a very advanced topic with XNA. So before you start going through these tutorials, please make sure that you understand the concepts in the 3D tutorials. These tutorials should get you started with HLSL.

Trust me though, once you get ahold of the basic ideas, you'll love HLSL. Ever since I learned it, I sit around saying, "Ooh! I could write a shader to do that!"

effects100.png

1 - Introduction to Shaders

This tutorial explains what a shader is and how it works. It is important to understand what exactly we are trying to do when we create effect files, and this tutorial will give us the background that we need.
Introduction to Shaders
effects100.png

2 - Shaders in XNA

This tutorial will discuss how to use an effect file in an XNA game. This tutorial uses the effect file that we created in the previous tutorial, but feel free to use another effect file if you want.
Shaders in XNA
HLSL-Diffuse.png

3 - Creating a Diffuse Lighting Shader

Now that we have created a simple ambient lighting shader and applied it to an XNA game, it is time to try something a little more complicated. In this tutorial, we will cover the steps to make a shader that does diffuse lighting. Diffuse lighting is the main component of lighting, and you will notice a big difference in your shader when you get done with this tutorial.
Creating a Diffuse Lighting Shader
HLSL-Specular.png

4 - Creating a Specular Lighting Shader

The third step in our lighting shader is to add specular lighting to it. Specular lighting, or specular highlights, are the shiny spots of light that reflect directly off of an object. Without specular lighting, objects tend to look kind of dull, like chalk. After we have added specular lighting, they will appear more reflective, like plastic or metal.
Creating a Specular Lighting Shader
HLSL-Texturing.png

5 - Creating a Texturing Shader

In the previous tutorials, we have done ambient, diffuse, and specular lighting. In this tutorial, we will move away from lighting and work with textures, which are images that are drawn on models. Texturing is a pretty simple thing to do in HLSL, especially after all of the work we have already done.
Creating a Texturing Shader
HLSL-Bump.png

6 - Creating a Bump Map Shader

In all of the previous tutorials, we have covered a lot of things. However, you all probably realize that they could have been done with the BasicEffect class, and it could have been done much faster. In this tutorial, we will cover our first topic that the BasicEffect class can't do. We will go over bump mapping, which is a process where you can use a special texture to add in lots of detail to a model, without having to actually render lots of extra polygons.
Creating a Bump Map Shader
HLSL-Skybox.png

7 - Creating a Skybox Shader

In this tutorial, we will create a skybox shader. A skybox is a simple way of drawing a nice backdrop to your entire game world by surrounding it with a cube and texturing it in a particular way that looks very nice. Skyboxes are very useful by themselves, but in addition, we'll want to use skyboxes when we do reflection and refraction shaders, later on, so this is a good place to start.
Creating a Skybox Shader
HLSL-Reflection.png

8 - Creating a Reflection Shader

In this tutorial we will create a reflection shader, using an environment map. We will rely heavily on the stuff in the skybox shader, so be sure to do that one first.
Creating a Reflection Shader
HLSL-Toon.png

9 - Creating a Toon Shader

In this tutorial, we will create a simple toon shader (sometimes called a cel shader), which makes our 3D rendering look like it is a cartoon. It is a pretty simple shader, though there are other ways to do toon shading that are more complicated and give somewhat better results. In this tutorial, rather than building off of the shader from the previous tutorial, we just start from scratch. I'll just give you the code and we'll discuss it. This tutorial also discusses multi-pass rendering.
Creating a Toon Shader
HLSL-Transparency.png

10 - Adding Transparency to a Shader

This tutorial discusses how to add transparency to a shader. Transparency will allow objects or parts of objects to be see-through, which can be useful in a number of situations. You'll see that it is extremely easy to add transparency to any existing shader.
Adding Transparency to a Shader
HLSL-Sepia.png

11 - Post-Processing Effects

There is a whole category of shaders that we haven't talked about yet: post-processing effects. Occasionally, game designers want to apply certain effects to the entire screen (rather than just objects in the scene). Usually, the game window will be rendered to a texture, and then the texture will be drawn to the screen with a shader applied to it. This tutorial will go over the basic process of doing this, and in it, we'll create a shader that does nothing but draws the texture as it should be, and then we'll go on to create a shader that makes your scene black and white, as well as give it a sepia tone. Note that post-processing effects can be performed on any 2D texture, not just ones that have been created from drawing the scene to a texture.
Post-Processing Effects