Weeks 7 - 9

Quiz #1 -- Tuesday October 17th!!
Filter examples from lecture
Assignment 3 - Monday October 17th (relevant to quiz)

New examples in ThreeJS Elements

Part of WebGL/ThreeJS: introduction to shaders (from Paul Lewis with Aerotwist and Google), Intro to pixel shaders (from Felix Turner with Airtight Interactive)

Text as text: visual entendre (typographic puns) -- consider accessibility

Use of transparency and reuse of vertices in a geometry
animation of vertices shared by faces
transparency, shininess, and different textures per face

Replicate 3D examples

Assignment #4: Due Tuesday October 31. 
  1. Following examples from class, take the code from the example at https://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene and get it working from your own web space. -- This will involve in either pointing the .js script to https://threejs.org/build/three.js or to my copy of the script at http://srufaculty.sru.edu/david.dailey/cs456/three.js .
  2. Examine and understand examples I explained in class at ThreeJS Elements (observing how texture, timing, and positions of objects and cameras have been changed).  Let me know if there are things in those examples that you don't understand, or if there are additional topics you're curious about.
  3. Create some new objects in this scene, and play with timing, position and camera locations.
  4. See if you can apply new textures, new colors to the faces of the objects, and new shapes (other than rectangular solids), including some of your own design (e.g. not prefabricated).
  5. Build a 3D object in ThreeJS that looks (as much as possible) like this example (to be posted by Tuesday October 24th). Credit is given for attention to colors, shading, and geometry of all faces as well as of the background. 

Rotation using matrices
Homogeneous coordinates (as used in transforms) 
example with 3 x 3 matrices (affine transformations)

Fabric (earlier from 2012)
Spheres (extra credit to the first one who can get it working -- even sort of (as in having the spheres appear as more than ovals) -- in Chrome)
Using Replicate across 3D (example1, example2)