AfterImage Example running at different FPS (delta Time)

[lucasdomanico]

Description

Hello, I think the AfterImage example should work for different fps.
I started a discussion here: https://discourse.threejs.org/t/afterimage-example-damp-fps/70404
But at the end of the day I think it's something Three js should handle.

Solution

Use the delta time for the 'damp' value of the AfterImage shader pass.

Alternatives

Leaving it as it is, but the visual results would be different at differents fps : \

Additional context

No response

[Mugen87]

This is not the only example that animates objects in the animation loop without the usage of THREE.Clock or THREE.Timer. If you replace:

three.js/examples/webgl_postprocessing_afterimage.html

Lines 93 to 94 in 8ebbaba

	mesh.rotation.x += 0.005;
	mesh.rotation.y += 0.01;

with:

const delta = clock.getDelta();

mesh.rotation.x += 0.25 * delta;
mesh.rotation.y += 0.5 * delta;

you almost get the same result but FPS independent.

For simplicity reasons, I don't think it's required to update all example in that regard.

[lucasdomanico]

yeah, for the mesh transform I get it. Thanks.
My problem is with the damping factor of the AfterimagePass.
I've tried something like:

const delta = clock.getDelta();
afterimagePass.uniforms[ 'damp' ].value = delta * 0.96;

But it doesn't work properly

[Mugen87]

Um, I don't think there is an easy way to fix this since any FX technique with a temporal component can produces different results depending on the frame rate. You can easily see that at reconstruction techniques with temporal component like FSR2 or DLSS. These produce different (better) results at a higher frame rate. Since there is no option to guarantee a 100% consistency across all possible frame rates, I tend to see this issue as a Won't fix.

[lucasdomanico]

I solved it by capping to a fps the effect.
The effect it produces now is the same (as long the fps is above the cap)