Computer Graphics

Subodh Kumar

Dept of Computer Sc. & Engg. IIT Delhi

Texture: Control Illumination

! Vary a surface property non-linearly ! Rasterization does bi-linear interpolation

! Examples of usage: ! Paste a picture

! picture of environment ! picture of scene

! Modify surface normals ! Create bumps and detail

too pristine

Texture: Control Illumination

! Vary a surface property non-linearly ! Rasterization does bi-linear interpolation

! Examples of usage: ! Paste a picture

! picture of environment ! picture of scene

! Modify surface normals ! Create bumps and detail

too pristine

Texture Mapping

0,0 1

1Texture image

0,00,0.5 0,1

1,0 1,1

1,0.5

u

v

Vertex Texture coordinates Interpolated at each fragment

Texture Examples

Normal MappingBump Mapping

Texture Examples

Normal MappingBump Mapping

Texture Examples

Normal MappingBump Mapping

Texture Mapping

! Texture aka function of a surface ! f (x,y,z) = some attribute value ! Would like f to be arbitrary

! No continuity constraints

! 3D Look-up table? ! Not all x,y,z has the surface through it ! Surface is only a 2-manifold

! 2D look-up table ! But want to map every point on a surface to a 2D

space <u,v> ! parameterization

Texture Space

2D Euclidean/Projective Space

u

vCompute f(u,v)

Texture Space

2D Euclidean/Projective Space

u

vCompute f(u,v)

Sample f(u,v) Reconstruct as needed

Texture Space

2D Euclidean/Projective Space

u

vCompute f(u,v)

Sample f(u,v) Reconstruct as needed

Restrict domain Or, recreate samples

v =1

Texture Space

2D Euclidean/Projective Space

u

vCompute f(u,v)

Sample f(u,v) Reconstruct as needed

Restrict domain Or, recreate samples

u=1

v =1

Texture Space

2D Euclidean/Projective Space

u

vCompute f(u,v)

Sample f(u,v) Reconstruct as needed

Restrict domain Or, recreate samples

u=1

Map from Object SpaceB

C

P

P = uA + vB + wC

Should P’s texture coordinates = (u, v)?

Barycentric Coordinates of P = [u, v, w]

u = |PBC|/|ABC| etc..

A

Texture Coordinates

A

B

C

P

P = uA + vB + wC

Barycentric Coordinates of P = [u, v, w]

u = |PBC|/|ABC| etc..

Allow indirection: T(P) = uT(A) + vT(B) + wT(C)

Parameterization

10

Parametrically defined surface

11

x(t), y(t), z(t)x(t) = at2 + bt + c

x(u, v), y(u, v), z(u, v)

Surface Parameterization

u

v

Surface Parameterization

u

v

General Parameterization

13

General Parameterization

13

Energy = 1/2 ∑ kele2

Force on vertex i = ∑ kij eijvertex j connected to i

all edges e

pi

General Parameterization

13

Energy = 1/2 ∑ kele2

Force on vertex i = ∑ kij eijvertex j connected to i

all edges e

Net Force on pi = ∑kij (pi – pj)

pi

∑kij pi = ∑kij pj

𝞴ij = kij/∑kij

j i

General Parameterization

13

Energy = 1/2 ∑ kele2

Force on vertex i = ∑ kij eijvertex j connected to i

all edges e

Net Force on pi = ∑kij (pi – pj)

pi

∑kij pi = ∑kij pj

pi = ∑𝞴ij pj 𝞴ij = kij/∑kijaffine combination

j i

‘Mean’ Barycentric Coordinates

14

Pj αij

βij

kij =tan

αij

2+ tan

βij

2|eij |

Mean value Coordinates

On the surface

Pi

‘Mean’ Barycentric Coordinates

14

Pj αji

βji αij

βij

kij =tan

αij

2+ tan

βij

2|eij |

Mean value Coordinates

On the surface

Pi

‘Mean’ Barycentric Coordinates

14

Pj αji

βji αij

βij

kij =tan

αij

2+ tan

βij

2|eij |

Mean value Coordinates

On the surface

Pi

Fix shape

Parameterize by chord-length

‘Mean’ Barycentric Coordinates

14

Pj αji

βji αij

βij

kij =tan

αij

2+ tan

βij

2|eij |

Mean value Coordinates

r

l = ∑li

li

2πr li/l

On the surface

Pi

Texture Coordinates

u

v

Pixel Texture Coordinates

Screen

Pixel

Texture

Object

Pixel Texture Coordinates

Screen

Pixel

Texture

Object

Pixel Texture Coordinates

Screen

Pixel

Texture

Object

Pixel Texture Lookup

Pixel

Texel

Texture sample

Look up texture coordinate

Reconstruct from samples

Texture-Minification

Pixels

Texels

Texture-Minification

Pixels

Texels

Texture-Minification

Pixels

Texels

Texture-Minification

Pixels

Texels

These texels should also contribute to the pixel

Texture-Minification

Pixels

Texels

These texels should also contribute to the pixel

! Filter 2x2 texel blocks into one texel ! Weighted average

! Log(n) levels of an nxn texture map ! Choose level closest to 1 texel/pixel

! Change in texture coordinate per pixel

Mip-Mapping

! Filter 2x2 texel blocks into one texel ! Weighted average

! Log(n) levels of an nxn texture map ! Choose level closest to 1 texel/pixel

! Change in texture coordinate per pixel

Mip-Mapping

! Filter 2x2 texel blocks into one texel ! Weighted average

! Log(n) levels of an nxn texture map ! Choose level closest to 1 texel/pixel

! Change in texture coordinate per pixel

Mip-Mapping

Derivative

Pixels

t1

Tex coord: t0

Texels

WxH texture => texel size = 1/W x 1/H

t1 – t0 = (∆u , ∆v )

t2 t3

Derivative

Pixels

t1

Tex coord: t0

Texels

WxH texture => texel size = 1/W x 1/H

t1 – t0 = (∆u , ∆v )

t2 t3

t2 – t0 = (∆uy , ∆vy)

∆t = max (∆ux , ∆uy), max(∆vx , ∆vy)

x x

t-1

∆upixel = max(du/dx du/dy) ∆vpixel = max(dv/dx dv/dy)

Derivative

Pixels

t1

Tex coord: t0

Texels

WxH texture => texel size = 1/W x 1/H

t1 – t0 = (∆u , ∆v )

t2 t3

t2 – t0 = (∆uy , ∆vy)

∆t = max (∆ux , ∆uy), max(∆vx , ∆vy)

x x

t-1

∆upixel = max(du/dx du/dy) ∆vpixel = max(dv/dx dv/dy)

Choose a level so that ∆u and ∆v are near the texel size

Anisotropic Filter

Pixels

Texels

Anisotropic Filter

Pixels

Texels

Anisotropic Filter

Pixels

Texels

Anisotropic Filter

Pixels

Texels

Using Smallest minification may blur too much

Anisotropic Filter

Pixels

Texels

Using Smallest minification may blur too much

Texture Border

! Extra texel needed for linear interpolation

u = 0

Texture Border

! Extra texel needed for linear interpolation

u = 0

Texture Border

! Extra texel needed for linear interpolation

u = 0

Texture Border

! Extra texel needed for linear interpolation

u = 0

Texture Border

! Extra texel needed for linear interpolation

u = 0

W

Texture Border

! Extra texel needed for linear interpolation

u = 0

u' = u(W-2)/W+1/W

W

Textures in OpenGL! Texture = Object containing images (1 or more)

! Encapsulates: Image, Sampler, Parameters ! Has an ID/handle for reference

! Texture has an image format ! 1D, 2D, 3D organization

! Dimension: WxHxD ! Several specialized types

! Upto 4 components per sample ! Data format of each component

! Read or Write to it ! Use one of several ‘texture units’ to apply a texture ! Look-up with tex-coord [u,v,w]

! Also an LOD [MIP-MAP level of detail] ! Can be interpolated from per-vertex tex-coord 23

uniform sampler2D colorSampler; uniform sampler2D normalSampler; out vec3 color;

void main() { // Formats are in range 0:1 vec3 tcolor = texture(colorSampler, UVcolor).rgb; vec3 normal = normalize(texture(normalSampler, UVnormal).rgb*2.0 - 1.0);

color = shade(tcolor, normal, ..); }

SHADER

Example

24

uniform sampler2D colorSampler; uniform sampler2D normalSampler; out vec3 color;

void main() { // Formats are in range 0:1 vec3 tcolor = texture(colorSampler, UVcolor).rgb; vec3 normal = normalize(texture(normalSampler, UVnormal).rgb*2.0 - 1.0);

color = shade(tcolor, normal, ..); }

SHADER

Example

24

glUseProgram(program); GLint colorSampler = glGetUniformLocation(program, "colorSampler"); GLint normalSampler = glGetUniformLocation(program, "normalSampler"); glUniform1i(colorSampler, 0); // Associate Texture unit 0 with this sampler glUniform1i(normalSampler, 5); // Associate Texture unit 5 with this sampler

glActiveTexture(GL_TEXTURE0); // We will set up Texture unit 0 glBindTexture(GL_TEXTURE_2D, colorMap); // Buffer filled earlier glBindSampler(0, linearSampler); glActiveTexture(GL_TEXTURE0 + 5); // May also use GL_TEXTURE5 glBindTexture(GL_TEXTURE_2D, normalMap); // Buffer filled earlier glBindSampler(5, linearSampler);

render();

RENDERING

uniform sampler2D colorSampler; uniform sampler2D normalSampler; out vec3 color;

void main() { // Formats are in range 0:1 vec3 tcolor = texture(colorSampler, UVcolor).rgb; vec3 normal = normalize(texture(normalSampler, UVnormal).rgb*2.0 - 1.0);

color = shade(tcolor, normal, ..); }

SHADER

Example

24

glUseProgram(program); GLint colorSampler = glGetUniformLocation(program, "colorSampler"); GLint normalSampler = glGetUniformLocation(program, "normalSampler"); glUniform1i(colorSampler, 0); // Associate Texture unit 0 with this sampler glUniform1i(normalSampler, 5); // Associate Texture unit 5 with this sampler

glActiveTexture(GL_TEXTURE0); // We will set up Texture unit 0 glBindTexture(GL_TEXTURE_2D, colorMap); // Buffer filled earlier glBindSampler(0, linearSampler); glActiveTexture(GL_TEXTURE0 + 5); // May also use GL_TEXTURE5 glBindTexture(GL_TEXTURE_2D, normalMap); // Buffer filled earlier glBindSampler(5, linearSampler);

render();

RENDERINGglGenTextures(1, &colorMap); glBindTexture(GL_TEXTURE_2D, colorMap); glTexImage2D(GL_TEXTURE_2D, 0,GL_RGB, w, h, 0, GL_RGB,

GL_UNSIGNED_BYTE, data); glGenTextures(1, &normalMap); glBindTexture(GL_TEXTURE_2D, normalMap); glTexImage2D(GL_TEXTURE_2D, 0,GL_RGB, w, h, 0, GL_RGB, GL_FLOAT, data);

glGenSamplers(1, &linearSampler); glSamplerParameteri(linearSampler, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glSamplerParameteri(linearSampler, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

INITIALIZE

uniform sampler2D colorSampler; uniform sampler2D normalSampler; out vec3 color;

void main() { // Formats are in range 0:1 vec3 tcolor = texture(colorSampler, UVcolor).rgb; vec3 normal = normalize(texture(normalSampler, UVnormal).rgb*2.0 - 1.0);

color = shade(tcolor, normal, ..); }

SHADER

Example

24

glUseProgram(program); GLint colorSampler = glGetUniformLocation(program, "colorSampler"); GLint normalSampler = glGetUniformLocation(program, "normalSampler"); glUniform1i(colorSampler, 0); // Associate Texture unit 0 with this sampler glUniform1i(normalSampler, 5); // Associate Texture unit 5 with this sampler

glActiveTexture(GL_TEXTURE0); // We will set up Texture unit 0 glBindTexture(GL_TEXTURE_2D, colorMap); // Buffer filled earlier glBindSampler(0, linearSampler); glActiveTexture(GL_TEXTURE0 + 5); // May also use GL_TEXTURE5 glBindTexture(GL_TEXTURE_2D, normalMap); // Buffer filled earlier glBindSampler(5, linearSampler);

render();

RENDERINGglGenTextures(1, &colorMap); glBindTexture(GL_TEXTURE_2D, colorMap); glTexImage2D(GL_TEXTURE_2D, 0,GL_RGB, w, h, 0, GL_RGB,

GL_UNSIGNED_BYTE, data); glGenTextures(1, &normalMap); glBindTexture(GL_TEXTURE_2D, normalMap); glTexImage2D(GL_TEXTURE_2D, 0,GL_RGB, w, h, 0, GL_RGB, GL_FLOAT, data);

glGenSamplers(1, &linearSampler); glSamplerParameteri(linearSampler, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glSamplerParameteri(linearSampler, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

INITIALIZE

glGenerateTextureMipmap(textureID); glSamplerParameterf(samplerID, GL_TEXTURE_MAX_ANISOTROPY, 4.0f);

textureProj(sampler, projTexCoord); textureLod(sampler, texCoord, lod); textureGrad(sampler, texCoord, dtdx, dtdy);

ALSO SEE