How to make afterimagepass work only on a single geometry?

Questions
1

my code:

    let afterimagePass = new THREE.AfterimagePass();

    this.composer.addPass(afterimagePass);

    afterimagePass.uniforms['damp'] = { value: 0.7 };

There are many geometries in one of my scenes, but I only want a few of them to use the afterimagepass effect.
how to set it?
Help me, thank you

2

There is no configurable way of doing this. You need essentially the same approach like in the following example: three.js webgl - postprocessing - unreal bloom selective

Instead of applying a bloom effect on certain objects, you have to use AfterimagePass.

2 Likes
3

thank you.

4

Thanks, Let me show you the final implementation.
tow mesh:

       const geometry1 = new THREE.BoxGeometry(5, 5, 5);
       const material1 = new THREE.MeshLambertMaterial({ color: 'blue' });
       const cylinder1 = new THREE.Mesh(geometry1, material1);
       scene1.add(cylinder1);
       const geometry2 = new THREE.BoxGeometry(5, 5, 5);
       const material2 = new THREE.MeshLambertMaterial({ color: 'red' });
       const cylinder2 = new THREE.Mesh(geometry2, material2); 
       scene1.add(cylinder2);

tow Composer:

 var renderPass2 = new THREE.RenderPass(scene1, camera1); 
        var afterComposer = new THREE.EffectComposer(renderer1);
        afterComposer.addPass(renderPass2);
        afterComposer.renderToScreen = false;
        let afterimagePass2 = new THREE.AfterimagePass();
        afterComposer.addPass(afterimagePass2);
        afterimagePass2.uniforms['damp'] = { value: 0.9 };
 
        var finalComposer = new THREE.EffectComposer(renderer1);
        
        const finalPass = new THREE.ShaderPass(
            new THREE.ShaderMaterial({
                uniforms: {
                    baseTexture: { value: null },
                    bloomTexture: { value: afterComposer.renderTarget2.texture }
                },
                vertexShader: document.getElementById('vertexshader').textContent,
                fragmentShader: document.getElementById('fragmentshader').textContent,
                defines: {}
            }), 'baseTexture'
        );
        finalPass.needsSwap = true;
        finalComposer.addPass(renderPass2);
        finalComposer.addPass(finalPass);

animate:

function animate() {
            requestAnimationFrame(animate);
            cylinder2.rotateX(0.05);
            cylinder1.rotateX(0.05);
            cylinder1.visible = false;
            afterComposer.render();
            cylinder1.visible = true;
            finalComposer.render();
        }

You can see that the red one has a tail, and the blue one doesn’t. :
1658370275222