Source SDK 2013: Your Third Shader

From Valve Developer Community
Jump to: navigation, search


Welcome to the third tutorial in the Source SDK 2013 shader tutorial series. This article will walk you through loading textures into your shader and performing various operations on them.


This tutorial builds on material covered in previous tutorials which are the following:

  1. Source SDK 2013: Shader Authoring
  2. Source SDK 2013: Your First Shader
  3. Source SDK 2013: Your Second Shader

If you haven't read through these, please do before continuing. This article will also assume you were able to get the code from the first shader tutorial built and working. We'll be using that code as the starting point for this article. You should have the following files on hand and ready to modify:

File path Purpose
src/materialsystem/stdshaders/MyShader.cpp This is the C++ code for the shader we'll be building.
src/materialsystem/stdshaders/my_pixelshader_ps2x.fxc This is the pixel shader code we'll be modifying.
game/<modname>/materials/mymaterial.vmt This is the material we'll be modifying with new parameters.

This article also assumes you know C++.


What are textures?

You can think of a texture as a 2D array which has both a width and a height property. Each array element consists of data which can represent anything. The most intuitive use of a texture is to store RGBA color data in each array element. However, you can encode all kinds of information other than color in a texture. For example, a bumpmap texture encodes 3D height values into the RGBA components instead of a color. A specular mask texture encodes the intensity of reflected light from a given pixel on a texture. The possibilities are endless.

Note.png Note: Texture data in Source is stored in a proprietary format called the Valve Texture Format, also known as VTF. A Valve Material Type (which we used in the previous tutorial) defines various properties of an associated VTF.


Let's talk about some important concepts to understand before we dive into code.

Texture samplers

Texture samplers are a construct provided by both HLSL (High Level Shading Language) and GLSL (OpenGL Shading Language). They are a representation of your texture from within your shader and allow you to access the data contained within them. Throughout your shader development career, you'll be making liberal use of an HLSL intrinsic named tex2D. It allows you to 'sample' the color from a particular point on in a texture sampler. You can think of it like the MS Paint eye dropper. You specify the XY coordinates as a 2 component vector and pass in the sampler and you'll get back the RGBA values at the specified texture coordinate. How you interpret that data of course is up to you.