1. Game Object Appearance

2. 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

3. GO: the Gang of Four 1. Geometry (Shape) 2. Attributes (Appearance) 3. Animation (Changes in Geometry and Attributes) 4. Interaction (User Controlled Changes)

4. Attributes (Appearance) 1. Color 2. Shades 3. Texture 4. Transparency

5. Color 1. Gamma Correction 2. Dynamic Range 3. Color Models

6. 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.

7. 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

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

9. Dynamic Range (DR) Color digitization Intensity levels: discrete Flexible distribution of the the discrete levels. http://www.photographyblo g.com/news/rambus_binary _pixel_technology_improv es_dynamic_range/

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

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

12. Color Models: CMY 1. For Printers 2. Subtractive Colors (White: 000, Black: 111)

13. 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;

14. Color Models: HSV 1. For user interaction 2. Hue, saturation, value (tint, color, brightness)

15. Shading

16. Shading 1. Realism 2. Speed 3. Theory 4. Implementation

17. 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

18. Shading Modes

19. 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

20. 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

21. 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.

22. 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.

23. The effects of ambient, diffusive and specular reflection.

24. The effects of ambient, diffusive and specular reflection. (http://en.wikipedia.org/wiki/Utah_teapot) Teapots shaded with different parameters.

25. 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 )

26. 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 )

27. 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) α

28. 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 ) α ]]

29. 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)

30. 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.html http://en.wikipedia.org/wiki/Framebuffer http://en.wikipedia.org/wiki/Linux_framebuffer

31. Object Order Shading: Geometrically approximate objects as patched (triangle) surfaces. Appearance-wise use three shading methods to approximate: Flat, Smooth / Gouraud, Phong

32. 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

33. Flat/Constant Shading: http://www.yourdictionary.com/computer/flat-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 }

34. Gouraud/Smooth Shading http://en.wikipedia.org/wiki/Gouraud_shading http://en.wikipedia.org/wiki/Gouraud_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. }

35. 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. }

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

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

38. Comparaison of Shading Methods: Gouraud Shading http://en.wikipedia.org/wiki/Gouraud_shading http://en.wikipedia.org/wiki/Phong_shading http://en.wikipedia.org/wiki/Gouraud_shading http://en.wikipedia.org/wiki/Phong_shading http://en.wikipedia.org/wiki/Gouraud_shading http://en.wikipedia.org/wiki/Phong_shading

39. Comparaison of Shading Methods: Gouraus vs. Phong http://en.wikipedia.org/wiki/Gouraud_shading http://en.wikipedia.org/wiki/Phong_shading http://en.wikipedia.org/wiki/Gouraud_shading http://en.wikipedia.org/wiki/Phong_shading http://en.wikipedia.org/wiki/Gouraud_shading http://en.wikipedia.org/wiki/Phong_shading GOURAUD SHADING

40. Comparaison of Shading Methods: High Resolution Gouraud Phong.cpp in the example. http://en.wikipedia.org/wiki/Gouraud_shading http://en.wikipedia.org/wiki/Phong_shading Phong.cpp in the example http://en.wikipedia.org/wiki/Gouraud_shading http://en.wikipedia.org/wiki/Phong_shading Phong.cpp in the example http://en.wikipedia.org/wiki/Gouraud_shading http://en.wikipedia.org/wiki/Phong_shading

41. 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 ◦ http://www.futuremark.com/hardware/gpu http://www.futuremark.com/hardware/gpu

42. 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

43. 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.comDavid Luebke http://www.lodbook.com line of sight Frame buff Z buff