Computer Graphics Seminar MTAT.03.305 Spring 2015 Raimond Tunnel - - PowerPoint PPT Presentation

Computer Graphics Seminar

MTAT.03.305 Spring 2015

Raimond Tunnel

Conclusion

Geometry

• Point – location in space
• Vector – direction in space
• Polygons
• Simple vs non-simple
• Convex vs concave

Front face or back face?

Transformations

• Matrices represent transformations:
• Linear
• Affine
• Projection

? ? ? ? ?

Transformations

• Matrices represent transformations:
• Linear
• Affine
• Projection

Affine transformation Used for perspective projection Linear transformation Translation column Point

Transformations

• Matrices represent transformations:
• Linear
• Affine
• Projection

Affine transformation Used for perspective projection Linear transformation Translation column Point ? ? ?

Transformations

Affine transformation Used for perspective projection Linear transformation Translation column Point

• Rotation x, y, z by fixed angle
• Shear x, y, z by fixed angle
• Scaling

Preserves straight lines. Parallel lines stay parallel. Shift, move, add to coordinates

Shading

• What shading models are used here?

Hint: Per-???

Lighting

• Basic lighting model consists of:
• Ambient
• Diffuse (Lambertian)
• Specular (Phong, Blinn-Phong)
• Where are they here?

I=max(0,n⋅ l) ⋅ 0.4+max(0,(r⋅ v))

c⋅

0.4+0.1

What are n, l, r, v and c?

Lighting

• Very important control question!
• Given diffuse reflection, which surface is more

brighter?

a) b)

Field Trip – 3D Scanning

Pointcloud in MeshLab Constructed model in Blender

Physics Simulation

• Rigid body – What is it?
• Rigid body transformations – Name them?
• Real-time rigid body collision algorithm:
• Approximate the object with a set of particles
• Detect the collisions between the particles

Real-Time Rigid Body Simulation on GPUs: http://http.developer.nvidia.com/GPUGems3/gpugems3_ch29.html https://courses.cs.ut.ee/2015/cg/spring/Main/Project-RigidBodySimulation

Physics Simulation

• Soft body – What is it?
• Simulation algorithms:
• Spring-mass models
• Finite element method
• ...
• Collisions
• Discrete – a posteriori, detected after collisions
• Continuous – a priory, detected before collisions

https://www.youtube.com/watch?v=tsGWBmSQRDU

Physics Simulation

• Physics Engines
• PhysX by Nvidia

– Windows (free)

• Havok by Intel

– Consoles

• Bullet library

– Blender – LightWave 3D

Artists vs Programmers

• Art asset pipeline:
• Start with high-poly model
• ?
• retopo?
• Use in a game?

O p t i

• n

a l l y s t a r t w i t h l

• w
• p
• l

y a n d m a k e i t h i g h

• p
• l

y What is missing here? System Shock 2, Enhanced Dark Engine, 1999 http://www.ttlg.com/forums/showthread.php?t=138460

What model is used here? How?

Blending

• When multiplying with the projection matrix, we

try to also preserve the depth information.

• Z-buffer is used to draw objects in the correct
• rder.
• Unfortunately, with a perspective projection, the

resulting depth information is not linear (projection is not a linear transformation).

• This causes...?

Blending

• Depth information can be used for:
• Fog
• Depth of field
• Screen space ambient occlusion (SSAO)
• Shadows
• Soft particles

Shadow mapping, CGLearn Particle Chopper task, CGLearn

Blending

• Objects can be semi-transparent and blended
• Conventional alpha blending
• Premultiplied alpha blending
• Which is which?

blend (src ,dest)=(src⋅ 1)+(dest⋅ (1−srcalpha)) blend (src , dest)=(src⋅srcalpha)+(dest⋅ (1−srcalpha))

Value already in the buffer New value to blend src – source dest – destination

Blending

• Different other combinations for the blending

equation:

• Multiplicative blending
• Additive blending
• ...
• General blending equation:

blend (src , dest)=(src⋅ srcfactor)func(dest⋅ destfactor)

Configurable parameters

World Remade by Jaanus Jaggo http://forums.tigsource.com/ind ex.php?topic=41334.0 Try it yourself: http://www.andersriggelsen.dk/glblendfunc.php

Shadows

• Shadow has 3 parts:
• Umbra
• Penumbra
• Antumbra

What is the difference between a hard shadow and a soft shadow?

Shadows

• Static shadows – objects that cast shadows do

not move.

• Dynamic shadows – objects that cast shadows

do move.

• Lightmap – static shadows and lights also do

not move, this means that we can...?

Shadows

• Projected shadows – shadows are just semi-

transparent objects projected under other objects.

• Projection shadows – project everything in the

scene onto a plane (squash them).

• Shadow mapping – use the depth information

from a light source to determine if in the shadow.

• Shadow volume – create separate shadow

volume meshes by:

• Finding the silhouette of an object
• Projecting that from the light to infinity
• Count the number of times we pass the volumes

Shadow Mapping

Shadow Volume

Distance Fields

• 3D texture around the object that specifies, how

far you are from the borders of that object.

http://chimera.labs.oreilly.com/books/1234000001814/ch07.html#ch07_id36000844

Distance Fields

• Useful for font rendering, decals (logos) etc.
• Enlarging the distance field keeps the border in

place.

If this is the alpha, then we get a blurred edge If this is a distance field, then the borders stay the same

Distance Fields

• Unreal Engine 4.3 uses them for distance field

ambient occlusions (DFAO).

Distance Fields

• Unreal Engine 4.5 uses them for soft shadows.
• Ray traced distance field soft shadows (RTDFSS)
• Shoot a ray from the fragment to a light source.
• March with the smallest distance in all the distance

fields at the current step.

• If we hit an object instead, we are in full shadow.
• If we are close to some surface, approximate a cone

trace to see, how much in the penumbra we are.

– Pick some n points along the ray to approximate.

http://www.iquilezles.org/www/material/nvscene2008/rwwtt.pdf Details from the year 2008. Quote: „ It will very soon be realtime.“

3D Fractal Generated Worlds with Cellular Automata

• Mathematical patterns are everywhere.

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, ...

3D Fractal Generated Worlds with Cellular Automata

• Fractal – mathematical set that exhibits a

pattern at every scale.

• The pattern can be self-similar

The Mandelbrot set

3D Fractal Generated Worlds with Cellular Automata

• Cellular automation – discrete mathematical

model.

• Consists of cells, each of which has a state.
• States can change in time following some rules.
• Example: Convay's Game of Life
• Alive & <2 neighbours alive dead

⇒

• Alive & 2 or 3 neighb. alive alive

⇒

• Alive & >3 neighbours alive dead

⇒

• Dead & 3 alive neighbours alive

⇒

3D Fractal Generated Worlds with Cellular Automata

• Different rules? Different visualization?
• 1D Cellular Automata Pattern Generator (v 1.0)

By John Henry Avila Perez

3D Fractal Generated Worlds with Cellular Automata

• 2D Cellular Automata Pattern Generator

By John Henry Avila Perez

3D Fractal Generated Worlds with Cellular Automata

• 3D Cellular Automata Pattern Generator

John Henry Avila Perez, http://codingbaad.blogspot.com/

Natural Simulation with JavaScript using Processing.js

• Simulation – imitation of the operation of a real-

world process over time.

• Processing.js – JavaScript port of Processing

language.

• Used for:
• 2D and 3D visualizations
• Interactive applications (eg games)
• Animations
• ...

Natural Simulation with JavaScript using Processing.js

• Randomness – lack of predictability or pattern
• random(high), random(low, high)
• Noise – can be used for natural looking textures
• Eg Perlin noise
• noise(x), noise(x, y), noise(x, y, z)

Natural Simulation with JavaScript using Processing.js

• Vector – object with magnitude and

direction

• PVector class (has methods for operations)
• Object preserves its speed and direction,

unless acted upon by an unbalanced force.

• Angular movement
• Oscillation
• ...

Force=mass⋅ acceleration

Natural Simulation with JavaScript using Processing.js

• Moshpit Simulation
• Seems to use JS context drawing only

https://mattbierbaum.github.io/moshpits.js/

Natural Simulation with JavaScript using Processing.js

My Life Aquatic, http://mylifeaquatic.herokuapp.com/ BitTorrent visualization, http://mg8.org/processing/bt.html Delaunay Triangulation: http://www.whyi.net/geometry/Delaunay/

Animation

• Key principles:
• Squash and stretch
• Anticipation
• Staging
• Straight ahead & pose to pose
• Follow through & overlapping
• Slow in and slow out
• Arcs
• Secondary action
• Timing
• Exaggeration
• Solid drawing
• Appeal

Animation

• Interpolation of vertex groups between stances
• Linear
• Using curves – why?
• Types of animation:
• Morph target
• Skeletal meshes
• Kinematics
• Key frame animation
• Motion capture

Game Development in JavaScript

• Game cycles – Which is better? Why?

Game Development in JavaScript

• JavaScript n-body benchmark
• Faster than:

– Lua – Python – PHP

• Slower than:

– C++ – C# – Fortran – Haskell – Clojure – Go http://benchmarksgame.alioth.debian.org/u32/performance. php?test=nbody

Game Development in JavaScript

• Sometimes a bit weird behaviour
• RequireJS + OOP
• Three.js – graphics library
• Some physics libraries (with bad doc)
• Cannon
• Ammo
• Box2D
• PhysiJS

Game Development in JavaScript

• Back to collision detection:
• Broad phase – find candidates for testing

– Need to partition the space to avoid

• Narrow phase – test the candidates

– Bounding objects – Test path intersection

O(n

2)

Game Development in JavaScript

• GTA 2 remake in JS by Erich Jagomägis

https://courses.cs.ut.ee/2015/cg/spring/Main/Project-GTA2

CGLearn

• Computer graphics learning environment
• Has interactive examples in JavaScript

Feedback

• How did you like the seminar organization?
• Did you found our activities interesting / useful?

Which ones especially?

• What would you change?

Thanks for listening!