c p s c 314
play

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

Apr 16, 2023 •414 likes •448 views

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,

  1. 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

  2. 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

  3. 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

Recommend

More recommend