Chore: Convolution Filter Deprecations

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<f32>', size: 3 },
-                    uTexelSize: { value: [1 / width, 1 / height], type: 'vec2<f32>' },
+                    uMatrix: { value: options.matrix, type: 'mat3x3<f32>' },
+                    uTexelSize: { value: { x: 1 / width, y: 1 / height }, type: 'vec2<f32>' },
                 },
             },
         });
@@ -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; }
 }

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;
-}
+}

src/convolution/convolution.wgsl

@@ -1,5 +1,5 @@
 struct ConvolutionUniforms {
-    uMatrix: array<vec3<f32>, 3>,
+    uMatrix: mat3x3<f32>,
     uTexelSize: vec2<f32>,
 };