I’m watching some of the missing lessons on shaders that I have in the Three.js journey course, and today I learned about the Fresnel effect in Three.js. It is used to create a more realistic rendering of materials by simulating how light interacts with surfaces at different angles.
The Fresnel effect causes surfaces to reflect more light at glancing angles, which can enhance the realism of materials like water, glass, and metals.
It can be used for effects like:
- Glass/Water: Simulating realistic reflections on transparent surfaces.
- Ghostly/Energy Effects: Creating an inner or outer glow around objects that emphasizes their silhouette.
- Highlighting Objects: Serving as a low-cost alternative to outline effects for interactive items
Here is a simplified implementation from the Three.js journey course, to create an holographic effect:
// Vertex shader.
varying vec3 vPosition;
varying vec3 vNormal;
void main() {
vec4 modelPosition = modelMatrix * vec4(position, 1.0);
vec4 modelNormal = modelMatrix * vec4(normal, 0.0);
gl_Position = projectionMatrix * viewMatrix * modelPosition;
vPosition = modelPosition.xyz;
vNormal = modelNormal.xyz;
}// Fragment shader.
varying vec3 vPosition;
varying vec3 vNormal;
void main() {
vec3 normal = normalize(vNormal);
if(!gl_FrontFacing) {
normal = -normal;
}
// Fresnel effect
vec3 viewDirection = normalize(vPosition - cameraPosition);
float fresnel = dot(viewDirection, normal) + 1.0;
fresnel = pow(fresnel, 2.0);
// Final output
gl_FragColor = vec4(vec3(0.0, 1.0, 1.0), fresnel);
}