![Page 1: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/1.jpg)
Game Object Appearance
![Page 2: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/2.jpg)
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
![Page 3: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/3.jpg)
GO: the Gang of Four
1. Geometry (Shape)
2. Attributes (Appearance)
3. Animation (Changes in Geometry and Attributes)
4. Interaction (User Controlled Changes)
![Page 4: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/4.jpg)
Attributes (Appearance)
1. Color
2. Shades
3. Texture
4. Transparency
![Page 5: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/5.jpg)
Color
1. Gamma Correction
2. Dynamic Range
3. Color Models
![Page 6: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/6.jpg)
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.
![Page 7: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/7.jpg)
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.
![Page 8: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/8.jpg)
Gamma CorrectionUA’s medallion is too dark due to the lack of gamma correction. Microsoft photo editor supports gamma correction (Image->Ballence->Gamma).
![Page 9: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/9.jpg)
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/
![Page 10: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/10.jpg)
Color Models
1. RGB
2. CMY
3. CMYK
4. HSV
![Page 11: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/11.jpg)
Color Models: RGB1. For Color Monitors
2. Additive Colors (Black: 000, White: 111)
![Page 12: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/12.jpg)
Color Models: CMY1. For Printers
2. Subtractive Colors (White: 000, Black: 111)
![Page 13: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/13.jpg)
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;
![Page 14: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/14.jpg)
Color Models: HSV
1. For user interaction 2. Hue, saturation, value (tint, color,
brightness)
![Page 15: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/15.jpg)
Shading
![Page 16: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/16.jpg)
Shading
1. Realism
2. Speed
3. Theory
4. Implementation
![Page 17: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/17.jpg)
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
![Page 18: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/18.jpg)
Shading Modes
![Page 19: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/19.jpg)
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
![Page 20: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/20.jpg)
Ambient Reflection:
Direction independent
ka Ia
Ia : incident ambient-light intensity
ka : object ambient-reflection coefficient
part of the object material properties
![Page 21: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/21.jpg)
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.
![Page 22: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/22.jpg)
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.
![Page 23: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/23.jpg)
The effects of ambient, diffusive and specular reflection.
![Page 24: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/24.jpg)
The effects of ambient, diffusive and specular reflection. (http://en.wikipedia.org/wiki/Utah_teapot)
Teapots shaded with different parameters.
![Page 25: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/25.jpg)
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)
![Page 26: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/26.jpg)
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)
![Page 27: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/27.jpg)
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) α
![Page 28: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/28.jpg)
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
![Page 29: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/29.jpg)
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)
![Page 30: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/30.jpg)
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
![Page 31: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/31.jpg)
Object Order Shading:
Geometrically approximate objects as patched (triangle) surfaces.Appearance-wise use three shading methods to approximate:
Flat, Smooth / Gouraud, Phong
![Page 32: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/32.jpg)
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
![Page 33: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/33.jpg)
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
}
![Page 34: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/34.jpg)
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.
}
}
![Page 35: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/35.jpg)
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. }
![Page 36: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/36.jpg)
Comparaison of Shading Methods (Realism):http://en.wikipedia.org/wiki/Gouraud_shading
![Page 37: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/37.jpg)
Comparaison of Shading Methods:http://en.wikipedia.org/wiki/Gouraud_shadinghttp://en.wikipedia.org/wiki/Phong_shading
![Page 38: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/38.jpg)
Comparaison of Shading Methods: Gouraud Shadinghttp://en.wikipedia.org/wiki/Gouraud_shadinghttp://en.wikipedia.org/wiki/Phong_shading
![Page 39: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/39.jpg)
Comparaison of Shading Methods: Gouraus vs. Phonghttp://en.wikipedia.org/wiki/Gouraud_shadinghttp://en.wikipedia.org/wiki/Phong_shading
GOURAUD SHADING
![Page 40: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/40.jpg)
Comparaison of Shading Methods: High Resolution GouraudPhong.cpp in the example.http://en.wikipedia.org/wiki/Gouraud_shadinghttp://en.wikipedia.org/wiki/Phong_shading
![Page 41: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/41.jpg)
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
![Page 42: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/42.jpg)
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
![Page 43: Game Object Appearance. The Three Faces of Designing GO Appearance The Artistic Face: ◦ aesthetic – beautiful and ugly ◦ done by artists The Communication](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56649e975503460f94b9a9b3/html5/thumbnails/43.jpg)
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