บทที่ 5 Texture Mapping Texture mapping ทำการ map หรืออวางรูปพื้นผิวแบบต่างๆลงบนโครงที่ได้จากขั้นตอนก่อนๆ เพื่อให้เริ่มเห็นเป็นรูปต้นๆ ขึ้นมาว่าอะไรขนาดเท่าไหร่ด้วย.

งานนำเสนอเรื่อง: "บทที่ 5 Texture Mapping Texture mapping ทำการ map หรืออวางรูปพื้นผิวแบบต่างๆลงบนโครงที่ได้จากขั้นตอนก่อนๆ เพื่อให้เริ่มเห็นเป็นรูปต้นๆ ขึ้นมาว่าอะไรขนาดเท่าไหร่ด้วย."— ใบสำเนางานนำเสนอ:

1 บทที่ 5 Texture Mapping Texture mapping ทำการ map หรืออวางรูปพื้นผิวแบบต่างๆลงบนโครงที่ได้จากขั้นตอนก่อนๆ เพื่อให้เริ่มเห็นเป็นรูปต้นๆ ขึ้นมาว่าอะไรขนาดเท่าไหร่ด้วย

2 Texture Mapping ทำได้ 2 วิธี
- Surface detail polygons: กำหนด Polygon แต่ละตัวตามสีที่ต้องการ - ถ้าภาพที่ต้องการซับซ้อน  Speed down! - รูปบางอย่างสร้างยาก(หาโมเดลไม่ได้) Map a texture to the surface (ใช้ทั่วไป) ความซับซ้อนของภาพไม่มีผลต่อ การจัดการทางเรขาคณิต (transformation, clipping…)

3 Texture Mapping เทคโนโลยีที่เอาภาพ(image)ไปแปะบนพื้นผิวของวัตถุ
ไม่ต้องทำModelingให้ซับซ้อนแต่ก็สร้างภาพที่ดูแล้วเหมือนจริงได้

4 Texture Mapping 1. projection 3. patch texel 2. texture lookup
3D geometry 2D projection of 3D geometry S t 2D image

5 Bump Mapping

6 Mapping

7 Environment Mapping

8

9 Texture Mapping + =

10 = +

11 ตัวอย่าง เอาภาพมาแปะที่ตัวคน s t

12 Map textures to surfaces
(0,0) (1,0) (1,1)

13 Texture Texture = ข้อมูลของ pixelที่บันทึกไว้ในรูปแบบของ array
Pixelของ textureเราเรียกว่า “textel” Texture coordinate: (s,t) (s,t): s และ t จะมีค่า 0~1

14 Texture Representation
Bitmap (pixel map) textures (supported by OpenGL) Bitmap texture: เป็นภาพ2มิติแสดงได้ด้วย 2D array texture[height][width] แต่ละเซ็ล (texel ) จะมีคู่กับจุด texture coordinate (s, t) s=[0,1], t=[0,1] s t (0,0) (1,1)

15 Texture Mapping t s texel[j][k]: เก็บข้อมูลสีของ texture
400 600 s texel[j][k]: เก็บข้อมูลสีของ texture j:0~599, k:0~399

16 Texture Mapping t s Color3 texture(float s,float t){
return texel[(int)s*W][(int)t*H]; } s t 400 600 texture(0,0)texel[0][0] texture(0,1)texel[0][399] texture(1,0)texel[599][0] texture(1,1)texel[599][399] texture(0.261,0.783)texel[156][313]

17 Texture Mapping การเอาภาพ(image)ไปแปะบน polygon xs ys s t x y z

18 Texture Mapping xs ys s t x y z

19 Texture Mapping s t ys s = xs t = ys xs s t ys xs s = 2xs /3 t = ys
(1,1) ys (1,1) s = xs t = ys xs s t (1,1) ys xs (3/2,1) s = 2xs /3 t = ys

20 Texture Component 1 component texture:
จะแสดงความสว่างของแสงเท่านั้น เช่น ไม้ สนามหญ้า หาดทรายขาว

21 Texture Component 2 component texture:
จะแสดงความสว่างของแสงและความโปร่งใส เช่น เมฆ

22 Texture Component 3 component texture: จะแสดงสีของแสง(RGB)

23 Texture Component 4 component texture:
จะแสดงสีของแสงและค่าความโปร่งใส(RGBA)

24 การกำหนดค่าต่างๆของTexture Texture Setup
GLvoid glTexImage2D(Glenum target,GLint level,GLint components, GLsizei width,GLsizei height,GLint border,GLenum format, GLenum type,const GLvoid *image); target เป็น GL_TEXTURE_2D level(mipmap level) 0: ภาพที่เป็น original i: ภาพ mipmap ลำดับที่ i

25 การกำหนดค่าต่างๆของ Texture
GLvoid glTexImage2D(Glenum target,GLint level,GLint components, GLsizei width,GLsizei height,GLint border,GLenum format, GLenum type,const GLvoid *image); Component(1~4) Width(2^m) Height(2^n) Border(0 or 1)

26 การกำหนดค่าต่างๆของ Texture
GLvoid glTexImage2D(Glenum target,GLint level,GLint components, GLsizei width,GLsizei height,GLint border,GLenum format, GLenum type,const GLvoid *image); Format เช่น GL_RGB,GL_RGBA type ประเภทของ texel เช่น GL_BYTE,GL_UNSIGNED_BYTE Image ภาพที่จะนำมาทำเป็น texture มีขนาด 2^m x 2^n

27 Generate Texture #define ImageWidth 8 #define ImageHeight 8
static Glubyte textureImage1[ Width][ Height][ 4]; void generateTexture1() { int i, j, c; for (i= 0; i< ImageWidth; i++) for (j= 0; j< ImageHeight; j++) { c = (( i& 0x8)^( j& 0x8)) * 255; textureImage1[ i][ j][ 0] = (GLubyte) c; textureImage1[ i][ j][ 1] = (GLubyte) c; textureImage1[ i][ j][ 2] = (GLubyte) c; textureImage1[ i][ j][ 3] = 255;} }

28 Generate Texture 3 component texture 4 component texture R0 G0 B0 R1

29 การกำหนดค่าต่างๆของ Texture
glTexImage2D( GL_ TEXTURE_ 2D, 0, 4, Width, Height,0, GL_ RGBA, GL_ UNSIGNED_ BYTE,textureImage1 );

30 Texture Object GLuint textureID; glGenTextures(1, &textureID);
glBindTexture(GL_TEXTURE_2D, textureID); glTexImage2D(GL_TEXTURE_2D, …); จำนวน texture object มี 1 อัน มี ID คือ? สร้าง texture object กำหนดค่าต่างๆเช่น format … เรียกใช้ texture ชื่อ textureID

31 Texture Parameter void glTexParameteri( GLenum target,GLenum pname,TYPE param ); target : GL_ TEXTURE_ WRAP_ S GL_ TEXTURE_ WRAP_ T GL_ TEXTURE_ MAG_ FILTER GL_ TEXTURE_ MIN_ FILTER GL_ TEXTURE_ BORDER_ COLOR GL_ TEXTURE_ PRIORITY

32 Texture Parameter Magnification Minification texel pixel Polygon

33 Magnification Parameter GL_NEAREST: เลือก texelที่ใกล้ที่สุด
GL_LINEAR: หาค่าเฉลี่ยของ texel รอบๆ 4 texel

34 Minification

35 Mipmap การขยายหรือย่อขนาดของ texture ทำให้เกิดการกระพริบเวลา reshape
OpenGL จะเลิกใช้ mipmap ที่เหมาะสมโดยอัตโนมัติ

36 Mipmap GLubyte mipmapImage32[ 32][ 32][ 4];
void createMipMaps() { .... }

37 Mipmap void createMipMaps() { ....
glTexImage2D( GL_ TEXTURE_ 2D, 0, GL_ RGBA, 32, 32, 0, GL_ RGBA, GL_ UNSIGNED_ BYTE,mipmapImage32); glTexImage2D( GL_ TEXTURE_ 2D, 1, GL_ RGBA, 16, 16, 0, GL_ RGBA, GL_ UNSIGNED_ BYTE,mipmapImage16); glTexImage2D( GL_ TEXTURE_ 2D, 2, GL_ RGBA, 8, 8, 0, GL_ RGBA, GL_ UNSIGNED_ BYTE,mipmapImage8); }

38 Texture Parameter GL_Repeat (0,0) (2,2) (0,0) (2,2) GL_Clamp (0,0)
If (s >1) s = 1 If (t >1) t = 1 (0,0) (1,1) texture

39 Texture Parameter glTexParameteri( GL_ TEXTURE_ 2D, GL_ TEXTURE_ WRAP_ S,GL_ REPEAT); glTexParameteri( GL_ TEXTURE_ 2D, GL_ TEXTURE_ WRAP_ T,GL_ REPEAT); glTexParameteri( GL_ TEXTURE_ 2D, GL_ TEXTURE_ WRAP_ S,GL_ CLAMP); glTexParameteri( GL_ TEXTURE_ 2D, GL_ TEXTURE_ WRAP_ T,GL_ CLAMP);

40 Texture Parameter

41 การกำหนดตำแหน่งของtexture บน polygon
glBegin( GL_QUADS ); glTexCoord2fv( t0 ); glVertex3fv( v0 ); glTexCoord2fv( t1 ); glVertex3fv( v1 ); glTexCoord2fv( t2 ); glVertex3fv( v2 ); glTexCoord2fv( t3 ); glVertex3fv( v3 ); glEnd(); glBegin( GL_QUADS ); glTexCoord2fv(0.0,0.0 ); glVertex3fv(-2.0,0.0,0.0); glTexCoord2fv(1.0,0.0); glVertex3fv(0.0,-2.0,0.0); glTexCoord2fv(1.0,1.0); glVertex3fv(2.0,0.0,0.0); glTexCoord2fv(0.0,1.0); glVertex3fv(0.0,2.0,0.0); glEnd();

42 TextureVertex glBegin( GL_ QUADS);
glTexCoord2d( 0. 0, 0.0 ); glVertex3d( x0, y0, z0 ); glTexCoord2d( 1. 0, 0.0 ); glVertex3d( x1, y1, z1 ); glTexCoord2d( 1. 0, 1.0 ); glVertex3d( x2, y2, z2 ); glTexCoord2d( 0. 0, 1.0 ); glVertex3d( x3, y3, z3 ); glEnd();

43 TextureVertex glBegin( GL_ QUADS);
glTexCoord2d( 0. 0, 0. 0 ); glVertex3d( x0, y0, z0 ); glTexCoord2d( 1. 0, 0. 0 ); glVertex3d( x1, y1, z1 ); glTexCoord2d( 1. 0, 1. 0 ); glVertex3d( x2, y2, z2 ); glTexCoord2d( 0. 0, 1. 0 ); glVertex3d( x3, y3, z3 ); glEnd(); glTexCoord2d( 4. 0, 0. 0 ); glVertex3d( x1, y1, z1 ); glTexCoord2d( 4. 0, 4. 5 ); glVertex3d( x2, y2, z2 ); glTexCoord2d( 0. 0, 4. 5 ); glVertex3d( x3, y3, z3 );

44 Enable (Disable) Textures
Enable texture – glEnable(GL_TEXTURE_2D) Disable texture – glDisable(GL_TEXTURE_2D)

45 Put it all together … glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); glEnable(GL_TEXTURE_2D); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 64, 64, 0, GL_RGB, GL_UNSIGNED_BYTE, mytexture); Draw_picture1(); // define texture coordinates and vertices in the function ….

46 ก้อนคำสั่งทางกราฟฟิก เก็บเอาไว้ใน memory
Display List ก้อนคำสั่งทางกราฟฟิก เก็บเอาไว้ใน memory จะเสียเวลานานนิดนึงในการสร้าง display list การเรนเดอร์ภาพจะเร็วขึ้นมาก

47 เรียกใช้คำสั้งวาดภาพที่ เก็บไว้ใน display list
Display List Model Display List เรียกใช้คำสั้งวาดภาพที่ เก็บไว้ใน display list glBegin(GL_LINES); glVertex(…); …. glEnd();

48 คุณสมบัติของ display list
เร็วเพราะไม่ต้องเสียเวลาคำนวณใหม่ สับเปลี่ยน texture หลายๆแบบได้ ออกแบบโมเดลที่มีความสัมพันธ์แบบ Tree ได้

49 วิธีการสร้าง Display List
Gluint glGenLists(int count); สร้างและกำหนดชื่อ display list คืน ID(ชื่อ) count คือจำนวนของ display list ที่ต้องการสร้าง Glboolean glIslist(Gluint list); ตรวจสอบว่าชื่อ list ถูกใช้แล้วหรือยัง

50 วิธีการใช้ Display List
Glvoid glNewList(Gluinit Listindex,Glenum Mode); …… Glvoid glEndList(); Listindex: ชื่อ display list Mode: GLCOMPILE, GLCOMPILE_AND_EXECUTE glNewList( 1, GL_COMPILE ); glColor3fv( colorVector ); glTranslatef( 1.5, 0.0, 0.0 ); glBegin( GL_TRIANGLES ); glVertex2f( 0.0, 0.0 ); glVertex2f( 1.0, 0.0 ); glVertex2f( 0.0, 1.0 ); glEnd(); glEndList();

51 ลบ Display List GLvoid glDeleteLists( GLuint rstIndex, GLsizei count )

52 ตัวอย่าง glNewList( 1, GL_COMPILE ); /*สร้าง [1] */ drawFin();
glEndList(); glNewList( 2, GL_COMPILE ); /* สร้าง [2] */ drawFish(); glNewList( 3, GL_COMPILE ); /* สร้าง [3]（run [1]、[2]*/ glCallList( 1 ); glCallList( 2 ); ・ ・ ・ glCallList( 3 ); /* drawFin(); drawFish(); */

53 Display List glNewList( 1, GL_COMPILE ); /* define ใหม่ [1] */
drawNewFin(); glEndList(); ・ ・ ・ glCallList( 3 ); /* drawNewFin(); drawFish(); */

54 Texture+Display List glNewList( 1, GL_COMPILE ); /*สร้าง [1] */
glEndList(); glNewList( 2, GL_COMPILE ); /* สร้าง [2] */ สร้าง texture 2 …. glCallList(1); glBegin(GL_QUADS); กำหนด vertex ของ polygons glEnd(); glCallList(2); glBegin(GL_QUADS); กำหนด vertex ของ polygons glEnd();

55 glTexImage2D(GL TEXTURE 2D, 0, GL RGBA, 64, 64, 0, GL RGBA, GL UNSIGNED BYTE, MIPLevels[0]);