CG Homework 5, due Thu 2016-10-06 9am

W Randolph Franklin, RPI

  1. (2 pts) What is the quaternion for the rotation by 90 degrees about the axis (5,4,3), followed by the rotation by 180 degrees about the axis (0,0,1)?
  2. (2 pts) What is that rotation's axis and angle?
  3. (2 pts) (Reread My note on 3D Interpolation, which I discussed in lecture 11.) You wish to interpolate a smooth, constant speed, path on a sphere from \(\left(\frac{1}{\sqrt{2}},0,\frac{1}{\sqrt{2}}\right)\) to \(\left( \frac{1}{\sqrt{3}}, \frac{1}{\sqrt{3}}, \frac{1}{\sqrt{3}} \right)\). Give the 1/3 and 2/3 points of that path.
  4. (14 pts) Do question 3.2 on page 132 of the textbook.

(Total: 20 points.)

CG Lecture 12, Mon 2016-09-26

W Randolph Franklin, RPI

  1. I corrected an error in question 3 of Homework 4.
  2. Handwritten notes on tablet from 09-22.
  3. I've moved my local copy of the textbook files. (The reason is to put files that are not being updated (textbook files) in a different directory from files that are (lecture notes and homeworks); this makes pushing out updates much faster). The links in all the lecture notes have been updated.
  4. Siggraph 2016 | Day 3 | Exhibition Floor | Redshift
  5. We'Ll continue to see how the programs in http://www.cs.unm.edu/~angel/WebGL/7E/03/ work.
  6. I have a local copy of those programs.
  7. More iclicker questions.
  8. We'll also do the textbook slides from chapter 4.
    1. Input and Interaction
    2. Animation
    3. Working with Callbacks
  9. This Wed will be short again. I'll just show a few WebGL programs and then help people with homework. No iclicker questions.

CG Lecture 11, Thurs 2016-09-22

W Randolph Franklin, RPI

  1. DIY 3d Light-field Hologram Selfies by Lumii @ Siggraph 2016

  2. 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.

  3. Now, we'll see how the programs in http://www.cs.unm.edu/~angel/WebGL/7E/03/ work.

  4. My note on 3D Interpolation, which is better than the textbook section on animating with Euler angles.

  5. (Unrelated to this course). Tonight is the annual IgNobel award ceremony, parodying the upcoming real Nobels. Real Nobel laureates give awards for crazy achievements. In 2005, Roy Glauber, the janitor who usually sweeps paper airplanes off the stage during the Ignobel ceremony, won a real Nobel. (His day job was a professor of physics at Harvard.) So, maybe the Nobels parody the Ignobels.

    http://s.hswstatic.com/gif/ig-noble-a-1.jpg

  6. Real Time Graphics in Pixar Film Production

CG Lab/Lecture 10, Wed 2016-09-21

W Randolph Franklin, RPI

  1. SIGGRAPH 2016 – Technical Papers Trailer

  2. Handwritten notes on tablet from 09-19.

  3. Homework 4 is online; due next Thurs 9am.

  4. Seretsi Khabane Lekena '17 writes:

    Here is the link to Shadertoy.com. The co-creator of the website has an account named "iq", searching for that account brings up some renders that really push Webgl to its limits in really pretty ways (he used to work for Pixar and Siggraph)

    https://www.shadertoy.com/user/iq

  5. 0921-interactivevert shows two new things.

    1. Using a slider to skew vertices. This time, the vertex shader reads the uniform variable.
    2. Making the fragments' color depend on their position. The fragment shader uses the reserved variable gl_FragCoord.

  6. The Sketchy Database: Learning to Retrieve Badly Drawn Bunnies - SIGGRAPH 2016.

CG Homework 4, due Thu 2016-09-29 9am

W Randolph Franklin, RPI

  1. (2 pts) (Reverse engineering rotations) In 2D, if the point (3,2) rotates about the origin to (2,-3), what's the angle?

  2. (2 pts) Give the matrix M that has this property: for all vectors p, \(Mp = \begin{pmatrix}3\\4\\5\end{pmatrix} \times p\).

  3. corrected (2 pts) Give the matrix M that has this property: for all vectors p, \(Mp = \left( \begin{pmatrix}3\\4\\5\end{pmatrix} \cdot p \right) \begin{pmatrix}3\\4\\5\end{pmatrix}\).

  4. (2 pts) Why can the following not possibly be a 3D Cartesian rotation matrix?

    \(\begin{pmatrix} 2& 0 &0\\1 & 0 &0\\0& 0 &1\end{pmatrix}\)

  5. (2 pts) Use any method (not involving soliciting answers on the internet) to rotate the point (4,4,6) by 60 degrees about the axis (2,2,3). Explain your method. (E.g., if you saw the answer in a vision, are your visions generally accurate?)

  6. (2 pts) Can the volume of a small cube change when its vertices are rotated? (yes or no). Why (not)?

  7. (2 pts) What is the ''event loop''?

  8. (2 pts) Why does putting all your vertices into an array and telling OpenGL about it make a big graphics program faster?

  9. (2 pts) Since the Z (aka depth) buffer looks so useful, why is it not enabled by default?

  10. (2 pts) What's the quaternion representing a rotation of 180 degrees about the axis (0,0,1)?

  11. (2 pts) Use the quaternion formulation to rotate the point (0,1,0) by 180 degrees about the axis (0,0,1).

  12. (2 pts) Use the vector formulation to rotate the point (0,1,0) by 180 degrees about the axis (0,0,1).

  13. (26) Extend your program from last week that displays the Starship Enterprise as follows:

    1. Do the rotation in the vertex shader instead of in the javascript program.
    2. Make the color of each pixel depend on its z-value.

(Total: 50 points.)

CG Lecture 9, Mon 2016-09-19

W Randolph Franklin, RPI

  1. Handwritten notes on viewgraph from 09-15.
  2. This Wed will be used for me to demo some more WebGL stuff, and to answer questions.
  3. Error in slide 12 of 14_1_5: d is reasonably positive, so zp= -d. (If d were negative, then the other two formulae would be wrong.)
  4. Reminder that there will be no classes on Oct 5 or 7. (This is listed in the Google calendar).
  5. Iclicker questions.
  6. We'll continue with the textbook powerpoint slides.
    1. 3_6, Programming with WebGL Part 6: Three Dimensions. This mentions the depth buffer.
  7. Continue My note on 3D rotation.
  8. My note on quaternions. This is an alternative method to rotate in 3D. Its advantages are:
    1. It starts from the intuitive axis-angle API.
    2. Animating a large rotation in small steps (by varying the angle slowly) is easy. In contrast, stepping the 3 Euler angles does not work well, and there's no obvious way to gradually apply a \(3\times3\) rotation matrix, \(M\). (You could compute \(M^{1/100}\) and apply it 100 times, but that computation is messy. Eigenvectors are useful here.)
    3. When combining multiple rotations, the axis and angle of the combo is easy to find.
    4. Having only 4 parameters to represent the 3 degrees of freedom of a 3D rotation is the right number. Using only 3 parameters, as Euler angles do, causes gimbal lock. That is, you cannot always represent a smooth rotation by smooth changes of the 3 parameters. OTOH, using 9 parameters, as with a matrix, gives too much opportunity for roundoff errors causing the matrix not to be exactly a rotation. (You can snap the matrix back to a rotation matrix, but that's messy.)
  9. CGI Realtime HD: "From Previs to Final in 5 Minutes: Siggraph 2016 Presentation" - by Ninja Theory

CG Lecture 8, Thurs 2016-09-15

W Randolph Franklin, RPI

  1. SIGGRAPH 2016 - Computer Animation Festival Trailer
  2. Handwritten notes from 09-14.
  3. The console log, which you can usually display with F12, is a good place to see error messages. I'll demo it.
  4. The program that I worked on last time is in 0914-interactivegreen. Point your browser at a.html. Last night, I rewrote it to:
    1. Change yellow to green everywhere since it's adding green not adding yellow.
    2. Put the 2 standard include files in the same dir.
  5. Now we're starting a module on 3D rotations.
  6. 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.

CG Lecture 7, Wed 2016-09-14

W Randolph Franklin, RPI

#. DreamWorks Animation is coming to RPI! For more information on areas that you may want to be considered for and detailed instructions on how to apply, follow the link to the Rensselaer Polytechnic Recruiting Event on our career page: Rensselaer Polytechnic On-campus DreamWorks Recruiting Event Fall 2016.

  1. How to print info from inside your javascript program.

    1. There are several ways; here is the easiest.

    2. Reference: http://www.w3schools.com/js/js_output.asp

    3. Examples to do inside square.js:

      1. window.alert('this is an alert');
      2. window.alert('vertices length: ' + vertices.length + ' 1: ' + vertices[1]);

    4. Note that you can write variable values as well as strings.

    5. Another way is to write to the console log thus:

      console.log('this is a log message');

    6. In firefox, you can display the log window with F12.

    7. An advantage of the log is that you see all the messages together.

    8. I'll demo these methods.

  2. Powerful file editing: In class on Monday I used emacs to convert a chunk of ncc1701b.txt from a list of floats to legal javascript code to initialize an array of points. To efficiently program, you need to know some such tool. It doesn't have to be emacs, but I find emacs powerful.

  3. More iclicker questions.

  4. SIGGRAPH 2016 – Emerging Technologies Trailer.

  5. Homework 3 is online; due next Thurs 9am.

  6. For today's demo program, I'll modify triangle to add a slider that controls the amount of green to add to the triangle color.

    1. The amount of green will be read from a slider.
    2. Scrounge your slider code from gasket5.
    3. The value will be transmitted to the fragment shader in a uniform variable.
    4. Scrounge around in Angel's examples to see how to use a uniform variable. (I grepped for 'uniform').

  7. Full Tour of Disney Pixar Animation Studios!!

  8. The next few lectures will be mostly mathematics. I'm replacing the Angel lecture at Incremental and Quaternion Rotation, my own material. Feel free to read ahead.

CG Lecture 6, Mon 2016-09-12

W Randolph Franklin, RPI

  1. Handwritten notes from 09-08.

  2. SIGGRAPH 2016 – Art Gallery Trailer.

  3. Another way to submit homework programming:

    1. Make a convenient directory in your RCS filesystem, say /afs/rpi.edu/##/RCS_username/graphics

    2. Permit it to us (while logged into an RCS unix machine, perhaps with ssh):

      1. fs sa graphics kollys rl
      2. fs sa graphics frankwr rl

    3. Do whatever with the files in it.

    4. See them on any webserver at this url:

      https://afsws.rpi.edu/AFS/home/##/RCS_username/directory_name

      You will be prompted for your RCS user id and password.

  4. Homework 2 notes:

    1. How to do 3D with a depth buffer was shown in the gasket examples I presented in class.

    2. I'll work out another 3D example in class to show how it's done.

    3. The due date is extended to 9am Thurs 2016-09-15. 9am Thurs will be a consistent due date for homeworks.

    4. It's ok to cut-and-paste the data in. If it won't fit, do as much as works, and report how much that was.

      Alternatively, you might figure out how to read a file of data.

  5. We'll continue with the textbook powerpoint slides.

    1. 3_3, Programming with WebGL Part 4: Color and Attributes
    2. 3_4, Programming with WebGL Part 5: More GLSL
    3. 3_5, Programming with WebGL Part 6: Three Dimensions

  6. This Wed Sept 14, we'll have another lecture/lab.

CG Lecture 5, Thurs 2016-09-08

W Randolph Franklin, RPI

  1. Notes from yesterday:

    1. gasket4 shows how to do 3D with a depth buffer.

      Each pixel now stores

      1. RGB color of the object that was drawn at that pixel
      2. distance (depth) to that object.

      When a new object is drawn over that pixel, it replaces old color and depth only if the new object is closer. So, close objects hide distance objects.

      We'll ignore the problem of an object that covers only part of the pixel.

    2. gasket5 shows an interactive program with a slider and callback. The user changing the slider causes a javascript function to be called.

  2. iclicker questions.

  3. Homework submissions: Instead of putting your files on afs, it's ok to submit a zipped file, containing your .js and .html files and the utility files needed to run it. It must be organized so that if we unzip into a random location and point the browser at the .html file, then it will work.

  4. Graphics display hardware: The progress of Computer Graphics is largely the progress of hardware. We'll see more of this later. However, here's an intro.

    1. What physical principles are each type of HW based on?

      1. CRT: certain rare earth materials emit photons when hit by electrons. Explaining this is what got Einstein his Nobel (not relativity).
      2. LCD: electric field causes big asymmetric molecules to untwist so that they no longer rotate polarized light passing through them.

    2. What engineering challenges required solving?

      1. Shadow-mask CRT: electron beams travel varying distances at different angles, but don't hit the wrong phosphor even as the system gets hotter. The precision is 0.1%.
      2. Hi-performance graphics requires hi bandwidth memory.
      3. Virtual reality headsets require knowing where your head is and its angle (harder).

      Think of 3 ways to do this.

    3. What tech advances enabled the solutions?

      1. Raster graphics requires cheap memory.
      2. LCD panels require large arrays of transistors.

  5. Note on Engineering Grounded In Reality and famous graphics alumni.

  6. Executive summary of Portability And Standards.

  7. We'll continue with the textbook powerpoint slides.

    1. 3_1, Programming with WebGL Part 3: Shaders
    2. 3_2, Programming with WebGL Part 3: Shaders