1   Final exam

is scheduled for Tues Dec 18, 6:30-9:30 pm.

2   Midterm exam

1. Tomorrow, in class.

2. You may bring in one 2-sided 8.5"x11" paper with notes. You may not share the material with each other during the exam. No collaboration or communication (except with the staff) is allowed.

   (The exam can't be open book because some student share books and others use an online text.)

3. Last year's midterm exam.

4. Its solution. I completed it in 12 minutes.

5. The exam may contain some recycled homework questions.

6. Here are several older exams, with some solutions. This year's topics will be slightly different, but will be largely the same. OTOH, since there are a finite number of electrons in the universe and they say that recycling is good, I'll recycle many of these questions.

   1. Midterm F2016.
   2. Midterm F2014, Midterm F2014 Solution
   3. Midterm F2013, Midterm F2013 Solution
   4. Midterm F2012, Midterm F2012 Solution

If you prepared answers to all the questions on all the old tests, then you'd do well this semester, except for the new stuff. However, you would also deserve to do well since you'd know the material.

1. I'll discuss other answers in the review, or you may figure out answers on your own.

2. As this chart shows, there is no correlation between the time taken to write the exam and the resulting grade.

   

3   Corrections

1. There was an error in my homogeneous coords note, Section 2.3, item 6.
2. There was a dead link in my rotation note to my IEEE quaternion note. This is the correct link.

1   Iclicker questions

1. This 3D homogeneous point: (4,3,2,1) corresponds to what Cartesian point:
   1. (4,3,2,1)
   2. (4,3,2)
   3. (3,2,1)
   4. (3/4, 1/2, 1/4)
   5. Some point at infinity.
2. This question is about 2D geometry. The matrix for a translation by 2 in x and 3 in y is what?
   1. \(\begin{pmatrix} 2&0&1\\0&3&1\\0&0&1\end{pmatrix}\) B. \(\begin{pmatrix} 2&0&0\\0&3&0\\0&0&1\end{pmatrix}\) C. \(\begin{pmatrix} 1&0&0\\0&1&0\\2&3&1\end{pmatrix}\) D. \(\begin{pmatrix} 1&0&2\\0&1&3\\0&0&1\end{pmatrix}\) E. \(\begin{pmatrix} 1&0&2\\0&1&3\\0&0&0\end{pmatrix}\)
3. Consider an axis a=(1,0,0) and a point p=(2,3,4). What is the component of p that is perpendicular to a?
   1. (2,3,4)
   2. (2,0,0)
   3. (0,3,4)
   4. (0, 3/5, 4/5)
   5. (1,0,0)
4. Consider an axis a=(1,0,0) and a point p=(2,3,4). What is the component of p that is parallel to a?
   1. (2,3,4)
   2. (2,0,0)
   3. (0,3,4)
   4. (0, 3/5, 4/5)
   5. (1,0,0)
5. These next few questions are for 2D geometry. What is the homogeneous matrix for the perspective projection whose center is at Cartesian (0,0) and whose viewplane is x=1?
   1. \(\begin{pmatrix} 1&0&0\\0&1&0\\1&0&0\end{pmatrix}\)
   2. \(\begin{pmatrix} 1&0&0\\0&1&0\\0&2&0\end{pmatrix}\)
   3. \(\begin{pmatrix} 1&0&0\\0&0&2\\0&0&1\end{pmatrix}\)
6. What is the homogeneous matrix for the perspective projection whose center is at Cartesian (0,0) and whose viewplane is y=1/2?
   1. \(\begin{pmatrix} 1&0&0\\0&1&0\\1&0&0\end{pmatrix}\)
   2. \(\begin{pmatrix} 1&0&0\\0&1&0\\0&2&0\end{pmatrix}\)
   3. \(\begin{pmatrix} 1&0&0\\0&0&2\\0&0&1\end{pmatrix}\)
7. What is the homogeneous matrix for the parallel projection whose center is at Cartesian (0,0) and whose viewplane is y=2?
   1. \(\begin{pmatrix} 1&0&0\\0&1&0\\1&0&0\end{pmatrix}\)
   2. \(\begin{pmatrix} 1&0&0\\0&1&0\\0&2&0\end{pmatrix}\)
   3. \(\begin{pmatrix} 1&0&0\\0&0&2\\0&0&1\end{pmatrix}\)

2   3D rotation ctd

1. Review My note on 3D rotation. including 4D rotations and Euler angles.

1   Homogeneous coordinates, ctd

2   3D rotation

IMNSHO I do this topic better than the textbook.

My note on 3D rotation.

1   Today's iclicker questions

1. What does this line do:

   gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
   

   1. Create this buffer.
   2. Enable this buffer so that the shaders will use it.
   3. Get the address of variable vBuffer.
   4. Prevent this buffer from being modified.
   5. Specify that this buffer will be the object of future buffer operations.

2. What does this line do:

   var vBuffer = gl.createBuffer();
   

   1. Create this buffer.
   2. Enable this buffer so that the shaders will use it.
   3. Get the address of variable vBuffer.
   4. Prevent this buffer from being modified.
   5. Specify that this buffer will be the object of future buffer operations.

3. How does gl.drawArrays know when the vertices it's drawing in 3D?

   1. It's specified as one of the arguments in gl.drawArrays.
   2. It's specified as one of the arguments in gl.bufferData.
   3. It's specified as one of the arguments in gl.vertexAttribPointer.
   4. It's specified as one of the arguments in gl.getAttribLocation.
   5. It's specified as one of the arguments in gl.enableVertexAttribArray.

4. How does gl.drawArrays know when the color values are floats instead of ints?

   1. It's specified as one of the arguments in gl.drawArrays.
   2. It's specified as one of the arguments in gl.bufferData.
   3. It's specified as one of the arguments in gl.vertexAttribPointer.
   4. It's specified as one of the arguments in gl.getAttribLocation.
   5. It's specified as one of the arguments in gl.enableVertexAttribArray.

5. How does gl.drawArrays know how many triangles are in a triangle strip?

   1. It's specified as one of the arguments in gl.drawArrays.
   2. It's specified as one of the arguments in gl.bufferData.
   3. It's specified as one of the arguments in gl.vertexAttribPointer.
   4. It's specified as one of the arguments in gl.getAttribLocation.
   5. It's specified as one of the arguments in gl.enableVertexAttribArray.

6. Normalize this vector: (8,-6,0).

   1. (3, 4, 5).
   2. (3/5, -4/5, 0).
   3. (4/5, -3/5, 0).
   4. (4/5, 3/5, 0).
   5. (8, -6, 10).

7. Find a normal vector to the plane through the points (1,0,0), (1,1,0), (1,0,1).

   1. (0, -1, 0)
   2. (0, 1, 0)
   3. (1, 0, 0)
   4. (1, 1, 0)
   5. (3, 2, 2)

8. Which of these curved surface equation types makes it easy to generate points on the surface?

   1. explicit
   2. explicit and implicit
   3. explicit and parametric
   4. implicit
   5. parametric

9. Which of these curved surface equation types makes it easy to test whether a point is on the surface?

   1. explicit
   2. explicit and implicit
   3. explicit and parametric
   4. implicit
   5. parametric

10. What type of equation is this: \(x^2+y^2+z^2=1\)

    1. explicit
    2. explicit and implicit
    3. explicit and parametric
    4. implicit
    5. parametric

11. About the next few questions:

    1. The next few questions will work with 3D points like \(p=\begin{pmatrix}1\\2\\3\end{pmatrix}\).
    2. I'll also use matrices like \(M=\begin{pmatrix}2&0&0\\0&2&0\\0&0&2\end{pmatrix}\).
    3. We can transform points thus: \(q=Mp\). This gives \(q=\begin{pmatrix}2\\4\\6\end{pmatrix}\).
    4. Common types of transformations are rotation, translation, scaling, and perspective or projection.
    5. I haven't yet discussed the following topics. This is to see what you already know. I'll let you correct your answers.

    The above matrix is what type of transformation:

    1. identity
    2. perspective
    3. rotation
    4. scaling
    5. translation

12. \(M=\begin{pmatrix}1&0&0\\0&1&0\\0&0&1\end{pmatrix}\) is what type of transformation?

    1. identity
    2. perspective
    3. rotation
    4. scaling
    5. translation

13. \(M=\begin{pmatrix}.6&.8&0\\-.8&.6&0\\0&0&1\end{pmatrix}\) is what type of transformation?

    1. identity
    2. perspective
    3. rotation
    4. scaling
    5. translation

2   Homogeneous coordinates

IMHO I do this better than Angel.

My take on homogeneous coordinates.

3   Video

1. The Sketchy Database: Learning to Retrieve Badly Drawn Bunnies - SIGGRAPH 2016.
2. Samsung Official Ostrich Commercial || Gear VR Advertisement.

1   Next few classes

1. There'll be a regular class in 2018-09-26 lab.
2. There'll be no classes next week because I'll be presenting at the International Meshing Roundtable . My paper is Exact Fast Parallel Intersection of Large 3-D Ttriangular Meshes, joint work with my Brazilian friends, Salles Viana Gomes de Magalhães, Marcus Vinícius Alvim Andrade at the Federal University of Viçosa. Salles got his PhD in CS at RPI in 2017. We have many papers together.

2   Homeworks

1. Because of the inconsistency in the due date for homework 3, you may hand it in Thurs, if you wish.
2. Homework 4 is online, due next Mon.

3   Today's iclicker questions

1. A mouse reports which type of position?
   1. Absolute
   2. Relative
2. A tablet reports which type of position?
   1. Absolute
   2. Relative
3. Which of these can easily be a logical keyboard?
   1. a physical keyboard
   2. a tablet with handwriting recognition
   3. a virtual keyboard on the screen, selecting letters with the mouse
   4. voice input and recognition
   5. all of the above
4. Which of these mode scales up better when there are many input devices, most of which are quiet most of the time.
   1. event
   2. request
5. The X window system was designed to
   1. help Mulder and Scully keep track of their data
   2. implement a client-server graphics system for workstations
   3. make smart phone graphics programming easier
   4. be a proprietary hi performance IBM product
   5. succeed the W window system.
6. Double buffering solves which problem:
   1. producing stereo images
   2. low memory bandwidth
   3. remote debugging PCs
   4. displaying from a frame buffer while it's being updated
   5. optimizing scheduling two elevators as a group

4   Textbook slides

5   Picking

The user selects an object on the display with the mouse. How can we tell which object was selected? This is a little tricky.

E.g., It's not enough to know what line of code was executed to draw that pixel (and even determining that isn't trivial). That line may be in a loop in a subroutine called from several places. We want to know, sort of, the whole current state of the program. Also, if that pixel was drawn several times, we want to know about only the last time that that pixel changed.

Imagine that the image shows cars in the north lot. You select a pixel that's part of the image of a wheel nut. However there are many wheel nuts in the image, perhaps all drawn with the same subroutine. You might want to know that you selected the 4th wheel nut on the right front wheel of the 2nd car on the left of the 3rd row from the front.

There are various messy methods, which are all now deprecated. The new official way is to use the color buffer to code the objects.

1. Decide what granularity you want for the selection. E.g, in the north lot, you may not care about specific wheel nuts, but just about wheels. You want to know that you selected the right front wheel of the 2nd car on the left of the 3rd row from the front.
2. Assign each wheel in the lot a different id number.
3. When drawing the scene, use each wheel's id number for its color.
4. Look at the contents of the color buffer pixel to know what you picked.
5. Perhaps really store this info in a 2nd buffer parallel to the color buffer, so the image will look better.

6   Textbook programs

My local web copy .

1. Chapter 3: We'll continue with cad2.

2. Chapter 4:

   1. color interpolation
   2. element arrays
   3. etc

   We'll skip quaternions until we see 3D rotations.

7   SIGGRAPH 2017 videos

SIGGRAPH is the world's leading CG conference. I'll show various videos from it.

1. Computer Animation Festival Trailer.
2. SIGGRAPH 2017 VR Village Trailer.

1   Old iclicker questions

ECSE-4750, Fall 2018

* Thu 2018-09-13

1.  What is your major?
A. CSYS
B. ELEC
C. CSCI
D. GSAS
E. Other


2. What is your class?
A. 2019
B. 2020
C. 2021
D. Grad
E. Other

3. What is the correct order of the graphics pipeline?
A. vertex-shader  fragment-shader rasterizer primitive-assembly
B. fragment-shader rasterizer primitive-assembly vertex-shader
C. rasterizer primitive-assembly vertex-shader  fragment-shader
D. primitive-assembly vertex-shader  fragment-shader rasterizer
E. vertex-shader primitive-assembly  rasterizer   fragment-shader

4. If you wanted to change all the vertex positions by multiplying each x-coordinate by the same vertex's y-coordinate, the best place to do it is:
A. with a javascript function
B. in the vertex shader
C. in the fragment shader
D. in the html file
E. it can't be done.

2. Why does WebGL have the triangle-strip object type, in addition to the triangle type?
A. It leads to smaller, faster, graphics objects.
B. It leads to bigger, faster, graphics objects.
C. It's not possible to split some complicated polygons into lots of simple
triangles, but you can split them into triangle-strips.
D. The standards writers were being paid by the word.


3. What is the physical principle underlying LCD?
A. Fire an energetic electron at a rare earth atom and a photon of light is emitted.
B. Plowing your family farm as a kid can suggest an way to invent electronic television.
C. A solution of corkscrew shaped molecules can rotate polarized light.
D. Putting your finger close to a capacitor can change its capacitance.
E. If two coils of wire are close, then an alternating current in one can induce a current in the other.

4. Standards
A. allow programmers to move between projects
B. allow different types of hardward to be substituted in.
C.  .....             operating systems ......
D. allow vendors to lock in customers.
E. can prevent the latest HW from being used to its fullest.


* Mon 2018-09-17

1. Color printing on a sheet of paper exemplifies

A. additive color
B. subtractive color
C. multiplicative color
D. divisive color
E. exponential color

2. Red is a primary color of which color space?

A. additive color
B. subtractive color
C. multiplicative color
D. divisive color
E. exponential color

3. Major components of the WebGl model as discussed in class are:

A. Objects, viewer, light sources, planets, material attributes.
B. Still cameras, video cameras, objects, light sources.
C. Objects, viewer, light sources, material attributes.
D. Colored objects, black and white objects, white lights, colored lights
E. Flat objects, curved objects, near lights, distant lights.

4. If you want your javascript program to send a color for each

vertex to the vertex shader, what type of variable would the
color be?

A. uniform
B. varying
C. attribute
D. dynamic
E. static

5. When one neuron in your retina receives a lot of light, that causes the neighboring neuron to

A. be more likely to fire
B. be less likely to fire
C. be unaffected by this neuron.

6. In the graphics pipeline, the step after rasterizing is the

A. vertex shader
B. primitive assembler
C. fragment shader
D. tesselation shader
E. javascript callback

7. The spectral wavelength of pure purple is about

A. 400 nm
B. 500 nm
C. 600 nm
D. 700 nm
E. There is no wavelength for pure purple.

8. What is your favorite platform/OS?

A. Windows
B. Linux
C. Mac
D. Android
E. Other

9.  The carpet is an example of

A. diffuse reflection
B. specular reflection
C. environment mapping
D. bump mapping
E. how to save money

10. Bump mapping is

A. more realistic than actually 3D modeling each bump
B. faster than actually 3D modeling each bump
C. both
D. neither
E. unrelated to modeling bumps; the name is coincidental.

2   Today's iclicker questions

* Wed 2018-09-19


1. How do you draw a pentagon in WebGL?

A. Split it into triangles.
B. Split it into triangles if it is concave, otherwise draw it directly.
C. Split it into triangles if it is convex, otherwise draw it directly.
D. Draw it directly.
E. Split it into hexagons.






2. In the WebGL pipeline, the Primitive Assembler does what?

A. fits together pieces of ancient Sumerian pottery.
B. rotates vertices as their coordinate systems change.
C. creates lines and polygons from vertices.
D. finds the pixels for each polygon.
E. reports whether the keyboard and mouse are plugged in correctly.





3. To draw into only part of the graphics window you would call:

A. gl.drawpart
B. gl_Position
C. gl.viewport
D. gl.window
E. There's no builtin routine; you have to scale your graphics
    yourself to achieve this.



4.  What buffer is used by WebGl to do hidden surface removal?

A. Closest object buffer
B. Color buffer
C. Depth or Z buffer
D. Hidden-surface buffer
E. Ray-trace buffer





5. If you do not tell WebGL to do hidden surface removal, and two
   objects overlap the same pixel, then what color is that pixel?

A. WebGL throws an error.
B. the closer object
C. the farther object
D. the first object to be drawn there
E. the last object to be drawn there






6.  gasket2 has this code:   var points=[ ]; ... points.push(a,b,c);
  What does push do here?

A. Appends new entries to the end of points.
B. Inserts new entries at the start of points.
C. Overwrites the first entries of points.
D. Overwrites the last entries of points.
E. Throws an error because we didn't specify a size for points.



7. Why would you want to send a variable to a vertex shader that has the same value for every vertex?

A. the vertex's coordinates
B. the vertex's color
C. the object's global orientation
D. the location of the global light source
E. C and D.




8. How would you send that variable to the vertex shader?

A. as a varying variable.
B. as a uniform variable.
C. in another array similar to the vertex array.
D. with a bindBuffer call.
E. with a bufferData call.



9. You call gl.BufferSubData to do what?

A. to add or replace part of the buffer in the GPU.
B. to define a submarine object.
C. to subtract some data in the buffer.
D. to tell the GPU to look for a pattern and substitute any occurrences,
E. to tell the GPU to use a subroutine instead of the main program.

3   Textbook slides

We'll continue with the textbook powerpoint slides.

1. 4_1 Input and Interaction
2. 4_2 Animation
3. 4_3 Working with Callbacks
4. 4_4 Position Input
5. 4_5 Picking
6. 4_6 Geometry

4   Picking

The user selects an object on the display with the mouse. How can we tell which object was selected? This is a little tricky.

E.g., It's not enough to know what line of code was executed to draw that pixel (and even determining that isn't trivial). That line may be in a loop in a subroutine called from several places. We want to know, sort of, the whole current state of the program. Also, if that pixel was drawn several times, we want to know about only the last time that that pixel changed.

Imagine that the image shows cars in the north lot. You select a pixel that's part of the image of a wheel nut. However there are many wheel nuts in the image, perhaps all drawn with the same subroutine. You might want to know that you selected the 4th wheel nut on the right front wheel of the 2nd car on the left of the 3rd row from the front.

There are various messy methods, which are all now deprecated. The new official way is to use the color buffer to code the objects.

1. Decide what granularity you want for the selection. E.g, in the north lot, you may not care about specific wheel nuts, but just about wheels. You want to know that you selected the right front wheel of the 2nd car on the left of the 3rd row from the front.
2. Assign each wheel in the lot a different id number.
3. When drawing the scene, use each wheel's id number for its color.
4. Look at the contents of the color buffer pixel to know what you picked.
5. Perhaps really store this info in a 2nd buffer parallel to the color buffer, so the image will look better.

5   Nice WebGL site

http://webglfundamentals.org/webgl/lessons/

6   Text chapter 3 programs

We'll continue the programs with triangle, cad1, and cad2.

1. Textbook site.
2. My local web copy .
3. There's another copy on RCS at /afs/rpi.edu/home/56/frankwr/public_html/ECSE-4750/Angel/7E/03
4. which is also visible on the web.

7   SIGGRAPH 2017 videos

SIGGRAPH is the world's leading CG conference. I'll show various videos from it.

1. BendSketch: Modeling Freeform Surfaces Through 2D Sketching.

   My local copies (MP4 and WEBM) are here.

8   3D rotation

1. Now we're starting a module on 3D rotations.
2. My note on 3D rotation.
   1. All rigid transformations in 3D that don't move the origin have a line of fixed points, i.e., an axis, that they rotate around.
   2. deriving the vector formula for a rotation given the axis and angle
   3. computing the matrix from a rotation axis and angle
   4. testing whether a matrix is a rotation
   5. if it is, then finding the axis and angle.

9   Euler and angles and Gimbal lock

1. http://www.youtube.com/watch?v=rrUCBOlJdt4&feature=related Gimble Lock - Explained.

   One problem with Euler angles is that multiple sets of Euler angles can degenerate to the same orientation. Conversely, making a small rotation from certain sets of Euler angles can require a jump in those angles. This is not just a math phenomenon; real gyroscopes experience it.

2. http://en.wikipedia.org/wiki/Gimbal_lock

3. What is Gimbal Lock and why does it occur? - an animator's view.