\( \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]} \)

CS307: Introduction to Computer Graphics and Getting Started with Three.js

What is CG?

  • it's not drawing/painting with the computer
  • it's modeling and rendering

What are some common applications of CG?

(Here's a peek at some examples...)

CS307 Final Projects

A few past student project demonstrations and snapshots:

You can also view some fun demos at the Three.js website

Basic Concepts

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

  

What do we need to model in order to render a barn?

This highlights some fundamental concepts of computer graphics:

  • Object modeling e.g. 3D curves and surfaces
  • Camera placement and shape of viewed region
  • Material
  • Lighting
  • Texture mapping
  • Animation
  • User Interaction

We'll introduce some of these concepts with a simpler rendering of the CS307 barn.

Graphics Hardware and Terminology

Graphics Computer:

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

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

Our software will construct a 3D model of our object or scene, typically as a collection of vertices, faces, surfaces, control points, and so on. These will be sent to the graphics card, which will render the scene as a raster image of pixels. These are written into the framebuffer, 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 an image defined by a rectangular grid of pixels.
  • Raster and rasterization are the rectangular grid of pixels and process of computing these pixels from a 3D model of the scene. The framebuffer holds the raster image.
  • Color or bit depth determines 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 is the number of pixels across each dimension of the display - the greater the number of pixels, the more fine detail can be displayed.

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 version R95, which is also used in the Third Edition of Dirksen's book (2018), but the Three.js website has already evolved beyond this! Using rapidly evolving software has advantages, but also disadvantages!

If you don't know JavaScript, now is an excellent time to learn! Scott wrote a Crash Course on JavaScript that covers the essentials of JavaScript needed for this course (and a bit more!) 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

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. I'll be using Visual Studio Code or Atom on my Mac, but you can work on a Mac or PC. Visual Studio Code is installed on the Macs in the SCI L180 classroom.

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.

To Do for the Next Class