This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
Computer Graphics
Computer Graphics
This is a good optimization! Displacement-mapping requires a lot of triangles, bump-mapping doesn’t.
Computer Graphics
mjb – December 22, 2020
Computer Graphics
mjb – December 22, 2020
Bump Mapping
Mike Bailey mjb@cs.oregonstate.edu
bumpmapping.pptx
mjb – December 22, 2020
mjb – December 22, 2020
12
The Most Straightforward Type of Bump-Mapping is
3
Definition of Height Fields — Think of the Pin Box!
4
Height Fields
34
1
What is Bump-Mapping? 2
Bump-mapping is the process of creating the illusion of 3D depth by using a manipulated surface normal in the lighting, rather than actually creating the extra surface detail.
Displacement-mapped
Bump-mapped
12/22/2020
1
terrain.vert
5
terrain.frag, I
6
#version 330 compatibility
#version 330 compatibility
out vec3 out vec3 out vec2
vMCposition; vECposition; vST;
uniform float uniform float uniform vec4 uniform sampler2D uniform bool uniform float uniform float uniform float uniform float
uLightX, uLightY, uLightZ; uExag;
uColor;
uHgtUnit;
Floating-point texture whose .r components contain the heights (in meters)
void main( ) {
uUseColor; uLevel1; uLevel2; uTol; uDelta;
}
Computer Graphics
mjb – December 22, 2020
Computer Graphics
mjb – December 22, 2020
} Comp}uter Graphics
mjb – December 22, 2020
Computer Graphics
mjb – December 22, 2020
vST = gl_MultiTexCoord0.st;
vMCposition = gl_Vertex .xyz;
vECposition = ( gl_ModelViewMatrix * gl_Vertex ).xyz; gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
in vec3 in vec3 in vec2
vMCposition; vECposition; vST;
It turns out that textures are a great place to “hide” data. They are allowed to be very large and they are fast to lookup values in.
56
terrain.frag, II
7
Terrain Height Bump-mapping: Exaggerating the Height 8 No Exaggeration
void main( ) {
vec2 stp0 = vec2( DELTA, 0. );
vec2 st0p = vec2( 0. , DELTA );
float west = texture2D( uHgtUnit, vST-stp0 ).r; float east = texture2D( uHgtUnit, vST+stp0 ).r; float south = texture2D( uHgtUnit, vST-st0p ).r; float north = texture2D( uHgtUnit, vST+st0p ).r;
vec3 stangent = vec3( 2.*DELTA*(LNGMAX-LNGMIN), 0., uExag * ( east – west ) ); vec3 ttangent = vec3( 0., 2.*DELTA*(LATMAX-LATMIN), uExag * ( north – south ) ); vec3 normal = normalize( cross( stangent, ttangent ) );
This entire geometry consists of just a single quadrilateral!
float LightIntensity = dot( normalize( vec3(uLightX,uLightY,uLightZ) – vMCposition ), normal ); if( LightIntensity < 0.1 )
LightIntensity = 0.1; if( uUseColor )
Remember that the cross product of two vectors gives you a vector that is perpendicular to both. So, the cross product of two tangent vectors gives you a good approximation to the surface normal.
{
} else {
float here = texture2D( uHgtUnit, vST ).r; vec3 color = BLUE;
if(here>0.)
{
}
if( here > uLevel1+uTol ) {
float t = smoothstep( uLevel1-uTol, uLevel1+uTol, here ); color = mix( GREEN, BROWN, t );
float t = smoothstep( uLevel2-uTol, uLevel2+uTol, here ); color = mix( BROWN, WHITE, t );
}
gl_FragColor = vec4( LightIntensity*color, 1. );
Exaggerated
gl_FragColor= vec4( LightIntensity*uColor.rgb, 1. );
78
const float DELTA =
0.001;
const vec3 BLUE =
const vec3 GREEN =
const vec3 BROWN = vec3( 0.6, 0.3, 0.1 ); const vec3 WHITE = vec3( 1.0, 1.0, 1.0 );
const float LNGMIN = -579240./2.; const float LNGMAX = 579240./2.; const float LATMIN = -419949./2.; const float LATMAX = 419949./2.;
// in meters, same as heights
vec3( 0.1, 0.1, 0.5 ); vec3( 0.0, 0.8, 0.0 );
12/22/2020
2
Computer Graphics
mjb – December 22, 2020
Computer Graphics
mjb – December 22, 2020
Computer Graphics
mjb – December 22, 2020
Computer Graphics
mjb – December 22, 2020
11
12
Terrain Height Bump-mapping: Coloring by Height
Terrain Height Bump-mapping: Coloring by Height
9 10
Terrain Height Bump-mapping: Even Zooming-in Looks Good
11
Terrain Height Bump-Mapping on a Globe
12
Portland Salem
Several textures are being mixed onto the surface of the globe
Corvallis
Eugene
Crater Lake
12/22/2020 9 10
Visualization by Nick Gebbie
Exaggerated
No Exaggeration
3
13
14
The Second Most Straightforward Type of Bump-Mapping is
13
The Second Most Straightforward Type of Bump-Mapping is 14 Height Field Equations
This is the coordinate system we will be using. The plane is X-Y with Z pointing up
𝑟 𝑥 𝑦
𝜕𝑟
2𝑟 𝜕𝑦 2𝑦
𝜕𝑟 𝑦 𝜕𝑦 𝑟
Computer Graphics
mjb – December 22, 2020
Computer Graphics
mjb – December 22, 2020
Computer Graphics
mjb – December 22, 2020
Computer Graphics
mjb – December 22, 2020
15
16
Height Field Equations
Rock Dropped
The Second Most Straightforward Type of Bump-Mapping is
15
Combining Bump and Cube Mapping
16
Rock A Dropped
Rock B Dropped Both Rocks Dropped
Height Field Equations
You can sum the individual height field equations and get the same result as summing the height field displacements
𝑧 𝐴𝑐𝑜𝑠2𝜋𝐵𝑟 𝐶𝑒 normal 𝑥𝑡𝑎𝑛𝑔𝑒𝑛𝑡 x 𝑦𝑡𝑎𝑛𝑔𝑒𝑛𝑡
Radial-ripple equation with height decay
𝑥𝑡𝑎𝑛𝑔𝑒𝑛𝑡 𝑣𝑒𝑐31. , 0. , 𝜕𝑧 𝜕𝑥
𝑦𝑡𝑎𝑛𝑔𝑒𝑛𝑡 𝑣𝑒𝑐30. , 1. , 𝜕𝑧 𝜕𝑦
𝜕𝑧 𝜕𝑧 𝜕𝑟 𝜕𝑥 𝜕𝑟 𝜕𝑥
𝜕𝑧 𝜕𝑧 𝜕𝑟 𝜕𝑦 𝜕𝑟 𝜕𝑦
𝐴𝑠𝑖𝑛2𝜋𝐵𝑟 𝐶2𝜋𝐵𝑒+𝐴𝑐𝑜𝑠2𝜋𝐵𝑟 𝐶𝐷𝑒
If we can get the two tangent vectors, then their cross product will give us the surface normal
2𝑟 𝜕𝑟 2𝑥 𝜕𝑟 𝑥 𝜕𝑥 𝜕𝑥𝑟
(Note: x/r and y/r are actually the cosine and sine of the polar angle.)
12/22/2020
4