Writing some shaders

1. Writing some shaders And some assignments

2. But first... • Let's discuss academic honesty

3. Academic honesty and assignment 3 • I have not graded assignment 3 yet • If for any reason you don't want me to grade what you submitted, let me know and I will ignore what you submitted • You can email; no need to say anything right now • This is not an admission of dishonesty, and will not go to CSAS or anyone else

4. Reading assignment • For next Thursday, please read • Section 6.1 (Light and Matter) (skim) • Section 6.2 (Light Sources) • Section 6.3 (The Phong Reflection Model) • Section 6.4 (Computation of Vectors) • You can ignore the part beginning "For curved surfaces, how we compute normals..." • There will be a quiz (and it will be the promised extra credit quiz)

5. Programming assignment • It's bunny time! • For this assignment, you are responsible for getting two separate lights working in the same shader • You will be using this to light up a 3D model of a bunny • This assignment is due November 1 • You only have one week for this assignment • Let's talk about this model a bit...

6. Stanford bunny • Along with the Utah teapot, the Stanford bunny is one of the more recognizable computer graphics "hello world" shapes • The 3D model comes from Stanford • Based on a digital scan of this physical porcelain bunny • Shows up in a LOT of places...

7. Today • We will discuss the different types of shaders • We will get normal information into our fragment shader • We will see how we can use GLSL to work with vectors and matrices • We will use math to calculate the amount of lighting on our bunny

8. Looking at our code • Let's look at how the starter code is set up...

9. As an aside: .obj files • Obj is a file format used for representing 3D objects • Objects are made up of "faces" (polygons) • Each vertex in a face will have a position • Each vertex in a face may have normals (or texture coordinates) • You can use programs like Blender to create .obj files for whatever shape you want • Let's take a peek at what these look like...

10. Vertex shader vs. fragment shader • The vertex shader is run once for every vertex we draw • We have access to attributes and uniforms • If we are drawing triangles, the output of the vertex shader is taken three vertices at a time and used as a shape to rasterize • "varying" variables are output; interpolated across this rasterized shape • The fragment shader is run once for each pixel we draw • We have access to uniforms and "varying"s • The vec4 we write into gl_FragColor is the color that is drawn

11. Getting normals into our shaders • Let's look at how this is done...

12. GLSL syntax • GLSL is a strongly typed language used to write OpenGL/WebGL shaders • Primitive types include float, vec2, vec3, vec4, mat2, mat3, mat4 • Math operations are defined on these types in the way that you would want • Let's see an example...

13. Type constructors • GLSL allows us to use a smaller vector to define the values in a larger vector • For instance • vec3 pos = // yadda yadda yadda • vec4 answer = vec4(pos, 1.0);

14. Type constructors • GLSL also allows us to use a type constructor to make a smaller type out of a larger type • For vectors, the first components are used • For matrices, the top-left submatrix is used • Great for taking a 4x4 rotation+translation matrix and turning it into a rotation matrix (hint)

15. GLSL data types • GLSL is more strict about data types than other C-ish languages • 1 is different than 1.0, and can't always be used in its place • If you mean to indicate a floating-point constant, include ".0" at the end if necessary

16. Swizzling • Any guesses as to what this is?

17. Swizzling • Swizzling allows us to take a vector type and pull components from it to create a new vector containing that data • We say vector.swizzles (with things explained below) • "vector" is either a vector variable or an expression that evaluates to a vector • "swizzles" is a list of the components you want from the vector, in the order you want them in a new vector • You can choose from x,y,z,w; r,g,b,a; s,t,p,q • Can choose 1, 2, 3, or 4 components

18. Finally lighting things up • Okay, let's start with the base level of our lighting model...

19. Finally lighting things up • Okay, let's start with the base level of our lighting model... • Ambient term!

20. Finally lighting things up • Okay, let's start with the base level of our lighting model... • Ambient term! • Diffuse term!

21. Finally lighting things up • Okay, let's start with the base level of our lighting model... • Ambient term! • Diffuse term! • Specular term!