micugl 0.0.7 → 0.0.9
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/README.md +98 -1
- package/dist/MarbleScene.d.ts +27 -0
- package/dist/RippleScene.d.ts +20 -0
- package/dist/examples/Marble/MarbleScene.d.ts +20 -0
- package/dist/examples/Marble/MarbleScene.js +1 -0
- package/dist/examples/Marble/MarbleScene.mjs +71 -0
- package/dist/examples/Marble/marbleShaders.d.ts +2 -0
- package/dist/{MarbleScene-B1gMFEHc.js → examples/Marble/marbleShaders.js} +3 -3
- package/dist/{MarbleScene-DmZt4s6L.mjs → examples/Marble/marbleShaders.mjs} +5 -70
- package/dist/examples/Ripple/RippleScene.d.ts +13 -0
- package/dist/examples/Ripple/RippleScene.js +1 -0
- package/dist/examples/Ripple/RippleScene.mjs +109 -0
- package/dist/examples/Ripple/rippleShaders.d.ts +3 -0
- package/dist/examples/Ripple/rippleShaders.js +80 -0
- package/dist/examples/Ripple/rippleShaders.mjs +94 -0
- package/dist/examples/index.d.ts +4 -4
- package/dist/examples/index.js +1 -1
- package/dist/examples/index.mjs +9 -7
- package/dist/index.d.ts +35 -9
- package/dist/index.js +1 -1
- package/dist/index.mjs +35 -146
- package/dist/marbleShaders.d.ts +5 -0
- package/dist/rippleShaders.d.ts +7 -0
- package/dist/src/core/lib/createShaderConfig.js +1 -0
- package/dist/src/core/lib/createShaderConfig.mjs +34 -0
- package/dist/src/core/lib/vectorUtils.js +1 -0
- package/dist/src/core/lib/vectorUtils.mjs +36 -0
- package/dist/src/core/managers/FBOManager.js +1 -0
- package/dist/src/core/managers/FBOManager.mjs +120 -0
- package/dist/src/core/managers/WebGLManager.js +1 -0
- package/dist/src/core/managers/WebGLManager.mjs +273 -0
- package/dist/src/core/systems/Passes.js +1 -0
- package/dist/src/core/systems/Passes.mjs +78 -0
- package/dist/src/core/systems/Postprocessing.js +1 -0
- package/dist/src/core/systems/Postprocessing.mjs +128 -0
- package/dist/src/react/components/base/BasePingPongShaderComponent.js +1 -0
- package/dist/src/react/components/base/BasePingPongShaderComponent.mjs +48 -0
- package/dist/src/react/components/base/BaseShaderComponent.js +1 -0
- package/dist/src/react/components/base/BaseShaderComponent.mjs +34 -0
- package/dist/src/react/components/engine/PingPongShaderEngine.js +1 -0
- package/dist/src/react/components/engine/PingPongShaderEngine.mjs +68 -0
- package/dist/src/react/components/engine/ShaderEngine.js +1 -0
- package/dist/src/react/components/engine/ShaderEngine.mjs +106 -0
- package/dist/src/react/hooks/useDarkMode.js +1 -0
- package/dist/src/react/hooks/useDarkMode.mjs +22 -0
- package/dist/src/react/hooks/usePingPongPasses.js +1 -0
- package/dist/src/react/hooks/usePingPongPasses.mjs +93 -0
- package/dist/src/react/hooks/useUniformUpdaters.js +1 -0
- package/dist/src/react/hooks/useUniformUpdaters.mjs +12 -0
- package/dist/src/react/lib/createUniformUpdater.js +1 -0
- package/dist/src/react/lib/createUniformUpdater.mjs +28 -0
- package/dist/types.d.ts +204 -0
- package/dist/types.js +1 -0
- package/dist/types.mjs +1 -0
- package/package.json +44 -9
- package/dist/BasePingPongShaderComponent-BvRm7-g5.js +0 -1
- package/dist/BasePingPongShaderComponent-FY62Kl02.mjs +0 -273
- package/dist/BaseShaderComponent-BSBIvn4B.js +0 -1
- package/dist/BaseShaderComponent-Be_evz2F.mjs +0 -151
- package/dist/SimpleRippleScene--B1BrlxP.js +0 -80
- package/dist/SimpleRippleScene-Ba-EPdTJ.mjs +0 -197
- package/dist/examples/Marble/index.d.ts +0 -3
- package/dist/examples/Marble/index.js +0 -1
- package/dist/examples/Marble/index.mjs +0 -6
- package/dist/examples/SimpleRipple/index.d.ts +0 -3
- package/dist/examples/SimpleRipple/index.js +0 -1
- package/dist/examples/SimpleRipple/index.mjs +0 -7
- package/dist/useUniformUpdaters-D5WtqZpp.mjs +0 -456
- package/dist/useUniformUpdaters-DGX0mf9g.js +0 -1
|
@@ -1,273 +0,0 @@
|
|
|
1
|
-
import { jsx as A } from "react/jsx-runtime";
|
|
2
|
-
import { useRef as F, useCallback as S, useEffect as R, useMemo as z } from "react";
|
|
3
|
-
import { W as _, u as v } from "./useUniformUpdaters-D5WtqZpp.mjs";
|
|
4
|
-
class W {
|
|
5
|
-
constructor(e) {
|
|
6
|
-
this.passes = [], this.pingPongIds = /* @__PURE__ */ new Set(), this.webglManager = e;
|
|
7
|
-
}
|
|
8
|
-
addPass(e) {
|
|
9
|
-
this.passes.push(e), e.outputFramebuffer && this.pingPongIds.add(e.outputFramebuffer), e.inputTextures.forEach((s) => {
|
|
10
|
-
s.bindingType === "readwrite" && this.pingPongIds.add(s.id);
|
|
11
|
-
});
|
|
12
|
-
}
|
|
13
|
-
clearPasses() {
|
|
14
|
-
this.passes = [], this.pingPongIds.clear();
|
|
15
|
-
}
|
|
16
|
-
execute(e) {
|
|
17
|
-
const s = this.webglManager.context, u = this.webglManager.fbo;
|
|
18
|
-
for (const r of this.passes) {
|
|
19
|
-
if (r.outputFramebuffer)
|
|
20
|
-
if (this.pingPongIds.has(r.outputFramebuffer)) {
|
|
21
|
-
const { write: t } = u.getPingPongIndices(r.outputFramebuffer);
|
|
22
|
-
u.bindFramebuffer(r.outputFramebuffer, t);
|
|
23
|
-
} else
|
|
24
|
-
u.bindFramebuffer(r.outputFramebuffer);
|
|
25
|
-
else
|
|
26
|
-
u.bindFramebuffer(null);
|
|
27
|
-
this.webglManager.prepareRender(r.programId, r.renderOptions), r.inputTextures.forEach((t) => {
|
|
28
|
-
let i = t.bindingType === "read" ? 0 : 1;
|
|
29
|
-
if (this.pingPongIds.has(t.id)) {
|
|
30
|
-
const { read: o, write: p } = u.getPingPongIndices(t.id);
|
|
31
|
-
i = t.bindingType === "read" || t.bindingType === "readwrite" ? o : p;
|
|
32
|
-
}
|
|
33
|
-
u.bindTexture(t.id, t.textureUnit, i), this.webglManager.setUniform(
|
|
34
|
-
r.programId,
|
|
35
|
-
`u_${t.id}`,
|
|
36
|
-
t.textureUnit,
|
|
37
|
-
"sampler2D"
|
|
38
|
-
);
|
|
39
|
-
}), this.webglManager.updateUniforms(r.programId, e), r.uniforms && Object.entries(r.uniforms).forEach(([t, i]) => {
|
|
40
|
-
const o = typeof i.value == "function" ? i.value(e, s.canvas.width, s.canvas.height) : i.value;
|
|
41
|
-
this.webglManager.setUniform(
|
|
42
|
-
r.programId,
|
|
43
|
-
t,
|
|
44
|
-
o,
|
|
45
|
-
i.type
|
|
46
|
-
);
|
|
47
|
-
}), s.drawArrays(s.TRIANGLE_STRIP, 0, 4), r.outputFramebuffer && this.pingPongIds.has(r.outputFramebuffer) && u.swapTextures(r.outputFramebuffer), r.inputTextures.forEach((t) => {
|
|
48
|
-
t.bindingType === "readwrite" && this.pingPongIds.has(t.id) && u.swapTextures(t.id);
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
initializeResources() {
|
|
53
|
-
for (const e of this.passes) {
|
|
54
|
-
const s = this.webglManager.resources.get(e.programId);
|
|
55
|
-
s && !s.buffers.a_position && (this.webglManager.createBuffer(
|
|
56
|
-
e.programId,
|
|
57
|
-
"a_position",
|
|
58
|
-
new Float32Array([
|
|
59
|
-
-1,
|
|
60
|
-
-1,
|
|
61
|
-
1,
|
|
62
|
-
-1,
|
|
63
|
-
-1,
|
|
64
|
-
1,
|
|
65
|
-
1,
|
|
66
|
-
1
|
|
67
|
-
])
|
|
68
|
-
), this.webglManager.setAttributeOnce(e.programId, "a_position", {
|
|
69
|
-
name: "a_position",
|
|
70
|
-
size: 2,
|
|
71
|
-
type: "FLOAT",
|
|
72
|
-
normalized: !1,
|
|
73
|
-
stride: 0,
|
|
74
|
-
offset: 0
|
|
75
|
-
}));
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
const C = "", N = {}, j = ({
|
|
80
|
-
programConfigs: a,
|
|
81
|
-
passes: e,
|
|
82
|
-
framebuffers: s,
|
|
83
|
-
className: u = C,
|
|
84
|
-
style: r = N,
|
|
85
|
-
useDevicePixelRatio: t = !0
|
|
86
|
-
}) => {
|
|
87
|
-
const i = F(null), o = F(null), p = F(null), l = F(null), g = F(0), h = F((n) => {
|
|
88
|
-
const f = o.current, c = p.current;
|
|
89
|
-
if (!f || !c) return;
|
|
90
|
-
const m = n - g.current;
|
|
91
|
-
c.execute(m), l.current = requestAnimationFrame(h.current);
|
|
92
|
-
}), b = S(() => {
|
|
93
|
-
if (!i.current || !o.current) return;
|
|
94
|
-
const n = window.innerWidth, f = window.innerHeight;
|
|
95
|
-
o.current.setSize(n, f, t);
|
|
96
|
-
const c = o.current, m = c.context.canvas;
|
|
97
|
-
Object.entries(s ?? []).forEach(([d, w]) => {
|
|
98
|
-
const T = w.width || m.width, E = w.height || m.height;
|
|
99
|
-
c.fbo.resizeFramebuffer(d, T, E);
|
|
100
|
-
});
|
|
101
|
-
}, [s, t]);
|
|
102
|
-
return R(() => {
|
|
103
|
-
if (i.current)
|
|
104
|
-
try {
|
|
105
|
-
const n = new _(i.current);
|
|
106
|
-
o.current = n, Object.entries(a).forEach(([c, m]) => {
|
|
107
|
-
n.createProgram(c, m);
|
|
108
|
-
}), Object.entries(s ?? []).forEach(([c, m]) => {
|
|
109
|
-
n.fbo.createFramebuffer(c, m);
|
|
110
|
-
});
|
|
111
|
-
const f = new W(n);
|
|
112
|
-
return p.current = f, e.forEach((c) => {
|
|
113
|
-
f.addPass(c);
|
|
114
|
-
}), f.initializeResources(), b(), g.current = performance.now(), l.current = requestAnimationFrame(h.current), window.addEventListener("resize", b), () => {
|
|
115
|
-
window.removeEventListener("resize", b), l.current && cancelAnimationFrame(l.current), o.current && o.current.destroyAll();
|
|
116
|
-
};
|
|
117
|
-
} catch (n) {
|
|
118
|
-
return console.error("Failed to initialize WebGL:", n), () => {
|
|
119
|
-
};
|
|
120
|
-
}
|
|
121
|
-
}, [a, e, s, b]), R(() => {
|
|
122
|
-
const n = p.current;
|
|
123
|
-
n && (n.clearPasses(), e.forEach((f) => {
|
|
124
|
-
n.addPass(f);
|
|
125
|
-
}), n.initializeResources());
|
|
126
|
-
}, [e]), /* @__PURE__ */ A(
|
|
127
|
-
"canvas",
|
|
128
|
-
{
|
|
129
|
-
ref: i,
|
|
130
|
-
className: u,
|
|
131
|
-
style: {
|
|
132
|
-
width: "100%",
|
|
133
|
-
height: "100%",
|
|
134
|
-
display: "block",
|
|
135
|
-
...r
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
);
|
|
139
|
-
}, G = ({
|
|
140
|
-
programId: a,
|
|
141
|
-
secondaryProgramId: e,
|
|
142
|
-
iterations: s = 1,
|
|
143
|
-
uniforms: u,
|
|
144
|
-
secondaryUniforms: r = {},
|
|
145
|
-
framebufferOptions: t = {
|
|
146
|
-
width: 0,
|
|
147
|
-
height: 0,
|
|
148
|
-
textureCount: 2,
|
|
149
|
-
textureOptions: {
|
|
150
|
-
minFilter: WebGLRenderingContext.LINEAR,
|
|
151
|
-
magFilter: WebGLRenderingContext.LINEAR
|
|
152
|
-
}
|
|
153
|
-
},
|
|
154
|
-
renderOptions: i = { clear: !0 },
|
|
155
|
-
customPasses: o
|
|
156
|
-
}) => {
|
|
157
|
-
const p = v(a, u), l = v(
|
|
158
|
-
e ?? `${a}-secondary`,
|
|
159
|
-
r
|
|
160
|
-
);
|
|
161
|
-
return z(() => {
|
|
162
|
-
const g = `${a}-fb-a`, h = `${a}-fb-b`, b = {
|
|
163
|
-
[g]: t,
|
|
164
|
-
[h]: t
|
|
165
|
-
};
|
|
166
|
-
let n = [];
|
|
167
|
-
if (o)
|
|
168
|
-
n = o;
|
|
169
|
-
else {
|
|
170
|
-
n.push({
|
|
171
|
-
programId: a,
|
|
172
|
-
inputTextures: [],
|
|
173
|
-
outputFramebuffer: g,
|
|
174
|
-
renderOptions: i
|
|
175
|
-
});
|
|
176
|
-
for (let d = 0; d < s; d++) {
|
|
177
|
-
const w = e && d % 2 === 1 ? e : a, T = d % 2 === 0 ? g : h, E = d % 2 === 0 ? h : g, P = e && d % 2 === 1 ? l[e] : p[a], U = {};
|
|
178
|
-
P.forEach((y) => {
|
|
179
|
-
const L = y.updateFn;
|
|
180
|
-
U[y.name] = {
|
|
181
|
-
type: y.type,
|
|
182
|
-
value: (M, I, x) => L(M, I, x)
|
|
183
|
-
};
|
|
184
|
-
}), n.push({
|
|
185
|
-
programId: w,
|
|
186
|
-
inputTextures: [{
|
|
187
|
-
id: T,
|
|
188
|
-
textureUnit: 0,
|
|
189
|
-
bindingType: "read"
|
|
190
|
-
}],
|
|
191
|
-
outputFramebuffer: E,
|
|
192
|
-
uniforms: U,
|
|
193
|
-
renderOptions: i
|
|
194
|
-
});
|
|
195
|
-
}
|
|
196
|
-
const f = s % 2 === 0 ? h : g, c = {};
|
|
197
|
-
(e ? l[e] : p[a]).forEach((d) => {
|
|
198
|
-
const w = d.updateFn;
|
|
199
|
-
c[d.name] = {
|
|
200
|
-
type: d.type,
|
|
201
|
-
value: (T, E, P) => w(T, E, P)
|
|
202
|
-
};
|
|
203
|
-
}), n.push({
|
|
204
|
-
programId: e ?? a,
|
|
205
|
-
inputTextures: [{
|
|
206
|
-
id: f,
|
|
207
|
-
textureUnit: 0,
|
|
208
|
-
bindingType: "read"
|
|
209
|
-
}],
|
|
210
|
-
outputFramebuffer: null,
|
|
211
|
-
uniforms: c,
|
|
212
|
-
renderOptions: i
|
|
213
|
-
});
|
|
214
|
-
}
|
|
215
|
-
return { passes: n, framebuffers: b };
|
|
216
|
-
}, [
|
|
217
|
-
a,
|
|
218
|
-
e,
|
|
219
|
-
s,
|
|
220
|
-
p,
|
|
221
|
-
l,
|
|
222
|
-
t,
|
|
223
|
-
i,
|
|
224
|
-
o
|
|
225
|
-
]);
|
|
226
|
-
}, O = {
|
|
227
|
-
clear: !0,
|
|
228
|
-
clearColor: [0, 0, 0, 1]
|
|
229
|
-
}, k = ({
|
|
230
|
-
programId: a,
|
|
231
|
-
shaderConfig: e,
|
|
232
|
-
secondaryProgramId: s,
|
|
233
|
-
secondaryShaderConfig: u,
|
|
234
|
-
iterations: r = 1,
|
|
235
|
-
uniforms: t,
|
|
236
|
-
secondaryUniforms: i,
|
|
237
|
-
framebufferOptions: o,
|
|
238
|
-
className: p = "",
|
|
239
|
-
style: l,
|
|
240
|
-
customPasses: g,
|
|
241
|
-
renderOptions: h = O
|
|
242
|
-
}) => {
|
|
243
|
-
const b = s ?? `${a}-secondary`, n = {
|
|
244
|
-
[a]: e
|
|
245
|
-
};
|
|
246
|
-
u && (n[b] = u);
|
|
247
|
-
const { passes: f, framebuffers: c } = G({
|
|
248
|
-
programId: a,
|
|
249
|
-
secondaryProgramId: u ? b : void 0,
|
|
250
|
-
iterations: r,
|
|
251
|
-
uniforms: t,
|
|
252
|
-
secondaryUniforms: i,
|
|
253
|
-
framebufferOptions: o,
|
|
254
|
-
renderOptions: h,
|
|
255
|
-
customPasses: g
|
|
256
|
-
});
|
|
257
|
-
return /* @__PURE__ */ A(
|
|
258
|
-
j,
|
|
259
|
-
{
|
|
260
|
-
programConfigs: n,
|
|
261
|
-
passes: f,
|
|
262
|
-
framebuffers: c,
|
|
263
|
-
className: p,
|
|
264
|
-
style: l
|
|
265
|
-
}
|
|
266
|
-
);
|
|
267
|
-
};
|
|
268
|
-
export {
|
|
269
|
-
k as B,
|
|
270
|
-
W as P,
|
|
271
|
-
j as a,
|
|
272
|
-
G as u
|
|
273
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";const n=require("react"),S=require("react/jsx-runtime"),h=require("./useUniformUpdaters-DGX0mf9g.js"),F={},U="",D={},I={},b=({programConfigs:i,renderCallback:l,renderOptions:s=F,className:d=U,style:f=D,uniformUpdaters:R=I,useFastPath:g=!1,useDevicePixelRatio:A=!0})=>{const E=n.useRef(null),a=n.useRef(null),T=n.useRef(null),u=n.useRef(null),L=n.useRef(0),p=n.useRef(t=>{const e=a.current,r=T.current;if(!e||!r)return;const m=t-L.current,c=e.context;if(g)e.fastRender(r,m,s.clear),c.drawArrays(c.TRIANGLE_STRIP,0,4);else{const o=e.resources.get(r);if(!o)return;e.prepareRender(r,s),_(m,o,c)}u.current=requestAnimationFrame(p.current)}),_=n.useCallback((t,e,r)=>{l(t,e,r)},[l]);n.useEffect(()=>{p.current=t=>{const e=a.current,r=T.current;if(!e||!r)return;const m=t-L.current,c=e.context;if(g)e.fastRender(r,m,s.clear),c.drawArrays(c.TRIANGLE_STRIP,0,4);else{const o=e.resources.get(r);if(!o)return;e.prepareRender(r,s),_(m,o,c)}u.current=requestAnimationFrame(p.current)}},[s,g,_]);const w=n.useCallback(()=>{if(!E.current||!a.current)return;const t=window.innerWidth,e=window.innerHeight;a.current.setSize(t,e,A)},[A]);return n.useEffect(()=>{if(E.current)try{const t=new h.WebGLManager(E.current);a.current=t,w();const e=Object.entries(i);if(e.length>0){const[r,m]=e[0];t.createProgram(r,m),t.createBuffer(r,"a_position",new Float32Array([-1,-1,1,-1,-1,1,1,1])),T.current=r,t.setAttributeOnce(r,"a_position",{name:"a_position",size:2,type:"FLOAT",normalized:!1,stride:0,offset:0});const c=R[r];c&&c.forEach(o=>{t.registerUniformUpdater(r,o.name,o.type,o.updateFn)})}return L.current=performance.now(),u.current=requestAnimationFrame(p.current),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w),u.current&&cancelAnimationFrame(u.current),a.current&&a.current.destroyAll()}}catch(t){return console.error("Failed to initialize WebGL:",t),()=>{}}},[i,R,w]),S.jsx("canvas",{ref:E,className:d,style:f})},k=()=>{const[i,l]=n.useState(!1);return n.useEffect(()=>{const s=()=>{const f=document.documentElement.classList.contains("dark");l(f)};s();const d=new MutationObserver(f=>{f.forEach(R=>{R.attributeName==="class"&&s()})});return d.observe(document.documentElement,{attributes:!0}),()=>{d.disconnect()}},[]),i},N={clear:!0,clearColor:[0,0,0,1]},M=({programId:i,shaderConfig:l,uniforms:s,className:d="",style:f,renderOptions:R=N})=>{const g={[i]:l},A=h.useUniformUpdaters(i,s),E=(a,T,u)=>{u.drawArrays(u.TRIANGLE_STRIP,0,4)};return S.jsx(b,{programConfigs:g,renderCallback:E,uniformUpdaters:A,className:d,style:f,useFastPath:!0,renderOptions:R})};exports.BaseShaderComponent=M;exports.ShaderEngine=b;exports.useDarkMode=k;
|
|
@@ -1,151 +0,0 @@
|
|
|
1
|
-
import { useRef as E, useCallback as b, useEffect as S, useState as h } from "react";
|
|
2
|
-
import { jsx as F } from "react/jsx-runtime";
|
|
3
|
-
import { W as I, u as D } from "./useUniformUpdaters-D5WtqZpp.mjs";
|
|
4
|
-
const U = {}, k = "", N = {}, v = {}, y = ({
|
|
5
|
-
programConfigs: i,
|
|
6
|
-
renderCallback: f,
|
|
7
|
-
renderOptions: n = U,
|
|
8
|
-
className: l = k,
|
|
9
|
-
style: u = N,
|
|
10
|
-
uniformUpdaters: d = v,
|
|
11
|
-
useFastPath: R = !1,
|
|
12
|
-
useDevicePixelRatio: A = !0
|
|
13
|
-
}) => {
|
|
14
|
-
const g = E(null), c = E(null), p = E(null), a = E(null), L = E(0), T = E((t) => {
|
|
15
|
-
const e = c.current, r = p.current;
|
|
16
|
-
if (!e || !r) return;
|
|
17
|
-
const m = t - L.current, s = e.context;
|
|
18
|
-
if (R)
|
|
19
|
-
e.fastRender(r, m, n.clear), s.drawArrays(s.TRIANGLE_STRIP, 0, 4);
|
|
20
|
-
else {
|
|
21
|
-
const o = e.resources.get(r);
|
|
22
|
-
if (!o) return;
|
|
23
|
-
e.prepareRender(r, n), _(m, o, s);
|
|
24
|
-
}
|
|
25
|
-
a.current = requestAnimationFrame(T.current);
|
|
26
|
-
}), _ = b((t, e, r) => {
|
|
27
|
-
f(t, e, r);
|
|
28
|
-
}, [f]);
|
|
29
|
-
S(() => {
|
|
30
|
-
T.current = (t) => {
|
|
31
|
-
const e = c.current, r = p.current;
|
|
32
|
-
if (!e || !r) return;
|
|
33
|
-
const m = t - L.current, s = e.context;
|
|
34
|
-
if (R)
|
|
35
|
-
e.fastRender(r, m, n.clear), s.drawArrays(s.TRIANGLE_STRIP, 0, 4);
|
|
36
|
-
else {
|
|
37
|
-
const o = e.resources.get(r);
|
|
38
|
-
if (!o) return;
|
|
39
|
-
e.prepareRender(r, n), _(m, o, s);
|
|
40
|
-
}
|
|
41
|
-
a.current = requestAnimationFrame(T.current);
|
|
42
|
-
};
|
|
43
|
-
}, [n, R, _]);
|
|
44
|
-
const w = b(() => {
|
|
45
|
-
if (!g.current || !c.current) return;
|
|
46
|
-
const t = window.innerWidth, e = window.innerHeight;
|
|
47
|
-
c.current.setSize(t, e, A);
|
|
48
|
-
}, [A]);
|
|
49
|
-
return S(() => {
|
|
50
|
-
if (g.current)
|
|
51
|
-
try {
|
|
52
|
-
const t = new I(g.current);
|
|
53
|
-
c.current = t, w();
|
|
54
|
-
const e = Object.entries(i);
|
|
55
|
-
if (e.length > 0) {
|
|
56
|
-
const [r, m] = e[0];
|
|
57
|
-
t.createProgram(r, m), t.createBuffer(
|
|
58
|
-
r,
|
|
59
|
-
"a_position",
|
|
60
|
-
new Float32Array([
|
|
61
|
-
-1,
|
|
62
|
-
-1,
|
|
63
|
-
1,
|
|
64
|
-
-1,
|
|
65
|
-
-1,
|
|
66
|
-
1,
|
|
67
|
-
1,
|
|
68
|
-
1
|
|
69
|
-
])
|
|
70
|
-
), p.current = r, t.setAttributeOnce(r, "a_position", {
|
|
71
|
-
name: "a_position",
|
|
72
|
-
size: 2,
|
|
73
|
-
type: "FLOAT",
|
|
74
|
-
normalized: !1,
|
|
75
|
-
stride: 0,
|
|
76
|
-
offset: 0
|
|
77
|
-
});
|
|
78
|
-
const s = d[r];
|
|
79
|
-
s && s.forEach((o) => {
|
|
80
|
-
t.registerUniformUpdater(
|
|
81
|
-
r,
|
|
82
|
-
o.name,
|
|
83
|
-
o.type,
|
|
84
|
-
o.updateFn
|
|
85
|
-
);
|
|
86
|
-
});
|
|
87
|
-
}
|
|
88
|
-
return L.current = performance.now(), a.current = requestAnimationFrame(T.current), window.addEventListener("resize", w), () => {
|
|
89
|
-
window.removeEventListener("resize", w), a.current && cancelAnimationFrame(a.current), c.current && c.current.destroyAll();
|
|
90
|
-
};
|
|
91
|
-
} catch (t) {
|
|
92
|
-
return console.error("Failed to initialize WebGL:", t), () => {
|
|
93
|
-
};
|
|
94
|
-
}
|
|
95
|
-
}, [i, d, w]), /* @__PURE__ */ F(
|
|
96
|
-
"canvas",
|
|
97
|
-
{
|
|
98
|
-
ref: g,
|
|
99
|
-
className: l,
|
|
100
|
-
style: u
|
|
101
|
-
}
|
|
102
|
-
);
|
|
103
|
-
}, G = () => {
|
|
104
|
-
const [i, f] = h(!1);
|
|
105
|
-
return S(() => {
|
|
106
|
-
const n = () => {
|
|
107
|
-
const u = document.documentElement.classList.contains("dark");
|
|
108
|
-
f(u);
|
|
109
|
-
};
|
|
110
|
-
n();
|
|
111
|
-
const l = new MutationObserver((u) => {
|
|
112
|
-
u.forEach((d) => {
|
|
113
|
-
d.attributeName === "class" && n();
|
|
114
|
-
});
|
|
115
|
-
});
|
|
116
|
-
return l.observe(document.documentElement, { attributes: !0 }), () => {
|
|
117
|
-
l.disconnect();
|
|
118
|
-
};
|
|
119
|
-
}, []), i;
|
|
120
|
-
}, M = {
|
|
121
|
-
clear: !0,
|
|
122
|
-
clearColor: [0, 0, 0, 1]
|
|
123
|
-
}, O = ({
|
|
124
|
-
programId: i,
|
|
125
|
-
shaderConfig: f,
|
|
126
|
-
uniforms: n,
|
|
127
|
-
className: l = "",
|
|
128
|
-
style: u,
|
|
129
|
-
renderOptions: d = M
|
|
130
|
-
}) => {
|
|
131
|
-
const R = { [i]: f }, A = D(i, n);
|
|
132
|
-
return /* @__PURE__ */ F(
|
|
133
|
-
y,
|
|
134
|
-
{
|
|
135
|
-
programConfigs: R,
|
|
136
|
-
renderCallback: (c, p, a) => {
|
|
137
|
-
a.drawArrays(a.TRIANGLE_STRIP, 0, 4);
|
|
138
|
-
},
|
|
139
|
-
uniformUpdaters: A,
|
|
140
|
-
className: l,
|
|
141
|
-
style: u,
|
|
142
|
-
useFastPath: !0,
|
|
143
|
-
renderOptions: d
|
|
144
|
-
}
|
|
145
|
-
);
|
|
146
|
-
};
|
|
147
|
-
export {
|
|
148
|
-
O as B,
|
|
149
|
-
y as S,
|
|
150
|
-
G as u
|
|
151
|
-
};
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
"use strict";const E=require("react/jsx-runtime"),f=require("./useUniformUpdaters-DGX0mf9g.js"),F=require("./BasePingPongShaderComponent-BvRm7-g5.js"),i=require("react"),c=`
|
|
2
|
-
attribute vec2 a_position;
|
|
3
|
-
varying vec2 v_texCoord;
|
|
4
|
-
void main() {
|
|
5
|
-
gl_Position = vec4(a_position, 0.0, 1.0);
|
|
6
|
-
v_texCoord = a_position * 0.5 + 0.5;
|
|
7
|
-
}
|
|
8
|
-
`,g=`
|
|
9
|
-
precision highp float;
|
|
10
|
-
|
|
11
|
-
uniform vec2 u_resolution;
|
|
12
|
-
uniform float u_time;
|
|
13
|
-
uniform sampler2D u_texture0;
|
|
14
|
-
uniform vec2 u_mouse;
|
|
15
|
-
uniform float u_mouseForce;
|
|
16
|
-
uniform float u_damping;
|
|
17
|
-
|
|
18
|
-
varying vec2 v_texCoord;
|
|
19
|
-
|
|
20
|
-
void main() {
|
|
21
|
-
vec2 uv = v_texCoord;
|
|
22
|
-
vec2 texelSize = 1.0 / u_resolution;
|
|
23
|
-
|
|
24
|
-
vec4 state = texture2D(u_texture0, uv);
|
|
25
|
-
float height = state.r;
|
|
26
|
-
float velocity = state.g;
|
|
27
|
-
|
|
28
|
-
float north = texture2D(u_texture0, uv + vec2(0.0, texelSize.y)).r;
|
|
29
|
-
float south = texture2D(u_texture0, uv - vec2(0.0, texelSize.y)).r;
|
|
30
|
-
float east = texture2D(u_texture0, uv + vec2(texelSize.x, 0.0)).r;
|
|
31
|
-
float west = texture2D(u_texture0, uv - vec2(texelSize.x, 0.0)).r;
|
|
32
|
-
|
|
33
|
-
float newVelocity = velocity + ((north + south + east + west) / 4.0 - height) * 2.0;
|
|
34
|
-
newVelocity *= u_damping;
|
|
35
|
-
|
|
36
|
-
float newHeight = height + newVelocity;
|
|
37
|
-
|
|
38
|
-
vec2 mouseVec = u_mouse - uv;
|
|
39
|
-
float mouseDistance = length(mouseVec);
|
|
40
|
-
if (mouseDistance < 0.05 && u_mouseForce > 0.0) {
|
|
41
|
-
newHeight += 0.5;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
float startTime = mod(u_time * 0.001, 10.0);
|
|
45
|
-
if (startTime < 0.2) {
|
|
46
|
-
vec2 center = vec2(0.5, 0.5);
|
|
47
|
-
float centerDist = length(uv - center);
|
|
48
|
-
if (centerDist < 0.05) {
|
|
49
|
-
newHeight += 0.5 * (1.0 - startTime * 5.0);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
gl_FragColor = vec4(newHeight, newVelocity, 0.0, 1.0);
|
|
54
|
-
}
|
|
55
|
-
`,p=`
|
|
56
|
-
precision highp float;
|
|
57
|
-
|
|
58
|
-
uniform vec2 u_resolution;
|
|
59
|
-
uniform float u_time;
|
|
60
|
-
uniform sampler2D u_texture0;
|
|
61
|
-
uniform vec3 u_color1;
|
|
62
|
-
uniform vec3 u_color2;
|
|
63
|
-
|
|
64
|
-
varying vec2 v_texCoord;
|
|
65
|
-
|
|
66
|
-
void main() {
|
|
67
|
-
vec2 uv = v_texCoord;
|
|
68
|
-
|
|
69
|
-
vec4 state = texture2D(u_texture0, uv);
|
|
70
|
-
float height = state.r;
|
|
71
|
-
|
|
72
|
-
vec3 color = mix(u_color1, u_color2, (height + 1.0) * 0.5);
|
|
73
|
-
|
|
74
|
-
float t = u_time * 0.001;
|
|
75
|
-
float brightness = 1.0 + 0.1 * sin(uv.x * 10.0 + t) * sin(uv.y * 10.0 + t);
|
|
76
|
-
color *= brightness;
|
|
77
|
-
|
|
78
|
-
gl_FragColor = vec4(color, 1.0);
|
|
79
|
-
}
|
|
80
|
-
`,V=[.1,.3,.1],P=[.3,.2,.4],b=({damping:_=.99,mouseForce:x=.5,color1:S=V,color2:y=P,iterations:C=2,className:w="",style:D})=>{const u=i.useRef([.5,.5]),o=i.useRef(!1),L=f.createShaderConfig({vertexShader:c,fragmentShader:g,uniformNames:{u_texture0:"sampler2D",u_mouse:"vec2",u_mouseForce:"float",u_damping:"float"}}),R=f.createShaderConfig({vertexShader:c,fragmentShader:p,uniformNames:{u_texture0:"sampler2D",u_color1:"vec3",u_color2:"vec3"}});return i.useEffect(()=>{const s=e=>{const t=e.target.getBoundingClientRect(),n=(e.clientX-t.left)/t.width,r=1-(e.clientY-t.top)/t.height;u.current=[n,r]},a=()=>{o.current=!0},l=()=>{o.current=!1},v=e=>{if(e.touches.length>0){e.preventDefault();const t=e.target.getBoundingClientRect(),n=(e.touches[0].clientX-t.left)/t.width,r=1-(e.touches[0].clientY-t.top)/t.height;u.current=[n,r],o.current=!0}},m=e=>{if(e.touches.length>0&&o.current){e.preventDefault();const t=e.target.getBoundingClientRect(),n=(e.touches[0].clientX-t.left)/t.width,r=1-(e.touches[0].clientY-t.top)/t.height;u.current=[n,r]}},d=()=>{o.current=!1};return document.addEventListener("mousemove",s),document.addEventListener("mousedown",a),document.addEventListener("mouseup",l),document.addEventListener("touchstart",v,{passive:!1}),document.addEventListener("touchmove",m,{passive:!1}),document.addEventListener("touchend",d),()=>{document.removeEventListener("mousemove",s),document.removeEventListener("mousedown",a),document.removeEventListener("mouseup",l),document.removeEventListener("touchstart",v),document.removeEventListener("touchmove",m),document.removeEventListener("touchend",d)}},[]),E.jsx(F.BasePingPongShaderComponent,{programId:"ripple-simulation",shaderConfig:L,secondaryProgramId:"ripple-render",secondaryShaderConfig:R,iterations:C,className:w,style:D,framebufferOptions:{width:0,height:0,textureCount:2,textureOptions:{minFilter:WebGLRenderingContext.LINEAR,magFilter:WebGLRenderingContext.LINEAR}},uniforms:{u_mouse:{type:"vec2",value:()=>new Float32Array(u.current)},u_mouseForce:{type:"float",value:()=>o.current?x:0},u_damping:{type:"float",value:_}},secondaryUniforms:{u_color1:{type:"vec3",value:new Float32Array(S)},u_color2:{type:"vec3",value:new Float32Array(y)}}})};exports.SimpleRipple=b;exports.rippleRenderShader=p;exports.rippleSimulationShader=g;exports.rippleVertexShader=c;
|
|
@@ -1,197 +0,0 @@
|
|
|
1
|
-
import { jsx as L } from "react/jsx-runtime";
|
|
2
|
-
import { c as d } from "./useUniformUpdaters-D5WtqZpp.mjs";
|
|
3
|
-
import { B as E } from "./BasePingPongShaderComponent-FY62Kl02.mjs";
|
|
4
|
-
import R, { useRef as h } from "react";
|
|
5
|
-
const f = (
|
|
6
|
-
/* glsl */
|
|
7
|
-
`
|
|
8
|
-
attribute vec2 a_position;
|
|
9
|
-
varying vec2 v_texCoord;
|
|
10
|
-
void main() {
|
|
11
|
-
gl_Position = vec4(a_position, 0.0, 1.0);
|
|
12
|
-
v_texCoord = a_position * 0.5 + 0.5;
|
|
13
|
-
}
|
|
14
|
-
`
|
|
15
|
-
), F = (
|
|
16
|
-
/* glsl */
|
|
17
|
-
`
|
|
18
|
-
precision highp float;
|
|
19
|
-
|
|
20
|
-
uniform vec2 u_resolution;
|
|
21
|
-
uniform float u_time;
|
|
22
|
-
uniform sampler2D u_texture0;
|
|
23
|
-
uniform vec2 u_mouse;
|
|
24
|
-
uniform float u_mouseForce;
|
|
25
|
-
uniform float u_damping;
|
|
26
|
-
|
|
27
|
-
varying vec2 v_texCoord;
|
|
28
|
-
|
|
29
|
-
void main() {
|
|
30
|
-
vec2 uv = v_texCoord;
|
|
31
|
-
vec2 texelSize = 1.0 / u_resolution;
|
|
32
|
-
|
|
33
|
-
vec4 state = texture2D(u_texture0, uv);
|
|
34
|
-
float height = state.r;
|
|
35
|
-
float velocity = state.g;
|
|
36
|
-
|
|
37
|
-
float north = texture2D(u_texture0, uv + vec2(0.0, texelSize.y)).r;
|
|
38
|
-
float south = texture2D(u_texture0, uv - vec2(0.0, texelSize.y)).r;
|
|
39
|
-
float east = texture2D(u_texture0, uv + vec2(texelSize.x, 0.0)).r;
|
|
40
|
-
float west = texture2D(u_texture0, uv - vec2(texelSize.x, 0.0)).r;
|
|
41
|
-
|
|
42
|
-
float newVelocity = velocity + ((north + south + east + west) / 4.0 - height) * 2.0;
|
|
43
|
-
newVelocity *= u_damping;
|
|
44
|
-
|
|
45
|
-
float newHeight = height + newVelocity;
|
|
46
|
-
|
|
47
|
-
vec2 mouseVec = u_mouse - uv;
|
|
48
|
-
float mouseDistance = length(mouseVec);
|
|
49
|
-
if (mouseDistance < 0.05 && u_mouseForce > 0.0) {
|
|
50
|
-
newHeight += 0.5;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
float startTime = mod(u_time * 0.001, 10.0);
|
|
54
|
-
if (startTime < 0.2) {
|
|
55
|
-
vec2 center = vec2(0.5, 0.5);
|
|
56
|
-
float centerDist = length(uv - center);
|
|
57
|
-
if (centerDist < 0.05) {
|
|
58
|
-
newHeight += 0.5 * (1.0 - startTime * 5.0);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
gl_FragColor = vec4(newHeight, newVelocity, 0.0, 1.0);
|
|
63
|
-
}
|
|
64
|
-
`
|
|
65
|
-
), b = (
|
|
66
|
-
/* glsl */
|
|
67
|
-
`
|
|
68
|
-
precision highp float;
|
|
69
|
-
|
|
70
|
-
uniform vec2 u_resolution;
|
|
71
|
-
uniform float u_time;
|
|
72
|
-
uniform sampler2D u_texture0;
|
|
73
|
-
uniform vec3 u_color1;
|
|
74
|
-
uniform vec3 u_color2;
|
|
75
|
-
|
|
76
|
-
varying vec2 v_texCoord;
|
|
77
|
-
|
|
78
|
-
void main() {
|
|
79
|
-
vec2 uv = v_texCoord;
|
|
80
|
-
|
|
81
|
-
vec4 state = texture2D(u_texture0, uv);
|
|
82
|
-
float height = state.r;
|
|
83
|
-
|
|
84
|
-
vec3 color = mix(u_color1, u_color2, (height + 1.0) * 0.5);
|
|
85
|
-
|
|
86
|
-
float t = u_time * 0.001;
|
|
87
|
-
float brightness = 1.0 + 0.1 * sin(uv.x * 10.0 + t) * sin(uv.y * 10.0 + t);
|
|
88
|
-
color *= brightness;
|
|
89
|
-
|
|
90
|
-
gl_FragColor = vec4(color, 1.0);
|
|
91
|
-
}
|
|
92
|
-
`
|
|
93
|
-
), V = [0.1, 0.3, 0.1], M = [0.3, 0.2, 0.4], B = ({
|
|
94
|
-
damping: g = 0.99,
|
|
95
|
-
mouseForce: p = 0.5,
|
|
96
|
-
color1: _ = V,
|
|
97
|
-
color2: x = M,
|
|
98
|
-
iterations: y = 2,
|
|
99
|
-
className: C = "",
|
|
100
|
-
style: w
|
|
101
|
-
}) => {
|
|
102
|
-
const u = h([0.5, 0.5]), o = h(!1), S = d({
|
|
103
|
-
vertexShader: f,
|
|
104
|
-
fragmentShader: F,
|
|
105
|
-
uniformNames: {
|
|
106
|
-
u_texture0: "sampler2D",
|
|
107
|
-
u_mouse: "vec2",
|
|
108
|
-
u_mouseForce: "float",
|
|
109
|
-
u_damping: "float"
|
|
110
|
-
}
|
|
111
|
-
}), D = d({
|
|
112
|
-
vertexShader: f,
|
|
113
|
-
fragmentShader: b,
|
|
114
|
-
uniformNames: {
|
|
115
|
-
u_texture0: "sampler2D",
|
|
116
|
-
u_color1: "vec3",
|
|
117
|
-
u_color2: "vec3"
|
|
118
|
-
}
|
|
119
|
-
});
|
|
120
|
-
return R.useEffect(() => {
|
|
121
|
-
const c = (e) => {
|
|
122
|
-
const t = e.target.getBoundingClientRect(), n = (e.clientX - t.left) / t.width, r = 1 - (e.clientY - t.top) / t.height;
|
|
123
|
-
u.current = [n, r];
|
|
124
|
-
}, i = () => {
|
|
125
|
-
o.current = !0;
|
|
126
|
-
}, s = () => {
|
|
127
|
-
o.current = !1;
|
|
128
|
-
}, a = (e) => {
|
|
129
|
-
if (e.touches.length > 0) {
|
|
130
|
-
e.preventDefault();
|
|
131
|
-
const t = e.target.getBoundingClientRect(), n = (e.touches[0].clientX - t.left) / t.width, r = 1 - (e.touches[0].clientY - t.top) / t.height;
|
|
132
|
-
u.current = [n, r], o.current = !0;
|
|
133
|
-
}
|
|
134
|
-
}, l = (e) => {
|
|
135
|
-
if (e.touches.length > 0 && o.current) {
|
|
136
|
-
e.preventDefault();
|
|
137
|
-
const t = e.target.getBoundingClientRect(), n = (e.touches[0].clientX - t.left) / t.width, r = 1 - (e.touches[0].clientY - t.top) / t.height;
|
|
138
|
-
u.current = [n, r];
|
|
139
|
-
}
|
|
140
|
-
}, m = () => {
|
|
141
|
-
o.current = !1;
|
|
142
|
-
};
|
|
143
|
-
return document.addEventListener("mousemove", c), document.addEventListener("mousedown", i), document.addEventListener("mouseup", s), document.addEventListener("touchstart", a, { passive: !1 }), document.addEventListener("touchmove", l, { passive: !1 }), document.addEventListener("touchend", m), () => {
|
|
144
|
-
document.removeEventListener("mousemove", c), document.removeEventListener("mousedown", i), document.removeEventListener("mouseup", s), document.removeEventListener("touchstart", a), document.removeEventListener("touchmove", l), document.removeEventListener("touchend", m);
|
|
145
|
-
};
|
|
146
|
-
}, []), /* @__PURE__ */ L(
|
|
147
|
-
E,
|
|
148
|
-
{
|
|
149
|
-
programId: "ripple-simulation",
|
|
150
|
-
shaderConfig: S,
|
|
151
|
-
secondaryProgramId: "ripple-render",
|
|
152
|
-
secondaryShaderConfig: D,
|
|
153
|
-
iterations: y,
|
|
154
|
-
className: C,
|
|
155
|
-
style: w,
|
|
156
|
-
framebufferOptions: {
|
|
157
|
-
width: 0,
|
|
158
|
-
height: 0,
|
|
159
|
-
textureCount: 2,
|
|
160
|
-
textureOptions: {
|
|
161
|
-
minFilter: WebGLRenderingContext.LINEAR,
|
|
162
|
-
magFilter: WebGLRenderingContext.LINEAR
|
|
163
|
-
}
|
|
164
|
-
},
|
|
165
|
-
uniforms: {
|
|
166
|
-
u_mouse: {
|
|
167
|
-
type: "vec2",
|
|
168
|
-
value: () => new Float32Array(u.current)
|
|
169
|
-
},
|
|
170
|
-
u_mouseForce: {
|
|
171
|
-
type: "float",
|
|
172
|
-
value: () => o.current ? p : 0
|
|
173
|
-
},
|
|
174
|
-
u_damping: {
|
|
175
|
-
type: "float",
|
|
176
|
-
value: g
|
|
177
|
-
}
|
|
178
|
-
},
|
|
179
|
-
secondaryUniforms: {
|
|
180
|
-
u_color1: {
|
|
181
|
-
type: "vec3",
|
|
182
|
-
value: new Float32Array(_)
|
|
183
|
-
},
|
|
184
|
-
u_color2: {
|
|
185
|
-
type: "vec3",
|
|
186
|
-
value: new Float32Array(x)
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
);
|
|
191
|
-
};
|
|
192
|
-
export {
|
|
193
|
-
B as S,
|
|
194
|
-
F as a,
|
|
195
|
-
b,
|
|
196
|
-
f as r
|
|
197
|
-
};
|