viewing and texture mapping - wordpress.com · • projection of a circle in a plane not parallel...
TRANSCRIPT
![Page 1: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/1.jpg)
Viewing and Texture Mapping
In OPENGL
![Page 2: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/2.jpg)
VIEWING
![Page 3: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/3.jpg)
VIEWING
1. One or more objects2. A viewer with a projection surface3. Projectors that go from the object(s) to the projection surface
![Page 4: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/4.jpg)
VIEWING
![Page 5: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/5.jpg)
VIEWING Perspective Projection
![Page 6: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/6.jpg)
VIEWING Parallel Projection
![Page 7: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/7.jpg)
VIEWING Both
![Page 8: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/8.jpg)
VIEWING Orthographic Projection
![Page 9: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/9.jpg)
E. Angel and D. Shreiner : Interactive Computer Graphics 6E © Addison-Wesley 2012
Allow projection plane to move relative to object
classify by how many angles ofa corner of a projected cube are the same
none: trimetrictwo: dimetricthree: isometric
132
VIEWING Axonometric projections
![Page 10: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/10.jpg)
VIEWING Axonometric projections
![Page 11: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/11.jpg)
VIEWING Axonometric projections
![Page 12: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/12.jpg)
12E. Angel and D. Shreiner : Interactive Computer
Graphics 6E © Addison-Wesley 2012
VIEWING Types of Axonometric Projections
![Page 13: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/13.jpg)
13E. Angel and D. Shreiner : Interactive Computer
Graphics 6E © Addison-Wesley 2012
• Lines are scaled (foreshortened) but can find scaling factors
• Lines preserved but angles are not• Projection of a circle in a plane not parallel to the projection plane is an ellipse
• Can see three principal faces of a box-like object
• Some optical illusions possible• Parallel lines appear to diverge
• Does not look real because far objects are scaled the same as near objects
• Used in CAD applications
VIEWING Axonometric projections - Advantages and Disadvantages
![Page 14: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/14.jpg)
14E. Angel and D. Shreiner : Interactive Computer
Graphics 6E © Addison-Wesley 2012
Oblique ProjectionArbitrary relationship between projectors and projection plane
VIEWING
![Page 15: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/15.jpg)
15E. Angel and D. Shreiner : Interactive Computer
Graphics 6E © Addison-Wesley 2012
Advantages and Disadvantages
• Can pick the angles to emphasize a particular face• Architecture: plan oblique, elevation oblique
• Angles in faces parallel to projection plane are preserved while we can still see “around” side
• In physical world, cannot create with simple camera; possible with bellows camera or special lens (architectural)
VIEWING
![Page 16: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/16.jpg)
16E. Angel and D. Shreiner : Interactive Computer
Graphics 6E © Addison-Wesley 2012
Perspective Projection
Projectors coverge at center of projection
VIEWING
![Page 17: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/17.jpg)
17E. Angel and D. Shreiner : Interactive Computer
Graphics 6E © Addison-Wesley 2012
Vanishing Points
• Parallel lines (not parallel to the projection plan) on the object converge at a single point in the projection (the vanishing point)
• Drawing simple perspectives by hand uses these vanishing point(s)
vanishing point
VIEWING
![Page 18: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/18.jpg)
18E. Angel and D. Shreiner : Interactive Computer
Graphics 6E © Addison-Wesley 2012
Three-Point Perspective
• No principal face parallel to projection plane
• Three vanishing points for cube
VIEWING
![Page 19: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/19.jpg)
19E. Angel and D. Shreiner : Interactive Computer
Graphics 6E © Addison-Wesley 2012
Two-Point Perspective
• On principal direction parallel to projection plane
• Two vanishing points for cube
VIEWING
![Page 20: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/20.jpg)
20E. Angel and D. Shreiner : Interactive Computer
Graphics 6E © Addison-Wesley 2012
One-Point Perspective
• One principal face parallel to projection plane
• One vanishing point for cube
VIEWING
![Page 21: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/21.jpg)
21E. Angel and D. Shreiner : Interactive Computer
Graphics 6E © Addison-Wesley 2012
Advantages and Disadvantages
• Objects further from viewer are projected smaller than the same sized objects closer to the viewer (diminution)
• Looks realistic
• Equal distances along a line are not projected into equal distances (nonuniform foreshortening)
• Angles preserved only in planes parallel to the projection plane
• More difficult to construct by hand than parallel projections (but not more difficult by computer)
VIEWING
![Page 22: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/22.jpg)
VIEWING IN OPENGL
clipped out
z=0
2
![Page 23: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/23.jpg)
VIEWING IN OPENGL gluLookAt
LookAt(eye, at, up)
![Page 24: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/24.jpg)
VIEWING IN OPENGL gluLookAt
LookAt(eye, at, up)
![Page 25: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/25.jpg)
VIEWING IN OPENGL glfrustum
Frustum(left,right,bottom,top,near,far)
![Page 26: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/26.jpg)
VIEWING IN OPENGL DIFFERENCES
Frustum(left,right,bottom,top,near,far)
![Page 27: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/27.jpg)
VIEWING IN OPENGL gluPerspective
Perpective(fovy, aspect, near, far)
aspect = w/h
front plane
![Page 28: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/28.jpg)
VIEWING IN OPENGL gluPerspective
Perpective(fovy, aspect, near, far)
![Page 29: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/29.jpg)
Texture Mapping
![Page 30: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/30.jpg)
TEXTURE MAPPING• Texture Mapping
• Uses images to fill inside of polygons• Environment (reflection mapping)
• Uses a picture of the environment for texture maps• Allows simulation of highly specular surfaces
• Bump mapping• Emulates altering normal vectors during the rendering process
![Page 31: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/31.jpg)
TEXTURE MAPPING
geometric model texture mapped
![Page 32: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/32.jpg)
TEXTURE MAPPING
![Page 33: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/33.jpg)
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Is it simple?• Although the idea is simple---map an image to a surface---there
are 3 or 4 coordinate systems involved
2D image
3D surface
TEXTURE MAPPING
![Page 34: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/34.jpg)
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
parametric coordinates
texture coordinatesworld coordinates window coordinates
TEXTURE MAPPING
![Page 35: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/35.jpg)
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Mapping Functions
• Basic problem is how to find the maps• Consider mapping from texture coordinates to a point a surface • Appear to need three functions
x = x(s,t)y = y(s,t)z = z(s,t)
• But we really want to go the other way
s
t
(x,y,z)
TEXTURE MAPPING
![Page 36: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/36.jpg)
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Two-part mapping
• One solution to the mapping problem is to first map the texture to a simple intermediate surface
• Example: map to cylinder
TEXTURE MAPPING
![Page 37: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/37.jpg)
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Cylindrical Mapping
parametric cylinder
x = r cos 2 uy = r sin 2uz = v/h
maps rectangle in u,v space to cylinderof radius r and height h in world coordinates
s = ut = v
maps from texture space
TEXTURE MAPPING
![Page 38: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/38.jpg)
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Spherical MapWe can use a parametric sphere
x = r cos 2uy = r sin 2u cos 2vz = r sin 2u sin 2v
in a similar manner to the cylinderbut have to decide where to putthe distortion
Spheres are used in environmental maps
TEXTURE MAPPING
![Page 39: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/39.jpg)
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Box Mapping
• Easy to use with simple orthographic projection• Also used in environment maps
TEXTURE MAPPING
![Page 40: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/40.jpg)
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Second Mapping
• Map from intermediate object to actual object• Normals from intermediate to actual• Normals from actual to intermediate• Vectors from center of intermediate
intermediateactual
TEXTURE MAPPING
![Page 41: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/41.jpg)
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Aliasing
• Point sampling of the texture can lead to aliasing errors
point samples in u,v (or x,y,z) space
point samples in texture space
miss blue stripes
TEXTURE MAPPING
![Page 42: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/42.jpg)
42E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Area AveragingA better but slower option is to use area averaging
Note that preimage of pixel is curved
pixelpreimage
TEXTURE MAPPING
![Page 43: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/43.jpg)
OpenGL Texture Mapping
Ed Angel
Professor Emeritus of Computer Science
University of New Mexico
43E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
![Page 44: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/44.jpg)
44E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Objectives
• Introduce the OpenGL texture functions and options
![Page 45: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/45.jpg)
45E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Basic Stragegy
Three steps to applying a texture1. specify the texture
• read or generate image• assign to texture• enable texturing
2. assign texture coordinates to vertices• Proper mapping function is left to application
3. specify texture parameters• wrapping, filtering
![Page 46: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/46.jpg)
46E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Texture Mapping
s
t
x
y
z
image
geometry display
![Page 47: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/47.jpg)
47E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Texture Example• The texture (below) is a 256 x
256 image that has been mapped to a rectangular polygon which is viewed in perspective
![Page 48: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/48.jpg)
48E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Texture Mapping and the OpenGL Pipeline
geometry pipelinevertices
pixel pipelineimagefragmentprocessor
• Images and geometry flow through separate pipelines that join during fragment processing
• “complex” textures do not affect geometric complexity
![Page 49: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/49.jpg)
49E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
• Define a texture image from an array of texels (texture elements) in CPU memory
Glubyte my_texels[512][512];
• Define as any other pixel map• Scanned image• Generate by application code
• Enable texture mapping• glEnable(GL_TEXTURE_2D)• OpenGL supports 1-4 dimensional texture maps
Specifying a Texture Image
![Page 50: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/50.jpg)
50E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Define Image as a TextureglTexImage2D( target, level, components,
w, h, border, format, type, texels );
target: type of texture, e.g. GL_TEXTURE_2D
level: used for mipmapping (discussed later)components: elements per texelw, h: width and height of texels in pixelsborder: used for smoothing (discussed later)format and type: describe texelstexels: pointer to texel array
glTexImage2D(GL_TEXTURE_2D, 0, 3, 512, 512, 0, GL_RGB, GL_UNSIGNED_BYTE, my_texels);
![Page 51: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/51.jpg)
51E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
• Based on parametric texture coordinates• glTexCoord*() specified at each vertex
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
bc
Texture Space Object Space
Mapping a Texture
![Page 52: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/52.jpg)
52E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Typical Codeoffset = 0;GLuint vPosition = glGetAttribLocation( program, "vPosition" );
glEnableVertexAttribArray( vPosition );glVertexAttribPointer( vPosition, 4, GL_FLOAT, GL_FALSE, 0,BUFFER_OFFSET(offset) );
offset += sizeof(points);GLuint vTexCoord = glGetAttribLocation( program, "vTexCoord" );
glEnableVertexAttribArray( vTexCoord );glVertexAttribPointer( vTexCoord, 2,GL_FLOAT,
GL_FALSE, 0, BUFFER_OFFSET(offset) );
![Page 53: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/53.jpg)
53E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Interpolation
OpenGL uses interpolation to find proper texels from specified texture coordinates
Can be distortions
good selectionof tex coordinates
poor selectionof tex coordinates
texture stretchedover trapezoid showing effects of bilinear interpolation
![Page 54: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/54.jpg)
54E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Texture Parameters
• OpenGL has a variety of parameters that determine how texture is applied
• Wrapping parameters determine what happens if s and t are outside the (0,1) range
• Filter modes allow us to use area averaging instead of point samples• Mipmapping allows us to use textures at multiple resolutions• Environment parameters determine how texture mapping interacts with
shading
![Page 55: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/55.jpg)
55E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Wrapping Mode
Clamping: if s,t > 1 use 1, if s,t <0 use 0Wrapping: use s,t modulo 1
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP )
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT )
texture
s
t
GL_CLAMPwrapping
GL_REPEATwrapping
![Page 56: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/56.jpg)
56E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Magnification and Minification
Texture PolygonMagnification Minification
PolygonTexture
More than one texel can cover a pixel (minification) ormore than one pixel can cover a texel (magnification)
Can use point sampling (nearest texel) or linear filtering( 2 x 2 filter) to obtain texture values
![Page 57: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/57.jpg)
57E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Filter ModesModes determined by
• glTexParameteri( target, type, mode )
glTexParameteri(GL_TEXTURE_2D, GL_TEXURE_MAG_FILTER,GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXURE_MIN_FILTER,GL_LINEAR);
Note that linear filtering requires a border of an extra texel for filtering at edges (border = 1)
![Page 58: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/58.jpg)
58E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Mipmapped Textures
• Mipmapping allows for prefiltered texture maps of decreasing resolutions
• Lessens interpolation errors for smaller textured objects• Declare mipmap level during texture definition
glTexImage2D( GL_TEXTURE_*D, level, … )
![Page 59: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/59.jpg)
59E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Examplepoint
sampling
mipmappedpoint
sampling
mipmappedlinearfiltering
linearfiltering
![Page 60: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/60.jpg)
60E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Texture Functions
• Controls how texture is applied• glTexEnv{fi}[v]( GL_TEXTURE_ENV, prop, param )
• GL_TEXTURE_ENV_MODE modes• GL_MODULATE: modulates with computed shade• GL_BLEND: blends with an environmental color• GL_REPLACE: use only texture color• GL(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
• Set blend color with GL_TEXTURE_ENV_COLOR
![Page 61: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/61.jpg)
61E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Using Texture Objects
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• coordinates can also be generated
![Page 62: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/62.jpg)
62E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
Other Texture Features
• Environment Maps• Start with image of environment through a wide angle lens
• Can be either a real scanned image or an image created in OpenGL
• Use this texture to generate a spherical map• Alternative is to use a cube map
• Multitexturing• Apply a sequence of textures through cascaded texture units
![Page 63: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/63.jpg)
Applying Textures
• Textures are applied during fragments shading by a sampler• Samplers return a texture color from a texture object
63E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
in vec4 color; //color from rasterizerin vec2 texCoord; //texure coordinate from rasterizeruniform sampler2D texture; //texture object from application
void main() { gl_FragColor = color * texture2D( texture, texCoord );
}
![Page 64: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/64.jpg)
Vertex Shader
• Usually vertex shader will output texture coordinates to be rasterized
• Must do all other standard tasks too• Compute vertex position• Compute vertex color if needed
64E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
in vec4 vPosition; //vertex position in object coordinatesin vec4 vColor; //vertex color from applicationin vec2 vTexCoord; //texture coordinate from application
out vec4 color; //output color to be interpolatedout vec2 texCoord; //output tex coordinate to be interpolated
![Page 65: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/65.jpg)
Checkerboard Texture
65E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
GLubyte image[64][64][3];
// Create a 64 x 64 checkerboard patternfor ( int i = 0; i < 64; i++ ) {
for ( int j = 0; j < 64; j++ ) {GLubyte c = (((i & 0x8) == 0) ^ ((j & 0x8) == 0)) * 255;image[i][j][0] = c;image[i][j][1] = c;image[i][j][2] = c;
![Page 66: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/66.jpg)
Adding Texture Coordinates
66E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
void quad( int a, int b, int c, int d ){
quad_colors[Index] = colors[a];points[Index] = vertices[a];tex_coords[Index] = vec2( 0.0, 0.0 );index++;
quad_colors[Index] = colors[a];points[Index] = vertices[b];tex_coords[Index] = vec2( 0.0, 1.0 );Index++;
// other vertices}
![Page 67: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/67.jpg)
Texture Object
67E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
GLuint textures[1];glGenTextures( 1, textures );
glBindTexture( GL_TEXTURE_2D, textures[0] );glTexImage2D( GL_TEXTURE_2D, 0, GL_RGB, TextureSize,
TextureSize, 0, GL_RGB, GL_UNSIGNED_BYTE, image );glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S,
GL_REPEAT );glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T,
GL_REPEAT );glTexParameterf( GL_TEXTURE_2D,
GL_TEXTURE_MAG_FILTER, GL_NEAREST );glTexParameterf( GL_TEXTURE_2D,
GL_TEXTURE_MIN_FILTER, GL_NEAREST );glActiveTexture( GL_TEXTURE0 );
![Page 68: Viewing and Texture Mapping - WordPress.com · • Projection of a circle in a plane not parallel to the projection plane is an ellipse •Can see three principal faces of a box-like](https://reader033.vdocuments.us/reader033/viewer/2022042215/5ebbfc5ac47f6c2fcf275e93/html5/thumbnails/68.jpg)
Linking with Shaders
68E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
GLuint vTexCoord = glGetAttribLocation( program, "vTexCoord" );glEnableVertexAttribArray( vTexCoord );glVertexAttribPointer( vTexCoord, 2, GL_FLOAT, GL_FALSE, 0,
BUFFER_OFFSET(offset) );
// Set the value of the fragment shader texture sampler variable// ("texture") to the the appropriate texture unit. In this case,// zero, for GL_TEXTURE0 which was previously set by calling// glActiveTexture().glUniform1i( glGetUniformLocation(program, "texture"), 0 );