Estoy viendo algunas lecciones pendientes de shaders en el curso de Three.js Journey, y hoy aprendi sobre el efecto Fresnel en Three.js.
Se usa para lograr un render mas realista de materiales al simular como la luz interactua con superficies en diferentes angulos.
El efecto Fresnel hace que las superficies reflejen mas luz en angulos rasantes, lo que aumenta el realismo en materiales como agua, vidrio y metales.
Se puede usar para efectos como:
- Vidrio/Agua: Simular reflejos realistas en superficies transparentes.
- Efectos fantasma/energia: Crear un brillo interno o externo que enfatiza la silueta.
- Resaltar objetos: Una alternativa de bajo costo a efectos de outline para elementos interactivos.
Aqui va una implementacion simplificada del curso de Three.js Journey para crear un efecto holografico:
// 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);
}