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" meshes using THREE.Group and "merge" geometries using THREE.Geometry.merge.
  • Saving and loading a mesh/scene in three.js JSON using HTML local storage API. JSON String ↔ JS Object ↔ Mesh/Scene.
  • Creating meshes using programs (chapters 5, 6, & 8) ↑ or using modeling software exports (chapter 8) ↓.
  • Adding and enabling three.js exporter in Blender. Loading a model in Blender and exporting it in three.js JSON. A few other formats are also supported by both.
  • Loading geometries from external 3D file formats → Import loader & load file to meshes in a tree structure.
  • Demo for three.js supported file formats - OBJ, MTL, Collada, STL, CTM, VTK, PDB, PLY, AWD, Assimp, VRML, and Babylon.
  • Note exporting mesh/scene from three.js is a feature under development.
  • Readings - Chapter 8.

Exam 2 due by 11pm on Wednesday.

  • Working on the final team project on Monday.
  • Animation review → 1. Change parameters & render. 2. Schedule the next rendering.
  • Selecting objects. Using THREE.Vector3 to unproject and THREE.Raycaster to cast a ray from the camera to objects.
  • Animating with Tween.js, a small JavaScript library. Easing options.
  • Manually animating the camera. Camera controls - Trackball, Fly, Roll, FirstPerson, and Orbit. Other camera controls.
  • Morphing with morph targets. MorphAnimMesh object for automatic animation. Manual animation using the morphTargetInfluences property.
  • Skeletal animation. Bones and skinning. SkinnedMesh object. SkeletonHelper object.
  • Using external models that support animation. Demos – Blender JSON model, Collada model, and MD2 model.
  • 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 mesh materials. Filters and mipmaps.
  • Standard image formats – PNG, GIF, and JPEG. Custom loaders for DDS, PVR, and TGA formats.
  • Using bump map (1D info) and normal map (2D info) to generate wrinkles and bumps.
  • Light map → static fine shadows. Environment map → reflections & refractions. Specular map → color highlights.
  • Custom UV mapping in Blender and three.js programs. Repeat wrapping.
  • Using HTML5 canvas rendering as the texture. Video textures using the HTML5 video element and the THREE.VideoTexture object.
  • Readings - Chapter 10.
Working on team project.
  • Postprocessing with fragment shaders. EffectComposer – Create, config, and render.
  • Built-in effect passes – Bloom, DotScreen, Film, and Glitch.
  • Using RenderPass to render. Using TexturePass to store a composer state and reuse it with other composers.
  • Using MaskPass to apply passes to a specific area or an inversed area.
  • Using ShaderPass to generate custom effects. Built-in shaders – Basic, blur-related, and "advanced".
  • Creating custom shaders. Examples – Grayscale shader and bit shader. More information. More Examples.
  • Introduction to the physics engine "physijs" and spatial sound.
  • Wrapping geometries and materials in "physijs" to add gravity, collisions, friction, elasticity/restitution, etc.
  • Available constraints - Point, Hinge, Slider, ConeTwist, and DOF (Degree Of Freedom).
  • Readings - Chapters 11, 12.

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

Final 3D web graphics team project demos.

Final Exam Week.

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