The final exam will be given during the scheduled final exam period on Tuesday, December 10, at 7:00 PM, in our regular classroom. Like the two in-class tests, the exam is four pages long, and it should only take one hour. It will be on material that we have covered since the second test, but you will need to remember earlier material to answer some of the questions. In particular, you should know the basics of all the graphics systems that we have seen. And since the exam starts in the middle of Three.js, you will need to remember that graphics system in particular.
The new material on the exam consists of: the on-line course notes, Sections 16, 17, and 18; and Labs 11, 12, and 13. This includes some of the more advanced features of Three.js and all of WebGL. You might also want to review Section 11 of the notes, which explains some of the differences between OpenGL 1.0 and more recent versions of OpenGL such as WebGL.
The format of the test will be the usual: some essay questions and definitions; reading some code and explaining its purpose; maybe writing some code. If I ask you to write any three.js or WebGL code, I will give you some kind of listing of the API for the classes/methods that you will need, so you do not need to memorize all the syntax; however, you should be familiar with the important classes, methods, and functions.
Remember that your final project must be finished and turned in by Wednesday afternoon, the day after the final exam. If you have big files to submit, such as big Blender animation files, then we should talk about how they will be submitted.
Here are some terms and ideas that you should be familiar with:
indexed face sets (IFS)
how faces are represented as lists of vertex numbers in indexed face sets
how three.js uses indexed face sets:
the property geom.vertices of a THREE.Geometry object
using the THREE.Vector3 class to represent the vertices
the classes THREE.Face3 and THREE.Face4
the property geom.faces of a THREE.Geometry object
vertices of a face are listed in counterclockwise order, as seen from the front
how indexed face sets relate the WebGL function gl.drawElements
the basic idea of how shadows work in Three.js:
shadow mapping and the shadow buffer
cube map textures
defining a cubemap texture using a set of six images
skybox
environment mapping (also called reflection mapping)
how environment mapping uses cubemaps
the basic idea of how reflection mapping is done:
following a reflected ray to see where it intersects the cubemap
refraction and transparency
WebGL: OpenGL for web browsers
programmable pipeline versus fixed function pipeline
shaders and shader programs
vertex shaders and fragment shaders
GLSL (OpenGL Shading Language)
attributes, uniform variables, and varying variables
what sorts of values can be attributes
what sorts of values can be uniforms
how attributes and uniform variables carry information from JavaScript to WebGL
how varying variables carry information from the vertex to the fragment shader
how interpolation is used on the values of varying variables
predefined shader variables:
gl_Position
gl_FragColor
gl_PointSize
gl_PointCoord
shader language data types: int, bool, float, vec2, vec3, vec4, mat3, mat4
shader "constructors" such as: vec4(df*color.r, df*color.g, df*color.b, 1.0)
basic shader language syntax: main(), using variables, control structures
JavaScript typed arrays: Float32Array, Uint8Array, Uint16Array
working with uniform variables from JavaScript:
uniformLocation = gl.getUniformLocation(shaderProgram, uniformVariableName)
gl.uniform3f(uniformLocation, a, b, c)
gl.uniform3fv(uniformLocation, array)
gl.uniform1i(uniformLocation, n)
working with buffers (VBOs) from JavaScript
bufferID = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, bufferID)
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferID)
gl.bufferData(gl.ARRAY_BUFFER, float32Array, use) -- ARRAY_BUFFER MUST BE BOUND
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, unit16Array, use) -- BUFFER MUST BE BOUND
("use" here is gl.STREAM_DRAW, gl.DYNAMIC_DRAW, or gl.STATIC_DRAW)
what binding a buffer means
why buffers are used in WebGL
the difference between gl.ARRAY_BUFFER and gl.ELEMENT_ARRAY_BUFFER
the meaning of gl.STREAM_DRAW and gl.STATIC_DRAW
working with attributes from JavaScript:
attribLocation = gl.getAttribLocation(shaderProgram, attributeVariableName)
gl.enableVertexAtrribArray(attribLocation)
gl.vertexAttribPointer(attribLocation, numbersPerVertex, gl.FLOAT, false, 0, 0)
-- an ARRAY_BUFFER MUST BE BOUND for gl.vertexAttribPointer
drawing primitives
WebGL primitives:
gl.POINTS, gl.LINES, gl.LINE_STRIP, gl.LINE_LOOP,
gl.TRIANGLES, gl.TRIANGLE_FAN, gl.TRIANGLE_STRIP
how point primitives are rendered (as a square of pixels for each point)
gl.drawArrays(primitive, firstVertex, vertexCount)
how gl.drawArrays uses attribute values and where they come from
gl.drawElements(primitive, vertexCount, gl.UNSIGNED_SHORT, 0)
-- an ELEMENT_ARRAY_BUFFER MUST BE BOUND when calling gl.drawElements
how gl.drawElements uses indices to find attribute values
how gl.drawElements relates to indexed face sets
how the vertex and fragment shaders are used when drawing a primitive
working with transformations in WebGL:
using a JavaScript library for matrix operations
the idea of glmatrix.js (but no details of its use)
uniform variables in the shader of type mat3 and mat4
gl.uniformMatrix4fv(uniformLocation, matrixDataArray)
working with matrices in a shader, such as: vec4 trVector = matrix * vector;
working with textures in shaders:
sampler variables: shader variables of type sampler2D
sampling a texture: texColor = texture2D(samplerVariable, texCoords)
working with textures on the JavaScript side of WebGL:
texID = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D,texID);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
-- a texture object MUST BE BOUND when calling gl.texImage2D
the basic idea of how the lighting equation can be implemented in WebGL