GLSL Elastic Ring Improvements

Looking at your code, you're on the right track for creating an elastic ring effect. Here are some suggestions to improve your implementation to better match the example image:

1. Improve the Mesh Resolution

Your current PlaneGeometry might not have enough vertices to show smooth deformation. Increase the segments:

JAVASCRIPTCopied
const geometry = new THREE.PlaneGeometry(2, 2, 64, 64);

2. Refine the Vertex Shader

Your vertex shader needs some adjustments to create a more elastic effect:

GLSLCopied
uniform vec2 mouse;
uniform float stretch;
uniform float area;
varying vec2 vUv;

void main() {
  vUv = uv;
  vec3 pos = position;
  
  // Center coordinates for ring calculation
  vec2 center = vec2(0.5, 0.5);
  vec2 uv_centered = uv - center;
  
  // Calculate distance from center
  float dist_from_center = length(uv_centered);
  
  // Calculate distance from mouse
  vec2 mouse_centered = mouse - center;
  float dist_from_mouse = length(uv - mouse);
  
  // Direction vectors
  vec2 dir_from_center = normalize(uv_centered);
  vec2 dir_from_mouse = normalize(mouse - uv);
  
  // Ring parameters
  float ringRadius = 0.25;
  
  // Apply elastic deformation only to points near the ring
  float ringMask = smoothstep(ringRadius - 0.05, ringRadius, dist_from_center) * 
                  (1.0 - smoothstep(ringRadius, ringRadius + 0.05, dist_from_center));
  
  // Calculate influence based on mouse distance
  float influence = exp(-dist_from_mouse * area);
  
  // Apply stretch in the direction away from mouse
  pos.xy += dir_from_mouse * influence * stretch * ringMask;
  
  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}

3. Improve the Fragment Shader

Refine your fragment shader to create a cleaner ring:

GLSLCopied
uniform float thickness;
varying vec2 vUv;

void main() {
  // Center the UV coordinates
  vec2 uv = vUv - 0.5;
  float len = length(uv);
  
  // Calculate angle for color variation
  float angle = atan(uv.y, uv.x);
  
  // Create rainbow color
  vec3 color = vec3(0.5 + 0.5 * cos(angle + 0.0),
                    0.5 + 0.5 * cos(angle + 2.0),
                    0.5 + 0.5 * cos(angle + 4.0));
  
  // Create smoother ring with adjusted thickness
  float innerRadius = 0.25 - thickness * 0.5;
  float outerRadius = 0.25 + thickness * 0.5;
  float ring = smoothstep(innerRadius - 0.01, innerRadius, len) - 
               smoothstep(outerRadius, outerRadius + 0.01, len);
  
  // Apply color to ring
  gl_FragColor = vec4(color * ring, ring);
}

4. Add Animation Parameters

Add some animation parameters to make the effect more dynamic:

JAVASCRIPTCopied
// Add these to your uniforms
uniforms: {
  thickness: { value: 0.05 },  // Thinner ring
  mouse: { value: new THREE.Vector2(0.5, 0.5) },  // Center initially
  stretch: { value: 0.5 },  // Less initial stretch
  area: { value: 5.0 },  // Adjust area of influence
  time: { value: 0.0 }  // For potential animations
},

// Update in your animation loop
function animate() {
  requestAnimationFrame(animate);
  material.uniforms.time.value += 0.01;
  renderer.render(scene, camera);
}

5. Improve Mouse Interaction

Adjust your mouse handling to create a more natural feel:

JAVASCRIPTCopied
window.addEventListener("mousemove", (event) => {
  // Convert to UV space (0 to 1) instead of NDC space
  const mouseX = event.clientX / window.innerWidth;
  const mouseY = 1.0 - (event.clientY / window.innerHeight);
  material.uniforms.mouse.value.set(mouseX, mouseY);
});

These changes should help you achieve an elastic ring effect that responds to mouse movement in a way similar to the example image. You may need to fine-tune the parameters (stretch, area, thickness) to get exactly the look you want.