1   Some videos

https://drive.google.com/file/d/1VPej36RvYXRX-Jk_c3AOvhTFRhIHXcsr/view?usp=sharing

https://drive.google.com/file/d/11EwiStUCM5ZgXevu6J4QYzTIIGzoBWeW/view

https://drive.google.com/open?id=1fWPPKEEPxzV84z_S1BUP53GLMSkGWM05

http://homepages.rpi.edu/~veenhe/homeworks/homework10/sell_video.mp4

https://drive.google.com/drive/folders/1sgnL9ficNHOnuzJ4k3XZ6KZotMy3-1ds?usp=sharing

2   SIGGRAPH 2018 Videos

1. Takeaways From SIGGRAPH 2018

   Article

2. Technical Papers Preview

3. Advanced Molecular & Particle Physics Simulations

4. NVIDIA RTX and GameWorks Ray Tracing Technology Demonstration

5. Beyond Turing - Ray Tracing and the Future of Computer Graphics

6. Create Realistic Character Animation with Ziva Dynamics

7. A Multi-Scale Model for Simulating Liquid-Fabric Interactions

8. NVIDIA CEO Jensen Huang - Reinventing Computer Graphics

3   SIGGRAPH 2019 Videos

https://www.youtube.com/results?search_query=siggraph+2019&sp=EgIYAQ%253D%253D

e.g.,

Technical Papers Preview: SIGGRAPH 2019

Real-Time Live! Preview - SIGGRAPH 2019

4   Term project optional demo

Airas will grade the projects. However, if you'd like to give me an optional 15-minute demo, then we can do that on Wed Dec 11 from 2pm on. A poorly prepared demo will hurt your grade.

5   After the semester

I'm open to questions and discussions about any legal ethical topic. Even after you graduate.

Good luck with your future work. Maybe your photo might be on a DCC window one day.

6   Review?

Would you like a review session in the regular lab time Wed Dec 11 at 6?

1   No class on Mon Dec 2

Snow day.

2   Student fast forward presentations

part 1

3   OpenGL in Guha vs WebGL in Angel

1. Guha, the text I used before Angel, uses OpenGL. Angel uses WebGL.

2. OpenGL has a C API; WebGL uses Javascript.

3. That OpenGL is the obsolete version 2; WebGL is based on the current OpenGL 3.

4. OpenGL 2 has an immediate mode design: you draw things and they are forgotten.

   In WebGL you send buffers to the GPU and then draw them.

5. OpenGL has compute shaders and geometry shaders. They fill in points along Bezier curves and draw trimmed NURBS.

6. A NURBS surface is a 2D parametric surface in 3D (or 4D if homogeneous).

   A trim line is a 1D parametric curve in the the 2D parameter space of the surface.

   The trim lines cut around the outside of the desired region and also cut out holes.

   This is a powerful technique.

4   Chapter 15 slides

1. You do not need to learn most of those slides. Later I'll summarize what you need.
2. 15_1 Global rendering.
3. 15_2 Ray tracing.
4. 15_3 What's next?.

5   Introduction to GPUs

from UT Computer Science

1   Splines ctd

My extra enrichment info on Splines.

2   Chapter 14 slides

1. 14_1 Curves and surfaces.
2. Programs drawing the Utah teapot.
3. 14_2 Designing parametric cubic curves.
4. 14_3 Bezier and spline curves and surfaces.
5. 14_4 Rendering curves and surfaces.
6. 14_5 Rendering the teapot.

3   Old OpenGL in C and with NURBS

Before Angel, I used another book, Guha. It used old OpenGL in C. However therefore it could show NURBS. Some sample programs are in

https://wrf.ecse.rpi.edu/wiki/ComputerGraphicsFall2013/guha/Code

Look at bezierCurves, which shows moving control points.

trimmedBicubicSplineSurface shows NURBS.

4   WebGL query

Victor Calvert writes,

The WebGL report shows current-environment specifics, including the maximum number of textures, maximum framebuffer resolution, and other information, retrieved via the WebGL API.

1   Week 13 slides ctd

1. 13_4 Display issues.

   We've seen some of this.

2   Chapter 14

1. Curves are the next chapter of Angel. WebGL does this worse than full OpenGL. Here is a summary. Big questions:

   1. What math to use?
   2. How should the designer design a curve?
   3. My notes on Bezier curves.

2. Partial summary:

   1. To represent curves, use parametric (not explicit or implicit) equations.

   2. Use connected strings or segments of low-degree curves, not one hi-degree curve.

   3. If the adjacent segments match tangents and curvatures at their common joint, then the joint is invisible.

   4. That requires at least cubic equations.

   5. Higher degree equations are rarely used because they have bad properties such as:

      1. less local control. Changing one control point of a hi-degree curve changes the whole curve. Parts of the curve distant from that point may move a lot. This makes designing a desired curve impossible.
      2. numerical instability. Small changes in coefficients cause large changes in the curve, even if computations are exact.
      3. roundoff error. Computations are not exact.

   6. See my note on Hi Degree Polynomials.

   7. One 2D cartesian parametric cubic curve segment has 8 d.f. in 2D (12 in 3D).

      \(x(t) = \sum_{i=0}^3 a_i t^i\),

      \(y(t) = \sum_{i=0}^3 b_i t^i\), for \(0\le t\le1\).

   8. Requiring the graphic designer to enter those coefficients would be unpopular, so other APIs are common.

   9. Most common is the Bezier formulation, where the segment is specified by 4 control points, which also total 8 d.f.: P0, P1, P2, and P3.

   10. The generated curve starts at P0, goes near P1 and P2, and ends at P3.

   11. The curve stays inside the control polygon, the convex hull of the control points. A flatter control polygon means a flatter curve. Designers like this.

   12. A choice not taken would be to have the generated curve also go thru P2 and P3. That's called a Catmull-Rom-Oberhauser curve. However that would force the curve to go outside the control polygon by a nonintuitive amount. That is considered undesirable.

   13. Instead of 4 control points, a parametric cubic curve can also be specified by a starting point and tangent, and an ending point and tangent. That also has 8 d.f. It's called a Hermite curve.

   14. The three methods (polynomial, Bezier, Hermite) are easily interconvertible.

   15. Remember that we're using connected strings or segments of cubic curves, and if the adjacent segments match tangents and curvatures at their common joint, then the joint is invisible.

   16. Matching tangents (called \(G^1\) or geometric continuity) is sufficient, and is weaker than matching the 1st derivative (\(C^1\) or parametric continuity), since the 1st derivative has a direction (tangent) and a length. Most people do \(C^1\) because it's easier and good enough. However \(G^1\) gives you another degree of freedom to use in your design.

   17. Similarly, matching the radius of curvature (\(G^2\) or geometric continuity) is weaker than matching the 2nd derivative (\(C^2\) or parametric continuity), but most people do parametric continuity.

   18. Parametric continuity reduces each successive segment from 8 d.f. down to 2 d.f.

   19. This is called a B-spline.

   20. From a sequence of control points we generate a B-spline curve that is piecewise cubic and goes near, but probably not thru, any control point (except perhaps the ends).

   21. Moving one control point moves the adjacent few spline pieces. That is called local control. Designers like it.

   22. One spline segment can be replaced by two spline segments that, together, exactly draw the same curve. However they, together, have more control points for the graphic designer to move individually. So now the designer can edit smaller pieces of the total spline.

   23. Extending this from 2D to 3D curves is obvious.

   24. Extending to homogeneous coordinates is obvious. Increasing a control point's weight attracts the nearby part of the spline. This is called a rational spline.

   25. Making two control points coincide means that the curvature will not be continuous at the adjacent joint.

       Making three control points coincide means that the tangent will not be continuous at the adjacent joint.

       Making four control points coincide means that the curve will not be continuous at the adjacent joint.

       Doing this is called making the curve (actually the knot sequence) Non-uniform. (The knots are the values of the parameter for the joints.)

   26. Putting all this together gives a non-uniform rational B-spline, or a NURBS.

   27. A B-spline surface is a grid of patches, each a bi-cubic parametric polynomial.

   28. Each patch is controlled by a 4x4 grid of control points.

   29. When adjacent patches match tangents and curvatures, the joint edge is invisible.

   30. The surface math is an obvious extension of the curve math.

       1. \(x(u,v) = \sum_{i=0}^3\sum_{j=0}^3 a_{ij} u^i v^j\)
       2. \(y, z\) are similar.
       3. One patch has 48 d.f. for Cartesian points, or 64 d.f. for homogeneous points, although most of those are used to establish continuity with adjacent patches.

3. My extra enrichment info on Splines.

4. The program I showed earlier is robotArm is Chapter 9.

5. To run program figure there, you may first need to fix an error in figure.html. Change InitShaders to initShaders.

   Many of the textbook programs have errors that prevent them from running. You can see them in the console log.

3   Additive manufacturing (3D printing) and curves

1. This section contains material that is too new for most (all?) textbooks.
2. However I see that a big part of my job is to identify stuff like this for you.
3. Nevertheless, I don't know everything here. If someone in class is more knowledgeable, please speak up.
4. I learned some of this attending the International Meshing Roundtable in Buffalo in Oct.
5. One reason for designing with curved surfaces like NURBS is that machine tools like lathes make curves.
6. Also, rotating things like turbines rotate in curves.
7. However, NURBS have always had some problems. E.g., exactly intersecting two surfaces is infeasible. You had to approximate the intersection curve separately on the two surfaces. Those two approximate curves were slightly different, and so the object wasn't completely watertight.
8. Also, some desirable operations, like offset surfaces, were always impossible to do exactly.
9. Now, additive manufacturing changes the game.
10. It's not easier to manufacture curved surfaces.
11. In fact, designing with flat faces, like triangles, is easier.
12. So, designers may now design objects with millions of triangles.
13. How do we handle objects that really want curves, like rotating objects? Use lots of small triangles.

1   Course content

2   Instructors

3   Course websites

4   Reading material

5   Computer systems used

You will need the following computer systems; they could all be on one computer.

6   LMS

RPI LMS will be used for you to submit homeworks and for us to distribute grades.

Some multiple-choice homeworks may be on LMS.

Announcements and the homeworks themselves will be available on this website.

7   Class times & places

1. Mon & Thurs, 4:00-5:20pm, in Sage 4101 (lectures).
2. Wed 6-7:30, in Sage 5101 (lab/recitation/lecture).

Wed will not always be used. Typical uses:

1. To make up a missed class.
2. For student presentations at the end.
3. To review before a test.
4. For TA meetings.

I intend no class activities outside the scheduled times, except for a final exam review, a day or two before the exam.

8   Calendar

Some of the other Wed lab sessions will be used for regular lectures.

Although it is unlikely, unforeseen events might force this calendar to be modified.

9   Assessment measures, i.e., grades

You are welcome to put copies of exams and homeworks in test banks, etc, if they are free to access. However I also put everything online for free.

10   Syllabus changes

Historically, this does not happen, but, unfortunately, circumstances might require that I change the syllabus during the semester.

11   Academic integrity

1. See the Student Handbook for the general policy. The summary is that students and faculty have to trust each other. After you graduate, your most important possession will be your reputation.

Specifics for this course are as follows.

1. You may collaborate on homeworks, but each team of 1 or 2 people must write up the solution separately (one writeup per team) using their own words. We willingly give hints to anyone who asks.
2. The penalty for two teams handing in identical work is a zero for both.
3. You may collaborate in teams of up to 3 people for the term project.
4. You may get help from anyone for the term project. You may build on a previous project, either your own or someone else's. However you must describe and acknowledge any other work you use, and have the other person's permission, which may be implicit. E.g., my web site gives a blanket permission to use it for nonprofit research or teaching. You must add something creative to the previous work. You must write up the project on your own.
5. Writing assistance from the Writing Center and similar sources in allowed, if you acknowledge it.
6. The penalty for plagiarism is a zero grade.
7. You must not communicate with other people or machines, exchange notes, or use electronic aids like computers and PDAs during exams.
8. The penalty is a zero grade on the exam.
9. Cheating will be reported to the Dean of Students Office.

12   Other related RPI programs and groups

1. Computer Graphics at RPI. You are welcome to combine my course with other graphics courses in other departments. We work together to avoid excessive overlaps.
2. Rensselaer's Games and Simulation Arts and Sciences (GSAS) Major. The difference between us is that my course is a technical, engineering, course.

13   Student feedback

Since it's my desire to give you the best possible course in a topic I enjoy teaching, I welcome feedback during (and after) the semester. You may tell me or write me or the TAs, or contact a third party, such as Prof Mike Wozny, the ECSE Dept head.

1   Homeworks 9 and 10

are online.

2   ACM SIGSPATIAL GIS Cup

I mentioned that 2 weeks ago I was at 27th ACM SIGSPATIAL International Conference on Advances in Geographic Information Systems (ACM SIGSPATIAL 2019).

They have an annual programming contest, the GISCup. My students and I won first place in 2018.

In 2016, we won 2nd place. We also won 2nd place in 2015, and 4th in 2014.

3   How I made a fast forward video in linux

For the 2019 International Geometry Summit Vancouver.

This is my FF video. It plays on some browsers, like chromium, but not on others, like firefox.

How I made it, approximately.

1. This gives the same time to each slide.

2. I made a pdf file of the slides, using LaTeX Beamer.

3. Convert that to separate png files using Imagemagick:

   mogrify -verbose -density 500 -resize 1600x900\! -format png ./*.pdf

4. Make a timed video of slides:

   ffmpeg -framerate 1:42 -pattern_type glob -i '*.png' -c:v libx264 video.mp4

5. Note: Don't use Imagemagick convert, whose output runs slow.

6. Write the transcript for my voiceover.

7. Record my audio with my best headset.

8. Combine audio and video:

   ffmpeg -i narration.wav -i video.mp4 combo.mp4

4   Week 13 slides

1. 13_2 Polygon rendering. Includes clipping polygons, hidden surface algorithms.

   Start at slide 23.

2. 13_3 Rasterization.

5   My commentaries

1   Week 12 slides ctd

1. 12_3 Graphical Objects and Scene Graphs.

2. 12_4 Graphical Objects and Scene Graphs 2.

3. 12_5 Rendering overview.

   At this point we've learned enough WebGL. The course now switches to learn the fundamental graphics algorithms used in the rasterizer stage of the pipeline.

2   Week 13 slides

1. 13_1 Clipping.

   A lot of the material in the clipping slides is obsolete because machines are faster now. However perhaps the rendering is being done on a small coprocessor.

   Big idea (first mentioned in class 13): Given any orthogonal projection and clip volume, we transform the object so that we can view the new object with projection (x,y,z) -> (x,y,0) and clip volume (-1,-1,-1) to (1,1,1) and get the same image. That's a normalization transformation'.

2. 13_2 Polygon rendering. Includes clipping polygons, hidden surface algorithms.

   Up to slide 22.

3   Nice site on visualizing quaternions

Lessons by Grant Sanderson, Technology by Ben Eater.

here

1   Week 12 slides, pt1

1. 12_1 Hierarchical Modeling 1.
2. 12_2 Hierarchical Modeling 2.

2   Textbook programs

1. Chapter 9 simple hierarchical models
2. Chapter 10 Mandlebrot showing serious computation in the fragment shader.

3   Fun stuff for Thanksgiving

1. The Underhanded C Contest.
2. Raytracing jello brand gelatin.
3. IOCCC program to do Julia sets tvr.

4   Thanksgiving trivia questions

1. When the native American Squanto greeted the Pilgrims in March 1621, what language did he use?
2. Where had he learned it?

1   Week 10 slides

1. 10_3 Compositing and Blending.

   Some of this material was removed from the current OpenGL, and some of the remaining stuff hasn't been included in WebGL (yet?). So, you have to learn just the high-level stuff, like what this is and why it's interesting.

   1. Compositing, using partial transparancy, creates complex scenes by blending simple components.
      1. It's hard to do accurately in the pipeline.
      2. Drawing objects back-to-front into the color buffer is a good heuristic.
      3. Clamping and accuracy are concerns.
   2. Fog effects provide a depth cue that helps the viewer understand the image.
   3. Anti-aliasing improves the image quality when there are small objects.

2. 10_4 Imaging Applications.

   1. The GPU is so powerful that people figure ways to use it to do image processing things that it wasn't intended to.
   2. That started the field of GPGPU.
   3. Nvidia watched this happening and added new features to the GPU, like double-precision IEEE-standard floating point computations, to make this easier.
   4. The top line of Nvidia GPUs is designed for scientific computation and doesn't even have video outputs.
   5. The 2nd fastest known supercomputer has 15000 Nvidia GPUs.

3. 10_5 Rendering the Mandelbrot Set.

   Show the power of GPU programming.

   The program is in Chapter 10.

2   Aliasing and anti-

1. The underlying image intensity, as a function of x, is a signal, f(x).
2. When the objects are small, say when they are far away, f(x) is changing fast.
3. To display the image, the system evaluates f(x) at each pixel. That is, f(x) is sampled at x=0,1,2,3,...
4. If f(x), when Fourier transformed, has frequencies higher than 1/2 (cycle per pixel), then that sampling is too coarse to capture the signal. See the Nyquist sampling theorem.
5. When this hi-freq signal is sampled at too low a frequency, then the result computed for the frame buffer will have visual problems.
6. It's not just that you won't see the hi frequencies. That's obvious.
7. Worse, you will see fake low frequency signals that were never in the original scene. They are called '''aliases''' of the hi-freq signals.
8. These artifacts may jump out at you, because of the Mach band effect.
9. Aliasing can even cause (in NTSC) rapid intensity changes to cause fake colors and vv.
10. Aliasing can occur with time signals, like a movie of a spoked wagon wheel.
11. This is like a strobe effect.
12. The solution is to filter out the hi frequencies before sampling, or sample with a convolution filter instead of sampling at a point. That's called '''anti-aliasing'''.
13. OpenGl solutions:
    1. Mipmaps.
    2. Compute scene on a higher-resolution frame buffer and average down.
    3. Consider pixels to be squares not points. Compute the fraction of each pixel covered by each object, like a line. Lines have to have finite width.
14. Refs:
    1. http://en.wikipedia.org/wiki/Aliasing
    2. http://en.wikipedia.org/wiki/Clear_Type
    3. http://en.wikipedia.org/wiki/Wagon-wheel_effect
    4. http://en.wikipedia.org/wiki/Spatial_anti-aliasing (The H Freeman referenced worked at RPI for 10 years).
    5. http://en.wikipedia.org/wiki/Mipmap
    6. http://en.wikipedia.org/wiki/Jaggies

3   Videos - military applications of graphics

US Military's Futuristic Augmented Reality Battlefield - Augmented Immersive Team Trainer (AITT)

Daqri's Smart Helmet Hands On

HoloLens Review: Microsoft's Version of Augmented Reality

US Military's Futuristic Augmented Reality Battlefield - Augmented Immersive Team Trainer (AITT)

'''Modeling and simulation''' is a standard term.

4   DARPA

1. I've mentioned DARPA several times; they funded research into computer graphics starting in the 1970s. So here's some enrichment material on DARPA and autonomous vehicles. This shows why the US is the best in the world at R&D.

   Autonomous vehicles make a marvelous example of a successful engineering project. Many different parts all have to work to make the total project succeed. They include laser rangefinding, image recognition, a road database accurate to the specific lane, and GPS navigation. This is also a model for government - university - industry interaction.

   DARPA (The Defense Advanced Research Projects Agency) started this concept with a contest paying several $million in prizes. (DARPA started connecting computers in different cities with phone lines in 1968. This was the ARPAnet. They funded computer graphics in the 1970s and some early steps in virtual reality in the 1980s.)

   In the 1st contest, the best vehicle failed after about 10 miles. Five vehicles completed the 130 mile course in the 2nd contest. The winning project leader was Sebastian Thrun, a Stanford CS prof. He quit and moved to Google, who has now been funding this for several years.

   Finally, Dr Tony Tether, Director of DARPA when this happened, is an RPI BS EE grad. (He went to Stanford for his PhD).

5   Stereo viewing

1. There are a number of techniques for stereo viewing of movies and videos, dating back to the 19th century.

   1. Make the left image red and the right one blue. Use red-blue glasses.

      This decreases the color experience, but the glasses are cheap.

   2. Polarize the left and right images differently. Movie theatres do this.

      The glasses are cheap. There is full color. The projection process is more complicated (= expensive).

   3. The glasses have shutters that block and clear the left and right eyes in turn. In sync, the TV or projector shows the left or right image.

      The projector is cheaper. The glasses are more expensive.

   4. Use a display with a parallax barrier.

      Only one person can view at a time. No glasses are needed.

   5. Use the fact that your eyes see bright objects faster than they see dim objects. The glasses have a simple grey filter over one eye. Beer companies have used this for commercials.

      No special display is needed. This works only with moving objects.

6   Updating web pages

1. You may change a web page after it has been displayed. Editing elements and even adding or deleting them is allowed.
2. One of the pick programs changes the displayed text in a div to show what you picked.
3. Mathjax, the package I use to render LaTeX math in a web page, edits the displayed page to replace the math source with the rendered math.
4. A standard way to make things appear and disappear is to include at the start all the elements that will be wanted later. Then make them visible or invisible. The tool on my homepage that makes sections expand and collapse does that.
5. Every time something is changed on the page, the locations of everything on the page have to be recomputed. With a slow web browser, like old versions of IE, you can watch this.

7   Week 11 slides

1. 11_1 Framebuffer objects.
2. 11_2 Render to texture.
3. 11_3 Agent based models.

8   Textbook programs

1. Chapter 10 Mandlebrot showing serious computation in the fragment shader.

1   No class next week

I'll be at https://sigspatial2019.sigspatial.org/ . Among other things, I'm part of a group producing a collection of Spatial Gems.

2   Why textures are hard to do

1. ... although the idea is simple.
2. You want to take each texel on each object, find which pixel it would draw on to, and draw it there.
3. That's too expensive. Because of the projection, the projection of one texel is almost never the same size as a pixel.
   1. Sometimes several texels will project to the same pixel, so they have to be averaged together to get the pixel color.
   2. At other times, one texel will project over several pixels, so you want to blend pixel colors smoothly from one texel to the next texel.
   3. Most texels will be invisible in the final image. Even with today's computers, this wastes a lot of computing power.
4. So, this is how it's really implemented.
   1. For each visible fragment, i.e., pixel, find which texel would draw there.
   2. This requires a backwards version of the graphics pipeline.
   3. The interesting surfaces are curved, where each parameter pair (u,v) uses a bicubic polynomial to generate an (x,y,z). You have to invert that.
   4. All this has to be computed at hundreds of millions of pixels per second.
   5. It usually utilizes special texture mapping hardware for speed.

3   Youtube videos

1. Texture Maps Explained - PBR Workflow.
2. Game level texturing: Introduction (PART 1/5).

4   Texture mapping programs

Programs.

1. I'm not covering all the gruesome details of these programs, but just hitting highlights.

2. particleDiffusion: buffer ping ponging of 50 particles initially placed randomly and then moving randomly with their previous positions diffused as a texture.

   It renders to a texture instead of to a color buffer. Then it uses the texture.

   There are better descriptions on the web. Search for 'webgl render texture'. I'll work with the textbook code. Jumping back and forth is confusing, partly because they might use different utility files.

   There are often better descriptions on the web than in the textbook. I've considered running a course only with web material. What do you think?

   https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API has good documentation.

3. Several of the programs don't display on my laptop. They include bumpmap and render.

4. Cubet: enabling and disabling the depth buffer and drawing translucent objects.

5. pickcube etc. This prints the name of the name that you pick.

   1. This draws a label for each face into a separate buffer.
   2. Then it indexes into it with the coordinates of the mouse.

5   Week 10 slides

1. 10_1 Reflection and Environment Maps.

2. 10_2 Bump Maps.

   Perturb the surface normals to emulate small details (bumps).

1   My research

1. RPI article about a completed project that I was part of:

   A Game-Changing Approach: Using the X-Box Kinect as a Sensor to Conduct Centrifuge Research. Team of Rensselaer Researchers Develop New Visualization Method to Evaluate Erosion Quantity and Pattern, November 8, 2016, by Jessica Otitigbe.

2. Where I was last week:

   28th International Meshing Roundtable .

   I presented a paper Accelerating the exact evaluation of geometric predicates with GPUs, that was work by my Brazilian colleagues, Marcelo de Matos Menezes, Salles Viana Gomes Magalhães, Matheus Aguilar de Oliveira, and Rodrigo E. O. Bauer Chichorro at the Federal University of Vicosa.

   Talk slides.

   Paper.

3. Much info is on my web site.

4. Perhaps my most interesting problem is adapting my data structures and local geometry algorithms to GPUs, to intersect two 3D meshes.

2   Term project proposals

1. See the syllabus.

2. The proposal will be homework 6.

3. Submit on LMS.

4. If you want to remotely use a current GPU, parallel.ecse is available.

   It has a dual 14-core Xeon, 256GB DRAM, and Nvidia RTX 8000 and Pascal GeForce GTX 1080 GPUs.

3   Research paper for ECSE-6964

1. If you are registered for the grad version of this class, then in addition to the term project, you must also write a research paper; see the syllabus.
2. Simultaneously with the term project progress reports, please submit research paper progress reports.

4   Textures

Today's big new idea.

1. Textures started as a way to paint images onto polygons to simulate surface details. They add per-pixel surface details without raising the geometric complexity of a scene.
2. That morphed into a general array data format with fast I/O.
3. If you read a texture with indices that are fractions, the hardware interpolates a value, using one of several algorithms. This is called sampling. E.g., reading T[1.1,2] returns something like .9*T[1,2]+.1*T[2,2].
4. Textures involve many coordinate systems:
   1. (x,y,z,w) - world.
   2. (u,v) - parameters on one polygon
   3. (s,t) - location in a texture.
5. Aliasing is also important.

5   Chapter 9 slides

1. 9_1 Buffers.

   Ignore anything marked old or deprecated.

   Not a lot of content in this file.

2. 9_2 Bitblt.

3. 9_3 Texture mapping.

4. 9_4 Texture mapping.

5. 9_5 WebGL Texture mapping I.

6. 9_6 WebGL Texture mapping II.

1   Videos - VR

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

2   Term projects

Start thinking. More later.

3   Lighting etc

1. This Woman sees 100 times more colors than the average person.
2. Phong lighting model: The total light at a pixel is the sum of
   1. Incoming ambient light times ambient reflectivity of the material at the pixel,
   2. Incoming diffuse light times diffuse reflectivity times a factor for the light source being low on the horizon,
   3. Incoming specular light times specular reflectivity times a factor for the eye not being aligned to the reflection vector, with an exponent for the material shininess,
   4. Light emitted by the material.
   5. That is not intended to be completely physical, but to give the programmer lots of parameters to tweak.
3. In OpenGL you can do several possible levels of shading. Pick one of the following choices. Going down the list makes the shading better but costlier.
   1. Shade the whole polygon to be the color that you specified for one of the vertices.
   2. Bilinearly shade the polygon, triangle by triangle, from the colors you specified for its vertices.
   3. Use the Phong lighting model to compute the color of each vertex from that vertex's normal. Bilinearly interpolate that color over the polygon. That is called Gouraud shading.
   4. Bilinearly interpolate a surface normal at each pixel from normals that you specified at each vertex. Then normalize the length of each interpolated normal vector. Evaluate the Phong lighting model at each pixel from the interpolated normal. That is called Phong shading.
4. Maureen Stone: Representing Colors as 3 Numbers (enrichment)
5. Why do primary schools teach that the primary colors are Red Blue Yellow?

4   Review Section 7 slides

1. 7_5 Lighting and shading I.

   Phong shading: big topic.

5   Section 8 Slides

1. 8_1 Lighting and shading 2.
2. 8_2 Lighting and Shading in WebGL.
3. 8_3 Polygonal Shading.
4. 8_4 Per Vertex and Per Fragment Shading.
5. 8_E3 Marching Squares. Will be omitted.

6   Chapter 6 programs

1. Chapter 6

   1. wireSphere: wire frame of recursively generated sphere
   2. shadedCube: rotating cube with modified Phong shading
   3. shadedSphere1: shaded sphere using true normals and per vertex shading
   4. shadedSphere2: shaded sphere using true normals and per fragment shading
   5. shadedSphere3: shaded sphere using vertex normals and per vertex shading
   6. shadedSphere4: shaded sphere using vertex normals and per fragment shading
   7. shadedSphereEyeSpace and shadedSphereObjectSpace show how lighting computations can be carried out in these spaces

2. Summary of the new part of shadedCube:

   1. var nBuffer = gl.createBuffer();

      Reserve a buffer id.

   2. gl.bindBuffer( gl.ARRAY_BUFFER, nBuffer );

      1. Create that buffer as a buffer of data items, one per vertex.
      2. Make it the current buffer for future buffer operations.

   3. gl.bufferData( gl.ARRAY_BUFFER, flatten(normalsArray), gl.STATIC_DRAW );

      Write a array of normals, flattened to remove metadata, into the current buffer.

   4. var vNormal = gl.getAttribLocation( program, "vNormal" );

      Get the address of the shader (GPU) variable named "vNormal".

   5. gl.vertexAttribPointer( vNormal, 3, gl.FLOAT, false, 0, 0 );

      Declare that the current buffer contains 3 floats per vertex.

   6. gl.enableVertexAttribArray( vNormal );

      Enable the array for use.

   7. (in the shader) attribute vec3 vNormal;

      Declare the variable in the vertex shader that will receive each row of the javascript array as each vertex is processed.

   8. The whole process is repeated with the vertex positions.

      Note that the variable with vertex positions is not hardwired here. You pass in whatever data you want, and your shader program uses it as you want.

7   Computing surface normals

1. For a curved surface, the normal vector at a point on the surface is the cross product of two tangent vectors at that point. They must not be parallel to each other.
2. If it's a parametric surface, partial derivatives are tangent vectors.
3. A mesh is a common way to approximate a complicated surface.
4. For a mesh of flat (planar) pieces (facets):
   1. Find the normal to each facet.
   2. Average the normals of the facets around each vertex to get a normal vector at each vertex.
   3. Apply Phong (or Gouraud) shading from those vertex normals.

1   Midterm exam

1. In 7 days, Thurs Oct 17, 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.

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 F2017.
   2. Midterm F2017 solution.
   3. Midterm F2016.
   4. Midterm F2014, Midterm F2014 Solution
   5. Midterm F2013, Midterm F2013 Solution
   6. 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. Part of today will be a review of previous lectures and exams.
2. I'll discuss other answers in the review, or you may figure out answers on your own.

2   No homework out today

However there may be a homework assigned next week due the week after.

3   Possible spring courses

1. ECSE-4740 Applied Parallel Computing for Engineers. Its instructor is excellent. There is also a 6000-level version.
2. An independent Computer Graphics reading course directed by me.

1   Iclicker questions

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

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

3. \(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   Midterm exam

1. In 10 days, Thurs Oct 17, 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.

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 F2017.
   2. Midterm F2017 solution.
   3. Midterm F2016.
   4. Midterm F2014, Midterm F2014 Solution
   5. Midterm F2013, Midterm F2013 Solution
   6. 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. Part of this Thurs will be a review of previous lectures and exams.
2. I'll discuss other answers in the review, or you may figure out answers on your own.

3   Comments on recent powerpoint slides

1. I didn't show WebGL Transformations Angel_UNM_14_5_4.ppt in detail since it is mostly obsolete.
   1. The old OpenGL modelview and projection matrix idea is now deprecated, but is interesting for its subdivision of transformations into two functions.
   2. The modelview matrix moves the world so that the camera is where you want it, relative to the objects. Unless you did a scale, the transformation is rigid - it preserves distances (and therefore also angles).
   3. The projection matrix view-normalizes the world to effect your desired projection and clipping. For a perspective projection, it does not preserve distances or angles, but does preserve straight lines.

4   Angel programs - Chapter 5

Chapter 5

1. hata shows:
   1. Using a modelview matrix set by lookat and a projection matrix set by ortho
   2. Drawing a mesh with line strips.
2. hat shows:
   1. Drawing the same points both as a triangle fan and as a line loop.
   2. Setting options to make the lines slightly in front of the triangles.
   3. Doc for depthfunc.
   4. Doc for polygonoffset.
3. ortho1 and ortho2 show clipping with an interactive orthographic (parallel) projection.
4. perspective1 and 2 show an interactive perspective projection.
5. shadow shows a shadow.
6. Notes about the computer programs:
   1. The point is not to teach javascript; it's just the vehicle. Before javascript, I taught C++. Javascript is easier.
   2. One point is to teach a widely used API, i.e., WebGL.
   3. Another point is to teach graphics concepts like projection and viewing, and their APIs, like lookAt.
   4. These concepts will exist in any graphics API.

5   Section 7 slides

1. 7_1 Orthogonal projection matrices.

   Big idea: Given any orthogonal projection and clip volume, we transform the object so that we can view the new object with projection (x,y,z) -> (x,y,0) and clip volume (-1,-1,-1) to (1,1,1) and get the same image. That's a normalization transformation'. See slide 14.

2. 7_2 Perspective projection matrices and the normalization transformation.

   Big idea: We can do the same with perspective projections. The objects are distorted like in a fun house. See slide 8.

6   Section 7 slides ctd

1. 7_3 Meshes.

   Big ideas:

   1. Meshes are common for representing complicated shapes.
   2. We can plot a 2 1/2 D mesh back to front w/o needing a depth buffer.
   3. Unstructured point clouds with millions of points from laser scanners are common. We can turn them into a mesh by using various heuristics about the expected object.
   4. Drawing the mesh edges a little closer than the faces is a hack that probably works most of the time if the scene isn't too complex. I.e., go ahead and use it, but don't be surprised.

2. 7_4 Shadows.

   Big idea:

   1. If there is one light source, we can compute visibility with it as the viewer.
   2. Somehow mark the visible (i.e., lit) and hidden (i.e., shadowed) portions of the objects.
   3. Then recompute visibility from the real viewer and shade the visible objects depending on whether they are lit or shadowed.
   4. This works for a small number of lights.
   5. This capability is in OpenGL but not in WebGL, so this topic is enrichment only (= will not be examined).

3. 7_5 Lighting and shading I.

Big big topic.

7   RPI's long history in Computer Graphics

1. Curtis Priem.
2. Mike Wozny, Head of ECSE, was one of the founders of IEEE Computer Graphics and Applications, which printed that article by Maureen Stone.
3. William Lorensen, co-inventor of marching cubes, earned his BS and MS here at RPI.

8   Handwritten notes from today

There were none.

1   Iclicker registration problems

The majority of students in this class have not registered their iclickers. The following iclickers have been used in class but not registered to a student in this class. Airas may be contacting people to see what went wrong. I've also emailed the unregistered students. You need to fix this to get your iclicker grade. Thanks.

#36D7EF0E #39AA7DEE #3AFD11D6 #3BE6815C #42A38061 #42ABA841 #42AF28C5 #42B522D5 #42CA42CA #42F42690 #434B0800 #434C6768 #4360B794 #43CA7AF3 #44360C7E #443EEE94 #443F89F2 #45C6CE4D #45CC66EF #45CECB40 #46C70C8D #46E54DEE #47D621B0 #4A05C788 #4A26C3AF #4A8CA066 #4B3AC9B8 #E6274B8A

2   Iclicker questions

1. Let a=(1,0,0) and p=(2,3,4). Then the component of p that is perpendicular to a is
   1. (0,3,4)
   2. (0,3/2,2)
   3. (1,0,0)
   4. (2,0,0)
   5. (2,3,4)
2. I want a matrix M that has this property: for all vectors p, \(Mp = \begin{pmatrix}-1&0&1\end{pmatrix} \times p\). M =
   1. \(\begin{pmatrix} 0&-1&0\\1&0&1\\0&-1&0 \end{pmatrix}\)
   2. \(\begin{pmatrix} 0&1&0\\-1&0&-1\\0&1&0 \end{pmatrix}\)
   3. \(\begin{pmatrix} 0&1&0\\1&0&1\\0&1&0 \end{pmatrix}\)
   4. \(\begin{pmatrix} 1&0&-1\\0&0&0\\-1&0&1 \end{pmatrix}\)
   5. \(\begin{pmatrix} 1&0&-1\\1&0&-1\\1&0&-1 \end{pmatrix}\)
3. What is the angle (in degrees) between these two vectors: (1,0,0), (1,2,3)?
   2. \(1/\sqrt{13}\).
   3. \(1/\sqrt{14}\).
   4. \(\arccos(1/\sqrt{13})\).
   5. \(\arccos(1/\sqrt{14})\).
4. This is a homogeneous 3D translation matrix: \(\begin{pmatrix} 2&0&0&2\\ 0&2&0&3\\ 0&0&2&4\\ 0&0&0&2 \end{pmatrix}\) Where is the Cartesian point (0,0,0) translated to?
   1. (0,0,0)
   2. (1,3/2,2)
   3. (1,3/2,2,1)
   4. (2,3,4)
   5. (2,3,4,2)
5. Rotating the 2D Cartesian point (-1,0) by \(90^o\) gives what:
   1. (1,0)
   2. (-1,0)
   3. (0,1)
   4. (0,-1)
   5. (-.7,.7)
6. When using the vector rule to rotate a point p about an axis by an angle:
   1. Neither the point nor the axis need to be of any particular length.
   2. The point must be at a distance one from the origin.
   3. The axis must be of unit length.
   4. Both B and C.
   5. The point's distance from the origin must equal the axis's length.
7. Multiplying a complex number x+iy by e^(i pi/4) is equivalent to doing what to the point (x,y):
   1. Rotating it by 90 degrees.
   2. Rotating it by 90 radians.
   3. Rotating it by 45 degrees.
   4. Translating it by 90 degrees.
   5. Nothing; this doesn't change the point.
8. If i and j are quaternions, what is i+j?
   1. -k.
   2. 0.
   3. 1.
   4. i+j, there is no simpler representation.
   5. k.
9. If i and j are quaternions, what is ij?
   1. -k.
   2. 0.
   3. 1.
   4. i+j, there is no simpler representation.
   5. k.
10. The quaternion i represents what rotation?
    1. 180 degrees about the x-axis.
    2. 90 degrees about the x-axis.
    3. 180 degrees about the y-axis.
    4. 90 degrees about the y-axis.
    5. no change, i.e., 0 degrees about anything.
11. Which rotation methodology is best when working with nested gimbals?
    1. vectors
    2. quaternions
    3. matrices
    4. Euler angles
    5. None are particularly good.
12. Which make it easy to combine two rotations into one?
    1. vectors
    2. quaternions
    3. matrices
    4. Euler angles
    5. B and C

3   Shadertoy

Shadertoy.com is a very nice use of WebGL. 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) - Seretsi Khabane Lekena '17.

You need a machine with reasonable graphics to show these. The TP Yoga that I bring to class is not one of them.

4   Section 6 slides

(The slides are organized into week that don't correspond to textbook chapters.)

#.`6_1 Building Models <https://wrf.ecse.rpi.edu/Teaching/graphics/SEVENTH_EDITION/PPT/WEEK06/Angel_UNM_14_6_1.ppt>`_.

Big idea: separate the geometry from the topology.

#.`The Rotating Square <https://wrf.ecse.rpi.edu/Teaching/graphics/SEVENTH_EDITION/PPT/WEEK06/Angel_UNM_14_6_2.ppt>`_.

Big idea: render by elements.

#.`6_3 Classical Viewing <https://wrf.ecse.rpi.edu/Teaching/graphics/SEVENTH_EDITION/PPT/WEEK06/Angel_UNM_14_6_3.ppt>`_.

Big ideas: parallel (orthographic) and perspective projections. The fine distinctions between subclasses of projections are IMO obsolete.

1. 6_4 Computer Viewing: Positioning the Camera.

2. 6_5 Computer Viewing: Projection.

   Big idea: view normalization. We'll see this more in chapter 7.

5   Handwritten notes from today

Here.

1   Homework 3 extended

Because of Thursday's blackout, you may upload homework 3 through tonight.

2   Iclicker questions

1. How are you using the textbook?
   1. I bought a physical copy.
   2. I rented a physical copy.
   3. I'm sharing a physical copy with one or more friends.
   4. I obtained a PDF.
   5. I don't have access since I never plan to read it.
2. Consider a pinhole camera as discussed in slide 12 of ppt presentation 1_5. Let d=2. To where does the point (1,3,-2) project? Use the equation on that slide. x/z/d should be parenthesized as x/(z/d).
   1. (-1,-3,-2)
   2. (1,3,-2)
   3. (1,3,2)
   4. (1/2, 3/2, 1)
   5. (1/2, 3/2, -1)
3. Look at this CIE chromaticity diagram. If you wanted to make white by mixing one spectrally pure color with the pure color with wavelength 600 nm, what wavelength would that other color be?
   1. 400
   2. 485
   3. 535
   4. 580
   5. It's not possible, because purple is not a spectrally pure color. http://upload.wikimedia.org/wikipedia/commons/3/3b/CIE1931xy_blank.svg
4. When rotating an object, what can happen to an object?
   1. Straight lines might turn into curves.
   2. Straight lines stay straight, but angles might change.
   3. Straight lines stay straight, and angles don't change, but distances may change, either longer or shorter.
   4. Straight lines stay straight, and angles don't change, but distances might get longer.
   5. Straight lines stay straight, and angles and distances don't change.
5. The parametric equation of a line through the points (1,1) and (2,3) is:
   1. P = (1,1) + t(1,0) + u(0,1)
   2. P = (1,1) + t(1,1)
   3. P = (1,1) + t(1,2)
   4. P = (1,1) + t(2,3)
   5. P = t(1,1) + u(2,3)
6. The normal vector to the plane through the points (1,0,0), (0,1,0), (0,0,1) is
   1. (1,0,0)
   2. \(\left( 1/\sqrt{3}, 1/\sqrt{3}, 1/\sqrt{3} \right)\)
   3. (-1, 0, 0)
   4. 3
   5. (1/3, 1/3, 1/3)
7. Translating the 2D homogeneous point by (1,2,3) by (in Cartesian terms) dx=1, dy=2 gives which new homogeneous point?
   1. (1,2,3)
   2. (1,2,3,4)
   3. (2,4)
   4. (2,4,3)
   5. (4,8,3)
8. Rotating the 2D Cartesian point (0,1) by {$90^o$} gives what:
   1. (1,0)
   2. (-1,0)
   3. (0,1)
   4. (0,-1)
   5. (-.7,.7)
9. If a 3x3 rotation matrix has eigenvalues \(1, -\frac{\sqrt{2}}{2}+\frac{\sqrt{2}}{2}i, -\frac{\sqrt{2}}{2}-\frac{\sqrt{2}}{2}i\), then what is the rotation angle (in degrees)?
   1. 0
   2. 45
   3. 90
   4. 135
   5. 180

3   Euler 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.

4   Quaternions

1. Finish off 3D rotations by learning quaternions.
2. It's easy to find the quaternion rotation for a given axis and angle.
3. and vice versa.
4. Combining two rotations and finding the axis and angle of the equivalent single rotation is easy.

5   3D interpolation

1. My note on 3D Interpolation, which is better than the textbook section on animating with Euler angles.
2. The problem with stepping the 3 Euler angles together is that the combo rotation might not be smooth.

6   Handwritten notes from today

Here.

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   Textbook slides: Chapter 5 ctd

1. 5_2 Homogeneous coordinates
2. 5_3 Transformations.
3. 5_4 WebGL transformations
4. 5_5 Applying transfomations
5. WebGL Transformations Angel_UNM_14_5_4.ppt since it is mostly obsolete.
   1. The old OpenGL modelview and projection matrix idea is now deprecated, but is interesting for its subdivision of transformations into two functions.
   2. The modelview matrix moves the world so that the camera is where you want it, relative to the objects. Unless you did a scale, the transformation is rigid - it preserves distances (and therefore also angles).
   3. The projection matrix view-normalizes the world to effect your desired projection and clipping. For a perspective projection, it does not preserve distances or angles, but does preserve straight lines.

3   3D rotation ctd

1. Continue my note on 3D rotation. including 4D rotations and Euler angles.

4   Handwritten notes from today

Here.

1   Today's iclicker questions

1. Bump mapping is
   1. more realistic than actually 3D modeling each bump
   2. faster than actually 3D modeling each bump
   3. both
   4. neither
   5. unrelated to modeling bumps; the name is coincidental.
2. How do you draw a pentagon in WebGL?
   1. Split it into triangles.
   2. Split it into triangles if it is concave, otherwise draw it directly.
   3. Split it into triangles if it is convex, otherwise draw it directly.
   4. Draw it directly.
   5. Split it into hexagons.
3. How do you draw a pentagon in WebGL?
   1. Split it into triangles.
   2. Split it into triangles if it is concave, otherwise draw it directly.
   3. Split it into triangles if it is convex, otherwise draw it directly.
   4. Draw it directly.
   5. Split it into hexagons.
4. In the WebGL pipeline, the Primitive Assembler does what?
   1. fits together pieces of ancient Sumerian pottery.
   2. rotates vertices as their coordinate systems change.
   3. creates lines and polygons from vertices.
   4. finds the pixels for each polygon.
   5. reports whether the keyboard and mouse are plugged in correctly.
5. To draw into only part of the graphics window you would call:
   1. gl.drawpart
   2. gl_Position
   3. gl.viewport
   4. gl.window
   5. There's no builtin routine; you have to scale your graphics yourself to achieve this.
6. What buffer is used by WebGl to do hidden surface removal?

1. Closest object buffer
2. Color buffer
3. Depth or Z buffer
4. Hidden-surface buffer
5. Ray-trace buffer

1. If you do not tell WebGL to do hidden surface removal, and two objects overlap the same pixel, then what color is that pixel?
   1. WebGL throws an error.
   2. the closer object
   3. the farther object
   4. the first object to be drawn there
   5. the last object to be drawn there
2. gasket2 has this code: var points=[ ]; ... points.push(a,b,c); What does push do here?
   1. Appends new entries to the end of points.
   2. Inserts new entries at the start of points.
   3. Overwrites the first entries of points.
   4. Overwrites the last entries of points.
   5. Throws an error because we didn't specify a size for points.
3. Why would you want to send a variable to a vertex shader that has the same value for every vertex?
   1. the vertex's coordinates
   2. the vertex's color
   3. the object's global orientation
   4. the location of the global light source
   5. C and D.
4. How would you send that variable to the vertex shader?
   1. as a varying variable.
   2. as a uniform variable.
   3. in another array similar to the vertex array.
   4. with a bindBuffer call.
   5. with a bufferData call.
5. You call gl.BufferSubData to do what?
   1. to add or replace part of the buffer in the GPU.
   2. to define a submarine object.
   3. to subtract some data in the buffer.
   4. to tell the GPU to look for a pattern and substitute any occurrences,
   5. to tell the GPU to use a subroutine instead of the main program.

2   No class this Wed Sep 25

3   Homogeneous coordinates, ctd

4   3D rotation

IMNSHO I do this topic better than the textbook.

My note on 3D rotation.

5   Handwritten notes from today

Here.

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

2   Homogeneous coordinates

My take on homogeneous coordinates. IMNSHO (In My Not So Humble Opinion) it's better than the book.

3   Textbook slides: Chapter 5

The big topic for Chapter 5 is homogeneous coordinates. They allow all the common transformations - translation, rotation, scaling, projection - to be expressed as a multiplication by a 4x4 matrix.

1. 5_1 Representation - I'll do this really quickly.

4   Textbook programs

My local web copy .

My copy on RCS.

1. Chapter 4:

   1. color interpolation
   2. element arrays
   3. etc

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

5   SIGGRAPH 2017 videos

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

1. SIGGRAPH 2017 Computer Animation Festival Trailer.
2. SIGGRAPH 2017 VR Village Trailer.
3. The Sketchy Database: Learning to Retrieve Badly Drawn Bunnies - SIGGRAPH 2016.
4. Samsung Official Ostrich Commercial || Gear VR Advertisement.

6   Nice WebGL site

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

1   No class this Wed

Pres Jackson is holding a faculty reception.

2   Homework due dates changed to Thurs

This is to allow you to get help during the week before handing them in.

This starts with Homework 2.

3   Course wiki reorganized

The landing point lists all the posts in order, newest first. Blog in the top menu does the same. Archive lists the titles of all the posts.

4   Airas office hours

Tues 11am, 1st floor of Folsom library near entrance. akhtaa2@ AT rpi DOT edu.

5   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

6   Textbook slides: Chapter 4, ctd

1. 4_3 Working with Callbacks
2. 4_4 Position Input
3. 4_5 Picking
4. 4_6 Geometry

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

8   Next few lectures will be mostly mathematics

I'm replacing the Angel lecture at Incremental and Quaternion Rotation, with my own material. Feel free to read ahead.

1   Iclicker questions

1. 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?

   1. uniform
   2. varying
   3. attribute
   4. dynamic
   5. static

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

   1. be more likely to fire
   2. be less likely to fire
   3. be unaffected by this neuron.

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

   1. vertex shader
   2. primitive assembler
   3. fragment shader
   4. tesselation shader
   5. javascript callback

4. The spectral wavelength of pure purple is about

   1. 400 nm
   2. 500 nm
   3. 600 nm
   4. 700 nm
   5. There is no wavelength for pure purple.

5. What is your favorite platform/OS?

   1. Windows
   2. Linux
   3. Mac
   4. Android
   5. Other

6. The carpet is an example of

1. diffuse reflection
2. specular reflection
3. environment mapping
4. bump mapping
5. how to save money

2   Text chapter 3 programs

http://homepages.rpi.edu/~frankwr/ECSE-4750/CODE/03/ (corrected)

triangle, cad1 and cad2 are simple interactive drawing programs.

3   More slides

1. 4_1 Input and Interaction
2. 4_2 Animation

1   Iclicker questions

1. Why does WebGL have the triangle-strip object type, in addition to the triangle type?
   1. It leads to smaller, faster, graphics objects.
   2. It leads to bigger, faster, graphics objects.
   3. It's not possible to split some complicated polygons into lots of simple triangles, but you can split them into triangle-strips.
   4. The standards writers were being paid by the word.
2. What is the physical principle underlying LCD?
   1. Fire an energetic electron at a rare earth atom and a photon of light is emitted.
   2. Plowing your family farm as a kid can suggest an way to invent electronic television.
   3. A solution of corkscrew shaped molecules can rotate polarized light.
   4. Putting your finger close to a capacitor can change its capacitance.
   5. If two coils of wire are close, then an alternating current in one can induce a current in the other.
3. Standards ...
   1. allow programmers to move between projects
   2. allow different types of hardward to be substituted in.
   3. ..... operating systems ......
   4. allow vendors to lock in customers.
   5. can prevent the latest HW from being used to its fullest.
4. Color printing on a sheet of paper exemplifies
   1. additive color
   2. subtractive color
   3. multiplicative color
   4. divisive color
   5. exponential color
5. Red is a primary color of which color space?
   1. additive color
   2. subtractive color
   3. multiplicative color
   4. divisive color
   5. exponential color
6. Major components of the WebGl model as discussed in class are:
   1. Objects, viewer, light sources, planets, material attributes.
   2. Still cameras, video cameras, objects, light sources.
   3. Objects, viewer, light sources, material attributes.
   4. Colored objects, black and white objects, white lights, colored lights
   5. Flat objects, curved objects, near lights, distant lights.

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

3   Textbook slides

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 (2nd set with this title)
3. 3_3, Programming with WebGL Part 4: Color and Attributes
4. 3_4, Programming with WebGL Part 5: More GLSL
5. 3_5, Programming with WebGL Part 6: Three Dimensions
6. 3_6, Programming with WebGL Part 6: Three Dimensions ctd

4   Today's original demo program

For today's demo program, I'll modify triangle to add a slider that skews a vertex. Then we can maybe rotate.

5   Text chapter 3 programs

Now, we'll see how the programs in <https://wrf.ecse.rpi.edu/Teaching/graphics/SEVENTH_EDITION/CODE/03/>`_ work.

triangle, cad1 and cad2 are simple interactive drawing programs.

File locations:

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.

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   Today's demo program

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').

3   Textbook slides

We'll finish the Chapter 2 slides.

4   Iclicker questions

1. What is your major?

1. CSYS
2. ELEC
3. CSCI
4. GSAS
5. Other

2. What is your class?
   1. 2020
   2. 2021
   3. 2022
   4. Grad
   5. Other
3. What is the correct order of the graphics pipeline?
   1. vertex-shader fragment-shader rasterizer primitive-assembly
   2. fragment-shader rasterizer primitive-assembly vertex-shader
   3. rasterizer primitive-assembly vertex-shader fragment-shader
   4. primitive-assembly vertex-shader fragment-shader rasterizer
   5. 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:
   1. with a javascript function
   2. in the vertex shader
   3. in the fragment shader
   4. in the html file
   5. it can't be done.

1   Iclicker starts Mon

Bring your iclickers.

2   Linear algebra tutorial

1. For students confused by the linear algebra questions on homework 1, the following may help:

   1. vector methods.
   2. Vector Math for 3D Computer Graphics
   3. Working with vectors, from Maths: A Student's Survival Guide

2. Also see wikipedia.

3. Some older graphics texts have appendices summarizing the relevant linear algebra.

4. The scalar (dot) product is needed to do things like this:

   1. compute how a ball bounces off a wall in pong
   2. compute lighting effects (how light reflects from a surface)

5. The cross product's applications include:

   1. compute torque and angular momentum.
   2. compute the area of a parallelogram.

   It is the only operator that you'll probably ever see that is not associative. Ax(BxC) != (AxB)xC.

6. The triple product (A.BxC) computes the volume of a parallelepiped.

3   Protecting your RCS website

1. By default, everything on https://www.rpi.edu/~RCSID/ is readable by anyone.
2. Here's one way to add a low grade password.
3. It relies on the facts that when a reader navigates to a directory.
   1. by default, the contents of the directory are listed, unless
   2. the dir contains the file index.html (or variants like index.htm).
   3. then that file is displayed instead of the directory contents.
   4. This behavior is controlled by various options in files like .htaccess, so there might be dirs where it doesn't happen.
   5. Nevertheless, except for that unusual case, the reader can't see the actual directory.
   6. However, any file (or subdir) that the reader knows about can be listed explicitly.
4. So, do this:
   1. Create an empty file public_html/index.html
   2. Create a subdir with an unguessable name, like public_html/passw0rd/.
   3. Put your work in there.
   4. Its URL will be https://www.rpi.edu/~RCSID/passw0rd/
5. There are also other harder ways to add passwords to directories.

4   Your RCS web files not visible?

1. Read this if, when you browse to your public_html, you see only subdirs, not plain files.
2. The problem is an AFS Access Control List (ACL) setting on the dir.
3. See them thus in an ssh session: fs la .
4. system:anyuser needs to be rl, not l.
5. Sometimes the defaults are changed w/o telling anyone.
6. Set the ACL thus: fs sa . system:anyuser rl (note the period).
7. New subdirs inherit from their parents, but ACL changes do not propagate.
8. So, you need repeat that command in any subdirs you already created.

5   Programming

1. Serpinski gasket programs showing more complicated WebGL.

   We play with the code to see what changes.

2. Notes:

   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. (This is a big problem.)

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

3. 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 HARDWARE 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.

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

5. Executive summary of Portability And Standards.

6   Textbook slides

We'll continue with the textbook powerpoint slides.

1. 2_2, Programming with WebGL Part 1: Background.
2. 2_3, Programming with WebGL Part 1: Background
3. 2_4, Programming with WebGL Part 2: Complete Programs
4. 2_5, Programming with WebGL Part 2: Complete Programs
5. 3_1, Programming with WebGL Part 3: Shaders

1   Yesterday's program demos

1. I ssh'ed from my linux laptop to rcs.rpi.edu, which is a linux machine.
2. My RCS copy of the textbook files is at ~frankwr/public_html/ECSE-4750 .
3. The URL is https://rpi.edu/~frankwr/ECSE-4750/ .
4. square.html and square.js are from Chapter 3.

2   Accessing RCS files from non-RPI computer, ctd

1. FileZilla for Windows
2. http://dotcio.rpi.edu/services/file-services/mapping-network-drive-using-secureftp
3. http://dotcio.rpi.edu/services/accounts-identity/rcs-accounts/connecting-your-rcs-home-directory
4. http://dotcio.rpi.edu/services/file-services/mapping-network-drive-rcs-using-openafs-client

3   Today's material

1. Serpinski gasket programs showing more complicated WebGL.

2. Extra material on colors

   1. Tetrachromacy

      Some women have 2 slightly different types of green cones in their retina. They see 4 primary colors.

   2. Metamers

      Different colors (either emitted or reflected) with quite different spectral distributions can appear perceptually identical. With reflected surfaces, this depends on what light is illuminating them. Two surfaces might appear identical under noon sunlight but quite different under incandescent lighting.

   3. CIE chromaticity diagram

      This maps spectral colors into a human perceptual coordinate system. Use it to determine what one color a mixture of colors will appear to be. The curve of pure spectral colors was determined experimentally.

      1. More info: http://wikipedia.org/wiki/CIE_xyY .
      2. Purple is not a spectral color.

   4. Color video standards: NTSC, SECAM, etc

   5. My enrichment note on NTSC And Other TV Formats. NTSC, the American analog TV standard, is now getting obsolete. However it was a beautiful example of engineering design. First B&W TV was invented. Then color was added in a way that was upward compatible, downward compatible, and used no more bandwidth.

   6. Failed ideas: mechanical color TV. http://en.wikipedia.org/wiki/Mechanical_television (enrichment).

   7. Additive vs subtractive colors.

      1. http://www.physicsclassroom.com/Physics-Interactives/Light-and-Color/RGB-Color-Addition/RGB-Color-Addition-Interactive

   8. Sensitivity curves of the 3 types of cones vs wavelength.

      1. http://i.stack.imgur.com/5snTb.png

   9. Material reflectivity vs wavelength.

   10. Incoming light intensity vs wavelength.

   11. Retina is a neural net - Mach band effect. When one cone is brightly lit, it inhibits its neighbors from firing so easily. This acts like a high frequency filter, to emphasize small details in the scene. Note: the details of how this works are uncertain.

   12. I'll do in class:

       Week 2, set 1, Models and architectures

4   Homeworks

1. I'm using LMS only for submitting homework and recording grades. The text of the assignments will be only on the course page.

   The reason is that LMS is really badly designed. E.g., entering a formula into its spreadsheet requires clicking on a menu (you cannot type the formula), and the formula cannot be edited.