Animated arrows on path

[kaligrafy]

Hi! I created a new layer type to add animated arrows along a path. It kind of work right now, but there are artefacts when changing direction over the path.

Here is the result:

arrowTransition.mp4

And the associated code:

import { PathLayer, PathLayerProps } from '@deck.gl/layers/typed';
import { Accessor, DefaultProps } from '@deck.gl/core/typed';
import * as vec3 from 'gl-matrix/vec3/';

export type AnimatedArrowPathLayerProps<DataT = any> = _AnimatedArrowPathLayerProps<DataT> & PathLayerProps<DataT>;

type _AnimatedArrowPathLayerProps<DataT = unknown> = {
    /**
     * [solid length, gap length] accessor.
     * @default 8
     */
    getDistanceBetweenArrows?: Accessor<DataT, number>;

    /**
     * Arrow path speed scaling. The larger the number, the slower the path movement. 0 prevents movement
     * @default 3
     */
    speedDivider?: number;
};

const defaultProps: DefaultProps<AnimatedArrowPathLayerProps> = {
    getDistanceBetweenArrows: { type: 'accessor', value: 20 },
    speedDivider: 1
};

export default class AnimatedArrowPathLayer<DataT = any, ExtraProps extends {} = {}> extends PathLayer<
    DataT,
    Required<_AnimatedArrowPathLayerProps> & ExtraProps
> {
    static layerName = 'AnimatedArrowPathLayer';
    static defaultProps = defaultProps;

    state!: {
        animationID: number;
        time: number;
        pathTesselator: any; // From PathLayer
    };

    constructor(props: any) {
        super(props);
    }

    initializeState() {
        super.initializeState();

        const animate = () => {
            this.setState({
                animationID: window.requestAnimationFrame(animate) // draw next frame
            });
        };
        const animationID = window.requestAnimationFrame(animate);
        this.setState({
            animationID: animationID
        });

        const attributeManager = this.getAttributeManager();
        attributeManager?.addInstanced({
            instanceDistanceBetweenArrows: { size: 1, accessor: 'getDistanceBetweenArrows' },
            instanceStartOffsetRatios: {
                size: 1,
                accessor: 'getPath',
                transform: this.getStartOffsetRatios
            },
            instanceLengthRatios: {
                size: 1,
                accessor: 'getPath',
                transform: this.getLengthRatios
            }
        });
    }

    draw(opts) {
        opts.uniforms.arrowPathTimeStep = (performance.now() % 100000) / 100000; // resets every 100 seconds
        opts.uniforms.speedDivider = this.props.speedDivider;
        super.draw(opts);
    }

    getStartOffsetRatios = (path) : number[] => {
        const result = [0] as number[];
        if (path === undefined || path.length < 2) {
            return result;
        }
        const positionSize = this.props.positionFormat === 'XY' ? 2 : 3;
        const isNested = Array.isArray(path[0]);
        const geometrySize = isNested ? path.length : path.length / positionSize;
        let sumLength = 0;
        let p;
        let prevP;
        for (let i = 0; i < geometrySize; i++) {
            p = isNested ? path[i] : path.slice(i * positionSize, i * positionSize + positionSize);
            p = this.projectPosition(p);
            if (i > 0) {
                const distance = vec3.dist(prevP, p);
                if (i < geometrySize - 1) {
                    result[i] = result[i - 1] + distance;
                }
                sumLength += distance;
            }
            prevP = p;
        }
        //sumLength += 0.0001;
        for (let i = 0, count = result.length; i < count; i++) {
            result[i] = result[i] / sumLength;
        }
        console.log('getStartOffsetRatios', result);
        return result;
    };

    getLengthRatios = (path) : number[] => {
        const result = [] as number[];
        if (path === undefined || path.length < 2) {
            return result;
        }
        const positionSize = this.props.positionFormat === 'XY' ? 2 : 3;
        const isNested = Array.isArray(path[0]);
        const geometrySize = isNested ? path.length : path.length / positionSize;
        let sumLength = 0;
        let p;
        let prevP = this.projectPosition(isNested ? path[0] : path.slice(0, positionSize));
        for (let i = 1; i < geometrySize; i++) {
            p = isNested ? path[i] : path.slice(i * positionSize, i * positionSize + positionSize);
            p = this.projectPosition(p);
            const distance = vec3.dist(prevP, p);
            sumLength += distance;
            result[i - 1] = distance;
            prevP = p;
        }
        for (let i = 0, count = result.length; i < count; i++) {
            result[i] = result[i] / sumLength;
        }
        return result;
    };

    getShaders() {
        return Object.assign({}, super.getShaders(), {

            inject: {
                'vs:#decl': `

                attribute float instanceDistanceBetweenArrows;
                attribute float instanceLengthRatios;
                attribute float instanceStartOffsetRatios;
                varying float vLengthRatio;
                varying float vStartOffsetRatio;
                varying float vDistanceBetweenArrows;
                varying float vArrowPathOffset;
                uniform float arrowPathTimeStep;
                uniform float speedDivider;
          `,

                'vs:#main-end': `

                vLengthRatio = instanceLengthRatios;
                vStartOffsetRatio = instanceStartOffsetRatios;
                vDistanceBetweenArrows = instanceDistanceBetweenArrows;
                vArrowPathOffset = 0.0; //vPathPosition.x;// 

                if (speedDivider != 0.0) {
                  vArrowPathOffset += ((arrowPathTimeStep) / speedDivider) / width.x;
                }
          `,

                'fs:#decl': `

                varying float vDistanceBetweenArrows;
                varying float vStartOffsetRatio;
                varying float vLengthRatio;
                varying float vArrowPathOffset;

          `,
                'fs:#main-start': `

                if (vLengthRatio == 0.0) { // this should not happen
                    discard;
                }
          `,
                'fs:#main-end': `

                float offset = vArrowPathOffset;
                float totalLength = vPathLength / vLengthRatio;
                float startDistance = vStartOffsetRatio * totalLength;
                float distanceSoFar = startDistance + vPathPosition.y - offset + abs(vPathPosition.x);
                float arrowIndex = mod(distanceSoFar, vDistanceBetweenArrows);

                float percentWhite = min(arrowIndex / vDistanceBetweenArrows, 1.0);
                gl_FragColor = vec4(mix(vColor.r, 1.0, percentWhite), mix(vColor.g, 1.0, percentWhite), mix(vColor.b, 1.0, percentWhite), 

          `
            }
        });
    }
}

I would like to know why the arrow is not continuous when changing direction. Is it a problem in my ocde or is it caused by an approximation that renders artefacts over the path?

[kaligrafy]

Just found at it works well in Firefox. I'm on macos Sonoma 14.2.1. On Chrome, it creates artefacts, but in Firefox, everything is perfect!