C P S C 314 WHY IS TEXTURE IMPORTANT? TEXTURE MAPPING TEXTURE - PowerPoint PPT Presentation

C P S C 314 WHY IS TEXTURE IMPORTANT? TEXTURE MAPPING TEXTURE MAPPING TEXTURE MAPPING • real life objects have • hide geometric simplicity nonuniform colors, normals • images convey illusion of geometry • to generate realistic objects, • map a brick wall texture on a flat polygon reproduce coloring & normal • create bumpy effect on surface variations = texture • usually: • can often replace complex associate 2D information with a surface in 3D geometric details UGRAD.CS.UBC.CA/~cs314 • point on surface ↔ point in texture • “paint” image onto polygon Glen Berseth (Based of Mikhail Bessmeltsev and Dinesh Pai) 12 12 C O L O R TEXTURE MAPPING TEXTURE MAPPING TEXTURE MAPPING – Questions? S U R F A C E TEXTURE • define color (RGB) for each point on object surface • Define texture pattern over (u,v) domain (Image) v • Image – 2D array of “texels” • other: (u 2 ,v 2 ) 1 • Assign (u,v) coordinates to each point on object surface • volumetric texture • How: depends on surface type • procedural texture • For polygons (triangle) • Inside – use barycentric coordinates (u 0 ,v 0 ) • For vertices need mapping function (artist/programmer) (u 1 ,v 1 ) v 0 u 0 1 (u, v) parameterization sometimes called (s,t) u TEXTURE MAPPING EXAMPLE TEXTURE MAPPING EXAMPLE TEXTURE MAPPING EXAMPLE THREE.JS • pass texture as a uniform: + = var uniforms = { texture1: { type: "t", value: THREE.ImageUtils.loadTexture( "texture.jpg" ) }}; Pause …. -- > Math Example 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); TILED TEXTURE MAP TEXTURE LOOKUP: HOW TO USE C O L O R TEXTURES IN THREE.JS TILING AND CLAMPING (1,0) (1,1) • What if s or t is outside[0…1] ? • Replace var texture = THREE.ImageUtils.loadTexture( • Multiple choices "textures/water.jpg" ); • Set fragment color to texture color • Use fractional part of texture texture.wrapS = THREE.RepeatWrapping; coordinates texture.wrapT (0,0) (0,1) gl_FragColor = texColor; = THREE.ClampToEdgeWrapping; • Cyclic repetition ( repeat ) texture.repeat.set( 4, 4 ); • Modulate • Clamp every component to range [0…1] • Re-use color values from texture • Use texture color as reflection color in illuminationequation (4,4) (4,0) image border kd = texColor; ka = texColor; gl_FragColor = ka*ia + kd*id*dotProduct + …; (0,0) (0,4) 23

MIPMAPS RECONSTRUCTION MIPMAPPING MIPMAP STORAGE • multum in parvo - - many things in a smallplace • prespecify a series of prefiltered texture maps of decreasing resolutions use “image pyramid” to precompute • only 1/3 more space required • requires more texture storage averaged versions of the texture • avoid shimmering and flashing as objects move • texture.generateMipmaps = true • automatically constructs a family of textures from original texturesize down to 1x1 Without MIP-mapping • texture.mipmaps[…] without with store whole pyramid in single block of memory (image courtesy of Kiriakos Kutulakos, U Rochester) With MIP-mapping TEXTURE MAPPING OTHER USES F O R TEXTURES • usually provides colour, but … Texture coordinate interpolation • can also use to control other material/object properties • Perspective foreshortening problem • Also problematic for color interpolation, etc. • surface normal (bump mapping) • reflected color (environment mapping) HOW TO INTERPOLATE S,T? OTHER USES F O R TEXTURES BUMP MAPPING: NORMALS A S TEXTURE BUMP MAPPING BUMP MAPPING EMBOSSING • object surface often not smooth – to recreate correctly • at transitions need complex geometry model • rotate point’s surface normal by θ or - θ • can control shape “effect” by locally perturbing surface normal • random perturbation • directional change over region BUMP MAPPING: LIMITATION BUMP MAPPING: LIMITATION DISPLACEMENT MAPPING ENVIRONMENT MAPPING Why don’t we modify geometry instead of modifying normals? • bump mapping gets silhouettes wrong • cheap way to achieve reflective effect • shadows wrong too • generate image of surrounding • map to object as texture • 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

ENVIRONMENT MAPPING CUBE MAPPING S P H E R E MAPPING CUBE MAPPING F • texture is distorted fish-eye view • used to model object that reflects surrounding textures to • point camera at mirrored sphere • 6 planar textures, sides of cube • spherical texture mapping creates texture coordinates that the eye • point camera in 6 different directions, facing out from origin correctly index into this texture map • movie example: cyborg in Terminator 2 • different approaches A • sphere, cube most popular • others possible too C B E D CUBE MAPPING CUBE MAPPING ENVIRONMENT MAPS (EM) VOLUMETRIC TEXTURE how to • define texture pattern over 3D domain - 3D calculate? • direction of reflection vector r selects the face of the cube to be indexed • direction of reflection vector r selects the face of the cube to be indexed • in theory, every object should have a separate EM space containing the object • co-ordinate with largest magnitude • co-ordinate with largest magnitude • in theory, every time something moves, you should re-compute EM • texture function can be digitized or • e.g., the vector (-0.2, 0.5, -0.84) selects the –Z face • e.g., the vector (-0.2, 0.5, -0.84) selects the –Z face • “you’ll be surprised at what you can get away with” procedural • for each point on object compute texture • remaining two coordinates select the pixel from the face. • remaining two coordinates select the pixel from the face. from point location in space • difficulty in interpolating across faces • difficulty in interpolating across faces • e.g., ShaderToy • computing is cheap, memory access is expensive ! PERLIN NOISE: TURBULENCE PR OCEDU R AL TEXTURE EFFECTS: PERLIN NOISE: PR OCEDU R AL PERLIN NOISE: TURBULENCE BOMBING TEXTURES • multiple feature sizes • add scaled copies of noise • randomly drop bombs of various shapes, sizes and orientation • several good explanations • multiple feature sizes into texture space (store data in table) • add scaled copies of noise • http://www.noisemachine.com/talk1 • for point P search table and determine if inside shape • http://freespace.virgin.net/hugo.elias/models/m_perlin.htm • http://www.robo-murito.net/code/perlin-noise-math-faq.html • if so, color by shape’s color • otherwise, color by object’s color http://mrl.nyu.edu/~perlin/planet/ THE RENDERING PIPELINE Vertex Shader Vertices Vertex Post-Processing and attributes Modelview transform Viewport transform Clipping Per-vertex attributes Rasterization Fragment Shader Scan conversion Texturing/... Interpolation Lighting/shading Per-Sample Operations Framebuffer Depth test Blending