From 5df8d405cc4d52995ed855e788bff4d42c46e297 Mon Sep 17 00:00:00 2001 From: Andrew Moffat Date: Sun, 29 Dec 2024 21:34:49 -0800 Subject: [PATCH 1/5] Bug: TiltShiftFilter coordinates are calculated incorrectly Fixes #470 --- src/tilt-shift/tilt-shift.frag | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/tilt-shift/tilt-shift.frag b/src/tilt-shift/tilt-shift.frag index 549503cf..0e1208fd 100644 --- a/src/tilt-shift/tilt-shift.frag +++ b/src/tilt-shift/tilt-shift.frag @@ -7,6 +7,7 @@ uniform vec2 uStart; uniform vec2 uEnd; uniform vec2 uDelta; uniform vec2 uDimensions; +uniform highp vec4 uInputSize; float random(vec3 scale, float seed) { @@ -15,6 +16,7 @@ float random(vec3 scale, float seed) void main(void) { + vec2 adjustedStart = uStart * uDimensions / uInputSize.xy; vec4 color = vec4(0.0); float total = 0.0; @@ -23,7 +25,7 @@ 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 * uDimensions - adjustedStart, normal)) / gradientBlur) * blur; for (float t = -30.0; t <= 30.0; t++) { From 4479d33df93bf837ef30c65876417d9ff1c2dc0d Mon Sep 17 00:00:00 2001 From: Andrew Moffat Date: Mon, 13 Jan 2025 21:15:36 -0800 Subject: [PATCH 2/5] fixing po2 popping --- src/tilt-shift/tilt-shift.frag | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/tilt-shift/tilt-shift.frag b/src/tilt-shift/tilt-shift.frag index 0e1208fd..75615522 100644 --- a/src/tilt-shift/tilt-shift.frag +++ b/src/tilt-shift/tilt-shift.frag @@ -1,3 +1,4 @@ +precision highp float; in vec2 vTextureCoord; out vec4 finalColor; @@ -7,7 +8,7 @@ uniform vec2 uStart; uniform vec2 uEnd; uniform vec2 uDelta; uniform vec2 uDimensions; -uniform highp vec4 uInputSize; +uniform vec4 uInputSize; float random(vec3 scale, float seed) { @@ -16,7 +17,6 @@ float random(vec3 scale, float seed) void main(void) { - vec2 adjustedStart = uStart * uDimensions / uInputSize.xy; vec4 color = vec4(0.0); float total = 0.0; @@ -25,13 +25,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 - adjustedStart, 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; From a38526da12afb9172596438bd40909a9edb781de Mon Sep 17 00:00:00 2001 From: Andrew Moffat Date: Mon, 13 Jan 2025 21:17:57 -0800 Subject: [PATCH 3/5] port tiltshift fix to webgpu --- src/tilt-shift/tilt-shift.wgsl | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/tilt-shift/tilt-shift.wgsl b/src/tilt-shift/tilt-shift.wgsl index b6707a55..b404cb2a 100644 --- a/src/tilt-shift/tilt-shift.wgsl +++ b/src/tilt-shift/tilt-shift.wgsl @@ -4,6 +4,7 @@ struct TiltShiftUniforms { uEnd: vec2, uDelta: vec2, uDimensions: vec2, + uInputSize: vec4, }; @group(0) @binding(1) var uTexture: texture_2d; @@ -27,13 +28,13 @@ fn mainFragment( let offset: f32 = random(position, vec3(12.9898, 78.233, 151.7182), 0.0); let normal: vec2 = normalize(vec2(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 * 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 = textureSample(uTexture, uSampler, uv + uDelta / uDimensions * percent * radius); + var sample: vec4 = textureSample(uTexture, uSampler, uv + uDelta / uInputSize.xy * percent * radius); sample = vec4(sample.xyz * sample.a, sample.a); // multiply sample.rgb with sample.a color += sample * weight; total += weight; From d0c367a8395c5dcb1354d167eedd6c33ba12ba8b Mon Sep 17 00:00:00 2001 From: Matt Karl Date: Wed, 15 Jan 2025 18:55:49 -0500 Subject: [PATCH 4/5] fix webgpu filter --- src/tilt-shift/tilt-shift.wgsl | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/tilt-shift/tilt-shift.wgsl b/src/tilt-shift/tilt-shift.wgsl index b404cb2a..4c182fb9 100644 --- a/src/tilt-shift/tilt-shift.wgsl +++ b/src/tilt-shift/tilt-shift.wgsl @@ -4,9 +4,14 @@ struct TiltShiftUniforms { uEnd: vec2, uDelta: vec2, uDimensions: vec2, - uInputSize: vec4, }; +struct GlobalFilterUniforms { + uInputSize:vec4, +}; + +@group(0) @binding(0) var gfu: GlobalFilterUniforms; + @group(0) @binding(1) var uTexture: texture_2d; @group(0) @binding(2) var uSampler: sampler; @group(1) @binding(0) var tiltShiftUniforms : TiltShiftUniforms; @@ -28,13 +33,13 @@ fn mainFragment( let offset: f32 = random(position, vec3(12.9898, 78.233, 151.7182), 0.0); let normal: vec2 = normalize(vec2(uStart.y - uEnd.y, uEnd.x - uStart.x)); - let radius: f32 = smoothstep(0.0, 1.0, abs(dot(uv * uInputSize.xy - 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 = textureSample(uTexture, uSampler, uv + uDelta / uInputSize.xy * percent * radius); + var sample: vec4 = textureSample(uTexture, uSampler, uv + uDelta / gfu.uInputSize.xy * percent * radius); sample = vec4(sample.xyz * sample.a, sample.a); // multiply sample.rgb with sample.a color += sample * weight; total += weight; From 9f7af12bf9d62733d4dcde318503de2b71243e7f Mon Sep 17 00:00:00 2001 From: Matt Karl Date: Wed, 15 Jan 2025 19:01:26 -0500 Subject: [PATCH 5/5] remove unused dimensions uniform --- src/tilt-shift/TiltShiftAxisFilter.ts | 16 +--------------- src/tilt-shift/TiltShiftFilter.ts | 3 --- src/tilt-shift/tilt-shift.frag | 1 - src/tilt-shift/tilt-shift.wgsl | 2 -- 4 files changed, 1 insertion(+), 21 deletions(-) diff --git a/src/tilt-shift/TiltShiftAxisFilter.ts b/src/tilt-shift/TiltShiftAxisFilter.ts index 7b149847..ac7fd850 100644 --- a/src/tilt-shift/TiltShiftAxisFilter.ts +++ b/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' }, uEnd: { value: options.end, type: 'vec2' }, uDelta: { value: new Float32Array([0, 0]), type: 'vec2' }, - uDimensions: { value: new Float32Array([width, height]), type: 'vec2' }, }, }, }); @@ -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 diff --git a/src/tilt-shift/TiltShiftFilter.ts b/src/tilt-shift/TiltShiftFilter.ts index b55ddfe7..26502c22 100644 --- a/src/tilt-shift/TiltShiftFilter.ts +++ b/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); diff --git a/src/tilt-shift/tilt-shift.frag b/src/tilt-shift/tilt-shift.frag index 75615522..0767fb53 100644 --- a/src/tilt-shift/tilt-shift.frag +++ b/src/tilt-shift/tilt-shift.frag @@ -7,7 +7,6 @@ uniform vec2 uBlur; uniform vec2 uStart; uniform vec2 uEnd; uniform vec2 uDelta; -uniform vec2 uDimensions; uniform vec4 uInputSize; float random(vec3 scale, float seed) diff --git a/src/tilt-shift/tilt-shift.wgsl b/src/tilt-shift/tilt-shift.wgsl index 4c182fb9..d1ceda58 100644 --- a/src/tilt-shift/tilt-shift.wgsl +++ b/src/tilt-shift/tilt-shift.wgsl @@ -3,7 +3,6 @@ struct TiltShiftUniforms { uStart: vec2, uEnd: vec2, uDelta: vec2, - uDimensions: vec2, }; struct GlobalFilterUniforms { @@ -26,7 +25,6 @@ fn mainFragment( let uStart = tiltShiftUniforms.uStart; let uEnd = tiltShiftUniforms.uEnd; let uDelta = tiltShiftUniforms.uDelta; - let uDimensions = tiltShiftUniforms.uDimensions; var color: vec4 = vec4(0.0); var total: f32 = 0.0;