A Crash Course in HLSL

Matt Christian

Agenda• About Me

• What is HLSL?

• What is a Shader?– Vertex Shaders– Pixel Shaders– Geometry Shaders

• HLSL/Shader History

• How Does It Work?

• HLSL Code Segments

Agenda (Cont’d)• Shader Examples

• Implementing a Simple Shader– Shader Overview– Engine Implementation

• Post Processing Shaders

• Conclusion

• Web Links

• Extras

About Me• Student at University of Wisconsin – Stout

– Studying Applied Mathematics and Computer Science: Software Development

• Graduated with honors from Northcentral Technical College– Associates Degree in Computer Programming –

2006

• Avid gamer and general game development junkie

What is HLSL?• Microsoft’s HLSL (High Level Shader

Language) is a simple language used to write shaders.

• Used with DirectX to provide high-end graphics

• Slightly comparable to a high-level C++

What is a Shader?• A shader is a program (code file) that is

executed on the GPU (Graphics Processing Unit; ‘graphics card’) to manipulate the data before it is drawn to the screen.

• Can be written in numerous shader-specific languages:– HLSL (DirectX), GLSL (OpenGL), Cg (nVidia),

Assembly

• Math-Heavy (Algorithms)

Vertex Shaders• Shader run on per-

vertex level

• Examples:– Color– Texture– Position

• Do not change the data type

Pixel Shaders (Fragment Shader)• Run per-pixel

• Examples:– Lighting Values– Output certain color

• Cannot produce complex effects due to per-pixel implementation

Geometry Shaders• Manipulate graphics primitives to create new

primitives (points, lines, triangles)• Examples:

– Shadow Volumes– Cube Map (Skybox)

• Newest Shader type, only works in DirectX 10– OpenGL Extension

Shader Examples• Almost all recent video games use shaders

• All animated CGI movies use shaders (Pixar)

• Some techniques commonly used:– Parallax-Mapping (Bump-Mapping)– Phong Shading– Cell-shading– Bloom– High Dynamic Range Lighting (HDR)

Parallax-Mapping

Phong Shading

Ray Tracing (Pre-Rendered)

Cell-Shading (Windwaker)

Bloom (Tron)

High Dymanic Range Lighting (FarCry)

Combination (Gears of War)

Combination (Ratatouille)

HLSL/Shader History• Four Generations of GPUs• Fixed-Function Pipeline

– Released with DirectX 7 (~2000)– Transformation and Lighting (T&L) hardware

• Pixar– RenderMan shading language

• Way to bypass built-in lighting

– Problem with render times

• Programmable Pipeline– Introduction of programmer defined code (shaders)

• First consumer-level programmable GPU

– Began with DirectX 8 (~2001)

How Does It Work?• Graphics Pipeline

HLSL Code Segments• Variables

– Float4x4 (4x4 Matrix), float4 (4 row vector-matrix), float• float4 ambientColor = {1.0f, 1.0f, 1.0f, 1.0f}; //Color of Ambient Light• float ambientbrightness = 1.0f; //Brightness of Ambient

Light

• Stream Structures//App to Vertex Shader

struct ambientA2V

{

float4 Pos: POSITION;

float2 TexCoord: TEXCOORD0;

};

HLSL Code Segments (cont’d)• Semantics

– String describing the type of data being passed between shader stages• COLOR (Diffuse and specular color), NORMAL (Normal vector),

TEXCOORD (texture coordinates)

– Like variable type, gives shader ‘heads up’• ‘Use this as the normal vector!’

• Functions– Similar to regular C/C++ functions but can specify return semantic

float4 ambientPS(in ambientV2P IN) : COLOR{

//Get texturefloat4 Color = tex2D(TextureSampler, IN.TexCoord);

//Return texture * color * ambientbrightnessreturn Color * (ambientColor * ambientbrightness);

}

HLSL Code Segments (cont’d)• Techniques

– Considered ‘classes’ called by the render engine– Typically contain and run vertex, pixel, and

geometry shaders using different ‘passes’ (Passes considered ‘class functions’)

– Different techniques can be used for different hardware configurations to support old/new hardware

• Intrinsic Functions– Built-in, commonly used (usually math-related)

functions; often similar to assembly– Mul(x, y) (multiplies x * y)– Abs(x) (absolute value of x)

Implementing a Simple Shader• Example Setup:

– Shader: Ambient Light with Point Light• Technique PointLight

– 2 passes

– Engine: C++ and DirectX 9.0c

Shader Overview• 2 lighting algorithms

– Ambient Light– Point Light

• Pass P0– Create Point Light

• Pass P1– Create Ambient Light

• Code

Engine Implementation• Code

Post Processing• Render to a target (texture)

• Manipulate Texture

• Display Texture as Render

• Examples– Motion Blur– Bloom– Image Perturbation (Heat waves)

Conclusion• Shaders provide current/next – gen graphics by

fully utilizing the GPU using code algorithms– Vertex Shader– Pixel Shader– Geometry Shader

• Relatively new, still developing

• Questions?

Web Links• HLSL MSDN

– http://msdn.microsoft.com/en-us/library/bb509561(VS.85).aspx

• DirectX SDK– http://msdn.microsoft.com/en-us/directx/aa937788.a

spx

• Cg Book– http://

developer.nvidia.com/object/cg_tutorial_home.html

• My Site– http://www.insidegamer.org/Projects.aspx– http://www.geekswithblogs.net/CodeBlog

Extras• How does a shadow volume work?

– Create rays pointing from geometry to infinity• Everything within this larger geometric shape is encased

in shadow, everything outside is lit

– Determine faces aiming towards/away from lighting• ‘Fringe’ creates silhouette

– Cast rays from silhouette vertices away from light to infinity to generate shadow volume

– Optional: Place caps to optimize

Shadow Volume (Doom 3)

Extras (Cont’d)• How does bump mapping work?

– Create a heightmap texture– Apply to a model prior to lighting (same as applying

any texture to the model)– Use trig to determine the surface normal per pixel– Any lighting algorithm will calculate the new

shadows based on surface normals