PixiJS Filters

For fine-grained control over the glitch effect, you can manually manipulate the internal displacement map components:

• sizes: A Float32Array representing the height of each slice. Setting this manually allows for custom band thickness.
• offsets: A Float32Array of values between -1 and 1 representing the displacement for each slice.
• redraw(): Forces the internal canvas (displacement map) to update based on current sizes and offsets.
• texture: The GlitchFilter uses an internal Texture as a displacement map. If you provide your own texture, the slices property will be ignored.

// Manually setting slice sizes and offsets
const customSizes = new Float32Array([0.1, 0.5, 0.4]);
const customOffsets = new Float32Array([0.5, -0.2, 0.8]);

glitchFilter.sizes = customSizes;
glitchFilter.offsets = customOffsets;

// Apply the changes to the displacement map
glitchFilter.redraw();

When creating an AdvancedBloomFilter, you can pass an AdvancedBloomFilterOptions object. The following properties are available:

const options: AdvancedBloomFilterOptions = {
    threshold: 0.6,
    bloomScale: 2,
    brightness: 1,
    blur: 10,
    quality: 5,
    pixelSize: { x: 2, y: 2 }
};
const filter = new AdvancedBloomFilter(options);

When instantiating ReflectionFilter, you can provide an options object with the following properties:

Note: Range is defined as [number, number] | Float32Array.

const options: ReflectionFilterOptions = {
    mirror: true,
    boundary: 0.5,
    amplitude: [0, 20],
    waveLength: [30, 100],
    alpha: [1, 1],
    time: 0
};

When instantiating OldFilmFilter, you can provide an OldFilmFilterOptions object. The following properties are available (defaults are provided if omitted):

When instantiating GlitchFilter, you can pass a GlitchFilterOptions object to define the initial state of the effect.

When instantiating a ShockwaveFilter, you can provide a ShockwaveFilterOptions object to configure the following properties:

export interface ShockwaveFilterOptions
{
    center?: PointData;
    speed?: number;
    amplitude?: number;
    wavelength?: number;
    brightness?: number;
    radius?: number;
    time?: number;
}

When instantiating CRTFilter, you can pass a CRTFilterOptions object. The following options are available (defaults are provided if omitted):

const options: CRTFilterOptions = {
    curvature: 1.0,
    lineWidth: 1.0,
    lineContrast: 0.25,
    verticalLine: false,
    noise: 0.0,
    noiseSize: 1.0,
    vignetting: 0.3,
    vignettingAlpha: 1.0,
    vignettingBlur: 0.3,
    time: 0.0,
    seed: 0.0,
};

const filter = new CRTFilter(options);