Shaders Steffan Pease Jon Sandacz Wesley Stover TingChun

Shaders Steffan Pease, Jon Sandacz, Wesley Stover, Ting-Chun Sun

What is a shader?

Shader Languages HLSL: Microsoft GLSL: Open. GL Shader. Lab: Unity

Buffers Vertex Buffer Depth Stencil Frame Buffer Object Instance Buffer

Types of Shaders Vertex Tessellation Geometry Fragment Compute

Vertex Shader - The vertex shader acts on each vertex. - Vertex shader can alter all information from the vertex, but cannot make more. - 1: 1 ratio of user-specified input vertex attributes to output vertex information

Tessellation Shader - Allows for adaptive level-of-detail scaling of simple meshes inside the graphics pipeline. - High promise for water/land.

Geometry Shader - Relatively new CAN create new primitives Takes as input old primitives The concept of geometry shader is easily shown with shadow volumes

Fragment Shader - Also known as pixel shaders - What most people think of when they hear ‘shader’ - Fragment shaders are used to write buffers (eg color buffer, depth buffer)

Rendering Pipeline Open. GL Rendering Pipeline

Mapping ● Maps store data to be used by shaders. ● Maps are usually images. ● The image is used as a 2 D array, where the x and y value of the map are accessed by the shader.

Map Types ● ● ● ● Diffuse Map Specular Map Lightmapping Environment Map Normal Map Parallax Map Displacement Map

Diffuse Map ● Specifies the general color of a fragment when light shines on it. ● Sometimes called colormap or albedo.

Specular Map ● Determines the specular value of a fragment, or how dull/shiny the fragment is. ● Tiles are shiny, grout is dull.

Lightmap ● Static lighting and shadows do not change, so store in maps. ● Lighting is calculated once from the scene, taking all lighting and geometry into account.

Environment Map ● Approximation for reflection. ● Uses a cubemap o Usually the same images as the skybox or images of immediate surroundings. ● May use a sphere map instead. ● Uses a simple reflection equation to determine the point on the cubemap that would be reflected.

Normal Map ● Normal: Direction a surface is facing. ● Rotates normals to modify the direction light hits the surface. ● Creates illusion of depth when light is casted on it. ● Looks flat when surface is perpendicular to the view.

Normal Map Applications ● Add surface bumps to a texture. ● Convert a high poly model to a low poly model while preserving fine details. o Calculate “bake” a normal map from a high poly version. ● Create a texture directly from a model. o Rocks and bricks are easy to make this way.

Parallax Map ● Extends normal map with added information about depth, stored in a height map. ● Parallax map shader will displace the texture coordinate based on the height map. o Height map is a general use map for storing data about depth.

Normal Map vs Parallax Map

Displacement Map ● Displaces position of the nearest vertex in the direction of the nearest surface normal based on a height map. o Normal map merely rotates normals. ● Can cast shadows. ● Tessellation may be used to subdivide faces, making more vertices to displace. ● Expensive.

Normal Map vs Displacement Map ● ● Normal map above, Displacement map below. Normal map looks flat at an angle.

Tools for Making Maps can be generated in 3 D programs or code can be written to generate them, but there is also software made specifically for working with maps: ● Crazy. Bump o Generates parallax, displacement, specular and AO from diffuse. ● NDO o Photoshop plugin for painting normal maps, preview in Photoshop. ● Substance Painter o Painting application for materials.

Tiled Direction Flow Proposed changes at SIGGRAPH in 2011, based off another shader proposed in 2010. Based around sliding the coordinates of a normal map to generate the appearance of water moving. Proposed changes take a tile based approach and sum their contributions from nearby tiles. https: //www. youtube. com/watch? v=wdcv. Peg. J 1 l w

Tiled Direction Flow

Gerstner Waves Represent water as z=R(x, y, t) using a summation of sines Allows for large bodies of water to generate rolling waves and small pools to generate surface ripples Can be done on vertex or pixel shader.

Restricted Tall Cell Grid ● Shown at SIGGRAPH 2011 ● Uses a 3 D texture to represent a few properties about the texture then uses a finite element equation. It also represents the height of the water and open spaces. ● https: //www. youtube. com/watch? v=Jl 54 WZt m 0 QE

Fur shader The goal of this shader is to preserve the shape of the original object; this is done by rendering the same mesh multiple times scaled up slightly and with an increasing alpha channel

Fur shader You then make plates on the edges with a normal facing away from the camera

Non-photorealistic Rendering (NPR) ● More accessible ● Less threatening ● Stylish

Uncanny Valley

NPR in 3 D Application ● Abstraction o Scientific visualization o Architectural illustration ● Stylisation o Experimental animation o Video games

Cel Shader ● Cartoon style (Toon Shader) ● Dominated by large areas of flat colour ● Often stylised highlights and shadows

Basic Cel Shader ● Typically use a 1 D texture ● More flexible than hard-coded thresholds ● Artists can modify shading for each object

X-Toon: An Extended Toon Shader ● Extend 1 D toon texture by a second dimension (D for level of detail), e. g. o o o depth highlights near-silhouette Pascal Barla; Joëlle Thollot; Lee Markosian, International Symposium on Non-Photorealistic Animation and Rendering (NPAR), 2006

X-Toon: An Extended Toon Shader

Okami (2006)

Mad. World (2009)

Future of Shading ● Future seems to point towards a combination of raytracers and rasterizers ● Open. GL is moving away from state changes and more towards an object model (DX 10 is the Microsoft movement)

Reference Pascal Barla, Joëlle Thollot, and Lee Markosian. 2006. X-toon: an extended toon shader. In Proceedings of the 4 th international symposium on Nonphotorealistic animation and rendering (NPAR '06). “GPU Gems 3. ” - Chapter 11. Efficient and Robust Shadow Volumes Using Hierarchical Occlusion Culling and Geometry Shaders. Nvidia, n. d. Web. 30 Oct. 2014 Miller, SIGGRAPH 2011 Vancouver, August 8 th, 2011 Tessendorf, Terry. “Simulating Ocean Water”. retrieved graphics. ucsd. e

Reference Mueller, Matthias. August 15, 2011. “Real-Time Eulerian Water Simulation Using a Restricted Tall Cell Grid”. Siggraph 2011 matthias-muellerfischer. ch/publications/tall. Cells. Slides. pdf “GPU Gems. ” - Chapter 1. Effective Water Simulation from Physical Models. Nvidia, n. d. Web. 30 Oct. 2014 Lengyel, Jerome. Praun, Emil. Finkelstein, Adam. Hoppe, Hugues. “Real-Time Fur over Arbitrary Surfaces”

Reference Zink, Jason. "A Closer Look At Parallax Occlusion Mapping - Graphics Programming and Theory - Articles. " Game. Dev. net. N. p. , 09 Aug. 2013. Web. 30 Oct. 2014. Garcia, Angel. "Unity 3 D Lightmapping Reference Guide. " Edy's Projects. N. p. , 25 Sept. 2013. Web. 30 Oct. 2014. <http: //www. edy. es/dev/docs/unity-3 dlightmapping-reference-guide/>. Mizutani, Yoshihiro, and Kurt Reindel. "Environment Mapping Algorithms. " Reindel Software. N. p. , n. d. Web. 30 Oct. 2014.

Questions?