1. How to write a Pixel Shader CMT3311

2. Aim The aim of these slides is to introduce you to enough HLSL that you get a general understanding of pixel shaders By the end you should be able to tweak existing shader programs in a meaningful way and have enough understanding to write your own

3. High Level Shading Language The documentation for HLSL comes with the DirectX SDK so you need to run Microsoft Visual Studio.Net 2003 and then go to help and search for HLSL to get it. HLSL is C like but is a separate language from C or C++ or C#. It has it own little quirks and is rather cryptic

4. Variable types HLSL has the usual variables like int, float, bool, struct, in, out, void, string, true, false and more. Vectors can be defined in several ways e.g. one way is float3 or float4 signify vectors with 3 or 4 components Vectors can be indexed by number 0,1,2,3, color: r,g,b,a or coordinate: x,y,z,w e.g. color.r is the same as color.x or color[0]

5. Variables Matrices are usually specified by having rows and columns encoded in the variable e.g. float4x4 gives a 4 by 4 matrix Variables can have storage class modifiers associated with them e.g. uniform signifies a variable will not change, extern signifies a variable is defined externally (i.e. in your XNA program) etc

6. Semantics Semantics are used link input and output with the graphics pipeline Pixel shader input semantics include COLOR[n] and TEXCOORD[n] – i.e. input can be colour and texture coordinates – and there may be more than one. The Pixel Shader output Semantic is usually just COLOR

7. Structs We have to define structs to hold our input data which is very simple for pixel shaders but can get more complex for vertex shaders The following defines a struct that has a 2d vector called TexCoord and it has the semantic TEXCOORD0 which means it is to be treated as a texture coordinate. This will be the input to our pixel shader

8. Intrinsic functions HLSL has a set of built in functions too numerous to cover here but they include things like the trig functions sin,cos tan etc. multiplication and interpolation functions, and texture indexing functions Its best to understand these functions by looking at examples in conjunction with reading the documentation

9. Sampler A sampler is needed to get data from a texture It can be used in various ways, e.g. to be associated with a texture and how the texture is filtered as its is processed

10. Effect files A shader or effect file has the extension.fx Given all we have discussed and recalling that an effect file contains techniques and passes we can now look at our first pixel shader. See PixelShaderSimple.zip.

11. Simple1.fx

12. Output using Simple1.fx – just shows the red channel

13. Vector assignment and Swizzling Vector component assignment can be done in the usual way e.g. color.r =oldColor.b but also by using swizzling which allows indexing of more that one component at time and swapping of components around. Note all the following possible assignments:

14. Greyscale Once you are set up for pixel shading it is very easy to produce new effects The formula for converting from color to greyscale is red*.3+green*.59+blue*.11 to account for the relative brightness of colours – so we can change the pixel shader to:

15. Greyscale

16. Image Negative

17. Filtering In image processing many different effects can be obtained by filtering A filter just specifies how surrounding pixels in an input image will affect the pixel in the output image For example with blurring we just make the current pixel the average of its surrounding pixels

18. Blurring A problem we have is that texture addresses are normalised – i.e. they scale between 0-1, in the pixel shader we don’t know the real width or height So we have to guess, if the texture was 400 x 400 a pixel width is 1/400 – 0.0025 In the following example the current pixel and it top, bottom, left, and right neighbours are averaged – see blur5.fx What will happen at the edges?

20. Edge detection To do edge detection you multiply the neighbours by -1, and the current pixel by the number of neighbours and add them all together The following mask uses all eight immediate neighbours and then converts the result to greyscale. See edge9.fx

21. Edge detection – edge9.fx

22. Edge detection

23. Radial functions If we can work out how far we are from the centre we can apply an effect as a function of the distance from the centre Since the centre is at.5,.5 we can calculate how far we are away from it by D=sqrt(((x-.5)*(x-.5))+y-.5)*(y-.5)) We can then use interpolation to calculate values as a function of distance from the centre (using the lerp() function)

24. Radial blend Max distance is.7071 so we divide distance by this to make it range from 0 to 1 Note the use of the lerp() function to interpolate between two colours

25. Radial blend from the image to red at the border

26. Radial Blur This implements radial blurring

27. Radial blur

28. Radial edge detection

30. Radial Negative

32. Dynamic Pixel shaders So far the pixels shaders discussed have all been static – the image stays the same More interesting effects can be achieved if shader behaviour is varied as a function of time and is controlled by your program This can be achieved by passing variables from your program to the shader The previous shaders could work with any program – dynamic shaders however are dependant on the calling program passing values to them – in fact the majority of shaders have this dependancy

33. Displacement A lot of effects can be achieved by displacing pixels in the image - e.g. transitioning off the screen In the following the image is displaced according to the sin function – it makes it appear to shake like a jelly In wavyTimer.fx you can change the speed and number of cycles The XNA program supplies values for the variables time (to move the waves along) and magnitude (to specify how big the waves are)

34. wavyTimer.fx

35. Passing variables to the shader The XNA program defines variables for time and magnitude In update if the A button is pressed then magnitude is set to a non zero value In subsequent calls to update the magnitude is diminished over time to zero In draw the effect parameters are linked to the variable time and magnitude before the spriteBatch.draw is called See PixelShaderWobble.zip

36. Variables defined in class, set in Update(), and passed in Draw()

37. wavyTimer.fx – magnitude of waves is diminished over time

38. XNA Bloom example A much more complicated example that has four passes to produce a bloom effect can be found at: http://creators.xna.com/Headlines/develop mentaspx/archive/2007/01/01/Bloom- Postprocess-Sample.aspx

39. Bloom example Reproduced according to the Microsoft Permissive Licence, see last slide

40. Microsoft Permissive Licence Microsoft Permissive License (Ms-PL) This license governs use of the accompanying software. If you use the software, you accept this license. If you do not accept the license, do not use the software. 1. Definitions The terms “reproduce,” “reproduction,” “derivative works,” and “distribution” have the same meaning here as under U.S. copyright law. A “contribution” is the original software, or any additions or changes to the software. A “contributor” is any person that distributes its contribution under this license. “Licensed patents” are a contributor’s patent claims that read directly on its contribution. 2. Grant of Rights (A) Copyright Grant- Subject to the terms of this license, including the license conditions and limitations in section 3, each contributor grants you a non-exclusive, worldwide, royalty-free copyright license to reproduce its contribution, prepare derivative works of its contribution, and distribute its contribution or any derivative works that you create. (B) Patent Grant- Subject to the terms of this license, including the license conditions and limitations in section 3, each contributor grants you a non-exclusive, worldwide, royalty-free license under its licensed patents to make, have made, use, sell, offer for sale, import, and/or otherwise dispose of its contribution in the software or derivative works of the contribution in the software. 3. Conditions and Limitations (A) No Trademark License- This license does not grant you rights to use any contributors’ name, logo, or trademarks. (B) If you bring a patent claim against any contributor over patents that you claim are infringed by the software, your patent license from such contributor to the software ends automatically. (C) If you distribute any portion of the software, you must retain all copyright, patent, trademark, and attribution notices that are present in the software. (D) If you distribute any portion of the software in source code form, you may do so only under this license by including a complete copy of this license with your distribution. If you distribute any portion of the software in compiled or object code form, you may only do so under a license that complies with this license. (E) The software is licensed “as-is.” You bear the risk of using it. The contributors give no express warranties, guarantees or conditions. You may have additional consumer rights under your local laws which this license cannot change. To the extent permitted under your local laws, the contributors exclude the implied warranties of merchantability, fitness for a particular purpose and non-infringement.