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
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
const e = (
|
|
2
|
+
/* glsl */
|
|
3
|
+
`
|
|
4
|
+
attribute vec2 a_position;
|
|
5
|
+
varying vec2 v_texCoord;
|
|
6
|
+
void main() {
|
|
7
|
+
gl_Position = vec4(a_position, 0.0, 1.0);
|
|
8
|
+
v_texCoord = a_position * 0.5 + 0.5;
|
|
9
|
+
}
|
|
10
|
+
`
|
|
11
|
+
), t = (
|
|
12
|
+
/* glsl */
|
|
13
|
+
`
|
|
14
|
+
precision highp float;
|
|
15
|
+
|
|
16
|
+
uniform vec2 u_resolution;
|
|
17
|
+
uniform float u_time;
|
|
18
|
+
uniform sampler2D u_texture0;
|
|
19
|
+
uniform vec2 u_mouse;
|
|
20
|
+
uniform float u_mouseForce;
|
|
21
|
+
uniform float u_damping;
|
|
22
|
+
|
|
23
|
+
varying vec2 v_texCoord;
|
|
24
|
+
|
|
25
|
+
void main() {
|
|
26
|
+
vec2 uv = v_texCoord;
|
|
27
|
+
vec2 texelSize = 1.0 / u_resolution;
|
|
28
|
+
|
|
29
|
+
vec4 state = texture2D(u_texture0, uv);
|
|
30
|
+
float height = state.r;
|
|
31
|
+
float velocity = state.g;
|
|
32
|
+
|
|
33
|
+
float north = texture2D(u_texture0, uv + vec2(0.0, texelSize.y)).r;
|
|
34
|
+
float south = texture2D(u_texture0, uv - vec2(0.0, texelSize.y)).r;
|
|
35
|
+
float east = texture2D(u_texture0, uv + vec2(texelSize.x, 0.0)).r;
|
|
36
|
+
float west = texture2D(u_texture0, uv - vec2(texelSize.x, 0.0)).r;
|
|
37
|
+
|
|
38
|
+
float newVelocity = velocity + ((north + south + east + west) / 4.0 - height) * 2.0;
|
|
39
|
+
newVelocity *= u_damping;
|
|
40
|
+
|
|
41
|
+
float newHeight = height + newVelocity;
|
|
42
|
+
|
|
43
|
+
vec2 mouseVec = u_mouse - uv;
|
|
44
|
+
float mouseDistance = length(mouseVec);
|
|
45
|
+
if (mouseDistance < 0.05 && u_mouseForce > 0.0) {
|
|
46
|
+
newHeight += 0.5;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
float startTime = mod(u_time * 0.001, 10.0);
|
|
50
|
+
if (startTime < 0.2) {
|
|
51
|
+
vec2 center = vec2(0.5, 0.5);
|
|
52
|
+
float centerDist = length(uv - center);
|
|
53
|
+
if (centerDist < 0.05) {
|
|
54
|
+
newHeight += 0.5 * (1.0 - startTime * 5.0);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
gl_FragColor = vec4(newHeight, newVelocity, 0.0, 1.0);
|
|
59
|
+
}
|
|
60
|
+
`
|
|
61
|
+
), o = (
|
|
62
|
+
/* glsl */
|
|
63
|
+
`
|
|
64
|
+
precision highp float;
|
|
65
|
+
|
|
66
|
+
uniform vec2 u_resolution;
|
|
67
|
+
uniform float u_time;
|
|
68
|
+
uniform sampler2D u_texture0;
|
|
69
|
+
uniform vec3 u_color1;
|
|
70
|
+
uniform vec3 u_color2;
|
|
71
|
+
|
|
72
|
+
varying vec2 v_texCoord;
|
|
73
|
+
|
|
74
|
+
void main() {
|
|
75
|
+
vec2 uv = v_texCoord;
|
|
76
|
+
|
|
77
|
+
vec4 state = texture2D(u_texture0, uv);
|
|
78
|
+
float height = state.r;
|
|
79
|
+
|
|
80
|
+
vec3 color = mix(u_color1, u_color2, (height + 1.0) * 0.5);
|
|
81
|
+
|
|
82
|
+
float t = u_time * 0.001;
|
|
83
|
+
float brightness = 1.0 + 0.1 * sin(uv.x * 10.0 + t) * sin(uv.y * 10.0 + t);
|
|
84
|
+
color *= brightness;
|
|
85
|
+
|
|
86
|
+
gl_FragColor = vec4(color, 1.0);
|
|
87
|
+
}
|
|
88
|
+
`
|
|
89
|
+
);
|
|
90
|
+
export {
|
|
91
|
+
o as rippleRenderShader,
|
|
92
|
+
t as rippleSimulationShader,
|
|
93
|
+
e as rippleVertexShader
|
|
94
|
+
};
|
package/dist/examples/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
1
|
+
export { Marble, type MarbleProps } from './Marble/MarbleScene';
|
|
2
|
+
export { marbleFragmentShader, marbleVertexShader } from './Marble/marbleShaders';
|
|
3
|
+
export { Ripple, type RippleProps } from './Ripple/RippleScene';
|
|
4
|
+
export { rippleRenderShader, rippleSimulationShader, rippleVertexShader } from './Ripple/rippleShaders';
|
package/dist/examples/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./Marble/MarbleScene.js"),r=require("./Marble/marbleShaders.js"),l=require("./Ripple/RippleScene.js"),e=require("./Ripple/rippleShaders.js");exports.Marble=a.Marble;exports.marbleFragmentShader=r.marbleFragmentShader;exports.marbleVertexShader=r.marbleVertexShader;exports.Ripple=l.Ripple;exports.rippleRenderShader=e.rippleRenderShader;exports.rippleSimulationShader=e.rippleSimulationShader;exports.rippleVertexShader=e.rippleVertexShader;
|
package/dist/examples/index.mjs
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { Marble as p } from "./Marble/MarbleScene.mjs";
|
|
2
|
+
import { marbleFragmentShader as o, marbleVertexShader as l } from "./Marble/marbleShaders.mjs";
|
|
3
|
+
import { Ripple as t } from "./Ripple/RippleScene.mjs";
|
|
4
|
+
import { rippleRenderShader as i, rippleSimulationShader as x, rippleVertexShader as S } from "./Ripple/rippleShaders.mjs";
|
|
3
5
|
export {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
p as Marble,
|
|
7
|
+
t as Ripple,
|
|
8
|
+
o as marbleFragmentShader,
|
|
7
9
|
l as marbleVertexShader,
|
|
8
10
|
i as rippleRenderShader,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
+
x as rippleSimulationShader,
|
|
12
|
+
S as rippleVertexShader
|
|
11
13
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,23 +1,49 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
import { JSX } from 'react/jsx-runtime';
|
|
2
3
|
|
|
3
|
-
export declare const
|
|
4
|
+
export declare const Marble: ({ marbleScale, tileScale, turbulence, swirl, veinFrequency, veinWidth, colorStart, colorEnd, veinColor, colorStartDark, colorEndDark, veinColorDark, className, style }: MarbleProps) => JSX.Element;
|
|
4
5
|
|
|
5
|
-
export declare const
|
|
6
|
+
export declare const marbleFragmentShader = "\nprecision highp float;\n \nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_marbleScale;\nuniform float u_turbulence;\nuniform float u_swirl;\nuniform vec3 u_colorStart;\nuniform vec3 u_colorEnd;\nuniform vec3 u_veinColor;\nuniform float u_veinFrequency;\nuniform float u_veinWidth;\nuniform float u_tileScale;\n \nvarying vec2 v_texCoord;\n \nfloat hash(float n) {\n return fract(sin(n) * 43758.5453123);\n}\n \nfloat hash(vec2 p) {\n return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n \nfloat noise(vec2 x) {\n vec2 i = floor(x);\n vec2 f = fract(x);\n \n float a = hash(i);\n float b = hash(i + vec2(1.0, 0.0));\n float c = hash(i + vec2(0.0, 1.0));\n float d = hash(i + vec2(1.0, 1.0));\n \n vec2 u = f * f * (3.0 - 2.0 * f);\n \n return clamp(mix(mix(a, b, u.x), mix(c, d, u.x), u.y), 0.0, 1.0);\n}\n \nfloat fbm(vec2 p, int octaves) {\n float value = 0.0;\n float amplitude = 0.5;\n float frequency = 1.0;\n float maxValue = 0.0;\n \n for (int i = 0; i < 10; i++) {\n if (i >= octaves) break;\n value += amplitude * noise(p * frequency);\n maxValue += amplitude;\n frequency *= 2.0;\n amplitude *= 0.5;\n }\n \n return value / maxValue;\n}\n \nvec2 swirl(vec2 p, float strength) {\n float theta = fbm(p, 3) * strength;\n float c = cos(theta);\n float s = sin(theta);\n return vec2(\n p.x * c - p.y * s,\n p.x * s + p.y * c\n );\n}\n\nvec2 applyTilePixelation(vec2 uv, float tileScale) {\n vec2 cell = floor(uv * tileScale);\n float cellHash = (1.3 * fbm(u_time * 0.00002 * vec2(pow(pow(cell.x * cell.y, 2.0), 0.5), 2.0) + cell, 1) + 0.8 * hash(cell)) * 0.5;\n float hashValue = cellHash * 3.0;\n float pixelSize = 1.0;\n\n if (hashValue < 1.0) pixelSize = 32.0;\n else if (hashValue < 1.3) pixelSize = 16.0;\n else if (hashValue < 1.8) pixelSize = 64.0;\n else if (hashValue < 1.85) pixelSize = 16.0;\n else if (hashValue < 2.2) pixelSize = 64.0;\n else if (hashValue < 2.3) pixelSize = 16.0;\n else if (hashValue < 2.6) pixelSize = 32.0;\n else pixelSize = 128.0;\n\n return floor(uv * pixelSize) / pixelSize;\n}\n \nvoid main() {\n vec2 uv = v_texCoord * 2.0 - 1.0;\n uv = uv * u_resolution / min(u_resolution.x, u_resolution.y);\n \n vec2 pixelatedUv = applyTilePixelation(uv, u_tileScale);\n \n float time = u_time * 0.25;\n \n vec2 swirlUv = swirl(pixelatedUv + vec2(time * 0.0005, time * 0.00083), max(0.0, min(10.0, u_swirl)));\n \n float baseNoise = fbm(swirlUv * max(0.1, u_marbleScale) + vec2(time * 0.1, time * 0.13), 5);\n \n float turbulenceAmount = max(0.0, min(1.0, u_turbulence));\n float turbulence = turbulenceAmount * fbm(swirlUv * max(0.1, u_marbleScale) * 2.0 + vec2(time * -0.15), 2);\n baseNoise = clamp(baseNoise + turbulence, 0.0, 1.0);\n \n float veinFreq = max(0.1, u_veinFrequency);\n float veinW = max(0.1, min(5.0, u_veinWidth));\n float veins = abs(sin(baseNoise * veinFreq * 3.14159));\n veins = pow(veins, veinW);\n veins = clamp(veins, 0.0, 1.0);\n \n vec3 baseColor = mix(u_colorStart, u_colorEnd, baseNoise);\n \n vec3 marbleColor = mix(baseColor, u_veinColor, veins);\n \n float highlight = pow(fbm(swirlUv * max(0.1, u_marbleScale) * 4.0, 2), 3.0) * 0.2;\n \n marbleColor = floor(marbleColor * 32.0) / 32.0;\n marbleColor = mix(marbleColor, u_veinColor, veins * 0.5);\n marbleColor = marbleColor + 0.0425;\n marbleColor = clamp(marbleColor, 0.0, 1.0);\n\n marbleColor = mix(marbleColor, u_veinColor, 0.7);\n gl_FragColor = vec4(marbleColor, 1.0);\n}\n";
|
|
6
7
|
|
|
7
|
-
export declare
|
|
8
|
+
export declare interface MarbleProps {
|
|
9
|
+
marbleScale?: number;
|
|
10
|
+
tileScale?: number;
|
|
11
|
+
turbulence?: number;
|
|
12
|
+
swirl?: number;
|
|
13
|
+
colorStart?: Vec3;
|
|
14
|
+
colorEnd?: Vec3;
|
|
15
|
+
veinColor?: Vec3;
|
|
16
|
+
colorStartDark?: Vec3;
|
|
17
|
+
colorEndDark?: Vec3;
|
|
18
|
+
veinColorDark?: Vec3;
|
|
19
|
+
veinFrequency?: number;
|
|
20
|
+
veinWidth?: number;
|
|
21
|
+
className?: string;
|
|
22
|
+
style?: CSSProperties;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export declare const marbleVertexShader = "\n attribute vec2 a_position;\n varying vec2 v_texCoord;\n\n void main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n v_texCoord = a_position * 0.5 + 0.5;\n }\n";
|
|
8
26
|
|
|
9
|
-
export declare const
|
|
27
|
+
export declare const Ripple: ({ damping, mouseForce, color1, color2, iterations, className, style }: RippleProps) => JSX.Element;
|
|
10
28
|
|
|
11
|
-
export declare interface
|
|
29
|
+
export declare interface RippleProps {
|
|
12
30
|
damping?: number;
|
|
13
31
|
mouseForce?: number;
|
|
14
|
-
color1?:
|
|
15
|
-
color2?:
|
|
32
|
+
color1?: Vec3_2;
|
|
33
|
+
color2?: Vec3_2;
|
|
16
34
|
iterations?: number;
|
|
17
35
|
className?: string;
|
|
18
|
-
style?:
|
|
36
|
+
style?: CSSProperties;
|
|
19
37
|
}
|
|
20
38
|
|
|
39
|
+
export declare const rippleRenderShader = "\n precision highp float;\n \n uniform vec2 u_resolution;\n uniform float u_time;\n uniform sampler2D u_texture0;\n uniform vec3 u_color1;\n uniform vec3 u_color2;\n \n varying vec2 v_texCoord;\n \n void main() {\n vec2 uv = v_texCoord;\n \n vec4 state = texture2D(u_texture0, uv);\n float height = state.r;\n \n vec3 color = mix(u_color1, u_color2, (height + 1.0) * 0.5);\n \n float t = u_time * 0.001;\n float brightness = 1.0 + 0.1 * sin(uv.x * 10.0 + t) * sin(uv.y * 10.0 + t);\n color *= brightness;\n \n gl_FragColor = vec4(color, 1.0);\n }\n";
|
|
40
|
+
|
|
41
|
+
export declare const rippleSimulationShader = "\n precision highp float;\n \n uniform vec2 u_resolution;\n uniform float u_time;\n uniform sampler2D u_texture0;\n uniform vec2 u_mouse;\n uniform float u_mouseForce;\n uniform float u_damping;\n \n varying vec2 v_texCoord;\n \n void main() {\n vec2 uv = v_texCoord;\n vec2 texelSize = 1.0 / u_resolution;\n \n vec4 state = texture2D(u_texture0, uv);\n float height = state.r;\n float velocity = state.g;\n \n float north = texture2D(u_texture0, uv + vec2(0.0, texelSize.y)).r;\n float south = texture2D(u_texture0, uv - vec2(0.0, texelSize.y)).r;\n float east = texture2D(u_texture0, uv + vec2(texelSize.x, 0.0)).r;\n float west = texture2D(u_texture0, uv - vec2(texelSize.x, 0.0)).r;\n \n float newVelocity = velocity + ((north + south + east + west) / 4.0 - height) * 2.0;\n newVelocity *= u_damping;\n \n float newHeight = height + newVelocity;\n \n vec2 mouseVec = u_mouse - uv;\n float mouseDistance = length(mouseVec);\n if (mouseDistance < 0.05 && u_mouseForce > 0.0) {\n newHeight += 0.5;\n }\n \n float startTime = mod(u_time * 0.001, 10.0);\n if (startTime < 0.2) {\n vec2 center = vec2(0.5, 0.5);\n float centerDist = length(uv - center);\n if (centerDist < 0.05) {\n newHeight += 0.5 * (1.0 - startTime * 5.0);\n }\n }\n \n gl_FragColor = vec4(newHeight, newVelocity, 0.0, 1.0);\n }\n";
|
|
42
|
+
|
|
43
|
+
export declare const rippleVertexShader = "\n attribute vec2 a_position;\n varying vec2 v_texCoord;\n void main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n v_texCoord = a_position * 0.5 + 0.5;\n }\n";
|
|
44
|
+
|
|
21
45
|
declare type Vec3 = [number, number, number];
|
|
22
46
|
|
|
47
|
+
declare type Vec3_2 = [number, number, number];
|
|
48
|
+
|
|
23
49
|
export { }
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./src/core/lib/vectorUtils.js"),n=require("./src/core/lib/createShaderConfig.js"),a=require("./src/core/managers/FBOManager.js"),o=require("./src/core/managers/WebGLManager.js"),s=require("./src/core/systems/Passes.js"),t=require("./src/core/systems/Postprocessing.js"),i=require("./src/react/components/base/BasePingPongShaderComponent.js"),c=require("./src/react/components/base/BaseShaderComponent.js"),g=require("./src/react/components/engine/PingPongShaderEngine.js"),d=require("./src/react/components/engine/ShaderEngine.js"),P=require("./src/react/hooks/useDarkMode.js"),u=require("./src/react/hooks/usePingPongPasses.js"),m=require("./src/react/hooks/useUniformUpdaters.js"),r=require("./src/react/lib/createUniformUpdater.js");exports.createTypedFloat32Array=e.createTypedFloat32Array;exports.mat2=e.mat2;exports.mat3=e.mat3;exports.mat4=e.mat4;exports.vec2=e.vec2;exports.vec3=e.vec3;exports.vec4=e.vec4;exports.createShaderConfig=n.createShaderConfig;exports.FBOManager=a.FBOManager;exports.WebGLManager=o.WebGLManager;exports.Passes=s.Passes;exports.Postprocessing=t.Postprocessing;exports.BasePingPongShaderComponent=i.BasePingPongShaderComponent;exports.BaseShaderComponent=c.BaseShaderComponent;exports.PingPongShaderEngine=g.PingPongShaderEngine;exports.ShaderEngine=d.ShaderEngine;exports.useDarkMode=P.useDarkMode;exports.usePingPongPasses=u.usePingPongPasses;exports.useUniformUpdaters=m.useUniformUpdaters;exports.createCommonUpdaters=r.createCommonUpdaters;exports.createUniformUpdater=r.createUniformUpdater;exports.createUniformUpdaters=r.createUniformUpdaters;
|
package/dist/index.mjs
CHANGED
|
@@ -1,149 +1,38 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
registerEffect(e) {
|
|
17
|
-
this.effects.has(e.id) && console.warn(`Effect with id ${e.id} already exists, overwriting`), this.webglManager.resources.has(e.programId) || this.webglManager.createProgram(e.programId, e.shaderConfig), this.effects.set(e.id, e);
|
|
18
|
-
}
|
|
19
|
-
removeEffect(e) {
|
|
20
|
-
if (!this.effects.has(e)) {
|
|
21
|
-
console.warn(`Effect with id ${e} not found`);
|
|
22
|
-
return;
|
|
23
|
-
}
|
|
24
|
-
this.effects.delete(e);
|
|
25
|
-
}
|
|
26
|
-
createChain(e, a, t, r = null, n = this.defaultFramebufferOptions) {
|
|
27
|
-
this.chains.has(e) && console.warn(`Chain with id ${e} already exists, overwriting`);
|
|
28
|
-
const s = [];
|
|
29
|
-
for (const o of a) {
|
|
30
|
-
const f = this.effects.get(o);
|
|
31
|
-
if (!f)
|
|
32
|
-
throw new Error(`Effect with id ${o} not found`);
|
|
33
|
-
s.push(f);
|
|
34
|
-
}
|
|
35
|
-
const i = [];
|
|
36
|
-
for (let o = 0; o < s.length - 1; o++) {
|
|
37
|
-
const f = `${e}-intermediate-${o}`;
|
|
38
|
-
this.webglManager.fbo.createFramebuffer(f, n), i.push(f);
|
|
39
|
-
}
|
|
40
|
-
this.chains.set(e, {
|
|
41
|
-
id: e,
|
|
42
|
-
effects: s,
|
|
43
|
-
inputFramebufferId: t,
|
|
44
|
-
outputFramebufferId: r,
|
|
45
|
-
intermediateFramebufferIds: i
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
removeChain(e) {
|
|
49
|
-
const a = this.chains.get(e);
|
|
50
|
-
if (!a) {
|
|
51
|
-
console.warn(`Chain with id ${e} not found`);
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
a.intermediateFramebufferIds.forEach((t) => {
|
|
55
|
-
this.webglManager.fbo.destroy(t);
|
|
56
|
-
}), this.chains.delete(e);
|
|
57
|
-
}
|
|
58
|
-
generatePasses(e, a) {
|
|
59
|
-
const t = this.chains.get(e);
|
|
60
|
-
if (!t)
|
|
61
|
-
throw new Error(`Chain with id ${e} not found`);
|
|
62
|
-
const r = [], n = t.effects.filter((s) => s.enabled);
|
|
63
|
-
return n.length === 0 ? [{
|
|
64
|
-
programId: "copy-shader",
|
|
65
|
-
// Assuming you have a simple copy shader
|
|
66
|
-
inputTextures: [{
|
|
67
|
-
id: t.inputFramebufferId,
|
|
68
|
-
textureUnit: 0,
|
|
69
|
-
bindingType: "read"
|
|
70
|
-
}],
|
|
71
|
-
outputFramebuffer: t.outputFramebufferId,
|
|
72
|
-
renderOptions: { clear: !0 }
|
|
73
|
-
}] : (n.forEach((s, i) => {
|
|
74
|
-
const o = i === 0, f = i === n.length - 1, c = o ? t.inputFramebufferId : t.intermediateFramebufferIds[i - 1], g = f ? t.outputFramebufferId : t.intermediateFramebufferIds[i], d = {};
|
|
75
|
-
Object.entries(s.uniforms).forEach(([h, b]) => {
|
|
76
|
-
const p = h.startsWith("u_") ? h : `u_${h}`, u = b;
|
|
77
|
-
d[p] = {
|
|
78
|
-
type: u.type,
|
|
79
|
-
value: typeof u.value == "function" ? (l, m, w) => {
|
|
80
|
-
const F = u.value;
|
|
81
|
-
return F(l, m, w);
|
|
82
|
-
} : u.value
|
|
83
|
-
};
|
|
84
|
-
}), r.push({
|
|
85
|
-
programId: s.programId,
|
|
86
|
-
inputTextures: [{
|
|
87
|
-
id: c,
|
|
88
|
-
textureUnit: 0,
|
|
89
|
-
bindingType: "read"
|
|
90
|
-
}],
|
|
91
|
-
outputFramebuffer: g,
|
|
92
|
-
uniforms: d,
|
|
93
|
-
renderOptions: { clear: !0 }
|
|
94
|
-
});
|
|
95
|
-
}), r);
|
|
96
|
-
}
|
|
97
|
-
process(e, a) {
|
|
98
|
-
const t = this.generatePasses(e, a);
|
|
99
|
-
for (const r of t)
|
|
100
|
-
r.outputFramebuffer ? this.webglManager.fbo.bindFramebuffer(r.outputFramebuffer) : this.webglManager.fbo.bindFramebuffer(null), this.webglManager.prepareRender(r.programId, r.renderOptions), r.inputTextures.forEach((n) => {
|
|
101
|
-
this.webglManager.fbo.bindTexture(n.id, n.textureUnit), this.webglManager.setUniform(
|
|
102
|
-
r.programId,
|
|
103
|
-
`u_texture${n.textureUnit}`,
|
|
104
|
-
n.textureUnit,
|
|
105
|
-
"sampler2D"
|
|
106
|
-
);
|
|
107
|
-
}), r.uniforms && Object.entries(r.uniforms).forEach(([n, s]) => {
|
|
108
|
-
const i = typeof s.value == "function" ? s.value(a, this.webglManager.context.canvas.width, this.webglManager.context.canvas.height) : s.value;
|
|
109
|
-
this.webglManager.setUniform(
|
|
110
|
-
r.programId,
|
|
111
|
-
n,
|
|
112
|
-
i,
|
|
113
|
-
s.type
|
|
114
|
-
);
|
|
115
|
-
}), this.webglManager.context.drawArrays(
|
|
116
|
-
this.webglManager.context.TRIANGLE_STRIP,
|
|
117
|
-
0,
|
|
118
|
-
4
|
|
119
|
-
);
|
|
120
|
-
}
|
|
121
|
-
resizeFramebuffers(e, a) {
|
|
122
|
-
for (const t of this.chains.values())
|
|
123
|
-
for (const r of t.intermediateFramebufferIds)
|
|
124
|
-
this.webglManager.fbo.resizeFramebuffer(r, e, a);
|
|
125
|
-
}
|
|
126
|
-
destroyAll() {
|
|
127
|
-
for (const e of this.chains.values())
|
|
128
|
-
for (const a of e.intermediateFramebufferIds)
|
|
129
|
-
this.webglManager.fbo.destroy(a);
|
|
130
|
-
this.chains.clear(), this.effects.clear();
|
|
131
|
-
}
|
|
132
|
-
}
|
|
1
|
+
import { createTypedFloat32Array as o, mat2 as t, mat3 as a, mat4 as m, vec2 as n, vec3 as p, vec4 as f } from "./src/core/lib/vectorUtils.mjs";
|
|
2
|
+
import { createShaderConfig as x } from "./src/core/lib/createShaderConfig.mjs";
|
|
3
|
+
import { FBOManager as d } from "./src/core/managers/FBOManager.mjs";
|
|
4
|
+
import { WebGLManager as c } from "./src/core/managers/WebGLManager.mjs";
|
|
5
|
+
import { Passes as U } from "./src/core/systems/Passes.mjs";
|
|
6
|
+
import { Postprocessing as S } from "./src/core/systems/Postprocessing.mjs";
|
|
7
|
+
import { BasePingPongShaderComponent as u } from "./src/react/components/base/BasePingPongShaderComponent.mjs";
|
|
8
|
+
import { BaseShaderComponent as B } from "./src/react/components/base/BaseShaderComponent.mjs";
|
|
9
|
+
import { PingPongShaderEngine as y } from "./src/react/components/engine/PingPongShaderEngine.mjs";
|
|
10
|
+
import { ShaderEngine as F } from "./src/react/components/engine/ShaderEngine.mjs";
|
|
11
|
+
import { useDarkMode as k } from "./src/react/hooks/useDarkMode.mjs";
|
|
12
|
+
import { usePingPongPasses as A } from "./src/react/hooks/usePingPongPasses.mjs";
|
|
13
|
+
import { useUniformUpdaters as G } from "./src/react/hooks/useUniformUpdaters.mjs";
|
|
14
|
+
import { createCommonUpdaters as O, createUniformUpdater as T, createUniformUpdaters as W } from "./src/react/lib/createUniformUpdater.mjs";
|
|
133
15
|
export {
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
16
|
+
u as BasePingPongShaderComponent,
|
|
17
|
+
B as BaseShaderComponent,
|
|
18
|
+
d as FBOManager,
|
|
19
|
+
U as Passes,
|
|
20
|
+
y as PingPongShaderEngine,
|
|
21
|
+
S as Postprocessing,
|
|
22
|
+
F as ShaderEngine,
|
|
23
|
+
c as WebGLManager,
|
|
24
|
+
O as createCommonUpdaters,
|
|
25
|
+
x as createShaderConfig,
|
|
26
|
+
o as createTypedFloat32Array,
|
|
27
|
+
T as createUniformUpdater,
|
|
28
|
+
W as createUniformUpdaters,
|
|
29
|
+
t as mat2,
|
|
30
|
+
a as mat3,
|
|
31
|
+
m as mat4,
|
|
32
|
+
k as useDarkMode,
|
|
147
33
|
A as usePingPongPasses,
|
|
148
|
-
|
|
34
|
+
G as useUniformUpdaters,
|
|
35
|
+
n as vec2,
|
|
36
|
+
p as vec3,
|
|
37
|
+
f as vec4
|
|
149
38
|
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const marbleFragmentShader = "\nprecision highp float;\n \nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_marbleScale;\nuniform float u_turbulence;\nuniform float u_swirl;\nuniform vec3 u_colorStart;\nuniform vec3 u_colorEnd;\nuniform vec3 u_veinColor;\nuniform float u_veinFrequency;\nuniform float u_veinWidth;\nuniform float u_tileScale;\n \nvarying vec2 v_texCoord;\n \nfloat hash(float n) {\n return fract(sin(n) * 43758.5453123);\n}\n \nfloat hash(vec2 p) {\n return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n \nfloat noise(vec2 x) {\n vec2 i = floor(x);\n vec2 f = fract(x);\n \n float a = hash(i);\n float b = hash(i + vec2(1.0, 0.0));\n float c = hash(i + vec2(0.0, 1.0));\n float d = hash(i + vec2(1.0, 1.0));\n \n vec2 u = f * f * (3.0 - 2.0 * f);\n \n return clamp(mix(mix(a, b, u.x), mix(c, d, u.x), u.y), 0.0, 1.0);\n}\n \nfloat fbm(vec2 p, int octaves) {\n float value = 0.0;\n float amplitude = 0.5;\n float frequency = 1.0;\n float maxValue = 0.0;\n \n for (int i = 0; i < 10; i++) {\n if (i >= octaves) break;\n value += amplitude * noise(p * frequency);\n maxValue += amplitude;\n frequency *= 2.0;\n amplitude *= 0.5;\n }\n \n return value / maxValue;\n}\n \nvec2 swirl(vec2 p, float strength) {\n float theta = fbm(p, 3) * strength;\n float c = cos(theta);\n float s = sin(theta);\n return vec2(\n p.x * c - p.y * s,\n p.x * s + p.y * c\n );\n}\n\nvec2 applyTilePixelation(vec2 uv, float tileScale) {\n vec2 cell = floor(uv * tileScale);\n float cellHash = (1.3 * fbm(u_time * 0.00002 * vec2(pow(pow(cell.x * cell.y, 2.0), 0.5), 2.0) + cell, 1) + 0.8 * hash(cell)) * 0.5;\n float hashValue = cellHash * 3.0;\n float pixelSize = 1.0;\n\n if (hashValue < 1.0) pixelSize = 32.0;\n else if (hashValue < 1.3) pixelSize = 16.0;\n else if (hashValue < 1.8) pixelSize = 64.0;\n else if (hashValue < 1.85) pixelSize = 16.0;\n else if (hashValue < 2.2) pixelSize = 64.0;\n else if (hashValue < 2.3) pixelSize = 16.0;\n else if (hashValue < 2.6) pixelSize = 32.0;\n else pixelSize = 128.0;\n\n return floor(uv * pixelSize) / pixelSize;\n}\n \nvoid main() {\n vec2 uv = v_texCoord * 2.0 - 1.0;\n uv = uv * u_resolution / min(u_resolution.x, u_resolution.y);\n \n vec2 pixelatedUv = applyTilePixelation(uv, u_tileScale);\n \n float time = u_time * 0.25;\n \n vec2 swirlUv = swirl(pixelatedUv + vec2(time * 0.0005, time * 0.00083), max(0.0, min(10.0, u_swirl)));\n \n float baseNoise = fbm(swirlUv * max(0.1, u_marbleScale) + vec2(time * 0.1, time * 0.13), 5);\n \n float turbulenceAmount = max(0.0, min(1.0, u_turbulence));\n float turbulence = turbulenceAmount * fbm(swirlUv * max(0.1, u_marbleScale) * 2.0 + vec2(time * -0.15), 2);\n baseNoise = clamp(baseNoise + turbulence, 0.0, 1.0);\n \n float veinFreq = max(0.1, u_veinFrequency);\n float veinW = max(0.1, min(5.0, u_veinWidth));\n float veins = abs(sin(baseNoise * veinFreq * 3.14159));\n veins = pow(veins, veinW);\n veins = clamp(veins, 0.0, 1.0);\n \n vec3 baseColor = mix(u_colorStart, u_colorEnd, baseNoise);\n \n vec3 marbleColor = mix(baseColor, u_veinColor, veins);\n \n float highlight = pow(fbm(swirlUv * max(0.1, u_marbleScale) * 4.0, 2), 3.0) * 0.2;\n \n marbleColor = floor(marbleColor * 32.0) / 32.0;\n marbleColor = mix(marbleColor, u_veinColor, veins * 0.5);\n marbleColor = marbleColor + 0.0425;\n marbleColor = clamp(marbleColor, 0.0, 1.0);\n\n marbleColor = mix(marbleColor, u_veinColor, 0.7);\n gl_FragColor = vec4(marbleColor, 1.0);\n}\n";
|
|
2
|
+
|
|
3
|
+
export declare const marbleVertexShader = "\n attribute vec2 a_position;\n varying vec2 v_texCoord;\n\n void main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n v_texCoord = a_position * 0.5 + 0.5;\n }\n";
|
|
4
|
+
|
|
5
|
+
export { }
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const rippleRenderShader = "\n precision highp float;\n \n uniform vec2 u_resolution;\n uniform float u_time;\n uniform sampler2D u_texture0;\n uniform vec3 u_color1;\n uniform vec3 u_color2;\n \n varying vec2 v_texCoord;\n \n void main() {\n vec2 uv = v_texCoord;\n \n vec4 state = texture2D(u_texture0, uv);\n float height = state.r;\n \n vec3 color = mix(u_color1, u_color2, (height + 1.0) * 0.5);\n \n float t = u_time * 0.001;\n float brightness = 1.0 + 0.1 * sin(uv.x * 10.0 + t) * sin(uv.y * 10.0 + t);\n color *= brightness;\n \n gl_FragColor = vec4(color, 1.0);\n }\n";
|
|
2
|
+
|
|
3
|
+
export declare const rippleSimulationShader = "\n precision highp float;\n \n uniform vec2 u_resolution;\n uniform float u_time;\n uniform sampler2D u_texture0;\n uniform vec2 u_mouse;\n uniform float u_mouseForce;\n uniform float u_damping;\n \n varying vec2 v_texCoord;\n \n void main() {\n vec2 uv = v_texCoord;\n vec2 texelSize = 1.0 / u_resolution;\n \n vec4 state = texture2D(u_texture0, uv);\n float height = state.r;\n float velocity = state.g;\n \n float north = texture2D(u_texture0, uv + vec2(0.0, texelSize.y)).r;\n float south = texture2D(u_texture0, uv - vec2(0.0, texelSize.y)).r;\n float east = texture2D(u_texture0, uv + vec2(texelSize.x, 0.0)).r;\n float west = texture2D(u_texture0, uv - vec2(texelSize.x, 0.0)).r;\n \n float newVelocity = velocity + ((north + south + east + west) / 4.0 - height) * 2.0;\n newVelocity *= u_damping;\n \n float newHeight = height + newVelocity;\n \n vec2 mouseVec = u_mouse - uv;\n float mouseDistance = length(mouseVec);\n if (mouseDistance < 0.05 && u_mouseForce > 0.0) {\n newHeight += 0.5;\n }\n \n float startTime = mod(u_time * 0.001, 10.0);\n if (startTime < 0.2) {\n vec2 center = vec2(0.5, 0.5);\n float centerDist = length(uv - center);\n if (centerDist < 0.05) {\n newHeight += 0.5 * (1.0 - startTime * 5.0);\n }\n }\n \n gl_FragColor = vec4(newHeight, newVelocity, 0.0, 1.0);\n }\n";
|
|
4
|
+
|
|
5
|
+
export declare const rippleVertexShader = "\n attribute vec2 a_position;\n varying vec2 v_texCoord;\n void main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n v_texCoord = a_position * 0.5 + 0.5;\n }\n";
|
|
6
|
+
|
|
7
|
+
export { }
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=s=>{const{vertexShader:a,fragmentShader:n,uniformNames:r={},attributeConfigs:i=[]}=s,o={...{u_time:"float",u_resolution:"vec2"},...r},m=Object.entries(o).map(([e,d])=>({name:e,type:d})),t=i.map(e=>({name:e.name,size:e.size,type:e.type,normalized:e.normalized??!1,stride:e.stride??0,offset:e.offset??0,instanced:e.instanced}));return t.some(e=>e.name==="a_position")||t.push({name:"a_position",size:2,type:"FLOAT",normalized:!1,stride:0,offset:0,instanced:!1}),{vertexShader:a,fragmentShader:n,uniforms:m,attributes:t}};exports.createShaderConfig=f;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
const l = (s) => {
|
|
2
|
+
const { vertexShader: a, fragmentShader: n, uniformNames: r = {}, attributeConfigs: i = [] } = s, o = { ...{
|
|
3
|
+
u_time: "float",
|
|
4
|
+
u_resolution: "vec2"
|
|
5
|
+
}, ...r }, m = Object.entries(o).map(([e, f]) => ({
|
|
6
|
+
name: e,
|
|
7
|
+
type: f
|
|
8
|
+
})), t = i.map((e) => ({
|
|
9
|
+
name: e.name,
|
|
10
|
+
size: e.size,
|
|
11
|
+
type: e.type,
|
|
12
|
+
normalized: e.normalized ?? !1,
|
|
13
|
+
stride: e.stride ?? 0,
|
|
14
|
+
offset: e.offset ?? 0,
|
|
15
|
+
instanced: e.instanced
|
|
16
|
+
}));
|
|
17
|
+
return t.some((e) => e.name === "a_position") || t.push({
|
|
18
|
+
name: "a_position",
|
|
19
|
+
size: 2,
|
|
20
|
+
type: "FLOAT",
|
|
21
|
+
normalized: !1,
|
|
22
|
+
stride: 0,
|
|
23
|
+
offset: 0,
|
|
24
|
+
instanced: !1
|
|
25
|
+
}), {
|
|
26
|
+
vertexShader: a,
|
|
27
|
+
fragmentShader: n,
|
|
28
|
+
uniforms: m,
|
|
29
|
+
attributes: t
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
export {
|
|
33
|
+
l as createShaderConfig
|
|
34
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function n(r){return new Float32Array(r)}function e(r){const t=new Float32Array(2);return r&&t.set(r),t}function a(r){const t=new Float32Array(3);return r&&t.set(r),t}function o(r){const t=new Float32Array(4);return r&&t.set(r),t}function c(r){const t=new Float32Array(4);return r&&t.set(r),t}function i(r){const t=new Float32Array(9);return r&&t.set(r),t}function f(r){const t=new Float32Array(16);return r&&t.set(r),t}exports.createTypedFloat32Array=n;exports.mat2=c;exports.mat3=i;exports.mat4=f;exports.vec2=e;exports.vec3=a;exports.vec4=o;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
function n(r) {
|
|
2
|
+
return new Float32Array(r);
|
|
3
|
+
}
|
|
4
|
+
function o(r) {
|
|
5
|
+
const t = new Float32Array(2);
|
|
6
|
+
return r && t.set(r), t;
|
|
7
|
+
}
|
|
8
|
+
function e(r) {
|
|
9
|
+
const t = new Float32Array(3);
|
|
10
|
+
return r && t.set(r), t;
|
|
11
|
+
}
|
|
12
|
+
function a(r) {
|
|
13
|
+
const t = new Float32Array(4);
|
|
14
|
+
return r && t.set(r), t;
|
|
15
|
+
}
|
|
16
|
+
function c(r) {
|
|
17
|
+
const t = new Float32Array(4);
|
|
18
|
+
return r && t.set(r), t;
|
|
19
|
+
}
|
|
20
|
+
function f(r) {
|
|
21
|
+
const t = new Float32Array(9);
|
|
22
|
+
return r && t.set(r), t;
|
|
23
|
+
}
|
|
24
|
+
function i(r) {
|
|
25
|
+
const t = new Float32Array(16);
|
|
26
|
+
return r && t.set(r), t;
|
|
27
|
+
}
|
|
28
|
+
export {
|
|
29
|
+
n as createTypedFloat32Array,
|
|
30
|
+
c as mat2,
|
|
31
|
+
f as mat3,
|
|
32
|
+
i as mat4,
|
|
33
|
+
o as vec2,
|
|
34
|
+
e as vec3,
|
|
35
|
+
a as vec4
|
|
36
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class x{constructor(t){this.resources=new Map,this.floatTextureExtension=null,this.gl=t,this.floatTextureExtension=t.getExtension("OES_texture_float"),this.floatTexturesSupported=!!this.floatTextureExtension,t.getExtension("OES_texture_float_linear")}createFramebuffer(t,e){const r=this.gl,{width:s,height:u,textureCount:o=2,textureOptions:E={}}=e,n=[];for(let f=0;f<o;f++){const T=this.createTexture({width:s,height:u,...E});n.push(T)}const i=r.createFramebuffer();if(!i)throw new Error("Failed to create framebuffer");const a={framebuffer:i,textures:n,currentTextureIndex:0,width:s,height:u};return this.resources.set(t,a),a}createTexture(t){const e=this.gl,{width:r,height:s,internalFormat:u=e.RGBA,format:o=e.RGBA,type:E=this.floatTexturesSupported?e.FLOAT:e.UNSIGNED_BYTE,minFilter:n=e.NEAREST,magFilter:i=e.NEAREST,wrapS:a=e.CLAMP_TO_EDGE,wrapT:f=e.CLAMP_TO_EDGE,generateMipmap:T=!1}=t,c=e.createTexture();if(!c)throw new Error("Failed to create texture");return e.bindTexture(e.TEXTURE_2D,c),e.texImage2D(e.TEXTURE_2D,0,u,r,s,0,o,E,null),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,n),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,i),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,a),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,f),T&&e.generateMipmap(e.TEXTURE_2D),c}bindFramebuffer(t,e){const r=this.gl;if(t===null){r.bindFramebuffer(r.FRAMEBUFFER,null);return}const s=this.resources.get(t);if(!s)throw new Error(`Framebuffer with id ${t} not found`);const u=e??s.currentTextureIndex;r.bindFramebuffer(r.FRAMEBUFFER,s.framebuffer),r.framebufferTexture2D(r.FRAMEBUFFER,r.COLOR_ATTACHMENT0,r.TEXTURE_2D,s.textures[u],0);const o=r.checkFramebufferStatus(r.FRAMEBUFFER);if(o!==r.FRAMEBUFFER_COMPLETE)throw new Error(`Framebuffer is not complete: ${o}`)}bindTexture(t,e,r){const s=this.gl,u=this.resources.get(t);if(!u)throw new Error(`Framebuffer with id ${t} not found`);const o=r??u.currentTextureIndex;s.activeTexture(s.TEXTURE0+e),s.bindTexture(s.TEXTURE_2D,u.textures[o])}swapTextures(t){const e=this.resources.get(t);if(!e)throw new Error(`Framebuffer with id ${t} not found`);e.currentTextureIndex=(e.currentTextureIndex+1)%e.textures.length}getPingPongIndices(t){const e=this.resources.get(t);if(!e)throw new Error(`Framebuffer with id ${t} not found`);const r=e.currentTextureIndex,s=(r+1)%e.textures.length;return{read:r,write:s}}resizeFramebuffer(t,e,r){const s=this.gl,u=this.resources.get(t);if(!u)throw new Error(`Framebuffer with id ${t} not found`);u.width===e&&u.height===r||(u.textures.forEach(o=>{s.bindTexture(s.TEXTURE_2D,o),s.texImage2D(s.TEXTURE_2D,0,s.RGBA,e,r,0,s.RGBA,this.floatTexturesSupported?s.FLOAT:s.UNSIGNED_BYTE,null)}),u.width=e,u.height=r)}destroy(t){const e=this.gl,r=this.resources.get(t);r&&(r.textures.forEach(s=>{e.deleteTexture(s)}),e.deleteFramebuffer(r.framebuffer),this.resources.delete(t))}destroyAll(){Array.from(this.resources.keys()).forEach(t=>{this.destroy(t)})}isFloatTexturesSupported(){return this.floatTexturesSupported}}exports.FBOManager=x;
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
class h {
|
|
2
|
+
constructor(t) {
|
|
3
|
+
this.resources = /* @__PURE__ */ new Map(), this.floatTextureExtension = null, this.gl = t, this.floatTextureExtension = t.getExtension("OES_texture_float"), this.floatTexturesSupported = !!this.floatTextureExtension, t.getExtension("OES_texture_float_linear");
|
|
4
|
+
}
|
|
5
|
+
createFramebuffer(t, e) {
|
|
6
|
+
const r = this.gl, { width: s, height: u, textureCount: o = 2, textureOptions: a = {} } = e, n = [];
|
|
7
|
+
for (let f = 0; f < o; f++) {
|
|
8
|
+
const T = this.createTexture({
|
|
9
|
+
width: s,
|
|
10
|
+
height: u,
|
|
11
|
+
...a
|
|
12
|
+
});
|
|
13
|
+
n.push(T);
|
|
14
|
+
}
|
|
15
|
+
const i = r.createFramebuffer();
|
|
16
|
+
if (!i)
|
|
17
|
+
throw new Error("Failed to create framebuffer");
|
|
18
|
+
const E = {
|
|
19
|
+
framebuffer: i,
|
|
20
|
+
textures: n,
|
|
21
|
+
currentTextureIndex: 0,
|
|
22
|
+
width: s,
|
|
23
|
+
height: u
|
|
24
|
+
};
|
|
25
|
+
return this.resources.set(t, E), E;
|
|
26
|
+
}
|
|
27
|
+
createTexture(t) {
|
|
28
|
+
const e = this.gl, {
|
|
29
|
+
width: r,
|
|
30
|
+
height: s,
|
|
31
|
+
internalFormat: u = e.RGBA,
|
|
32
|
+
format: o = e.RGBA,
|
|
33
|
+
type: a = this.floatTexturesSupported ? e.FLOAT : e.UNSIGNED_BYTE,
|
|
34
|
+
minFilter: n = e.NEAREST,
|
|
35
|
+
magFilter: i = e.NEAREST,
|
|
36
|
+
wrapS: E = e.CLAMP_TO_EDGE,
|
|
37
|
+
wrapT: f = e.CLAMP_TO_EDGE,
|
|
38
|
+
generateMipmap: T = !1
|
|
39
|
+
} = t, c = e.createTexture();
|
|
40
|
+
if (!c)
|
|
41
|
+
throw new Error("Failed to create texture");
|
|
42
|
+
return e.bindTexture(e.TEXTURE_2D, c), e.texImage2D(e.TEXTURE_2D, 0, u, r, s, 0, o, a, null), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, n), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, i), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, E), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, f), T && e.generateMipmap(e.TEXTURE_2D), c;
|
|
43
|
+
}
|
|
44
|
+
bindFramebuffer(t, e) {
|
|
45
|
+
const r = this.gl;
|
|
46
|
+
if (t === null) {
|
|
47
|
+
r.bindFramebuffer(r.FRAMEBUFFER, null);
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
const s = this.resources.get(t);
|
|
51
|
+
if (!s)
|
|
52
|
+
throw new Error(`Framebuffer with id ${t} not found`);
|
|
53
|
+
const u = e ?? s.currentTextureIndex;
|
|
54
|
+
r.bindFramebuffer(r.FRAMEBUFFER, s.framebuffer), r.framebufferTexture2D(
|
|
55
|
+
r.FRAMEBUFFER,
|
|
56
|
+
r.COLOR_ATTACHMENT0,
|
|
57
|
+
r.TEXTURE_2D,
|
|
58
|
+
s.textures[u],
|
|
59
|
+
0
|
|
60
|
+
);
|
|
61
|
+
const o = r.checkFramebufferStatus(r.FRAMEBUFFER);
|
|
62
|
+
if (o !== r.FRAMEBUFFER_COMPLETE)
|
|
63
|
+
throw new Error(`Framebuffer is not complete: ${o}`);
|
|
64
|
+
}
|
|
65
|
+
bindTexture(t, e, r) {
|
|
66
|
+
const s = this.gl, u = this.resources.get(t);
|
|
67
|
+
if (!u)
|
|
68
|
+
throw new Error(`Framebuffer with id ${t} not found`);
|
|
69
|
+
const o = r ?? u.currentTextureIndex;
|
|
70
|
+
s.activeTexture(s.TEXTURE0 + e), s.bindTexture(s.TEXTURE_2D, u.textures[o]);
|
|
71
|
+
}
|
|
72
|
+
swapTextures(t) {
|
|
73
|
+
const e = this.resources.get(t);
|
|
74
|
+
if (!e)
|
|
75
|
+
throw new Error(`Framebuffer with id ${t} not found`);
|
|
76
|
+
e.currentTextureIndex = (e.currentTextureIndex + 1) % e.textures.length;
|
|
77
|
+
}
|
|
78
|
+
getPingPongIndices(t) {
|
|
79
|
+
const e = this.resources.get(t);
|
|
80
|
+
if (!e)
|
|
81
|
+
throw new Error(`Framebuffer with id ${t} not found`);
|
|
82
|
+
const r = e.currentTextureIndex, s = (r + 1) % e.textures.length;
|
|
83
|
+
return { read: r, write: s };
|
|
84
|
+
}
|
|
85
|
+
resizeFramebuffer(t, e, r) {
|
|
86
|
+
const s = this.gl, u = this.resources.get(t);
|
|
87
|
+
if (!u)
|
|
88
|
+
throw new Error(`Framebuffer with id ${t} not found`);
|
|
89
|
+
u.width === e && u.height === r || (u.textures.forEach((o) => {
|
|
90
|
+
s.bindTexture(s.TEXTURE_2D, o), s.texImage2D(
|
|
91
|
+
s.TEXTURE_2D,
|
|
92
|
+
0,
|
|
93
|
+
s.RGBA,
|
|
94
|
+
e,
|
|
95
|
+
r,
|
|
96
|
+
0,
|
|
97
|
+
s.RGBA,
|
|
98
|
+
this.floatTexturesSupported ? s.FLOAT : s.UNSIGNED_BYTE,
|
|
99
|
+
null
|
|
100
|
+
);
|
|
101
|
+
}), u.width = e, u.height = r);
|
|
102
|
+
}
|
|
103
|
+
destroy(t) {
|
|
104
|
+
const e = this.gl, r = this.resources.get(t);
|
|
105
|
+
r && (r.textures.forEach((s) => {
|
|
106
|
+
e.deleteTexture(s);
|
|
107
|
+
}), e.deleteFramebuffer(r.framebuffer), this.resources.delete(t));
|
|
108
|
+
}
|
|
109
|
+
destroyAll() {
|
|
110
|
+
Array.from(this.resources.keys()).forEach((t) => {
|
|
111
|
+
this.destroy(t);
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
isFloatTexturesSupported() {
|
|
115
|
+
return this.floatTexturesSupported;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
export {
|
|
119
|
+
h as FBOManager
|
|
120
|
+
};
|