cpsc 314 19 – texture mappingtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump...
TRANSCRIPT
![Page 1: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/1.jpg)
C P S C 314T E X T U R E M A P P I N G
UG RA D.C S .UB C .C A / ~ cs 3 1 4Glen Berseth (Based of Mikhail Bessmeltsev and
Dinesh Pai)
![Page 2: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/2.jpg)
12
W H Y I S T E X T U R E I M P O R T A N T ?
![Page 3: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/3.jpg)
12
T E X T U R E M A P P I N G• real life objects have
nonuniform colors, normals• to generate realistic objects,
reproduce coloring & normal variations = texture
• can often replace complex geometric details
![Page 4: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/4.jpg)
T E X T U R E M A P P I N G• hide geometric simplicity
• images convey illusion of geometry• map a brick wall texture on a flat polygon• create bumpy effect on surface
• usually:associate 2D information with a surface in 3D
• point on surface ↔ point in texture• “paint” image onto polygon
![Page 5: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/5.jpg)
C O L O R T E X T U R E M A P P I N G• define color (RGB) for each point on object surface• other:
• volumetric texture• procedural texture
![Page 6: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/6.jpg)
T E X T U R E M A P P I N G
u
v
(u0,v0)(u1,v1)
(u2,v2)
0 10
1
(u, v) parameterizationsometimes called (s,t)
![Page 7: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/7.jpg)
T E X T U R E M A P P I N G – Q u e s t i o n s ?
![Page 8: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/8.jpg)
S U R F A C E T E X T U R E
u
• Define texture pattern over (u,v) domain (Image)• Image – 2D array of “texels”
• Assign (u,v) coordinates to each point on object surface• How: depends on surface type
• For polygons (triangle)• Inside – use barycentric coordinates• For vertices need mapping function (artist/programmer)
v
![Page 9: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/9.jpg)
T E X T U R E M A P P I N G E X A M P L E
+ =
![Page 10: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/10.jpg)
T E X T U R E M A P P I N G E X A M P L E
![Page 11: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/11.jpg)
T E X T U R E M A P P I N G E X A M P L E
Pause …. --> Math Example
![Page 12: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/12.jpg)
T H R E E . J S• pass texture as a uniform:
"texture.jpg" ) }};var uniforms = {
texture1: { type: "t", value: THREE.ImageUtils.loadTexture(var material = new THREE.ShaderMaterial( { uniforms, …});
• uv will be passed on to the vertex shader (no need to write this):attribute vec2 uv;
• use it, e.g., in Fragment Shader:
uniform sampler2D texture1;varying vec2 texCoord;vec4 texColor = texture2D(texture1, texCoord);
![Page 13: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/13.jpg)
H O W T O U S E C O L O R T E X T U R E S
• Replace• Set fragment color to texture color
gl_FragColor = texColor;
• Modulate• Use texture color as reflection color in illuminationequation
kd = texColor; ka = texColor;gl_FragColor = ka*ia + kd*id*dotProduct + …;
![Page 14: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/14.jpg)
T E X T U R E L O O K U P : T IL ING A N D C L A M P I N G• What if s or t is outside[0…1] ?• Multiple choices
• Use fractional part of texture coordinates
• Cyclic repetition (repeat)
• Clamp every component to range [0…1]• Re-use color values from texture
image border
![Page 15: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/15.jpg)
IN T H R E E . J S
var texture = THREE.ImageUtils.loadTexture("textures/water.jpg" );texture.wrapS
texture.wrapT= THREE.RepeatWrapping;
= THREE.ClampToEdgeWrapping;
texture.repeat.set( 4, 4 );
![Page 16: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/16.jpg)
23
(1,0)
(0,0) (0,1)
(1,1)
T I L E D T E X T U R E M A P
(4,4)(4,0)
(0,4)(0,0)
![Page 17: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/17.jpg)
R E C O N S T R U C T I O N
(image courtesy of Kiriakos Kutulakos, U Rochester)
![Page 18: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/18.jpg)
MIPMAPPING
Without MIP-mapping
use “image pyramid” to precompute averaged versions of the texture
store whole pyramid in single block of memory
With MIP-mapping
![Page 19: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/19.jpg)
MIP M AP S• multum in parvo - - many things in a small place
• prespecify a series of prefiltered texture maps of decreasing resolutions
• requires more texture storage• avoid shimmering and flashing as objects move
• texture.generateMipmaps = true
• automatically constructs a family of textures from original texturesize down to 1x1
• texture.mipmaps[…]
without with
![Page 20: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/20.jpg)
MIPMAP S T O R A G E
• only 1/3 more space required
![Page 21: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/21.jpg)
H O W T O I N T E R P O L A T E S,T?
![Page 22: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/22.jpg)
Texture coordinate interpolation• Perspective foreshortening problem• Also problematic for color interpolation, etc.
T E X T U R E M A P P I N G
![Page 23: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/23.jpg)
O T H E R U S E S F O R T E X T U R E S
![Page 24: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/24.jpg)
O T H E R U S E S F O R T E X T U R E S• usually provides colour, but …• can also use to control other material/object properties
• surface normal (bump mapping)• reflected color (environment mapping)
![Page 25: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/25.jpg)
BUMP MAPPING: N O R M A L S A S T E X T U R E• object surface often not smooth – to recreate correctly
need complex geometry model• can control shape “effect” by locally perturbing surface
normal• random perturbation• directional change over region
![Page 26: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/26.jpg)
BUMP M A P P I N G
![Page 27: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/27.jpg)
BUMP M A P P I N G
![Page 28: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/28.jpg)
E M B O S S I N G• at transitions
• rotate point’s surface normal by θ or - θ
![Page 29: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/29.jpg)
BUMP MAPPING: L IMITATION
![Page 30: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/30.jpg)
BUMP MAPPING: L IMITATIONWhy don’t we modify geometry instead of modifying normals?
![Page 31: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/31.jpg)
D I S P L A C E M E N T M A P P I N G
• bump mapping gets silhouettes wrong• shadows wrong too
• change surface geometry instead• only recently available with realtime
graphics• need to subdivide surface
https://en.wikipedia.org /wiki/Displacement_map ping#/media/File:Displacement.jpg
![Page 32: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/32.jpg)
E N V I R O N M E N T M A P P I N G• cheap way to achieve reflective effect
• generate image of surrounding• map to object as texture
![Page 33: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/33.jpg)
E N V I R O N M E N T M A P P I N G
• used to model object that reflects surrounding textures to the eye
• movie example: cyborg in Terminator 2• different approaches
• sphere, cube most popular• others possible too
![Page 34: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/34.jpg)
S P H E R E M A P P I N G• texture is distorted fish-eye view
• point camera at mirrored sphere• spherical texture mapping creates texture coordinates that
correctly index into this texture map
![Page 35: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/35.jpg)
C U B E M A P P I N G
• 6 planar textures, sides of cube• point camera in 6 different directions, facing out from origin
![Page 36: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/36.jpg)
A
CB
E
C U B E M A P P I N GF
D
![Page 37: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/37.jpg)
C U B E M A P P I N G
• direction of reflection vector r selects the face of the cube to be indexed• co-ordinate with largest magnitude
• e.g., the vector (-0.2, 0.5, -0.84) selects the –Z face
• remaining two coordinates select the pixel from the face.
• difficulty in interpolating across faces
![Page 38: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/38.jpg)
C U B E M A P P I N Ghow to
calculate?• direction of reflection vector r selects the face of the cube to be indexed
• co-ordinate with largest magnitude• e.g., the vector (-0.2, 0.5, -0.84) selects the –Z face
• remaining two coordinates select the pixel from the face.
• difficulty in interpolating across faces
![Page 39: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/39.jpg)
E N V I R O N M E N T M A P S (EM)
• in theory, every object should have a separate EM• in theory, every time something moves, you should re-compute EM• “you’ll be surprised at what you can get away with”
![Page 40: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/40.jpg)
V O L U M E T R I C T E X T U R E• define texture pattern over 3D domain - 3D
space containing the object• texture function can be digitized or
procedural• for each point on object compute texture
from point location in space• e.g., ShaderToy
• computing is cheap,memory access is expensive !
![Page 41: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/41.jpg)
P R O C E D U R A L T E X T U R E E F F E C T S : BOMBING• randomly drop bombs of various shapes, sizes and orientation
into texture space (store data in table)• for point P search table and determine if inside shape
• if so, color by shape’s color• otherwise, color by object’s color
![Page 42: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/42.jpg)
P E R L I N N O I S E : P R O C E D U R A L T E X T U R E S• several good explanations
• http://www.noisemachine.com/talk1• http://freespace.virgin.net/hugo.elias/models/m_perlin.htm• http://www.robo-murito.net/code/perlin-noise-math-faq.html
http://mrl.nyu.edu/~perlin/planet/
![Page 43: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/43.jpg)
P E R L I N N O I S E : T U R B U L E N C E
• multiple feature sizes• add scaled copies of noise
![Page 44: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/44.jpg)
P E R L I N N O I S E : T U R B U L E N C E
• multiple feature sizes• add scaled copies of noise
![Page 45: CPSC 314 19 – TEXTURE MAPPINGtmm/courses/314-16/slides/texturing.pdf · • surface normal (bump mapping) • reflected color (environment mapping) BUMP MAPPING: NORMALS AS TEXTURE](https://reader036.vdocuments.site/reader036/viewer/2022070214/6112d233f406f335112c473d/html5/thumbnails/45.jpg)
T H E R E N D E R I N G P I P E L I N EVertex Shader Vertex Post-Processing
Rasterization
Per-Sample OperationsFramebuffer
Verticesand attributes Modelview transform
Interpolation
Per-vertex attributes Clipping
Viewport transform
Scan conversion
Fragment ShaderTexturing/...
Lighting/shading
Depth test
Blending