diff --git a/src/adjustment/AdjustmentFilter.ts b/src/adjustment/AdjustmentFilter.ts index 5a87ba0f0..a8536718d 100644 --- a/src/adjustment/AdjustmentFilter.ts +++ b/src/adjustment/AdjustmentFilter.ts @@ -87,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: { @@ -111,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 57368a222..6eff261ae 100644 --- a/src/advanced-bloom/AdvancedBloomFilter.ts +++ b/src/advanced-bloom/AdvancedBloomFilter.ts @@ -91,6 +91,15 @@ export class AdvancedBloomFilter extends Filter { options = { ...AdvancedBloomFilter.DEFAULT_OPTIONS, ...options }; + const { + threshold, + bloomScale, + brightness, + blur, + quality, + ...rest + } = options; + const gpuProgram = GpuProgram.from({ vertex: { source: wgslVertex, @@ -113,22 +122,23 @@ 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); diff --git a/src/advanced-bloom/ExtractBrightnessFilter.ts b/src/advanced-bloom/ExtractBrightnessFilter.ts index 2f7752839..917e4bff6 100644 --- a/src/advanced-bloom/ExtractBrightnessFilter.ts +++ b/src/advanced-bloom/ExtractBrightnessFilter.ts @@ -31,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: { @@ -55,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 6f9cbaedd..4a17de410 100644 --- a/src/ascii/AsciiFilter.ts +++ b/src/ascii/AsciiFilter.ts @@ -79,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: { @@ -105,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 c37e7eec2..3126a497c 100644 --- a/src/bevel/BevelFilter.ts +++ b/src/bevel/BevelFilter.ts @@ -79,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: { @@ -104,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 5b3dfe4b6..3068c0fd4 100644 --- a/src/bloom/BloomFilter.ts +++ b/src/bloom/BloomFilter.ts @@ -97,21 +97,25 @@ export class BloomFilter extends AlphaFilter options = { ...BloomFilter.DEFAULT_OPTIONS, ...options } as BloomFilterOptions; - super(); + const { + strength, + } = 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; } } diff --git a/src/bulge-pinch/BulgePinchFilter.ts b/src/bulge-pinch/BulgePinchFilter.ts index 8da6d7314..f97600f5d 100644 --- a/src/bulge-pinch/BulgePinchFilter.ts +++ b/src/bulge-pinch/BulgePinchFilter.ts @@ -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,11 +84,12 @@ 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; diff --git a/src/color-gradient/ColorGradientFilter.ts b/src/color-gradient/ColorGradientFilter.ts index a50a94c2a..c7b5e7387 100644 --- a/src/color-gradient/ColorGradientFilter.ts +++ b/src/color-gradient/ColorGradientFilter.ts @@ -127,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.'); } @@ -159,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', }, @@ -184,8 +194,9 @@ 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; diff --git a/src/color-map/ColorMapFilter.ts b/src/color-map/ColorMapFilter.ts index 78097b11b..c713f99f4 100644 --- a/src/color-map/ColorMapFilter.ts +++ b/src/color-map/ColorMapFilter.ts @@ -89,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, @@ -111,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 f9c187154..c63ecc103 100644 --- a/src/color-overlay/ColorOverlayFilter.ts +++ b/src/color-overlay/ColorOverlayFilter.ts @@ -73,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, @@ -96,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 7b7a661f9..e780c8e52 100644 --- a/src/color-replace/ColorReplaceFilter.ts +++ b/src/color-replace/ColorReplaceFilter.ts @@ -110,6 +110,16 @@ export class ColorReplaceFilter extends Filter options = { ...ColorReplaceFilter.DEFAULT_OPTIONS, ...options }; + options.originalColor = options?.originalColor ?? 0xff0000; + options.targetColor = options?.originalColor ?? 0x000000; + + const { + originalColor, + targetColor, + tolerance, + ...rest + } = options; + const gpuProgram = GpuProgram.from({ vertex: { source: wgslVertex, @@ -134,17 +144,18 @@ 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; + this.originalColor = originalColor; + this.targetColor = targetColor; Object.assign(this, options); } diff --git a/src/convolution/ConvolutionFilter.ts b/src/convolution/ConvolutionFilter.ts index 0e2f775b5..0ea137d3f 100644 --- a/src/convolution/ConvolutionFilter.ts +++ b/src/convolution/ConvolutionFilter.ts @@ -88,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: { @@ -113,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 6c9b84726..0e7eb01c8 100644 --- a/src/crt/CRTFilter.ts +++ b/src/crt/CRTFilter.ts @@ -118,6 +118,11 @@ export class CRTFilter extends Filter constructor(options?: CRTFilterOptions) { options = { ...CRTFilter.DEFAULT_OPTIONS, ...options }; + const { + time, + seed, + ...rest + } = options; const gpuProgram = GpuProgram.from({ vertex: { @@ -144,11 +149,12 @@ 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; diff --git a/src/dot/DotFilter.ts b/src/dot/DotFilter.ts index caa97f6e0..1014fd2ab 100644 --- a/src/dot/DotFilter.ts +++ b/src/dot/DotFilter.ts @@ -72,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({ @@ -103,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 6c34ff230..1a94c62e1 100644 --- a/src/drop-shadow/DropShadowFilter.ts +++ b/src/drop-shadow/DropShadowFilter.ts @@ -111,6 +111,16 @@ export class DropShadowFilter extends Filter constructor(options?: DropShadowFilterOptions) { options = { ...DropShadowFilter.DEFAULT_OPTIONS, ...options }; + const { + offset, + color, + alpha, + kernels, + blur, + quality, + resolution, + ...rest + } = options; const gpuProgram = GpuProgram.from({ vertex: { @@ -134,21 +144,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({ 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 c9473942d..49f9534f3 100644 --- a/src/glitch/GlitchFilter.ts +++ b/src/glitch/GlitchFilter.ts @@ -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; diff --git a/src/glow/GlowFilter.ts b/src/glow/GlowFilter.ts index fca0390d3..f597d50d1 100644 --- a/src/glow/GlowFilter.ts +++ b/src/glow/GlowFilter.ts @@ -63,7 +63,7 @@ export interface GlowFilterOptions extends FilterOptions 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, @@ -89,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: { @@ -122,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 ff9cd1940..ded6eb2aa 100644 --- a/src/godray/GodrayFilter.ts +++ b/src/godray/GodrayFilter.ts @@ -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,11 +135,12 @@ 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; 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 8fa3eb49e..4633c9074 100644 --- a/src/hsl-adjustment/HslAdjustmentFilter.ts +++ b/src/hsl-adjustment/HslAdjustmentFilter.ts @@ -69,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: { @@ -94,10 +101,11 @@ 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; diff --git a/src/kawase-blur/KawaseBlurFilter.ts b/src/kawase-blur/KawaseBlurFilter.ts index 206bdaa47..3dc1bec6e 100644 --- a/src/kawase-blur/KawaseBlurFilter.ts +++ b/src/kawase-blur/KawaseBlurFilter.ts @@ -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 362e46e53..15ca03636 100644 --- a/src/motion-blur/MotionBlurFilter.ts +++ b/src/motion-blur/MotionBlurFilter.ts @@ -83,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: { @@ -107,11 +112,12 @@ 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; diff --git a/src/multi-color-replace/MultiColorReplaceFilter.ts b/src/multi-color-replace/MultiColorReplaceFilter.ts index 65840be87..c2a0cc6d2 100644 --- a/src/multi-color-replace/MultiColorReplaceFilter.ts +++ b/src/multi-color-replace/MultiColorReplaceFilter.ts @@ -109,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: { @@ -119,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', }); @@ -136,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 27d9925df..9d99584c5 100644 --- a/src/old-film/OldFilmFilter.ts +++ b/src/old-film/OldFilmFilter.ts @@ -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,14 +140,15 @@ 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; diff --git a/src/outline/OutlineFilter.ts b/src/outline/OutlineFilter.ts index 7c249a58a..51e6ba388 100644 --- a/src/outline/OutlineFilter.ts +++ b/src/outline/OutlineFilter.ts @@ -51,7 +51,7 @@ export interface OutlineFilterOptions extends FilterOptions 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 254690a80..565000d78 100644 --- a/src/radial-blur/RadialBlurFilter.ts +++ b/src/radial-blur/RadialBlurFilter.ts @@ -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,11 +126,12 @@ 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; diff --git a/src/reflection/ReflectionFilter.ts b/src/reflection/ReflectionFilter.ts index 6f284a446..f25c63fba 100644 --- a/src/reflection/ReflectionFilter.ts +++ b/src/reflection/ReflectionFilter.ts @@ -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,15 +115,16 @@ 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; diff --git a/src/rgb-split/RGBSplitFilter.ts b/src/rgb-split/RGBSplitFilter.ts index 92040ed23..941134ebc 100644 --- a/src/rgb-split/RGBSplitFilter.ts +++ b/src/rgb-split/RGBSplitFilter.ts @@ -79,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, @@ -101,11 +108,12 @@ 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; diff --git a/src/shockwave/ShockwaveFilter.ts b/src/shockwave/ShockwaveFilter.ts index 0973f4fdb..c441b5bcf 100644 --- a/src/shockwave/ShockwaveFilter.ts +++ b/src/shockwave/ShockwaveFilter.ts @@ -122,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: { @@ -146,12 +155,13 @@ 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; diff --git a/src/simple-lightmap/SimpleLightmapFilter.ts b/src/simple-lightmap/SimpleLightmapFilter.ts index 4f2bd1f0a..3e702e22f 100644 --- a/src/simple-lightmap/SimpleLightmapFilter.ts +++ b/src/simple-lightmap/SimpleLightmapFilter.ts @@ -98,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: { @@ -124,17 +129,18 @@ 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); } 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 82c66684a..4d54ed6d5 100644 --- a/src/tilt-shift/TiltShiftAxisFilter.ts +++ b/src/tilt-shift/TiltShiftAxisFilter.ts @@ -57,7 +57,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 }, @@ -90,20 +97,21 @@ 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' }, uDimensions: { value: new Float32Array([width, height]), 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 b55ddfe74..b48ddb4e1 100644 --- a/src/tilt-shift/TiltShiftFilter.ts +++ b/src/tilt-shift/TiltShiftFilter.ts @@ -36,10 +36,16 @@ export class TiltShiftFilter extends TiltShiftAxisFilter */ constructor(options?: TiltShiftFilterOptions) { - options = { ...TiltShiftAxisFilter.DEFAULT_OPTIONS, ...options }; - - super({ ...options, axis: 'horizontal' }); - this._tiltShiftYFilter = new TiltShiftAxisFilter({ ...options, axis: 'vertical' }); + const { + blur, + gradientBlur, + start, + end, + ...rest + } = { ...TiltShiftAxisFilter.DEFAULT_OPTIONS, ...options }; + + super({ blur, gradientBlur, start, end, axis: 'horizontal', ...rest }); + this._tiltShiftYFilter = new TiltShiftAxisFilter({ blur, gradientBlur, start, end, axis: 'vertical', ...rest }); this.updateDelta(); diff --git a/src/twist/TwistFilter.ts b/src/twist/TwistFilter.ts index c74aef89a..553bbd358 100644 --- a/src/twist/TwistFilter.ts +++ b/src/twist/TwistFilter.ts @@ -59,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: { @@ -84,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..88df2762d 100644 --- a/src/zoom-blur/ZoomBlurFilter.ts +++ b/src/zoom-blur/ZoomBlurFilter.ts @@ -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,11 +98,12 @@ 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;