![Page 1: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/1.jpg)
Texture mapping
Computer GraphicsCSE 167Lecture 9
![Page 2: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/2.jpg)
CSE 167: Computer Graphics
• Texture Mapping– Overview– Interpolation– Wrapping– Texture coordinates– Anti‐aliasing
• Mipmaps– Other mappings
• Including bump mapping
2CSE 167, Winter 2018
![Page 3: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/3.jpg)
Large triangles
• Advantages– Often sufficient for simple geometry
– Fast to render
• Disadvantages– Per vertex colors look boring and computer‐generated
3CSE 167, Winter 2018Based on slides courtesy of Jurgen Schulze
![Page 4: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/4.jpg)
Texture mapping
• Map textures (images) onto surface polygons
• Same triangle count, much more realistic appearance
4CSE 167, Winter 2018
![Page 5: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/5.jpg)
Texture mapping
• Objective: map locations in texture to locations on 3D geometry
• Texture coordinate space– Texture pixels (texels) have texture coordinates (s,t)
• Convention– Bottom left corner of texture is at (s,t) = (0,0)
– Top right corner is at (s,t) = (1,1)
CSE 167, Winter 2018 5
(1,1)
(0,0) s
t
Texture coordinates
![Page 6: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/6.jpg)
Texture mapping
• Store 2D texture coordinates s,t with each triangle vertex
CSE 167, Winter 2018 6
(0.4,0.45)(0.6,0.4)
(1,1)
(0,0) s
t
Texture coordinates
(0.65,0.75)
v1(s,t) = (0.65,0.75)
Triangle in any space before projection
v0(s,t) = (0.6,0.4)
v2(s,t) = (0.4,0.45)
![Page 7: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/7.jpg)
Texture mapping
• Each point on triangle gets color from its corresponding point in texture
CSE 167, Winter 2018 7
(0.4,0.45)(0.6,0.4)
(1,1)
(0,0) s
t
(0.65,0.75)v1(s,t) = (0.65,0.75)
v0(s,t) = (0.6,0.4)
v2(s,t) = (0.4,0.45) Texture coordinates
Triangle in any space before projection
![Page 8: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/8.jpg)
Texture mapping
CSE 167, Winter 2018 8
Frame-buffer access(z-buffering)
Modeling and viewingtransformation
Shading
Projection
Rasterization
Primitives
Image
Fragment processing Includes texture mapping
![Page 9: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/9.jpg)
Texture look‐up
• Given texture coordinates (s,t) at current pixel• Closest four texels in texture space are at (s0,t0), (s1,t0), (s0,t1), (s1,t1)
• How to compute pixel color? Interpolate
CSE 167, Winter 2018 9
t1
t
t0s0 s s1
![Page 10: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/10.jpg)
Nearest neighbor interpolation
• Use color of closest texel
• Simple, but low quality and aliasing
CSE 167, Winter 2018 10
t1
t
t0s0 s s1
![Page 11: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/11.jpg)
t1
t
t0s0 s s1
ctop
cbot
c
Bilinear interpolation
1. Linear interpolation horizontallyRatio in s direction is
ctop = tex(s0,t1) (1‐rs) + tex(s1,t1) rscbot = tex(s0,t0) (1‐rs) + tex(s1,t0) rs
2. Linear interpolation verticallyRatio in t direction is
c = cbot (1‐rt) + ctop rt
CSE 167, Winter 2018 11
01
0
ssssrs
t1
t
t0s0 s s1
ctop
cbot
01
0
ttttrt
![Page 12: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/12.jpg)
Interpolation
• OpenGL– GL_NEAREST: Nearest neighbor interpolation– GL_LINEAR: Bilinear interpolation
CSE 167, Winter 2018 12
Nearest neighbor Bilinear
![Page 13: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/13.jpg)
Wrapping
• Texture image extends from [0,0] to [1,1] in texture space– What if (s,t) texture coordinates are beyond that range? Wrap
• Repeat (and optionally mirror) texture• Clamp texture
13CSE 167, Winter 2018
![Page 14: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/14.jpg)
Texture Space
Wrapping: repeat
• Repeat the texture– Creates discontinuities at edges, unless texture is designed to line up
14
(0,0)
(1,1)
s
t
Seamless brick wall texture (by Christopher Revoir)
CSE 167, Winter 2018
![Page 15: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/15.jpg)
s
t
Texture Space
(0,0)
(1,1)
Wrapping: clamp
• Use edge or specified color everywhere outside data range [0..1]
CSE 167, Winter 2018 15
![Page 16: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/16.jpg)
Wrapping
• OpenGL– GL_REPEAT– GL_MIRRORED_REPEAT– GL_CLAMP_TO_EDGE: repeats last pixel in the texture– GL_CLAMP_TO_BORDER: requires setting border color
CSE 167, Winter 2018 16
Repeat Repeat and mirror Clamp to edge color
Clamp to specified color
![Page 17: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/17.jpg)
Texture coordinates
• What if texture extends across multiple polygons? Parameterize surface– Mapping between 3D positions on surface and 2D texture coordinates
• Defined by texture coordinates of triangle vertices– Example mappings
• Cylindrical• Spherical• Orthographic• Cube• Parametric• Skin
CSE 167, Winter 2018 17
![Page 18: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/18.jpg)
Texture atlas
CSE 167, Winter 2018 18
[Sander2001]
charts atlas surface
![Page 19: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/19.jpg)
Skin mapping
19CSE 167, Winter 2018
![Page 20: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/20.jpg)
Skin mapping
CSE 167, Winter 2018 20
![Page 21: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/21.jpg)
Skin mapping
CSE 167, Winter 2018 21
[Piponi2000]
![Page 22: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/22.jpg)
Skin mapping
CSE 167, Winter 2018 22
![Page 23: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/23.jpg)
Orthographic mapping
• Use linear transformation of object’s XYZ coordinates
CSE 167, Winter 2018 23
wzyx
ts
00100001
xyz in object space xyz in camera space
![Page 24: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/24.jpg)
Planar mapping
CSE 167, Winter 2018 24
![Page 25: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/25.jpg)
Planar mapping
CSE 167, Winter 2018 25
![Page 26: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/26.jpg)
Spherical mapping
• Use spherical coordinates• “Shrink‐wrap” sphere to object
CSE 167, Winter 2018 26
Texture map Mapping result
![Page 27: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/27.jpg)
Spherical mapping
CSE 167, Winter 2018 27
![Page 28: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/28.jpg)
Spherical mapping
CSE 167, Winter 2018 28
![Page 29: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/29.jpg)
Cylindrical mapping
• Similar to spherical mapping, but with cylindrical coordinates
CSE 167, Winter 2018 29
![Page 30: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/30.jpg)
Cylindrical mapping
CSE 167, Winter 2018 30
![Page 31: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/31.jpg)
Spherical and cylindrical mapping
CSE 167, Winter 2018 31
spherical cylindrical
![Page 32: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/32.jpg)
Multiple mappings
• Complex objects
CSE 167, Winter 2018 32
![Page 33: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/33.jpg)
Cube mapping
CSE 167, Winter 2018 33
![Page 34: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/34.jpg)
Cube mapping
CSE 167, Winter 2018 34
![Page 35: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/35.jpg)
Cube mapping
CSE 167, Winter 2018 35
![Page 36: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/36.jpg)
Parametric mapping
• Surface given by parametric functions
• Very common in CAD• Clamp (u,v) parameters to [0..1] and use as texture coordinates (s,t)
CSE 167, Winter 2018 36
![Page 37: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/37.jpg)
Aliasing
• What could cause this aliasing effect?
CSE 167, Winter 2018 37
![Page 38: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/38.jpg)
Aliasing
CSE 167, Winter 2018 38
Sufficiently sampled,no aliasing
Insufficiently sampled,aliasing
High frequencies in the input data can appear as lower frequencies in the sampled signal
Image: Robert L. Cook
![Page 39: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/39.jpg)
Texture spaceCamera spaceImage plane
Pixel area
Texels
Antialiasing: Intuition
• Pixel may cover large area on triangle in camera space• Corresponds to many texels in texture space• Need to compute average
CSE 167, Winter 2018 39
![Page 40: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/40.jpg)
Antialiasing using MIP maps
• Averaging over texels is expensive– Many texels as objects get smaller– Large memory access and computation cost
• Precompute filtered (averaged) textures– Texture at multiple resolutions
• Practical solution to aliasing problem– Fast and simple– Available in OpenGL, implemented in GPUs – Reasonable quality
CSE 167, Winter 2018 40
![Page 41: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/41.jpg)
MIP maps (mipmaps)
• MIP stands for multum in parvo (much in little) (Williams 1983)
• Before rendering• Precompute and store down scaled versions of textures
– Reduce resolution by factors of two successively– Use high quality filtering (averaging) scheme
• Increases memory cost by 1/3– 1/3 = ¼+1/16+1/64+…
• Width and height of texture should be powers of two (non‐power of two supported since OpenGL 2.0)
CSE 167, Winter 2018 41
![Page 42: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/42.jpg)
Mipmaps• Example: resolutions 512x512, 256x256, 128x128, 64x64, 32x32 pixels
CSE 167, Winter 2018 42Level 0
Level 1
23
4
![Page 43: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/43.jpg)
Mipmaps
• One texel in level 4 is the average of 44=256 texels in level 0
CSE 167, Winter 2018 43Level 0
Level 1
23
4
![Page 44: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/44.jpg)
Mipmaps
CSE 167, Winter 2018 44
Level 0 Level 1 Level 2
Level 3 Level 4
![Page 45: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/45.jpg)
Rendering with mipmaps
• “Mipmapping”• Interpolate texture coordinates of each pixel as without mipmapping
• Compute approximate size of pixel in texture space
• Look up color in nearest mipmap– E.g., if pixel corresponds to 10x10 texels use mipmap level 3
– Use interpolation as before
CSE 167, Winter 2018 45
![Page 46: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/46.jpg)
Mipmapping
CSE 167, Winter 2018 46
Texture spaceCamera spaceImage plane
Pixel area
Texels
Mip-map level 0Mip-map level 1Mip‐map level 2Mip‐map level 3
![Page 47: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/47.jpg)
Nearest mipmap, nearest neighbor interpolation
CSE 167, Winter 2018 47
Visible transition between mipmap levels
![Page 48: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/48.jpg)
Nearest mipmap, bilinear interpolation
CSE 167, Winter 2018 48
Visible transition between mipmap levels
![Page 49: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/49.jpg)
Trilinear mipmapping
• Use two nearest mipmap levels– E.g., if pixel corresponds to 10x10 texels, use mipmap levels 3 (8x8) and 4 (16x16)
• 2‐Step approach:1. Perform bilinear interpolation in both mip‐maps2. Linearly interpolate between the results
• Requires access to 8 texels for each pixel• Supported by hardware without performance penalty
CSE 167, Winter 2018 49
![Page 50: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/50.jpg)
Anisotropic filtering
• Method of enhancing the image quality of textures on surfaces that are at oblique viewing angles
• Different degrees or ratios of anisotropic filtering can be applied
• The degree refers to the maximum ratio of anisotropy supported by the filtering process. For example, 4:1 anisotropic filtering supports pre‐sampled textures up to four times wider than tall
CSE 167, Winter 2018 50
![Page 51: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/51.jpg)
Mipmaps in OpenGL
• Mipmapping tutorial with source codehttp://www.videotutorialsrock.com/opengl_tutorial/mipmapping/text.php
CSE 167, Winter 2018 51
![Page 52: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/52.jpg)
Bump mapping
• Texture = change in surface normal
Sphere w/ diffuse texture Swirly bump map Sphere w/ diffuse textureand swirly bump map
CSE 167, Winter 2018 52
![Page 53: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/53.jpg)
Displacement mapping
CSE 167, Winter 2018 53
![Page 54: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/54.jpg)
Displacement map
CSE 167, Winter 2018 54
Paweł Filiptolas.wordpress.com
base surface
displaced surface
hand-painted displacement map (detail)
![Page 55: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/55.jpg)
Illumination maps• Quake introduced illumination maps or light maps
to capture lighting effects in video gamesTexture map:
Texture map+ light map:
Light map
CSE 167, Winter 2018 55
![Page 56: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/56.jpg)
Environment maps
Images from Illumination and Reflection Maps: Simulated Objects in Simulated and Real Environments
Gene Miller and C. Robert HoffmanSIGGRAPH 1984 “Advanced Computer Graphics Animation” Course Notes
CSE 167, Winter 2018 56
![Page 57: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/57.jpg)
Environment map
CSE 167, Winter 2018 57
![Page 58: Texture mapping - University of California, San Diegocseweb.ucsd.edu/classes/wi18/cse167-a/lec9.pdf · Texture mapping Computer Graphics CSE 167 ... Level 0 Level 1 Level 2 ... SIGGRAPH](https://reader031.vdocuments.net/reader031/viewer/2022022523/5b39169e7f8b9a600a8dffe4/html5/thumbnails/58.jpg)
Solid textures
• Texture values indexed by 3D location (x,y,z)
• Expensive storage, or
• Compute on the fly,e.g. Perlin noise
CSE 167, Winter 2018 58