A Crash Course in HLSL Matt Christian

Agenda About Me What is HLSL? What is a Shader? HLSL/Shader History 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 Stream Structures 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 texture float4 Color = tex2D(TextureSampler, IN.TexCoord); //Return texture * color * ambientbrightness return 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 Pass P0 Pass P1 Code 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 DirectX SDK Cg Book My Site http://msdn.microsoft.com/en-us/library/bb509561(VS.85).aspx DirectX SDK http://msdn.microsoft.com/en-us/directx/aa937788.aspx 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