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?

Let's look 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
Output Devices: typically a monitor, such as a CRT or LCD screen
Input Devices: keyboards, mice, trackballs, video game controllers, etc.

Our software will 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 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.
Vector displays are images that are drawn in a continuous way, by a pen, electron beam, or other device.

Over time, raster graphics won out over vector graphics, and now all graphics is done as a rectangular grid of pixels, each a single spot of pure color.

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 your local machine, using the JavaScript interface to the WebGL system calls. I'll be using Atom on my Mac, but you can work on a Mac or PC.

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.

So Let's Get Started...

Visit this simple scene with a box and save the page to your Desktop as box.html. You can do this by selecting the File>Save Page As... menu item and specifying the file name as box.html and Format as "Webpage, HTML Only".
In a new tab, visit the local file from your browser:
- File>Open File...
- Navigate to Desktop
- Choose box.html

The URL will be something like file:///Users/youraccount/Desktop/box.html

Using the Orbiting Camera Interface

The TW package creates a Three.js Orbiting Camera for the scene, which makes it easy to view your model.

Clicking and dragging with the mouse left/right moves the camera around the model (orbits it), keeping a constant distance from the center. You can also drag up/down but that stops at the poles.
The arrow keys can be used to shift the camera to the left, right, up, or down — this also changes the center of the scene, so that dragging with the mouse then rotates the model around a different point. (Note: in the current version of the OrbitControls code, the up/down arrow keys do not work properly.)
Scrolling your mouse lets you dolly in/out.

Keyboard Commands

TW also defines some keyboard commands:

A "?" prints a list of single-letter commands to the terminal window
The letter "a" toggles an axis helper that shows you the orientation of the model (where the X (red), Y (green) and Z (blue) axes are). The axes emanate from the origin of the coordinate system.
The letter "b" toggles a visualization of the scene bounding box. (This is the bounding box used to set up the camera, not the true bounding box of the scene.)
The lowercase axis letters view the model from that direction: "x" "y" "z"
The letter "o" (for "oblique") views the model from an oblique direction.

Code for the Simple Box

Open the box.html code file in a text editor on your local machine and view the code. These slides capture the essential parts of the code, which we'll review in class.

Now let's add another object using the built-in geometry, THREE.SphereGeometry, with an input that specifies the radius of the sphere:

var sphereGeom = new THREE.SphereGeometry(3);
var sphereMesh = TW.createMesh(sphereGeom);
scene.add(sphereMesh);

Save your modified code file and reload the webpage in your browser (you may want to hold down the shift key while reloading the page). hmmmm.... where is our sphere? Hint: Use your mouse to move the camera inside the box!

Let's move the sphere outside the box so we can see it better:

sphereMesh.position.set(5,0,0);  // x,y,z coordinates of the center

Use the JavaScript Console for Debugging

Our main debugging tool for JavaScript will be the JavaScript Console. To open the JS console in your browser (the process may be different on a PC):

Chrome: Enter command-option-j or select View>Developer>JavaScript Console (enter control-shift-j on a PC)
Safari: If you do not see the Develop menu along the top of the browser window, first go to Safari>Preferences. Select the Advanced tab, and then check the Show Develop menu in menu bar item at the bottom. In the Develop menu, you can then select Show JavaScript Console (shortcut: command-option-c) (this may be control-shift-c on a PC)
Firefox: Enter command-option-k or select Tools>Web Developer>Web Console (control-shift-k on a PC)

Try introducing an error in your code file, reload your webpage, and view the error message(s) in the JS console.

Add a print statement to your code with console.log() — also handy for debugging!

var name = 'Ellen';
var age = 29;
console.log("Hi " + name + ", you're really only " + age + "??");

Be Creative!

In the remaining time, I'll divide you into breakout groups. Within each group, one of you should share your screen with the others. Using the box and sphere geometries, and the ability to position your meshes anywhere in the scene, work together to build on the box.html code file to create a new scene of your own design. Be careful about the size of your objects and coordinates — you might need to change the coordinates specified in the bounding box in order to see everything (e.g. minx, maxx, miny, maxy, minz, maxz). Imagine things like a lollipop, barbell, stack of blocks, toy, snowman, robot, ...

Optional: Check out THREE.ConeGeometry and THREE.CylinderGeometry and add a cone or cylinder to your creation!

To Do for the Next Class

Skim as needed: Scott's JavaScript Crash Course
Reading for Thursday: Introduction to OpenGL/WebGL, Three.js, and the Barn
Submit Sakai Quiz by Wednesday evening at 9:00 pm EST — you'll have an hour to complete the quiz, which is "open book/notes" (no JavaScript questions!)
Sign up for meeting with Ellen in the shared Google doc
Be sure you've installed a decent text editor on your laptop, like Atom