Skip to content

Commit 78f81d2

Browse files
bigtimebuddybigtimebuddy
authored
fix: Remove window references from TiltShiftFilter (#469)
1 parent 57f4822 commit 78f81d2

File tree

5 files changed

+97
-87
lines changed

5 files changed

+97
-87
lines changed

‎examples/src/filters/tilt-shift.mjs

+15-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
export default function ()
22
{
3-
this.addFilter('TiltShiftFilter', function (folder)
4-
{
5-
folder.add(this, 'blur', 0, 200);
6-
folder.add(this, 'gradientBlur', 0, 1000);
3+
const app = this;
4+
const height = app.initHeight;
5+
const width = app.initWidth;
6+
7+
this.addFilter('TiltShiftFilter', {
8+
args: { start: { x: 0, y: height / 2 }, end: { x: width, y: height / 2 } },
9+
oncreate(folder)
10+
{
11+
folder.add(this, 'blur', 0, 200);
12+
folder.add(this, 'gradientBlur', 0, 1000);
13+
folder.add(this, 'startX', 0, width);
14+
folder.add(this, 'startY', 0, height);
15+
folder.add(this, 'endX', 0, width);
16+
folder.add(this, 'endY', 0, height);
17+
}
718
});
819
}

‎src/tilt-shift/TiltShiftAxisFilter.ts

+33-70
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Filter, GlProgram, GpuProgram, PointData } from 'pixi.js';
1+
import { Filter, GlProgram, GpuProgram, PointData, Texture, ViewSystem } from 'pixi.js';
22
import { vertex, wgslVertex } from '../defaults';
33
import fragment from './tilt-shift.frag';
44
import source from './tilt-shift.wgsl';
@@ -39,25 +39,30 @@ export class TiltShiftAxisFilter extends Filter
3939
blur: 100,
4040
/** The strength of the blur gradient */
4141
gradientBlur: 600,
42-
/** The position to start the effect at. */
43-
start: { x: 0, y: window.innerHeight / 2 },
44-
/** The position to end the effect at. */
45-
end: { x: 600, y: window.innerHeight / 2 },
4642
};
4743

4844
public uniforms: {
4945
uBlur: Float32Array;
5046
uStart: PointData
5147
uEnd: PointData;
5248
uDelta: Float32Array;
53-
uTexSize: Float32Array;
49+
uDimensions: Float32Array;
5450
};
5551

5652
private _tiltAxis: TiltShiftAxisFilterOptions['axis'];
5753

5854
constructor(options?: TiltShiftAxisFilterOptions)
5955
{
60-
options = { ...TiltShiftAxisFilter.DEFAULT_OPTIONS, ...options } as TiltShiftAxisFilterOptions;
56+
const { width, height } = ViewSystem.defaultOptions as { width: number, height: number };
57+
58+
options = {
59+
...TiltShiftAxisFilter.DEFAULT_OPTIONS,
60+
/** The position to start the effect at. */
61+
start: { x: 0, y: height / 2 },
62+
/** The position to end the effect at. */
63+
end: { x: width, y: height / 2 },
64+
...options,
65+
} as TiltShiftAxisFilterOptions;
6166

6267
const gpuProgram = GpuProgram.from({
6368
vertex: {
@@ -83,25 +88,39 @@ export class TiltShiftAxisFilter extends Filter
8388
tiltShiftUniforms: {
8489
uBlur: {
8590
value: new Float32Array([
86-
options.blur ?? 100,
87-
options.gradientBlur ?? 600
91+
options.blur as number,
92+
options.gradientBlur as number,
8893
]), type: 'vec2<f32>'
8994
},
9095
uStart: { value: options.start, type: 'vec2<f32>' },
9196
uEnd: { value: options.end, type: 'vec2<f32>' },
92-
uDelta: { value: new Float32Array([30, 30]), type: 'vec2<f32>' },
93-
uTexSize: { value: new Float32Array([window.innerWidth, window.innerHeight]), type: 'vec2<f32>' },
97+
uDelta: { value: new Float32Array([0, 0]), type: 'vec2<f32>' },
98+
uDimensions: { value: new Float32Array([width, height]), type: 'vec2<f32>' },
9499
},
95100
},
96101
});
97102

98103
this.uniforms = this.resources.tiltShiftUniforms.uniforms;
99104
this._tiltAxis = options.axis;
100-
this.updateDelta();
101105
}
102106

103-
/** Updates the filter delta values. */
104-
protected updateDelta(): void
107+
/**
108+
* Update the dimensions
109+
* @ignore
110+
*/
111+
public updateDimensions(input: Texture): void
112+
{
113+
const { uDimensions } = this.uniforms;
114+
115+
uDimensions[0] = input.frame.width;
116+
uDimensions[1] = input.frame.height;
117+
}
118+
119+
/**
120+
* Updates the filter delta values.
121+
* @ignore
122+
*/
123+
public updateDelta(): void
105124
{
106125
this.uniforms.uDelta[0] = 0;
107126
this.uniforms.uDelta[1] = 0;
@@ -120,60 +139,4 @@ export class TiltShiftAxisFilter extends Filter
120139
this.uniforms.uDelta[0] = !isVert ? dx / d : -dy / d;
121140
this.uniforms.uDelta[1] = !isVert ? dy / d : dx / d;
122141
}
123-
124-
// /** The strength of the blur. */
125-
// get blur(): number { return this.uniforms.uBlur[0]; }
126-
// set blur(value: number) { this.uniforms.uBlur[0] = value; }
127-
128-
// /** The strength of the gradient blur. */
129-
// get gradientBlur(): number { return this.uniforms.uBlur[1]; }
130-
// set gradientBlur(value: number) { this.uniforms.uBlur[1] = value; }
131-
132-
// /** The start position of the effect. */
133-
// get start(): PointData { return this.uniforms.uStart; }
134-
// set start(value: PointData)
135-
// {
136-
// this.uniforms.uStart = value;
137-
// this.updateDelta();
138-
// }
139-
140-
// /** The start position of the effect on the `x` axis. */
141-
// get startX(): number { return this.start.x; }
142-
// set startX(value: number)
143-
// {
144-
// this.start.x = value;
145-
// this.updateDelta();
146-
// }
147-
148-
// /** The start position of the effect on the `y` axis. */
149-
// get startY(): number { return this.startY; }
150-
// set startY(value: number)
151-
// {
152-
// this.start.y = value;
153-
// this.updateDelta();
154-
// }
155-
156-
// /** The end position of the effect. */
157-
// get end(): PointData { return this.uniforms.uEnd; }
158-
// set end(value: PointData)
159-
// {
160-
// this.uniforms.uEnd = value;
161-
// this.updateDelta();
162-
// }
163-
164-
// /** The end position of the effect on the `x` axis. */
165-
// get endX(): number { return this.end.x; }
166-
// set endX(value: number)
167-
// {
168-
// this.end.x = value;
169-
// this.updateDelta();
170-
// }
171-
172-
// /** The end position of the effect on the `y` axis. */
173-
// get endY(): number { return this.end.y; }
174-
// set endY(value: number)
175-
// {
176-
// this.end.y = value;
177-
// this.updateDelta();
178-
// }
179142
}

‎src/tilt-shift/TiltShiftFilter.ts

+42-6
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ export class TiltShiftFilter extends TiltShiftAxisFilter
4141
super({ ...options, axis: 'horizontal' });
4242
this._tiltShiftYFilter = new TiltShiftAxisFilter({ ...options, axis: 'vertical' });
4343

44+
this.updateDelta();
45+
4446
Object.assign(this, options);
4547
}
4648

@@ -58,12 +60,22 @@ export class TiltShiftFilter extends TiltShiftAxisFilter
5860
{
5961
const renderTarget = TexturePool.getSameSizeTexture(input);
6062

63+
this.updateDimensions(input);
64+
this._tiltShiftYFilter.updateDimensions(input);
65+
6166
filterManager.applyFilter(this, input, renderTarget, true);
6267
filterManager.applyFilter(this._tiltShiftYFilter, renderTarget, output, clearMode);
6368

6469
TexturePool.returnTexture(renderTarget);
6570
}
6671

72+
/** @ignore */
73+
public override updateDelta(): void
74+
{
75+
super.updateDelta();
76+
this._tiltShiftYFilter.updateDelta();
77+
}
78+
6779
/** The strength of the blur. */
6880
get blur(): number { return this.uniforms.uBlur[0]; }
6981
set blur(value: number) { this.uniforms.uBlur[0] = this._tiltShiftYFilter.uniforms.uBlur[0] = value; }
@@ -74,26 +86,50 @@ export class TiltShiftFilter extends TiltShiftAxisFilter
7486

7587
/** The position to start the effect at. */
7688
get start(): PointData { return this.uniforms.uStart; }
77-
set start(value: PointData) { this.uniforms.uStart = this._tiltShiftYFilter.uniforms.uStart = value; }
89+
set start(value: PointData)
90+
{
91+
this.uniforms.uStart = this._tiltShiftYFilter.uniforms.uStart = value;
92+
this.updateDelta();
93+
}
7894

7995
/** The position to start the effect at on the `x` axis. */
8096
get startX(): number { return this.start.x; }
81-
set startX(value: number) { this.start.x = value; }
97+
set startX(value: number)
98+
{
99+
this.start.x = value;
100+
this.updateDelta();
101+
}
82102

83103
/** The position to start the effect at on the `x` axis. */
84104
get startY(): number { return this.start.y; }
85-
set startY(value: number) { this.start.y = value; }
105+
set startY(value: number)
106+
{
107+
this.start.y = value;
108+
this.updateDelta();
109+
}
86110

87111
/** The position to end the effect at. */
88112
get end(): PointData { return this.uniforms.uEnd; }
89-
set end(value: PointData) { this.uniforms.uEnd = this._tiltShiftYFilter.uniforms.uEnd = value; }
113+
set end(value: PointData)
114+
{
115+
this.uniforms.uEnd = this._tiltShiftYFilter.uniforms.uEnd = value;
116+
this.updateDelta();
117+
}
90118

91119
/** The position to end the effect at on the `x` axis. */
92120
get endX(): number { return this.end.x; }
93-
set endX(value: number) { this.end.x = value; }
121+
set endX(value: number)
122+
{
123+
this.end.x = value;
124+
this.updateDelta();
125+
}
94126

95127
/** The position to end the effect at on the `y` axis. */
96128
get endY(): number { return this.end.y; }
97-
set endY(value: number) { this.end.y = value; }
129+
set endY(value: number)
130+
{
131+
this.end.y = value;
132+
this.updateDelta();
133+
}
98134
}
99135

‎src/tilt-shift/tilt-shift.frag

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ uniform vec2 uBlur;
66
uniform vec2 uStart;
77
uniform vec2 uEnd;
88
uniform vec2 uDelta;
9-
uniform vec2 uTexSize;
9+
uniform vec2 uDimensions;
1010

1111
float random(vec3 scale, float seed)
1212
{
@@ -23,13 +23,13 @@ void main(void)
2323

2424
float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
2525
vec2 normal = normalize(vec2(uStart.y - uEnd.y, uEnd.x - uStart.x));
26-
float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * uTexSize - uStart, normal)) / gradientBlur) * blur;
26+
float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * uDimensions - uStart, normal)) / gradientBlur) * blur;
2727

2828
for (float t = -30.0; t <= 30.0; t++)
2929
{
3030
float percent = (t + offset - 0.5) / 30.0;
3131
float weight = 1.0 - abs(percent);
32-
vec4 sample = texture(uTexture, vTextureCoord + uDelta / uTexSize * percent * radius);
32+
vec4 sample = texture(uTexture, vTextureCoord + uDelta / uDimensions * percent * radius);
3333
sample.rgb *= sample.a;
3434
color += sample * weight;
3535
total += weight;

‎src/tilt-shift/tilt-shift.wgsl

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ struct TiltShiftUniforms {
33
uStart: vec2<f32>,
44
uEnd: vec2<f32>,
55
uDelta: vec2<f32>,
6-
uTexSize: vec2<f32>,
6+
uDimensions: vec2<f32>,
77
};
88

99
@group(0) @binding(1) var uTexture: texture_2d<f32>;
@@ -20,20 +20,20 @@ fn mainFragment(
2020
let uStart = tiltShiftUniforms.uStart;
2121
let uEnd = tiltShiftUniforms.uEnd;
2222
let uDelta = tiltShiftUniforms.uDelta;
23-
let uTexSize = tiltShiftUniforms.uTexSize;
23+
let uDimensions = tiltShiftUniforms.uDimensions;
2424

2525
var color: vec4<f32> = vec4<f32>(0.0);
2626
var total: f32 = 0.0;
2727

2828
let offset: f32 = random(position, vec3<f32>(12.9898, 78.233, 151.7182), 0.0);
2929
let normal: vec2<f32> = normalize(vec2<f32>(uStart.y - uEnd.y, uEnd.x - uStart.x));
30-
let radius: f32 = smoothstep(0.0, 1.0, abs(dot(uv * uTexSize - uStart, normal)) / uBlurGradient) * uBlur;
30+
let radius: f32 = smoothstep(0.0, 1.0, abs(dot(uv * uDimensions - uStart, normal)) / uBlurGradient) * uBlur;
3131

3232
for (var t: f32 = -30.0; t <= 30.0; t += 1.0)
3333
{
3434
var percent: f32 = (t + offset - 0.5) / 30.0;
3535
var weight: f32 = 1.0 - abs(percent);
36-
var sample: vec4<f32> = textureSample(uTexture, uSampler, uv + uDelta / uTexSize * percent * radius);
36+
var sample: vec4<f32> = textureSample(uTexture, uSampler, uv + uDelta / uDimensions * percent * radius);
3737
sample = vec4<f32>(sample.xyz * sample.a, sample.a); // multiply sample.rgb with sample.a
3838
color += sample * weight;
3939
total += weight;

0 commit comments

Comments
 (0)