Animating arcs in deck.gl by injecting shaders

AnimatedArcLayer.ts

import type { DefaultProps, Position } from "@deck.gl/core/typed";
import { ArcLayer, type ArcLayerProps } from "@deck.gl/layers/typed";

export type DataItem = {
    source: Position;
    target: Position;
};

type ExtendedArcLayerProps = ArcLayerProps<DataItem> & {
    /**
     * Serves as a multiplier for the arc length.
     * @default 1
     */
    coef?: number;
};

const defaultProps: DefaultProps<ExtendedArcLayerProps> = {
    ...ArcLayer.defaultProps,
    coef: { type: "number", value: 1, min: 0, max: 1 },
};
    
/*
 * taken from https://github.com/visgl/deck.gl/discussions/2531
 * and https://github.com/visgl/deck.gl/blob/8.9-release/examples/website/mask-extension/animated-arc-layer.js
 */
export class AnimatedArcLayer extends ArcLayer<DataItem, ExtendedArcLayerProps> {
    static defaultProps = defaultProps;

    getShaders() {
        const shaders = super.getShaders(); // get the original shaders
        shaders.inject = {
            "vs:#decl": `
            uniform float coef;
            `,
            "fs:#decl": `
            uniform float coef;
            `,
            "vs:#main-end": `
            if (coef == 0.0 || geometry.uv.x > coef) {
                isValid = 0.0;
            }
            `,
            "fs:DECKGL_FILTER_COLOR": `
            float lowerBound = 0.0;
            if (coef > 0.05) {
                lowerBound = coef - 0.05;
            }
            if (coef != 1.0 ) {
                color.a = 1.0 - smoothstep(lowerBound, coef, geometry.uv.x);
            }
            `,
        };
        return shaders;
    }
    
    // see https://deck.gl/docs/developer-guide/custom-layers/subclassed-layers#defining-additional-uniforms
    
    draw({ uniforms }: Record<string, any>) {
        super.draw({
            uniforms: {
                ...uniforms,
                coef: this.props.coef,
            },
        });
    }
}

AnimatedArcLayer.layerName = "AnimatedArcLayer";