EECS 351-1: Intro to Computer Graphics
Project B: 3D Views & Shading
Instructor: Jack Tumblin
Winter 2015
CHANGES FROM VERSION 5 HIGHLIGHTED IN BLUE
Your mission in Project B is to fill the Canonical View Volume (CVV) of WebGL with the view seen by a 3D
c
A Reflectance Model for Computer
Graphics
ROBERT L. COOK
Lucasfilm Ltd.
and
KENNETH E. TORRANCE
Cornell University
A new reflectance model for rendering computer synthesized images is presented. The model accounts
for the relative brightness of different
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Matrix Duality
+
Scene Graphs:
How to Build Trees of
Transformations
Jack Tumblin EECS 351
Jan 13, 2016
Stuff
(uses a few re-worked slides
by Andries van Dam)
Andries van Dam
September 11, 2008
Transformations 1/33
INTRO
Better Geometry:
Data Structures to
Organize A Mesh
Jack Tumblin
Northwestern Univ EECS
Jan 22, 2016
3D objects
faces
edges
vertices
Q: At any given vertex, how should we compute the surface normal vector?
( to just one face? Which one? to the ideal spher
EECS 351-1: Intro to Computer Graphics
Project A: Moving Shapes
Instructor: Jack Tumblin
Winter 2016
Your mission in Project A is to use WebGL and HTML-5 to:
a) Draw several moving, turning, jointed colored shapes with openGLs basic drawing primitives
(va
Sequencing For Vertex Arrays
in WebGL
Jack Tumblin
Northwestern Univ EECS
July 12, 2015
3D Vertex Ambiguity ?
A vertex is ONE labeled geometric location
with ONE set of attributes
ONE point location,
ONE color,
ONE surface normal direction
ONE texture add
Quaternions
for elegant control of 3D Rotation
Slides from Ian Horswill, Northwestern Univ.
Revised/Adapted by Jack Tumblin 1/2015
How shall we represent rotation in 3D?
Several ways seem obvious & familiar:
Rotation axis plus angle of rotation, or
A si
EECS 351-1: Intro to Computer Graphics
Project B: 3D Views & Shading
Instructor: Jack Tumblin
Winter 2016
Your mission in Project B is to fill the Canonical View Volume (CVV) of WebGL with the view seen
by a 3D camera that users fly like an airplane, free
A Big GUI Mess, Part 1
or: How to Control WebGL
with Mouse, Keyboard & Browser
Jack Tumblin
Northwestern Univ EECS
Jan 06, 2016
YIKES! Non-Causal Teaching?!?!
From Day 1; >4 unfamiliar languages:
HTML-5, its Canvas object (?)
JavaScript (or ECMAscript WHU
1 (HHPHR tour
\/ ' Platonic olids
NOVEMBER 1
t is not often that major longstanding theories in geometry are over
thrown. Since the time of Plato, it has been thought that there were only
ve regular solids. Recently, however, James Arvo and David Kirk of
Quaternions Part 2:
Smooth Interpolation
Original slides by Ian Horswill, Northwestern Univ.
Modified by Jack Tumblin 1/2015
RECALL: Four Important Definitions
Define the quaternion q as:
= + + +
= +
Define the conjugate of as:
=
1
= + + +
2
Define
EECS 351-1 : Introduction to Computer Graphics
Building the Virtual Camera
ver. 1.5
3D Transforms (contd):
We havent yet explored ALL of the geometric transformations available within a 4x4 matrix.
-All fit in a 4x4 matrix, suggesting up to 16 independent
@ @
Computer Graphics, Volume 25, Number 4, July 1991
A Comprehensive Physical Model
for Light Reflection
Xiao D. He
Kenneth E, Torrance
Frangois X. Sillion
Donald P. Greenberg
Program
of Computer
University
Ithaca,
NY 14853
Abstract
A new general reflect
The OpenGL ES Shading Language
Language Version: 1.00
Document Revision: 17
12 May, 2009
Editor: Robert J. Simpson
(Editor, version 1.00, revisions 1-11: John Kessenich)
ii
Copyright (c) 2006-2009 The Khronos Group Inc. All Rights Reserved.
This specifica
How Demo Day Works (1)
Find and/or Change to Correct Seat; Get Ready!
Sit in odd rows only: rows 1, 3, 5, 7, 9,
Keep even rows EMPTY: rows 2, 4, 6, 8,
Self- organize into 3*N rows, equally full
IMPORTANT: !equalize rows!
count
count
how many students a
HOW TO
Transform Surface-Normal Vectors
(TL:DR: M-T)
Normal vectors don't transform in the same way as vertices, points, or position vectors.
Mathematically, it's better to think of normal vectors not as vectors, but as planes perpendicular to those vecto
Mathematics
for 3D,Game Programming
and Computer Graphics
Third Editio
Eric Lengye Mathematics for
3D Game Programming
and Computer Graphics
Third Edition
Eric Lengyel
Course Technology PTR
A part of Cengage Learning
; COURSE TECHNOLOGY
I h CE NGAGE Learn
Welcome!
EECS 351-1 Intro to Computer Graphics
MWF 10AM LR-5 in Tech (Section 20)
MWF 2PM LR-2 in Tech (Section 21)
Jack Tumblin
(Assoc Prof., EECS)
j-tumblin@northwestern.edu
Ford Design Center 3-341 (top floor NW)
Office hours: after every class + by
(HHPHR THREE
stedlrans ormation
and Blobbq [Han
OCTOBE
here are a lot of interesting things you can do with transformation
matrices. Later chapters will deal with this quite a bit, so I will spend
some time here describing my notational scheme for neste
EECS 351 : Introduction to Computer Graphics
Points, Vectors, Vertices & Coordinate Systems
Jack Tumblin, ver. 1.6
Task 0: Write your first WebGL program of your own using Chap 1,2 WebGL Programming Guide.
Search for interesting 2D/3D geometric patterns a
Welcome!
EECS 351-1 Intro to Computer Graphics
MWF 10AM Ryan Aud. in Tech
Jack Tumblin
(Assoc Prof., EECS)
j-tumblin@northwestern.edu
Ford Design Center 3-341 (top floor NW)
Office hours: after every class + by appt.
Paul Olczak (Oal-Chack) (Ph.D candi
A Big GUI Mess
How to Control WebGL
with Mouse, Keyboard & Browser
Jack Tumblin
Northwestern Univ EECS
Jan 26, 2015
Control is the Goal
Keyboard
Mouse
Operating System
Windowing System
Browser
HTML-5
JavaScript
WebGL
GLSL-ES
Screen
Speaker
2
MO
Better Geometry:
Data Structures to
Organize A Mesh
Jack Tumblin
Northwestern Univ EECS
Jan 26, 2015
Are Triangles Lists Enough? no.
Renders Lists of Triangles in parallel, independently
Good for fast beautiful rendering in WebGL/OpenGL
BAD for shape c
EECS 351-1 : Introduction to Computer Graphics
Phong Local Lighting and Simple Materials in WebGL
Jack Tumblin, 2015.02.24 revision
Illumination and Materials Problems:
If I draw a solid 3D shape (e.g. cube) with the same color at each vertex in WebGL, th
NetID_Name_
Test B: Moving 3D Views
100 pts total, 7% of grade
February 27, 2015
(Original image courtesy http:/www.booncotter.com/hive/mouseToWorld_problem.jpg (I modified it)
We wish to create a 3D special-effects computer system for live television bro
Page1 of 5
CS351 Introduction to Computer Graphics
Test A: Shape
100 pts max.
Feb 5, 2015
NetID_Name_
(netID is 6 letters + 6digits, e.g. jet861)
INSTRUCTIONS: Edit this file in Microsoft Word or in Google Docs to enter your HIGHLIGHTED
answers. Upload yo
Want to learn more computer graphics next quarter?
COURSE TITLE: EECS 395/495
Intermediate Computer Graphics - Tumblin
CATALOG DESCRIPTION:
(to become CS351-2) Second in a
3-course series on the methods and
theory of computer graphics, this
project-orient
Very Simple Lighting
Some slides modified from: David Kabala
Others from: Andries Van Damm, Brown Univ.;
David Kilgard, nVidia.
What is Color? What is Light?
What is Light?
Simple Answers:
Visible Light =
Radiative transfer of
electromagnetic energy
(at v
A Big GUI Mess, Part 2
or: How to Control WebGL
with Mouse, Keyboard & Browser
Jack Tumblin
Northwestern Univ EECS 351
Jan 08, 2016
Control is Still the Goal
Keyboard
Mouse
Operating System
Windowing System
Browser
HTML-5
JavaScript
WebGL
GLSL-ES
Page1 of 5
CS351 Introduction to Computer Graphics
Test A: Shape
100 pts max.
Jan 31, 2016
* * * SOLUTION * * *
NetID_Name_
(netID is 6 letters + 6digits, e.g. jet861)
INSTRUCTIONS: Edit this file in Microsoft Word or in Google Docs to enter your HIGHLIGH
How to Build a Tetrahedron
in WebGL
Jack Tumblin
Northwestern Univ EECS
Feb 17, 2016
How to Build a Tetrahedron: TOUGH
4 nodes (locations for vertices) equidistant from origin, and
all 4 nodes equidistant from each other (distance R), and
6 edges (between
EECS 351 : Introduction to Computer Graphics
3D Geometric Operations
Jack Tumblin, ver. 1.7
RECALL we defined a (geometrical) vector as the result of subtraction of 2 points; it has direction
and length, but no position. What happens when we apply additio
Phong Lighting & Materials
Some slides modified from: David Kabala
Others from: Andries Van Damm, Brown Univ.
Lighting and Shading
Lighting, or illumination, is the process of computing
the intensity and color of a sample point in a scene
as seen by a vie
EECS 351-1 : Introduction to Computer Graphics
Building the Virtual Camera
ver. 1.5
3D Transforms (contd):
We havent yet explored ALL of the geometric transformations available within a 4x4 matrix.
-All fit in a 4x4 matrix, suggesting up to 16 independent