3D Computer Graphics on the Web

Stephanie Contreras '16, Kelsey Reiman '15

Goals:

• Renovate CS307: Computer Graphics
• Use WebGL and Javascript rather than OpenGL and Python
• Create new demos
• Restructure the presentation of lectures

Creating a Program in WebGL:

• Gets very complicated, very quickly!
• You must create shader programs, buffers and render loops and cameras for every scene

Three.js:

• Most of the common objects and functions needed for creating a scene have already been created
• Built-in basic geometries
• Many inspiration examples

Restructuring the Syllabus:

1. Basic Modeling (Low Level - Vertices & Faces)
2. Instance Transformation (High Level Modeling)
3. Material & Lighting
4. Camera
5. Animation
6. Texture Mapping
7. Bezier Curves & Surfaces (Lathe Geometry)
8. Advanced Animations (Apply Physics)
9. Shadows, Reflection, Particle Systems… etc.

We will also add user interaction somewhere in the syllabus after animation.

Basic Modeling and Color

• Basic Geometries (only 2 lines of code!)
• One extra line for color
• Rotate, scale, position…

Advanced Geometries and Curves

• Create lathe Geometries by rotating a spline or Bezier curve around an axis
• Create an extrude geometry by creating a 2 dimensional shape and pushing it out along an axis

Camera

• Change the shape(fovY, near, far), location and lookAt of the camera
• Three.js has built in camera controls such as orbiting and tracking cameras

Material and Lighting

• 4 (technically 3) different types of material for objects
• Phong
• Lambert
• Basic
• Wireframe
• Different Types of Lighting
• Ambient (Basic)
• Diffuse (Lambert)
• Specular (Phong)
• Different Shapes of Lights
• Spotlight
• Directional Light
• Point Light
• Ambient Light (All Objects Equally)

Animation

• Create a render loop that repeatedly calls an update function
• Then update function incrementally changes an aspect of the object you are trying to animate

User Interaction

• Create a series of keyboard and mouse callbacks that allow the user to interact with an object by using the keyboard and mouse
• Eventually implement picking to allow the user to move around objects in a scene with the mouse

Texture Mapping the Solar System

• Texture mapping is the process of taking an image (of your choice) and wrapping it around your object (any object)
• Three.js automatically determines what the best way to map a texture is depending on the geometry of the object you are trying to texture
• Without specifying the UV coordinates, texture mapping in Three.js takes only two lines of code

Texture Mapping - UV Coordinates

• Associate specific texture coordinates with faces of the geometry in order to control how the texture is laid out on the geometry

Cloth Animation

• Plane Geometry
• Bounding Box
• Shadows
• Physics
• Wind Force
• Cloth Mass
• Gravity
• Constraints

Future Topics of Interest

• Loading Objects from Blender and Maya and sharing
• Reflection and Raytracing
• Particle System Animation

Questions?? ¯\_(ツ)_/¯