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 549503cf..0767fb53 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; @@ -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; diff --git a/src/tilt-shift/tilt-shift.wgsl b/src/tilt-shift/tilt-shift.wgsl index b6707a55..d1ceda58 100644 --- a/src/tilt-shift/tilt-shift.wgsl +++ b/src/tilt-shift/tilt-shift.wgsl @@ -3,9 +3,14 @@ struct TiltShiftUniforms { uStart: vec2, uEnd: vec2, uDelta: vec2, - uDimensions: vec2, }; +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; @@ -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 = vec4(0.0); var total: f32 = 0.0; 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 * 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 / uDimensions * 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;