From 38fa1ed3cc997521a58017c72c771a68140b17c8 Mon Sep 17 00:00:00 2001 From: Baz Utsahajit Date: Thu, 8 Feb 2024 12:32:57 +0000 Subject: [PATCH 1/2] Chore: Radial Blur Filter Deprecations --- src/radial-blur/RadialBlurFilter.ts | 54 +++++++++++++++++++++++++---- 1 file changed, 48 insertions(+), 6 deletions(-) diff --git a/src/radial-blur/RadialBlurFilter.ts b/src/radial-blur/RadialBlurFilter.ts index ae487af78..492bd14e5 100644 --- a/src/radial-blur/RadialBlurFilter.ts +++ b/src/radial-blur/RadialBlurFilter.ts @@ -1,10 +1,13 @@ -import { Filter, GlProgram, GpuProgram } from 'pixi.js'; +// eslint-disable-next-line camelcase +import { deprecation, Filter, GlProgram, GpuProgram, v8_0_0 } from 'pixi.js'; import { vertex, wgslVertex } from '../defaults'; import fragment from './radial-blur.frag'; import source from './radial-blur.wgsl'; import type { PointData } from 'pixi.js'; +type DeprecatedPointLike = PointData | number[]; + export interface RadialBlurFilterOptions { /** @@ -59,11 +62,41 @@ export class RadialBlurFilter extends Filter private _angle!: number; private _kernelSize!: number; - constructor(options?: RadialBlurFilterOptions) + constructor(options?: RadialBlurFilterOptions); + /** + * @deprecated since 8.0.0 + * + * @param {number} [angle=0] - Sets the angle of the motion for blur effect. + * @param {PIXI.Point|number[]} [center=[0,0]] - The center of the radial. + * @param {number} [kernelSize=5] - The kernelSize of the blur filter. Must be odd number >= 3 + * @param {number} [radius=-1] - The maximum size of the blur radius, `-1` is infinite + */ + constructor(angle?: number, center?: DeprecatedPointLike, kernelSize?: number, radius?: number); + constructor(...args: [RadialBlurFilterOptions?] | [number?, DeprecatedPointLike?, number?, number?]) { + let options = args[0] ?? {}; + + if (typeof options === 'number') + { + // eslint-disable-next-line max-len + deprecation(v8_0_0, 'RadialBlurFilter constructor params are now options object. See params: { angle, center, kernelSize, radius }'); + + options = { angle: options }; + + if (args[1]) + { + const x = 'x' in args[1] ? args[1].x : args[1][0]; + const y = 'y' in args[1] ? args[1].y : args[1][1]; + + options.center = { x, y }; + } + if (args[2]) options.kernelSize = args[2]; + if (args[3]) options.radius = args[3]; + } + options = { ...RadialBlurFilter.DEFAULT_OPTIONS, ...options }; - const gpuProgram = new GpuProgram({ + const gpuProgram = GpuProgram.from({ vertex: { source: wgslVertex, entryPoint: 'mainVertex', @@ -74,7 +107,7 @@ export class RadialBlurFilter extends Filter }, }); - const glProgram = new GlProgram({ + const glProgram = GlProgram.from({ vertex, fragment, name: 'radial-blur-filter', @@ -87,7 +120,7 @@ export class RadialBlurFilter extends Filter radialBlurUniforms: { uRadian: { value: 0, type: 'f32' }, uCenter: { value: options.center, type: 'vec2' }, - uKernelSize: { value: options.kernelSize, type: 'f32' }, + uKernelSize: { value: options.kernelSize, type: 'i32' }, uRadius: { value: options.radius, type: 'f32' }, } }, @@ -122,7 +155,16 @@ export class RadialBlurFilter extends Filter * @default {x:0,y:0} */ get center(): PointData { return this.uniforms.uCenter; } - set center(value: PointData) { this.uniforms.uCenter = value; } + set center(value: PointData | DeprecatedPointLike) + { + if (Array.isArray(value)) + { + deprecation(v8_0_0, 'RadialBlurFilter.center now only accepts {x,y} PointData.'); + value = { x: value[0], y: value[1] }; + } + + this.uniforms.uCenter = value; + } /** * Sets the velocity of the motion for blur effect on the `x` axis From 422222adafbc0dda36034d575450be121a429178 Mon Sep 17 00:00:00 2001 From: Baz Utsahajit Date: Wed, 14 Feb 2024 14:56:28 +0000 Subject: [PATCH 2/2] Cleanup --- src/radial-blur/RadialBlurFilter.ts | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/src/radial-blur/RadialBlurFilter.ts b/src/radial-blur/RadialBlurFilter.ts index 492bd14e5..6ab26cef7 100644 --- a/src/radial-blur/RadialBlurFilter.ts +++ b/src/radial-blur/RadialBlurFilter.ts @@ -1,13 +1,10 @@ -// eslint-disable-next-line camelcase -import { deprecation, Filter, GlProgram, GpuProgram, v8_0_0 } from 'pixi.js'; +import { deprecation, Filter, GlProgram, GpuProgram } from 'pixi.js'; import { vertex, wgslVertex } from '../defaults'; import fragment from './radial-blur.frag'; import source from './radial-blur.wgsl'; import type { PointData } from 'pixi.js'; -type DeprecatedPointLike = PointData | number[]; - export interface RadialBlurFilterOptions { /** @@ -21,7 +18,7 @@ export interface RadialBlurFilterOptions * once defined in the constructor * @default {x:0,y:0} */ - center?: PointData; + center?: PointData | number[]; /** * The kernelSize of the blur filter. Must be odd number >= 3 * @default 5 @@ -64,22 +61,22 @@ export class RadialBlurFilter extends Filter constructor(options?: RadialBlurFilterOptions); /** - * @deprecated since 8.0.0 + * @deprecated since 6.0.0 * * @param {number} [angle=0] - Sets the angle of the motion for blur effect. * @param {PIXI.Point|number[]} [center=[0,0]] - The center of the radial. * @param {number} [kernelSize=5] - The kernelSize of the blur filter. Must be odd number >= 3 * @param {number} [radius=-1] - The maximum size of the blur radius, `-1` is infinite */ - constructor(angle?: number, center?: DeprecatedPointLike, kernelSize?: number, radius?: number); - constructor(...args: [RadialBlurFilterOptions?] | [number?, DeprecatedPointLike?, number?, number?]) + constructor(angle?: number, center?: PointData | number[], kernelSize?: number, radius?: number); + constructor(...args: [RadialBlurFilterOptions?] | [number?, (PointData | number[])?, number?, number?]) { let options = args[0] ?? {}; if (typeof options === 'number') { // eslint-disable-next-line max-len - deprecation(v8_0_0, 'RadialBlurFilter constructor params are now options object. See params: { angle, center, kernelSize, radius }'); + deprecation('6.0.0', 'RadialBlurFilter constructor params are now options object. See params: { angle, center, kernelSize, radius }'); options = { angle: options }; @@ -155,11 +152,10 @@ export class RadialBlurFilter extends Filter * @default {x:0,y:0} */ get center(): PointData { return this.uniforms.uCenter; } - set center(value: PointData | DeprecatedPointLike) + set center(value: PointData | number[]) { if (Array.isArray(value)) { - deprecation(v8_0_0, 'RadialBlurFilter.center now only accepts {x,y} PointData.'); value = { x: value[0], y: value[1] }; }