Skip to content

Commit

Permalink
Chore: Glitch Filter Deprecations
Browse files Browse the repository at this point in the history
  • Loading branch information
@bbazukun123
bbazukun123 committed Feb 8, 2024
1 parent 9d610bb commit bc545a1
Showing 1 changed file with 151 additions and 28 deletions.
179 changes: 151 additions & 28 deletions src/glitch/GlitchFilter.ts
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,12 @@
import { DEG_TO_RAD, Filter, getCanvasTexture, GlProgram, GpuProgram, Texture } from 'pixi.js';
// eslint-disable-next-line camelcase
import { DEG_TO_RAD, deprecation, Filter, GlProgram, GpuProgram, ImageSource, Texture, v8_0_0 } from 'pixi.js';
import { vertex, wgslVertex } from '../defaults';
import fragment from './glitch.frag';
import source from './glitch.wgsl';

import type { FilterSystem, PointData, RenderSurface } from 'pixi.js';

/**
* @param {object} [options] - The more optional parameters of the filter.
* @param {number} [options.slices=5] - The maximum number of slices.
* @param {number} [options.offset=100] - The maximum offset amount of slices.
* @param {number} [options.direction=0] - The angle in degree of the offset of slices.
* @param {number} [options.fillMode=0] - The fill mode of the space after the offset. Acceptable values:
* - `0` {@link GlitchFilter.TRANSPARENT TRANSPARENT}
* - `1` {@link GlitchFilter.ORIGINAL ORIGINAL}
* - `2` {@link GlitchFilter.LOOP LOOP}
* - `3` {@link GlitchFilter.CLAMP CLAMP}
* - `4` {@link GlitchFilter.MIRROR MIRROR}
* @param {number} [options.seed=0] - A seed value for randomizing glitch effect.
* @param {boolean} [options.average=false] - `true` will divide the bands roughly based on equal amounts
* where as setting to `false` will vary the band sizes dramatically (more random looking).
* @param {number} [options.minSize=8] - Minimum size of individual slice. Segment of total `sampleSize`
* @param {number} [options.sampleSize=512] - The resolution of the displacement map texture.
* @param {number[]} [options.red=[0,0]] - Red channel offset
* @param {number[]} [options.green=[0,0]] - Green channel offset.
* @param {number[]} [options.blue=[0,0]] - Blue channel offset.
*/
type DeprecatedPointLike = PointData | number[];

enum FILL_MODES
{
Expand All @@ -35,18 +17,78 @@ enum FILL_MODES
MIRROR = 4,
}

interface DeprecatedGlitchFilterOptions
{
slices: number;
offset: number;
direction: number;
fillMode: number;
seed: number;
average: boolean;
minSize: number;
sampleSize: number;
red: DeprecatedPointLike;
green: DeprecatedPointLike;
blue: DeprecatedPointLike;
}

export interface GlitchFilterOptions
{
/**
* The count of glitch slices.
* @default 5
*/
slices?: number;
/**
* The maximum offset amount of slices.
* @default 100
*/
offset?: number;
/**
* The angle in degree of the offset of slices.
* @default 0
*/
direction?: number;
/**
* The fill mode of the space after the offset.
* @default FILL_MODES.TRANSPARENT
*/
fillMode?: number;
/**
* A seed value for randomizing glitch effect.
* @default 0
*/
seed?: number;
/**
* `true` will divide the bands roughly based on equal amounts
* where as setting to `false` will vary the band sizes dramatically (more random looking).
* @default false
*/
average?: boolean;
/**
* Minimum size of slices as a portion of the `sampleSize`
* @default 8
*/
minSize?: number;
/**
* Height of the displacement map canvas.
* @default 512
*/
sampleSize?: number;
/**
* Red channel offset.
* @default {x:0,y:0}
*/
red?: PointData;
/**
* Green channel offset.
* @default {x:0,y:0}
*/
green?: PointData;
/**
* Blue offset.
* @default {x:0,y:0}
*/
blue?: PointData;
}

Expand Down Expand Up @@ -117,11 +159,53 @@ export class GlitchFilter extends Filter
private _sizes: Float32Array = new Float32Array(1);
private _offsets: Float32Array = new Float32Array(1);

constructor(options?: GlitchFilterOptions)
constructor(options?: GlitchFilterOptions);
/**
* @deprecated since 8.0.0
*
* @param {object} [options] - The more optional parameters of the filter.
* @param {number} [options.slices=5] - The maximum number of slices.
* @param {number} [options.offset=100] - The maximum offset amount of slices.
* @param {number} [options.direction=0] - The angle in degree of the offset of slices.
* @param {number} [options.fillMode=0] - The fill mode of the space after the offset. Acceptable values:
* - `0` {@link GlitchFilter.TRANSPARENT TRANSPARENT}
* - `1` {@link GlitchFilter.ORIGINAL ORIGINAL}
* - `2` {@link GlitchFilter.LOOP LOOP}
* - `3` {@link GlitchFilter.CLAMP CLAMP}
* - `4` {@link GlitchFilter.MIRROR MIRROR}
* @param {number} [options.seed=0] - A seed value for randomizing glitch effect.
* @param {boolean} [options.average=false] - `true` will divide the bands roughly based on equal amounts
* where as setting to `false` will vary the band sizes dramatically (more random looking).
* @param {number} [options.minSize=8] - Minimum size of individual slice. Segment of total `sampleSize`
* @param {number} [options.sampleSize=512] - The resolution of the displacement map texture.
* @param {number[]} [options.red=[0,0]] - Red channel offset
* @param {number[]} [options.green=[0,0]] - Green channel offset.
* @param {number[]} [options.blue=[0,0]] - Blue channel offset.
*/
constructor(options?: Partial<DeprecatedGlitchFilterOptions>);
constructor(options?: GlitchFilterOptions | Partial<DeprecatedGlitchFilterOptions>)
{
if (Array.isArray(options?.red))
{
deprecation(v8_0_0, 'GlitchFilterOptions.red is now of an {x,y} PointData type.');
options.red = convertDeprecatedPointLike(options.red);
}

if (Array.isArray(options?.green))
{
deprecation(v8_0_0, 'GlitchFilterOptions.green is now of an {x,y} PointData type.');
options.green = convertDeprecatedPointLike(options.green);
}

if (Array.isArray(options?.blue))
{
deprecation(v8_0_0, 'GlitchFilterOptions.blue is now of an {x,y} PointData type.');
options.blue = convertDeprecatedPointLike(options.blue);
}

options = { ...GlitchFilter.defaults, ...options };

const gpuProgram = new GpuProgram({
const gpuProgram = GpuProgram.from({
vertex: {
source: wgslVertex,
entryPoint: 'mainVertex',
Expand All @@ -132,7 +216,7 @@ export class GlitchFilter extends Filter
},
});

const glProgram = new GlProgram({
const glProgram = GlProgram.from({
vertex,
fragment,
name: 'glitch-filter',
Expand All @@ -143,7 +227,9 @@ export class GlitchFilter extends Filter
canvas.width = 4;
canvas.height = options.sampleSize ?? 512;

const texture = getCanvasTexture(canvas, { scaleMode: 'nearest' });
const texture = new Texture({
source: new ImageSource({ resource: canvas })
});

super({
gpuProgram,
Expand Down Expand Up @@ -393,21 +479,48 @@ export class GlitchFilter extends Filter
* @default {x:0,y:0}
*/
get red(): PointData { return this.uniforms.uRed; }
set red(value: PointData) { this.uniforms.uRed = value; }
set red(value: PointData | DeprecatedPointLike)
{
if (Array.isArray(value))
{
deprecation(v8_0_0, 'GlitchFilter.red is now of an {x,y} PointData type.');
value = convertDeprecatedPointLike(value);
}

this.uniforms.uRed = value;
}

/**
* Green channel offset.
* @default {x:0,y:0}
*/
get green(): PointData { return this.uniforms.uGreen; }
set green(value: PointData) { this.uniforms.uGreen = value; }
set green(value: PointData | DeprecatedPointLike)
{
if (Array.isArray(value))
{
deprecation(v8_0_0, 'GlitchFilter.green is now of an {x,y} PointData type.');
value = convertDeprecatedPointLike(value);
}

this.uniforms.uGreen = value;
}

/**
* Blue offset.
* @default {x:0,y:0}
*/
get blue(): PointData { return this.uniforms.uBlue; }
set blue(value: PointData) { this.uniforms.uBlue = value; }
set blue(value: PointData | DeprecatedPointLike)
{
if (Array.isArray(value))
{
deprecation(v8_0_0, 'GlitchFilter.blue is now of an {x,y} PointData type.');
value = convertDeprecatedPointLike(value);
}

this.uniforms.uBlue = value;
}

/**
* Removes all references
Expand All @@ -424,3 +537,13 @@ export class GlitchFilter extends Filter
= this._offsets = null as any;
}
}

function convertDeprecatedPointLike(value: DeprecatedPointLike): PointData
{
if (Array.isArray(value))
{
return { x: value[0], y: value[1] };
}

return value;
}

0 comments on commit bc545a1

Please sign in to comment.