1 Kim, Sung-Ho School of Computer, Information and Communication Engineering Sangji Univ.

Presentation on theme: "1 Kim, Sung-Ho School of Computer, Information and Communication Engineering Sangji Univ."— Presentation transcript:

1 1 Kim, Sung-Ho School of Computer, Information and Communication Engineering Sangji Univ.

2 2 2 Texture 학습목표 텍스쳐의 정의와 종류를 이해한다. 평면 다각형의 텍스쳐 매핑 방법을 이해한다. 파라미터로 표현된 곡면 다각형의 텍스쳐 매핑 방법을 이해한다. 파라미터로 표현할 수 없는 곡면 다각형의 텍스쳐 매핑 방법을 이해한다. 텍스쳐 매핑에서 에일리어싱이 일어나는 이유와 앤티 - 에일리어싱 방법 을 이해한다. 지엘의 텍스쳐 매핑방법을 이해한다.

3 3 3 Texture Map- Texture Map-pp.557 원래의 정의 물체면에 인위적으로 미세한 굴곡을 부여함으로써 주름 면을 형 성 법선벡터 조정 = Bump Map 확산광 계수 변화, 표면 거칠기를 함수화하여 경면광에 반영 [ 그림 11-1] 법선벡터 변화에 의한 범프맵

4 4 4 Texture Map-pp.558 다각형 분할 서로 다른 색, 표면 기울기를 부여 너무 많은 시간이 소요됨 대신 2 차원 영상을 직접 평면 표면에 입힘  텍스쳐 (Texture, Texture Image, Texture Map) [ 그림 11-3] 목재표면 [ 그림 11-4] 오렌지 [ 그림 11-5] 텍스쳐 I [ 그림 11-6] 텍스쳐 II

5 5 5 Texture Mapping 예 -pp.559 일반적 Texture Mapping Light Mapping 물체면의 밝기를 계산하는 대신 Texture 와 조명 결과를 혼합하여 결과적 인 영상을 직접 물체면에 입힘. [ 그림 11-7] 예 [ 그림 11-8] 원구 [ 그림 11-9] 매핑결과 [ 그림 11-10] 라이트

6 6 6 Texture Mapping 예 -pp.560 주변 매핑 (Environmental Mapping) 물체 외부 환경이 해당 물체면에 반사 반짝이는 물체면을 표현 [ 그림 11-11] 원구 [ 그림 11-12] 매핑 결과

7 7 7 Texture Mapping 기법 -GL 의 Texture Mapping-pp.561 매핑 시기 기하 파이프라인과 영상 파이프라인 래스터 변환에서 만남 [ 그림 11-13] 지엘의 텍스쳐 매핑 시기 [ 그림 11-14] 기하 파이프라인과 영상 파이프라인

8 8 8 Texel-pp.562 Texel(Texture Element) Texture 영상의 기본단위 화소 (Pixel) 와 마찬가지로 (R, G, B, A) 저장 예 : 6 ☓ 5 크기의 2 차원 배열로 저장. Texture 좌표는 정규화 형태로 표현. Texture Mapping: (s, t) 좌표로 표현된 2 차원 Texture 영상을 (x, y, z) 좌표 로 표현된 3 차원 물체면으로 사상 [ 그림 11-15] 텍스쳐 매핑

9 9 9 평면다각형으로의 Texture Mapping-pp.562-563 수작업 좌표명시 [ 그림 11-16] 수작업 텍스쳐 매핑 I [ 그림 11-17] 수작업 텍스쳐 매핑 II

10 10 Mapping 방향 -pp.564-565 [ 그림 11-18] 삼각형 내부화소 매핑 [ 그림 11-19] 에일리어싱 [ 그림 11-20] 원근변환 다각형에서 Texture 로 화소 (Pixel) 별로 해당 Texture 를 구함 Aliasing 발생가능 Projection 이후에 Texture 를 가하는데 따른 오류

11 11 곡면의 Texture Mapping-pp.565 평면으로 곡면을 둘러싸는데 따르는 어려움 역으로 곡면으로 평면을 만드는데 따르는 어려움 [ 그림 11-21] 곡면 I [ 그림 11-22] 곡면 II

12 12 파라미터 곡면 -pp.566 예 : 원구 ( 표면상의 점을 경도, 위도로 표현가능 ) [ 그림 11-23] 원구좌표 (11.3) (11.4) (11.5) [ 그림 11-24] 평면 텍스쳐를 원구 표면으로 매핑 (11.6) (11.7) (11.8) (11.9)

13 13 다각형 곡면 -pp.567 2 단계 매핑 (2-Stage Mapping) 곡면을 매개변수로 표시할 수 없을 때 S Mapping 에서는 Texture 를 원기둥, 육면체, 원구 등 중개면 ( 仲介, Intermediate Surface) 에 입힘. S Mapping 의 예 : 원기둥 중개면 [ 그림 11-25] 원기둥 중개면 [ 그림 11-26] 좌표 (11.11) (11.12) (11.10)

14 14 다각형 곡면 -pp.568 O 매핑 물체를 중개면 내부에 넣고 물체면에 텍스쳐를 입힘. 원기둥, 육면체, 원구 중개면 [ 그림 11-27] 캡 [ 그림 11-28] 중개면 [ 그림 11-30] 확장 캡 [ 그림 11-34] 육면체 중개면 [ 그림 11-35] 물체 [ 그림 11-36] 매핑결과 [ 그림 11-32] 중개면 [ 그림 11-33] 매핑결과

15 15 다각형 곡면 ( 계속 ) O 매핑의 종류 물체면 법선벡터, 물체 중심, 중개면 법선벡터, 시점 반사벡터 [ 그림 11-29] O 매핑의 종류

16 16 Environmental Mapping-pp.570-572 경면 반사 (Specular Reflection) 를 위주로 표현할 수 있는 물체, 반사 매핑 (Reflective Mapping). Ex. Terminator II 2 단계 매핑 사용 O 매핑에서 시점 반사벡터를 사용 시점 위치에 따라 서로 다른 모습 [ 그림 11-37] Terminator II [ 그림 11-38] 중개면 텍스쳐 [ 그림 11-39] 주변매핑 [ 그림 11-40] 매핑 결과

17 17 Environmental Mapping ( 계속 ) 원구 중개면의 예 물체주변 모습을 광각으로 반영 180 도 어안렌즈로 촬영된 Texture [ 그림 11-41] 180 도 [ 그림 11-42] 매핑결과 [ 그림 11-43] 시점 반사벡터에 의한 O 매핑

18 18 Anti-Aliasing => Aliasing -pp.574-575 텍스쳐 매핑 비선형 매핑 (Non-Linear Mapping): 평면 사각형이 곡선 사변형 (Curvilinear Quadrilateral) 으로 점 샘플링 (Point Sampling) 에 의한 Aliasing: 언더샘플링 [ 그림 11-44] 매핑과 역 매핑 [ 그림 11-45] 에일리어싱

19 19 확장관계와 축소관계 -pp.575 축소관계 (Magnification) 여러 Texel 이 한 Pixel 로 확장관계 (Minification) Texel 크기 이하가 한 Pixel 로 두 경우 모두 Aliasing 발생가능 [ 그림 11-46] 축소관계와 확장관계

20 20 Anti-Aliasing : 양방향 선형보간 -pp.576 확장관계에 주로 사용 화소 (Pixel) 중앙점이 Texel 의 점 p 로 사상되었을 경우 대부분 그래픽 카드에서 표준으로 채택 Texture 경계선이 흐려짐 [ 그림 11-47] 양방향 선형보간

21 21 점 샘플링과 양방향 선형보간 -pp.579 [ 그림 11-53] 점 샘플링과 양방향 선형보간

22 22 Anti-Aliasing : MipMap-pp.577 축소관계에 주로 적용 : 한 화소가 여러 Texel 에 걸쳐짐 MIP Mapping: Multum in Parvo, Many Things in a Small Place 해상도 별로 평균치를 계산하여 Texture Map 에 저장 (R, G, B 별 ) 사전 필터링 (Pre-Filtering), 다해상도 텍스쳐 (Multi-Resolution Texture) [ 그림 11-48] 밉맵 생성과정

23 23 Mipmap 예시 -pp.577 해상도에 따라 Mipmap 을 선택 1 화소 (Pixel) 가 1 Texel 로 Mapping: Map #1 1 화소 (Pixel) 가 4 Texel 로 Mapping: Map #2 평균 낸 Texture 값을 사용함으로써 Anti-Aliasing 을 기함. [ 그림 11-49] 밉맵 [ 그림 11-50] 밉맵 예시

24 24 Anti-Aliasing 예시 ( 계속 ) Mipmap 을 사용한 점 샘플링과 양방향 선형보간 [ 그림 11-54] Mipmap 에서의 점 샘플링과 양방향 선형보간

25 25 GL 의 Texture Mapping-pp.580 Texture 기능 활성화 void glEnable(Glenum mode) void glDisable(Glenum mode)  mode : GL_TEXTURE_1D, GL_TEXTURE_2D, GL_TEXTURE_3D Texture 영상 명시 Glubyte MyTexture[Width][Height][3]  MyTexture[i][j] : 하나의 Texel Void glTexImage2D(Glenum target, Glint level, Glint internalformat, Glsizei width, Glsizei height, Glint border, Glenum format, Glenum type, const Glvoid *texture)  target : GL_TEXTURE_1D, GL_TEXTURE_2D, GL_TEXTURE_3D  level : Mipmap 레벨, 미사용시 0  width, height : Texel 단위의 Texture 폭과 높이  border : 윤곽선 두께 ( 단위 : Texel)  internalformat : Texel 을 기술하는데 사용된 요소 배열로 표현된 영상을 텍스쳐 영상으로 사 용하기 위한 함수

26 26 GL 의 Texture Mapping ( 계속 ) Texture 영상 명시 ( 계속 ) Void glTexImage2D(Glenum target, Glint level, Glint internalformat, Glsizei width, Glsizei height, Glint border, Glenum format, Glenum type, const Glvoid *texture) ( 계속 )  format : 특수한 경우를 제외하고 internalformat 과 동일하게 할당  type  texture : 실제 Texture 영상이 저장된 배열명

27 27 GL 의 Texture Mapping : 수동 Mapping-pp.585 glBegin(GL_POLYGON); glNormal3f(0.0, 0.0, 1.0); glTexCoord2f(0.2, 0.8); 텍스쳐 정점 a 를 glVertex3f(7.5, 10.5, 0.0); 물체 정점 A 에 할당 glNormal3f(0.0, 0.0, 1.0); glTexCoord2f(0.4, 0.2); 텍스쳐 정점 b 를 glVertex3f(0.0, 3.8, 0.0); 물체 정점 B 에 할당 glNormal3f(0.0, 0.0, 1.0); glTexCoord2f(0.8, 0.4); 텍스쳐 정점 c 를 glVertex3f(12.0, 0.0, 0.0); 물체 정점 C 에 할당 glEnd( ); [ 그림 11-56] GL 의 수동 Texture Mapping

28 28 GL 의 Texture Mapping : 자동 Mapping-pp.586 void glTexGen{ifd}[v](GLenum coord, GLenum pname, TYPE param); 기준평면과의 물체와의 거리 [ 그림 11-57] 거리에 의한 텍스쳐 매핑 [ 표 11-3] glTexGen*( ) 함수 파라미터

29 29 주변 매핑 -pp.591 도구이용, 카메라 (180 도 ), 카메라 (360) 도 카메라 (360 도 ) [ 그림 11-58] 반사 [ 그림 11-59] 180 도 [ 그림 11-60] 360 도

30 30 Texture Parameter 명시 -pp.592 void glTexParameter{if}(Glenum target, Glenum pname, TYPE param) target : Texture 가 2D 인지 3D 인지의 표현 pname GL_TEXTURE_WRAP_S, GL_TEXTURE_WRAP_T Wrapping( 래핑, 감싸기 ) – S 방향과 T 방향으로 Texture 를 어떻 게 확장할 것인가를 결정 GL_TEXTURE_MAG_FILTER, GL_TEXTURE_MIN_FILTER Filtering - 해당 화소 (Pixel) 의 Texture 선택 방법을 결정

31 31 Texture Parameter 명시 ( 계속 ) void glTexParameter{if}(Glenum target, Glenum pname, TYPE param) ( 계속 ) param GL_REPEAT, GL_CLAMP [ 그림 11-63] GL_REPEAT [ 그림 11-65] 예 II [ 그림 11-66] 텍스쳐 매핑 결과 pp.595-596 확인

32 32 Texture Parameter 명시 ( 계속 ) void glTexParameter{if}(Glenum target, Glenum pname, TYPE param) ( 계속 ) param GL_REPEAT, GL_CLAMP 을 사용한 Texture tile 의 문제점 [ 그림 11-67] 접합부 [ 그림 11-68] 접합부 불일치

33 33 Texture Parameter 명시 ( 계속 ) void glTexParameter{if}(Glenum target, Glenum pname, TYPE param) ( 계속 ) param GL_NEAREST : 점 샘플링 GL_LINEAR : 양방향 선형 보간에 해당하는 것으로 인접한 4 개의 Texel 을 보간 GL_LINEAR_MIPMAP_NEAREST : 주어진 해상도에 가장 가까운 MIPMAP_NEAREST 을 선택한 후 해당 Mipmap 내에서 양방향 선형 보간을 가하는 방법 GL_NEAREST_MIPMAP_NEAREST : MIPMAP_NEAREST 에서 다시 점 샘 플링을 가하는 방법 GL_LINEAR_MIPMAP_LINEAR : Mipmap 사이를 보간하여 새로운 MIPMAP_LINEAR 을 만든 후 해당 Mipmap 내에서 양방향 선형 보간을 가 하는 방법 – 가장 부드러운 Anti-Aliasing 효과 [ 그림 11-69, 70] 그림 64 및 그림 65 에 GL_LINEAR 을 적용한 결과

34 34 Texture 환경 명시 -pp.598 void glTexEnv{if}(Glenum target, Glenum pname, TYPE param) target : GL_TEXTURE_ENV pname GL_TEXTURE_ENV_MODE : Texture 의 색과 물체면의 색을 어떻 게 조합할 것인가를 명시 GL_TEXTURE_ENV_COLOR : GL_TEXTURE_ENV_MODE 의 타 입 Parameter 가 GL_BLEND 일 때만 사용

35 35 Texture 환경 명시 ( 계속 ) void glTexEnv{if}(Glenum target, Glenum pname, TYPE param) ( 계속 ) param GL_REPLACE : 기존 물체면의 색을 완전히 텍스처 색으로 대체 GL_MODULATE : 기존 물체면 색과 Texture 색을 곱해서 최종 색을 결정 GL_DECAL, GL_BLEND : 물체면 위에 Texture 색을 덧칠하는 효과 [ 그림 11-71] GL_REPLACE(a) 와 GL_MODULATE(b)

36 36 Texture 객체 -pp.600-602 Texture 객체 : Texture 와 해당 Texture 에 적용되는 Parameter 값을 묶어서 하나 의 Texture 객체를 정의 void glGenTextures(Glsizei N, Gluint *TextureNameArray) Texture 객체 명을 자동으로 할당하기 위한 함수 N : 할당된 객체의 개수 TextureNameArray : Texture 객체명이 저장될 배열명 void glBindTexture(Glenum target, Gluint TextureName) 실제로 Texture 객체를 생성하고 객체명을 할당하는 함수 target : Texture 의 종류 TextureName : 프로그래머가 사용하는 Texture 명

37 37 GL 프로그램 예 -pp.603-610 띠무늬 Texture Using the Quadrics Using the Quadrics 참조 Bitmap File Texture [ 그림 11-72] GL_REPLACE 와 GL_MODULE 의 결과

38 38 Bitmap Image File(*.bmp) 을 이용한 Texture Mapping Source void loadTexture(void) { AUX_RGBImageRec *texRec[11]; memset(texRec, 0, sizeof(void *)*11); if((texRec[0]=LoadBMP("data/Sun.bmp")) && (texRec[1]=LoadBMP("data/Mercury.bmp")) && … (texRec[9]=LoadBMP("data/Neptune.bmp")) && (texRec[10]=LoadBMP("data/Sunshine.bmp"))) { for(i=0; i<11; i++) { glGenTextures(1, &tex[i]); glBindTexture(GL_TEXTURE_2D, tex[i]); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexImage2D(GL_TEXTURE_2D, 0, 3, texRec[i]->sizeX, texRec[i]->sizeY, 0, GL_RGB, GL_UNSIGNED_BYTE, texRec[i]->data); } for(i=0; i<11; i++) { if(texRec[i]) { if(texRec[i]->data) free(texRec[i]->data); free(texRec[i]); } glEnable(GL_TEXTURE_2D); glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); } Bitmap Image (*.bmp) (*.bmp) 2n2n2n2n 2n2n2n2n

39 39 Texture Mapping 이 가능한 Sphere Source void renderSphere( float cx, float cy, float cz, float r, int p ) { int i, j; const float PI = 3.14159265358979f; const float TWOPI = 6.28318530717958f; const float PIDIV2 = 1.57079632679489f; float theta1 = 0.0; float theta2 = 0.0; float theta3 = 0.0; float ex = 0.0f; float ey = 0.0f; float ez = 0.0f; float px = 0.0f; float py = 0.0f; float pz = 0.0f; // Disallow a negative number for radius. if( r < 0 ) r = -r; // Disallow a negative number for precision. if( p < 0 ) p = -p; // If the sphere is too small, just render a OpenGL point instead. if( p < 4 || r <= 0 ) { glBegin( GL_POINTS ); glVertex3f( cx, cy, cz ); glEnd(); return; } for(i = 0; i < p/2; ++i ) { theta1 = i * TWOPI / p - PIDIV2; theta2 = (i + 1) * TWOPI / p - PIDIV2; glBegin(GL_TRIANGLE_STRIP); { for(j = 0; j <= p; ++j ) { theta3 = j * TWOPI / p; ex = cos(theta2) * cos(theta3); ey = sin(theta2); ez = cos(theta2) * sin(theta3); px = cx + r * ex; py = cy + r * ey; pz = cz + r * ez; glNormal3f( ex, ey, ez ); glTexCoord2f( -(j/(float)p), 2*(i+1)/(float)p ); glVertex3f( px, py, pz ); ex = cos(theta1) * cos(theta3); ey = sin(theta1); ez = cos(theta1) * sin(theta3); px = cx + r * ex; py = cy + r * ey; pz = cz + r * ez; glNormal3f( ex, ey, ez ); glTexCoord2f( -(j/(float)p), 2*i/(float)p ); glVertex3f( px, py, pz ); } glEnd(); } #include 삽입 cx, cy, cz : 구의 중심 좌표 r : radius ( 반지름 ) p : precision ( 정밀도 ) #include 삽입 cx, cy, cz : 구의 중심 좌표 r : radius ( 반지름 ) p : precision ( 정밀도 )