This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
Computer Graphics
mjb – February 8, 2021
Cube Mapping
Mike Bailey mjb@cs.oregonstate.edu
cubemapping.pptx
1
What is Cube Mapping?
Cube Mapping is the process of creating a representation of an object’s surrounding environment as a collection of 6 images, grouped together as a single “cube map texture”.
Think of it as a folding box.(BTW, I have this box on a 2-sided PowerPoint slide if you want
to print and cutout your own.)
(BTW, I have this box on a 2-sided PowerPoint if you want to print and cutout your own.)
Computer Graphics
mjb – February 8, 2021
Note: as the scene observer, you are inside the box.
2
Go here:
Using Cube Mapping to Model a 3D Environment
Top
3
Take 6 photos in all directions. Warning! It is tricky to do this and get the seams to match.
Front Right Back Left
https://www.humus.name/index.php?page= Textures&start=0
to find lots of cool cube map textures. You can find lots more cube map textures
Computer Graphics
just by Googling: cube map textures
mjb – February 8, 2021
Bottom
Computer Graphics
mjb – February 8, 2021
Cube Map of the Kelley Engineering Center Atrium
4
Cube Map Texture Lookup:
Given an (s,t,p) direction vector , what (r,g,b) does that correspond to?
5
-X
+Y
• Let L be the texture coordinate of (s, t, and p) with the largest magnitude
-Y
-Z +X
• The texture coordinates in that texture are the remaining two texture coordinates divided by L: (s=a/L,t=b/L)
vec3 ReflectVector = reflect( vec3 eyeDir, vec3 normal );
vec3 RefractVector = refract( vec3 eyeDir, vec3 normal, float Eta );
Computer Graphics
mjb – February 8, 2021
• L determines which of the 6 2D texture “walls” is being hit by the vector (-X in this case)
These are built-in GLSL functions
Computer Graphics
-Z
Cube Map of the World
6
-X +Y
+X -Y
+Z
mjb – February 8, 2021
Computer Graphics
mjb – February 8, 2021
Creating a Globe from the World Cubemap (some shapes map better than others…)
7
Use the normal (nx,ny,nz) as the (s,t,p) for the lookup
(Some shapes map better than others…)
Computer Graphics
mjb – February 8, 2021
Vertex shader
void main( ) {
}
Fragment shader
Creating a Globe from the World Cubemap
8
out vec3 vNormal;
vNormal = normalize( gl_Normal );
gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
uniform samplerCube uTexUnit; in vec3 vNormal;
void main( ) {
}
vec4 newcolor = textureCube( uTexUnit, vNormal ); gl_FragColor = vec4( newcolor.rgb, 1. );
Computer Graphics
mjb – February 8, 2021
Using the Cube Map for Reflection
9
Vertex shader
out vec3
vReflectVector;
void main( ) {
}
Fragment shader
in vec3
uniform samplerCube
vReflectVector; uReflectUnit;
void main( ) {
}
Computer Graphics
mjb – February 8, 2021
Using the Cube Map for Reflection
10
vec3 ECposition = ( gl_ModelViewMatrix * gl_Vertex ).xyz;
vec3 eyeDir = ECposition – vec3(0.,0.,0.); // vector from eye to pt vec3 normal = normalize( gl_NormalMatrix * gl_Normal );
vReflectVector = reflect( eyeDir, normal );
gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
vec4 newcolor = textureCube( uReflectUnit, vReflectVector ); gl_FragColor = vec4( newcolor.rgb, 1. )
Computer Graphics
mjb – February 8, 2021
Using the Cube Map for Refraction
11
Vertex shader
out vec3
out vec3 uniform float
vRefractVector; vReflectVector; uEta;
void main( ) {
}
Fragment shader
in vec3
in vec3
uniform float
uniform samplerCube
uniform samplerCube
const vec4 WHITE = vec4( 1.,1.,1.,1. );
void main( ) {
}
Computer Graphics
mjb – February 8, 2021
Using the Cube Map for Refraction
12
vec3 ECposition = vec3( gl_ModelViewMatrix * gl_Vertex );
vec3 eyeDir = normalize( ECposition – vec3(0.,0.,0. ) ); vec3 normal = normalize( gl_NormalMatrix * gl_Normal ); vRefractVector = refract( eyeDir, normal, uEta ); vReflectVector = reflect( eyeDir, normal );
// vector from eye to pt
gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
vReflectVector; vRefractVector; uMix; uReflectUnit; uRefractUnit;
vec4 refractcolor = textureCube( uRefractUnit, vRefractVector ); vec4 reflectcolor = textureCube( uReflectUnit, vReflectVector ); refractcolor = mix( refractcolor, WHITE, .40 );
gl_FragColor = vec4( mix( refractcolor, reflectcolor, uMix ).rgb, 1. );
Computer Graphics
mjb – February 8, 2021
13
Computer Graphics
mjb – February 8, 2021
14
Computer Graphics
mjb – February 8, 2021
15
Air
The Index of Refraction (IOR) is a measure of how much light slows down as it passes through a particular material. The larger the IOR, the slower the speed of light in that material.
η1 η2
𝜃
Water
Or: 𝜂 𝑠𝑖𝑛𝜃 𝑠𝑖𝑛𝜃 𝜂
𝜃
Snell’s Law of Refraction says that:
The Index of Refraction, η
16
Notice that there are certain combinations of the η’s that require sinΘ2 to be outside the range -1. → +1., which is not possible. This indicates that the refraction has actually become a reflection.
Computer Graphics
https://en.wikipedia.org/wiki/Snell’s_law
mjb – February 8, 2021
𝑠𝑖𝑛𝜃 𝜂 𝑠𝑖𝑛𝜃 𝜂
Computer Graphics
mjb – February 8, 2021
Air
https://en.wikipedia.org/wiki/List_of_refractive_indices
Common Indices of Refraction
17
Material η
1.000237 Ice 1.31 Water 1.33 Pyrex 1.47 Window Glass 1.52 Quartz 1.54 Cubic Zirconia 2.16 Diamond 2.42 Moissanite 2.69
Computer Graphics
mjb – February 8, 2021
Glib file
##OpenGL GLIB Perspective 70
Vertex texture.vert Fragment texture.frag Program Texture TexUnit 6
These have nothing to do with the cube mapping. They are here to create the six walls, without which the cube mapping looks ridiculous.
Texture2D 6 nvposx.bmp QuadYZ 5. 5. 10 10 Texture2D 6 nvnegx.bmp QuadYZ -5. 5. 10 10 Texture2D 6 nvposy.bmp QuadXZ 5. 5. 10 10 Texture2D 6 nvnegy.bmp QuadXZ -5. 5. 10 10 Texture2D 6 nvposz.bmp QuadXY 5. 5. 10 10 Texture2D 6 nvnegz.bmp QuadXY -5. 5. 10 10
These must be listed in the order: +X, -X, +Y, -Y, +Z, -Z
Cube Mapping in glman
18
CubeMap 5 nvposx.bmp nvnegx.bmp nvposy.bmp nvnegy.bmp CubeMap 6 nvposx.bmp nvnegx.bmp nvposy.bmp nvnegy.bmp
nvposz.bmp nvnegz.bmp nvposz.bmp nvnegz.bmp
Vertex refract.vert
Fragment refract.frag
Program Refract uReflectUnit 5 uRefractUnit 6 uEta <.1 1.1 5.> uMix <0. 0. 1.>
Teapot
Vertex shader
Computer Graphics
mjb – February 8, 2021
uniform float uEta;
out float vLightIntensity;
out vec3 vRefractVector;
out vec3 vReflectVector;
const vec3 LIGHTPOS = vec3( 5., 10., 10. );
void main( ) {
Cube Mapping in Glman
19
vec3 ECposition = vec3( gl_ModelViewMatrix * gl_Vertex );
vec3 eyeDir = normalize( ECposition ); // vector from eye to pt vec3 normal = normalize( gl_NormalMatrix * gl_Normal );
vRefractVector = refract( eyeDir, normal, uEta );
vReflectVector = reflect( eyeDir, normal );
vLightIntensity = abs( dot( normalize(LightPos – ECposition), normal ) );
gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex; }
Computer Graphics
mjb – February 8, 2021
Fragment shader
uniform float uMix;
uniform samplerCube uReflectUnit; uniform samplerCube uRefractUnit;
in float vLightIntensity; in vec3 vRefractVector; in vec3 vReflectVector;
const vec4 WHITE = vec4( 1.,1.,1.,1. );
void main( ) {
}
Cube Mapping in Glman
20
vec4 refractcolor = textureCube( uRefractUnit, vRefractVector ); vec4 reflectcolor = textureCube( uReflectUnit, vReflectVector ); refractcolor = mix( refractcolor, WHITE, 0.30 );
gl_FragColor = mix( refractcolor, reflectcolor, uMix );
Computer Graphics
mjb – February 8, 2021
GLSLProgram * GLuint
Pattern; CubeName; FaceFiles[ ]
char * {
};
Cube Mapping in a C/C++ Program
21
“kec.posx.bmp”, “kec.negx.bmp”, “kec.posy.bmp”, “kec.negy.bmp”, “kec.posz.bmp”, “kec.negz.bmp”
void InitGraphics( ) {
}
// open the window . . .
// setup the callbacks . . .
// initialize glew . . .
// create and compile the shader . . .
Computer Graphics
mjb – February 8, 2021
Cube Mapping in a C/C++ Program
22
glGenTextures( 1, &CubeName );
glBindTexture( GL_TEXTURE_CUBE_MAP, CubeName );
glTexParameterf( GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_REPEAT ); glTexParameterf( GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_REPEAT ); glTexParameterf( GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_REPEAT ); glTexParameterf( GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR ); glTexParameterf( GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
for( int file = 0; file < 6; file++ ) {
int nums, numt;
unsigned char * texture2d = BmpToTexture( FaceFiles[file], &nums, &numt ); if( texture2d == NULL )
fprintf( stderr, "Could not open BMP 2D texture '%s’”, FaceFiles[file] ); else
fprintf( stderr, "BMP 2D texture '%s' read -- nums = %d, numt = %d\n", FaceFiles[file], nums, numt );
glTexImage2D( GL_TEXTURE_CUBE_MAP_POSITIVE_X + file, 0, 3, nums, numt, 0, GL_RGB, GL_UNSIGNED_BYTE, texture2d );
delete [ ] texture2d;
Computer Graphics
mjb – February 8, 2021
void Display( ) {
Cube Mapping in a C/C++ Program 23
...
int uReflectUnit = 5; int uRefractUnit = 6; float uAd = 0.1f; float uBd = 0.1f; float uEta = 1.4f; float uTol = 0.f;
float uMix = 0.4f;
Pattern->Use( );
glActiveTexture( GL_TEXTURE0 + uReflectUnit ); glBindTexture( GL_TEXTURE_CUBE_MAP, CubeName ); glActiveTexture( GL_TEXTURE0 + uRefractUnit ); glBindTexture( GL_TEXTURE_CUBE_MAP, CubeName );
Pattern->SetUniformVariable( “uReflectUnit”, uReflectUnit ); Pattern->SetUniformVariable( “uRefractUnit”, uRefractUnit ); Pattern->SetUniformVariable( “uMix”, uMix ); Pattern->SetUniformVariable( “uEta”, uEta )
OsuSphere( 1., 50, 50 );
Pattern->Use( 0 ); }