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
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
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
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
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
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)
[email protected]
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
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
Non-Linear Approximation of Reflectance Functions
Eric P. F. Lafortune
Sing-Choong Foo
Kenneth E. Torrance
Donald P. Greenberg
Program of Computer Graphics
Cornell University
Abstract
We introduce a new class of primitive functions with non-linear param
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
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
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
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
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
@ @
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
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
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
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
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
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
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
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
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
/ cuon-utils.js (c) 2012 kanda and matsuda
/*
* Create a program object and make current
* @param gl GL context
* @param vshader a vertex shader program (string)
* @param fshader a fragment shader program (string)
* @return true, if the program object was