53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { LayerExtension } from '@deck.gl/core';
|
|
|
|
/** Animates a marching-ants border on PathLayer sublayers (alternating white/green dashes). */
|
|
export class MarchingAntsExtension extends LayerExtension {
|
|
static extensionName = 'MarchingAntsExtension';
|
|
static defaultProps = {
|
|
marchTime: { type: 'number', value: 0 },
|
|
};
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
isEnabled(layer: any): boolean {
|
|
return 'pathTesselator' in layer.state;
|
|
}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
getShaders(extension: any): any {
|
|
if (!extension.isEnabled(this)) return null;
|
|
return {
|
|
modules: [
|
|
{
|
|
name: 'marchingAnts',
|
|
inject: {
|
|
'fs:#decl': `\
|
|
uniform marchingAntsUniforms {
|
|
float marchTime;
|
|
} marchingAnts;`,
|
|
'fs:DECKGL_FILTER_COLOR': `\
|
|
float marchSegLen = 4.0;
|
|
float marchPos = mod(vPathPosition.y - marchingAnts.marchTime, marchSegLen * 2.0);
|
|
if (marchPos < marchSegLen) {
|
|
color = vec4(1.0, 1.0, 1.0, color.a);
|
|
} else {
|
|
color = vec4(0.114, 0.894, 0.765, color.a);
|
|
}`,
|
|
},
|
|
uniformTypes: {
|
|
marchTime: 'f32',
|
|
},
|
|
},
|
|
],
|
|
};
|
|
}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
updateState(_params: any, extension: any): void {
|
|
if (!extension.isEnabled(this)) return;
|
|
// @ts-expect-error setShaderModuleProps exists on Layer
|
|
this.setShaderModuleProps({
|
|
// @ts-expect-error marchTime is a custom prop from this extension
|
|
marchingAnts: { marchTime: this.props.marchTime || 0 },
|
|
});
|
|
}
|
|
}
|