CS 148, Summer 2012 Introduction ... - graphics.stanford.edu

TexPoint fonts used in EMF. Read the TexPoint manual before you delete this box.: AAAAAAAAAAAA

CS 148, Summer 2012 Introduction to Computer Graphics and Imaging

Justin Solomon

http://e-emoo.deviantart.com/art/Typography-123991952

Intersection of art and design http://www.ironicsans.com/2008/05/how_bold_can_darth_vader_be.html

Relatively fine points http://www.ironicsans.com/helvarialquiz/

Relatively fine points

http://blog.ocad.ca/wordpress/thegoldenage/files/2011/11/Helvetica_vs_Arial_by_harajukumatt.jpg http://www.swiss-miss.com/wp-content/uploads/2009/09/d8a5033cb029c5c30d2a93d402def1ddba97582d_m.png

Ideological battles

Ideological battles

http://imgs.abduzeedo.com/files/books/eots/elements-of-typographic-style-front-large.gif http://photo.goodreads.com/books/1169685773l/41601.jpg

Typeface [tahyp-feys]:

Set of characters that share common design features; collection of glyphs.

http://en.wikipedia.org/wiki/Typeface#Types_of_typefaces

Font [font]:

A complete character set of a single size and style of a particular typeface.


Corbel Typeface

72-Point Bold Corbel Font



http://sirnaseniku.blogspot.com/

Eltra Corp v. Ringer 1978

Typefaces are not eligible under copyright law as “works of art.”

Ex parte Tayama 1992

Novel and non-obvious typeface designs can be subject to a design

patent.

http://en.wikipedia.org/wiki/Adobe_Systems,_Inc._v._Southern_Software,_Inc.

Adobe Systems v. Southern Software

1998

Adobe’s Utopia font protectable under copyright thanks to creative

selection of control points

“[T]ypefaces and the characters they contain are ... utilitarian objects whose utility outweighs any merit that may exist in protecting their creative elements. [T]he computer file(s) associated with a scalable font will generally be protected even though the specific design of the characters is not. Furthermore, a rasterized representation ... of the characters in a scalable font is not protected by copyright in the United States.... [T]ypography and calligraphy are not copyrightable in themselves in the U.S.” http://en.wikipedia.org/wiki/Intellectual_property_protection_of_typefaces,_fonts_and_characters

“[T]ypefaces and the characters they contain are ... utilitarian objects whose utility outweighs any merit that may exist in protecting their creative elements. [T]he computer file(s) associated with a scalable font will generally be protected even though the specific design of the characters is not. Furthermore, a rasterized representation ... of the characters in a scalable font is not protected by copyright in the United States.... [T]ypography and calligraphy are not copyrightable in themselves in the U.S.” http://en.wikipedia.org/wiki/Intellectual_property_protection_of_typefaces,_fonts_and_characters

Points (pt) 72 points = 0.996 in 72 points = 1.0 in (for Adobe)

Picas (pc) 12 points = 1 pica

Em

Em

En = Em / 2

Font size should not be measured in pixels.

Font size should not be measured in pixels.

American Standard Code for Information Interchange

http://en.wikipedia.org/wiki/ASCII

http://www.unicode.org/charts/

Character map Unicode to glyph

Glyphs Quadratic Bézier curves

Hinting Short programs in fonts

Character map Unicode to glyph

Glyphs Cubic Bézier curves

Glyph metrics To help with layout

Kerning http://en.wikipedia.org/wiki/Kerning

Kerning

http://xkcd.com/1015/ http://www.explainxkcd.com/2012/02/10/kerning/

Leading http://www.webdesign.org/img_articles/21830/01.png

Ligatures

http://upload.wikimedia.org/wikipedia/commons/6/6e/Ligatures.svg http://betatype.com/cms/system/files/ligatures.png

Boxes and glue

http://codinghorror.typepad.com/.a/6a0120a85dcdae970b0120a86d7c73970b-pi http://makingtexwork.sourceforge.net/mtw/ch01.html

Boxes and glue

Box: -Width -Height -Depth

Boxes and glue

vbox

hbox

http://net.ytu.edu.cn/share/%D7%CA%C1%CF/texbook.pdf

Boxes and glue http://net.ytu.edu.cn/share/%D7%CA%C1%CF/texbook.pdf

Glue: Space, stretch, and shrink






Subpixel antialiasing http://en.wikipedia.org/wiki/ClearType

http://infoscience.epfl.ch/record/99768/files/frsa.pdf

1. Outline grid-fitting 2. Outline scan

conversion 3. Filling

Adjust for readability


Outline grid-fitting

Outline scan conversion

f(1=2)

f(0) f(1)





Filling



Justin Solomon

http://www.mobygames.com/images/shots/l/45594-frogger-apple-ii-screenshot-gameplay-on-the-second-levels.gif

“We don’t make big game design documents, rather, we start by creating a playable prototype.... From there, we take an iterative approach to development, in which we play and improve, play and improve for as long as it takes to make a great game.” - Sid Meier, Firaxis Games

http://www.bradcook.net/games/articles/2008/05/sidmeier/

Ludonarrative [loo-doh-nar-uh-tiv]:

Aspects of storytelling in a video game that are controlled by the user.

http://en.wikipedia.org/wiki/Ludonarrative

http://vglounge.com/wp-content/uploads/2011/03/FirstPersonShooter.jpg http://en.wikipedia.org/wiki/Myst http://www.crunchbase.com/assets/images/original/0010/3903/103903v1.png http://s.pro-gmedia.com/videogamer/media/images/pub/large/top10rpg9.jpg http://www.blogcdn.com/www.parentdish.com/media/2007/01/madden.jpg

First person shooter

2D puzzle

Adventure Role playing game

Strategy Sports

While (user doesn't exit)

Check for user input

Run AI

Move enemies

Resolve collisions

Draw graphics

Play sounds

End while http://en.wikipedia.org/wiki/Game_programming

Many platforms

Many platforms

Scaling [skey-ling]:

Adjusting graphics quality in response to system capabilities.

Course textbook

Processing time

Fill command buffer with GPU commands to prevent “GPU starvation”

Carefully measure frame rate (easy on fixed hardware)

Allocate heterogeneous resources

Storage

Textures and geometry are expensive!

Size: Amount of space

Latency: Time between request and fulfillment (blocking or non-blocking)

Bandwidth: How much data you can transfer at once

Development

Implementation is hard, deadlines are tight!

Abstract hardware

Simplify common rendering tasks

Maintain scene graph

Deal with sound and other media

Provide physics, AI, networking, threading, other features

Shaders.

Level-of-detail (LOD) http://www.opensg.org/wiki/Tutorial/OpenSG2/NodeCores

Use distance to determine model.

http://www1.cs.columbia.edu/~cs4162/html05s/garland97.pdf http://johnrichie.com/V2/richie/simp/images/types1.jpg

Garland/Heckbert: Quadric Error Metrics

http://www1.cs.columbia.edu/~cs4162/html05s/garland97.pdf http://johnrichie.com/V2/richie/simp/images/types1.jpg

Garland/Heckbert: Quadric Error Metrics

http://graphics.stanford.edu/courses/cs468-10-fall/LectureSlides/09_Progressive_Meshes.pdf

http://research.microsoft.com/en-us/um/people/hoppe/proj/pm/

http://upload.wikimedia.org/wikipedia/commons/3/33/Catmull-Clark_subdivision_of_a_cube.svg

http://upload.wikimedia.org/wikipedia/commons/3/33/Catmull-Clark_subdivision_of_a_cube.svg

Sprites and billboards

http://www.escapistimagery.com/geekpage.htm http://ars.els-cdn.com/content/image/1-s2.0-S0169204601001220-gr3.jpg

http://www.gamerendering.com/category/optimizations/culling-optimizations/

Intersect objects instead of frustum

http://www.videotutorialsrock.com/opengl_tutorial/collision_detection/screenshot.png http://www.riemers.net/images/Tutorials/XNA/Csharp/Series2/XNA%20Tutorial%209%20-%20Collision%20detection.jpg

http://media.bestofmicro.com/ray-tracing-rasterization,M-9-214641-13.png

What values should be in depth buffer?

Render opaque objects into depth buffer first

http://lh3.ggpht.com/_VelpN_FHzhk/S-JC-jH6tAI/AAAAAAAAAqI/frWXNeyGx6w/s1600-h/no_alpha_errors%5B6%5D.png

Shadow maps http://en.wikipedia.org/wiki/Shadow_mapping

Goal: Render shadows that conform to shape


Render depths from light’s point of view.


Apply matrix transformation to map to camera space.


Find shadows.

Shadow maps

http://http.developer.nvidia.com/GPUGems3/elementLinks/08fig09.jpg http://www.phoesion.com/_/rsrc/1300357721993/features/lighting/shadowmaps/shadow.png

Shadow volumes http://en.wikipedia.org/wiki/Shadow_volume

(~ko ¢ ~N0)(~ko ¢ ~N1) · 0

Face normals on either side of edge change direction

relative to eye.

Bump/normal mappinghttp://upload.wikimedia.org/wikipedia/commons/4/4e/Bump_map_vs_isosurface2.png

Particle systems

http://upload.wikimedia.org/wikipedia/commons/f/f2/Particle_sys_fire.jpg http://upload.wikimedia.org/wikipedia/commons/7/70/Particle_sys_galaxy.jpg

Rigid body systems

http://rockonflash.wordpress.com/2008/04/07/physaxe-rigid-body-physics-for-haxe-flash-9/ http://static.wolfire.com/legacy/ODEthumb.jpg

http://www-scf.usc.edu/~chiaminc/index_files/image002.jpg

Rigid body systems

Leapfrog integration

~F =m~ad2~x

dt2= ~a(~x)

Rigid body systems


f 0(t) ¼ f(t+¢t)¡ f(t)

¢t

Rigid body systems


f 0(t) ¼ f(t+¢t)¡ f(t)

¢tChoose relative to

frame rate

Rigid body systems


Time

~x1 ~x2 ~x3 ~x4

Rigid body systems


Time

~x1 ~x2 ~x3 ~x4~v1:5 ~v2:5 ~v3:5

~vi+0:5 =~xi+1 ¡ ~xi

¢t

Rigid body systems


~x1 ~x2 ~x3 ~x4

~ai =~vi+0:5 ¡ ~vi¡0:5

¢t

~a1 ~a2 ~a3 ~a4

~v1:5 ~v2:5 ~v3:5

Rigid body systems


~vi+0:5 =~xi+1 ¡ ~xi

¢t

~ai =~vi+0:5 ¡ ~vi¡0:5

¢t

d2~x

dt2= ~a(~x)

Rigid body systems


~vi+0:5 =~xi+1 ¡ ~xi

¢t

~ai =~vi+0:5 ¡ ~vi¡0:5

¢t

d2~x

dt2= ~a(~x)

~xi+1 = ~xi +(¢t)~vi+0:5

Rigid body systems


~vi+0:5 =~xi+1 ¡ ~xi

¢t

~ai =~vi+0:5 ¡ ~vi¡0:5

¢t

d2~x

dt2= ~a(~x)

~xi+1 = ~xi +(¢t)~vi+0:5

~vi+0:5 = ~vi¡0:5 +(¢t)~ai

Rigid body systems


~vi+0:5 =~xi+1 ¡ ~xi

¢t

~ai =~vi+0:5 ¡ ~vi¡0:5

¢t

d2~x

dt2= ~a(~x)

~xi+1 = ~xi +(¢t)~vi+0:5

~vi+0:5 = ~vi¡0:5 +(¢t)~ai

~ai = ~a(~xi)

Rigid body systems


~xi+1 = ~xi +(¢t)~vi+0:5

~vi+0:5 = ~vi¡0:5 +(¢t)~ai

~ai = ~a(~xi)1.

2.

3.

Rigid body systems http://www.youtube.com/watch?v=JncQOCg9FS0&feature=relmfu

Rigid body systems

Be careful!

¢t

Ragdoll systems

http://upload.wikimedia.org/wikipedia/commons/d/d8/Animatsragdollphysics.jpg http://unigine.com/devlog/070513-ragdoll.jpg

Fictional physics

htt

p:/

/ww

w.w

ired

.co

m/w

ired

scie

nce

/20

12/0

3/th

e-g

ravi

tati

on

al-f

orc

e-in

-an

gry

-bir

ds-

spac

e/



Justin Solomon

http://e-emoo.deviantart.com/art/Typography-123991952 http://www.mobygames.com/images/shots/l/45594-frogger-apple-ii-screenshot-gameplay-on-the-second-levels.gif

Documents

CS 148, Summer 2012 Introduction ... - graphics.stanford.edu