real-time rendering
DESCRIPTION
Real-Time Rendering. TEXTURING Lecture 02 Marina Gavrilova. Brief Outline. Basic Concept Texture Wrapping Magnification filter Minification filter Multi-Texturing Dynamic Texture Texture mapping methods. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/1.jpg)
Real-Time Rendering
TEXTURING
Lecture 02Marina Gavrilova
![Page 2: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/2.jpg)
Brief Outline Basic Concept Texture Wrapping Magnification filter Minification filter Multi-Texturing Dynamic Texture Texture mapping methods
![Page 3: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/3.jpg)
Concept of Texture Texture: Variation of surface
diffusion, color, glossiness and other reflective photometry
The heart of today’s computer graphics
Texture Pixel = Texel Polygon is filled using texel values. Texture coordinate associates a
screen pixel with a texel
![Page 4: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/4.jpg)
Texturing a surface
![Page 5: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/5.jpg)
Texture mapping
![Page 6: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/6.jpg)
Texture mapping in computer games
Environment mapping
Alpha mapping
Bump mapping
Color texture
Multi-texturing
![Page 7: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/7.jpg)
Basic Texturing concept Modify the value used in the
lighting equation Basic Texture = per pixel object
color Steps:
Assign UV texture coordinates to vertices of a polygon (i.e. triangle)
Interpolate texture UV coordinate for each fill pixel during rasterization of the triangle
Lookup texel value from texture using UV coord.
Use texel value in lighting equation
![Page 8: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/8.jpg)
Texture Method
Texture pipeline used in rendering platforms to use hardware accelerations
U,V[0,1] scaled texel coordinate
Texture resolution is a power of 2 (i.e. 256 x 256 texels)
![Page 9: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/9.jpg)
Texture Pipeline Compute object space location Use projector function to find (u,v) Use corresponding functions to find texel Apply value transform function Modify illumination equation value
![Page 10: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/10.jpg)
Texture Rendering
![Page 11: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/11.jpg)
Texture modes When UV value goes beyond the range
[0,1] i.e. uv= (-1,-1) (2,2) (see below) Allow simple and small textures to render
large complex objects
Tile Mirror Clamp Border
![Page 12: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/12.jpg)
Three dimensional texture coordinate (u,v,w) 2D texture wrapping can
be difficult for complex object
3D texture mapping use (u,v,w) coordinate for texture address
Result is uniform texture distribution on a surface
![Page 13: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/13.jpg)
Texture magnification When 1 texel = n
pixels (n>1)
Visual Pixelation effect prominent
Solution: apply magnification filter
No Filter
Bilinear
Bilinear No Filter
![Page 14: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/14.jpg)
Bilinear Filtering Four pixel linear
Interpolation (2x2)
Fast but low quality
![Page 15: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/15.jpg)
Bicubic Not yet used in realtime
graphics Up to 4x4 pixel interpolation Good quality Slow
![Page 16: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/16.jpg)
Minification filter When n texel = 1 pixel Aliasing distortion is present Annoying artifact during
animation Solution: MIP mapping, min-filters
![Page 17: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/17.jpg)
Min filters Nearest
MIP
Summed area
![Page 18: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/18.jpg)
MIP Mapping (Base Concept) Have multiple copy of a texture with reduced resolution
(factor of 2) I.e. (256x256), (128,128), (64,64),…(1,1) Determine LOD from neighboring pixel UV difference
(spacing)
![Page 19: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/19.jpg)
![Page 20: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/20.jpg)
Anisotropic Filtering
Trilinear MIP-MAPPING Anisotropic Filtering
![Page 21: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/21.jpg)
![Page 22: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/22.jpg)
Texture caching and compression Complex scene require large amount of texture Texture Memory is limited Texture management: Load only smaller LODs
for distant objects Use Clip-maps: load a small segment of high
LOD texture S3TC (6:1) compression DirectX standard
Use two colors for a 4 color ramp Represent 16 pixels using 4 colors 2 bit per pixel, 16 bit per color Average 4 bit per
pixel
![Page 23: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/23.jpg)
Multi-pass rendering
Rendering the same geometry several times
Integrate different photometric components
I.e. Quake III has 10 rendering passes
![Page 24: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/24.jpg)
Multi-texturing Combine two or
more textures
Could be performed in one rendering pass
Pixel value is computed using values from different texture stages
![Page 25: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/25.jpg)
Multi-texture & Pixel-shader
![Page 26: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/26.jpg)
Texture Effects
Variety of realistic 3D effects can be created by
manipulating textures of a 3D geometry
![Page 27: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/27.jpg)
Texture Animation Dynamic
animated texture
Store combined static frames as 1 image
Use different UVs to animate frames
Frame 5
UV=(0.25,0.25)
UV=(0.5,0.5)
![Page 28: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/28.jpg)
Transparency Alpha mapping
+ =
![Page 29: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/29.jpg)
Billboarding Create complex objects using
texture and simple geometry
Used extensively in particle rendering systems
Use faceted quads normal of the quad equals camera direction
Used frequently in games
High performance
![Page 30: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/30.jpg)
Multi Textured Gloss Mapping
![Page 31: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/31.jpg)
Reflection/Environment mapping
Blinn & Newells method:
![Page 32: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/32.jpg)
Other environment mapping
Cube Mapping
![Page 33: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/33.jpg)
Bump Mapping
Per-pixel normal Use cubemaps for
normal
![Page 34: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/34.jpg)
Bump mapping
Use cubemap and multi-texture pass
Or use High level shading Language (HLSL) in nvidia
![Page 35: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/35.jpg)
Other texture teqniques Detail Textures (i.e. flight simulator) Procedural Texture Anti-aliasing Motion blur Realistic shading Volumetric Texture Image processing using texture passes Exposure control (Dynamic Range)
![Page 36: Real-Time Rendering](https://reader035.vdocuments.site/reader035/viewer/2022081501/56812a5f550346895d8dd020/html5/thumbnails/36.jpg)
End of Lecture 02
Questions?