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

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

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.

  • Line geometry materials - LineBasicMaterial and LineDashedMaterial.
  • Exercises - Lines and dashed lines. Optional - Deform a box using a vertex shader.
  • Basic 2D geometries provided by three.js - Plane, Circle, Ring, and Shape. Bezier and spline curves.
  • Basic 3D geometries provided by three.js - Box, Sphere, Cylinder, Torus, TorusKnot, and Polyhedron.
  • Regular polyhedron geometries provided by three.js - Tetrahedron, Octahedron, Dodecahedron, and Icosahedron.
  • Readings - Chapters 4 & 5.
Assignment 4
  • Introduction to "advanced" 3D geometries provided by three.js.
  • Convex (Hull), Lathe, Extrude, and Tube (with SplineCurve3) geometries.
  • Extruding from Scalable Vector Graphics (SVG) definitions.
  • Parametric equations and THREE.ParametricGeometry.
  • Creating 3D text using TextGeometry. Rendering 2D fonts as textures using HTML5 canvas (chapter 10).
  • Using custom fonts. Converting OpenType or TrueType fonts to JavaScript.
  • Wrapping meshes in ThreeBSP objects and applying binary operations - intersect, subtract, and union (can also use more efficient Geometry.merge - chapter 8).
  • Readings - Chapter 6.

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


Spring Break

  • Sprites (particles) and point cloud (geometry only showing vertices). Trade-off between performance and controls over individual particles.
  • Using HTML5 canvas functions to create textures ← Web programming contents.
  • Sprites - Using an HTML5 texture from an HTML5 canvas to style THREE.SpriteMaterial.
  • Point cloud - Using an external image file or the HMTL5 canvas output to style THREE.PointCloudMaterial.
  • Using sprite maps. Loading texture files (more in chapter 10).
  • Creating point cloud from basic and "advanced" geometries.
  • Readings - Chapter 7.

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.

Team project - Design and implement an animated 3D scene for the web.
  • Difference between "group" and "merge" meshes.
  • Loading geometries from external files. File formats. Saving and loading in JSON.
  • Installing Three.js exporter in Blender. Loading and exporting a model from Blender.
  • Loading 3D models from external files. File formats. Example - Showing proteins from Protein Data Bank.
  • Readings - Chapter 8.

Exam 2 on Wednesday. Covering weeks 7-11.

  • Animation review. Selecting objects.
  • Animating with Tween.js, a small JavaScript library.
  • Controls - Camera, Trackball, Fly, Roll, FirstPerson, and Orbit.
  • Morphing and skeletal animation. Bones and skinning. Using external models.
  • Readings - Chapter 9.

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.

Working on team project.
  • Loading textures and applying to meshes.
  • Maps and their applications - normal, light, environment, and specular.
  • Custom UV mapping. Repeat wrapping. Rendering to canvas and using it as a texture. Video textures.
  • Effects made possible by render post-processing and custom shaders.
  • Readings - Chapters 10, 11.
Working on team project.
  • Introduction to the physics engine. Adding "physics" and sounds to a three.js scene.
  • Final 3D web graphics team project presentations.
  • Readings - Chapter 12.

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


Final Exam Week.

Final project file(s) due by 11pm on 4/23.