game programming 06 the rendering engine 2010 년 2 학기 디지털콘텐츠전공
TRANSCRIPT
![Page 1: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/1.jpg)
Game Programming 06The Rendering Engine
2010 년 2 학기디지털콘텐츠전공
![Page 2: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/2.jpg)
Rendering in Video Games
• Depth-Buffered Triangle Rasterization– Virtual Scene– Virtual Camera– Various Light Sources– Visual Properties
Solving the Rendering Equation (Shading Equation)
![Page 3: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/3.jpg)
Rendering in Video Games
• Purpose of the rendering:– Photorealism – Stylized look (cartoon, sketch, watercolor and
so on)
![Page 4: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/4.jpg)
Describing a Scene
• Scene is composed of objects:– Opaque (solid) object
• Surfaces (triangles) define its shape• Don’t care about inside
– Transparent object
![Page 5: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/5.jpg)
Representing object (surface)• Surface: a two-dimensional sheet
composed of an infinite number of points in 3D
• Representation– Analytical form (parametric surface equation)– Collection of Patches– Triangle mesh
![Page 6: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/6.jpg)
Representing object (surface)• Analytical form (parametric surface
equation)– Ex.) Sphere equation
2222 rzyx
![Page 7: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/7.jpg)
Representing object (surface)• Collection of Patches– Patch: a simple rectangular surfaces – Similar to a quilting– Ex.) NURBS, Bezier Surfaces, Subdivision
Surface
Quilt
NURBS surfaceNURBS modeling
![Page 8: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/8.jpg)
Representing object (surface)• Triangle mesh– A piece-wise linear approximation to the
surface
Piece-wise linearapproximation to a function
Piece-wise linearapproximation to a surface
![Page 9: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/9.jpg)
Representing object (surface)• Triangle mesh– Using a triangle because:
• It is the simplest type of polygon• It is always planar• It still remains a triangle after transformations such as
affine (projective) transformation• All graphics card support a hardware acceleration to
draw it
![Page 10: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/10.jpg)
Triangle Mesh
• Tessellation– A process of dividing a surface up into a
collection of triangles
• LOD (Level-of-detail)
![Page 11: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/11.jpg)
Triangle Mesh
• Winding Order– How to define the front/back face direction– Counterclockwise (CCW) / Clockwise(CW)
Counterclockwise winding order
Computing normal direction
21
21
vv
vvn
![Page 12: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/12.jpg)
Triangle Mesh
• Representation of mesh– Triangle list
1v
2v
3v4v
5v
6v
7v
1v 2v 4v 2v 3v 4v 1v 5v 2v
iv : 점의 좌표
![Page 13: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/13.jpg)
Triangle Mesh
• Representation of mesh– Indexed Triangle List
1v
2v
3v4v
5v
6v
7v
1v 2v 3v 4v 5v 6v 7v 8v
: 점의 좌표iv
Vertex list:
0 1 3 1 2 3 0 4 1 Indexed triangle list:
0 1 2 3 4 5 6 7
![Page 14: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/14.jpg)
Triangle Mesh
• Other representation of mesh– Triangle strip– Triangle fan
Triangle strip Triangle fan
1v 2v 3v 4v 5v 6vVertex list: 0v
![Page 15: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/15.jpg)
Model space
• Positions of a triangle mesh’s vertices are usually specified relative to a local coordinate system. (front/left/up)
left
up
front
![Page 16: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/16.jpg)
World space and mesh instance • Individual meshes are located in a scene
(world)
• Mesh instance:– Any one mesh might appear many times in a
scene– Representation:
• Reference mesh, and its transformation matrix
red: model coord.
black: world coord.
![Page 17: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/17.jpg)
Visual properties of a surface• Information needed to define a final color
in the rendered image:
– Direction of surface normal– Diffuse color– Shininess/reflectivity– Roughness– Texture– Opacity or transparency– Other optical properties
: How light should interact with the surface
![Page 18: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/18.jpg)
Introduction to Light
• What we see is a result of complex interactions of light with matter.
• Four main interactions of light– Absorption– Reflection– Transmission / refraction (bent)– Diffraction
![Page 19: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/19.jpg)
Introduction to Light
• Absorbed by a surface
Why does red look red?
![Page 20: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/20.jpg)
Introduction to Light
• Reflected by a surface
![Page 21: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/21.jpg)
Introduction to Light
• Transmitted through a media– Partially absorbed or refracted
![Page 22: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/22.jpg)
Color model
• Color model: how to represent a color– RGB (Red-Green-Blue):
• RGB888 (8 bit for each channel: 0~255 integer) – 24 bit
• RGB565 (5 bit for red, and blue, 6 bit for green) – 16 bit
– HSV (Hue-Saturation-Value)
– LDR (Low Dynamic Range) vs. HDR (High Dynamic Range) • HDR: RGB in a higher precision (float value)
![Page 23: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/23.jpg)
Color model
• LDR with various exposes and tone mapping
![Page 24: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/24.jpg)
Alpha channel
• Representing opacity• A fourth channel to RGB RGBA or ARGB– RGBA8888 – 32 bit per pixel– RGBA5551 – 16 bit per pixel
![Page 25: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/25.jpg)
Vertex Attributes
• Position vector (x, y, z)• Vertex normal (nx, ny, nz)• Diffuse color (dr, dg, db)• Specular color (sr, sg, sb)• Texture coordinates (u, v)• Skinning weights (w1, w2, …)
![Page 26: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/26.jpg)
Attribute interpolation
• Flat shading and Gouraud shading
Gouraud Shading:Inside color is interpolated from the vertex colors
![Page 27: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/27.jpg)
Texture maps
• To overcome the per-vertex attribute, using image to fill-in the polygons
![Page 28: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/28.jpg)
Texture maps
• To overcome the per-vertex attribute, using image to fill-in the polygons
+ =
![Page 29: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/29.jpg)
Texture maps
• Texture coordinates:– 2D coordinate system defined on an image– Denoted as (u,v): uv-coordinate
u
v
u
v
![Page 30: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/30.jpg)
Types of textures
• Types of textures– Diffuse map– Bump map– Normal map– Gloss map– Environment map
![Page 31: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/31.jpg)
Types of textures
• Diffuse map– describing diffuse surface color
![Page 32: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/32.jpg)
Types of textures
• Bump map (similarly displacement map)– Describes small perturbations in height
A sphere without bump mapping (left). A bump map to be applied to the sphere (middle). The sphere with the bump map applied
(right)
![Page 33: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/33.jpg)
Types of textures
• Normal map: encodes normal vectors
Low vs. high res. Low res. + diffuse map Low res. + diffuse + normal
![Page 34: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/34.jpg)
Types of textures
• Gloss map (similarly specular map) – encoding how shiny a surface should be
![Page 35: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/35.jpg)
Types of textures
• Environment map– containing a picture of surrounding
environment for reflection
![Page 36: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/36.jpg)
Mipmapping
• Different resolution of the texture with respect to the distance between an object and a camera
![Page 37: Game Programming 06 The Rendering Engine 2010 년 2 학기 디지털콘텐츠전공](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649f155503460f94c2a501/html5/thumbnails/37.jpg)
OGRE::Mesh in action
• Get the sample file at our home page
• Create your own cylinder mesh from scratch.