Shader Advanced - Cube Maps

This chapter is currently being written. But you can view the various sections of examples that will be displayed as part of this chapter.

Cube map on a cube

Scene:
    Model Position: { x: 0.000, y: 0.000, z: 0.000 }

Cube Map Vertex Shader Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
attribute vec4 vertexPosition;

uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;

varying highp vec4 fragmentPosition_worldSpace;

void main() {
  highp vec4 vertexPosition_worldSpace = modelMatrix * vertexPosition;
  gl_Position = projectionMatrix * viewMatrix * vertexPosition_worldSpace;
  
  fragmentPosition_worldSpace = vertexPosition;
}

Cube Map Fragment Shader Code:

1
2
3
4
5
6
7
8
9
10
11
12
varying highp vec4 fragmentPosition_worldSpace;

uniform highp vec4 modelPosition_worldSpace;

uniform samplerCube cubeMapTextureSampler;

void main() {
  highp vec3 fragmentDirection = normalize(fragmentPosition_worldSpace.xyz - modelPosition_worldSpace.xyz);
  highp vec3 fragmentColor = textureCube(cubeMapTextureSampler, fragmentDirection).rgb;

  gl_FragColor = vec4(fragmentColor, 1.0);
}

Skybox

Source

Skybox Vertex Shader Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
attribute vec4 vertexPosition;

uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;

varying highp vec4 fragmentPosition_worldSpace;

void main() {
  highp vec4 vertexPosition_worldSpace = modelMatrix * vertexPosition;
  gl_Position = projectionMatrix * viewMatrix * vertexPosition_worldSpace;
  
  fragmentPosition_worldSpace = vertexPosition;
}

Skybox Fragment Shader Code:

1
2
3
4
5
6
7
8
9
10
11
12
varying highp vec4 fragmentPosition_worldSpace;

uniform highp vec4 modelPosition_worldSpace;

uniform samplerCube skyboxSampler;

void main() {
  highp vec3 fragmentDirection = normalize(fragmentPosition_worldSpace.xyz - modelPosition_worldSpace.xyz);
  highp vec3 fragmentColor = textureCube(skyboxSampler, fragmentDirection).rgb;

  gl_FragColor = vec4(fragmentColor, 1.0);
}

Scene:
    World Position: { x: 0.000, y: 0.000, z: 0.000 }

Face:
    Center: { x: 1.000, y: 0.000, z: 0.000 }
    Up: { x: 0.000, y: 1.000, z: 0.000 }

Reflection Fragment Shader Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
varying highp vec4 fragmentPosition_worldSpace;
varying highp vec3 fragmentNormal_worldSpace;

uniform highp vec4 modelPosition_worldSpace;
uniform highp vec4 cameraPosition_worldSpace;

uniform samplerCube cubeMapTextureSampler;

void main() {
  highp vec3 cameraDirection = normalize(fragmentPosition_worldSpace.xyz - cameraPosition_worldSpace.xyz);
  highp vec3 reflectionDirection = reflect(cameraDirection, normalize(fragmentNormal_worldSpace));

  highp vec3 fragmentColor = textureCube(cubeMapTextureSampler, reflectionDirection).rgb;

  gl_FragColor = vec4(fragmentColor, 1.0);
}

Simple Refraction Fragment Shader Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
varying highp vec4 fragmentPosition_worldSpace;
varying highp vec3 fragmentNormal_worldSpace;

uniform highp vec4 modelPosition_worldSpace;
uniform highp vec4 cameraPosition_worldSpace;

uniform samplerCube cubeMapTextureSampler;

const highp float VACUUM_REFRACTION_INDEX = 1.00;
const highp float GLASS_REFRACTION_INDEX = 1.52;

void main() {
  highp vec3 cameraDirection = normalize(fragmentPosition_worldSpace.xyz - cameraPosition_worldSpace.xyz);
  highp vec3 refractionDirection = refract(cameraDirection, normalize(fragmentNormal_worldSpace), VACUUM_REFRACTION_INDEX / GLASS_REFRACTION_INDEX);

  highp vec3 fragmentColor = textureCube(cubeMapTextureSampler, refractionDirection).rgb;

  gl_FragColor = vec4(fragmentColor, 1.0);
}

Complex Refraction Fragment Shader Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
varying highp vec4 fragmentPosition_worldSpace;
varying highp vec3 fragmentNormal_worldSpace;

uniform highp vec4 modelPosition_worldSpace;
uniform highp vec4 cameraPosition_worldSpace;

uniform samplerCube cubeMapTextureSampler;

const highp float VACUUM_REFRACTION_INDEX = 1.00;
const highp float GLASS_REFRACTION_INDEX = 1.52;

void main() {
  highp vec3 cameraDirection = normalize(fragmentPosition_worldSpace.xyz - cameraPosition_worldSpace.xyz);
  
  highp vec3 intermediateRefractionDirection = refract(cameraDirection, normalize(fragmentNormal_worldSpace), VACUUM_REFRACTION_INDEX / GLASS_REFRACTION_INDEX);
  highp vec3 finalRefractionDirection = refract(intermediateRefractionDirection, normalize(fragmentNormal_worldSpace), GLASS_REFRACTION_INDEX / VACUUM_REFRACTION_INDEX);

  highp vec3 fragmentColor = textureCube(cubeMapTextureSampler, finalRefractionDirection).rgb;

  gl_FragColor = vec4(fragmentColor, 1.0);
}

← Previous Chapter