The first test will be given in class on Wednesday, February 29. The test will cover everything that we have done from the beginning of the term through class on Friday, February 24. This can include basic material from Labs 1 through 6, but there will be no questions on this exam about Gimp or Blender as such.
The format of the test will be the usual: some essay questions and definitions; reading some code and explaining its purpose; writing some code. There will probably be some geometrical questions that ask you to work with transformations and primitives. I might give you some code and ask you what it draws. I might give you a picture and ask how it could be drawn. There will be less actual coding than on most of my tests.
Here are some terms and ideas that you should be familiar with:
Computer graphics
Pixels
Painting programs vs. Drawing programs
Basic elements of 3D Graphics:
geometric modeling
geometric transformations
viewing and projection
lighting
textures
animation
OpenGL
the idea of the fixed-function pipeline and its limitations
the programmable pipeline
OpenGL ES
WebGL
uses the HTML <canvas> element
based on OpenGL ES 2.0, which has NO fixed-function pipeline
uses the shading language GLSL ES 1.0
JavaScript
writing a script: <script type="text/javascript">
...
</script>
loading libraries with <script type="text/javascript" src="..."></script>
using <body onload="..."> for initialization
using <button onclick="..."> to program a response to a button click
declaring variables with var; variables are untyped
defining JavaScript functions
anonymous functions; passing anonymous functions as parameters
arrays; array notation: [ ... ]
objects; object notation: { ... }
typed arrays: Float32Array, Uint16Array, etc.
GPU, graphics processing unit
the data transfer bottleneck between CPU and GPU
storing data on the GPU, such as in texture objects and array buffers
shader programming
vertex shader
fragment shader
attribute variables in the vertex shader
uniform variables in the shader program
varying variables in the shader program
interpolation of varying variables to get their values for the fragment shader
parallelism in vertex shader execution and in fragment shader execution
the shader language
types: int, float, bool, vec2, vec3, vec4, mat3, mat4
"swizzlers" such as v.xy and c.rgb
constructors, such as vec4( c.rgb, 1.0 )
operators, including multiplying a vector times a matrix
the gl_Position vec4 variable in the vertex shader
the gl_PointSize float variable in the vertex shader
the gl_FragColor vec4 variable in the fragment shader
using array buffers to store attribute values
how array buffers on the GPU increase performance
using gl.drawArrays to draw primitives
WebGL primitives: gl.POINTS, gl.LINES, gl.LINE_STRIP, gl.LINE_LOOP,
gl.TRIANGLES, gl.TRIANGLE_STRIPE, gl.TRIANGLE_FAN
geometric transformations
scaling
rotation
translation
shear
representing a transformation as a matrix
geometric modeling
hierarchical modeling
using a stack of transforms to implement hierarchical modeling
vertices
coordinate systems
object coordinates
modeling transform: placing an object in a scene or more complex object
world coordinates
clip coordinates (-1 to 1 in each of the three coordinate directions)
order in which modeling transformations are applied
the AffineTransform2D class
transform.translate(dx,dy)
transform.scale(sx,sy)
transform.rotate(degrees)
transform.push();
transform.pop();
textures
image textures
procedural textures
texture coordinates, (s,t)
using power-of-two texture images
mipmaps
how mipmaps are used when sampling from a texture image
loading images asynchronously in JavaScript
WebGL texture objects
how texture objects on the GPU increase performance
binding an image texture with gl.bindTexture(gl.TEXTURE_2D, texObj)
texture wrapping modes (repeat, mirror-repeat, clamp-to-ege)
texture coordinates for point primitives and how they are used
using multiple textures on one primitive
texture units
selecting a texture with gl.activeTexture( gl.TEXTURE0 ), ...
sampler2D variables in the fragment shader
using sampler2D's to sample texture images: texture2d(sampler, textureCoords)
setting the value of a sampler2D to texture unit i with gl.uniform1i(samplerLoc,i)
texture transforms
3D graphics
the hidden surface problem
painter's algorithm
the depth buffer algorithm and the depth test
gl.enable( gl.DEPTH_TEST ), and why this is essential for 3D graphics
gl.clear( gl.DEPTH_BUFFER_BIT )
normal vectors, and how they affect lighting
unit normal
specular reflection versus diffuse reflection and how they depend on normal vector
choosing normal vectors for surfaces: "flat" versus "curved" surfaces
using element array buffers to store vertex indices
shared vertices; why indexed access to vertex attributes can be more efficient
using gl.drawElements with an element array buffer to draw primitives
indexed face sets: vertex list + face lists (and how faces are represented)
OBJ file format:
"v" lines, "vn" lines, "vt" lines, and "f" lines
drawing an object specified by an OBJ file
using AJAX to load model data files asynchronously
transformations in 3D:
3D translations
3D scaling
3D rotation
the axis of a 3D rotation
the "right-hand rule" for direction of rotation
Much of the WebGL API is too technical for me to ask you to write code from scratch on the exam. However, there are some things that you should be able to code, including:
In addition, you should understand the purpose of the following functions from the WebGL JavaScript API, and you should be able to explain and interpret code that uses them. Also, you should understand how and why Float32Array can be used with these functions. And you should know that vertex attributes commonly include vertex coordinates, texture coordinates, and normal vectors.