Implementing Pixel Distortion Effect Across Multiple Images

Based on the information available, it sounds like you're having issues applying the pixel distortion effect to multiple images, with only the last image showing the effect properly. To address this issue, I'll provide some guidance on how to implement this effect across multiple images.

Understanding the Issue

When implementing effects across multiple images, each image typically needs its own instance of the effect. If you're reusing the same effect instance, it might only be applied to the last element it was assigned to.

Potential Solutions

1. Use EffectComposer for Post-Processing

The EffectComposer is a key component for managing post-processing effects in Three.js. For multiple images:

JAVASCRIPTCopied
// Create a separate EffectComposer for each image
const composers = [];

images.forEach((image, index) => {
  // Create a new renderer for each image if necessary
  const renderer = new THREE.WebGLRenderer({ alpha: true });
  
  // Create a new composer
  const composer = new EffectComposer(renderer);
  
  // Add your render pass
  const renderPass = new RenderPass(scene, camera);
  composer.addPass(renderPass);
  
  // Add your custom shader pass for the distortion effect
  const distortionPass = new ShaderPass(YourDistortionShader);
  composer.addPass(distortionPass);
  
  composers.push(composer);
});

// In your animation loop
function animate() {
  requestAnimationFrame(animate);
  
  // Update and render each composer
  composers.forEach((composer, index) => {
    // Update any uniforms specific to this image
    // ...
    
    // Render this composer
    composer.render();
  });
}

2. Create Separate Three.js Instances

Another approach is to create completely separate Three.js instances for each image:

JAVASCRIPTCopied
const instances = [];

images.forEach((imageElement, index) => {
  // Create container
  const container = document.createElement('div');
  container.classList.add('distortion-container');
  imageElement.parentNode.insertBefore(container, imageElement);
  container.appendChild(imageElement);
  
  // Create new Three.js instance
  const renderer = new THREE.WebGLRenderer({ alpha: true });
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(70, imageElement.width / imageElement.height, 0.1, 1000);
  
  // Set up your geometry, material, etc.
  // ...
  
  // Store the instance
  instances.push({ renderer, scene, camera, container, uniforms: material.uniforms });
});

// In your animation loop
function animate() {
  requestAnimationFrame(animate);
  
  instances.forEach(instance => {
    // Update uniforms for this specific instance
    instance.uniforms.time.value = performance.now() * 0.001;
    
    // Render this instance
    instance.renderer.render(instance.scene, instance.camera);
  });
}

3. Ensure Proper Event Handling

Make sure your event listeners (like hover effects) are properly scoped to each image:

JAVASCRIPTCopied
images.forEach((imageElement, index) => {
  // Set up instance as above
  
  // Add event listeners specific to this image
  imageElement.addEventListener('mouseenter', () => {
    // Modify only this instance's uniforms
    instances[index].uniforms.distortionAmount.value = 1.0;
  });
  
  imageElement.addEventListener('mouseleave', () => {
    // Reset only this instance's uniforms
    instances[index].uniforms.distortionAmount.value = 0.0;
  });
});

Smooth Transitions

For smoother transitions like those on zajno.com, you might need to:

1. Use interpolation for transitioning values (like distortion amount)
2. Implement proper timing functions

JAVASCRIPTCopied
// In your animation loop
function animate() {
  requestAnimationFrame(animate);
  
  instances.forEach(instance => {
    // Smooth transition using linear interpolation
    if (instance.targetDistortion !== undefined) {
      instance.uniforms.distortionAmount.value = THREE.MathUtils.lerp(
        instance.uniforms.distortionAmount.value,
        instance.targetDistortion,
        0.05 // Adjust this value for faster/slower transitions
      );
    }
    
    instance.renderer.render(instance.scene, instance.camera);
  });
}

These approaches should help you apply the pixel distortion effect to multiple images with smooth transitions. The key is to ensure each image has its own isolated instance of the effect with properly managed state and transitions.