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!”

• Introduction to Shaders
  24 Sep 2021

  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.

• Ambient Lighting
  24 Sep 2021

  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.

• Diffuse Lighting
  24 Sep 2021

  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.

• Specular Lighting
  24 Sep 2021

  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.

• Textures in Shaders
  24 Sep 2021

  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.

• Bump Mapping
  24 Sep 2021

  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 Skybox Shader
  24 Sep 2021

  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.

• Reflection
  24 Sep 2021

  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 Toon Shader
  1 Oct 2021

  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.

• Transparency
  1 Oct 2021

  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.

• Post-Processing
  24 Sep 2021

  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.