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

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

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

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

Bump Mapping

Mapping

Environment Mapping

Texture Mapping + =

= +

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

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

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

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)

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

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]

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

Texture Mapping xs ys s t x y z

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

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

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

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

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

การกำหนดค่าต่างๆของ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

การกำหนดค่าต่างๆของ 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)

การกำหนดค่าต่างๆของ 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

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;} }

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

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

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

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

Texture Parameter Magnification Minification texel pixel Polygon

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

Minification

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

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

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); }

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

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);

Texture Parameter

การกำหนดตำแหน่งของ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();

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();

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 );

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

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 ….

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

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

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

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

วิธีการใช้ 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();

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

ตัวอย่าง 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(); */

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

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();

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