Game Object Appearance

The Three Faces of Designing GO Appearance

The Artistic Face: ◦ aesthetic – beautiful and ugly

◦ done by artists

The Communication Face:◦ show and tell (convey a message)

◦ done by communication experts

The Technical Face◦ the enabler (can or can’t), game engine design and development.

◦ done by computer scientists

GO: the Gang of Four

1. Geometry (Shape)

2. Attributes (Appearance)

3. Animation (Changes in Geometry and Attributes)

4. Interaction (User Controlled Changes)

Attributes (Appearance)

1. Color

2. Shades

3. Texture

4. Transparency

Color

1. Gamma Correction

2. Dynamic Range

3. Color Models

Gamma CorrectionFact 1: Our eyes are sensitive to ratios of

intensity rather than to absolute values of intensity.◦ Lightbulb: 1020; 100110; 100200◦ Exponential increase in intensity results in

linear increase of the sensation of intensity.Fact 2: Most software computes intensity

linearly, e.g. smooth shading linearly interpolates vertex reflection intensity into pixel intensity values.

Gamma CorrectionSuch images will appear very dark.Need to convert the intensity value

using an exponential factor: I = K V Where is a hardware dependent

constant.This way of increasing the intensity by

the gamma exponent is called Gamma Correction.

Gamma CorrectionUA’s medallion is too dark due to the lack of gamma correction. Microsoft photo editor supports gamma correction (Image->Ballence->Gamma).

Dynamic Range (DR)Color digitization Intensity levels:

discreteFlexible distribution

of the the discrete levels.

http://www.photographyblog.com/news/rambus_binary_pixel_technology_improves_dynamic_range/

Color Models

1. RGB

2. CMY

3. CMYK

4. HSV

Color Models: RGB1. For Color Monitors

2. Additive Colors (Black: 000, White: 111)

Color Models: CMY1. For Printers

2. Subtractive Colors (White: 000, Black: 111)

Color Models: CMYK

1. For Printers

2. Subtractive Colors (White: 000, Black: 111)

3. K=min(C, M, Y);4. C=C-K; M=M-K; Y=Y-K;

Color Models: HSV

1. For user interaction 2. Hue, saturation, value (tint, color,

brightness)

Shading

Shading

1. Realism

2. Speed

3. Theory

4. Implementation

Shading

1. Realism : Speed

2. HW tools: Frame Buffer, Z Buffer, ID Buffer, GPU

3. SW tools: LOD (Level of Details),

4. Shading Modes: Flat, Smooth, Phong

Shading Modes

ShadingShading: determining light reflection from objects at each pixel.

Basic Reflection Model:

Phong Reflection Model (most commonly used)

I= kaIa + kd Id (l · n) + ksIs(v · r ) α

I : reflected-light intensity

Ambient Reflection:

Direction independent

ka Ia

Ia : incident ambient-light intensity

ka : object ambient-reflection coefficient

part of the object material properties

Lambertian / Diffusive Reflection:

Lighting-direction dependent

Id kd(ln) = Id kdcos()

Id : incident diffussive-light intensity

kd : object diffusive-reflection coefficient

: angle between light direction (l) and surface normal (n). Both l and n are unit vectors.

Specular Reflection:

Viewing-direction dependent

Is ks(vr)α = Is ks cos α (Ф).

Is : incident specular-light intensity

ks : object specular-reflection coefficient

Ф : angle between reflection direction (r) and viewing

direction (v).

: specular-reflection exponent, shaniness coefficient.

1/: roughness.

The effects of ambient, diffusive and specular reflection.

The effects of ambient, diffusive and specular reflection. (http://en.wikipedia.org/wiki/Utah_teapot)

Teapots shaded with different parameters.

Attenuation:

Distance dependent, no impact on ambient light

fatt = 1/(a + bd + cd2)

d : distance from the light to the surface point.

a,b,c: constant, linear, quadratic attenuation coefficients.

 

I = kaIa + fatt kd Id (l · n) + fatt ksIs(v · r ) α

I = kaIa + Id kdcos() / (a + bd + cd2)

+ Is ks cos α (Ф) / (a + bd + cd2)

Summary:

 

I = kaIa + fatt kd Id (l · n) + fatt ksIs(v · r ) α

I = kaIa +

Id kdcos() / (a + bd + cd2) +

Is ks cos α (Ф) / (a + bd + cd2)

Colored Lights and Surfaces :I = (Ir, Ig, Ib) = { I, = r, g, b}

: color channel

->Colored lights:

Ia, Id, Is,

->Colored objects:

ka, kd, ks,

I = Ia ka + fatt Id kd(ln) + fatt Is ks(vr) α

with = r, g, b.

 Ir = Iar kar + fatt Idr kdr(ln) + fatt Isr ksr(vr) α

Ig = Iag kag + fatt Idg kdg(ln) + fatt Isg ksg(vr) α

Ib = Iab kab + fatt Idb kdb(ln) + fatt Isb ksb(vr) α

Multiple Lights:

I = Ia ka + fatti [Idi kd(l i n) + Isi ks(vr i) α]

with = r, g, b.

m: number of lights.

OpenGL support ambient component for individual light.

I = [ Iai ka + fatti [Idi kd(l i n) + Isi ks(vr i) α]]

 

0

m

i

0

m

i

Many more things consider:

Shadow, Reflection, Transparency, Refraction, …

http://www.codeproject.com/KB/graphics/RayTracerNet.aspx Figure 2. Shading effects: a) Ambient, b) Diffuse, c) Highlights, d) Shadows

and e) Reflection (notice the reflection on the floor also) 

How to get to each pixel?

Two approaches: object order and image order

 

 Frame Buffer: a buffer of memory to store the colors of

the screen, one memory cell per pixel. http://www.webopedia.com/TERM/F/frame_buffer.htmlhttp://en.wikipedia.org/wiki/Framebufferhttp://en.wikipedia.org/wiki/Linux_framebuffer

Object Order Shading:

Geometrically approximate objects as patched (triangle) surfaces.Appearance-wise use three shading methods to approximate:

Flat, Smooth / Gouraud, Phong

Z Buffer (depth buffer): a buffer of memory to store the z values of the screen, one memory cell per pixel.

To support Hidden Surface Removal and Level of Details.

http://en.wikipedia.org/wiki/Z-buffering

line of sight

Frame buff Z buff

Flat/Constant Shading:http://www.yourdictionary.com/computer/flat-shading

for (each object)

for(each triangle of the object)

compute its reflection

using color and normal of the triangle

for(each pixel in the triangle)

if(closer to the viewer than the

current z buffer value) {

update z buffer with the new z

update pixel color with the triangle reflection

}

Gouraud/Smooth Shading http://en.wikipedia.org/wiki/Gouraud_shading

for (each object)

for(each triangle of the object)

{ for(each vertex of in the triangle)

compute the vertex reflection

using the color and the normal of the vertex

for(each pixel in the triangle)

if(closer to the viewer than the current z buffer value)

{ update z buffer with the new z

interpolate the pixel color

from the vertex reflections.

}

}

Phong Shading:http://www.yourdictionary.com/phong-shading#computer

for (each object)for(each triangle of the object)

for(each pixel in the triangle) if(closer to the viewer than the

current z buffer value) { update z buffer with the new z

interpolate the pixel normal from the vertex normals compute the pixel color/relection using Phong reflection model using pixel normals and the properties of the

object. }

Comparaison of Shading Methods (Realism):http://en.wikipedia.org/wiki/Gouraud_shading

Comparaison of Shading Methods:http://en.wikipedia.org/wiki/Gouraud_shadinghttp://en.wikipedia.org/wiki/Phong_shading

Comparaison of Shading Methods: Gouraud Shadinghttp://en.wikipedia.org/wiki/Gouraud_shadinghttp://en.wikipedia.org/wiki/Phong_shading

Comparaison of Shading Methods: Gouraus vs. Phonghttp://en.wikipedia.org/wiki/Gouraud_shadinghttp://en.wikipedia.org/wiki/Phong_shading

GOURAUD SHADING

Comparaison of Shading Methods: High Resolution GouraudPhong.cpp in the example.http://en.wikipedia.org/wiki/Gouraud_shadinghttp://en.wikipedia.org/wiki/Phong_shading

Comparisons (Speed, how many time the I formula are used):◦Flat:1◦Smooth: 3 + Interpolation◦Phong: 5000 for a benchmark triangle

THE GAMER'S BENCHMARK◦3D Mark◦http://www.futuremark.com/hardwar

e/gpu

Rendering Engine using Object-Order Shading:Rendering APIs:

OpenGLActiveXRenderman Pixie - Open Source RenderMan

Web 3D Graphics API:WebGLVRML/X3DSVG: Scalable Vector GraphicsGoogle SketchUpSecondLife UA’s IslandI

Other Web Graphics API:HTML5.0FlashMicrosoft Silverlight

Level of Detail (LOD)

Rendering GOs closer to the viewer with more precision and GOs far away from the viewer with reduced acuracy to save time.

Geometry: use simpler geometry (a fewer triangles) Appearance: use faster shading methods (Phong->smooth->Flat) http://www.lodbook.com Level of Detail for 3D Graphics by David Luebke http://

www.lodbook.com

line of sight

Frame buff Z buff