CSCI 3820

News

Student work

General Information

• Meets: TR 9:30-10:45 in RH 117
• Instructor: Dr. Bryan Clair
• Syllabus: syllabus.pdf
• Textbook: Angel and Shreiner, Interactive Computer Graphics: A Top-Down Approach with WebGL (7th Edition), Addison-Wesley, 2015.

Resources

Demo programs from class

• Transform: Demonstrate canvas transforms.
• SpinSquare: Demonstrate canvas animation.
• SpinCube: Spinning cube with three.js.
• OrbitExample: Full screen with orbital controls.
• Geometry: Cone and TriForce built with vertices and faces.
• Airplane: Scene graph and object transformations.
• Cameras: Perspective and Orthographic cameras. Also uses keyboard controls.
• Loaders: Teapot (Wavefront .obj files), Clocktower (Collada .dae files)
• Textures: Texture, Filters.
• Shaders: Simple, Single-page, Lambert.
• Raytrace: three.js RaytraceRenderer
• Device Orientation: control camera with mobile phone. Raw HTML5 data.
• Points, StarField : Using Points in three.js
• Controls: FirstPersonControls, PointerLockControls (better, but less compatible)
• Sound: Bomb (hit space).

Textures, Models

• three.js related source files on turing.
• A few 3D models and textures on turing.
• Google 3D Warehouse
• www.filterforge.com (most with normal and bump maps). Blender textures. Cubemaps at Humus, and some skybox textures.

References

• HTML Canvas reference and tutorial at w3schools.com.
• threejs.org
• three.js source code repository, and especially the javascript code from examples, including loaders.
• Three.js examples: Stemkoski
• MDN JavaScript tutorials and references
• Google Hosted Libraries. Why or why not use a CDN?
• WebGL Experiments
• Introduction to Computer Graphics textbook, by David J. Eck
• GLSL references: Shaderific, GLSL specification
• Human color vision.
• Examples of stereoscopy with anaglyph, side-by-side, and magic eye techniques.

Reading

• 1/12: Angel, Chapter 1
• 1/21: Angel, Chapter 2.4-2.7. Learn about polygons, triangulation, color, projection, clipping, viewport, aspect ratio.
• 1/26: Angel, Chapter 9. Learn about modeling and the scene graph.
• 2/2: Angel, Chapter 4.3, 4.7-4.10. Coordinate systems, transformation matrices.
• 2/4: Angel, Chapter 5-5.7. The camera model.
• 2/11: Angel, Chapter 7.3-7.5. Textures and filtering.
• 2/23: Angel, Chapter 6. Lighting and shading.
• 3/15: Angel, Chapter 7.7-7.9. Environment, reflection, normal maps.
• 3/29: Angel, Chapter 12.1-12.3. Ray-tracing.

Programming Assignments

1. Due Tuesday 1/19 (pa1.pdf): HTML5 canvas programming with JavaScript. forest, signal, bounce.
2. Due Tuesday 2/2 (pa2.pdf): three.js object modeling. table, sierpinski, orrery.
3. Due Tuesday 2/9 (pa3.pdf): views. Written portion (pa3-written.pdf): some matrix transformation math.
4. Due Thursday 2/18 (pa4.pdf): Loading models and using textures. teapot, train.
5. Due Thursday 3/3 (pa5.pdf): Phong shader.
6. Due Tuesday 3/22 (pa6.pdf): Still life.