Dr. Zhijun Wang, Professor of Computer Science
♦   Welcome to CIS 405 — Computer Graphics   ♦
Weeks Topics | Resources | Suggested Readings | Special Days | Important Dates HAs | Projects | Exams
#1
1/8-1/12
  • Introduction and syllabus. Course website. Class policies and guidelines.
  • Overview of popular 3D graphics libraries - OpenGL and DirectX. WebGL and three.js. Java3D.
  • Graphics software examples
    1. Adobe Photoshop - raster images
    2. Adobe Illustrator - vector images
    3. Autodesk Maya - 3D modeling
  • "Official" books for OpenGL
    1. Red book - programming guide
    2. Blue book - reference manual (now online)
    3. Orange book - shading language
  • OpenGL fixed pipeline and programmable pipeline.
  • Demos and explanation of basic OpenGL and 2D/3D graphics features.
  • Demo of a WebGL/three.js program. Basic components of a computer graphics scene.

1/08 Mon Add/Drop and Late Registration via RAIL or at Ikenberry Hall, 9:00 am-4:00 pm.

1/12 Fri Last Day to Add/Drop or Late Register via RAIL or at Ikenberry Hall, 9:00 am-4:00 pm.

Assignment 1
#2
1/15-1/19
  • What you need to know — Basic HMTL5, JavaScript, and 3D geometry.
  • What you need to use — A browser/device that supports WebGL. A JavaScript editor such as WebStorm, Sublime Text, Notepad++ (free), etc.
  • Three.js offical site. Creating three.js scenes using a graphical approach.
  • Create a Chrome shortcut for development by using a target of "...chrome.exe" --disable-web-security --user-data-dir.
  • Note OpenGL, WebGL, and three.js, as well as browser/device support, are evolving, sometimes fast.
  • Components of a three.js graphics - scene, camera, and renderer objects. The coordinate system.
  • Geometries, materials, and meshes. Scaling, translation, and rotation. Exercise.
  • Readings - Chapter 1.

1/15 Mon Martin Luther King, Jr. Day – Holiday.

1/19 Fri Last Day for Instructor-Approved Late Adds via RAIL.

#3
1/22-1/26
  • Interaction between lights and materials example - Spot light and Lambert material.
  • Enable shadows. Cast shadows (light sources and objects) and receive shadows (objects). Exercise.
  • The principle of animations. "requestAnimiatonFrame" function. Animating objects by translation and rotation.
  • Rendering time. Frames and frame rate. Stats helper library. Adding animation statistics on screen. Exercise.
  • Experimenting using the "dat.gui" library. Exercise - add controls to the camera.
  • Resizing graphics with the browser window by handling the "resize" event.
  • Readings - Chapters 1 & 2.
Assignment 2
#4
1/29-2/2
  • THREE.Object3D, THREE.Scene, and concept of scene graph.
  • Debug the scene and an individual object using the browser console. Use console.log.
  • Scene functions - "getObjectByName", "add", "remove", and "traverse". "children" property.
  • Add and remove objects from a scene. Count the number of objects. "instanceof" operator.
  • "fog" property. Add linear or exponential fog to the scene. "overrideMaterial" property.
  • Geometries. Vertices and faces (quadrilaterals and triangles). Built-in and custom geometries.
  • Clone a geometry. Exercise - compose a triangle in 3D.
  • Readings - Chapter 2.
#5
2/5-2/9
  • Mesh attributes and functions - position, rotation, scale, translate(X|Y|Z), and visible.
  • Cameras and objects in the 3-dimensional space with OpenGL.
  • Perspective and orthographic views and corresponding three.js cameras. Camera parameters. Application of lookAt points.
  • Exercises - Planet revolution. Lookat point.
  • Light sources in three.js and their behaviors. Create and configure light sources.
  • Basic lights - Ambient, point, spot, directional lights. THREE.Color class.
  • Special lights - Hemisphere and area lights. Lens flare effect.
  • Readings - Chapters 2 & 3.
Assignment 3
Example answer
#6
2/12-2/16
  • Exercises - Stage spot light simulation.
  • Special lights - Hemisphere and area lights. Lens flare effect.
  • Materials provided by three.js. Common material properties - basic, blending, and advanced.
  • Simple meshes - basic, depth, normal, and face (deprecated) materials. Combining materials.
  • Readings - Chapters 3 & 4.
#7
2/19-2/23

Mid-term Exam Week.

2/23 Fri Last Day to Apply for August and December 2018 Graduation (Registrar’s Office).

Exam 1 on Wednesday. Covering weeks 1-6.

#8
2/26-3/2
  • Line geometry materials - LineBasicMaterial and LineDashedMaterial.
  • Exercises - Lines and dashed lines. Optional - Deform a box using a vertex shader.
  • Basic 2D geometries provide by three.js - Plane, Circle, Ring, and Shape.
  • Basic 3D geometries provide by three.js - Box, Sphere, Cylinder, Torus, TorusKnot, and Polyhedron.
  • Readings - Chapters 4 & 5.
Assignment 4 - TBP
#9
3/5-3/9

3/9 Fri Last Day to Withdraw from a Full Semester Class — See Advisor by Noon.

#10
3/12-3/16

Spring Break

#11
3/19-3/23

3/19 Mon First Day of Summer 2018 RAIL Registration for Continuing Students, 9:00 am-4:00 pm.

3/21 Wed First Day of Academic Advisement for Continuing Students for Fall 2018.

#12
3/26-3/30

Exam 2 on Wednesday. Covering weeks 7-11.

#13
4/2-4/6

4/2 Mon First Day of Fall 2018 RAIL Registration for Continuing Students, 9:00 am-4:00 pm.

4/4 Wed Last Day of Academic Advisement for Continuing Students for Fall 2018.

#14
4/9-4/13
#15
4/16-4/20
  • Final 3D web graphics team project presentations.

4/20 Fri McMurran Scholars Convocation; Last Day of Classes; Last Day for Complete Withdrawal from Semester.

#16
4/23-4/27

Final Exam Week.

Final project due by 11pm on 4/23 - Design/implement an animated 3D scene for the web (TBP).