An Introduction to HLSL (Part II)

Continuing on in our exploration of HLSL, let’s look at building a simple shader that applies a texture to a model using UV coordinates.

Before we get to anything super complicated, we still have a couple basics to cover that we didn’t touch on in part 1. Now we’ll look at passing textures to our shader, using our model’s UV coordinate map to apply that texture to our model, and setting up a couple render states. This isn’t all that complicated, although finding out exactly how to do this is a little tough.

To start it off, let’s look at our HLSL:

That’s the whole thing. What’s different?

First of all, we’ve got a new parameter in the header: a texture. The HLSL texture type maps directly to the XNA Texture2D type. We also have a sampler2D variable that is defined with a sampler_state block. All we really need to know here is that the sampler2D is the thing we’ll be getting our texture data from. Presumably we could set up a couple different sampler2D objects with completely different sampler_states but which reference the same texture. We can also pass in non-texture data in a texture, but that’s beyond our little exploration for now.

Now, we’ve changed the definition of our VertexShaderInput and VertexShaderOutput. We’ve done this because we need a few more things from XNA in order to texture. Most importantly, we need the uv coordinates of each vertex, so we add float2 TexCoord: TEXCOORD0; to our struct to make sure we get it.

At this point, we’ve got our texture, and we have the uv coordinates for our vertices. Our vertex shader doesn’t need to do anything with these, but it does need to pass them along to the pixel shader, which will do something with them. That’s why the VertexShaderInput and VertexShaderOutput are nearly identical.

So let’s look at the pixel shader, since that’s where the texturing actually happens. Remember, the pixel shader has one job: to return the color of a pixel. In our case, the color we need is stored at the uv coordinate of the texture, so we just need a way to grab that pixel and look at it’s color. HLSL has a function that does this for us:

tex2D(mySampler, input.TexCoord);

This is pretty simple. This function looks at the first parameter, a sampler, and returns a float4 containing the RGBA values of the pixel at location input.TexCoord, which is a 2D vector containing the UV coordinates of the pixel. Just return this value, and we’re done.

If we stopped here, we’d have one small problem. Take a look at the picture to the right and see what I mean.

It might not be totally obvious from the picture what’s going on, but there is no backface culling going on. Which means the triangles which should be obscured by those triangles closest to us are getting drawn anyways. HLSL by default does no culling. So everything gets drawn, even if it overlaps something else. To fix this, we need to set a few render states. As you can see from the Pass0 body, we set the culling mode to CCW (counter clockwise) and enable z-buffering. Now everything works right.

Well, there wasn’t much to it but that’s our second shader. Just to make it a little more interesting, I included some commented out code to manipulate the texture color in the pixel shader. Uncomment those three lines to mess with the colors, and invert the image.

That’s all for part 2 of the Intro to HLSL series. Now I’ll have to figure out what to do in part 3. If you have any suggestions, feel free to let me know.