## Computer Graphics (CS 4143), Summer 2015

### University of Information Technology (UIT), Vietnam

#### July 6 - August 8, 2015

#### Lecture: TRS 8:30 - 11:30 AM, Room A106

#### Web site:

#### Instructor

- Dr. David Cline, Visiting Lecturer
- david.cline@okstate.edu
- Office: A.1B3
- Office hours: 13:30PM - 16:30PM M-F

#### Teaching Assistants

- Thang Cap Pham Dinh, Lecturer of Computer Science Faculty
- Khanh Nguyen Duy, Researcher of Multimedia Processing Lab

#### Texts

- Fundamentals of Computer Graphics, 3rd edition. Peter Shirley and Steve Marschner.
- Programming 3D Appliactions with HTML 5 and Webgl. Tony Parisi.

#### Course Objectives

This class covers both computer graphics theory and practical programming using OpenGL. The theory part of the class will follow chapters 1-12 of the Shirley book. Theoretical topics include:

- Points and vectors
- Rasterization
- Simple ray tracing
- Transformation matrices
- Viewing
- Shading and lighting
- Texture mapping
- Data structures for graphics

We will be doing the programming assignments in WebGL, which uses Javascript as the interfacing language, and GLSL as the shading language. Practical topics include:

- HTML5
- The Canvas element, and initializing a WebGL context
- GLSL Shader implementation
- Three.js
- Meshes, Textures, and other assets
- Multipass rendering

#### Assignments

- Homeworks
- There will be 4 written homeworks during the term to help you cement your knowledge of the concepts and algorithms presented in class, and to help prepare you for the tests. These are indicated by (H) on the schedule.

- Code Projects
- During the semester there will be 5 coding assignments, using Javascript, WebGL, and Three.js.

- Tests
- This class has a final test. The final will cover essentially the same content as the homeworks, and will be administered on 3/8/15.

#### Links to the assignments

- (P) First Shaders
- (H) Vectors, Normals, and such, key
- (H) Ray Tacing, key
- (P) Ray Tracer Enhancements
- (H) Matrices and Transforms
- (P) Javascript Model Viewer
- (P) Advanced Shaders
- (H) Graphics Pipeline and Shading
- (P) Multipass Effects

#### Homework Keys

#### Links to web resources

- (https://github.com/tparisi/Programming3DApplications) Github repository for Parisi code
- (http://learningwebgl.com/blog/) Tutorials for beginning WebGL
- (http://threejs.org/) Has Three.js documentation, and links to some impressive demos
- (http://learningthreejs.com/) A site about Three.js techniques
- (https://www.shadertoy.com/) A site about writing interesting shaders
- (http://webgl.com/) A site about learning WebGL and related technologies
- (Learning modern OpenGL) An online book about OpenGL
- (http://www.blender.org/) A free modeling tool that can export many model types.

#### Shaders from Dr. Cline

#### Program 1 submissions

- LePhuocMinh.fs
- CaoXuanPhuong.fs
- ChauPhamMinhTung.fs
- DaoDongDurc.fs
- DaoNgocThanh.fs
- DinhCaoPhuoc.fs
- DoHuynhAnhThuy.fs
- DoXuanVin.fs
- HoangDinhLong.fs
- HuynhAnhVu.fs
- NguyenMaiThien.fs
- PhamMinhDurc.fs
- TranThanhHuy.fs
- TranXuanVien.fs
- TrinhXuanSang.fs
- TruongQueAnh.fs
- CaoPhamThanhPhong.fs
- TranDurcAnh.fs
- NguyenKhanhMin.fs
- TruongLeBaoLongCircle6.fs
- TruongLeBaoLongCircle7.fs
- TruongLeBaoLongCircle8.fs
- PhanTuanKhang2.fs

#### Program 2 submissions

- CaoXuanPhuong.fs
- chauPhamMinhTung.fs
- daoNgocThanh.fs
- dinhCaoPhuoc.fs
- doHuynhAnhThuy.fs
- doXuanVinh1.fs
- doXuanVinh2.fs
- lePhuocMinh.fs
- phamMinhDuc.fs
- tranDucAnh.fs
- tranThanhHuy.fs
- trinhXuanSang.fs
- truongQueAnh.fs
- vuHuynhAnh.fs
- CaoPhamThanhPhong.fs
- daoDongDuc.fs
- daoNgocThanhDao.fs
- hoangDinhLong.fs
- nguyenMaiThienTrang.fs
- phamMinhDuc2.fs
- tranXuanVien.fs
- tranThanhHuy1.fs
- tranThanhHuy2.fs
- truongLeBaoLong.fs
- huynhAnhVu.fs
- PhanTuanKhang1.fs
- nguyenKanhMinh2.fs

#### Grade Breakdown

- Written Homework: 20%
- Programs: 50%
- Tests: 30%

#### Tentative Schedule

Readings beginning with an “s” indicate the Shirley book. Readings beginning

with a “p” indicate the Parisi book.

Date | Reading | Topics | Assignments |
---|---|---|---|

7/7/15 | s2 | Points, Vectors, Colors | |

s2 | Interpolation and Triangles | ||

p2 | HTML5, Javascript, WebGL Basics | ||

9/7/15 | s3 | Raster Images | |

Javascript and WebGL | |||

GLSL (Shaders) | (H) Vectors, Normals and Triangles | ||

11/7/15 | s4 | Ray Tracing | |

s4, s13 | Ray Object Intersection | ||

Lighting Models | (P) First Shaders | ||

14/7/15 | s5 | Matrices | |

s6 | Transforms | ||

Ray tracing in shaders (basicVertexShader.vs, rayTracer1.fs) | (H) Ray Tracing | ||

16/7/15 | s7 | Viewing | |

s7 | Perspective | ||

Ray tracing work session | (P) Ray Tracer Elements | ||

18/7/15 | Math review | ||

p3 | Javascript and Three.js | ||

p3 | Three.js (basicObjectLoader.html) | (H) Matrices and Transforms | |

21/7/15 | s8 | Graphics pipeline in theory | |

p4 | Rendering in Three.js | ||

p4 | Rendering in Three.js | (P) Javascript Model Viewer | |

23/7/15 | s10 | Traditional Shading | |

s11 | Texture Mapping | ||

Advanced Shading | |||

25/7/15 | s12 | Data structures for graphics | |

Multipass effects | |||

s17 | Animation techniques | (H) Graphics Pipeline and Shading | |

28/7/15 | p5 | Animation in Three.js | |

p8 | 3D content pipeline | ||

Final review, Math sheet | (P) Advanced Shading | ||

30/7/15 | Practice Final | ||

3/8/15 | (T) Final Exam | ||

3/9/15 | Multipass Work session | (P) Multipass Effects |