fix: TiltShiftFilter coordinates are calculated incorrectly (#483)

* Bug: TiltShiftFilter coordinates are calculated incorrectly
Fixes #470

* fixing po2 popping

* port tiltshift fix to webgpu

* fix webgpu filter

* remove unused dimensions uniform

---------

Co-authored-by: Matt Karl <[email protected]>

Author: amoffat

src/tilt-shift/TiltShiftAxisFilter.ts

@@ -1,4 +1,4 @@
-import { Filter, GlProgram, GpuProgram, PointData, Texture, ViewSystem } from 'pixi.js';
+import { Filter, GlProgram, GpuProgram, PointData, ViewSystem } from 'pixi.js';
 import { vertex, wgslVertex } from '../defaults';
 import fragment from './tilt-shift.frag';
 import source from './tilt-shift.wgsl';
@@ -46,7 +46,6 @@ export class TiltShiftAxisFilter extends Filter
         uStart: PointData
         uEnd: PointData;
         uDelta: Float32Array;
-        uDimensions: Float32Array;
     };
 
     private _tiltAxis: TiltShiftAxisFilterOptions['axis'];
@@ -95,7 +94,6 @@ export class TiltShiftAxisFilter extends Filter
                     uStart: { value: options.start, type: 'vec2<f32>' },
                     uEnd: { value: options.end, type: 'vec2<f32>' },
                     uDelta: { value: new Float32Array([0, 0]), type: 'vec2<f32>' },
-                    uDimensions: { value: new Float32Array([width, height]), type: 'vec2<f32>' },
                 },
             },
         });
@@ -104,18 +102,6 @@ export class TiltShiftAxisFilter extends Filter
         this._tiltAxis = options.axis;
     }
 
-    /**
-     * Update the dimensions
-     * @ignore
-    */
-    public updateDimensions(input: Texture): void
-    {
-        const { uDimensions } = this.uniforms;
-
-        uDimensions[0] = input.frame.width;
-        uDimensions[1] = input.frame.height;
-    }
-
     /**
      * Updates the filter delta values.
      * @ignore

src/tilt-shift/TiltShiftFilter.ts

@@ -60,9 +60,6 @@ export class TiltShiftFilter extends TiltShiftAxisFilter
     {
         const renderTarget = TexturePool.getSameSizeTexture(input);
 
-        this.updateDimensions(input);
-        this._tiltShiftYFilter.updateDimensions(input);
-
         filterManager.applyFilter(this, input, renderTarget, true);
         filterManager.applyFilter(this._tiltShiftYFilter, renderTarget, output, clearMode);
 

src/tilt-shift/tilt-shift.frag

@@ -1,3 +1,4 @@
+precision highp float;
 in vec2 vTextureCoord;
 out vec4 finalColor;
 
@@ -6,7 +7,7 @@ uniform vec2 uBlur;
 uniform vec2 uStart;
 uniform vec2 uEnd;
 uniform vec2 uDelta;
-uniform vec2 uDimensions;
+uniform vec4 uInputSize;
 
 float random(vec3 scale, float seed)
 {
@@ -23,13 +24,13 @@ void main(void)
 
     float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
     vec2 normal = normalize(vec2(uStart.y - uEnd.y, uEnd.x - uStart.x));
-    float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * uDimensions - uStart, normal)) / gradientBlur) * blur;
+    float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * uInputSize.xy - uStart, normal)) / gradientBlur) * blur;
 
     for (float t = -30.0; t <= 30.0; t++)
     {
         float percent = (t + offset - 0.5) / 30.0;
         float weight = 1.0 - abs(percent);
-        vec4 sample = texture(uTexture, vTextureCoord + uDelta / uDimensions * percent * radius);
+        vec4 sample = texture(uTexture, vTextureCoord + uDelta / uInputSize.xy * percent * radius);
         sample.rgb *= sample.a;
         color += sample * weight;
         total += weight;

src/tilt-shift/tilt-shift.wgsl

@@ -3,9 +3,14 @@ struct TiltShiftUniforms {
   uStart: vec2<f32>,
   uEnd: vec2<f32>,
   uDelta: vec2<f32>,
-  uDimensions: vec2<f32>,
 };
 
+struct GlobalFilterUniforms {
+  uInputSize:vec4<f32>,
+};
+
+@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;
+
 @group(0) @binding(1) var uTexture: texture_2d<f32>; 
 @group(0) @binding(2) var uSampler: sampler;
 @group(1) @binding(0) var<uniform> tiltShiftUniforms : TiltShiftUniforms;
@@ -20,20 +25,19 @@ fn mainFragment(
   let uStart = tiltShiftUniforms.uStart;
   let uEnd = tiltShiftUniforms.uEnd;
   let uDelta = tiltShiftUniforms.uDelta;
-  let uDimensions = tiltShiftUniforms.uDimensions;
 
   var color: vec4<f32> = vec4<f32>(0.0);
   var total: f32 = 0.0;
 
   let offset: f32 = random(position, vec3<f32>(12.9898, 78.233, 151.7182), 0.0);
   let normal: vec2<f32> = normalize(vec2<f32>(uStart.y - uEnd.y, uEnd.x - uStart.x));
-  let radius: f32 = smoothstep(0.0, 1.0, abs(dot(uv * uDimensions - uStart, normal)) / uBlurGradient) * uBlur;
+  let radius: f32 = smoothstep(0.0, 1.0, abs(dot(uv * gfu.uInputSize.xy - uStart, normal)) / uBlurGradient) * uBlur;
 
   for (var t: f32 = -30.0; t <= 30.0; t += 1.0)
   {
     var percent: f32 = (t + offset - 0.5) / 30.0;
     var weight: f32 = 1.0 - abs(percent);
-    var sample: vec4<f32> = textureSample(uTexture, uSampler, uv + uDelta / uDimensions * percent * radius);
+    var sample: vec4<f32> = textureSample(uTexture, uSampler, uv + uDelta / gfu.uInputSize.xy * percent * radius);
     sample = vec4<f32>(sample.xyz * sample.a, sample.a); // multiply sample.rgb with sample.a
     color += sample * weight;
     total += weight;