Spaces• Object space (also called model space):a convenient space to model the object– Coordinates of an object relative to itscenter

Spaces• Camera space: camera placed at origin,generally looking down -Z axis with +Yup **and** +X to the rightC

Spaces• (Clipped) Normalized DeviceCoordinates (NDC)– Camera still looking at -Z, +Y up, +X right– Space scaled to (x, y, z) each in [-1, 1]• Can think of x, y as screen coordinates

Spaces• Screen space (pixel coordinates)– Just a scaling of NDC• As we said, NDC represents pixel coordinates– Screen transform maps [-1, 1] x [-1, 1] to[0, screenWidth] x [0, screenHeight]– Once in screen space, it's simple to drawthe pixels– This is usually done in hardware; we won'tthink too much about it here

SpacesNominally, the spaces are related as such:Graphics engine doesthese steps internallyModelspaceModelspaceModelspaceWorldtransformsWorldspaceCameratransformProjectiontransformNDCPixel/viewporttransformPixelcoordinatesRasterizationModelspaceCameraspaceRenderedimage

Spaces**OpenGL** eliminates world spaceGraphics engine doesthese steps internallyModelspaceModelspaceModelspaceModelviewtransformsCameraspaceProjectiontransformNDCPixel/viewporttransformPixelcoordinatesRasterizationModelspaceRenderedimage

Transformations• Matrix multiplication for object, world, cameratransformations• Take V = (x, y, z, 1) We use the 4th dimension (1) to make translations easy– Set up a stack of matrix transformations O 1 , O 2 , …O n– Multiply together in reverse order to applytransformation• That is, V final = O 1 O 2 …O n V– Note: rotation **and** scaling commute; translationdoes NOT commute• TRS = TSR; TRS != RTS != RST

Transformations• All transformations realized as 4x4 matrices• Translation by (x, y, z):– See why the 4thcoordinate is useful?• Scaling by (a, b, c):– Scale x by a, y by b,z by c, that is

Transformations• Rotation is more complicated…• Let v = (x, y, z) with |v| = 1 be the axis ofrotation **and** a be the angle of rotation• We define R with:– S =– Then R =– Note that R -1 = R T

Transformations• Projection transformation (cameraspace to NDC)

Transformations• Projection transformation– n = near, f = far, l = left, r = right, t = top, b= bottom

Transformations• Projection: just add it to the beginning ofthe stack– V final = PO 1 O 2 …O n V• If V final = (x, y, z, w) then V final,NDC =(x/w, y/w, z/w, 1), clipped to [-1, 1]

Rasterization• Draw triangles from NDCvertices• Draw pixels inside triangleboundary, interpolatingdata at boundaries– Barycentric coordinates• Initial pixel color interpolated from vertex data– Can modify with GPU shader code

Buffers• Z-buffer– Store the (linearly interpolated) depth of eachpixel, in NDC– Don’t draw pixels if a nearer pixel has alreadybeen drawn– Easy method to ensure that further objects aren’tdrawn over nearer objects• Double buffering– Render to one buffer while the other is displayedonscreen– Swap buffers when done drawing

**OpenGL**• So what does **OpenGL** do?– Implements the basic rendering pipeline• Works as a massive state machine to modifyrendering properties– Change its state in order to render– When a property is set, it won’t change until it’sreset by the code– Some properties: vertex color, lighting mode,transparency mode

**OpenGL** transformation pipeline• Vertices in object space transformed to camera space bymodelview matrix (combines world **and** camera matrices)• Viewport transformation converts NDC to pixel coordinates(based on the window/screen size)

**OpenGL** transformation stacks• Stacks of matrices usable to storeprevious transformations• Two stacks: modelview **and** projectionModelviewmatrix stack(32 4x4 matrices)Projectionmatrix stack(2 4x4 matrices)

**OpenGL** transformation stacks• Push **and** pop transformations– i.e. render an arm, push– translate to h**and**, draw palm, push• translate to **and** draw finger 1, pop, push• translate to **and** draw finger 2, pop, push• …– pop, translate to other h**and**…

**OpenGL** transformations• Function calls to build 4x4 matrices **and**place them on the stack– glTranslate3f(x, y, z)– glRotate3f(a, x, y, z)• a in degrees; x, y, z don’t have to benormalized– glScale3f(x, y, z)– glFrustum(l, r, b, t, n, f)• Sets up the projection transformation

**OpenGL** transformations• Can set up projection more easily usingGLU (GL Utility) library• gluPerspective(fovy, aspect, near, far)aspect = w/h

**OpenGL** geometry/rendering• How do we use these transformations torender triangles?// set up transformations...glBegin(GL_TRIANGLES);glVertex3f(x1, y1, z1);glVertex3f(x2, y2, z2);glVertex3f(x3, y3, z3);// more sets of 3 vertices for more trianglesglEnd();• Add glNormal3f(xi, yi, zi) calls beforeglVertex3f calls to attach normals to vertices

**OpenGL** geometry/rendering• glShade(GL_SMOOTH / GL_FLAT)– Tells **OpenGL** whether to use per-vertex lighting(Gouraud) or per-face lighting (flat)– For fixed pipeline, this won’t matter when we useGPU shaders (we'll override the default lighting)• **Lighting** functions to set up light state– Same for material properties– Generally done during initialization; take a look athomework 1 code to see how it’s done– Light **and** material state can be read in GPU code,so it’s still useful

How to render with **OpenGL**• Initialize– Set up lights, materials, buffering, window size,camera/projection matrices, etc.• Redraw– Clear current backbuffer (from double-buffersetup, it’s the one not being displayed)– Set up transformations, glBegin,glNormal3f/glVertex3f, glEnd– Swap buffers

**OpenGL** Utility Toolkit (GLUT)• Very simple windowing systeminterfaced with **OpenGL**• Sets up callback functions that arecalled when events occur– For example, mouse movement,keystrokes, window redrawing• We’ll use GLUT for the assignments– But we’ll give you most of that code

Simple lighting models• Flat, Gouraud, Phong– Per-face, per-vertex, **and** per-pixelapplications of the same lighting equation

Simple lighting models• The rendered color of an object is thesum of several components– Ambient is simple: it’s a static light

Simple lighting models• The rendered color of an object is thesum of several components– Diffuse **and** specular represent reflectionsgraphic from Wikipedia

Diffuse lighting• Diffuse component equation:– I d = C d * cos(a)– C d is diffuse color, L is vector from light, Nis normal vector at surface– Can find a using N . L N La

Specular lighting• Specular component equation:– I s = C s * (R . Eye) S– Cs is specular color, S is ‘shininess’ ofobject, Eye is vector to camera, R isreflection of L about N• Or, R = 2N (L . N) - L– All vectors must benormalized!EyeRbaNaL

Overall lighting model• **Lighting** equation: Color = I a + I d + I s– I a = ambient color– I d = diffuse color– I s = specular color

Homework 1• Implement per-pixel lighting using GLSL• Should be a short homework; mainly tomake sure GLSL is working foreveryone• Due by class time next Wednesday– Don’t forget to include a readme file…

Recitation 1CS 179: GPU ProgrammingLecture originally written by Luke Durant, Tamas Szalay, Russell McClellan

Recitation contents• Explanation of lab 1• Phong shading model• Introduction to GLSL– Basic GLSL syntax

Lab 1• Create a per-pixel phong renderer• Use GLSL to create vertex **and** pixelshaders

Simple lighting models• Diffuse component equation• I d = C d * cos(a)– C d is the diffuse color, L is the light vector,**and** N is the normal vector– Can find a using N . LNLa

Simple lighting models• Specular component equation• I s = C s * (R . Eye) S– C s is the specular color, S is the shininess– R = 2N(L . N) - L, or use reflect()– Eye = -Pos (if in eye-space)• All vectors must be normalized!RNLEyebaa

Simple lighting models• Overall lighting equation• Color = I a + I d + I s– I a is ambient intensity– I d is diffuse intensity– I s is specular intensity

Blinn shading• **OpenGL** uses a simplified versioncalled Blinn shading, **and** onlycomputes lighting on the vertices• Intensity proportional to (H . N) S

Blinn shading

Phong shading (vertices)

Phong shading (pixels)

GLSL• GLSL is a high-level language for writing GPU programs• Two most important types of GLSL shaders: vertex shaders **and**fragment shaders– There are also geometry shaders, etc. but we won't use these• These shaders override specific parts of the graphics pipeline

Default **OpenGL** pipelineVertex dataWorld space to NDC conversion, per-vertex shadingRasterization **and** interpolationPer-pixel coloration

Shader pipelineVertex dataVertex shaderRasterization **and** interpolationFragment shader

Notes on GLSL pipeline• The vertex **and** pixel shader pipelinewas designed for graphics– There are some issues with using it fornon-graphics computation• Since shaders replace existing parts ofthe pipeline, often need to re-implement**and** extend default algorithms– However, the GLSL environment makesthis pretty easy

Vertex shaders• Vertex shaders are responsible for allper-vertex calculations• In the default pipeline:– Convert vertices from object space to NDC– Perform all lighting/texture coordinatecalculations

Fragment shaders• Fragment shaders are responsible forall per-pixel calculations• Before the frag shader, all per-vertexdata is interpolated by the rasterizer• In the default pipeline:– Simple sets the output color of the pixel tothe interpolated vertex color

Vertex **and** fragment shader callsVertex shader runsonce for every vertexFragment shader runsonce for every pixelrendered in the scene,with vertex datainterpolated

GLSL syntax **and** programming• GLSL has very similar syntax to C– main() is entry point for both vert **and** fragshaders• Some extra language support for vector**and** matrix operations• Lots of built-in functions **and** variables

GLSL types• Floating-point: float, vec2, vec3, vec4• Integer: int, ivec2, ivec3, ivec4• Boolean: bool, bvec2, bvec3, bvec4• Matrices: mat2, mat3, mat4

GLSL built-in variables• H**and**y reference guide to all built-infunctions **and** variables:– http://www.khronos.org/files/opengl-quickreference-card.pdf– Bookmark this!– It's a good reference for **OpenGL** ingeneral, so it may be useful for the nextfew weeks

Vertex shader built-in variables• Inputs:– gl_Vertex: object space position– gl_Normal: object space normal• Outputs:– gl_FrontColor: write vertex color to thisvariable (or don't, if you do this in thefragment shader)– gl_Position: write output NDC position

Fragment shader built-in variables• Input:– gl_Color: interpolated per-vertex color• Output:– gl_FragColor: write pixel color here

Both shader variables• Inputs:– gl_LightModelParameters• gl_LightModelParameters.ambient– gl_LightSource[0].diffuse, etc.– gl_FrontMaterial.diffuse, etc.– gl_ModelViewMatrix– gl_ProjectionMatrix– gl_NormalMatrix (use instead of modelviewmatrix to transform normals to world space)

Built-in functions• dot() - takes the dot product of two vectors• sin, cos, pow, etc. - similar to math.h in C– Angles are in radians• ftransform() - perform fixed transform• reflect() - reflect a vector about another vector• Many more! See GLSL reference

Communication between shaders• What if shader need more informationthan given by the built-ins?– Special keywords…• Vertex -> fragment: varying• CPU -> both (per render): uniform• CPU -> both (per vertex): attribute• CPU -> both (large data): use a texture– We'll see this next week…

Sample vertex shaderuniform int ambientEnabled;varying vec3 normal, lightDir;void main() {normal = normalize(gl_NormalMatrix * gl_Normal);vec3 worldPos = vec3(gl_ModelViewMatrix * gl_Vertex);lightDir = normalize(vec3(gl_LightSource[0].position) - worldPos);gl_Position = ftransform();}

Sample fragment shaderuniform int ambientEnabled; // same as in vertex shadervarying vec3 normal, lightDir; // same as in vertex shadervoid main() {vec4 color = vec4(0, 0, 0, 0);if (ambientEnabled)color = gl_LightModel.ambient * gl_FrontMaterial.ambient;float NdotL = max(dot(normalize(normal),normalize(lightDir)), 0.0);color += (gl_FrontMaterial.diffuse * gl_LightSource[0].diffuse *NdotL);gl_FragColor = color;}

Using shaders• Example included in lab 1– Can use that code in future projects• p = glCreateProgram();• v = glCreateShader(GL_VERTEX_SHADER);• glShaderSource(v, 1, &src, NULL);• glAttachProgram(p, v);• glAttachProgram(p, f);• glLinkProgram(p);• glUseProgram(p);

Setting uniforms• L = glGetUniformLocation(p, "variableName");• glUniform1f(L, value);– Use glUniform1i for integer uniforms, etc.• Shaders must declare the variable outside of themain() function using the uniform keyword