게임 개발을 위한 렌더링 기법 한성환

게임 개발을 위한 렌더링 기법

민커뮤니케이션MAD 팀 한성환

2010.05.26

목차

ShadingBase RenderingAdvanced Rendering렌더링 관련 최적화

Shading

Flat ShadingGouraud ShadingPhong Shading

Flat Shading

Gouraud Shading

Phong Shading

Base Rendering(Gouraud Shading)

Feature ( 특징 )DiffuseSpecular장단점

Feature(Gouraud Shading)

점단위의 Color 계산 두점 사이의 컬러값 선형보간

Diffuse

점의 Normal 방향

Light 방향 내적

Material Dif-fuse

Light Diffuse

Diffuse 문제 Light Diffuse Color ( 255, 255, 0 ) Material Diffuse Color ( 0, 0, 255 ) 무슨 컬러가 나올까요 ~?

LightDiffuse * MaterialDiffuse * 내적(Normal,LightDir)

R = 255 * 0 * 내적수치 ; G = 255 * 0 * 내적수치 ; B = 0 * 255 * 내적수치 ; Color( R, G, B ) -> Color( 0, 0, 0 )

Specular

점의 Normal 방향

Light 방향 캐릭터 시점 Half Vector 내적 ( Half,

Normal )

Base Rendering 장단점

작업이 쉽다 .모든 그래픽

카드에 지원이 가능하다 .

퀄리티가 부족하다 .

장점 단점

Base Rendering 의 보완책은…Phong ShadingSpecular 는 점단위에 의지 하지

않도록 작업

Pixel Shader 1.4 = Phong Shading

Normalize()

Pixel 단위 Normal 수치 선형 보간

우리에게 필요한 것은 ~!!

Phong Shading 은 Pixel Shader 2.0 이상 부터 지원

Advanced Rendering

Environment Map-ping

- Sphere Mapping - Cube Mapping Toon Shading Edge Rendering Rim Lighting Glow Fur Rendering

T&L 에 있는 것 전부 NormalMap

T&L Shader

Sphere Mapping #1

SphereMapping #2 카메라 시점 Vertex 의 Normal TEXTURETRANSFORM-

FLAGS -

D3DTSS_TCI_CAMERASPACENORMAL

- Normal (-1~1) -> UV (-1~1)

텍스쳐 행렬 - D3DTS_TEXTURE0 - UV (-1~1) -> UV (0~1)

x = ( (x) * 0.5 + 0.5 );

y = ( -(y) * 0.5 + 0.5 );

0.0, 1.0

0.7, 0.7

1.0, 0.00.0, 0.0 0.5, 0.0

0.35, 0.35

0.0, 0.5

-1.0, 0.0

0.0, -1.0

0.0, 0.5 0.5, 0.5 0.75, 0.5 1.0, 0.5

0.5, 0.0

0.5, 1.5

0.85, 0.15

0.5, 0.75

0.67, 0.67

Advanced Rendering




T&L Shader

RimLight #1 ( SphereMapping )

RimLight #2

RimLight 원리 ( T&L 용 )

카메라 공간에서의 Normal 수치를 가지고 텍스쳐를 입힘

Sphere Mapping Sphere Texture 를 조작 D3DTSS_COLOROP 는 D3DTOP_ADD

사용

Advanced Rendering




T&L Shader

Cube Mapping #1

Cube Mapping #2

왜곡 현상이 덜 하다 . 여러방향에서 Environment map-

ping 을 볼수 있다 .

Sphere Mapping 과 비교

( 하지만 시각적으로 인지하기 어려움 .)

Cube Mapping #3


Cube Mapping #4

왜곡 현상이 덜 하다 . 여러방향에서 Environment map-

ping 을 볼수 있다 . Texture Size 가 크다 . 실시간으로 만드는 것이 비교적 쉽다 .


( 하지만 시각적으로 인지하기 어려움 .)

Cube Mapping #5

실시간 생성

Advanced Rendering




T&L Shader

Toon Shading #1 Light 방향 Vertex 의 Normal TEXTURETRANSFORM-

FLAGS -

D3DTSS_TCI_CAMERASPACENORMAL

텍스쳐 행렬 - D3DTS_TEXTURE0

Toon Shading #2

Toon Shading #3 T&L 의 Texture 방식의 Feature - Shading 용 텍스쳐로 여러 느낌가능 . - Diffuse Color 를 Phong Shading 비슷하게 할

수 있음 .

- Phong Shading 느낌의 Specular 는 불가능 - Line 이 곡선이 아닌 직선으로 생김

Advanced Rendering




T&L Shader

Edge Rendering #1

One Pixel 짜리 선 생성 메쉬 내부에서 선 생성 메쉬 외부에서 생성되는 외각선 Pixel Shader 를 사용하여 Pixel 에

기입

종류

Edge Rendering #2

WIREFRAME Render

Z bias Anti-Aliasing

Sphere Mapping 응용

RimLight 와 반대되는 Image 를 사용함 .

One Pixel 선 생성 메쉬 내부에서 선 생성(Silhouette Edge Rendering)

Edge Rendering #3Surface Angle Silhouetting

Edge Rendering #4

Normal 방향으로 스케일된 Mesh 를 Render

미리 계산된 Normal Mesh 를 생성

Mesh 생성시 정점을 Merge 시켜줌

메쉬 외부에서 선 생성

Edge Rendering #5NormalMesh 를 그대로 사용할 경우

문제점같은 위치에 있는 점이지만 Merge 되어 있지 않은 상태

( 노멀값이 다른 상태 )

Edge Rendering #6

Laplician Filter - ColorBuffer - Z Buffer - Normalmap

Pixel Shader 를 이용

Advanced Rendering




T&L Shader

Glow #1 좌우로 늘린 후 상하로

늘린다 . GPU 부하와 Quality Texture Size Pixel Move Count

- 512- 3

칸

Glow #2

Glow #3

Advanced Rendering




T&L Shader

Fur Rendering #1

ALPHA TEST

여러층의 Mesh

구현 방법 예제 ) 완다와 거상

Fur Rendering #2

면을 평평한 각도로 보면 어색함이 표시

추가 Ren-dering 필요 .

값 비싼 Al-pha Test 필요

단점

Advanced Rendering




T&L Shader

NormalMap #1 Use Shader

High Quality

Graphic Card 의 가격하락과 성능향상 ( Pixel Shader 지원 카드 대중화 )

Specular 하나만으로도 충분한 효과 발휘

NormalMap #2

Advanced Rendering




메르메르에서 쓰이는 연마효과

T&L Shader

메르메르에서 쓰이는 연마효과이미지의 조합으로 연마효과를 만듬 .Ambient 수치를 변경Specular 수치 변경특정 Texture 를 흐르게 작업 .

(Flow Tex-ture)

연마효과 (Flow Texture 셋팅방법 )

RenderTarget 을 이용하여 Flow Texture 2 장을 대칭되게 움직여 랜덤한 이미지 생성

새로 생성한 이미지를 Sphere Mapping 과 같은 원리로 작업 .

컬러도 customizing 가능하도록 작업 .

렌더링 관련 최적화 DIP Calls

( DrawIndexedPrimitive ) VB Change Texture Changes State Changes sets DrawPrimitiveUP Alpha Tex Index Buffer

( < 500DIP )

( < 500 )

( < 200 )

( < 200 )

속도 향상을 위한 텍스쳐 제작 Texture 는

가능하다면 1장으로 해결

( 단점 - 제작시간이 오래 걸림 . )

Texture 사이즈를 최대한 작게 제작

DDS 포맷 사용

기술적으로 Tex-ture 를 합치는 기능을 만들어 준다 .

옵션에 Texture 사이즈 변경 기능 추가

그래픽 팀 프로그램 팀

DDS 구조 (DXT1)

(16Pixel) 4Byte * 16 = 64Byte

최고와 최저 수치의 Color 를 얻어옵니다 .

( 최고 , 최저 Pixel) 2Byte * 2 = 4Byte

각 Pixel 에 Index 사용으로 2Bit 를 할당합니다 .

(16Pixel) 2Bit * 16 = 32Bit -> 4Byte

(1Pixel) ARGB = 32Bit = 4Byte

(1Pixel) RGB = 16Bit = 2Byte

2Bit 는 0, 1, 2, 3 으로 4 개의 값을 가질수 있습니다 .

최고 최저

1001

3020

11

112

23

3

4Byte(Color) + 4Byte(Index) =8Byte 사용 (16Pixel)

보간보간

DDS 사용 예 Opaque Texture - DXT1

Hard Alpha Tex-ture

- DXT1, DXT3

Soft Alpha Tex-ture

- DXT5

이름을 사용한 Alpha 구별 Opaque Texture - 기존 이름을 사용한다 .

Hard Alpha Texture - 이름 뒤에 _a 를 추가로 붙인다 . ( DXT5

예외 )

Soft Alpha Texture - 이름 뒤에 _a, _a1, _a2 를 추가로

붙인다 . - DXT5 일 경우만 적용

왜 SoftAlpha 는 a, a1, a2 으로 나눴을까 ?

AlphaTest 를 쓰면 OK

하지만… .

Alpha Texture 의 위험성 남발 할 경우 느리다 .

궁금하신 부분이 있으시다면 !!

감사합니다

게임 개발을 위한 렌더링 기법 한성환

Technology