diff --git a/src/glitch/GlitchFilter.ts b/src/glitch/GlitchFilter.ts index 4fa8f0dbe..8a3c90888 100644 --- a/src/glitch/GlitchFilter.ts +++ b/src/glitch/GlitchFilter.ts @@ -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 { @@ -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; } @@ -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); + constructor(options?: GlitchFilterOptions | Partial) { + 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', @@ -132,7 +216,7 @@ export class GlitchFilter extends Filter }, }); - const glProgram = new GlProgram({ + const glProgram = GlProgram.from({ vertex, fragment, name: 'glitch-filter', @@ -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, @@ -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 @@ -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; +}