OpenGL L05-Texturing

1. Mohammad Shaker mohammadshaker.com @ZGTRShaker 2015 OpenGL Graphics L05-Texturing

2. Texturing

3. that appears in a video game needs to be textured; this includes everything from plants to people. If things aren’t textured well, your game just won’t look right.

4. OpenGL Architecture Display List Polynomial Evaluator Per Vertex Operations & Primitive Assembly Rasterization Per Fragment Operations Frame Buffer Texture Memory CPU Pixel Operations

6. How to use a Texture? • How to use a Texture? 1. Load the texture 2. Map it into a polygon 3. Draw the polygon

7. How to use a Texture? • How to use a Texture? 1. Load the texture 2. Map it into a polygon 3. Draw the polygon • How to use a Texture? (OpenGL) 1. Specify textures in texture objects 2. Set texture filter 3. Set texture function 4. Set texture wrap mode 5. Set optional perspective correction hint 6. Bind texture object 7. Enable texturing 8. Supply texture coordinates for vertex • How OpenGL store images? – One image per texture object – May be shared by several graphics contexts

8. Textures Coordinates

10. Texture Mapping s t x y z image geometry screen

13. Textures Coordinates s t 1, 10, 1 0, 0 1, 0 (s, t) = (0.2, 0.8) (0.4, 0.2) (0.8, 0.4) A B C a b c Texture Space Object Space

14. Texturing Example

15. Texturing Code GLvoid DrawGLScene() //Set camera and projection GLvoid init() Global scope:

16. Texturing Code glEnable(GL_TEXTURE_2D); glBindTexture(GL_TEXTURE_2D, imageTexId); glScalef(5,5,1); glBegin(GL_QUADS); glTexCoord2f(1,0) ; glVertex3f(1,-1,1); glTexCoord2f(1,1) ; glVertex3f(1,1,1); glTexCoord2f(0,1) ; glVertex3f(-1,1,1); glTexCoord2f(0,0) ; glVertex3f(-1,-1,1); glEnd(); glDisable(GL_TEXTURE_2D); GLvoid DrawGLScene() //Set camera and projection imageTexId = LoadTexture("images//tile.bmp"); GLvoid init() #include "texture.h” int imageTexId; Global scope:

20. Texturing Functions

21. Texturing Functions • Generate texture names glGenTextures(n, *texIds); • Create texture objects with texture data and state glBindTexture(target, id); • Bind textures before using glBindTexture(target, id); • Define a texture image from an array of texels in CPU memory glTexImage2D(target, level, components, w, h, border, format, type, *texels); • Texel colors are processed by pixel pipeline – pixel scales, biases and lookups can be done

22. Filter Modes • Filter modes control how pixels are minified or magnified. Generally a color is computed using the nearest texel or by a linear average of several texels. • The filter type, above is one of GL_TEXTURE_MIN_FILTER or GL_TEXTURE_MAG_FILTER. • The mode is one of GL_NEAREST, GL_LINEAR, or special modes for mipmapping. Mipmapping modes are used for minification only, and have values of: – GL_NEAREST_MIPMAP_NEAREST – GL_NEAREST_MIPMAP_LINEAR – GL_LINEAR_MIPMAP_NEAREST – GL_LINEAR_MIPMAP_LINEAR

23. Filter Modes • Example: glTexParameteri(target, type, mode); Texture Polygon Magnification Minification PolygonTexture

24. Wrapping Mode • Wrap mode determines what should happen if a texture coordinate lies outside of the [0,1] range. • If the GL_REPEAT wrap mode is used, for texture coordinate values less than zero or greater than one, the integer is ignored and only the fractional value is used. • If the GL_CLAMP wrap mode is used, the texture value at the extreme (either 0 or 1) is used. • Example: glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP) glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT) texture GL_REPEAT wrapping GL_CLAMP wrapping s t

25. Texture Parameters Read more: https://open.gl/textures

26. Body Color When Textured • glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); – resultColor = Body Color + Texture Color [By default] • glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE); – resultColor = Texture Color • glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_BLEND); – resultColor = Texture Color + Blending • GLfloat fColor[4] = { 0.0f, 0.0f, 0.0f, 1f }; • glTexEnvfv(GL_TEXTURE_ENV, GL_TEXTURE_ENV_COLOR, fColor);

27. Texturing Something to pay attention for

28. Something to pay attention for • The image must be 24 bit (RGB) • The image extension should be .bmp • The image dimensions must be a power of 2 (2, 4, 8, 16, 32, 64, ..etc.) – If dimensions of image are not power of 2 then scale: • gluScaleImage(format, w_in, h_in, type_in, *data_in, w_out, h_out, type_out, *data_out); *_in is for source image *_out is for destination image • White color should be assigned before drawing a textured object by setting: glColor3f(1,1,1); • You should call: glBindTexture(GL_TEXTURE_2D, textureID) between glBegin() and glEnd()

29. gluQuadricTexture

31. gluQuadricTexture +

32. gluQuadricTexture + =

33. gluQuadricTexture

34. Blending

35. Blending • You can blend objects using: – glBlendFunc(GLenum sfactor, GLenum dfactor); • sfactor: is the source blend factor • dfactor: is the destination blend factor • Transparency is implemented using: – “GL_SRC_ALPHA” for the source – “GL_ONE_MINUS_SRC_ALPHA” for the destination

36. Blending • You can blend objects using: – glBlendFunc(GLenum sfactor, GLenum dfactor); • sfactor: is the source blend factor • dfactor: is the destination blend factor • Transparency is implemented using: – “GL_SRC_ALPHA” for the source – “GL_ONE_MINUS_SRC_ALPHA” for the destination

39. Blending • Combine pixels with what’s in already in the framebuffer glBlendFunc(src, dst ) Framebuffer Pixel (dst) Blending Equation Fragment (src) Blended Pixel pfr CdstCsrcC  

40. Transparency with .tga (32 bit)

41. Transparency with .tga + =

42. Transparency with .tga + = One .tga File

43. Transparency with .tga Code GLvoid DrawGLScene() //Set camera and projection GLvoid init() Global scope:

44. Transparency with .tga Code glBindTexture(GL_TEXTURE_2D , grassImage.texID); glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA , GL_ONE_MINUS_SRC_ALPHA); glBegin(GL_QUADS); glTexCoord2f(1,0); glVertex3f(5,-5,0); glTexCoord2f(1,1); glVertex3f(5,5,0); glTexCoord2f(0,1); glVertex3f(-5,5,0); glTexCoord2f(0,0); glVertex3f(-5,-5,0); glEnd(); glDisable(GL_BLEND); GLvoid DrawGLScene() //Set camera and projection glEnable(GL_TEXTURE_2D); grassImage = LoadTGA(“images//grass.tga"); GLvoid init() #include "tgaLoader.h” TGAImage grassImage; Global scope:

49. Transparency with .tga Code / Fixes glEnable(GL_TEXTURE_2D); glBindTexture(GL_TEXTURE_2D , grassImage.texID); glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA , GL_ONE_MINUS_SRC_ALPHA); glBegin(GL_QUADS); glTexCoord2f(1,0); glVertex3f(5,-5,0); glTexCoord2f(1,1); glVertex3f(5,5,0); glTexCoord2f(0,1); glVertex3f(-5,5,0); glTexCoord2f(0,0); glVertex3f(-5,-5,0); glEnd(); glDisable(GL_BLEND); glDisable(GL_TEXTURE_2D); GLvoid DrawGLScene() //Set camera and projection grassImage = LoadTGA(“images//grass.tga"); GLvoid init() #include "tgaLoader.h” TGAImage grassImage; Global scope:

50. Transparency with .tga Code / Fixes glEnable(GL_TEXTURE_2D); glBindTexture(GL_TEXTURE_2D , grassImage.texID); glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA , GL_ONE_MINUS_SRC_ALPHA); glPushMatrix(); glLoadIdentity(); glScalef(5, 5, 1); glBegin(GL_QUADS); glTexCoord2f(1,0); glVertex3f(1,-1,0); glTexCoord2f(1,1); glVertex3f(1,1,0); glTexCoord2f(0,1); glVertex3f(-1,1,0); glTexCoord2f(0,0); glVertex3f(-1,-1,0); glEnd(); glPopMatrix(); glDisable(GL_BLEND); glDisable(GL_TEXTURE_2D); GLvoid DrawGLScene() //Set camera and projection grassImage = LoadTGA(“images//grass.tga"); GLvoid init() #include "tgaLoader.h” TGAImage grassImage; Global scope:

51. Transparency with .tga

52. Add Transparency with .tga

53. Transparency with .tga (32 bit) Something to pay attention for, again

54. Something to pay attention for, again • The image must be 24 bit (RGB) • The image extension should be .bmp • The image dimensions must be a power of 2 (2, 4, 8, 16, 32, 64, ..etc.) or scale. • White color should be assigned before drawing a textured object by setting: glColor3f(1,1,1); • You should call: glBindTexture(GL_TEXTURE_2D, textureID) between glBegin() and glEnd() • Additional stuff when you use transparency with .tga – The image must be 32 bit (RGB) – The image extension should be .tga – In InitGL(), You must load .tga files LAST – In DrawGLScene(), you must draw the transparent objects LAST

55. Texture Tilling

56. Texture Tilling Tiling is a very simple effect that creates a repeating pattern of an image on the surface of a primitive object

57. Texture Tilling Using a small image to cover a large surface makes tiling a useful way to increase the performance of your textures and decrease the size of your image files.

58. Texture Tilling, How to Simply set the texture coordinates larger than 1 as many time as you want the texture to be tilled

59. Billboarding

60. Billboarding

61. Mipmapping

62. Mipmapping multum in parvo (mip): many things in a small place

63. Mipmapped Textures • Mipmap allows for prefiltered texture maps of decreasing resolutions • Lessens interpolation errors for smaller textured objects • Declare mipmap level during texture definition glTexImage*D(GL_TEXTURE_*D, level, …) • GLU mipmap builder routines gluBuild*DMipmaps()

64. 2D Texture and 3D Texture? http://gamedev.stackexchange.com/questions/9668/what-are-3d-textures

65. 2D Texture and 3D Texture • All we have used so far are 2D textures mapped on a 3D coordinates. • So what’s a 3D texture?! – 3D texture (or sometimes called “Volume textures”) works like regular 2D texture but it is truly 3D. 2D textures has UV coordinates, 3D has UVW coordinates

66. Textures Coordinates • Texture coordinates are named s, t, r, and q

67. 2D Texture and 3D Texture • 3D textures are used in: – Textures mapped into a model vertices – volumetric effects in games (fire, smoke, light rays, realistic fog) – caching light for realtime global illumination (CryEngine for example) – scientific (MRI, CT scans are saved into volumes)

68. 2D Texture and 3D Texture • Watch Nvidia smoke box in a XFX 9600gt – https://www.youtube.com/watch?v=9AS4xV-CK14

69. 2D Texture and 3D Texture • Watch Global illumination in CryEngine 3 Tech Trailer (HD) – https://www.youtube.com/watch?v=Pq39Xb7OdH8

OpenGL L05-Texturing

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (18)

Similar to OpenGL L05-Texturing

Similar to OpenGL L05-Texturing (20)

More from Mohammad Shaker

More from Mohammad Shaker (20)

Recently uploaded

Recently uploaded (20)

OpenGL L05-Texturing