christopher peters - kth · #1: euler angles an euler angle is a rotation around a single axis any...

36
DH2323 DGI13 INTRODUCTION TO COMPUTER GRAPHICS AND INTERACTION Christopher Peters HPCViz, KTH Royal Institute of Technology, Sweden [email protected] http://kth.academia.edu/ChristopherEdwardPeters IMAGE-BASED RENDERING AND ANIMATION Based on DGI12 notes by Carl Henrik Ek

Upload: others

Post on 12-Jun-2020

15 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

DH2323 DGI13

INTRODUCTION TO

COMPUTER GRAPHICS ANDINTERACTION

Christopher PetersHPCViz, KTH Royal Institute of Technology,

[email protected]://kth.academia.edu/ChristopherEdwardPeters

IMAGE-BASED RENDERING AND ANIMATION

Based on DGI12 notes by Carl Henrik Ek

Page 2: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Graphics Pipeline Architecture

2013 Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Can divide pipeline into three conceptual stages:Application (input, animations, think SDL)Geometry (transforms, projections, lighting)Rasteriser (draw image as pixels)

These define the core structure of the pipeline

Application Geometry Rasteriser

Page 3: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Geometry Stage

2013 Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Responsible for polygon and vertex operationsConsists of five sub-stages:

• Model and View Transform• Lighting and Shading• Projection• Clipping• Screen Mapping

Model and View Transform

Lighting Projection Clipping Screen Mapping

Page 4: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

http://kth.academia.edu/ChristopherEdwardPeters

Page 5: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

I.Image-based Rendering

2013 Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Page 6: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Image-based Rendering

X constitutes:– Geometry– Texture– Lighting– Material

Parameterisation of the 'world'

2013 Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Page 7: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Image-based Rendering

How does f(.) manipulate X?– Light– Surface interaction– Light transport

Formulate model f(.) through assumptions

2013 Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Page 8: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Image-based Rendering

Computer Vision– Image easy to acquire– Solve inverse problem– What parameters have

generated the image?

2013 Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Page 9: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Image-based Rendering

Challenge:Given an image recover the parameters

– Texture– Light– Geometry

Models still valid– x

i = f-1(y

i)

2013 Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Page 10: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Image-based Rendering

Rendering: generate images from viewpointsImage-based rendering: replace geometry and material attributes with real images

Most realistic image? A photograph– Lacks flexibility– Cannot change lighting or viewpoint– Combine images to produce a new one

2013 Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Page 11: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Epipolar Geometry

The geometry of stereo visionTwo cameras viewing 3D scene from different positionsStudy geometric relations between 3D points and their 2D projectionsMore images = more constraints

2013 Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Page 12: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

II.Animation

2013 Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Page 13: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Animation

BasisShowing consecutive related static images one after another produces the perception of a moving imageTraditional AnimationMaster artists draw certain important key-frames in the animationApprentices draw the multitude of frames in-between these key-framesCalled tweens

Page 14: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

In Practice

For computers animation:Object has an initial configuration and a final configuration (often specified by the artist)

Computer must figure out the intermediate configurations: interpolation

Orientation Interpolation:Given two key-frame orientations, figure out an intermediate orientation at a certain point between them

Possible solutions: Euler angles and rotation matrix interpolation

Page 15: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

#1: Euler Angles

●An Euler angle is a rotation around a single axis●Any orientation can be specified by composing three rotations

● Each rotation is around one of the principle axes● i.e. (x, y, z) – first rotate around x, then y, then z● Think of roll, pitch and yaw of a flight simulator

●When rotating about a single axis, is possible to interpolate a single value

● However, for more than one axis, interpolating individual angles will not work well

● Unpredictable intermediate rotations● Gimbal lock

Page 16: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

#2: Rotation Matrices

Interpolating between two rotation matrices does not result in a rotation matrix

– Does not preserve rigidity of angles and lengths– This result of an interpolation of 0.5 between the

identity matrix and 90 degrees around the x-axis does not produce a valid rotation matrix:

Page 17: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Solution

●Use quaternion interpolation●Quaternions don’t suffer from Gimbal lock●Can be represented as 4 numbers instead of 9 of a 3x3 matrix●Trivial conversion between angle/axis representation●Interpolation between two quaternions is easy (once you know how)●Quaternion looks like this: q[w,(x,y,z)] also written q[w,v] where v = (x,y,z)

q = w + xi + yj + zk

Page 18: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Representation

• For a right-hand rotation of radians about unit vector v, quaternion is:

q = (cos( /2); v sin( /2))

– Note how the 3 imaginary coordinates are noted as a vector

– Only unit quaternions represent rotations• Such a quaternion describes a point on the 4D unit hyper-

sphere

– Important note: q and –q represent the exact same orientation

– Different methods for doing quaternion interpolation:

LERP, SLERP (Spherical linear interpolation)

Page 19: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

In Practice

●Not always the best choice● Quaternions are (as you will have noticed) hard

to visualise and think about● If another method will do and is simpler, it will

be a more appropriate choice●But…

● Extremely useful in many situations where other representations are awkward

● Easy to use in your own programs once you have a quaternion class

● See GLM

Page 20: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

●Determine if two convex objects are intersecting

● Can also test concave objects● To do this, can use convex hull of concave objects,

or specific concave objects collision detection algorithms

●Obtain contact information● Where the objects are colliding / interpenetrating● Other metrics

● E.g. Depth of interpenetration

Collision Detection

Page 21: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Gilbert-Johnson-Keerthi AlgorithmSolves proximity queries between two complex convex polyhedra

Given the two polyhedra:Computes the distance d between themCan also return the closest pair of points on each polygons

GJK Algorithm

Page 22: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

III.Where to next?

2013 Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Page 23: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Shaders and GPU Programming

Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

USC/Nvidia Face Works tech demo

Advice: learn Fixed Function Pipeline firstShading languages include: HLSL, GLSL, CG

Simple GLSL shader example

Page 24: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Middleware

Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Relieve the tedium of recoding everythingAlready used in labs: SDL and GLMMany other libraries and engines availableSome examples:

– GLEW: http://glew.sourceforge.net/– Assimp: http://assimp.sourceforge.net/– ODE: http://www.ode.org/– FMOD: http://www.fmod.org– RakNet: http://www.jenkinssoftware.com/– OGRE: http://www.ogre3d.org/– Torque 3D: http://www.garagegames.com/

Page 25: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Crowds

Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Metropolis Project, GV2, Trinity College Dublin

Aggregate Dynamics for Dense Crowd Simulation, Narain et al.,

UNC, 2010

Page 26: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Toolchains

<- Environment mark-up tool (Metroped)

Results transferred into final rendering client ->

Metropolis Project, GV2, Trinity College Dublin

Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Page 27: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Procedural Cities

Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

ESRI City Engine

Introversion Procedural City Generator

Page 28: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

HCI and Interfaces

Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Virtual Sculpting project supervised by Mario Romero

Page 29: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Real-time Procedural Universe

Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Infinity: The Quest for Earth, I-Novae Studios

Page 30: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Summary

Course taught you the fundamentals of interactive graphics

– You have the basis for learning to do all of the aforementioned

Just requires: – Effort– Time– Long hours of debugging :-(

And remember...

2013 Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Page 31: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

2013 Christopher Peters DH2323 Introduction [email protected]

The (Awful?) Truth

Interactive computer graphics is essentially:

Mathematics programming“It's matrices all the way down!”

Quite possibly the most fun and rewarding maths programming you will ever do

Hopefully you can now see more clearly why this is the case

Page 32: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Thesis Supervision

If you find these topics interesting...Contact me about possible thesis supervisionVIC Studio Stockholm

– Visualization Interaction Collaboration– Eye trackers– Kinects– And much more...

2013 Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Page 33: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

2013

Schedule

Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Page 34: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Links

http://www.pandromeda.com/MojoWorld: planet synthesis

Anderson and Peters, No More Reinventing the Virtual Wheel: Middleware for Computer. Games and Interactive Computer Graphics, Eurographics 2010

Paper on middleware for games and graphics

http://www.youtube.com/watch?v=yI5YOFR1WusIntroversion procedural city generator tech demo

2013 Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Page 35: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Reminders

● You should be registered to DH2323 and also the exam

● You should be finishing Lab 3● Labs due on 16th May

– Bilda DH2323 submission opening soon

● Exam is on 24th May

● Extra exam Q&A session● Mon 20th May, 14:00-15:00, E35

2013 Christopher Peters DH2323 Animation and Image-based Rendering [email protected]

Page 36: Christopher Peters - KTH · #1: Euler Angles An Euler angle is a rotation around a single axis Any orientation can be specified by composing three rotations Each rotation is around

Next lecture

• Guest Lecture: Mario Romero• Human Computer Interaction• Next week (15th May)• 13:00 – 15:00 B3

2013 Christopher Peters DH2323 Animation and Image-based Rendering [email protected]