Microsoft PowerPoint - GameDesign6-Graphics.ppt [호환 모드]

Size: px

Start display at page:

Download "Microsoft PowerPoint - GameDesign6-Graphics.ppt [호환 모드]"

나은 난
4 years ago
Views:

1 Game Graphics Isometric Games Fall /14/2013 Kyoung Shin Park Multimedia Engineering Dankook University Sprite-based graphics Basics of Isometric Games 스프라이트게임 (sprite games) 은일반적으로 Top down (e.g. 미로게임 ) Front facing (e.g. platform games) 작은부분은클리핑 (clipping) 함은면제거 (hidden surface removal) 를위해 뒤에서부터그리고앞은나중에그림 (drawn from back to front) 주변에투명한영역을줌상태정보는오버레이 (overlay) 해서보여주거나다른패널에서보여줌깊이정보는레이어 (layers) 를사용해서줌 패럴랙스스크롤링 (parallax scrolling) 를사용 산, 울타리, 전경등서로다른깊이로층이된타일을저장하고서로다른속도로그들을움직여서깊이감을전달함 스프라이트 (sprites) 의크기를조절하여사용충돌검사 (collision detection) 바운딩박스 (bounding boxes) 사용 픽셀기반충돌검사 이미지자체의충돌을픽셀마다검사하는방법. 효율이떨어지고느림. action이필요할때만사용. 3 등축 (isometric) 게임 각물체는지면 (x, y) 위에위치하고있음 각물체는필요에따라지면으로부터 (z) 만큼올라간높이를가짐 게임세계는등축원근투영으로보여짐 평행 (parallel) 투영 주요축에대해 45 각도로회전된것임 장점 모든물체가같은크기로보임. 전체적으로보기에좋음. 단점 투영이왜곡됨 시점을제한함으로써개선시킬수있음 수직축에대한왜곡 (distortion) ti 이심함 3차원과는달리모든기능이지면에서이루어짐 은면제거는깊이정렬 (depth sorting) 을이용함 쉽게구현이가능함 많은게임에서사용됨 Command and Conquer (except Generals), Diablo, Age of Empires, SimCity, 등등 4

2 Sprites 화면위에서유령 (sprite) 처럼둥둥떠다니는것 투명색 찍히지않는색 그림과구별이잘되어야함 이미지에사용되지않아야함 잔상이남지않는그림 흔히들일반적으로게임에쓰이는모든그림을스프라이트 (sprite) 라고부르는경향이있음 Tiles 대부분의등축게임 (isometric games) 은타일 (tiles) 에기반을두고있음 원근투영으로다이아몬드처럼보이는사각형 육각형 (perspective가없어서 ) 모든깊이에다같은고정된크기 (fixed size) 를가짐 5 6 Tiles 타일의표면은겉으로타일의구조가보이지않게잘배치해야함 주의깊게디자인된타일 약간의변형 ( 비슷한 terrain 에서더욱중요함 ) 높이의차이만이보여짐 ( 실제로게임에서구현되진않음 ) 투명하지않으며움직이지않는정적인것임 Tiles 3차원의느낌이나도록만듬 ( 주요축이확연히들어나도록 ) 그래픽에서길이나벽등등 움직임에서키맵핑 (key mapping) 시 미리구성될수도있으며, 날아다니게만들수도있음 배치규칙 (alignment rules) 이필요함 일반적으로고수준의표현으로부터생성됨 길, 강, 산, 바다, 등등 Age of Wonder (2003), a dimetric hexagonal tile-based game 7 8

3 Structures on the Surface 지면에고정된것들 - 나무, 빌딩, 등 2 차원지면에서고정된지점에위치함 종종그리드 (grid) 로배치됨 투명한스프라이트 (sprites) 애니메이션이될수도있음 게임에서의물체들이거나또는배경또는전경 지면에서움직이는유니트 (moving unit) - 사람, 자동차, 등 2차원지면에서위치로표현됨 타일안에고정돼있을필요가없음 구조나다른유니트뒤로움직일수있음 지면위에서움직이는유니트 - 총알, 풍선, 등 지면위에한점과높이로표현됨 움직임 (movement) 사용자인터페이스 ( 예, 화살방향키 ) 원하는대각선움직임 수직, 수평의움직임속도를다르게함 9 Collision Detection 복잡한 3 차원계산을피하도록함 스프라이트는중첩이가능함 ( 물체는중첩이안됨 ) 물체의경우, 지면에이물체의그림자를저장함 혹은약간의대략적인형체나그림자의관련된부분을저장함 필요하면, 이물체의높이간격도저장함 지면투영은 convex 라가정함 ( 아니면, 지면을여러개로분리함 ) 충돌검사 그림자와충돌하는지검사 만약그렇다면, 그것의높이간격도충돌하는지검사 만약그렇다면, 충돌된것임 그러나가끔보다복잡한충돌검사가요구됨 10 Collision Detection 만약다른장소에서다른높이간격이존재한다면, 분리함 예를들어, 왼쪽, 가운데, 오른쪽부분으로구성된대문이있다면 가운데부분에서는충돌검사를위한마스크를저장하지않기도함 ( 사람들이단지걸어간다고만하면충돌이생기지않을것이기때문에 ) 게임제작시 충돌검사를위하여모든물체의스프라이트그림자에대해마스크를지정함 높이간격은필요에따라지정해야함 Hidden Surface Removal 은면제거를위한그리기순서 (drawing order) 배경 (backgrounds) 물체 (objects) 전경 (forgrounds) 중첩 (overlays) 각물체는지면에위치를가지고있음 위치를잘지정해야함 예를들어그림자의가운데안에물체를위치시킴과같이 등축관측시그리기순서 (drawing order) 위에서부터아래로위치를정렬시킴 그리고, 뒤에멀리있는것부터먼저그리기시작 11 12

4 Hidden Surface Removal 그러나, 그리기순서가항상정확하지는않음 특히물체가서로가까이근접했을시판단하기어려움 그림자가중첩됐고높이정보가있을때는 높이가증가하는순서로정렬함 그리고, 다른물체보다아래쪽에있는것부터먼저그리기시작 게임제작시 지면의위치에서스프라이트의원점을선택함 ( 스프라이트의바깥쪽도가능함!) 깊이정렬을확실하게하기위해각단계마다깊이를 -y로지정함 Path Finding 게임세상을셀의배열 (an array of cells) 로저장함 물체 ( 또는물체의일부 ) 를포함하고있다면금지된셀로표시함 게임에서자주쓰이는길찾기 (path finding problem) 에가장범용적이고확실한알고리즘인 A* algorithm을사용함 D Graphics 3D Graphic Games Frame buffer and Double buffering Visibility and Depth buffer Alpha blending, Stencil buffer Coordinate Systems Triangle, Vertex, Index, Polygon, Mesh Transformations Camera Lightings, Shading, Materials Textures Billboarding Normal mapping, Bump mapping, Displacement mapping 16

5 Frame Buffer Double Buffering 넓은의미로프레임버퍼는화면에도시할래스터이미지 (raster image) 일뿐만아니라그러한이미지를생성하는데필요한여러부류의정보를저장해주는포괄적의미의그래픽스전용메모리를뜻함 색버퍼 (color buffer) 더블버퍼 (double buffer) front buffer & back buffer 스테레오버퍼 (stereo buffer) 양안시차이미지 알파버퍼 (alpha buffer) - 투명도 깊이버퍼 (depth buffer) 은면제거 스텐실버퍼 (stencil buffer) 2차원이미지와블렌딩 축척버퍼 (accumulation buffer) 렌더링속도향상 보통의이미지들을혼합된이미지들로축적하는데사용. 사용자는장면안티앨리어싱과같은작업들을수행할수있음. 픽셀버퍼 (pixel buffer) 17 Front Buffer Back Buffer 이미지가후면버퍼 (back buffer) 에그려질동안전면버퍼 (front buffer) 는완성된이미지를 viewer에게보여줌. 다음보여질화면을후면버퍼에미리그려놓은다음에, 그것을현재화면에보여주고있는전면버퍼와바꿔치기 (swapping buffer) 하는방법 Swapping 은보통모니터 (50Hz) 의수직공백기간동안이루어짐 대부분의 PC 는그래픽깜박임결과에서이동기화를사용하도록설정하는경향이있음 Double buffering은부드러운 18 애니메이션에유용함 Visibility and Depth Buffer 색버퍼 (color buffer) 와동일한해상도임 깊이버퍼 (z-buffer, depth buffer) 는그리고자하는픽셀당깊이정보 (depth value) 를가짐 Z-buffer algorithm은새로운픽셀을그릴때마다, 새로운깊이정보를깊이버퍼 (z-buffer) 안에있는깊이 (depth) 정보와비교하여, 더먼것이깊이버퍼에저장됨 다각형 (polygons) 은어떠한방향에서도그려질수있으며교차할수도있음 19 Depth Sorting of Polygons PS1는 Z-Buffering 하지않음. 따라서, polygon은전향순서 (back-to-front order) 로정렬 (depth sorting of polygons) 해서그려야함 Z Buffer 는보통 ~16-32bits/pixel. 픽셀당깊이정보를저장하는버퍼 Z-buffer algorithm은픽셀단위로어느픽셀이다른것보다앞에있는지판단하여작은 z 값을가진것이앞에있는지결정 래스터시 polygon 의깊이정렬화가필요없음

6 Alpha Buffer RGBA alpha는 4번째색으로불투명도 (opacity of color) 조절에사용함 불투명도 (opacity) 는얼마나많은빛이면을관통하는가의척도임 투명도 (transparency) 는 1 alpha로주어짐 Alpha=1.0 완전히불투명 Alpha=0.5 - 반투명 Alpha=0.0 완전히투명 알파블렌딩 물체의색을투명하게나타나게함 21 Blending and Drawing Order 블렌딩은현재그리고자하는물체와이전에그려진물체의그림그리는순서 (drawing order) 가중요함 블렌딩함수의 source color( 현재그리고자하는물체의색 ) 와 destination color ( 이미그려진프레임버퍼의색 ) 로작용함 만약투명한물체와불투명한물체를같이그리고자한다면, 불투명부터먼저그린후에투명한것을그릴것 Depth-buffer가블렌딩전에실행되도록함 만약여러개의투명한물체를같이그리고자한다면, 전향순서 (back-to-front order) 로그릴것 이순서는카메라의위치에의해서달라질수있음 여러개의투명한물체를같이그릴때, 서로를가리는현상 (occlusion) 을막기위해서 depth mask를비활성화함 깊이버퍼를 read-only 로만듬 22 Blending and Drawing Order Drawing order Viewpoint i Viewpoint Alpha blending occurs Stencil Buffer 특수한효과를위한 off-screen buffer Back buffer, depth buffer와동일한해상도임 Stencil buffer를사용하여 back buffer의일정부분이렌더링되지않도록함 스텐실참조값 (reference value) 와마스크 (mask) 를비교 (comparison) 하여특정픽셀의렌더링여부를결정 마스킹 (masking) 또는컬링 (culling) 에주로사용 대표적으로는거울 (mirror), 그림자 (h (shadow) 구현에사용 예를들어, 벽면에거울이있는경우, 벽면을제외하고거울이있는영역에대해서만반사되는물체의 drawing 을수행하도록함 24

7 Coordinate Systems 왼손좌표계 Left-handed Coordinate System (DirectX) Z Y X 오른손좌표계 Right-handed Coordinate System (OpenGL) Y X Z 25 Vertex 정점 (vertex) 은공간적위치 부가적특성 표면의법선벡터 (surface normal) 색 (color) 텍스쳐좌표 (texture coordinate) 그외에데이터세이더프로그램에서필요한정보들.. 한삼각형 (triangle) 은세개의점 (vertices) 를사용 인접한삼각형 (adjacent triangle) 에대한정점은공유됨 26 Triangle Index 3차원물체의기본구성요소 (fundamental primitive) 선과스프라이트만제외한폴리곤등모든물체는삼각형 (Triangle) 으로만들어질수있음 예를들어, 사각형은두개의삼각형으로표현할수있음 세점으로한평면을형성함 삼각평면은텍스쳐 (textures) 와색 (colors) 정보와연결됨 v3 v2 v3 triangle1 v2 Index 만약 index list가사용하지않을경우, 너무많은정점 (vertices) 이중복됨 중복된정점을줄이기위해 vertex list 와 index list 를사용함 Vertex list는모든 vertex들 Index list는 vertex list로의 index값들 triangles v3 v2 v3 v2 triangle0 v0 v1 v0 v1 Vertex rect[6] = { v0, v1, v2, // triangle 0 v0, v2, v3 }; // triangle 1 Vertex의나열순서 (winding order) 를꼭지켜야함 27 v0 v1 v0 v1 Vertex vertexlist[4] = { v0, v1, v2, v3}; // vertex list int indexlist[6] = {0, 1, 2, // index list 0, 2, 3 }; 28

8 Polygons, Meshes Transformations 변환은좌표계의원점을중심으로일어남 이동 (Translate) 크기변환 (Scale) V1 Raster Scan line 회전 (Rotate) V2 V Transformation Order Matters Hierarchy of Coordinate Systems Box centered at Rotate about Z 45; Translate along X 1; origin Translate along X 1 Rotate about Z 45 흔히부르길, Scene graph Parent and child entities Local coordinate system 31 32

Projection) Camera Perspective Projection

Clipping Plane 원근투영 (Perspective Projection)

Twist는일반적으로사용되지않음 (Descent 게임을제외하고 ) View

zoom-out out 은부자연스러우며위험스러움 3인칭시점카메라 (Third

lag이있어야함 캐릭터가움직이지않거나게이머가제어할때만회전이가능하도록함 카메라의

Lighting 광원 (lighting source) 에서출발 물체표면에서재질

9 Camera Parallel vs. Perspective Projection 평행투영 (Parallel Projection) Camera Perspective Projection Projection Plane Near Clipping Plane Far Clipping Plane 원근투영 (Perspective Projection) View Volume Camera Movement 1인칭시점카메라 (First person camera) 게이머가카메라를직접제어함 ( 캐릭터에의한것이아님 ) 지면으로부터높이는일반적으로시스템에의하여이루어짐 Twist는일반적으로사용되지않음 (Descent 게임을제외하고 ) View volume은원근투영에중요함 모니터뒤의게이머의위치에의해영향을받음 zoom-in 또는 zoom-out out 은부자연스러우며위험스러움 3인칭시점카메라 (Third person camera) 캐릭터로부터일정한거리에위치함 움직임에는약간의 lag이있어야함 캐릭터가움직이지않거나게이머가제어할때만회전이가능하도록함 카메라의 up-vector ( 즉, twist) 에조심할것 장애물이있을시조심할것 Lighting 광원 (lighting source) 에서출발 물체표면에서재질 (material) 에따라 흡수 (absorption) 반사 (reflection) 투과 (transmission) 또는굴절 (refraction) 물체를본다는것은우리눈으로입사하는빛에의함 물체색은광원, 물체, 관찰자위치, 광원과물체의특성에의해결정 35 36

10 Light Source 일반적인광원 (light source) 은매우작업하기어렵다왜냐하면광원으로부터나온모든빛에대한통합을해야하기때문에. CG 에서는간단한광원 (light source) 을사용함 환경광원 (Ambient light) 장면에서언제어디서나같은양의빛을제공 점광원 (Point light) 위치 (position) 와색 (color) 을모델 방향성광원 (Directional light) 방향 (direction) 을모델 (parallel light) 점적광원 (Spot light) 이상적인점광원에서빛의방향을제한 Ambient Reflection 광원에직접노출되지않는면에밝기를부여 모든빛의경로를추적하기어려움 면마다상수크기의밝기를추가 전역조명모델효과를근사적으로부여 Diffuse Reflection 면의방향에따라차등적밝기로입체감부여 램버트법칙 (Lambertian Law) 면의밝기는입사각의코사인에정비례. 입사각이 0도일때가장많이반사되고 90 도일때반사되지않음. 입사각 : 광원벡터, 법선벡터사이각 Specular Reflection (Phong Lighting Model) 반질반질한표면에서반사되는빛 가장많은정반사는시점 (viewpoint) 이빛의방향에정확히반대방향일때생김 ( 즉, alpha가 0도일때 ) 정반사 (specular reflection) 는 alpha가커질수록급격하게감쇠함 빛의세기감쇠는 cos n (alpha) 로근사적으로계산 재질에따라 n은 1에서수백사이로지정함 n=1 이면넓고부드럽게빛의세기가약해짐 n이커지면작고선명하게빛의세기가약해짐. 결과적으로생성되는하이라이트가작게나타남 완벽한정반사모델은 n 이무한대임 39 40

11 Fall off in Phong Shading Large n Small n Flat, Gouraud, and Phong Shading Shading - 음영또는표면렌더링 (surface rendering) - 물체면의색을부여 Flat shading 41 Gouraud shading 42 Phong shading Flat Shading 주어진하나의다각형전체를동일한색으로칠함. 빠르고간단함. 다각형을구성하는다각형정점의위치를평균하여중심점 (centroid) 를구하고, 중심점에서의법선벡터, 광원벡터, 시점벡터를기준으로조명모델이가해지며그결과색이면내부를모두채움 상수셰이딩 (constant shading), 깎은면셰이딩 (facet shading) Gouraud Shading 정점의색을보간함 정점의법선벡터를요함. 인접면의법선벡터를평균하여구함 정점의색으로부터내부면의색을선형보간 다각형내부를서로다른색으로채우는방법 경면광 (specular highlight) 을감안하지않음 실제적인정점의법선벡터와근사적으로계산된법선벡터가완전히일치하지않기때문 I1 I1,2 I1,2,3,4 I1,3 Raster Scan line 43 I2 I3 44

12 Phong Shading Texture Maps Used in Tank Game 정점의색대신정점의법선벡터를보간. N1 N1,2 N1,2,3,4 N1,3 Raster Scan line N2 곡면의기울기가복원됨. 경면광 (specular highlight) 을부여할수있음. N1,3 N1,2 N Texture Mapping 제한된수의다각형을사용해야하는실시간렌더링에있어서비교적적은추가비용으로이미지의사실성을상당히높일수있는기법임 v Multipass Rendering 같은물체를다른모드를사용하여여러번렌더링하는것 예를들어, 라이트맵 (lightmap) 효과를위해물체를정상적으로그리고난후블렌딩함수를사용하여같은물체를다시한번그려줌 u 47 48

실제로쓰이는의미는 수직 수평 깊이 즉 x, y, z 축으로의값을표현하는것임 폴리곤의표면상의한점은최종적으로 x, y, z 축의기울기를모두갖게되는것임 최근게임에서는노말맵이 high-polygon 장면에서계산된다음 low-polygon 모델에맵핑되어생생하게세부묘사를하고있음

13 Billboarding 물체의방향이언제나카메라를향하도록하는것 Normal Mapping 노말맵의정식명칭은 normal bump map 임. 기본적으로 bump map과마찬가지로픽셀당노말벡터를수정하여작은요철을표현하는데사용됨. Billboards Regular texture map Texture map + Normal map Real Normal Mapping 노말맵은 R,G,B 채널로되어있으며, 이세값은폴리곤표면의 tangent에관련된법선벡터의방향을나타냄. 실제로쓰이는의미는 수직 수평 깊이 즉 x, y, z 축으로의값을표현하는것임 폴리곤의표면상의한점은최종적으로 x, y, z 축의기울기를모두갖게되는것임 최근게임에서는노말맵이 high-polygon 장면에서계산된다음 low-polygon 모델에맵핑되어생생하게세부묘사를하고있음 Bump Mapping 노말맵이있기전까지는흑백의이미지 (greyscale texture) 를사용해서어둡고밝은부분에따라높낮이 (height field) 를조정하는범프맵 (bunp map) 을사용 픽셀단위로폴리곤의표면에서밝은부분은튀어나오게하고어두운부분은들어가게함 Perturbed normals Polygon surface Height field 51 52

14 Displacement Mapping 노말맵 / 범프맵은폴리곤의옆면에서보게되면편평하게보이는단점이존재함 디스플레이스먼트맵핑 (displacement mapping) 을사용하면메쉬 (mesh) 의실제 geometry를움직여서보다울퉁불퉁하게보이게할수있음 디스플레이스먼트맵의높낮이 (height field) 는메쉬의 geometry를법선벡터에따라옮겨놓는데사용 Bump Displacement 53 Texture mapping 각종텍스쳐맵핑기법 Color (diffuse reflection coefficients) - Texture mapping Specular color - 반사빛 (specular light) 과반사계수 (reflection coefficients) 를시뮬레이션하는방법 Environment mapping은높은반사표면 (highly specular surface) 을렌더링할수있는저렴한방법 Normal vector 재질 (material) 의거칠기 (roughness) 와구조 (structure) 를시뮬레이션하는방법 Bump mapping/normal mapping 은노말벡터를교란하여실제같이울퉁불퉁한표면을만들어냄. 그러나표면의기하학적구조 (surface geometry itself) 를바꾸지않음. Position 일반적으로표면에서부터수직으로위치를바꿈 Displacement mapping Transparency - glass effects 방법 (no refraction though) 하드웨어에서의텍스쳐맵핑은하드웨어에서텍스쳐 54 맵핑에일치하는라이팅계산을해줘야가능함 Modeling Polygonal Representations Levels 2차원하드웨어 - pixels 3차원하드웨어 - filled triangles with textures and Gouraud shading 저수준 3차원그래픽스라이브러리 same plus Phong shading, 변환 (transformations), 투영 (projections), 클리핑 (clipping) 그래픽엔진 - levels of detail, curved primitives, etc 모델링패키지도구 - solid modeling, CSG, fractals, parametric surfaces, etc. 55 Polygon Gouraud 나 Phong shading 을사용하여 smooth한표면 텍스쳐맵핑을사용해서일부상세한표현가능 폴리곤설계의어려움 Manual 3 차원스캐닝 어떻게점들을연결할지 인터랙티브한생성 기본요소 ( 구, 입방체, 등 ), extrusions, sweeping volumes Mesh generation Density dependent on curvature Problems with crossing boundaries 고수준기하요소생성 Constructive solid geometry (CSG), Extrusions, Curves and surfaces 56

15 Polygonal representations Level of Detail (LOD) 사용하는이유 메쉬의단순화 (mesh simplification) 거리에따라다른복잡한구조를사용함 (level of detail approximation) 인터넷으로프로그래시브한전송 (progressive transmission) 문제점 기법 어떤정점을버려야할지 어떻게부드러운표면으로만들지 (geomorph) 픽셀수준의몰핑 (morphing) 을사용함 어떻게저장을줄일지 모델의일부를선택적으로개선할지 Resampling Edge collapse/edge swaps Vertex removal and retriangulation 57 Landscape/Terrains Terrains은특수하게처리해야함 연결된것 (continuous) 매우커서물체클리핑이필요하지않는것 (no object clipping) LOD가좀더어려움 Height fields 픽셀이높낮이정보인 2차원비트맵 (bitmap) 사용 쉽게그릴수있음 쉽게삼각형표현으로변환시킬수있음 별개의색깔맵 (color map) 이나높낮이정보 (height field) 로생성 Fractal landscape generation 모델링패키지지원 Level of Detail (LOD) Triangle binary tree 를사용 LOD시갑작스럽게사라지는 peaks나 valleys의문제가있음 다른 LOD에서높이간의보간이필요함 58 보다나은방법으로, 주요특징에기반한 tree를구성함 Additional issues 그림자 (shadows) 빛과물체하나하나씩에관련된계산이요구됨 지면에서만사용 ( 지면을하나의별개물체로취급함 ) Shadow volumes Shadow z-buffers 투명 (transparency) Back to front drawing order 반사 (reflections) 반사맵 (reflection maps) 스텐실버퍼를사용하여더블렌더링 (double rendering) 세이더 (shaders) HLSL, GLSL, Cg 프로그램으로버텍스나픽셀의내용을변경 Efficiency 아직도게임그래픽을효과적으로만들기는어려움 때문에, 주의깊은설계가요구됨 Level of detail (LOD) techniques 클리핑 (clipping) 포탈기법 (portal techniques) 레벨디자인 (level design) 충돌검사 (collision detection) 59 60

16 Reference

Microsoft PowerPoint - lecture19-ch8.ppt

Microsoft PowerPoint - lecture19-ch8.ppt Alpha Channel Alpha Blending 321190 2007년봄학기 6/1/2007 박경신 Alpha Channel Model Porter & Duff s Compositing Digital Images, SIGGRAPH 84 RGBA alpha는 4번째색으로불투명도 (opacity of color) 조절에사용함 불투명도 (opacity) 는얼마나많은빛이면을관통하는가의척도임