React Three Fiber - Infinite Scroll Carousel which has latency

[KILLIAN-LEBRAS]

Hii Everyone 😁

For context I am a beginner developer, currently working on a portfolio. On one page I have an infinite slider with deformation effects, so I decided to do it with React three Fiber + Drei.

So I have a carousel, in which I declare an instance of Lenis to be able to retrieve a smooth virtual scroll (scrollDelta, scrollOffset), which allow me to define the position of my projects on the carousel (I took inspiration from existing things to be able to move projects and give an infinite look)

I calculate the position and I pass the position, the scrollOffset and the scrollDelta as parameters to my project components which are plane extensions (of Drei) in order to manage their position and add anmations on the shaders to the scroll

First I went through ScrollControl, but I had a lot of things that I didn't have control over, and problems with the moving part and I was advised to do that "from scratch" to be able to have the full control

The problem is that even the simple change of position of my elements creates a small latent, and when I try to add shader animations that's where it really gets messy with a latency which creates glitch effects. . while the advantage I had with scrollcontrols was that it wasn't too slow..

`
import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
import { useFrame, useThree, extend } from '@react-three/fiber';
import { Plane, useTexture } from '@react-three/drei';
import Lenis from '@studio-freight/lenis';

//Effet Lerp
import { lerp } from 'three/src/math/MathUtils';

extend({ Plane });

function Project({ index, scale, position, widthGap, scrollOffset, scrollDelta, ...props }) {

//Ajout d'une variable taille de l'écran pour pouvoir gérer la perte des shaders en resize de fenêtre
const { size } = useThree();

//Ajout de la ref
const ref = useRef();

//Passage de l'image en texture
const url = useTexture(props.url);

//Modification du shader
const shaderArgs = useMemo(() => {
    return {
        uniforms: {
            position: { value: position },
            scroll: { value: scrollDelta * 0.3 },
            url: { value: url },
            uUrl: { value: url },
            uRes: { value: { x: props.width, y: props.height } },
            uImageRes: {
                value: { x: url.source.data.width, y: url.source.data.height },
            },
        },

        vertexShader: /* glsl */ `
        uniform float scroll;
        uniform sampler2D uTexture;
        varying vec2 vUv;

        #define M_PI 3.1415926535897932384626433832795

        vec3 deformationCurve(vec3 position, vec2 uv, vec2 offset) {

            vec2 absOffset = offset / 1.8;
            

            vec2 absOffsetWave = offset * 8.;

            // Effet vague au scroll
            float angle = absOffsetWave.x * 3.14159265 / 2.;
            float wave = sin(angle);
            float c = cos(length(uv) * 3. + absOffsetWave.x * 3.);
        
            position.x = position.x + (cos(uv.y * M_PI) * absOffset.x);
            position.y = position.y; 
            position.z = position.z + wave * c + absOffset.x; // Appliquer l'effet vague à la position z

            return position;
        }

        void main() {
            vUv = uv;
            vec3 newPosition = deformationCurve(position, uv, vec2(scroll, 0));
            gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(newPosition, 1.0);
        }
  `,
        fragmentShader: /* glsl */ `
        uniform float scroll;
        uniform vec2 uImageRes;
        uniform vec2 uRes;
        varying vec2 vUv;
        uniform sampler2D uUrl;
        
        vec2 CoverUV(vec2 u, vec2 screensize, vec2 imagesize) {
            float ratioscreensize = screensize.x / screensize.y; // Aspect Taille Écran
            float ratioimagesize = imagesize.x / imagesize.y; // Aspect Taille Image
            vec2 scaledtexturesize = ratioscreensize < ratioimagesize ? vec2(imagesize.x * screensize.y / imagesize.y, screensize.y) : vec2(screensize.x, imagesize.y * screensize.x / imagesize.x); // New st
            vec2 offset = (ratioscreensize < ratioimagesize ? vec2((scaledtexturesize.x - screensize.x) / 2.0, 0.0) : vec2(0.0, (scaledtexturesize.y - screensize.y) / 2.0)) / scaledtexturesize; // Offset
            return u * screensize / scaledtexturesize + offset;
        }
        
        void main() {
            vec2 uv = CoverUV(vUv, uRes, uImageRes);
            vec4 image = texture2D(uUrl, uv);
            
            vec2 offsetDistorded = vec2(sin(uv.y * 3.0 + scroll * 0.5), cos(uv.x * 7.0 + scroll * 0.5));
            vec2 distortedUV = uv + offsetDistorded * 1.5 * scroll;
            vec4 distortedColor = texture2D(uUrl, distortedUV);
            
            float mixIntensity = smoothstep(0.0, 1.0, scroll) * 0.9 + 1.;
            vec4 blendedColor = mix(image, distortedColor, mixIntensity);
            
            gl_FragColor = blendedColor;
        }
  `,
    }
}, [url, scrollDelta, props.width, url.source.data.width, url.source.data.height]);


useFrame(() => {
    const animationShader = () => {
        ref.current.material.uniforms.scroll.value = scrollDelta * 0.3;
    };

    animationShader();
});

return (

    <Plane
        key={`${size.width}-${size.height}-${scrollDelta}`}
        args={[props.ProjectWidth, props.ProjectHeight, 5, 5]}
        ref={ref}
        position={position}
        scale={scale}
        {...props}
    >
        <shaderMaterial
            attach="material"
            {...shaderArgs}
        />
    </Plane>

)

}

function Carousel({ ProjectWidth, ProjectHeight, gap, permanentProject }) {

const imageDetails = permanentProject.map((project) => ({
    url: project.fields.image.fields.file.url,
    width: project.fields.image.fields.file.details.image.width,
    height: project.fields.image.fields.file.details.image.height,
    slug: project.fields.slug,
}))

const { width } = useThree((state) => state.viewport);
const widthGap = ProjectWidth + gap;
const carouselWidth = width + imageDetails.length * widthGap;
const extendedImageDetails = [...imageDetails];

const [scrollOffset, setScrollOffset] = useState(0);
const [scrollDelta, setScrollDelta] = useState(0);

const lenis = new Lenis({
    smooth: true,
    infinite: true,
    normalizeWheel: true,
    syncTouch: true,
    gestureOrientation: 'both',
    wheelMultiplier: 1.2,
    touchMultiplier: 1.,
});

useEffect(() => {

    lenis.on("scroll", (e) => {

        const delta = (e.velocity * 0.002);
        setScrollDelta(delta);

        // Utilisez un facteur de lissage plus faible pour un effet plus doux
        const easing = 1;

        setScrollOffset((prevOffset) => lerp(
            prevOffset,
            prevOffset - delta,
            easing
        ));

    });

    function raf(time) {
        lenis.raf(time);
        requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);

    return () => {
        lenis.destroy();
    };

}, []);

return (
    <>
        {extendedImageDetails.map((image, i) => {

            const indexOffset = scrollOffset > 0 ? (extendedImageDetails.length) : -(extendedImageDetails.length);
            const adjustedIndex = (i + indexOffset + scrollOffset / widthGap) % extendedImageDetails.length;
            const offsetMultiplier = scrollOffset > 0 ? -(extendedImageDetails.length / 2) : (extendedImageDetails.length / 2);
            const position = [(adjustedIndex + offsetMultiplier) * widthGap, 0, 0];

            return (
                <Project
                    key={i}
                    index={i}
                    extendedImageDetails={extendedImageDetails}
                    scale={[ProjectWidth, ProjectHeight, 1]}
                    slug={image.slug}
                    url={image.url}
                    width={ProjectWidth}
                    widthGap={widthGap}
                    height={ProjectHeight}
                    projectslenght={imageDetails.length}
                    carouselWidth={carouselWidth + widthGap}
                    imageDetails={imageDetails}
                    scrollDelta={scrollDelta}
                    scrollOffset={scrollOffset}
                    position={position}
                />
            );
        })}
    </>
);

}
`

I tried some things, an approach without using useState but which did not work at all, i also for example tried to remove Lenis thinking that it was the problem and doing a home scroll, but without success, so I'm asking here if you don't have any clues. improvement of my method and ways to overcome this problem

thanks in advance ! good day to all