Mohammad Shaker

mohammadshaker.com

@ZGTRShaker

2014

OpenGL Graphics

L05-Texturing

Texturing

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.

OpenGL Architecture

DisplayList

PolynomialEvaluator

Per VertexOperations &

PrimitiveAssembly

RasterizationPer Fragment

OperationsFrameBuffer

TextureMemory

CPU

PixelOperations

OpenGL Architecture

DisplayList

PolynomialEvaluator

Per VertexOperations &

PrimitiveAssembly

RasterizationPer Fragment

OperationsFrameBuffer

TextureMemory

CPU

PixelOperations

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?

• 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

Textures Coordinates

Textures Coordinates

Texture Mapping

s

t

x

y

z

image

geometry

screen

Textures Coordinates

Textures Coordinates

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

Textures Coordinates

Texturing Functions

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

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

Filter Modes

• Example: glTexParameteri(target, type, mode);

Texture Polygon

Magnification Minification

PolygonTexture

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)

textureGL_REPEATwrapping

GL_CLAMPwrapping

s

t

Texture Parameters

Read more: https://open.gl/textures

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

TexturingSomething to pay attention for

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

Texturing Example

Texturing Example

• #include "texture.h”

• int imageTexId;

• InitGL()

– imageTexId = LoadTexture("images//tile.bmp");

• DrawGLScene()

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

Texturing Example

• #include "texture.h”

• int imageTexId;

• InitGL()

– imageTexId = LoadTexture("images//tile.bmp");

• DrawGLScene()

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

Texturing Example

• #include "texture.h”

• int imageTexId;

• InitGL()

– imageTexId = LoadTexture("images//tile.bmp");

• DrawGLScene()

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

Texturing Example

• #include "texture.h”

• int imageTexId;

• InitGL()

– imageTexId = LoadTexture("images//tile.bmp");

• DrawGLScene()

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

gluQuadricTexture

gluQuadricTexture

+

gluQuadricTexture

+ =

gluQuadricTexture

Blending

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

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

OpenGL Architecture

DisplayList

PolynomialEvaluator

Per VertexOperations &

PrimitiveAssembly

RasterizationPer Fragment

OperationsFrameBuffer

TextureMemory

CPU

PixelOperations

OpenGL Architecture

DisplayList

PolynomialEvaluator

Per VertexOperations &

PrimitiveAssembly

RasterizationPer Fragment

OperationsFrameBuffer

TextureMemory

CPU

PixelOperations

Blending

• Combine pixels with what’s in already in the framebuffer

glBlendFunc(src, dst )

FramebufferPixel (dst)

BlendingEquation

Fragment(src)

BlendedPixel

pfr CdstCsrcC

Transparency with .tga (32 bit)

Transparency with .tga

+ =

Transparency with .tga

+ =

One .tga File

Add Transparency with .tga

• #include "tgaLoader.h”

• TGAImage grassImage;

• InitGL ()

– glEnable(GL_TEXTURE_2D);

– grassImage = LoadTGA(“images//grass.tga");

• DrawGLScene ()

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

Add Transparency with .tga

• #include "tgaLoader.h”

• TGAImage grassImage;

• InitGL ()

– glEnable(GL_TEXTURE_2D);

– grassImage = LoadTGA(“images//grass.tga");

• DrawGLScene ()

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

Add Transparency with .tga

• #include "tgaLoader.h”

• TGAImage grassImage;

• InitGL ()

– glEnable(GL_TEXTURE_2D);

– grassImage = LoadTGA(“images//grass.tga");

• DrawGLScene ()

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

Add Transparency with .tga

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

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

Texture Tilling

Texture TillingTiling is a very simple effect that creates a repeating pattern of

an image on the surface of a primitive object

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.

Texture Tilling, How toSimply set the texture coordinates larger than 1

as many time as you want the texture to be tilled

Billboarding

Billboarding

Mipmapping

Mipmappingmultum in parvo (mip): many things in a small place

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

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

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

Textures Coordinates

• Texture coordinates are named s, t, r, and q

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)

2D Texture and 3D Texture

• Watch Nvidia smoke box in a XFX 9600gt

– https://www.youtube.com/watch?v=9AS4xV-CK14

2D Texture and 3D Texture

• Watch Global illumination in CryEngine 3 Tech Trailer (HD)

– https://www.youtube.com/watch?v=Pq39Xb7OdH8