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