62
1 (Shading) (Shading)

음 영 (Shading)

Embed Size (px)

DESCRIPTION

음 영 (Shading). 음영의 개요. 음영이 없으면 3차원 물체도 2차원 이미지로 보일 수 있음 빛과 면사이의 상호 관계를 모델에 추가 광원 재질. 음영 (Shading). 조명과 재질 광원 Phong 반사 모형 벡터의 계산 다각형 음영 순환적 분할에 의한 구의 근사 OpenGL 의 광원 OpenGL 에서 재질의 지정 구 모델의 음영처리 전역적 렌더링. 조명과 재질. 조명과 반사를 물리적으로 완전히 모델링 하는 것은 불가능. 단순화. - PowerPoint PPT Presentation

Citation preview

Page 1: 음 영  (Shading)

1

음음 영 영 (Shading)(Shading)

Page 2: 음 영  (Shading)

음영 음영 (Shading)(Shading)

2

음영의 개요음영의 개요

음영이 없으면 3 차원 물체도 2 차원 이미지로 보일 수 있음

빛과 면사이의 상호 관계를 모델에 추가 광원 재질

Page 3: 음 영  (Shading)

음영 음영 (Shading)(Shading)

3

음영 음영 (Shading)(Shading)

조명과 재질 광원 Phong 반사 모형 벡터의 계산 다각형 음영 순환적 분할에 의한 구의 근사 OpenGL 의 광원 OpenGL 에서 재질의 지정 구 모델의 음영처리 전역적 렌더링

Page 4: 음 영  (Shading)

음영 음영 (Shading)(Shading)

4

조명과 재질조명과 재질

조명과 반사를 물리적으로 완전히 모델링 하는 것은 불가능

A 와 B 사이에 무수한 반사작용이

발생

국지적 조명 모델 (Phong 반사모형 등 ) : 물리적 정확성과 계산효율의 절충

전역적 방법으로 근사 ( 광선 추적 , 방사성 기법 ) : 그래픽스 파이프라인에 부적합

단순화

단순화

Page 5: 음 영  (Shading)

음영 음영 (Shading)(Shading)

5

조명 모형조명 모형

전역적 모형 광원과 표면 사이의 다중 상호 작용 고려

국지적 모형 광원과 표선사이의 단일 상호 작용만을 고려 표면상의 한 점은 다른 표면상의 점들에 독립적

Page 6: 음 영  (Shading)

음영 음영 (Shading)(Shading)

6

빛과 표면빛과 표면

인간

Page 7: 음 영  (Shading)

음영 음영 (Shading)(Shading)

7

빛빛 , , 표면과 컴퓨터 이미지표면과 컴퓨터 이미지

컴퓨터

관측자를 투영면으로 대치

많은 광선들은 투영면의 절단 사각형을 통과하지 않음

Page 8: 음 영  (Shading)

음영 음영 (Shading)(Shading)

8

표면의 종류표면의 종류

전반사면 난반사면 반투명면

Page 9: 음 영  (Shading)

음영 음영 (Shading)(Shading)

9

음영 음영 (Shading)(Shading)

조명과 재질

광원 Phong 반사 모형 벡터의 계산 다각형 음영 순환적 분할에 의한 구의 근사 OpenGL 의 광원 OpenGL 에서 재질의 지정 구 모델의 음영처리 전역적 렌더링

Page 10: 음 영  (Shading)

음영 음영 (Shading)(Shading)

10

광원 광원 (Light Sources)(Light Sources)

광원 : 위치 (x, y, z) , 방향 (, ), 파장 조도함수 : I ( x, y, z, , , )

Page 11: 음 영  (Shading)

음영 음영 (Shading)(Shading)

11

백열 전구 광원백열 전구 광원

I ( x, y, z, , , )광원에 의한 총 기여도 :

),,,,,( 11111 xyxI

),,,,,( 22222 xyxI

계산이 어려움 : 단순화된 광원 모델이 필요

Page 12: 음 영  (Shading)

음영 음영 (Shading)(Shading)

12

색 광원색 광원

광원은 주파수 의 연속함수이지만 단순한 R-G-B 모형을 사용한다 .

b

g

r

I

I

I

II )(

Page 13: 음 영  (Shading)

음영 음영 (Shading)(Shading)

13

광원의 종류광원의 종류

주변광 (Ambient Light)

점광원 (Point Light Source)

집중광선 (Spot Light)

원거리 광원 (Distant Light)

Page 14: 음 영  (Shading)

음영 음영 (Shading)(Shading)

14

주변광 주변광 (Ambient Light)(Ambient Light)

균일한 조명 실내의 객체들간의 다중 상호작용에 의해 형성된

조명을 모델 객체의 모든 점에서 동일한 세기의 빛을 받음

ab

ag

ar

a

I

I

I

I

Page 15: 음 영  (Shading)

음영 음영 (Shading)(Shading)

15

점광원 점광원 (Point Light Source)(Point Light Source)

모든 방향으로 균일하게 빛을 방사

)(

)(

)(

)(

0

0

0

0

PI

PI

PI

PI

b

g

r

2

0

00

)(),(

PP

PIPPI

조도는 거리의 제곱에 반비례

Page 16: 음 영  (Shading)

음영 음영 (Shading)(Shading)

16

점광원 점광원 (con’t)(con’t)

대비가 큰 이미지가 만들어진다 실제의 광원은 유한한 크기를 가지고 있으므로

좀더 부드러운 이미지가 만들어짐 주변광을 사용하여 높은 대비 효과를 완화시킬 수

있음 부드러운 조명을 위해 거리항을 수정

22

11

cdbdad

암영부

반영부

Page 17: 음 영  (Shading)

음영 음영 (Shading)(Shading)

17

집중광선 집중광선 (Spot Light)(Spot Light)

작은 각도로만 빛을 방출

가 감쇄도를 제어 )(e

eI cos

Is

S

e : 집중광선 지수

Page 18: 음 영  (Shading)

음영 음영 (Shading)(Shading)

18

집중광선 집중광선 (con’t)(con’t)

두 단위 벡터가 주어졌을 경우 cos 값 계산

cos |v| |u| v • u

3

2

1

a

a

a

u

3

2

1

b

b

b

v

332211 bababa v u

332211

3

2

2

2

1

2

3

2

2

2

1

2

332211 babababbbaaa

bababa

cos |v| |u|

vu

u v

Page 19: 음 영  (Shading)

음영 음영 (Shading)(Shading)

19

원거리 광원원거리 광원

점광원 표면상의 각 점으로부터 광원으로의 방향을 계산해야

함 ( 많은 시간 소요 , 보다 좋은 화질 )

원거리 광원 방향을 한번만 계산 ( 빠른 계산 , 화질이 떨어짐 )

1

0 z

y

x

P

0

0 z

y

x

P 각 점에 대한 방향 동일

광원의 위치 광원의 방향

점광원점광원 원거리 광원원거리 광원

Page 20: 음 영  (Shading)

음영 음영 (Shading)(Shading)

20

음영 음영 (Shading)(Shading)

조명과 재질 광원

Phong 반사 모형 벡터의 계산 다각형 음영 순환적 분할에 의한 구의 근사 OpenGL 의 광원 OpenGL 에서 재질의 지정 구 모델의 음영처리 전역적 렌더링

Page 21: 음 영  (Shading)

음영 음영 (Shading)(Shading)

21

PhongPhong 반사 모형반사 모형

물리적 정확성과 계산효율의 절충 모형이다 . 그래픽스 파이프라인에 적합

Phong 모형에서 사용되는 벡터들

광원

법선벡터 관측자

완전 반사 방향

Page 22: 음 영  (Shading)

음영 음영 (Shading)(Shading)

22

PhongPhong 반사 모형 반사 모형 (con’t)(con’t)

세가지 광 - 재질 상호 작용 지원 주변반사 난반사 전반사

각 광원이 삼원색에 대하여 별도의 주변광 성분 , 난반사광 성분 , 전반사광 성분을 갖는다고 가정

Page 23: 음 영  (Shading)

음영 음영 (Shading)(Shading)

23

PhongPhong 반사 모형 반사 모형 (con’t)(con’t)

점 P 에서 i 번째 광원의 조도 행렬

점 P 에서의 반사항 행렬

ibsigsirs

ibdigdird

ibaigaira

i

LLL

LLL

LLL

L

ibsigsirs

ibdigdird

ibaigaira

i

RRR

RRR

RRR

R

Page 24: 음 영  (Shading)

음영 음영 (Shading)(Shading)

24

PhongPhong 반사 모형 반사 모형 (con’t)(con’t)

광원 i 에 의한 P 에서의 적색 세기

점 P 에서 적색 세기

점 P 의 색의 세기

irsirdira

irsirsirdirdirairair

III

LRLRLRI

ari

irsirdirar IIIII )(

bgr IIII ssddaa

sda

RLRLRL

IIII

Page 25: 음 영  (Shading)

음영 음영 (Shading)(Shading)

25

주변반사 주변반사 ((Ambient Reflection)Ambient Reflection)

주변광의 세기 는 표면의 모든 점에서 같다

반사계수

aaa LkI

aL

aa kR )10( ak

- 0 에서 1 사이의 상수- 표면의 재질에 따라 다름

Page 26: 음 영  (Shading)

음영 음영 (Shading)(Shading)

26

난반사 난반사 (Diffuse Reflection)(Diffuse Reflection)

거친 표면관측각도에 무관

반사되는 양은 광원의 방향에 의존적

정오에 더 밝음

일출과 일몰에 어두움

Page 27: 음 영  (Shading)

음영 음영 (Shading)(Shading)

27

난반사 난반사 (con’t)(con’t)

ddddd LkLRI cos

dd Lk )( nl

dd

d Lcdbda

kI )nl(

2

거리 d 에의한 감쇄를 포함하면

Page 28: 음 영  (Shading)

음영 음영 (Shading)(Shading)

28

전반사 전반사 (Specular Reflection)(Specular Reflection)

매끄러운 표면 반사가 일정 방향으로 됨 관측자의 위치에 따라 반사량이 다름

i r

전반사의 입사각과 반사각이 같음

Page 29: 음 영  (Shading)

음영 음영 (Shading)(Shading)

29

전반사 전반사 (con’t)(con’t)

sssss LkLRI )(cos ss Lk )( vr

) :( 거울 : 광택 계수

Page 30: 음 영  (Shading)

음영 음영 (Shading)(Shading)

30

Phong Phong 모형모형

ssddaa LkLkcdbda

LkI )()(1

2vrnl

Phong 모형에 의한 렌더링

- 재질 특성을 이용하여 각 찻잔이 다르게 보임

Page 31: 음 영  (Shading)

음영 음영 (Shading)(Shading)

31

음영 음영 (Shading)(Shading)

조명과 재질 광원 Phong 반사 모형 벡터의 계산

다각형 음영 순환적 분할에 의한 구의 근사 OpenGL 의 광원 OpenGL 에서 재질의 지정 구 모델의 음영처리 전역적 렌더링

Page 32: 음 영  (Shading)

음영 음영 (Shading)(Shading)

32

다각형 음영다각형 음영

세 가지 음영법1) 평면 음영법2) Gouraud 음영법3) Phong 음영법

곡면을 다각형의 집합으로 렌더링

함으로써 속도 향상

Page 33: 음 영  (Shading)

음영 음영 (Shading)(Shading)

33

평면 음영 평면 음영 (( 균일 음영균일 음영 ))

가정 원거리 관측자 원거리 광원

n, l, v : 상수

각 다각형에 대해서 음영계산이 한번만 이루어짐

Page 34: 음 영  (Shading)

음영 음영 (Shading)(Shading)

34

평면 음영 평면 음영 (con’t)(con’t)

glShadeModel (GL_FLAT)

문제점 : 다각형 경계선이 뚜렷함

Page 35: 음 영  (Shading)

음영 음영 (Shading)(Shading)

35

Mach Mach 띠띠

Page 36: 음 영  (Shading)

음영 음영 (Shading)(Shading)

36

Gouraud Gouraud 음영음영

평면음영과 Gouraud 음영

한 다각형의 음영 계산에 인접한 다각형을 고려다각형 내의 각 화소가 서로 다름 음영 값을 가짐

                                                       

glShadeModel(GL_FLAT) glShadeModel(GL_SMOOTH)

Page 37: 음 영  (Shading)

음영 음영 (Shading)(Shading)

37

Gouraud Gouraud 음영의 원리음영의 원리

다각형 내의 각 화소에 대한 음영을 개별적으로 계산하는 것은 많은 시간이 소요됨

다각형의 정점에서만 음영 계산

다각형 내의 각 화소에 대해서정점의 음영을 보간

Page 38: 음 영  (Shading)

음영 음영 (Shading)(Shading)

38

각 정점에서 법선의 계산각 정점에서 법선의 계산

4321

4321

nnnn

nnnnn

각 정점에 대해서 인접한 다각형들의 법선을 평균 정점에서의 음영 계산

Page 39: 음 영  (Shading)

음영 음영 (Shading)(Shading)

39

보간 보간 (Interpolation)(Interpolation)

n0 => c0n1 => c1

n2 => c2n3 => c3

정점들의 광도를 보간

5445

3223

1001

)1()(

)1()(

)1()(

CCC

CCC

CCC

N : 법선 벡터C : 음영

Page 40: 음 영  (Shading)

음영 음영 (Shading)(Shading)

40

Phong Phong 음영법음영법

알고리즘 각 정점에 대해서

• 인접한 다각형들을 찾는다 .• 다각형의 법선을 보간함으로써 정점에서의 법선을 계산

다각형 내의 각 화소에 대해서• 법선을 보간• 음영을 계산

더 많은 계산량 , 하드웨어 구현이 더 어려움

Page 41: 음 영  (Shading)

음영 음영 (Shading)(Shading)

41

법선의 보간법선의 보간

BA nn)1()(n

DC nn)1(),(n

Page 42: 음 영  (Shading)

음영 음영 (Shading)(Shading)

42

음영 음영 (Shading)(Shading)

조명과 재질 광원 Phong 반사 모형 벡터의 계산 다각형 음영 순환적 분할에 의한 구의 근사

OpenGL 의 광원 OpenGL 에서 재질의 지정 구 모델의 음영처리 전역적 렌더링

Page 43: 음 영  (Shading)

음영 음영 (Shading)(Shading)

43

OpenGLOpenGL 의 광원의 광원

8 개 까지의 광원을 허용한다각 광원별로 광원의 위치 ( 점광원 ) 또는 방향 ( 원거리광원 ) 주변광 , 난반사광 , 전반사 광원의 세기 지정

glLightfv(source, parameter, pointer_to_array);glLightf(source, parameter, value);

Page 44: 음 영  (Shading)

음영 음영 (Shading)(Shading)

44

광원 사용 방법광원 사용 방법

GLfloat light_0_pos[] = {1.0, 2.0, 3.0, 1.0}; GLfloat light_0_dir[] ={ 1.0, 2.0, 3.0, 0.0};

GLfloat diffuse_0[] = {1.0, 0.0, 0.0, 1.0};GLfloat ambient_0[] ={ 1.0, 0.0, 0.0, 1.0};GLfloat specular_0[] = {1.0, 1.0, 1.0, 1.0};

glEnable(GL_LIGHTING);glEnable(GL_LIGHT0);

glLightfv(GL_LIGHT0, GL_POSITION, light_0_pos);glLightfv(GL_LIGHT0, GL_AMBIENT, ambient_0);glLightfv(GL_LIGHT0, GL_DIFFUSE, diffuse_0);glLightfv(GL_LIGHT0, GL_SPECULAR, specular_0);

각 종류 별 세기

첫번째 광원 활성화

조명 활성화

광원 위치

광원방향

Page 45: 음 영  (Shading)

음영 음영 (Shading)(Shading)

45

광원 사용 방법 광원 사용 방법 (con’t)(con’t)

전역적 주변광

GLfloat global_ambient[] = {0.1, 0.1, 0.1, 1.0};glLightModelfv(GL_LIGHT_MODEL_AMBIENT,

global_ambient);

glLightf(GL_LIGHT0, GL_CONSTANT_ATTENUATION, a); glLightf(GL_LIGHT0, GL_LINEAR_ATTENUATION, b); glLightf(GL_LIGHT0, GL_QUADRATIC_ATTENUATION, c);

2

1

cdbda 의 상수 값 설정

Page 46: 음 영  (Shading)

음영 음영 (Shading)(Shading)

46

광원 사용 방법 광원 사용 방법 (con’t)(con’t)

관측자의 위치

glLightModeli(GL_LIGHT_MODEL_LOCAL_VIEWER, GL_TRUE);

전면과 후면 모두 렌더링

glLightModel(GL_LIGHT_MODEL_TWO_SIDED, GL_TRUE);

전 , 후면 모두 렌더링

Page 47: 음 영  (Shading)

음영 음영 (Shading)(Shading)

47

광택계수 지정광택계수 지정

전반사의 광택계수 지정

sssss LkLRI )(cos

glLightf(GL_LIGHT0, GL_SPOT_EXPONENT, int a)

1 a 128

a = 2.0 a = 25.0

Page 48: 음 영  (Shading)

음영 음영 (Shading)(Shading)

48

전반사의 범위 지정전반사의 범위 지정

glLightf(GL_LIGHT0, GL_SPOT_CUTOFF, float degree)

0 degree 90

degree = 10.0 degree = 30.0

Page 49: 음 영  (Shading)

음영 음영 (Shading)(Shading)

49

음영 음영 (Shading)(Shading)

조명과 재질 광원 Phong 반사 모형 벡터의 계산 다각형 음영 순환적 분할에 의한 구의 근사 OpenGL 의 광원

OpenGL 에서 재질의 지정 구 모델의 음영처리 전역적 렌더링

Page 50: 음 영  (Shading)

음영 음영 (Shading)(Shading)

50

OpenGLOpenGL 에서 재질의 지정에서 재질의 지정

재질 지정 함수

glMaterialfv(face, type, pointer_to_array); glMaterialf(face, value);

예 ) GLfloat ambient[] = {0.2, 0.2, 0.2, 1.0}; GLfloat diffuse[] = {1.0, 0.8, 0.0, 1.0}; GLfloat specular[] = {1.0, 1.0, 1.0, 1.0};

glMaterialfv(GL_FRONT_AND_BACK, GL_AMBIENT, ambient); glMaterialfv(GL_FRONT_AND_BACK, GL_DIFFUSE, diffuse); glMaterialfv(GL_FRONT_AND_BACK, GL_SPECULAR, specular);

Page 51: 음 영  (Shading)

음영 음영 (Shading)(Shading)

51

OpenGLOpenGL 에서 재질의 지정 에서 재질의 지정 (con’t)(con’t)

표면의 광택 지수 glMaterialf(GL_FRONT_AND_BACK, GL_SHININESS, 100.0);

빛을 내는 표면

GLfloat emission[] = 0.0, 0.3, 0.3, 1.0; glMaterialfv(GL_FRONT_AND_BACK, GL_EMISSION, emission);

Page 52: 음 영  (Shading)

음영 음영 (Shading)(Shading)

52

재질 예재질 예

Material GL_AMBIENT GL_DIFFUSE GL_SPECULAR GL_SHININESS 결과

Brass

0.32940.22350.0275

1.0

0.78040.56860.1137

1.0

0.99210.94120.8078

1.0

27.89

                      

Bronze

0.21250.12750.054

1.0

0.7140.4284

0.181441.0

0.39350.27190.1667

1.0

25.6

                      

Chrome

0.250.250.251.0

0.40.40.41.0

0.77460.77460.7746

1.0

76.8

Page 53: 음 영  (Shading)

음영 음영 (Shading)(Shading)

53

재질 예 재질 예 (con’t)(con’t)

Copper

0.19130.07350.0225

1.0

0.70380.27050.0828

1.0

0.25680.13760.0860

1.0

12.8                  

     

Gold

0.24730.19950.0745

1.0

0.75160.60650.2265

1.0

0.0.62830.55580.3661

1.0

51.2

                      

Pewter

0.10590.05880.1137

1.0

0.42750.47060.5412

1.0

0.33330.33330.5216

1.0

9.85

                      

Page 54: 음 영  (Shading)

음영 음영 (Shading)(Shading)

54

텍스쳐 매핑 텍스쳐 매핑 (Texture (Texture Mapping)Mapping)

텍스쳐를 다각형에 매핑

Page 55: 음 영  (Shading)

음영 음영 (Shading)(Shading)

55

사전 준비사전 준비

파일 준비 ( 스캐너 , 인터넷 등 ) 윈도우 BMP 형식으로 저장 ( 확장자 = .bmp) 크기를 64 X 64, 128 X 128, 256 X 256 등과

같이 할것 색상 : 24bit 컬러로 지정 (8bit 흑백도 가능 )

BMP 파일을 읽기 위한 프로그램 준비 Readbmp.c Readbmp.h

Page 56: 음 영  (Shading)

음영 음영 (Shading)(Shading)

56

BMP BMP 파일 읽기파일 읽기

readBmpFile 함수 사용unsigned char *image;int width, height, bitcount;

readBmpFile("heesun.bmp", &image, &width, &height, &bitcount);

Page 57: 음 영  (Shading)

음영 음영 (Shading)(Shading)

57

텍스쳐 지정텍스쳐 지정

형식 glTexImage2D(GL_TEXTURE_2D, level, components, width, height, border, format, type,tarray);

예 glTexImage2D(GL_TEXTURE_2D, 0, 3, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, image);

Page 58: 음 영  (Shading)

음영 음영 (Shading)(Shading)

58

텍스쳐 지정 텍스쳐 지정 (con’t)(con’t)

옵션 설정

glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);

glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);

텍스쳐 매핑 활성화glEnable(GL_TEXTURE_2D);

Page 59: 음 영  (Shading)

음영 음영 (Shading)(Shading)

59

텍스쳐 좌표 매핑텍스쳐 좌표 매핑

glBegin(GL_QUADS); glTexCoord2f(0.0, 0.0);

glVertex3fv(vertices[a]); glTexCoord2f(1.0, 0.0); glVertex3fv(vertices[b]); glTexCoord2f(1.0, 1.0); glVertex3fv(vertices[c]); glTexCoord2f(0.0, 1.0); glVertex3fv(vertices[d]);glEnd();

Page 60: 음 영  (Shading)

음영 음영 (Shading)(Shading)

60

음영 음영 (Shading)(Shading)

조명과 재질 광원 Phong 반사 모형 벡터의 계산 다각형 음영 순환적 분할에 의한 구의 근사 OpenGL 의 광원 OpenGL 에서 재질의 지정 구 모델의 음영처리

전역적 렌더링

Page 61: 음 영  (Shading)

음영 음영 (Shading)(Shading)

61

전역적 렌더링 전역적 렌더링 (Rendering)(Rendering)

광선추적 (Ray Tracing)

Page 62: 음 영  (Shading)

음영 음영 (Shading)(Shading)

62

전역적 렌더링 전역적 렌더링 (con’t)(con’t)