diff --git a/src/convolution/ConvolutionFilter.ts b/src/convolution/ConvolutionFilter.ts index c02e70e81..6a492f0bb 100644 --- a/src/convolution/ConvolutionFilter.ts +++ b/src/convolution/ConvolutionFilter.ts @@ -1,4 +1,4 @@ -import { Filter, GlProgram, GpuProgram } from 'pixi.js'; +import { deprecation, Filter, GlProgram, GpuProgram, PointData } from 'pixi.js'; import { vertex, wgslVertex } from '../defaults'; import fragment from './convolution.frag'; import source from './convolution.wgsl'; @@ -52,11 +52,34 @@ export class ConvolutionFilter extends Filter public uniforms: { uMatrix: ConvolutionMatrix; - uTexelSize: [number, number]; + uTexelSize: PointData; }; - constructor(options?: ConvolutionFilterOptions) + constructor(options?: ConvolutionFilterOptions); + /** + * @deprecated since 6.0.0 + * + * @param {number[]} [matrix=[0,0,0,0,0,0,0,0,0]] - An array of values used for matrix transformation. + * Specified as a 9 point Array. + * @param {number} [width=200] - Width of the object you are transforming + * @param {number} [height=200] - Height of the object you are transforming + */ + constructor(matrix: number[], width?: number, height?: number); + constructor(...args: [ConvolutionFilterOptions?] | [number[], number?, number?]) { + let options = args[0] ?? {}; + + if (Array.isArray(options)) + { + // eslint-disable-next-line max-len + deprecation('6.0.0', 'ConvolutionFilter constructor params are now options object. See params: { matrix, width, height }'); + + options = { matrix: options as ConvolutionMatrix }; + + if (args[1] !== undefined) options.width = args[1]; + if (args[2] !== undefined) options.height = args[2]; + } + options = { ...ConvolutionFilter.DEFAULT_OPTIONS, ...options }; const width = options.width ?? 200; @@ -84,8 +107,8 @@ export class ConvolutionFilter extends Filter glProgram, resources: { convolutionUniforms: { - uMatrix: { value: options.matrix, type: 'vec3', size: 3 }, - uTexelSize: { value: [1 / width, 1 / height], type: 'vec2' }, + uMatrix: { value: options.matrix, type: 'mat3x3' }, + uTexelSize: { value: { x: 1 / width, y: 1 / height }, type: 'vec2' }, }, }, }); @@ -116,13 +139,13 @@ export class ConvolutionFilter extends Filter * Width of the object you are transforming * @default 200 */ - get width(): number { return 1 / this.uniforms.uTexelSize[0]; } - set width(value: number) { this.uniforms.uTexelSize[0] = 1 / value; } + get width(): number { return 1 / this.uniforms.uTexelSize.x; } + set width(value: number) { this.uniforms.uTexelSize.x = 1 / value; } /** * Height of the object you are transforming * @default 200 */ - get height(): number { return 1 / this.uniforms.uTexelSize[1]; } - set height(value: number) { this.uniforms.uTexelSize[1] = 1 / value; } + get height(): number { return 1 / this.uniforms.uTexelSize.y; } + set height(value: number) { this.uniforms.uTexelSize.y = 1 / value; } } diff --git a/src/convolution/convolution.frag b/src/convolution/convolution.frag index 7a44d2c30..596ec90df 100644 --- a/src/convolution/convolution.frag +++ b/src/convolution/convolution.frag @@ -3,7 +3,7 @@ out vec4 finalColor; uniform sampler2D uTexture; uniform vec2 uTexelSize; -uniform float uMatrix[9]; +uniform mat3 uMatrix; void main(void) { @@ -20,9 +20,9 @@ void main(void) vec4 c33 = texture(uTexture, vTextureCoord + uTexelSize); // bottom right finalColor = - c11 * uMatrix[0] + c12 * uMatrix[1] + c13 * uMatrix[2] + - c21 * uMatrix[3] + c22 * uMatrix[4] + c23 * uMatrix[5] + - c31 * uMatrix[6] + c32 * uMatrix[7] + c33 * uMatrix[8]; + c11 * uMatrix[0][0] + c12 * uMatrix[0][1] + c13 * uMatrix[0][2] + + c21 * uMatrix[1][0] + c22 * uMatrix[1][1] + c23 * uMatrix[1][2] + + c31 * uMatrix[2][0] + c32 * uMatrix[2][1] + c33 * uMatrix[2][2]; finalColor.a = c22.a; -} +} \ No newline at end of file diff --git a/src/convolution/convolution.wgsl b/src/convolution/convolution.wgsl index 3975e8001..bd5779c8a 100644 --- a/src/convolution/convolution.wgsl +++ b/src/convolution/convolution.wgsl @@ -1,5 +1,5 @@ struct ConvolutionUniforms { - uMatrix: array, 3>, + uMatrix: mat3x3, uTexelSize: vec2, };