@vivi2d/web 0.1.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +160 -0
- package/README.md +201 -0
- package/dist/CanvasPool-CASccukD.js +48 -0
- package/dist/CanvasPool-CASccukD.js.map +1 -0
- package/dist/CanvasRenderer-BWDoXN0L.js +5750 -0
- package/dist/CanvasRenderer-BWDoXN0L.js.map +1 -0
- package/dist/GpuStencilModesToPixi-c2lsBIrd.js +221 -0
- package/dist/GpuStencilModesToPixi-c2lsBIrd.js.map +1 -0
- package/dist/RenderTargetSystem-BCowAg_f.js +3493 -0
- package/dist/RenderTargetSystem-BCowAg_f.js.map +1 -0
- package/dist/WebGLRenderer-KKZauisz.js +2236 -0
- package/dist/WebGLRenderer-KKZauisz.js.map +1 -0
- package/dist/WebGPURenderer-xmqgPtcF.js +1632 -0
- package/dist/WebGPURenderer-xmqgPtcF.js.map +1 -0
- package/dist/auto-register.d.ts +1 -0
- package/dist/auto-register.js +3 -0
- package/dist/auto-register.js.map +1 -0
- package/dist/browserAll-DQ0eWekj.js +1872 -0
- package/dist/browserAll-DQ0eWekj.js.map +1 -0
- package/dist/canvasUtils-BSaR9Fot.js +210 -0
- package/dist/canvasUtils-BSaR9Fot.js.map +1 -0
- package/dist/errors.d.ts +12 -0
- package/dist/getTextureBatchBindGroup-BYhXfZM4.js +22 -0
- package/dist/getTextureBatchBindGroup-BYhXfZM4.js.map +1 -0
- package/dist/index-CW8mx7yF.js +18805 -0
- package/dist/index-CW8mx7yF.js.map +1 -0
- package/dist/index.d.ts +7 -0
- package/dist/model-loader.d.ts +42 -0
- package/dist/player.d.ts +85 -0
- package/dist/vivi-model-element.d.ts +65 -0
- package/dist/vivi2d.es.js +11 -0
- package/dist/vivi2d.es.js.map +1 -0
- package/dist/vivi2d.umd.js +1020 -0
- package/dist/vivi2d.umd.js.map +1 -0
- package/dist/webworkerAll-oTmmI2Qm.js +694 -0
- package/dist/webworkerAll-oTmmI2Qm.js.map +1 -0
- package/package.json +56 -0
|
@@ -0,0 +1,694 @@
|
|
|
1
|
+
import { M as P, b as y, H as _, i as b, F as O, p as M, k as A, V as U, a as E, T as v, G as z, u as Y, ao as V, a6 as R } from "./index-CW8mx7yF.js";
|
|
2
|
+
import { a as X } from "./canvasUtils-BSaR9Fot.js";
|
|
3
|
+
import { C as q } from "./CanvasPool-CASccukD.js";
|
|
4
|
+
const S = new P();
|
|
5
|
+
function G(d, e) {
|
|
6
|
+
e.clear();
|
|
7
|
+
const t = e.matrix;
|
|
8
|
+
for (let r = 0; r < d.length; r++) {
|
|
9
|
+
const i = d[r];
|
|
10
|
+
if (i.globalDisplayStatus < 7)
|
|
11
|
+
continue;
|
|
12
|
+
const s = i.renderGroup ?? i.parentRenderGroup;
|
|
13
|
+
s != null && s.isCachedAsTexture ? e.matrix = S.copyFrom(s.textureOffsetInverseTransform).append(i.worldTransform) : s != null && s._parentCacheAsTextureRenderGroup ? e.matrix = S.copyFrom(s._parentCacheAsTextureRenderGroup.inverseWorldTransform).append(i.groupTransform) : e.matrix = i.worldTransform, e.addBounds(i.bounds);
|
|
14
|
+
}
|
|
15
|
+
return e.matrix = t, e;
|
|
16
|
+
}
|
|
17
|
+
const L = new y();
|
|
18
|
+
function W(d, e, t, r, i = !1) {
|
|
19
|
+
const s = L;
|
|
20
|
+
s.minX = 0, s.minY = 0, s.maxX = d.width / r | 0, s.maxY = d.height / r | 0;
|
|
21
|
+
const n = _.getOptimalTexture(
|
|
22
|
+
s.width,
|
|
23
|
+
s.height,
|
|
24
|
+
r,
|
|
25
|
+
!1,
|
|
26
|
+
i
|
|
27
|
+
);
|
|
28
|
+
return n.source.uploadMethodId = "image", n.source.resource = d, n.source.alphaMode = "premultiply-alpha-on-upload", n.frame.width = e / r, n.frame.height = t / r, n.source.emit("update", n.source), n.updateUvs(), n;
|
|
29
|
+
}
|
|
30
|
+
function w(d) {
|
|
31
|
+
return typeof d.getCanvasFilterString == "function";
|
|
32
|
+
}
|
|
33
|
+
class j {
|
|
34
|
+
constructor() {
|
|
35
|
+
this.skip = !1, this.useClip = !1, this.filters = null, this.container = null, this.bounds = new y(), this.cssFilterString = "";
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
class C {
|
|
39
|
+
/**
|
|
40
|
+
* @param renderer - The Canvas renderer
|
|
41
|
+
* @param renderer.canvasContext
|
|
42
|
+
* @param renderer.canvasContext.activeContext
|
|
43
|
+
* @param renderer.canvasContext.activeResolution
|
|
44
|
+
*/
|
|
45
|
+
constructor(e) {
|
|
46
|
+
this._filterStack = [], this._filterStackIndex = 0, this._savedStates = [], this._alphaMultiplier = 1, this._warnedFilterTypes = /* @__PURE__ */ new Set(), this.renderer = e;
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* Push a filter instruction onto the stack.
|
|
50
|
+
* Called when entering a filtered container.
|
|
51
|
+
* @param instruction - The filter instruction from FilterPipe
|
|
52
|
+
*/
|
|
53
|
+
push(e) {
|
|
54
|
+
const t = this._pushFilterFrame(), r = e.filterEffect.filters;
|
|
55
|
+
if (t.skip = !1, t.useClip = !1, t.filters = r, t.container = e.container, t.cssFilterString = "", r.every((o) => !o.enabled)) {
|
|
56
|
+
t.skip = !0;
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
const i = [], s = 1;
|
|
60
|
+
for (const o of r) {
|
|
61
|
+
if (!o.enabled) continue;
|
|
62
|
+
if (!w(o)) {
|
|
63
|
+
this._warnUnsupportedFilter(o);
|
|
64
|
+
continue;
|
|
65
|
+
}
|
|
66
|
+
const l = o.getCanvasFilterString();
|
|
67
|
+
if (l === null) {
|
|
68
|
+
this._warnUnsupportedFilter(o);
|
|
69
|
+
continue;
|
|
70
|
+
}
|
|
71
|
+
l && i.push(l);
|
|
72
|
+
}
|
|
73
|
+
if (i.length === 0 && s === 1) {
|
|
74
|
+
t.skip = !0;
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
t.cssFilterString = i.join(" "), this._calculateFilterArea(e, t.bounds), t.useClip = !!e.filterEffect.filterArea;
|
|
78
|
+
const n = this.renderer.canvasContext.activeContext, a = n.filter || "none";
|
|
79
|
+
if (this._savedStates.push({ filter: a, alphaMultiplier: this._alphaMultiplier }), t.useClip && Number.isFinite(t.bounds.width) && Number.isFinite(t.bounds.height) && t.bounds.width > 0 && t.bounds.height > 0) {
|
|
80
|
+
const o = this.renderer.canvasContext.activeResolution || 1;
|
|
81
|
+
n.save(), n.setTransform(1, 0, 0, 1, 0, 0), n.beginPath(), n.rect(
|
|
82
|
+
t.bounds.x * o,
|
|
83
|
+
t.bounds.y * o,
|
|
84
|
+
t.bounds.width * o,
|
|
85
|
+
t.bounds.height * o
|
|
86
|
+
), n.clip();
|
|
87
|
+
} else
|
|
88
|
+
t.useClip = !1;
|
|
89
|
+
t.cssFilterString && (n.filter = a !== "none" ? `${a} ${t.cssFilterString}` : t.cssFilterString);
|
|
90
|
+
}
|
|
91
|
+
/** Pop a filter from the stack. Called when exiting a filtered container. */
|
|
92
|
+
pop() {
|
|
93
|
+
const e = this._popFilterFrame();
|
|
94
|
+
if (e.skip)
|
|
95
|
+
return;
|
|
96
|
+
const t = this._savedStates.pop();
|
|
97
|
+
if (!t)
|
|
98
|
+
return;
|
|
99
|
+
const r = this.renderer.canvasContext.activeContext;
|
|
100
|
+
e.useClip ? r.restore() : r.filter = t.filter, this._alphaMultiplier = t.alphaMultiplier;
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* Applies supported filters to a texture and returns a new texture.
|
|
104
|
+
* Unsupported filters are skipped with a warn-once message.
|
|
105
|
+
* @param params - The parameters for applying filters.
|
|
106
|
+
* @param params.texture
|
|
107
|
+
* @param params.filters
|
|
108
|
+
* @returns The resulting texture after filters are applied.
|
|
109
|
+
*/
|
|
110
|
+
generateFilteredTexture({ texture: e, filters: t }) {
|
|
111
|
+
if (!(t != null && t.length) || t.every((h) => !h.enabled))
|
|
112
|
+
return e;
|
|
113
|
+
const r = [], i = 1;
|
|
114
|
+
for (const h of t) {
|
|
115
|
+
if (!h.enabled) continue;
|
|
116
|
+
if (!w(h)) {
|
|
117
|
+
this._warnUnsupportedFilter(h);
|
|
118
|
+
continue;
|
|
119
|
+
}
|
|
120
|
+
const T = h.getCanvasFilterString();
|
|
121
|
+
if (T === null) {
|
|
122
|
+
this._warnUnsupportedFilter(h);
|
|
123
|
+
continue;
|
|
124
|
+
}
|
|
125
|
+
T && r.push(T);
|
|
126
|
+
}
|
|
127
|
+
if (r.length === 0 && i === 1)
|
|
128
|
+
return e;
|
|
129
|
+
const s = X.getCanvasSource(e);
|
|
130
|
+
if (!s)
|
|
131
|
+
return e;
|
|
132
|
+
const n = e.frame, a = e.source._resolution ?? e.source.resolution ?? 1, o = n.width, l = n.height, f = q.getOptimalCanvasAndContext(o, l, a), { canvas: c, context: u } = f;
|
|
133
|
+
u.setTransform(1, 0, 0, 1, 0, 0), u.clearRect(0, 0, c.width, c.height), r.length && (u.filter = r.join(" "));
|
|
134
|
+
const p = n.x * a, m = n.y * a, x = o * a, F = l * a;
|
|
135
|
+
return u.drawImage(
|
|
136
|
+
s,
|
|
137
|
+
p,
|
|
138
|
+
m,
|
|
139
|
+
x,
|
|
140
|
+
F,
|
|
141
|
+
0,
|
|
142
|
+
0,
|
|
143
|
+
x,
|
|
144
|
+
F
|
|
145
|
+
), u.filter = "none", u.globalAlpha = 1, W(c, o, l, a);
|
|
146
|
+
}
|
|
147
|
+
/**
|
|
148
|
+
* Calculate the filter area bounds.
|
|
149
|
+
* @param instruction - Filter instruction
|
|
150
|
+
* @param bounds - Bounds object to populate
|
|
151
|
+
*/
|
|
152
|
+
_calculateFilterArea(e, t) {
|
|
153
|
+
if (e.renderables ? G(e.renderables, t) : e.filterEffect.filterArea ? (t.clear(), t.addRect(e.filterEffect.filterArea), t.applyMatrix(e.container.worldTransform)) : e.container.getFastGlobalBounds(!0, t), e.container) {
|
|
154
|
+
const r = e.container.renderGroup || e.container.parentRenderGroup, i = r == null ? void 0 : r.cacheToLocalTransform;
|
|
155
|
+
i && t.applyMatrix(i);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
_warnUnsupportedFilter(e) {
|
|
159
|
+
var r;
|
|
160
|
+
const t = ((r = e == null ? void 0 : e.constructor) == null ? void 0 : r.name) || "Filter";
|
|
161
|
+
this._warnedFilterTypes.has(t) || (this._warnedFilterTypes.add(t), console.warn(
|
|
162
|
+
`CanvasRenderer: filter "${t}" is not supported in Canvas2D and will be skipped.`
|
|
163
|
+
));
|
|
164
|
+
}
|
|
165
|
+
get alphaMultiplier() {
|
|
166
|
+
return this._alphaMultiplier;
|
|
167
|
+
}
|
|
168
|
+
_pushFilterFrame() {
|
|
169
|
+
let e = this._filterStack[this._filterStackIndex];
|
|
170
|
+
return e || (e = this._filterStack[this._filterStackIndex] = new j()), this._filterStackIndex++, e;
|
|
171
|
+
}
|
|
172
|
+
_popFilterFrame() {
|
|
173
|
+
return this._filterStackIndex <= 0 ? this._filterStack[0] : (this._filterStackIndex--, this._filterStack[this._filterStackIndex]);
|
|
174
|
+
}
|
|
175
|
+
/** Destroys the system */
|
|
176
|
+
destroy() {
|
|
177
|
+
this._filterStack = null, this._savedStates = null, this._warnedFilterTypes = null, this._alphaMultiplier = 1;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
C.extension = {
|
|
181
|
+
type: [b.CanvasSystem],
|
|
182
|
+
name: "filter"
|
|
183
|
+
};
|
|
184
|
+
var N = `in vec2 aPosition;
|
|
185
|
+
out vec2 vTextureCoord;
|
|
186
|
+
|
|
187
|
+
uniform vec4 uInputSize;
|
|
188
|
+
uniform vec4 uOutputFrame;
|
|
189
|
+
uniform vec4 uOutputTexture;
|
|
190
|
+
|
|
191
|
+
vec4 filterVertexPosition( void )
|
|
192
|
+
{
|
|
193
|
+
vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;
|
|
194
|
+
|
|
195
|
+
position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;
|
|
196
|
+
position.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;
|
|
197
|
+
|
|
198
|
+
return vec4(position, 0.0, 1.0);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
vec2 filterTextureCoord( void )
|
|
202
|
+
{
|
|
203
|
+
return aPosition * (uOutputFrame.zw * uInputSize.zw);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
void main(void)
|
|
207
|
+
{
|
|
208
|
+
gl_Position = filterVertexPosition();
|
|
209
|
+
vTextureCoord = filterTextureCoord();
|
|
210
|
+
}
|
|
211
|
+
`, $ = `in vec2 vTextureCoord;
|
|
212
|
+
out vec4 finalColor;
|
|
213
|
+
uniform sampler2D uTexture;
|
|
214
|
+
void main() {
|
|
215
|
+
finalColor = texture(uTexture, vTextureCoord);
|
|
216
|
+
}
|
|
217
|
+
`, k = `struct GlobalFilterUniforms {
|
|
218
|
+
uInputSize: vec4<f32>,
|
|
219
|
+
uInputPixel: vec4<f32>,
|
|
220
|
+
uInputClamp: vec4<f32>,
|
|
221
|
+
uOutputFrame: vec4<f32>,
|
|
222
|
+
uGlobalFrame: vec4<f32>,
|
|
223
|
+
uOutputTexture: vec4<f32>,
|
|
224
|
+
};
|
|
225
|
+
|
|
226
|
+
@group(0) @binding(0) var <uniform> gfu: GlobalFilterUniforms;
|
|
227
|
+
@group(0) @binding(1) var uTexture: texture_2d<f32>;
|
|
228
|
+
@group(0) @binding(2) var uSampler: sampler;
|
|
229
|
+
|
|
230
|
+
struct VSOutput {
|
|
231
|
+
@builtin(position) position: vec4<f32>,
|
|
232
|
+
@location(0) uv: vec2<f32>
|
|
233
|
+
};
|
|
234
|
+
|
|
235
|
+
fn filterVertexPosition(aPosition: vec2<f32>) -> vec4<f32>
|
|
236
|
+
{
|
|
237
|
+
var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;
|
|
238
|
+
|
|
239
|
+
position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;
|
|
240
|
+
position.y = position.y * (2.0 * gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;
|
|
241
|
+
|
|
242
|
+
return vec4(position, 0.0, 1.0);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
fn filterTextureCoord(aPosition: vec2<f32>) -> vec2<f32>
|
|
246
|
+
{
|
|
247
|
+
return aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
@vertex
|
|
251
|
+
fn mainVertex(
|
|
252
|
+
@location(0) aPosition: vec2<f32>,
|
|
253
|
+
) -> VSOutput {
|
|
254
|
+
return VSOutput(
|
|
255
|
+
filterVertexPosition(aPosition),
|
|
256
|
+
filterTextureCoord(aPosition)
|
|
257
|
+
);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
@fragment
|
|
261
|
+
fn mainFragment(
|
|
262
|
+
@location(0) uv: vec2<f32>,
|
|
263
|
+
) -> @location(0) vec4<f32> {
|
|
264
|
+
return textureSample(uTexture, uSampler, uv);
|
|
265
|
+
}
|
|
266
|
+
`;
|
|
267
|
+
class H extends O {
|
|
268
|
+
constructor() {
|
|
269
|
+
const e = M.from({
|
|
270
|
+
vertex: { source: k, entryPoint: "mainVertex" },
|
|
271
|
+
fragment: { source: k, entryPoint: "mainFragment" },
|
|
272
|
+
name: "passthrough-filter"
|
|
273
|
+
}), t = A.from({
|
|
274
|
+
vertex: N,
|
|
275
|
+
fragment: $,
|
|
276
|
+
name: "passthrough-filter"
|
|
277
|
+
});
|
|
278
|
+
super({
|
|
279
|
+
gpuProgram: e,
|
|
280
|
+
glProgram: t
|
|
281
|
+
});
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
class I {
|
|
285
|
+
constructor(e) {
|
|
286
|
+
this._renderer = e;
|
|
287
|
+
}
|
|
288
|
+
push(e, t, r) {
|
|
289
|
+
this._renderer.renderPipes.batch.break(r), r.add({
|
|
290
|
+
renderPipeId: "filter",
|
|
291
|
+
canBundle: !1,
|
|
292
|
+
action: "pushFilter",
|
|
293
|
+
container: t,
|
|
294
|
+
filterEffect: e
|
|
295
|
+
});
|
|
296
|
+
}
|
|
297
|
+
pop(e, t, r) {
|
|
298
|
+
this._renderer.renderPipes.batch.break(r), r.add({
|
|
299
|
+
renderPipeId: "filter",
|
|
300
|
+
action: "popFilter",
|
|
301
|
+
canBundle: !1
|
|
302
|
+
});
|
|
303
|
+
}
|
|
304
|
+
execute(e) {
|
|
305
|
+
e.action === "pushFilter" ? this._renderer.filter.push(e) : e.action === "popFilter" && this._renderer.filter.pop();
|
|
306
|
+
}
|
|
307
|
+
destroy() {
|
|
308
|
+
this._renderer = null;
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
I.extension = {
|
|
312
|
+
type: [
|
|
313
|
+
b.WebGLPipes,
|
|
314
|
+
b.WebGPUPipes,
|
|
315
|
+
b.CanvasPipes
|
|
316
|
+
],
|
|
317
|
+
name: "filter"
|
|
318
|
+
};
|
|
319
|
+
const J = new z({
|
|
320
|
+
attributes: {
|
|
321
|
+
aPosition: {
|
|
322
|
+
buffer: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
|
|
323
|
+
format: "float32x2",
|
|
324
|
+
stride: 8,
|
|
325
|
+
offset: 0
|
|
326
|
+
}
|
|
327
|
+
},
|
|
328
|
+
indexBuffer: new Uint32Array([0, 1, 2, 0, 2, 3])
|
|
329
|
+
});
|
|
330
|
+
class K {
|
|
331
|
+
constructor() {
|
|
332
|
+
this.skip = !1, this.inputTexture = null, this.backTexture = null, this.filters = null, this.bounds = new y(), this.container = null, this.blendRequired = !1, this.outputRenderSurface = null, this.globalFrame = { x: 0, y: 0, width: 0, height: 0 }, this.firstEnabledIndex = -1, this.lastEnabledIndex = -1;
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
class B {
|
|
336
|
+
constructor(e) {
|
|
337
|
+
this._filterStackIndex = 0, this._filterStack = [], this._filterGlobalUniforms = new U({
|
|
338
|
+
uInputSize: { value: new Float32Array(4), type: "vec4<f32>" },
|
|
339
|
+
uInputPixel: { value: new Float32Array(4), type: "vec4<f32>" },
|
|
340
|
+
uInputClamp: { value: new Float32Array(4), type: "vec4<f32>" },
|
|
341
|
+
uOutputFrame: { value: new Float32Array(4), type: "vec4<f32>" },
|
|
342
|
+
uGlobalFrame: { value: new Float32Array(4), type: "vec4<f32>" },
|
|
343
|
+
uOutputTexture: { value: new Float32Array(4), type: "vec4<f32>" }
|
|
344
|
+
}), this._globalFilterBindGroup = new E({}), this.renderer = e;
|
|
345
|
+
}
|
|
346
|
+
/**
|
|
347
|
+
* The back texture of the currently active filter. Requires the filter to have `blendRequired` set to true.
|
|
348
|
+
* @readonly
|
|
349
|
+
*/
|
|
350
|
+
get activeBackTexture() {
|
|
351
|
+
var e;
|
|
352
|
+
return (e = this._activeFilterData) == null ? void 0 : e.backTexture;
|
|
353
|
+
}
|
|
354
|
+
/**
|
|
355
|
+
* Pushes a filter instruction onto the filter stack.
|
|
356
|
+
* @param instruction - The instruction containing the filter effect and container.
|
|
357
|
+
* @internal
|
|
358
|
+
*/
|
|
359
|
+
push(e) {
|
|
360
|
+
const t = this.renderer, r = e.filterEffect.filters, i = this._pushFilterData();
|
|
361
|
+
i.skip = !1, i.filters = r, i.container = e.container, i.outputRenderSurface = t.renderTarget.renderSurface;
|
|
362
|
+
const s = t.renderTarget.renderTarget.colorTexture.source, n = s.resolution, a = s.antialias;
|
|
363
|
+
if (r.every((p) => !p.enabled)) {
|
|
364
|
+
i.skip = !0;
|
|
365
|
+
return;
|
|
366
|
+
}
|
|
367
|
+
const o = i.bounds;
|
|
368
|
+
if (this._calculateFilterArea(e, o), this._calculateFilterBounds(i, t.renderTarget.rootViewPort, a, n, 1), i.skip)
|
|
369
|
+
return;
|
|
370
|
+
const l = this._getPreviousFilterData(), f = this._findFilterResolution(n);
|
|
371
|
+
let c = 0, u = 0;
|
|
372
|
+
l && (c = l.bounds.minX, u = l.bounds.minY), this._calculateGlobalFrame(
|
|
373
|
+
i,
|
|
374
|
+
c,
|
|
375
|
+
u,
|
|
376
|
+
f,
|
|
377
|
+
s.width,
|
|
378
|
+
s.height
|
|
379
|
+
), this._setupFilterTextures(i, o, t, l);
|
|
380
|
+
}
|
|
381
|
+
/**
|
|
382
|
+
* Applies filters to a texture.
|
|
383
|
+
*
|
|
384
|
+
* This method takes a texture and a list of filters, applies the filters to the texture,
|
|
385
|
+
* and returns the resulting texture.
|
|
386
|
+
* @param {object} params - The parameters for applying filters.
|
|
387
|
+
* @param {Texture} params.texture - The texture to apply filters to.
|
|
388
|
+
* @param {Filter[]} params.filters - The filters to apply.
|
|
389
|
+
* @returns {Texture} The resulting texture after all filters have been applied.
|
|
390
|
+
* @example
|
|
391
|
+
*
|
|
392
|
+
* ```ts
|
|
393
|
+
* // Create a texture and a list of filters
|
|
394
|
+
* const texture = new Texture(...);
|
|
395
|
+
* const filters = [new BlurFilter(), new ColorMatrixFilter()];
|
|
396
|
+
*
|
|
397
|
+
* // Apply the filters to the texture
|
|
398
|
+
* const resultTexture = filterSystem.applyToTexture({ texture, filters });
|
|
399
|
+
*
|
|
400
|
+
* // Use the resulting texture
|
|
401
|
+
* sprite.texture = resultTexture;
|
|
402
|
+
* ```
|
|
403
|
+
*
|
|
404
|
+
* Key Points:
|
|
405
|
+
* 1. padding is not currently supported here - so clipping may occur with filters that use padding.
|
|
406
|
+
* 2. If all filters are disabled or skipped, the original texture is returned.
|
|
407
|
+
*/
|
|
408
|
+
generateFilteredTexture({ texture: e, filters: t }) {
|
|
409
|
+
const r = this._pushFilterData();
|
|
410
|
+
this._activeFilterData = r, r.skip = !1, r.filters = t;
|
|
411
|
+
const i = e.source, s = i.resolution, n = i.antialias;
|
|
412
|
+
if (t.every((p) => !p.enabled))
|
|
413
|
+
return r.skip = !0, e;
|
|
414
|
+
const a = r.bounds;
|
|
415
|
+
if (a.addRect(e.frame), this._calculateFilterBounds(r, a.rectangle, n, s, 0), r.skip)
|
|
416
|
+
return e;
|
|
417
|
+
const o = s;
|
|
418
|
+
this._calculateGlobalFrame(
|
|
419
|
+
r,
|
|
420
|
+
0,
|
|
421
|
+
0,
|
|
422
|
+
o,
|
|
423
|
+
i.width,
|
|
424
|
+
i.height
|
|
425
|
+
), r.outputRenderSurface = _.getOptimalTexture(
|
|
426
|
+
a.width,
|
|
427
|
+
a.height,
|
|
428
|
+
r.resolution,
|
|
429
|
+
r.antialias
|
|
430
|
+
), r.backTexture = v.EMPTY, r.inputTexture = e, this.renderer.renderTarget.finishRenderPass(), this._applyFiltersToTexture(r, !0);
|
|
431
|
+
const u = r.outputRenderSurface;
|
|
432
|
+
return u.source.alphaMode = "premultiplied-alpha", u;
|
|
433
|
+
}
|
|
434
|
+
/** @internal */
|
|
435
|
+
pop() {
|
|
436
|
+
const e = this.renderer, t = this._popFilterData();
|
|
437
|
+
t.skip || (e.globalUniforms.pop(), e.renderTarget.finishRenderPass(), this._activeFilterData = t, this._applyFiltersToTexture(t, !1), t.blendRequired && _.returnTexture(t.backTexture), _.returnTexture(t.inputTexture));
|
|
438
|
+
}
|
|
439
|
+
/**
|
|
440
|
+
* Copies the last render surface to a texture.
|
|
441
|
+
* @param lastRenderSurface - The last render surface to copy from.
|
|
442
|
+
* @param bounds - The bounds of the area to copy.
|
|
443
|
+
* @param previousBounds - The previous bounds to use for offsetting the copy.
|
|
444
|
+
*/
|
|
445
|
+
getBackTexture(e, t, r) {
|
|
446
|
+
const i = e.colorTexture.source._resolution, s = _.getOptimalTexture(
|
|
447
|
+
t.width,
|
|
448
|
+
t.height,
|
|
449
|
+
i,
|
|
450
|
+
!1
|
|
451
|
+
);
|
|
452
|
+
let n = t.minX, a = t.minY;
|
|
453
|
+
r && (n -= r.minX, a -= r.minY), n = Math.floor(n * i), a = Math.floor(a * i);
|
|
454
|
+
const o = Math.ceil(t.width * i), l = Math.ceil(t.height * i);
|
|
455
|
+
return this.renderer.renderTarget.copyToTexture(
|
|
456
|
+
e,
|
|
457
|
+
s,
|
|
458
|
+
{ x: n, y: a },
|
|
459
|
+
{ width: o, height: l },
|
|
460
|
+
{ x: 0, y: 0 }
|
|
461
|
+
), s;
|
|
462
|
+
}
|
|
463
|
+
/**
|
|
464
|
+
* Applies a filter to a texture.
|
|
465
|
+
* @param filter - The filter to apply.
|
|
466
|
+
* @param input - The input texture.
|
|
467
|
+
* @param output - The output render surface.
|
|
468
|
+
* @param clear - Whether to clear the output surface before applying the filter.
|
|
469
|
+
*/
|
|
470
|
+
applyFilter(e, t, r, i) {
|
|
471
|
+
const s = this.renderer, n = this._activeFilterData, o = n.outputRenderSurface === r, l = s.renderTarget.rootRenderTarget.colorTexture.source._resolution, f = this._findFilterResolution(l);
|
|
472
|
+
let c = 0, u = 0;
|
|
473
|
+
if (o) {
|
|
474
|
+
const m = this._findPreviousFilterOffset();
|
|
475
|
+
c = m.x, u = m.y;
|
|
476
|
+
}
|
|
477
|
+
this._updateFilterUniforms(t, r, n, c, u, f, o, i);
|
|
478
|
+
const p = e.enabled ? e : this._getPassthroughFilter();
|
|
479
|
+
this._setupBindGroupsAndRender(p, t, s);
|
|
480
|
+
}
|
|
481
|
+
/**
|
|
482
|
+
* Multiply _input normalized coordinates_ to this matrix to get _sprite texture normalized coordinates_.
|
|
483
|
+
*
|
|
484
|
+
* Use `outputMatrix * vTextureCoord` in the shader.
|
|
485
|
+
* @param outputMatrix - The matrix to output to.
|
|
486
|
+
* @param {Sprite} sprite - The sprite to map to.
|
|
487
|
+
* @returns The mapped matrix.
|
|
488
|
+
*/
|
|
489
|
+
calculateSpriteMatrix(e, t) {
|
|
490
|
+
const r = this._activeFilterData, i = e.set(
|
|
491
|
+
r.inputTexture._source.width,
|
|
492
|
+
0,
|
|
493
|
+
0,
|
|
494
|
+
r.inputTexture._source.height,
|
|
495
|
+
r.bounds.minX,
|
|
496
|
+
r.bounds.minY
|
|
497
|
+
), s = t.worldTransform.copyTo(P.shared), n = t.renderGroup || t.parentRenderGroup;
|
|
498
|
+
return n && n.cacheToLocalTransform && s.prepend(n.cacheToLocalTransform), s.invert(), i.prepend(s), i.scale(
|
|
499
|
+
1 / t.texture.orig.width,
|
|
500
|
+
1 / t.texture.orig.height
|
|
501
|
+
), i.translate(t.anchor.x, t.anchor.y), i;
|
|
502
|
+
}
|
|
503
|
+
destroy() {
|
|
504
|
+
var e;
|
|
505
|
+
(e = this._passthroughFilter) == null || e.destroy(!0), this._passthroughFilter = null;
|
|
506
|
+
}
|
|
507
|
+
_getPassthroughFilter() {
|
|
508
|
+
return this._passthroughFilter ?? (this._passthroughFilter = new H()), this._passthroughFilter;
|
|
509
|
+
}
|
|
510
|
+
/**
|
|
511
|
+
* Sets up the bind groups and renders the filter.
|
|
512
|
+
* @param filter - The filter to apply
|
|
513
|
+
* @param input - The input texture
|
|
514
|
+
* @param renderer - The renderer instance
|
|
515
|
+
*/
|
|
516
|
+
_setupBindGroupsAndRender(e, t, r) {
|
|
517
|
+
if (r.renderPipes.uniformBatch) {
|
|
518
|
+
const i = r.renderPipes.uniformBatch.getUboResource(this._filterGlobalUniforms);
|
|
519
|
+
this._globalFilterBindGroup.setResource(i, 0);
|
|
520
|
+
} else
|
|
521
|
+
this._globalFilterBindGroup.setResource(this._filterGlobalUniforms, 0);
|
|
522
|
+
this._globalFilterBindGroup.setResource(t.source, 1), this._globalFilterBindGroup.setResource(t.source.style, 2), e.groups[0] = this._globalFilterBindGroup, r.encoder.draw({
|
|
523
|
+
geometry: J,
|
|
524
|
+
shader: e,
|
|
525
|
+
state: e._state,
|
|
526
|
+
topology: "triangle-list"
|
|
527
|
+
}), r.type === Y.WEBGL && r.renderTarget.finishRenderPass();
|
|
528
|
+
}
|
|
529
|
+
/**
|
|
530
|
+
* Sets up the filter textures including input texture and back texture if needed.
|
|
531
|
+
* @param filterData - The filter data to update
|
|
532
|
+
* @param bounds - The bounds for the texture
|
|
533
|
+
* @param renderer - The renderer instance
|
|
534
|
+
* @param previousFilterData - The previous filter data for back texture calculation
|
|
535
|
+
*/
|
|
536
|
+
_setupFilterTextures(e, t, r, i) {
|
|
537
|
+
if (e.backTexture = v.EMPTY, e.inputTexture = _.getOptimalTexture(
|
|
538
|
+
t.width,
|
|
539
|
+
t.height,
|
|
540
|
+
e.resolution,
|
|
541
|
+
e.antialias
|
|
542
|
+
), e.blendRequired) {
|
|
543
|
+
r.renderTarget.finishRenderPass();
|
|
544
|
+
const s = r.renderTarget.getRenderTarget(e.outputRenderSurface);
|
|
545
|
+
e.backTexture = this.getBackTexture(s, t, i == null ? void 0 : i.bounds);
|
|
546
|
+
}
|
|
547
|
+
r.renderTarget.bind(e.inputTexture, !0), r.globalUniforms.push({
|
|
548
|
+
offset: t
|
|
549
|
+
});
|
|
550
|
+
}
|
|
551
|
+
/**
|
|
552
|
+
* Calculates and sets the global frame for the filter.
|
|
553
|
+
* @param filterData - The filter data to update
|
|
554
|
+
* @param offsetX - The X offset
|
|
555
|
+
* @param offsetY - The Y offset
|
|
556
|
+
* @param globalResolution - The global resolution
|
|
557
|
+
* @param sourceWidth - The source texture width
|
|
558
|
+
* @param sourceHeight - The source texture height
|
|
559
|
+
*/
|
|
560
|
+
_calculateGlobalFrame(e, t, r, i, s, n) {
|
|
561
|
+
const a = e.globalFrame;
|
|
562
|
+
a.x = t * i, a.y = r * i, a.width = s * i, a.height = n * i;
|
|
563
|
+
}
|
|
564
|
+
/**
|
|
565
|
+
* Updates the filter uniforms with the current filter state.
|
|
566
|
+
* @param input - The input texture
|
|
567
|
+
* @param output - The output render surface
|
|
568
|
+
* @param filterData - The current filter data
|
|
569
|
+
* @param offsetX - The X offset for positioning
|
|
570
|
+
* @param offsetY - The Y offset for positioning
|
|
571
|
+
* @param resolution - The current resolution
|
|
572
|
+
* @param isFinalTarget - Whether this is the final render target
|
|
573
|
+
* @param clear - Whether to clear the output surface
|
|
574
|
+
*/
|
|
575
|
+
_updateFilterUniforms(e, t, r, i, s, n, a, o) {
|
|
576
|
+
const l = this._filterGlobalUniforms.uniforms, f = l.uOutputFrame, c = l.uInputSize, u = l.uInputPixel, p = l.uInputClamp, m = l.uGlobalFrame, x = l.uOutputTexture;
|
|
577
|
+
a ? (f[0] = r.bounds.minX - i, f[1] = r.bounds.minY - s) : (f[0] = 0, f[1] = 0), f[2] = e.frame.width, f[3] = e.frame.height, c[0] = e.source.width, c[1] = e.source.height, c[2] = 1 / c[0], c[3] = 1 / c[1], u[0] = e.source.pixelWidth, u[1] = e.source.pixelHeight, u[2] = 1 / u[0], u[3] = 1 / u[1], p[0] = 0.5 * u[2], p[1] = 0.5 * u[3], p[2] = e.frame.width * c[2] - 0.5 * u[2], p[3] = e.frame.height * c[3] - 0.5 * u[3];
|
|
578
|
+
const F = this.renderer.renderTarget.rootRenderTarget.colorTexture;
|
|
579
|
+
m[0] = i * n, m[1] = s * n, m[2] = F.source.width * n, m[3] = F.source.height * n, t instanceof v && (t.source.resource = null);
|
|
580
|
+
const h = this.renderer.renderTarget.getRenderTarget(t);
|
|
581
|
+
this.renderer.renderTarget.bind(t, !!o), t instanceof v ? (x[0] = t.frame.width, x[1] = t.frame.height) : (x[0] = h.width, x[1] = h.height), x[2] = h.isRoot ? -1 : 1, this._filterGlobalUniforms.update();
|
|
582
|
+
}
|
|
583
|
+
/**
|
|
584
|
+
* Finds the correct resolution by looking back through the filter stack.
|
|
585
|
+
* @param rootResolution - The fallback root resolution to use
|
|
586
|
+
* @returns The resolution from the previous filter or root resolution
|
|
587
|
+
*/
|
|
588
|
+
_findFilterResolution(e) {
|
|
589
|
+
let t = this._filterStackIndex - 1;
|
|
590
|
+
for (; t > 0 && this._filterStack[t].skip; )
|
|
591
|
+
--t;
|
|
592
|
+
return t > 0 && this._filterStack[t].inputTexture ? this._filterStack[t].inputTexture.source._resolution : e;
|
|
593
|
+
}
|
|
594
|
+
/**
|
|
595
|
+
* Finds the offset from the previous non-skipped filter in the stack.
|
|
596
|
+
* @returns The offset coordinates from the previous filter
|
|
597
|
+
*/
|
|
598
|
+
_findPreviousFilterOffset() {
|
|
599
|
+
let e = 0, t = 0, r = this._filterStackIndex;
|
|
600
|
+
for (; r > 0; ) {
|
|
601
|
+
r--;
|
|
602
|
+
const i = this._filterStack[r];
|
|
603
|
+
if (!i.skip) {
|
|
604
|
+
e = i.bounds.minX, t = i.bounds.minY;
|
|
605
|
+
break;
|
|
606
|
+
}
|
|
607
|
+
}
|
|
608
|
+
return { x: e, y: t };
|
|
609
|
+
}
|
|
610
|
+
/**
|
|
611
|
+
* Calculates the filter area bounds based on the instruction type.
|
|
612
|
+
* @param instruction - The filter instruction
|
|
613
|
+
* @param bounds - The bounds object to populate
|
|
614
|
+
*/
|
|
615
|
+
_calculateFilterArea(e, t) {
|
|
616
|
+
if (e.renderables ? G(e.renderables, t) : e.filterEffect.filterArea ? (t.clear(), t.addRect(e.filterEffect.filterArea), t.applyMatrix(e.container.worldTransform)) : e.container.getFastGlobalBounds(!0, t), e.container) {
|
|
617
|
+
const i = (e.container.renderGroup || e.container.parentRenderGroup).cacheToLocalTransform;
|
|
618
|
+
i && t.applyMatrix(i);
|
|
619
|
+
}
|
|
620
|
+
}
|
|
621
|
+
_applyFiltersToTexture(e, t) {
|
|
622
|
+
const r = e.inputTexture, i = e.bounds, s = e.filters, n = e.firstEnabledIndex, a = e.lastEnabledIndex;
|
|
623
|
+
if (this._globalFilterBindGroup.setResource(r.source.style, 2), this._globalFilterBindGroup.setResource(e.backTexture.source, 3), n === a)
|
|
624
|
+
s[n].apply(this, r, e.outputRenderSurface, t);
|
|
625
|
+
else {
|
|
626
|
+
let o = e.inputTexture;
|
|
627
|
+
const l = _.getOptimalTexture(
|
|
628
|
+
i.width,
|
|
629
|
+
i.height,
|
|
630
|
+
o.source._resolution,
|
|
631
|
+
!1
|
|
632
|
+
);
|
|
633
|
+
let f = l;
|
|
634
|
+
for (let c = n; c < a; c++) {
|
|
635
|
+
const u = s[c];
|
|
636
|
+
if (!u.enabled) continue;
|
|
637
|
+
u.apply(this, o, f, !0);
|
|
638
|
+
const p = o;
|
|
639
|
+
o = f, f = p;
|
|
640
|
+
}
|
|
641
|
+
s[a].apply(this, o, e.outputRenderSurface, t), _.returnTexture(l);
|
|
642
|
+
}
|
|
643
|
+
}
|
|
644
|
+
_calculateFilterBounds(e, t, r, i, s) {
|
|
645
|
+
var h;
|
|
646
|
+
const n = this.renderer, a = e.bounds, o = e.filters;
|
|
647
|
+
let l = 1 / 0, f = 0, c = !0, u = !1, p = !1, m = !0, x = -1, F = -1;
|
|
648
|
+
for (let T = 0; T < o.length; T++) {
|
|
649
|
+
const g = o[T];
|
|
650
|
+
if (!g.enabled) continue;
|
|
651
|
+
if (x === -1 && (x = T), F = T, l = Math.min(l, g.resolution === "inherit" ? i : g.resolution), f += g.padding, g.antialias === "off" ? c = !1 : g.antialias === "inherit" && c && (c = r), g.clipToViewport || (m = !1), !!!(g.compatibleRenderers & n.type)) {
|
|
652
|
+
p = !1;
|
|
653
|
+
break;
|
|
654
|
+
}
|
|
655
|
+
if (g.blendRequired && !(((h = n.backBuffer) == null ? void 0 : h.useBackBuffer) ?? !0)) {
|
|
656
|
+
V("Blend filter requires backBuffer on WebGL renderer to be enabled. Set `useBackBuffer: true` in the renderer options."), p = !1;
|
|
657
|
+
break;
|
|
658
|
+
}
|
|
659
|
+
p = !0, u || (u = g.blendRequired);
|
|
660
|
+
}
|
|
661
|
+
if (!p) {
|
|
662
|
+
e.skip = !0;
|
|
663
|
+
return;
|
|
664
|
+
}
|
|
665
|
+
if (m && a.fitBounds(0, t.width / i, 0, t.height / i), a.scale(l).ceil().scale(1 / l).pad((f | 0) * s), !a.isPositive) {
|
|
666
|
+
e.skip = !0;
|
|
667
|
+
return;
|
|
668
|
+
}
|
|
669
|
+
e.antialias = c, e.resolution = l, e.blendRequired = u, e.firstEnabledIndex = x, e.lastEnabledIndex = F;
|
|
670
|
+
}
|
|
671
|
+
_popFilterData() {
|
|
672
|
+
return this._filterStackIndex--, this._filterStack[this._filterStackIndex];
|
|
673
|
+
}
|
|
674
|
+
_getPreviousFilterData() {
|
|
675
|
+
let e, t = this._filterStackIndex - 1;
|
|
676
|
+
for (; t > 0 && (t--, e = this._filterStack[t], !!e.skip); )
|
|
677
|
+
;
|
|
678
|
+
return e;
|
|
679
|
+
}
|
|
680
|
+
_pushFilterData() {
|
|
681
|
+
let e = this._filterStack[this._filterStackIndex];
|
|
682
|
+
return e || (e = this._filterStack[this._filterStackIndex] = new K()), this._filterStackIndex++, e;
|
|
683
|
+
}
|
|
684
|
+
}
|
|
685
|
+
B.extension = {
|
|
686
|
+
type: [
|
|
687
|
+
b.WebGLSystem,
|
|
688
|
+
b.WebGPUSystem
|
|
689
|
+
],
|
|
690
|
+
name: "filter"
|
|
691
|
+
};
|
|
692
|
+
R.add(B, C);
|
|
693
|
+
R.add(I);
|
|
694
|
+
//# sourceMappingURL=webworkerAll-oTmmI2Qm.js.map
|