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 Correction Fact 1: Our eyes are sensitive to ratios of intensity rather than to absolute values of intensity. ◦ Lightbulb: 10  20; 100  110; 100  200 ◦ 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 Correction Such 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 Correction

UA’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: discrete Flexible distribution of the the discrete levels. g.com/news/rambus_binary _pixel_technology_improv es_dynamic_range/

Color Models 1. RGB 2. CMY 3. CMYK 4. HSV

Color Models: RGB 1. For Color Monitors 2. Additive Colors (Black: 000, White: 111)

Color Models: CMY 1. 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

Shading Shading: determining light reflection from objects at each pixel. Basic Reflection Model: Phong Reflection Model (most commonly used) I= k a I a + k d I d (l · n) + k s I s (v · r ) α I : reflected-light intensity

Ambient Reflection: Direction independent k a I a I a : incident ambient-light intensity k a : object ambient-reflection coefficient part of the object material properties

Lambertian / Diffusive Reflection: Lighting-direction dependent I d k d (l  n) = I d k d cos(  ) I d : incident diffussive-light intensity k d : 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 I s k s (v  r) α = I s k s cos α (Ф). I s : incident specular-light intensity k s : 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. ( Teapots shaded with different parameters.

Attenuation: Distance dependent, no impact on ambient light f att = 1/(a + bd + cd 2 ) d : distance from the light to the surface point. a,b,c: constant, linear, quadratic attenuation coefficients. I = k a I a + f att k d I d (l · n) + f att k s I s (v · r ) α I = k a I a + I d k d cos(  ) / (a + bd + cd 2 ) + I s k s cos α (Ф) / (a + bd + cd 2 )

Summary: I = k a I a + f att k d I d (l · n) + f att k s I s (v · r ) α I = k a I a + I d k d cos(  ) / (a + bd + cd 2 ) + I s k s cos α (Ф) / (a + bd + cd 2 )

Colored Lights and Surfaces : I = (I r, I g, I b ) = { I, = r, g, b} : color channel ->Colored lights: I a, I d, I s, ->Colored objects: k a, k d, k s, I = I a k a + f att I d k d (l  n) + f att I s k s (v  r) α with = r, g, b. I r = I ar k ar + f att I dr k dr (l  n) + f att I sr k sr (v  r) α I g = I ag k ag + f att I dg k dg (l  n) + f att I sg k sg (v  r) α I b = I ab k ab + f att I db k db (l  n) + f att I sb k sb (v  r) α

Multiple Lights: I = I a k a + f atti [I d i k d (l i  n) + I s i k s (v  r i ) α ] with = r, g, b. m: number of lights. OpenGL support ambient component for individual light. I = [ I a i k a + f atti [I d i k d (l i  n) + I s i k s (v  r i ) α ]]

Many more things consider: Shadow, Reflection, Transparency, Refraction, … 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

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. line of sight Frame buff Z buff

Flat/Constant 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 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: 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):

Comparaison of Shading Methods:

Comparaison of Shading Methods: Gouraud Shading

Comparaison of Shading Methods: Gouraus vs. Phong GOURAUD SHADING

Comparaison of Shading Methods: High Resolution Gouraud Phong.cpp in the example. Phong.cpp in the example Phong.cpp in the example

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 3D Mark ◦

Rendering Engine using Object-Order Shading: Rendering APIs: OpenGL ActiveX Renderman Pixie - Open Source RenderMan Web 3D Graphics API: WebGL VRML/X3D SVG: Scalable Vector Graphics Google SketchUp SecondLifeSecondLife UA’s IslandIUA’s IslandI Other Web Graphics API: HTML5.0 Flash Microsoft 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) Level of Detail for 3D Graphics by David Luebke Luebke line of sight Frame buff Z buff