\( \newcommand{\vecIII}[3]{\left[\begin{array}{c} #1\\#2\\#3 \end{array}\right]} \newcommand{\vecIV}[4]{\left[\begin{array}{c} #1\\#2\\#3\\#4 \end{array}\right]} \newcommand{\Choose}[2]{ { { #1 }\choose{ #2 } } } \newcommand{\vecII}[2]{\left[\begin{array}{c} #1\\#2 \end{array}\right]} \newcommand{\vecIII}[3]{\left[\begin{array}{c} #1\\#2\\#3 \end{array}\right]} \newcommand{\vecIV}[4]{\left[\begin{array}{c} #1\\#2\\#3\\#4 \end{array}\right]} \newcommand{\matIIxII}[4]{\left[ \begin{array}{cc} #1 & #2 \\ #3 & #4 \end{array}\right]} \newcommand{\matIIIxIII}[9]{\left[ \begin{array}{ccc} #1 & #2 & #3 \\ #4 & #5 & #6 \\ #7 & #8 & #9 \end{array}\right]} \)

Computer Graphics

What is CG?

  • it's not drawing/painting with the computer
  • it's modeling and rendering
  • ARTS 313, Virtual Form, makes a good companion course.

What are some common applications of CG?

Let's look at some examples (PDF)

  • What do we need to model in order to render these graphical images?

Demos

Before we dig into the material of the course, let's look at a few demos:

A few past student project demonstrations and snapshots:

Here is an early version of Maya Mau's thesis project on molecular modeling : Molecular Modeling

About CS307

What is this course like?

First, this is a programming course. All the assignments involve writing JavaScript code. The advantage of JavaScript is that it runs in pretty much every web browser. The disadvantage is that its debugging environments are still improving.

The course is fairly mathematical. We will learn about the math that underlies all those pretty pictures:

  • algebra
  • geometry
  • trigonometry
  • calculus
  • some linear algebra

Sketch

Please sketch the barn. This is not graded; it's just an intellectual exercise. Give yourself a few minutes and just do your best.

Basics

Ellen's (real) barn and CG rendering of a barn from pngegg.com:

  

The purpose of sketching the barn is to raise the following concepts.

  • vertices
  • camera position
  • camera direction
  • image plane
  • projection
  • reflection
  • color

These are the fundamental concepts of computer graphics:

  • Object modeling
  • Camera placement and shape of viewed region
  • Material
  • Lighting
  • Texture mapping
  • Modeling curves and surfaces
  • Animation

The Barn

Here's the CG equivalent of the sketch we just made:

Some Concepts and Terminology

Graphics Computer:

https://www.ntu.edu.sg/home/ehchua/programming/opengl/images/Graphics3D_Hardware.png

  • Processor
  • Memory
  • Frame Buffer (framebuffer)
  • Output Devices: typically a monitor, such as a CRT or LCD screen
  • Input Devices: keyboards, mice, trackballs, video game controllers, etc.

Our software is going to construct a 3D model of our object or scene, typically as a collection of vertices, faces, surfaces, control points, and the like. These will be sent to the graphics card, which will render the scene as a raster image of pixels. These are written into the frame buffer, where they stay in order to drive the display.

luxo JR and some RGB pixels

The above image of Luxo Jr. illustrates some useful terminology:

  • A Pixel is a single spot of color in a image defined by a rectangular grid of pixels.
  • Raster and rasterization (AKA scan conversion) is the rectangular grid of pixels. The frame buffer holds the raster image.
  • Color Depth or Bit Depth has to do with the number of different colors that can appear at any pixel.
  • RGB: Red/Green/Blue color primaries are how the color is defined for each pixel.
  • Display resolution. The greater the number of pixels, the more fine detail can be displayed, as well as reducing the inevitable jagginess of lines and curves that don't match the raster.

Course Overview

Look at the syllabus and schedule

  • Flipped lectures: activities during class time. Please come to class having done the reading!
  • There will be in-class quizzes with Poll Anywhere, but for participation.
  • Homework assignments. There will be six assignments, posted every week or two. Hand-written problems may be handed in at my office. Assignments are typically due on Wednesday nights.
  • Large project, with two deadlines, end of classes and end of exams. May be done with a partner, but carefully divided in two, in case something goes wrong.
  • Sakai quizzes!
    • do the reading beforehand, as early as you like (though probably not too early)
    • do the quiz when you are ready.
    • most important: you get a chance to ask me questions
    • you can't make up a missed quiz, but I will drop the lowest 3 quizzes

Course Software

We'll be using WebGL, a package called Three.js, and a home-grown package called TW written by Scott Anderson. This means we'll write code in JavaScript! This also means:

  • No installing software!
  • You'll be able to work in any modern web browser. Use this link to test whether your browser supports WebGL.
  • Anyone using a modern web browser will be able to see your work without installing software. Show off your work to friends, family, and employers!
  • You can share your code with others in this class by providing a link that they can load into their web browser.

Three.js is still evolving — this spring, we'll use a mixture of version R95, which is also used in the Third Edition of Dirksen's book (2018), and R163 or R172.

Version(s) of THREE.js

The Three.js software has changed in fundamental ways in the last two years and that presents some challenges.

  • All my working examples use an old version of Three.js, including even a different way of loading the library. They won't work on the latest version of Three.js w/o some revision — in some cases, substantial revision.
  • There are good resources at https://threejs.org/, but naturally those document the latest version, not the old version from two years ago.

It's a dilemma.

  • I will support you whether you want to use the older software or the newer software.
  • I will convert my examples to use the newer software when I can, but I can't promise that I'll be able to do all of them.

Learning JavaScript

If you do not know JavaScript, now is an excellent time to learn!

I've written several introductions to JS. The best one is linked from the schedule. We'll mainly draw upon the following aspects of JavaScript:

  • basics: function definitions, variables, conditionals, loops
  • OOP: how to make objects and invoke methods on them

There's also a JavaScript Quick Guide, just 13 intense pages, in a printer-friendly format.

How We Work

You'll be programming in JavaScript in a text editor on the classroom MACs or on your local machine, using the JavaScript interface to the WebGL system calls.

Homework code submission will involve uploading a webpage (HTML file) and relevant code files to the cs307-assignments folder that will be created on your user account on the CS file server.

Wednesday meetings allow time to work on assignments and other practical stuff.

Administrative Stuff

  • roll call
  • assignments
  • office hours: See the syllabus and the Calendly link there. Please stop by!
  • tutor: Maya Mau: Tuesdays 6pm-8pm in L043.

To Do