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

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

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

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

• "Advanced" materials and meshes - Lambert for dull materials and Phong for shiny materials.
• ShaderMaterial with vertex shader and fragment shader. GLSL examples.
• Deprecated/deleted three.js objects and functions.
• Readings - Chapters 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.

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

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

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

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

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