Implementing Zoom Functionality with Curl Noise Shaders

To implement zoom functionality centered on the mouse cursor while using curl noise in a shader for particle motion, you'll need to modify your approach at the shader level. Since you can't directly offset the particles based on cursor position, you'll need to transform the coordinate space in which the curl noise operates.

Here's how you can implement this:

1. Pass Mouse Position and Zoom Level to the Shader

First, make sure you're passing the mouse position and current zoom level to your shader:

GLSLCopied
uniform vec2 u_mouse; // Mouse position in normalized coordinates (0.0 to 1.0)
uniform float u_zoom; // Zoom level (1.0 is default, larger values = more zoom)

2. Transform Coordinates in the Shader

In your shader, transform the coordinates before applying the curl noise:

GLSLCopied
vec2 transformCoordinates(vec2 position) {
    // Convert position to be relative to mouse cursor
    vec2 relativePos = position - u_mouse;
    
    // Apply zoom (divide by zoom factor to zoom in)
    relativePos = relativePos / u_zoom;
    
    // Convert back to world space
    return relativePos + u_mouse;
}

// Then in your main shader code:
void main() {
    // Get the original position
    vec2 position = vUv; // or whatever your position variable is
    
    // Transform the coordinates for zooming
    vec2 zoomedPosition = transformCoordinates(position);
    
    // Use the transformed coordinates for your curl noise calculation
    vec3 curl = curlNoise(zoomedPosition);
    
    // Rest of your shader code...
}

3. Handle Zoom Input in JavaScript

In your JavaScript code, track the zoom level and mouse position:

JAVASCRIPTCopied
let zoomLevel = 1.0;
let mouseX = 0.5;
let mouseY = 0.5;

// Listen for mouse wheel events
window.addEventListener('wheel', (event) => {
    // Adjust zoom based on wheel direction
    const zoomSpeed = 0.1;
    zoomLevel += event.deltaY > 0 ? -zoomSpeed : zoomSpeed;
    
    // Clamp zoom to reasonable values
    zoomLevel = Math.max(0.1, Math.min(5.0, zoomLevel));
    
    // Update shader uniforms
    material.uniforms.u_zoom.value = zoomLevel;
});

// Track mouse position
window.addEventListener('mousemove', (event) => {
    // Convert to normalized coordinates (0 to 1)
    mouseX = event.clientX / window.innerWidth;
    mouseY = 1.0 - (event.clientY / window.innerHeight); // Flip Y for WebGL
    
    // Update shader uniforms
    material.uniforms.u_mouse.value.set(mouseX, mouseY);
});

4. Initialize Uniforms in Your Material

When creating your material, initialize the uniforms:

JAVASCRIPTCopied
const material = new THREE.ShaderMaterial({
    uniforms: {
        // Your existing uniforms
        u_mouse: { value: new THREE.Vector2(0.5, 0.5) },
        u_zoom: { value: 1.0 }
    },
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
});

This approach transforms the coordinate space before applying the curl noise, which effectively creates a zoom centered on the mouse cursor without directly modifying the particle positions.