56
조명(Lighting)과 음영(Shading) 01 조명 (Lighting) 02 방사 광원 (Emissive Light Source) 03 반사 광원 (Reflection Light Source) 04 음영 (Shading) 05 Ray Tracing 05

05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

조명(Lighting)과 음영(Shading)

01 조명 (Lighting)

02 방사 광원 (Emissive Light Source)

03 반사 광원 (Reflection Light Source)

04 음영 (Shading)

05 Ray Tracing

05

Page 2: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

01

좌표 변환 Pipeline에서 조명(Lighting)의 위치

조명 (Lighting)

2

Page 3: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

01

조명과 반사에 의한 사물의 인식

조명 (Lighting)

3

Page 4: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

01

광원의 종류에 따른 객체의 음영 표현

조명 (Lighting)

4

(A) Ambient (B) Diffuse (C) Specular

(D) Ambient & Diffuse (E) Diffuse & Specular (F) Ambient & Diffuse & Specular

Page 5: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

02

점광원(Point Light Source)의 종류

방사 광원 (Emissive Light Source)

5

(A) 태양(Sun)

(B) 전등

(C) 촛불

Page 6: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

02

점광원에 의한 두 개 객체의 음영 표현

방사 광원 (Emissive Light Source)

6

코드 5-1

Page 7: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

02

광원으로부터 나오는 빛의 감쇠 비율 조정에 의한 구현 효과

방사 광원 (Emissive Light Source)

7

코드 5-1

Page 8: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

02

광원의 생성을 위한 glLight* 함수의 Prototype

방사 광원 (Emissive Light Source)

8

Page 9: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

02

광원의 속성을 나타내기 위한 glLight*() 함수의 매개변수(Parameter)들

방사 광원 (Emissive Light Source)

9

Page 10: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

02

감쇠 인자를 위한 변수들의 속성

방사 광원 (Emissive Light Source)

10

Page 11: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

02

조명의 활성화 및 비활성화를 위한 함수의 Prototype

방사 광원 (Emissive Light Source)

11

광원의 정의 및 활성화를 위한 함수의 Prototype

Page 12: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

02

방향성 광원의 종류

방사 광원 (Emissive Light Source)

12

Page 13: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

02

SpotLight 핵심 소스

방사 광원 (Emissive Light Source)

13

Page 14: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

02

Spotlight의 구현 결과

방사 광원 (Emissive Light Source)

14

코드 5-4

Page 15: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

1. 주변 반사 (Ambient Reflection)

2. 난 반사 (확산 반사, Diffuse Reflection)

3. 정 반사 (거울 반사, Specular Reflection)

4. 반사광의 합성

반사 광원 (Reflection Light Source) 03

15

Page 16: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

반사 광원 (Reflection Light Source) 03

16

조명의 입사각(Incidence Angle)과 반사각(Reflection Angle)

Page 17: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

1. 주변 반사 03

광원과 주변 반사

17

Page 18: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

2. 난 반사 03

완전 난반사와 방향성 난반사

18

Page 19: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

2. 난 반사 03

난반사광의 세기

19

Page 20: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

2. 난 반사 03

광원의 위치에 따른 난반사의 효과

20

Page 21: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

2. 난 반사 03

난반사광의 계수(Kd )와 주변광의 계수(Ka)의 관계

21

Page 22: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

3. 정 반사 03

정반사와 난반사의 비교

22

Page 23: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

3. 정 반사 03

정반사

23

Page 24: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

3. 정 반사 03

광택 계수 n에 따른 𝑐𝑜𝑠2∅

24

Page 25: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

3. 정 반사 03

정반사광의 계수(Ks )와 광택 계수(n)의 관계

25

Page 26: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

4. 반사광의 합성 03

반사광의 종류에 따른 객체의 모습

26

Page 27: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

4. 반사광의 합성 03

조명의 매개변수(Parameter)들

27

Page 28: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

4. 반사광의 합성 03

광원의 특성과 객체의 특성을 고려하여 구현한 결과

28

코드 5-5

Page 29: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

4. 반사광의 합성 03

glLightModelfv 함수에 대한 Prototype

29

Page 30: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

4. 반사광의 합성 03

glMaterial* 함수에 대한 Prototype

30

Page 31: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

4. 반사광의 합성 03

객체의 특성을 나타내기 위한 glMaterial*() 함수의 매개변수(Parameter)들

31

Page 32: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

1. Flat Shading

2. Gouraud Shading

3. Phong Shading

음영 (Shading) 04

32

Page 33: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

음영 (Shading) 04

33

Shading 적용 전과 후의 비교

(A) Shading 적용 전 (B) Shading 적용 후

Page 34: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

1. Flat Shading 04

마하 밴드 효과(Mach Band Effect)

34

Page 35: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

1. Flat Shading 04

Flat Shading의 구현 결과

35

Page 36: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

2. Gouraud Shading 04

Vertex들의 법선 벡터

36

Page 37: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

2. Gouraud Shading 04

Gouraud Shading의 선형 보간법

37

Page 38: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

2. Gouraud Shading 04

Flat Shading과 Gouraud Shading의 비교

38 (A) Flat Shading (B) Gouraud Shading

Page 39: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

2. Gouraud Shading 04

Gouraud Shading의 경우에 따른 오류

39

Page 40: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

2. Gouraud Shading 04

광원에 의한 객체의 Flat Shading의 구현 결과

40

광원에 의한 객체의 Gouraud Shading의 구현 결과

코드 5-6

Page 41: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

2. Gouraud Shading 04

glShadeModel 함수에 대한 Prototype

41

Page 42: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

3. Phong Shading 04

Phong Shading의 선형 보간법

42

Page 43: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

3. Phong Shading 04

Phong Shading을 위한 법선 벡터

43

(A) 평면 다각형에서의 법선 벡터 (B) 곡면에서의 법선 벡터

Page 44: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

3. Phong Shading 04

Flat Shading, Gouraud Shading 및 Phong Shading의 비교

44

(A) Flat Shading (B) Gouraud Shading (C) Phong Shading

Page 45: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

3. Phong Shading 04

GLSL의 소개

45 3D를 위해 사용되는 Shading Languages

Page 46: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

3. Phong Shading 04

GLSL의 소개

46 GLSL을 포함하는 OpenGL 4.2의 Pipeline

Page 47: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

3. Phong Shading 04

GLSL의 설치 - OpenGL Library : GLEW의 설치

47

Page 48: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

3. Phong Shading 04

GLSL의 설치 - OpenGL : GLEW 환경설정 - I

48

Page 49: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

3. Phong Shading 04

GLSL의 설치 - OpenGL : GLEW 환경설정 - II

49

Page 50: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

3. Phong Shading 04

GLSL의 설치 - OpenGL : GLEW 환경설정 - III

50

Page 51: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

3. Phong Shading 04

GLSL을 위해 GLEW를 사용한 Phong Shading

51 GLEW를 사용하여 Phong Shading을 구현한 결과

코드 5-7

Page 52: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

3. Phong Shading 04

GLSL을 위해 GLEW를 사용한 Phong Shading

52 Uniform 변수에 값을 할당하는 함수에 대한 Prototype

Page 53: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

3. Phong Shading 04

GLSL을 위해 GLEW를 사용한 Phong Shading

53

glGenBuffers 함수에 대한 Prototype

glGetUniformLocation 함수에 대한 Prototype

Page 54: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

Ray Tracing 05

Eye-based Ray Tracing

54

Page 55: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

Ray Tracing 05

Ray Tracing의 구현 결과

55

코드 5-9

Page 56: 05 조명(Lighting)과 (Shading) - SANGJIit.sangji.ac.kr/~3D/ppt/CG/05.pdf · 2017. 5. 16. · 04 3. Phong Shading GLSL을 위해 GLEW를 사용한 Phong Shading 53 glGenBuffers 함수에

Ray Tracing 05

glTexSubImage2D 함수의 Prototype

56