texture mapping - cs.ucr.educraigs/courses/2018-fall-cs... · environment maps bump maps opacity...

33
Texture Mapping University of California Riverside

Upload: others

Post on 11-Mar-2021

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Texture Mapping

University of California Riverside

Page 2: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Limits of geometric modeling

Although modern GPUs can render millions oftriangles/sec, that’s not enough sometimes. . .

Page 3: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Texture mapping for detail

This image contains 8 polygons!

Page 4: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Texture mapping comparison

no texture with texture

Page 5: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Pixar - Toy Story

Page 6: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Other uses of textures. . .

Light maps

Shadow maps

Environmentmaps

Bump maps

Opacity maps

Animation

Page 7: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Lookup reflectances in image

Image source: [1, 2]

Page 8: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Texture mapping in the pipeline

Geometry and pixels have separatepaths through pipelineTextures applied in fragment shader

End of pipelineEfficient since relatively few polygonsget past clipper

vertex input

vertex shader

tessellation

geometry shader

post vertex processing

primitive assembly

rasterization

fragment shader

per-sample operations

Page 9: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

uv Mapping

2D texture is parameterized by (u, v)

Assign polygon vertices texture coordinates

Interpolate within polygon

(u0, v0)(u1, v1)

(u2, v2)

Page 10: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in
Page 11: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Texturing triangles

Store (u, v) at each vertex

Interpolate inside triangles using barycentriccoordinates

u

v 1, 10, 1

0, 0 1, 0

(0.4, 0.2)

(0.8, 0.4)

A

B C

a

bc

Texture Space Object Space

(u,v) = (0.2, 0.8)

Page 12: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Texturing triangles

Store (u, v) at each vertex

Interpolate inside triangles using barycentriccoordinates

p(β, γ) = pa + β(pb − pa) + γ(pc − pa)

u(β, γ) = ua + β(ub − ua) + γ(uc − ua)

v(β, γ) = va + β(vb − va) + γ(vc − va)

Page 13: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Texture mapping

Page 14: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Point sampling

Map back to texture image and use the nearest texel

Page 15: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Aliasing

Point sampling textures can lead to aliasing artifacts

Page 16: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Magnification and minification

Minification

Magnification

Page 17: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Aliasing artifacts

We apply filtering toreduce aliasing

artifacts

Page 18: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Area averaging

A better but slower option is to use area averaging

Page 19: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Use bilinear filtering

nearestneighbor

bilinear bicubic

P0 P1

P2 P3

P

mitigate magnification artifacts

Page 20: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Mipmapping

Reduce minification artifacts

Prefilter the texture to obtainreduced resolutions

Requires 13 more space

Get a texture hierarchyindexed by level

Page 21: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

pointsampling

linearfiltering

mipmappedpoint

sampling

mipmappedlinear

filtering

Page 22: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

pointsampling

linearfiltering

mipmappedpoint

sampling

mipmappedlinear

filtering

Page 23: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Environment mapping

Page 24: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Environment mapping

Use a texture for the distant environmentsimulate the effect of ray tracing more cheaply

Page 25: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Sphere mapping

Project objects in the environment ontosphere centered at eye

Unwrap and store as texture

Use reflection direction to look up texturevalue

Page 26: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Cube mapping

Compute six projections, one for each wall

Store as texture

Use reflection direction to lookup texturevalue

Page 27: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Different environment maps

Blinn/Newelllatitude mapping spherical mapping cube mapping

Page 28: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Environment mapping

Create the effect of a mirror with two-passrendering

First pass: render the scene from theperspective of the mirror

Second pass: render from original pov; use thefirst image as a texture for the mirror

Page 29: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Bump mapping

Page 30: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in
Page 31: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

bump mapping geometric detail

Page 32: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Normal mapping

Page 33: Texture Mapping - cs.ucr.educraigs/courses/2018-fall-cs... · Environment maps Bump maps Opacity maps Animation. Lookup re ectances in image Image source: [1, 2] Texture mapping in

Attribution

[1] vort. Cellulartexture.png. https://commons.wikimedia.org/wiki/File:CellularTexture.png. CCBY-SA 3.0.

[2] Wiksaidit. Procedural texture.jpg.https://commons.wikimedia.org/wiki/File:Procedural Texture.jpg. CC BY-SA 3.0.