CSE 470 Class Log

Introduction to Computer Graphics
CSE 470
Arizona State University

Spring Semester 2018
M, W, F, 9:40 - 10:30, CAVC 351

Instructor:
Dianne Hansford, Ph.D.
dianne.hansford@asu.edu
Office: BYENG M1-02
Office Hours: T & TH 10:45 - 11:45 and by appointment

Teaching Assistant:
Siddhant Prakash
Email: sprakas9@asu.edu
Office hours: T, TH 11 - 12 in BYENG M1-28

home

class log

Date	Topics	Materials
Week 1 8 Jan	* Introduction to course: syllabus, class log, BB * DCH * Is your browser ready to get started?	Helpful links Course Introduction ppt Check if your browser supports WebGL
10 Jan	* CG Overview * What is CG? + History	Real-time Computer Graphics Overview ppt Angel_WhatIsCG_History ppt
12 Jan	* Image Formation * WebGL Example	Angel_ImageFormation ppt Angel_WebGLexample_JS ppt (We will use "simpleSquare" below instead of "triangle") Recommendation: create a folder for codes simpleSquare.zip unzip and save in folder called simpleSquare Common.zip unzip and save these files in folder Common at same level as simpleSquare

Week 2 15 Jan	MLK Holiday -- No class
17 Jan	* Continue with simpleSquare * More WebGL basics * More examples: Sierpinski gasket	WebGL Application Organization Angel_WebGLexample_JS ppt
19 Jan		ModelsArchitecture ppt FirstProgram1 ppt FirstProgram2 ppt Sierpinski gasket programs zip HW 1 Assigned

Week 3 22 Jan	* HW 1 Q&A + Programming Tips * Added to Help section below * Correction: indexed arrays * gasket4: 3D, zbuffer hidden surface removal * zbuffer: demo program * ppt material	Sierpinski Gasket/Triangle - Wikipedia -- FYI Gasket 2D ppt Gasket 3D ppt Zbuffer.zip Programming Tips BackgroundOpenGL ppt(slide 9+) ArchitectureWebGLBasics ppt glClear and bitmasks
24 Jan	* Shaders * Primitive Attributes	Shaders ppt Shaders_GLSL ppt PrimitiveAttributes ppt Tumblin_GLSL_Basics.pdf ShaderDetails ppt -- FYI Index Color - Wikipedia (interesting) AnimationInteraction.zip (Angel Chap 3)
26 Jan	* Interaction and Animation	InputInteraction.ppt Callback.ppt EventListener.ppt (Demo RotatingSquare{1,2,3})

Week 4 29 Jan	* More on Interaction and Animation -- drawing more than one primitive -- resize window -- click and add point to canvas	PositionInput.ppt Picking.ppt -- FYI Events RotatingSquarePlus.zip
31 Jan	* Basics of Geometric Objects	HW 1 Due Geometry.ppt
2 Feb	* Basics of Geometric Objects	ViewingPipeline.ppt ViewingLookAt.pdf VectorSpaceBasis.ppt HomogenCoordsCamera.ppt
		new! Coordinate Systems Notes
Week 5 5 Feb	* Viewing LookAt continued * Transformations * A peek at MV.js	LookAt and Projection Slides Transformations.ppt WebGL_Transformations.ppt Cube Transformation Demo zip ApplyTransformations.ppt (skip Quaternions) Column major and row major reference
7 Feb	* Transformations con't * Projections	cube.zip RotatingCube ppt Camera ppt
9 Feb	* HW Infos * Projections + LookAt * Demo	HW 1 Grades + Discussion HW 2 Out: pdf + js file MeshDataStructure ppt ProjectionTypes ppt PerspectiveMath ppt CameraProjection codes zip

Week 6 12 Feb	* NEW! Student Gallery at bottom of this page * Projections and Normalization * More code demos NOTE: No TA office hours on Tuesday 2/12	OrthogonalProjection.ppt PerspectiveProjections.ppt LookAt and Projection Slides (see Graphics Pipeline)
14 Feb	* Shadows	Shadows (Code in CameraProjection.zip) Shadow Mapping
16 Feb	* Wireframe Meshes * Mouse rotations * Other fun stuff	PolygonalMeshes Dolly Zoom Gloves: CG History

Week 7 19 Feb	Phong Lighting	Lighting Intro ppt Lighting Detail ppt Teapot material guide
21 Feb	Phong Lighting	Lighting WebGL ppt Setting material properties Lighting/Shading codes zip
23 Feb	Phong Lighting	HW 2 Due Mesh Shading ppt Per Vertex Fragment Shading ppt

Week 8 26 Feb	* Midterm Review	Cube Transformation Demo zip Mock Midterm
28 Feb	* Midterm Review
2 Mar	* Midterm

5-9 MAR	SPRING BREAK

Week 9 12 Mar	Midterms Returned Teapot History Phong Lighting continued	TeapotHistory.pdf Lighting.ppt Mach Bands Midterm Solution
14 Mar	Phong Lighting continued	Culling ppt Cel shading ppt
16 Mar	Phong Lighting continued


Week 10 19 Mar	Phong Lighting continued	3DDataGeneration.ppt HW 3 - updated 3/20 12:30pm (typos and new hw3.html)
21 Mar	Texture Mapping	Buffers ppt Texture Mappping Intro ppt Texture Mapping ppt WebGL Texture Mapping ppt WebGL Texture Mapping 2 ppt Flattening for textures I II
23 Mar	Texture Mapping
	Images as guide for HW3:	cylinderWithNormals.jpg SORwithTriangleMesh.jpg SORshaded.jpg
Week 11 26 Mar	Texture Mapping	Texture Mapping Codes See the Readme file. Use Firefox to view textureCube1 program
28 Mar	Texture Mapping	Vanta black Moire patterns - Andrew Glassner
30 Mar	Texture Mapping	ReflectionEnvMapping ppt Reflection mapping history BumpMap ppt

Week 12 2 Apr	Texture Mapping -- Bump con't -- That alpha thing (transluscent surfaces)	HW 3 Due -- new! CompositingBlending.ppt
4 Apr	Texture Mapping
6 Apr	Hierarchical Models	Hierachical Models 1 ppt Hierachical Models 2 ppt Scene Graph 1 ppt Scene Graph 2 ppt Hierarchical Modeling Code

Week 13 9 Apr	Hierarchical Models
11 Apr	Hierarchical Models	HW 4 updated figure program
13 Apr	Geometry to Pixels	Rendering Overview ppt Clipping Polygon Rend. ppt Rast. ppt Issues ppt

Week 14 16 Apr	Geometry to Pixels con't
18 Apr	Geometry to Pixels con't Ray Tracing (Global Illumination)	Ray Tracing ppt
20 Apr	Subdivision Surfaces Interested in surface contruction? Take CSE 477 in Fall 2018.	Some Subdivision Lecture Slides G Project Subdivision Surface Intro Part 2 Pixar OpenSubdiv (goto 8min)
		Mock Final pdf
Week 15 23 Apr	Student Demos (Honors Contracts) Please come and support your fellow students!	HW 4 Due
25 Apr	* Final Review
27 Apr	* Final Review

30 Apr (Monday)	Final Exam 9:50 - 11:15am in our classroom

Helpful Links

Prof. Angel's website/textbook materials (See errata if you purchased the text)

WebGL	GLSL	JavaScript	HTML	Browser	Linear Algebra
WebGL Fundamentals (my favorite)	WebGL Fund Tutorial	Javascript Tutorial	HTML5 Tutorial	Chrome Dev Tools	"PLA" Slides
Khronos WebGL 1.0 Spec	Khronos Quick Ref (p. 3-4)	Events		Firefox Dev Tools	Animated Linear Alg
Khronos Quick Reference (p. 1-2)	Khronos Full Specs	Mozilla
ChromeExperiments	The Book of Shaders
LearningWebGL.com

Student Gallery
HW 1:
Excel Ortega's extra features and very nice HTML
Gray Olson's animated 3D generalized Sierpinski gasket

HW 2:
Gray Olson correct hw and a very nice html presentation
Thien Duc Phung correct hw and very nice javascript