diff --git a/src/adjustment/AdjustmentFilter.ts b/src/adjustment/AdjustmentFilter.ts index 3ee420a85..acde0856b 100644 --- a/src/adjustment/AdjustmentFilter.ts +++ b/src/adjustment/AdjustmentFilter.ts @@ -3,8 +3,10 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './adjustment.frag'; import source from './adjustment.wgsl'; +import type { FilterOptions } from 'pixi.js'; + /** Options for the AdjustmentFilter constructor */ -export interface AdjustmentFilterOptions +export interface AdjustmentFilterOptions extends FilterOptions { /** * The amount of luminance @@ -61,7 +63,7 @@ export interface AdjustmentFilterOptions export class AdjustmentFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: AdjustmentFilterOptions = { + public static readonly DEFAULT_OPTIONS = { gamma: 1, contrast: 1, saturation: 1, @@ -85,7 +87,17 @@ export class AdjustmentFilter extends Filter */ constructor(options?: AdjustmentFilterOptions) { - options = { ...AdjustmentFilter.DEFAULT_OPTIONS, ...options }; + const { + gamma, + contrast, + saturation, + brightness, + red, + green, + blue, + alpha, + ...rest + } = { ...AdjustmentFilter.DEFAULT_OPTIONS, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -109,21 +121,17 @@ export class AdjustmentFilter extends Filter glProgram, resources: { adjustmentUniforms: { - uGamma: { value: options.gamma, type: 'f32' }, - uContrast: { value: options.contrast, type: 'f32' }, - uSaturation: { value: options.saturation, type: 'f32' }, - uBrightness: { value: options.brightness, type: 'f32' }, + uGamma: { value: gamma, type: 'f32' }, + uContrast: { value: contrast, type: 'f32' }, + uSaturation: { value: saturation, type: 'f32' }, + uBrightness: { value: brightness, type: 'f32' }, uColor: { - value: [ - options.red, - options.green, - options.blue, - options.alpha, - ], + value: [red, green, blue, alpha], type: 'vec4', }, } }, + ...rest }); this.uniforms = this.resources.adjustmentUniforms.uniforms; diff --git a/src/advanced-bloom/AdvancedBloomFilter.ts b/src/advanced-bloom/AdvancedBloomFilter.ts index c277bca34..fdfd2c9fa 100644 --- a/src/advanced-bloom/AdvancedBloomFilter.ts +++ b/src/advanced-bloom/AdvancedBloomFilter.ts @@ -14,8 +14,10 @@ import fragment from './advanced-bloom.frag'; import source from './advanced-bloom.wgsl'; import { ExtractBrightnessFilter } from './ExtractBrightnessFilter'; +import type { FilterOptions } from 'pixi.js'; + /** Options for the AdvancedBloomFilter constructor. */ -export interface AdvancedBloomFilterOptions +export interface AdvancedBloomFilterOptions extends FilterOptions { /** * Defines how bright a color needs to be to affect bloom. @@ -59,7 +61,7 @@ export interface AdvancedBloomFilterOptions export class AdvancedBloomFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: AdvancedBloomFilterOptions = { + public static readonly DEFAULT_OPTIONS = { threshold: 0.5, bloomScale: 1, brightness: 1, @@ -89,6 +91,17 @@ export class AdvancedBloomFilter extends Filter { options = { ...AdvancedBloomFilter.DEFAULT_OPTIONS, ...options }; + const { + threshold, + bloomScale, + brightness, + blur, + quality, + kernels, + pixelSize, + ...rest + } = options; + const gpuProgram = GpuProgram.from({ vertex: { source: wgslVertex, @@ -111,25 +124,26 @@ export class AdvancedBloomFilter extends Filter glProgram, resources: { advancedBloomUniforms: { - uBloomScale: { value: options.bloomScale, type: 'f32' }, - uBrightness: { value: options.brightness, type: 'f32' }, + uBloomScale: { value: bloomScale, type: 'f32' }, + uBrightness: { value: brightness, type: 'f32' }, }, uMapTexture: Texture.WHITE, }, + ...rest }); this.uniforms = this.resources.advancedBloomUniforms.uniforms; this._extractFilter = new ExtractBrightnessFilter({ - threshold: options.threshold + threshold }); this._blurFilter = new KawaseBlurFilter({ - strength: options.kernels as [number, number] ?? options.blur, - quality: options.kernels ? undefined : options.quality, + strength: options.kernels as [number, number] ?? blur, + quality: options.kernels ? undefined : quality, }); - Object.assign(this, options); + Object.assign(this, { threshold, bloomScale, brightness, blur, quality, kernels, pixelSize }); } /** diff --git a/src/advanced-bloom/ExtractBrightnessFilter.ts b/src/advanced-bloom/ExtractBrightnessFilter.ts index 842b982a4..9c4e08165 100644 --- a/src/advanced-bloom/ExtractBrightnessFilter.ts +++ b/src/advanced-bloom/ExtractBrightnessFilter.ts @@ -3,7 +3,9 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './extract-brightness.frag'; import source from './extract-brightness.wgsl'; -export interface ExtractBrightnessFilterOptions +import type { FilterOptions } from 'pixi.js'; + +export interface ExtractBrightnessFilterOptions extends FilterOptions { /** * Defines how bright a color needs to be extracted. @@ -19,7 +21,7 @@ export interface ExtractBrightnessFilterOptions export class ExtractBrightnessFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: ExtractBrightnessFilterOptions = { + public static readonly DEFAULT_OPTIONS = { threshold: 0.5 }; @@ -29,7 +31,10 @@ export class ExtractBrightnessFilter extends Filter constructor(options?: ExtractBrightnessFilterOptions) { - options = { ...ExtractBrightnessFilter.DEFAULT_OPTIONS, ...options }; + const { + threshold, + ...rest + } = { ...ExtractBrightnessFilter.DEFAULT_OPTIONS, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -53,9 +58,10 @@ export class ExtractBrightnessFilter extends Filter glProgram, resources: { extractBrightnessUniforms: { - uThreshold: { value: options.threshold, type: 'f32' }, + uThreshold: { value: threshold, type: 'f32' }, } }, + ...rest }); this.uniforms = this.resources.extractBrightnessUniforms.uniforms; diff --git a/src/ascii/AsciiFilter.ts b/src/ascii/AsciiFilter.ts index b485855f5..d6f7a1bd2 100644 --- a/src/ascii/AsciiFilter.ts +++ b/src/ascii/AsciiFilter.ts @@ -3,10 +3,12 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './ascii.frag'; import source from './ascii.wgsl'; +import type { FilterOptions } from 'pixi.js'; + // This WebGPU filter has been ported from the WebGL renderer that was originally created by Vico (@vicocotea) /** Options for AsciiFilter constructor. */ -export interface AsciiFilterOptions +export interface AsciiFilterOptions extends FilterOptions { /** * The pixel size used by the filter @@ -39,7 +41,7 @@ export interface AsciiFilterOptions export class AsciiFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: AsciiFilterOptions = { + public static readonly DEFAULT_OPTIONS = { size: 8, color: 0xffffff, replaceColor: false, @@ -77,9 +79,12 @@ export class AsciiFilter extends Filter options = { size: options }; } - const replaceColor = options?.color && options.replaceColor !== false; - - options = { ...AsciiFilter.DEFAULT_OPTIONS, ...options } as AsciiFilterOptions; + const { + size, + color, + replaceColor, + ...rest + } = { ...AsciiFilter.DEFAULT_OPTIONS, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -103,16 +108,17 @@ export class AsciiFilter extends Filter glProgram, resources: { asciiUniforms: { - uSize: { value: options.size, type: 'f32' }, + uSize: { value: size, type: 'f32' }, uColor: { value: new Float32Array(3), type: 'vec3' }, uReplaceColor: { value: Number(replaceColor), type: 'f32' }, }, }, + ...rest }); this.uniforms = this.resources.asciiUniforms.uniforms; this._color = new Color(); - this.color = options.color ?? 0xffffff; + this.color = color ?? 0xffffff; } /** diff --git a/src/bevel/BevelFilter.ts b/src/bevel/BevelFilter.ts index 84c150cca..43e6d7f00 100644 --- a/src/bevel/BevelFilter.ts +++ b/src/bevel/BevelFilter.ts @@ -3,8 +3,10 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './bevel.frag'; import source from './bevel.wgsl'; +import type { FilterOptions } from 'pixi.js'; + /** Options for the BevelFilter constructor. */ -export interface BevelFilterOptions +export interface BevelFilterOptions extends FilterOptions { /** * The angle of the light in degrees @@ -50,7 +52,7 @@ export interface BevelFilterOptions export class BevelFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: BevelFilterOptions = { + public static readonly DEFAULT_OPTIONS = { rotation: 45, thickness: 2, lightColor: 0xffffff, @@ -77,7 +79,15 @@ export class BevelFilter extends Filter */ constructor(options?: BevelFilterOptions) { - options = { ...BevelFilter.DEFAULT_OPTIONS, ...options }; + const { + rotation, + thickness, + lightColor, + lightAlpha, + shadowColor, + shadowAlpha, + ...rest + } = { ...BevelFilter.DEFAULT_OPTIONS, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -102,25 +112,23 @@ export class BevelFilter extends Filter resources: { bevelUniforms: { uLightColor: { value: new Float32Array(3), type: 'vec3' }, - uLightAlpha: { value: options.lightAlpha, type: 'f32' }, + uLightAlpha: { value: lightAlpha, type: 'f32' }, uShadowColor: { value: new Float32Array(3), type: 'vec3' }, - uShadowAlpha: { value: options.shadowAlpha, type: 'f32' }, + uShadowAlpha: { value: shadowAlpha, type: 'f32' }, uTransform: { value: new Float32Array(2), type: 'vec2' }, } }, - // Workaround: https://github.com/pixijs/filters/issues/230 - // applies correctly only if there is at least a single-pixel padding with alpha=0 around an image - // To solve this problem, a padding of 1 put on the filter should suffice padding: 1, + ...rest }); this.uniforms = this.resources.bevelUniforms.uniforms; this._lightColor = new Color(); this._shadowColor = new Color(); - this.lightColor = options.lightColor ?? 0xffffff; - this.shadowColor = options.shadowColor ?? 0x000000; + this.lightColor = lightColor ?? 0xffffff; + this.shadowColor = shadowColor ?? 0x000000; - Object.assign(this, options); + Object.assign(this, { rotation, thickness }); } /** diff --git a/src/bloom/BloomFilter.ts b/src/bloom/BloomFilter.ts index 61cafe98c..2994e05c0 100644 --- a/src/bloom/BloomFilter.ts +++ b/src/bloom/BloomFilter.ts @@ -10,10 +10,12 @@ import { TexturePool, } from 'pixi.js'; +import type { AlphaFilterOptions } from 'pixi.js'; + type DeprecatedBlurValue = number | PointData | number[]; /** Options for the BloomFilter constructor. */ -export interface BloomFilterOptions +export interface BloomFilterOptions extends Partial { /** * Sets the strength of the blur. If only a number is provided, it will assign to both x and y. @@ -48,7 +50,7 @@ export interface BloomFilterOptions export class BloomFilter extends AlphaFilter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: BloomFilterOptions = { + public static readonly DEFAULT_OPTIONS = { strength: { x: 2, y: 2 }, quality: 4, resolution: 1, @@ -95,21 +97,28 @@ export class BloomFilter extends AlphaFilter options = { ...BloomFilter.DEFAULT_OPTIONS, ...options } as BloomFilterOptions; - super(); + const { + strength, + quality, + resolution, + kernelSize + } = options; + + super({ alpha: options?.alpha ?? 1 }); this._strength = { x: 2, y: 2 }; - if (options.strength) + if (strength) { - if (typeof options.strength === 'number') + if (typeof strength === 'number') { - this._strength.x = options.strength; - this._strength.y = options.strength; + this._strength.x = strength; + this._strength.y = strength; } else { - this._strength.x = options.strength.x; - this._strength.y = options.strength.y; + this._strength.x = strength.x; + this._strength.y = strength.y; } } @@ -127,7 +136,7 @@ export class BloomFilter extends AlphaFilter this._blurYFilter.blendMode = 'screen'; - Object.assign(this, options); + Object.assign(this, { strength, quality, resolution, kernelSize }); } /** diff --git a/src/bulge-pinch/BulgePinchFilter.ts b/src/bulge-pinch/BulgePinchFilter.ts index e5699827e..0bb509938 100644 --- a/src/bulge-pinch/BulgePinchFilter.ts +++ b/src/bulge-pinch/BulgePinchFilter.ts @@ -3,12 +3,12 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './bulge-pinch.frag'; import source from './bulge-pinch.wgsl'; -import type { FilterSystem, PointData, RenderSurface, Texture } from 'pixi.js'; +import type { FilterOptions, FilterSystem, PointData, RenderSurface, Texture } from 'pixi.js'; // This WebGPU filter has been ported from the WebGL renderer that was originally created by Julien CLEREL (@JuloxRox) /** Options for the BulgePinchFilter constructor. */ -export interface BulgePinchFilterOptions +export interface BulgePinchFilterOptions extends FilterOptions { /** * Offset coordinates to change the position of the center of the circle of effect. @@ -37,7 +37,7 @@ export interface BulgePinchFilterOptions export class BulgePinchFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: BulgePinchFilterOptions = { + public static readonly DEFAULT_OPTIONS = { center: { x: 0.5, y: 0.5 }, radius: 100, strength: 1 @@ -55,7 +55,12 @@ export class BulgePinchFilter extends Filter */ constructor(options?: BulgePinchFilterOptions) { - options = { ...BulgePinchFilter.DEFAULT_OPTIONS, ...options }; + const { + center, + radius, + strength, + ...rest + } = { ...BulgePinchFilter.DEFAULT_OPTIONS, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -79,16 +84,17 @@ export class BulgePinchFilter extends Filter resources: { bulgePinchUniforms: { uDimensions: { value: [0, 0], type: 'vec2' }, - uCenter: { value: options.center, type: 'vec2' }, - uRadius: { value: options.radius, type: 'f32' }, - uStrength: { value: options.strength, type: 'f32' }, + uCenter: { value: center, type: 'vec2' }, + uRadius: { value: radius, type: 'f32' }, + uStrength: { value: strength, type: 'f32' }, } }, + ...rest }); this.uniforms = this.resources.bulgePinchUniforms.uniforms; - Object.assign(this, options); + Object.assign(this, { center, radius, strength }); } /** diff --git a/src/color-gradient/ColorGradientFilter.ts b/src/color-gradient/ColorGradientFilter.ts index 5cb75e264..57ed44e82 100644 --- a/src/color-gradient/ColorGradientFilter.ts +++ b/src/color-gradient/ColorGradientFilter.ts @@ -4,6 +4,8 @@ import vertex from './color-gradient.vert'; import source from './color-gradient.wgsl'; import { parseCssGradient } from './CssGradientParser'; +import type { FilterOptions } from 'pixi.js'; + /** Color stop object. */ export interface ColorStop { @@ -13,7 +15,7 @@ export interface ColorStop } /** Options for ColorGradientFilter constructor. */ -export interface ColorGradientFilterOptions +export interface ColorGradientFilterOptions extends FilterOptions { /** * Linear = 0, Radial = 1, Conic = 2 @@ -125,7 +127,17 @@ export class ColorGradientFilter extends Filter options = { ...ColorGradientFilter.defaults, ...options }; } - if (!options.stops || options.stops.length < 2) + const { + type, + angle, + alpha, + replace, + stops, + maxColors, + ...rest + } = options; + + if (!stops || stops.length < 2) { throw new Error('ColorGradientFilter requires at least 2 color stops.'); } @@ -157,22 +169,22 @@ export class ColorGradientFilter extends Filter uOptions: { value: [ // Gradient Type - options.type, + type, // Gradient Angle - options.angle ?? ANGLE_OFFSET, + angle ?? ANGLE_OFFSET, // Master Alpha - options.alpha, + alpha, // Replace Base Color - options.replace ? 1 : 0, + replace ? 1 : 0, ], type: 'vec4', }, uCounts: { value: [ // Number of Stops - options.stops.length, + stops.length, // Max Gradient Colors - options.maxColors, + maxColors, ], type: 'vec2', }, @@ -182,14 +194,15 @@ export class ColorGradientFilter extends Filter // We only need vec2, but we need to pad to eliminate the WGSL warning, TODO: @Mat ? uStops: { value: new Float32Array(maxStops * 4), type: 'vec4', size: maxStops }, - } + }, }, + ...rest }); this.baseUniforms = this.resources.baseUniforms.uniforms; this.stopsUniforms = this.resources.stopsUniforms.uniforms; - Object.assign(this, options); + Object.assign(this, { type, angle, alpha, replace, stops, maxColors }); } get stops(): ColorStop[] diff --git a/src/color-map/ColorMapFilter.ts b/src/color-map/ColorMapFilter.ts index 744f28402..7a25686bb 100644 --- a/src/color-map/ColorMapFilter.ts +++ b/src/color-map/ColorMapFilter.ts @@ -3,10 +3,12 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './color-map.frag'; import source from './color-map.wgsl'; +import type { FilterOptions } from 'pixi.js'; + type ColorMapTexture = TextureSource | Texture; /** Options for the ColorMapFilter constructor. */ -export interface ColorMapFilterOptions +export interface ColorMapFilterOptions extends FilterOptions { /** The colorMap texture of the filter. */ colorMap: ColorMapTexture; @@ -32,7 +34,7 @@ export interface ColorMapFilterOptions export class ColorMapFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: ColorMapFilterOptions = { + public static readonly DEFAULT_OPTIONS = { colorMap: Texture.WHITE, nearest: false, mix: 1 @@ -87,6 +89,13 @@ export class ColorMapFilter extends Filter if (!options.colorMap) throw Error('No color map texture source was provided to ColorMapFilter'); + const { + colorMap, + nearest, + mix, + ...rest + } = options; + const gpuProgram = GpuProgram.from({ vertex: { source: wgslVertex, @@ -109,20 +118,22 @@ export class ColorMapFilter extends Filter glProgram, resources: { colorMapUniforms: { - uMix: { value: options.mix, type: 'f32' }, + uMix: { value: mix, type: 'f32' }, uSize: { value: 0, type: 'f32' }, uSliceSize: { value: 0, type: 'f32' }, uSlicePixelSize: { value: 0, type: 'f32' }, uSliceInnerSize: { value: 0, type: 'f32' }, }, - uMapTexture: options.colorMap.source, - uMapSampler: options.colorMap.source.style, + uMapTexture: colorMap.source, + uMapSampler: colorMap.source.style, + }, + ...rest }); this.uniforms = this.resources.colorMapUniforms.uniforms; - Object.assign(this, options); + Object.assign(this, { colorMap, nearest, mix }); } /** The mix from 0 to 1, where 0 is the original image and 1 is the color mapped image. */ diff --git a/src/color-overlay/ColorOverlayFilter.ts b/src/color-overlay/ColorOverlayFilter.ts index d041271e8..603b1ddd7 100644 --- a/src/color-overlay/ColorOverlayFilter.ts +++ b/src/color-overlay/ColorOverlayFilter.ts @@ -3,10 +3,12 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './color-overlay.frag'; import source from './color-overlay.wgsl'; +import type { FilterOptions } from 'pixi.js'; + type DeprecatedColor = number | number[] | Float32Array; /** Options for the ColorOverlayFilter constructor. */ -export interface ColorOverlayFilterOptions +export interface ColorOverlayFilterOptions extends FilterOptions { /** * The color of the overlay @@ -29,7 +31,7 @@ export interface ColorOverlayFilterOptions export class ColorOverlayFilter extends Filter { /** Default shockwave filter options */ - public static readonly DEFAULT_OPTIONS: ColorOverlayFilterOptions = { + public static readonly DEFAULT_OPTIONS = { /** The color of the overlay */ color: 0x000000, /** The alpha of the overlay */ @@ -71,6 +73,10 @@ export class ColorOverlayFilter extends Filter options = { ...ColorOverlayFilter.DEFAULT_OPTIONS, ...options }; + options.color = options?.color ?? 0x000000; + + const { color, alpha, ...rest } = options; + const gpuProgram = GpuProgram.from({ vertex: { source: wgslVertex, @@ -94,15 +100,16 @@ export class ColorOverlayFilter extends Filter resources: { colorOverlayUniforms: { uColor: { value: new Float32Array(3), type: 'vec3' }, - uAlpha: { value: options.alpha, type: 'f32' }, + uAlpha: { value: alpha, type: 'f32' }, }, }, + ...rest }); this.uniforms = this.resources.colorOverlayUniforms.uniforms; this._color = new Color(); - this.color = options.color ?? 0x000000; + this.color = color; } /** diff --git a/src/color-replace/ColorReplaceFilter.ts b/src/color-replace/ColorReplaceFilter.ts index 894afa730..39ce09401 100644 --- a/src/color-replace/ColorReplaceFilter.ts +++ b/src/color-replace/ColorReplaceFilter.ts @@ -3,6 +3,8 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './color-replace.frag'; import source from './color-replace.wgsl'; +import type { FilterOptions } from 'pixi.js'; + /** * This WebGPU filter has been ported from the WebGL renderer that was originally created by mishaa, updated by timetocode * http://www.html5gamedevs.com/topic/10640-outline-a-sprite-change-certain-colors/?p=69966 @@ -11,7 +13,7 @@ import source from './color-replace.wgsl'; type DeprecatedColor = number | number[] | Float32Array; /** Options for the ColorReplaceFilter constructor. */ -export interface ColorReplaceFilterOptions +export interface ColorReplaceFilterOptions extends FilterOptions { /** * The color that will be changed. @@ -60,7 +62,7 @@ export interface ColorReplaceFilterOptions export class ColorReplaceFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: ColorReplaceFilterOptions = { + public static readonly DEFAULT_OPTIONS = { originalColor: 0xff0000, targetColor: 0x000000, tolerance: 0.4 @@ -108,6 +110,13 @@ export class ColorReplaceFilter extends Filter options = { ...ColorReplaceFilter.DEFAULT_OPTIONS, ...options }; + const { + originalColor, + targetColor, + tolerance, + ...rest + } = options; + const gpuProgram = GpuProgram.from({ vertex: { source: wgslVertex, @@ -132,19 +141,19 @@ export class ColorReplaceFilter extends Filter colorReplaceUniforms: { uOriginalColor: { value: new Float32Array(3), type: 'vec3' }, uTargetColor: { value: new Float32Array(3), type: 'vec3' }, - uTolerance: { value: options.tolerance, type: 'f32' }, + uTolerance: { value: tolerance, type: 'f32' }, } }, + ...rest }); this.uniforms = this.resources.colorReplaceUniforms.uniforms; this._originalColor = new Color(); this._targetColor = new Color(); - this.originalColor = options.originalColor ?? 0xff0000; - this.targetColor = options.targetColor ?? 0x000000; - - Object.assign(this, options); + this.originalColor = originalColor ?? 0xff0000; + this.targetColor = targetColor ?? 0x000000; + this.tolerance = tolerance ?? 0.4; } /** diff --git a/src/convolution/ConvolutionFilter.ts b/src/convolution/ConvolutionFilter.ts index 991e6920a..4413896da 100644 --- a/src/convolution/ConvolutionFilter.ts +++ b/src/convolution/ConvolutionFilter.ts @@ -3,12 +3,14 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './convolution.frag'; import source from './convolution.wgsl'; +import type { FilterOptions } from 'pixi.js'; + type FixedArray = [ T, ...Array ] & { length: L }; export type ConvolutionMatrix = Float32Array | FixedArray; /** Options for the ConvolutionFilter constructor. */ -export interface ConvolutionFilterOptions +export interface ConvolutionFilterOptions extends FilterOptions { /** * An array of values used for matrix transformation, specified as a 9 point Array @@ -44,7 +46,7 @@ export interface ConvolutionFilterOptions export class ConvolutionFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: ConvolutionFilterOptions = { + public static readonly DEFAULT_OPTIONS = { matrix: new Float32Array(9), width: 200, height: 200, @@ -86,8 +88,14 @@ export class ConvolutionFilter extends Filter options = { ...ConvolutionFilter.DEFAULT_OPTIONS, ...options }; - const width = options.width ?? 200; - const height = options.height ?? 200; + options.width = options?.width ?? 200; + options.height = options?.height ?? 200; + const { + matrix, + width, + height, + ...rest + } = options; const gpuProgram = GpuProgram.from({ vertex: { @@ -111,10 +119,11 @@ export class ConvolutionFilter extends Filter glProgram, resources: { convolutionUniforms: { - uMatrix: { value: options.matrix, type: 'mat3x3' }, - uTexelSize: { value: { x: 1 / width, y: 1 / height }, type: 'vec2' }, + uMatrix: { value: matrix, type: 'mat3x3' }, + uTexelSize: { value: { x: 1 / (width ?? 200), y: 1 / (height ?? 200) }, type: 'vec2' }, }, }, + ...rest }); this.uniforms = this.resources.convolutionUniforms.uniforms; diff --git a/src/cross-hatch/CrossHatchFilter.ts b/src/cross-hatch/CrossHatchFilter.ts index 0453a4b05..4e5b77437 100644 --- a/src/cross-hatch/CrossHatchFilter.ts +++ b/src/cross-hatch/CrossHatchFilter.ts @@ -3,6 +3,8 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './crosshatch.frag'; import source from './crosshatch.wgsl'; +import type { FilterOptions } from 'pixi.js'; + /** * A Cross Hatch effect filter.
* ![original](../screenshots/original.png)![filter](../screenshots/cross-hatch.png) @@ -12,7 +14,7 @@ import source from './crosshatch.wgsl'; */ export class CrossHatchFilter extends Filter { - constructor() + constructor(options: FilterOptions) { const gpuProgram = GpuProgram.from({ vertex: { @@ -35,6 +37,7 @@ export class CrossHatchFilter extends Filter gpuProgram, glProgram, resources: {}, + ...options }); } } diff --git a/src/crt/CRTFilter.ts b/src/crt/CRTFilter.ts index 04d38d04d..84dbefcc6 100644 --- a/src/crt/CRTFilter.ts +++ b/src/crt/CRTFilter.ts @@ -3,10 +3,10 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './crt.frag'; import source from './crt.wgsl'; -import type { FilterSystem, RenderSurface, Texture } from 'pixi.js'; +import type { FilterOptions, FilterSystem, RenderSurface, Texture } from 'pixi.js'; /** Options for the CRTFilter constructor. */ -export interface CRTFilterOptions +export interface CRTFilterOptions extends FilterOptions { /** * Bend of interlaced lines, higher value means more bend @@ -77,7 +77,7 @@ export interface CRTFilterOptions export class CRTFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: CRTFilterOptions = { + public static readonly DEFAULT_OPTIONS = { curvature: 1.0, lineWidth: 1.0, lineContrast: 0.25, @@ -118,6 +118,20 @@ export class CRTFilter extends Filter constructor(options?: CRTFilterOptions) { options = { ...CRTFilter.DEFAULT_OPTIONS, ...options }; + const { + curvature, + lineWidth, + lineContrast, + verticalLine, + noise, + noiseSize, + vignetting, + vignettingAlpha, + vignettingBlur, + time, + seed, + ...rest + } = options; const gpuProgram = GpuProgram.from({ vertex: { @@ -144,16 +158,29 @@ export class CRTFilter extends Filter uLine: { value: new Float32Array(4), type: 'vec4' }, uNoise: { value: new Float32Array(2), type: 'vec2' }, uVignette: { value: new Float32Array(3), type: 'vec3' }, - uSeed: { value: options.seed, type: 'f32' }, - uTime: { value: options.time, type: 'f32' }, + uSeed: { value: seed, type: 'f32' }, + uTime: { value: time, type: 'f32' }, uDimensions: { value: new Float32Array(2), type: 'vec2' }, } }, + ...rest }); this.uniforms = this.resources.crtUniforms.uniforms; - Object.assign(this, options); + Object.assign(this, { + curvature, + lineWidth, + lineContrast, + verticalLine, + noise, + noiseSize, + vignetting, + vignettingAlpha, + vignettingBlur, + time, + seed + }); } /** diff --git a/src/dot/DotFilter.ts b/src/dot/DotFilter.ts index 03c979ea0..fa5559f83 100644 --- a/src/dot/DotFilter.ts +++ b/src/dot/DotFilter.ts @@ -3,8 +3,10 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './dot.frag'; import source from './dot.wgsl'; +import type { FilterOptions } from 'pixi.js'; + /** Options for the DotFilter constructor. */ -export interface DotFilterOptions +export interface DotFilterOptions extends FilterOptions { /** * The scale of the effect @@ -36,7 +38,7 @@ export interface DotFilterOptions export class DotFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: DotFilterOptions = { + public static readonly DEFAULT_OPTIONS = { scale: 1, angle: 5, grayscale: true @@ -70,12 +72,17 @@ export class DotFilter extends Filter if (args[2] !== undefined) options.grayscale = args[2]; } - options = { ...DotFilter.DEFAULT_OPTIONS, ...options }; + const { + scale, + angle, + grayscale, + ...rest + } = { ...DotFilter.DEFAULT_OPTIONS, ...options }; const dotUniforms = { - uScale: { value: options.scale, type: 'f32' }, - uAngle: { value: options.angle, type: 'f32' }, - uGrayScale: { value: options.grayscale ? 1 : 0, type: 'f32' }, + uScale: { value: scale, type: 'f32' }, + uAngle: { value: angle, type: 'f32' }, + uGrayScale: { value: grayscale ? 1 : 0, type: 'f32' }, }; const gpuProgram = GpuProgram.from({ @@ -101,6 +108,7 @@ export class DotFilter extends Filter resources: { dotUniforms, }, + ...rest }); } diff --git a/src/drop-shadow/DropShadowFilter.ts b/src/drop-shadow/DropShadowFilter.ts index 27425cf79..fb76491ac 100644 --- a/src/drop-shadow/DropShadowFilter.ts +++ b/src/drop-shadow/DropShadowFilter.ts @@ -15,8 +15,10 @@ import { KawaseBlurFilter } from '../kawase-blur/KawaseBlurFilter'; import fragment from './drop-shadow.frag'; import source from './drop-shadow.wgsl'; +import type { FilterOptions } from 'pixi.js'; + /** Options for the DropShadowFilter constructor. */ -export interface DropShadowFilterOptions +export interface DropShadowFilterOptions extends FilterOptions { /** * The offset position of the drop-shadow relative to the original image. @@ -75,7 +77,7 @@ export interface DropShadowFilterOptions export class DropShadowFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: DropShadowFilterOptions = { + public static readonly DEFAULT_OPTIONS = { offset: { x: 4, y: 4 }, color: 0x000000, alpha: 0.5, @@ -109,6 +111,18 @@ export class DropShadowFilter extends Filter constructor(options?: DropShadowFilterOptions) { options = { ...DropShadowFilter.DEFAULT_OPTIONS, ...options }; + const { + offset, + color, + alpha, + shadowOnly, + blur, + quality, + kernels, + pixelSize, + resolution, + ...rest + } = options; const gpuProgram = GpuProgram.from({ vertex: { @@ -132,21 +146,22 @@ export class DropShadowFilter extends Filter glProgram, resources: { dropShadowUniforms: { - uAlpha: { value: options.alpha, type: 'f32' }, + uAlpha: { value: alpha, type: 'f32' }, uColor: { value: new Float32Array(3), type: 'vec3' }, - uOffset: { value: options.offset, type: 'vec2' }, + uOffset: { value: offset, type: 'vec2' }, } }, - resolution: options.resolution, + resolution, + ...rest }); this.uniforms = this.resources.dropShadowUniforms.uniforms; this._color = new Color(); - this.color = options.color ?? 0x000000; + this.color = color ?? 0x000000; this._blurFilter = new KawaseBlurFilter({ - strength: options.kernels as [number, number] ?? options.blur, - quality: options.kernels ? undefined : options.quality, + strength: kernels as [number, number] ?? blur, + quality: kernels ? undefined : quality, }); this._basePass = new Filter({ @@ -186,7 +201,7 @@ export class DropShadowFilter extends Filter resources: {}, }); - Object.assign(this, options); + Object.assign(this, { offset, color, alpha, shadowOnly, blur, quality, kernels, pixelSize, resolution }); } /** diff --git a/src/emboss/EmbossFilter.ts b/src/emboss/EmbossFilter.ts index d1bfe36b2..491a9a272 100644 --- a/src/emboss/EmbossFilter.ts +++ b/src/emboss/EmbossFilter.ts @@ -3,6 +3,14 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './emboss.frag'; import source from './emboss.wgsl'; +import type { FilterOptions } from 'pixi.js'; + +/** Options for the EmbossFilter constructor. */ +interface EmbossFilterOptions extends FilterOptions +{ + strength?: number; +} + /** * An RGB Split Filter.
* ![original](../screenshots/original.png)![filter](../screenshots/emboss.png) @@ -19,8 +27,32 @@ export class EmbossFilter extends Filter /** * @param {number} [strength=5] - Strength of the emboss. */ - constructor(strength = 5) + /** Default values for options. */ + public static readonly DEFAULT_OPTIONS = { + strength: 5, + }; + + /** + * @param strengthOrOptions - The strength of the emboss effect or options. + */ + constructor(strengthOrOptions?: number | EmbossFilterOptions) { + let options: EmbossFilterOptions; + + if (typeof strengthOrOptions === 'number' || strengthOrOptions === undefined) + { + options = { strength: strengthOrOptions ?? EmbossFilter.DEFAULT_OPTIONS.strength }; + } + else + { + options = strengthOrOptions; + } + + const { + strength, + ...rest + } = { ...EmbossFilter.DEFAULT_OPTIONS, ...options }; + const gpuProgram = GpuProgram.from({ vertex: { source: wgslVertex, @@ -46,6 +78,7 @@ export class EmbossFilter extends Filter uStrength: { value: strength, type: 'f32' }, } }, + ...rest }); this.uniforms = this.resources.embossUniforms.uniforms; diff --git a/src/glitch/GlitchFilter.ts b/src/glitch/GlitchFilter.ts index 4442ed314..a87bee715 100644 --- a/src/glitch/GlitchFilter.ts +++ b/src/glitch/GlitchFilter.ts @@ -3,7 +3,7 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './glitch.frag'; import source from './glitch.wgsl'; -import type { FilterSystem, PointData, RenderSurface } from 'pixi.js'; +import type { FilterOptions, FilterSystem, PointData, RenderSurface } from 'pixi.js'; enum FILL_MODES { @@ -15,7 +15,7 @@ enum FILL_MODES } /** Options for the GlitchFilter constructor. */ -export interface GlitchFilterOptions +export interface GlitchFilterOptions extends FilterOptions { /** * The count of glitch slices. @@ -146,7 +146,20 @@ export class GlitchFilter extends Filter */ constructor(options?: GlitchFilterOptions) { - options = { ...GlitchFilter.defaults, ...options }; + const { + slices, + offset, + direction, + fillMode, + average, + seed, + red, + green, + blue, + minSize, + sampleSize, + ...rest + } = { ...GlitchFilter.defaults, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -168,7 +181,7 @@ export class GlitchFilter extends Filter const canvas = document.createElement('canvas'); canvas.width = 4; - canvas.height = options.sampleSize ?? 512; + canvas.height = sampleSize ?? 512; const texture = new Texture({ source: new ImageSource({ resource: canvas }) @@ -179,19 +192,20 @@ export class GlitchFilter extends Filter glProgram, resources: { glitchUniforms: { - uSeed: { value: options?.seed ?? 0, type: 'f32' }, + uSeed: { value: seed ?? 0, type: 'f32' }, uDimensions: { value: new Float32Array(2), type: 'vec2' }, uAspect: { value: 1, type: 'f32' }, - uFillMode: { value: options?.fillMode ?? 0, type: 'f32' }, - uOffset: { value: options?.offset ?? 100, type: 'f32' }, - uDirection: { value: options?.direction ?? 0, type: 'f32' }, - uRed: { value: options.red, type: 'vec2' }, - uGreen: { value: options.green, type: 'vec2' }, - uBlue: { value: options.blue, type: 'vec2' }, + uFillMode: { value: fillMode ?? 0, type: 'f32' }, + uOffset: { value: offset ?? 100, type: 'f32' }, + uDirection: { value: direction ?? 0, type: 'f32' }, + uRed: { value: red, type: 'vec2' }, + uGreen: { value: green, type: 'vec2' }, + uBlue: { value: blue, type: 'vec2' }, }, uDisplacementMap: texture.source, uDisplacementSampler: texture.source.style, }, + ...rest }); this.uniforms = this.resources.glitchUniforms.uniforms; @@ -199,7 +213,19 @@ export class GlitchFilter extends Filter this._canvas = canvas; this.texture = texture; - Object.assign(this, options); + Object.assign(this, { + slices, + offset, + direction, + fillMode, + average, + seed, + red, + green, + blue, + minSize, + sampleSize + }); } /** diff --git a/src/glow/GlowFilter.ts b/src/glow/GlowFilter.ts index 8b07eaac8..f597d50d1 100644 --- a/src/glow/GlowFilter.ts +++ b/src/glow/GlowFilter.ts @@ -3,10 +3,12 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './glow.frag'; import source from './glow.wgsl'; +import type { FilterOptions } from 'pixi.js'; + /** * Options for the GlowFilter constructor. */ -export interface GlowFilterOptions +export interface GlowFilterOptions extends FilterOptions { /** * The distance of the glow @@ -61,7 +63,7 @@ export interface GlowFilterOptions export class GlowFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: GlowFilterOptions = { + public static readonly DEFAULT_OPTIONS = { distance: 10, outerStrength: 4, innerStrength: 0, @@ -87,10 +89,16 @@ export class GlowFilter extends Filter */ constructor(options?: GlowFilterOptions) { - options = { ...GlowFilter.DEFAULT_OPTIONS, ...options }; - - const distance = options.distance ?? 10; - const quality = options.quality ?? 0.1; + const { + distance, + outerStrength, + innerStrength, + color, + alpha, + quality, + knockout, + ...rest + } = { ...GlowFilter.DEFAULT_OPTIONS, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -120,19 +128,20 @@ export class GlowFilter extends Filter resources: { glowUniforms: { uDistance: { value: distance, type: 'f32' }, - uStrength: { value: [options.innerStrength, options.outerStrength], type: 'vec2' }, + uStrength: { value: [innerStrength, outerStrength], type: 'vec2' }, uColor: { value: new Float32Array(3), type: 'vec3' }, - uAlpha: { value: options.alpha, type: 'f32' }, + uAlpha: { value: alpha, type: 'f32' }, uQuality: { value: quality, type: 'f32' }, - uKnockout: { value: (options?.knockout ?? false) ? 1 : 0, type: 'f32' }, + uKnockout: { value: knockout ? 1 : 0, type: 'f32' }, } }, padding: distance, + ...rest }); this.uniforms = this.resources.glowUniforms.uniforms; this._color = new Color(); - this.color = options.color ?? 0xffffff; + this.color = color; } /** diff --git a/src/godray/GodrayFilter.ts b/src/godray/GodrayFilter.ts index 5095c611b..36199393c 100644 --- a/src/godray/GodrayFilter.ts +++ b/src/godray/GodrayFilter.ts @@ -5,10 +5,10 @@ import source from './god-ray.wgsl'; import perlin from './perlin.frag'; import sourcePerlin from './perlin.wgsl'; -import type { FilterSystem, PointData, RenderSurface, Texture } from 'pixi.js'; +import type { FilterOptions, FilterSystem, PointData, RenderSurface, Texture } from 'pixi.js'; /** Options for the GodrayFilter constructor. */ -export interface GodrayFilterOptions +export interface GodrayFilterOptions extends FilterOptions { /** * The angle/light-source of the rays in degrees. For instance, @@ -66,7 +66,7 @@ export interface GodrayFilterOptions export class GodrayFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: GodrayFilterOptions = { + public static readonly DEFAULT_OPTIONS = { angle: 30, gain: 0.5, lacunarity: 2.5, @@ -100,7 +100,16 @@ export class GodrayFilter extends Filter */ constructor(options?: GodrayFilterOptions) { - options = { ...GodrayFilter.DEFAULT_OPTIONS, ...options }; + const { + angle, + gain, + lacunarity, + parallel, + time, + center, + alpha, + ...rest + } = { ...GodrayFilter.DEFAULT_OPTIONS, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -126,16 +135,17 @@ export class GodrayFilter extends Filter uLight: { value: new Float32Array(2), type: 'vec2' }, uParallel: { value: 0, type: 'f32' }, uAspect: { value: 0, type: 'f32' }, - uTime: { value: options.time, type: 'f32' }, + uTime: { value: time, type: 'f32' }, uRay: { value: new Float32Array(3), type: 'vec3' }, uDimensions: { value: new Float32Array(2), type: 'vec2' }, } }, + ...rest }); this.uniforms = this.resources.godrayUniforms.uniforms; - Object.assign(this, options); + Object.assign(this, { angle, gain, lacunarity, parallel, time, center, alpha }); } /** diff --git a/src/grayscale/GrayscaleFilter.ts b/src/grayscale/GrayscaleFilter.ts index 0cd6496bb..c10a33e4f 100644 --- a/src/grayscale/GrayscaleFilter.ts +++ b/src/grayscale/GrayscaleFilter.ts @@ -3,6 +3,8 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './grayscale.frag'; import source from './grayscale.wgsl'; +import type { FilterOptions } from 'pixi.js'; + /** * This filter applies a grayscale effect.
* ![original](../screenshots/original.png)![filter](../screenshots/grayscale.png) @@ -12,7 +14,7 @@ import source from './grayscale.wgsl'; */ export class GrayscaleFilter extends Filter { - constructor() + constructor(options?: FilterOptions) { const gpuProgram = GpuProgram.from({ vertex: { @@ -35,6 +37,7 @@ export class GrayscaleFilter extends Filter gpuProgram, glProgram, resources: {}, + ...options }); } } diff --git a/src/hsl-adjustment/HslAdjustmentFilter.ts b/src/hsl-adjustment/HslAdjustmentFilter.ts index cf59341e7..5c16a0505 100644 --- a/src/hsl-adjustment/HslAdjustmentFilter.ts +++ b/src/hsl-adjustment/HslAdjustmentFilter.ts @@ -3,10 +3,12 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './hsladjustment.frag'; import source from './hsladjustment.wgsl'; +import type { FilterOptions } from 'pixi.js'; + /** * Options for the HslAdjustmentFilter constructor. */ -export interface HslAdjustmentFilterOptions +export interface HslAdjustmentFilterOptions extends FilterOptions { /** * The amount of hue in degrees (-180 to 180) @@ -46,7 +48,7 @@ export interface HslAdjustmentFilterOptions export class HslAdjustmentFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: HslAdjustmentFilterOptions = { + public static readonly DEFAULT_OPTIONS = { hue: 0, saturation: 0, lightness: 0, @@ -67,7 +69,14 @@ export class HslAdjustmentFilter extends Filter */ constructor(options?: HslAdjustmentFilterOptions) { - options = { ...HslAdjustmentFilter.DEFAULT_OPTIONS, ...options }; + const { + hue, + saturation, + lightness, + colorize, + alpha, + ...rest + } = { ...HslAdjustmentFilter.DEFAULT_OPTIONS, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -92,14 +101,15 @@ export class HslAdjustmentFilter extends Filter resources: { hslUniforms: { uHsl: { value: new Float32Array(3), type: 'vec3' }, - uColorize: { value: options.colorize ? 1 : 0, type: 'f32' }, - uAlpha: { value: options.alpha, type: 'f32' }, + uColorize: { value: colorize ? 1 : 0, type: 'f32' }, + uAlpha: { value: alpha, type: 'f32' }, }, }, + ...rest }); this.uniforms = this.resources.hslUniforms.uniforms; - Object.assign(this, options); + Object.assign(this, { hue, saturation, lightness, colorize, alpha }); } /** diff --git a/src/kawase-blur/KawaseBlurFilter.ts b/src/kawase-blur/KawaseBlurFilter.ts index d009abdff..a104dac8a 100644 --- a/src/kawase-blur/KawaseBlurFilter.ts +++ b/src/kawase-blur/KawaseBlurFilter.ts @@ -5,10 +5,10 @@ import source from './kawase-blur.wgsl'; import fragmentClamp from './kawase-blur-clamp.frag'; import sourceClamp from './kawase-blur-clamp.wgsl'; -import type { FilterSystem, PointData, RenderSurface, Texture } from 'pixi.js'; +import type { FilterOptions, FilterSystem, PointData, RenderSurface, Texture } from 'pixi.js'; /** Options for the KawaseBlurFilter constructor. */ -export interface KawaseBlurFilterOptions +export interface KawaseBlurFilterOptions extends FilterOptions { /** * The blur of the filter. Should be greater than `0`. @@ -44,7 +44,7 @@ export interface KawaseBlurFilterOptions export class KawaseBlurFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: KawaseBlurFilterOptions = { + public static readonly DEFAULT_OPTIONS = { strength: 4, quality: 3, clamp: false, @@ -91,7 +91,13 @@ export class KawaseBlurFilter extends Filter if (args[2] !== undefined) options.clamp = args[2]; } - options = { ...KawaseBlurFilter.DEFAULT_OPTIONS, ...options }; + const { + strength, + quality, + clamp, + pixelSize, + ...rest + } = { ...KawaseBlurFilter.DEFAULT_OPTIONS, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -99,13 +105,13 @@ export class KawaseBlurFilter extends Filter entryPoint: 'mainVertex', }, fragment: { - source: options?.clamp ? sourceClamp : source, + source: clamp ? sourceClamp : source, entryPoint: 'mainFragment', }, }); const glProgram = GlProgram.from({ vertex, - fragment: options?.clamp ? fragmentClamp : fragment, + fragment: clamp ? fragmentClamp : fragment, name: 'kawase-blur-filter', }); @@ -117,23 +123,24 @@ export class KawaseBlurFilter extends Filter uOffset: { value: new Float32Array(2), type: 'vec2' }, } }, + ...rest, }); this.uniforms = this.resources.kawaseBlurUniforms.uniforms; - this.pixelSize = options.pixelSize ?? { x: 1, y: 1 }; + this.pixelSize = pixelSize ?? { x: 1, y: 1 }; - if (Array.isArray(options.strength)) + if (Array.isArray(strength)) { - this.kernels = options.strength; + this.kernels = strength; } - else if (typeof options.strength === 'number') + else if (typeof strength === 'number') { - this._blur = options.strength; - this.quality = options.quality ?? 3; + this._blur = strength; + this.quality = quality ?? 3; } - this._clamp = !!options.clamp; + this._clamp = !!clamp; } /** diff --git a/src/motion-blur/MotionBlurFilter.ts b/src/motion-blur/MotionBlurFilter.ts index 7dae3cdf2..7e4d29621 100644 --- a/src/motion-blur/MotionBlurFilter.ts +++ b/src/motion-blur/MotionBlurFilter.ts @@ -4,8 +4,10 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './motion-blur.frag'; import source from './motion-blur.wgsl'; +import type { FilterOptions } from 'pixi.js'; + /** Options for the MotionBlurFilter constructor. */ -export interface MotionBlurFilterOptions +export interface MotionBlurFilterOptions extends FilterOptions { /** * Sets the velocity of the motion for blur effect @@ -36,7 +38,7 @@ export interface MotionBlurFilterOptions export class MotionBlurFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: MotionBlurFilterOptions = { + public static readonly DEFAULT_OPTIONS = { velocity: { x: 0, y: 0 }, kernelSize: 5, offset: 0, @@ -81,7 +83,12 @@ export class MotionBlurFilter extends Filter if (args[2] !== undefined) options.offset = args[2]; } - options = { ...MotionBlurFilter.DEFAULT_OPTIONS, ...options }; + const { + velocity, + kernelSize, + offset, + ...rest + } = { ...MotionBlurFilter.DEFAULT_OPTIONS, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -105,16 +112,17 @@ export class MotionBlurFilter extends Filter glProgram, resources: { motionBlurUniforms: { - uVelocity: { value: options.velocity, type: 'vec2' }, - uKernelSize: { value: Math.trunc(options.kernelSize ?? 5), type: 'i32' }, - uOffset: { value: options.offset, type: 'f32' }, + uVelocity: { value: velocity, type: 'vec2' }, + uKernelSize: { value: Math.trunc(kernelSize ?? 5), type: 'i32' }, + uOffset: { value: offset, type: 'f32' }, } }, + ...rest }); this.uniforms = this.resources.motionBlurUniforms.uniforms; - Object.assign(this, options); + Object.assign(this, { velocity, kernelSize, offset }); } /** diff --git a/src/multi-color-replace/MultiColorReplaceFilter.ts b/src/multi-color-replace/MultiColorReplaceFilter.ts index 449526bb2..0ecb7efad 100644 --- a/src/multi-color-replace/MultiColorReplaceFilter.ts +++ b/src/multi-color-replace/MultiColorReplaceFilter.ts @@ -3,10 +3,12 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './multi-color-replace.frag'; import source from './multi-color-replace.wgsl'; +import type { FilterOptions } from 'pixi.js'; + type DeprecatedColor = number | number[] | Float32Array; /** Options for the MultiColorReplaceFilter constructor. */ -export interface MultiColorReplaceFilterOptions +export interface MultiColorReplaceFilterOptions extends FilterOptions { /** * The collection of replacement items. Each item is color-pair @@ -59,7 +61,7 @@ export interface MultiColorReplaceFilterOptions export class MultiColorReplaceFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: MultiColorReplaceFilterOptions = { + public static readonly DEFAULT_OPTIONS = { replacements: [[0xff0000, 0x0000ff]], tolerance: 0.05, maxColors: undefined, @@ -107,9 +109,14 @@ export class MultiColorReplaceFilter extends Filter if (args[2]) options.maxColors = args[2]; } - options = { ...MultiColorReplaceFilter.DEFAULT_OPTIONS, ...options }; + const { + replacements, + tolerance, + maxColors, + ...rest + } = { ...MultiColorReplaceFilter.DEFAULT_OPTIONS, ...options }; - const maxColors = options.maxColors ?? options.replacements.length; + const maxColorsValue = maxColors ?? replacements.length; const gpuProgram = GpuProgram.from({ vertex: { @@ -117,14 +124,14 @@ export class MultiColorReplaceFilter extends Filter entryPoint: 'mainVertex', }, fragment: { - source: source.replace(/\$\{MAX_COLORS\}/g, (maxColors).toFixed(0)), + source: source.replace(/\$\{MAX_COLORS\}/g, (maxColorsValue).toFixed(0)), entryPoint: 'mainFragment', }, }); const glProgram = GlProgram.from({ vertex, - fragment: fragment.replace(/\$\{MAX_COLORS\}/g, (maxColors).toFixed(0)), + fragment: fragment.replace(/\$\{MAX_COLORS\}/g, (maxColorsValue).toFixed(0)), name: 'multi-color-replace-filter', }); @@ -134,25 +141,26 @@ export class MultiColorReplaceFilter extends Filter resources: { multiColorReplaceUniforms: { uOriginalColors: { - value: new Float32Array(3 * maxColors), + value: new Float32Array(3 * maxColorsValue), type: 'vec3', - size: maxColors + size: maxColorsValue }, uTargetColors: { - value: new Float32Array(3 * maxColors), + value: new Float32Array(3 * maxColorsValue), type: 'vec3', - size: maxColors + size: maxColorsValue }, - uTolerance: { value: options.tolerance, type: 'f32' }, + uTolerance: { value: tolerance, type: 'f32' }, } }, + ...rest }); - this._maxColors = maxColors; + this._maxColors = maxColorsValue; this.uniforms = this.resources.multiColorReplaceUniforms.uniforms; - this.replacements = options.replacements; + this.replacements = replacements; } /** diff --git a/src/old-film/OldFilmFilter.ts b/src/old-film/OldFilmFilter.ts index 57ee066f8..3951d0956 100644 --- a/src/old-film/OldFilmFilter.ts +++ b/src/old-film/OldFilmFilter.ts @@ -3,10 +3,10 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './old-film.frag'; import source from './old-film.wgsl'; -import type { FilterSystem, RenderSurface, Texture } from 'pixi.js'; +import type { FilterOptions, FilterSystem, RenderSurface, Texture } from 'pixi.js'; /** Options for the OldFilmFilter constructor. */ -export interface OldFilmFilterOptions +export interface OldFilmFilterOptions extends FilterOptions { /** * The amount of saturation of sepia effect, @@ -71,7 +71,7 @@ export interface OldFilmFilterOptions export class OldFilmFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: OldFilmFilterOptions = { + public static readonly DEFAULT_OPTIONS = { sepia: 0.3, noise: 0.3, noiseSize: 1, @@ -104,7 +104,19 @@ export class OldFilmFilter extends Filter */ constructor(options?: OldFilmFilterOptions) { - options = { ...OldFilmFilter.DEFAULT_OPTIONS, ...options }; + const { + sepia, + noise, + noiseSize, + scratch, + scratchDensity, + scratchWidth, + vignetting, + vignettingAlpha, + vignettingBlur, + seed, + ...rest + } = { ...OldFilmFilter.DEFAULT_OPTIONS, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -128,19 +140,31 @@ export class OldFilmFilter extends Filter glProgram, resources: { oldFilmUniforms: { - uSepia: { value: options.sepia, type: 'f32' }, + uSepia: { value: sepia, type: 'f32' }, uNoise: { value: new Float32Array(2), type: 'vec2' }, uScratch: { value: new Float32Array(3), type: 'vec3' }, uVignetting: { value: new Float32Array(3), type: 'vec3' }, - uSeed: { value: options.seed, type: 'f32' }, + uSeed: { value: seed, type: 'f32' }, uDimensions: { value: new Float32Array(2), type: 'vec2' }, } }, + ...rest }); this.uniforms = this.resources.oldFilmUniforms.uniforms; - Object.assign(this, options); + Object.assign(this, { + sepia, + noise, + noiseSize, + scratch, + scratchDensity, + scratchWidth, + vignetting, + vignettingAlpha, + vignettingBlur, + seed + }); } /** diff --git a/src/outline/OutlineFilter.ts b/src/outline/OutlineFilter.ts index 6ba00044d..51e6ba388 100644 --- a/src/outline/OutlineFilter.ts +++ b/src/outline/OutlineFilter.ts @@ -3,10 +3,10 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './outline.frag'; import source from './outline.wgsl'; -import type { ColorSource, FilterSystem, RenderSurface, Texture } from 'pixi.js'; +import type { ColorSource, FilterOptions, FilterSystem, RenderSurface, Texture } from 'pixi.js'; /** Options for the OutlineFilter constructor. */ -export interface OutlineFilterOptions +export interface OutlineFilterOptions extends FilterOptions { /** * The thickness of the outline @@ -51,7 +51,7 @@ export interface OutlineFilterOptions export class OutlineFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: OutlineFilterOptions = { + public static readonly DEFAULT_OPTIONS = { thickness: 1, color: 0x000000, alpha: 1, @@ -110,9 +110,14 @@ export class OutlineFilter extends Filter if (args[4] !== undefined) options.knockout = args[4]; } - options = { ...OutlineFilter.DEFAULT_OPTIONS, ...options }; - - const quality = options.quality ?? 0.1; + const { + thickness, + color, + alpha, + quality, + knockout, + ...rest + } = { ...OutlineFilter.DEFAULT_OPTIONS, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -138,19 +143,20 @@ export class OutlineFilter extends Filter outlineUniforms: { uThickness: { value: new Float32Array(2), type: 'vec2' }, uColor: { value: new Float32Array(3), type: 'vec3' }, - uAlpha: { value: options.alpha, type: 'f32' }, + uAlpha: { value: alpha, type: 'f32' }, uAngleStep: { value: 0, type: 'f32' }, - uKnockout: { value: options.knockout ? 1 : 0, type: 'f32' }, + uKnockout: { value: knockout ? 1 : 0, type: 'f32' }, } }, + ...rest }); this.uniforms = this.resources.outlineUniforms.uniforms; this.uniforms.uAngleStep = OutlineFilter.getAngleStep(quality); this._color = new Color(); - this.color = options.color ?? 0x000000; + this.color = color; - Object.assign(this, options); + Object.assign(this, { thickness, quality, knockout }); } /** diff --git a/src/pixelate/PixelateFilter.ts b/src/pixelate/PixelateFilter.ts index 518e1392a..9f3ab180a 100644 --- a/src/pixelate/PixelateFilter.ts +++ b/src/pixelate/PixelateFilter.ts @@ -3,8 +3,15 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './pixelate.frag'; import source from './pixelate.wgsl'; +import type { FilterOptions } from 'pixi.js'; + type Size = number | number[] | Point; +interface PixelateFilterOptions extends FilterOptions +{ + size?: Size; +} + /** * This filter applies a pixelate effect making display objects appear 'blocky'.
* ![original](../screenshots/original.png)![filter](../screenshots/pixelate.png) @@ -14,11 +21,32 @@ type Size = number | number[] | Point; */ export class PixelateFilter extends Filter { + public static readonly DEFAULT_OPTIONS = { + size: 10, + }; + /** * @param {Point|Array|number} [size=10] - Either the width/height of the size of the pixels, or square size */ - constructor(size: Size = 10) + constructor(options: Size); + /** + * @param {PixelateFilterOptions} + */ + constructor(options: PixelateFilterOptions); + constructor(options: PixelateFilterOptions | Size = 10) { + let size: Size; + let rest: FilterOptions = {}; + + if (typeof options === 'number' || Array.isArray(options) || options instanceof Point) + { + size = options; + } + else + { + ({ size, ...rest } = { ...PixelateFilter.DEFAULT_OPTIONS, ...options }); + } + const gpuProgram = GpuProgram.from({ vertex: { source: wgslVertex, @@ -44,6 +72,7 @@ export class PixelateFilter extends Filter uSize: { value: new Float32Array(2), type: 'vec2' }, }, }, + ...rest }); this.size = size; diff --git a/src/radial-blur/RadialBlurFilter.ts b/src/radial-blur/RadialBlurFilter.ts index 7d8c681d2..931295b3d 100644 --- a/src/radial-blur/RadialBlurFilter.ts +++ b/src/radial-blur/RadialBlurFilter.ts @@ -3,10 +3,10 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './radial-blur.frag'; import source from './radial-blur.wgsl'; -import type { PointData } from 'pixi.js'; +import type { FilterOptions, PointData } from 'pixi.js'; /** Options for the RadialBlurFilter constructor. */ -export interface RadialBlurFilterOptions +export interface RadialBlurFilterOptions extends FilterOptions { /** * Sets the angle of the motion for blur effect @@ -42,7 +42,7 @@ export interface RadialBlurFilterOptions export class RadialBlurFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: RadialBlurFilterOptions = { + public static readonly DEFAULT_OPTIONS = { angle: 0, center: { x: 0, y: 0 }, kernelSize: 5, @@ -95,7 +95,13 @@ export class RadialBlurFilter extends Filter if (args[3]) options.radius = args[3]; } - options = { ...RadialBlurFilter.DEFAULT_OPTIONS, ...options }; + const { + angle, + center, + kernelSize, + radius, + ...rest + } = { ...RadialBlurFilter.DEFAULT_OPTIONS, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -120,16 +126,17 @@ export class RadialBlurFilter extends Filter resources: { radialBlurUniforms: { uRadian: { value: 0, type: 'f32' }, - uCenter: { value: options.center, type: 'vec2' }, - uKernelSize: { value: options.kernelSize, type: 'i32' }, - uRadius: { value: options.radius, type: 'f32' }, + uCenter: { value: center, type: 'vec2' }, + uKernelSize: { value: kernelSize, type: 'i32' }, + uRadius: { value: radius, type: 'f32' }, } }, + ...rest }); this.uniforms = this.resources.radialBlurUniforms.uniforms; - Object.assign(this, options); + Object.assign(this, { angle, center, kernelSize, radius }); } private _updateKernelSize() diff --git a/src/reflection/ReflectionFilter.ts b/src/reflection/ReflectionFilter.ts index faf57910c..2f821dbcb 100644 --- a/src/reflection/ReflectionFilter.ts +++ b/src/reflection/ReflectionFilter.ts @@ -3,13 +3,13 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './reflection.frag'; import source from './reflection.wgsl'; -import type { FilterSystem, RenderSurface, Texture } from 'pixi.js'; +import type { FilterOptions, FilterSystem, RenderSurface, Texture } from 'pixi.js'; /** [MIN, MAX] */ type Range = [number, number] | Float32Array; /** Options for the ReflectionFilter constructor. */ -export interface ReflectionFilterOptions +export interface ReflectionFilterOptions extends FilterOptions { /** * `true` to reflect the image, `false` for waves-only @@ -54,7 +54,7 @@ export interface ReflectionFilterOptions export class ReflectionFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: ReflectionFilterOptions = { + public static readonly DEFAULT_OPTIONS = { mirror: true, boundary: 0.5, amplitude: [0, 20], @@ -84,7 +84,15 @@ export class ReflectionFilter extends Filter */ constructor(options?: ReflectionFilterOptions) { - options = { ...ReflectionFilter.DEFAULT_OPTIONS, ...options }; + const { + mirror, + boundary, + amplitude, + waveLength, + alpha, + time, + ...rest + } = { ...ReflectionFilter.DEFAULT_OPTIONS, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -107,20 +115,21 @@ export class ReflectionFilter extends Filter glProgram, resources: { reflectionUniforms: { - uMirror: { value: options.mirror ? 1 : 0, type: 'f32' }, - uBoundary: { value: options.boundary, type: 'f32' }, - uAmplitude: { value: options.amplitude, type: 'vec2' }, - uWavelength: { value: options.waveLength, type: 'vec2' }, - uAlpha: { value: options.alpha, type: 'vec2' }, - uTime: { value: options.time, type: 'f32' }, + uMirror: { value: mirror ? 1 : 0, type: 'f32' }, + uBoundary: { value: boundary, type: 'f32' }, + uAmplitude: { value: amplitude, type: 'vec2' }, + uWavelength: { value: waveLength, type: 'vec2' }, + uAlpha: { value: alpha, type: 'vec2' }, + uTime: { value: time, type: 'f32' }, uDimensions: { value: new Float32Array(2), type: 'vec2' }, } }, + ...rest }); this.uniforms = this.resources.reflectionUniforms.uniforms; - Object.assign(this, options); + Object.assign(this, { mirror, boundary, amplitude, waveLength, alpha, time }); } /** diff --git a/src/rgb-split/RGBSplitFilter.ts b/src/rgb-split/RGBSplitFilter.ts index 9ec659383..40f951a4e 100644 --- a/src/rgb-split/RGBSplitFilter.ts +++ b/src/rgb-split/RGBSplitFilter.ts @@ -3,10 +3,12 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './rgb-split.frag'; import source from './rgb-split.wgsl'; +import type { FilterOptions } from 'pixi.js'; + type OffsetType = PointData | [number, number]; /** Options for the RGBSplitFilter constructor. */ -export interface RGBSplitFilterOptions +export interface RGBSplitFilterOptions extends FilterOptions { /** * The amount of offset for the red channel. @@ -35,7 +37,7 @@ export interface RGBSplitFilterOptions export class RGBSplitFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: RGBSplitFilterOptions = { + public static readonly DEFAULT_OPTIONS = { red: { x: -10, y: 0 }, green: { x: 0, y: 10 }, blue: { x: 0, y: 0 }, @@ -77,6 +79,13 @@ export class RGBSplitFilter extends Filter options = { ...RGBSplitFilter.DEFAULT_OPTIONS, ...options }; + const { + red, + green, + blue, + ...rest + } = options; + const gpuProgram = GpuProgram.from({ vertex: { source: wgslVertex, @@ -99,16 +108,17 @@ export class RGBSplitFilter extends Filter glProgram, resources: { rgbSplitUniforms: { - uRed: { value: options.red, type: 'vec2' }, - uGreen: { value: options.green, type: 'vec2' }, - uBlue: { value: options.blue, type: 'vec2' }, + uRed: { value: red, type: 'vec2' }, + uGreen: { value: green, type: 'vec2' }, + uBlue: { value: blue, type: 'vec2' }, } }, + ...rest, }); this.uniforms = this.resources.rgbSplitUniforms.uniforms; - Object.assign(this, options); + Object.assign(this, { red, green, blue }); } /** diff --git a/src/shockwave/ShockwaveFilter.ts b/src/shockwave/ShockwaveFilter.ts index 3e31ca46c..8c12227fe 100644 --- a/src/shockwave/ShockwaveFilter.ts +++ b/src/shockwave/ShockwaveFilter.ts @@ -12,8 +12,10 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './shockwave.frag'; import source from './shockwave.wgsl'; +import type { FilterOptions } from 'pixi.js'; + /** Options for the ShockwaveFilter constructor. */ -export interface ShockwaveFilterOptions +export interface ShockwaveFilterOptions extends FilterOptions { /** * The `x` and `y` center coordinates to change the position of the center of the circle of effect. @@ -62,7 +64,7 @@ export interface ShockwaveFilterOptions export class ShockwaveFilter extends Filter { /** Default shockwave filter options */ - public static readonly DEFAULT_OPTIONS: ShockwaveFilterOptions = { + public static readonly DEFAULT_OPTIONS = { /** The `x` and `y` center coordinates to change the position of the center of the circle of effect. */ center: { x: 0, y: 0 }, /** The speed about the shockwave ripples out. The unit is `pixel-per-second` */ @@ -120,7 +122,16 @@ export class ShockwaveFilter extends Filter if (args[2] !== undefined) options.time = args[2]; } - options = { ...ShockwaveFilter.DEFAULT_OPTIONS, ...options }; + const { + center, + speed, + amplitude, + wavelength, + brightness, + radius, + time, + ...rest + } = { ...ShockwaveFilter.DEFAULT_OPTIONS, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -144,19 +155,20 @@ export class ShockwaveFilter extends Filter glProgram, resources: { shockwaveUniforms: { - uTime: { value: options.time, type: 'f32' }, - uCenter: { value: options.center, type: 'vec2' }, - uSpeed: { value: options.speed, type: 'f32' }, + uTime: { value: time, type: 'f32' }, + uCenter: { value: center, type: 'vec2' }, + uSpeed: { value: speed, type: 'f32' }, uWave: { value: new Float32Array(4), type: 'vec4' }, }, }, + ...rest }); this.time = 0; this.uniforms = this.resources.shockwaveUniforms.uniforms; - Object.assign(this, options); + Object.assign(this, { center, speed, amplitude, wavelength, brightness, radius, time }); } public override apply( diff --git a/src/simple-lightmap/SimpleLightmapFilter.ts b/src/simple-lightmap/SimpleLightmapFilter.ts index b46c0f7c9..57714d6fb 100644 --- a/src/simple-lightmap/SimpleLightmapFilter.ts +++ b/src/simple-lightmap/SimpleLightmapFilter.ts @@ -13,10 +13,12 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './simple-lightmap.frag'; import source from './simple-lightmap.wgsl'; +import type { FilterOptions } from 'pixi.js'; + type DeprecatedColor = number | number[]; /** Options for the SimpleLightmapFilter constructor. */ -export interface SimpleLightmapFilterOptions +export interface SimpleLightmapFilterOptions extends FilterOptions { /** A texture where your lightmap is rendered */ lightMap: Texture; @@ -53,7 +55,7 @@ export interface SimpleLightmapFilterOptions export class SimpleLightmapFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: SimpleLightmapFilterOptions = { + public static readonly DEFAULT_OPTIONS = { lightMap: Texture.WHITE, color: 0x000000, alpha: 1 @@ -96,9 +98,14 @@ export class SimpleLightmapFilter extends Filter if (args[2] !== undefined) options.alpha = args[2]; } - options = { ...SimpleLightmapFilter.DEFAULT_OPTIONS, ...options }; + const { + lightMap, + color, + alpha, + ...rest + } = { ...SimpleLightmapFilter.DEFAULT_OPTIONS, ...options }; - if (!options.lightMap) throw Error('No light map texture source was provided to SimpleLightmapFilter'); + if (!lightMap) throw Error('No light map texture source was provided to SimpleLightmapFilter'); const gpuProgram = GpuProgram.from({ vertex: { @@ -122,19 +129,20 @@ export class SimpleLightmapFilter extends Filter resources: { simpleLightmapUniforms: { uColor: { value: new Float32Array(3), type: 'vec3' }, - uAlpha: { value: options.alpha, type: 'f32' }, + uAlpha: { value: alpha, type: 'f32' }, uDimensions: { value: new Float32Array(2), type: 'vec2' }, }, - uMapTexture: options.lightMap.source, - uMapSampler: options.lightMap.source.style, + uMapTexture: lightMap.source, + uMapSampler: lightMap.source.style, }, + ...rest }); this.uniforms = this.resources.simpleLightmapUniforms.uniforms; this._color = new Color(); - this.color = options.color ?? 0x000000; + this.color = color ?? 0x000000; - Object.assign(this, options); + Object.assign(this, { lightMap, color, alpha }); } /** diff --git a/src/simplex-noise/SimplexNoiseFilter.ts b/src/simplex-noise/SimplexNoiseFilter.ts index e02f339e8..edd69fb20 100644 --- a/src/simplex-noise/SimplexNoiseFilter.ts +++ b/src/simplex-noise/SimplexNoiseFilter.ts @@ -63,7 +63,15 @@ export class SimplexNoiseFilter extends Filter */ constructor(options?: SimplexNoiseFilterOptions) { - options = { ...SimplexNoiseFilter.defaults, ...options }; + const { + strength, + noiseScale, + offsetX, + offsetY, + offsetZ, + step, + ...rest + } = { ...SimplexNoiseFilter.defaults, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -87,14 +95,15 @@ export class SimplexNoiseFilter extends Filter glProgram, resources: { simplexUniforms: { - uStrength: { value: options?.strength ?? 0, type: 'f32' }, - uNoiseScale: { value: options?.noiseScale ?? 0, type: 'f32' }, - uOffsetX: { value: options?.offsetX ?? 0, type: 'f32' }, - uOffsetY: { value: options?.offsetY ?? 0, type: 'f32' }, - uOffsetZ: { value: options?.offsetZ ?? 0, type: 'f32' }, - uStep: { value: options?.step ?? 0, type: 'f32' }, + uStrength: { value: strength ?? 0, type: 'f32' }, + uNoiseScale: { value: noiseScale ?? 0, type: 'f32' }, + uOffsetX: { value: offsetX ?? 0, type: 'f32' }, + uOffsetY: { value: offsetY ?? 0, type: 'f32' }, + uOffsetZ: { value: offsetZ ?? 0, type: 'f32' }, + uStep: { value: step ?? 0, type: 'f32' }, } - } + }, + ...rest }); } diff --git a/src/tilt-shift/TiltShiftAxisFilter.ts b/src/tilt-shift/TiltShiftAxisFilter.ts index ac7fd8504..eb9e37e44 100644 --- a/src/tilt-shift/TiltShiftAxisFilter.ts +++ b/src/tilt-shift/TiltShiftAxisFilter.ts @@ -3,6 +3,8 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './tilt-shift.frag'; import source from './tilt-shift.wgsl'; +import type { FilterOptions } from 'pixi.js'; + // @author Vico @vicocotea // original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js // by Evan Wallace : http://madebyevan.com/ @@ -10,7 +12,7 @@ import source from './tilt-shift.wgsl'; /** * Options for creating filter. */ -interface TiltShiftAxisFilterOptions +interface TiltShiftAxisFilterOptions extends FilterOptions { /** The strength of the blur. */ blur?: number; @@ -34,7 +36,7 @@ interface TiltShiftAxisFilterOptions export class TiltShiftAxisFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: TiltShiftAxisFilterOptions = { + public static readonly DEFAULT_OPTIONS = { /** The strength of the blur. */ blur: 100, /** The strength of the blur gradient */ @@ -54,7 +56,14 @@ export class TiltShiftAxisFilter extends Filter { const { width, height } = ViewSystem.defaultOptions as { width: number, height: number }; - options = { + const { + blur, + gradientBlur, + start, + end, + axis, + ...rest + } = { ...TiltShiftAxisFilter.DEFAULT_OPTIONS, /** The position to start the effect at. */ start: { x: 0, y: height / 2 }, @@ -87,19 +96,20 @@ export class TiltShiftAxisFilter extends Filter tiltShiftUniforms: { uBlur: { value: new Float32Array([ - options.blur as number, - options.gradientBlur as number, + blur as number, + gradientBlur as number, ]), type: 'vec2' }, - uStart: { value: options.start, type: 'vec2' }, - uEnd: { value: options.end, type: 'vec2' }, + uStart: { value: start, type: 'vec2' }, + uEnd: { value: end, type: 'vec2' }, uDelta: { value: new Float32Array([0, 0]), type: 'vec2' }, }, }, + ...rest, }); this.uniforms = this.resources.tiltShiftUniforms.uniforms; - this._tiltAxis = options.axis; + this._tiltAxis = axis; } /** diff --git a/src/tilt-shift/TiltShiftFilter.ts b/src/tilt-shift/TiltShiftFilter.ts index 26502c226..bcb86ef42 100644 --- a/src/tilt-shift/TiltShiftFilter.ts +++ b/src/tilt-shift/TiltShiftFilter.ts @@ -36,14 +36,20 @@ export class TiltShiftFilter extends TiltShiftAxisFilter */ constructor(options?: TiltShiftFilterOptions) { - options = { ...TiltShiftAxisFilter.DEFAULT_OPTIONS, ...options }; + const { + blur, + gradientBlur, + start, + end, + ...rest + } = { ...TiltShiftAxisFilter.DEFAULT_OPTIONS, ...options }; - super({ ...options, axis: 'horizontal' }); - this._tiltShiftYFilter = new TiltShiftAxisFilter({ ...options, axis: 'vertical' }); + super({ blur, gradientBlur, start, end, axis: 'horizontal', ...rest }); + this._tiltShiftYFilter = new TiltShiftAxisFilter({ blur, gradientBlur, start, end, axis: 'vertical', ...rest }); this.updateDelta(); - Object.assign(this, options); + Object.assign(this, { blur, gradientBlur, start, end }); } /** diff --git a/src/twist/TwistFilter.ts b/src/twist/TwistFilter.ts index c40c53a93..4f130ab1c 100644 --- a/src/twist/TwistFilter.ts +++ b/src/twist/TwistFilter.ts @@ -3,8 +3,10 @@ import { vertex, wgslVertex } from '../defaults'; import fragment from './twist.frag'; import source from './twist.wgsl'; +import type { FilterOptions } from 'pixi.js'; + /** Options for the TwistFilter constructor. */ -export interface TwistFilterOptions +export interface TwistFilterOptions extends FilterOptions { /** * Padding for the filter area @@ -40,7 +42,7 @@ export interface TwistFilterOptions export class TwistFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: TwistFilterOptions = { + public static readonly DEFAULT_OPTIONS = { padding: 20, radius: 200, angle: 4, @@ -57,7 +59,12 @@ export class TwistFilter extends Filter */ constructor(options?: Partial) { - options = { ...TwistFilter.DEFAULT_OPTIONS, ...options }; + const { + radius, + angle, + offset, + ...rest + } = { ...TwistFilter.DEFAULT_OPTIONS, ...options }; const gpuProgram = GpuProgram.from({ vertex: { @@ -82,16 +89,16 @@ export class TwistFilter extends Filter resources: { twistUniforms: { uTwist: { - value: [options.radius ?? 0, options.angle ?? 0], + value: [radius ?? 0, angle ?? 0], type: 'vec2' }, uOffset: { - value: options.offset, + value: offset, type: 'vec2' }, } }, - ...options, + ...rest, }); this.uniforms = this.resources.twistUniforms.uniforms; diff --git a/src/zoom-blur/ZoomBlurFilter.ts b/src/zoom-blur/ZoomBlurFilter.ts index e0946af85..9285574e2 100644 --- a/src/zoom-blur/ZoomBlurFilter.ts +++ b/src/zoom-blur/ZoomBlurFilter.ts @@ -46,7 +46,7 @@ export interface ZoomBlurFilterOptions export class ZoomBlurFilter extends Filter { /** Default values for options. */ - public static readonly DEFAULT_OPTIONS: ZoomBlurFilterOptions = { + public static readonly DEFAULT_OPTIONS = { strength: 0.1, center: { x: 0, y: 0 }, innerRadius: 0, @@ -65,9 +65,16 @@ export class ZoomBlurFilter extends Filter */ constructor(options?: ZoomBlurFilterOptions) { - options = { ...ZoomBlurFilter.DEFAULT_OPTIONS, ...options }; + const { + strength, + center, + innerRadius, + radius, + maxKernelSize, + ...rest + } = { ...ZoomBlurFilter.DEFAULT_OPTIONS, ...options }; - const kernelSize = options.maxKernelSize ?? 32; + const kernelSize = maxKernelSize ?? 32; const gpuProgram = GpuProgram.from({ vertex: { @@ -91,16 +98,17 @@ export class ZoomBlurFilter extends Filter glProgram, resources: { zoomBlurUniforms: { - uStrength: { value: options.strength, type: 'f32' }, - uCenter: { value: options.center, type: 'vec2' }, + uStrength: { value: strength, type: 'f32' }, + uCenter: { value: center, type: 'vec2' }, uRadii: { value: new Float32Array(2), type: 'vec2' }, } }, + ...rest }); this.uniforms = this.resources.zoomBlurUniforms.uniforms; - Object.assign(this, options); + Object.assign(this, { strength, center, innerRadius, radius, maxKernelSize }); } /**