Creating a Mirror Texture in GLSL with Three.js

To create a mirror texture in a custom shader that reflects both the environment and other meshes while allowing for mesh deformation, you'll need to use environment mapping techniques in your fragment shader.

For this approach, you'll need to:

1. Use an environment map (cubemap or equirectangular)
2. Calculate reflection vectors based on the surface normal and view direction
3. Sample the environment map using these reflection vectors

Here's a fragment shader implementation that creates a mirror-like reflection:

GLSLCopied
uniform samplerCube envMap;
uniform float envMapIntensity;
uniform vec3 cameraPosition;

varying vec3 vNormal;
varying vec3 vWorldPosition;

void main() {
  // Calculate the reflection vector
  vec3 normal = normalize(vNormal);
  vec3 viewDirection = normalize(vWorldPosition - cameraPosition);
  vec3 reflectionVector = reflect(viewDirection, normal);
  
  // Sample the environment map
  vec4 envColor = textureCube(envMap, reflectionVector);
  
  // Apply environment map intensity
  envColor.rgb *= envMapIntensity;
  
  // Final color with mirror-like reflection
  gl_FragColor = envColor;
  
  // Optional: Add some base color or tint
  // vec3 baseColor = vec3(0.8, 0.8, 0.8);
  // gl_FragColor.rgb = mix(baseColor, envColor.rgb, 0.9);
}

For your vertex shader, you can implement your deformation logic while ensuring you're correctly passing the normal and position:

GLSLCopied
varying vec3 vNormal;
varying vec3 vWorldPosition;

// Add your custom attributes/uniforms for deformation here

void main() {
  // Apply your mesh deformation here
  vec3 deformedPosition = position; // Replace with your deformation logic
  
  // Calculate the modified normal if your deformation affects it
  vec3 deformedNormal = normal; // Update this based on your deformation
  
  // Pass data to fragment shader
  vNormal = normalMatrix * deformedNormal;
  
  // Transform to world space
  vec4 worldPosition = modelMatrix * vec4(deformedPosition, 1.0);
  vWorldPosition = worldPosition.xyz;
  
  // Set the final position
  gl_Position = projectionMatrix * viewMatrix * worldPosition;
}

To use this in React Three Fiber, you'll need to:

1. Create a cubemap environment map using PMREMGenerator for physically accurate reflections
2. Pass it to your shader as a uniform

Remember that for accurate reflections of other objects, you might need to implement screen-space reflections or use render targets, which is more complex than this basic environment mapping approach.