Fixing RGB Effect Consistency in Three.js

Looking at your code, I can identify several issues that might be causing the inconsistent RGB effect across your images. Here are some suggestions to improve the consistency:

1. Image Loading and Texture Handling

Your current approach only handles a single image with ID "texture". To apply the effect to multiple images, you'll need to modify your approach:

JAVASCRIPTCopied
// Instead of a single image
const images = document.querySelectorAll('.your-image-class');
const textures = [];

// Create a function to handle each image
function processImages() {
  images.forEach((img, index) => {
    const tempImage = new Image();
    tempImage.onload = () => {
      // Hide original image
      img.style.opacity = 0;
      
      // Create texture
      const texture = new THREE.Texture(tempImage);
      texture.needsUpdate = true;
      textures.push(texture);
      
      // If all images are loaded, initialize Three.js
      if (textures.length === images.length) {
        initThreeJS();
      }
    };
    tempImage.src = img.src;
  });
}

2. Shader Modifications

Your fragment shader has some issues that could cause inconsistent effects:

GLSLCopied
void main() {
    vec2 newUV = vUv;
    float c = circle(vUv, uMouse, 0.0, 0.2);
    
    // Problem: You're modifying newUV cumulatively for each channel
    // This causes the RGB channels to be increasingly offset
    
    // Better approach:
    vec2 rUV = newUV + c * (0.1 * 0.5);
    vec2 gUV = newUV + c * (0.1 * 0.525);
    vec2 bUV = newUV + c * (0.1 * 0.55);
    
    float r = texture2D(tDiffuse, rUV).x;
    float g = texture2D(tDiffuse, gUV).y;
    float b = texture2D(tDiffuse, bUV).z;
    
    vec4 color = vec4(r, g, b, 1.0);
    gl_FragColor = color;
}

3. Color Space Handling

You're using sRGBEncoding which is good, but make sure your textures are properly handled:

JAVASCRIPTCopied
// When creating textures
texture = new THREE.Texture($image);
texture.needsUpdate = true;
// Ensure proper color space conversion
texture.encoding = THREE.sRGBEncoding;

4. Multiple Images Implementation

To handle multiple images, you'll need to create a separate plane for each image:

JAVASCRIPTCopied
function initThreeJS() {
  // Setup camera, scene, renderer as before
  
  // For each texture, create a plane
  textures.forEach((texture, index) => {
    const geometry = new THREE.PlaneGeometry(0.8, 0.5);
    const material = new THREE.MeshBasicMaterial({ map: texture });
    const mesh = new THREE.Mesh(geometry, material);
    
    // Position each plane differently
    mesh.position.x = (index % 3 - 1) * 1.0; // Adjust for your layout
    mesh.position.y = Math.floor(index / 3) * -0.6;
    
    scene.add(mesh);
  });
  
  // Setup post-processing as before
  setupPostProcessing();
  animate();
}

5. Resolution Handling

Your resolution uniform might be causing issues:

JAVASCRIPTCopied
const shaderEffect = {
  uniforms: {
    tDiffuse: { value: null },
    resolution: { 
      // This should be width/height, not the other way around
      value: new THREE.Vector2(window.innerWidth/window.innerHeight, 1),
    },
    uMouse: { value: new THREE.Vector2(-10, -10) },
  },
  // ...
};

6. Window Resize Handling

Add a resize handler to maintain proper aspect ratios:

JAVASCRIPTCopied
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
  composer.setSize(window.innerWidth, window.innerHeight);
  
  // Update resolution uniform
  customPass.uniforms.resolution.value.x = window.innerWidth / window.innerHeight;
});

These changes should help make your RGB effect more consistent across all images. The key issues were the cumulative UV modification in your shader and the approach to handling multiple images.