micugl 0.0.8 → 0.0.10

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.
Files changed (84) hide show
  1. package/dist/core/index.d.ts +7 -0
  2. package/dist/core/lib/createShaderConfig.d.ts +16 -0
  3. package/dist/core/lib/vectorUtils.d.ts +8 -0
  4. package/dist/core/managers/FBOManager.d.ts +21 -0
  5. package/dist/core/managers/FBOManager.js +1 -0
  6. package/dist/core/managers/FBOManager.mjs +127 -0
  7. package/dist/core/managers/WebGLManager.d.ts +35 -0
  8. package/dist/core/managers/WebGLManager.js +1 -0
  9. package/dist/core/managers/WebGLManager.mjs +281 -0
  10. package/dist/core/systems/Passes.d.ts +11 -0
  11. package/dist/core/systems/Passes.js +1 -0
  12. package/dist/core/systems/Passes.mjs +84 -0
  13. package/dist/core/systems/Postprocessing.d.ts +31 -0
  14. package/dist/core/systems/Postprocessing.js +1 -0
  15. package/dist/core/systems/Postprocessing.mjs +135 -0
  16. package/dist/core.js +1 -0
  17. package/dist/core.mjs +20 -0
  18. package/dist/index.d.ts +3 -49
  19. package/dist/index.js +1 -1
  20. package/dist/index.mjs +14 -14
  21. package/dist/react/components/base/BasePingPongShaderComponent.d.ts +21 -0
  22. package/dist/react/components/base/BaseShaderComponent.d.ts +15 -0
  23. package/dist/react/components/engine/PingPongShaderEngine.d.ts +12 -0
  24. package/dist/react/components/engine/ShaderEngine.d.ts +18 -0
  25. package/dist/react/components/index.d.ts +0 -0
  26. package/dist/react/hooks/index.d.ts +3 -0
  27. package/dist/react/hooks/useDarkMode.d.ts +1 -0
  28. package/dist/react/hooks/usePingPongPasses.d.ts +21 -0
  29. package/dist/react/hooks/useUniformUpdaters.d.ts +4 -0
  30. package/dist/react/index.d.ts +8 -0
  31. package/dist/react/lib/createUniformUpdater.d.ts +8 -0
  32. package/dist/react.js +1 -0
  33. package/dist/react.mjs +20 -0
  34. package/dist/types.d.ts +164 -204
  35. package/package.json +10 -40
  36. package/dist/MarbleScene.d.ts +0 -27
  37. package/dist/RippleScene.d.ts +0 -20
  38. package/dist/examples/Marble/MarbleScene.d.ts +0 -20
  39. package/dist/examples/Marble/MarbleScene.js +0 -1
  40. package/dist/examples/Marble/MarbleScene.mjs +0 -71
  41. package/dist/examples/Marble/marbleShaders.d.ts +0 -2
  42. package/dist/examples/Marble/marbleShaders.js +0 -129
  43. package/dist/examples/Marble/marbleShaders.mjs +0 -139
  44. package/dist/examples/Ripple/RippleScene.d.ts +0 -13
  45. package/dist/examples/Ripple/RippleScene.js +0 -1
  46. package/dist/examples/Ripple/RippleScene.mjs +0 -109
  47. package/dist/examples/Ripple/rippleShaders.d.ts +0 -3
  48. package/dist/examples/Ripple/rippleShaders.js +0 -80
  49. package/dist/examples/Ripple/rippleShaders.mjs +0 -94
  50. package/dist/examples/index.d.ts +0 -4
  51. package/dist/examples/index.js +0 -1
  52. package/dist/examples/index.mjs +0 -13
  53. package/dist/marbleShaders.d.ts +0 -5
  54. package/dist/rippleShaders.d.ts +0 -7
  55. package/dist/src/core/managers/FBOManager.js +0 -1
  56. package/dist/src/core/managers/FBOManager.mjs +0 -120
  57. package/dist/src/core/managers/WebGLManager.js +0 -1
  58. package/dist/src/core/managers/WebGLManager.mjs +0 -273
  59. package/dist/src/core/systems/Passes.js +0 -1
  60. package/dist/src/core/systems/Passes.mjs +0 -78
  61. package/dist/src/core/systems/Postprocessing.js +0 -1
  62. package/dist/src/core/systems/Postprocessing.mjs +0 -128
  63. package/dist/types.js +0 -1
  64. package/dist/types.mjs +0 -1
  65. /package/dist/{src/core → core}/lib/createShaderConfig.js +0 -0
  66. /package/dist/{src/core → core}/lib/createShaderConfig.mjs +0 -0
  67. /package/dist/{src/core → core}/lib/vectorUtils.js +0 -0
  68. /package/dist/{src/core → core}/lib/vectorUtils.mjs +0 -0
  69. /package/dist/{src/react → react}/components/base/BasePingPongShaderComponent.js +0 -0
  70. /package/dist/{src/react → react}/components/base/BasePingPongShaderComponent.mjs +0 -0
  71. /package/dist/{src/react → react}/components/base/BaseShaderComponent.js +0 -0
  72. /package/dist/{src/react → react}/components/base/BaseShaderComponent.mjs +0 -0
  73. /package/dist/{src/react → react}/components/engine/PingPongShaderEngine.js +0 -0
  74. /package/dist/{src/react → react}/components/engine/PingPongShaderEngine.mjs +0 -0
  75. /package/dist/{src/react → react}/components/engine/ShaderEngine.js +0 -0
  76. /package/dist/{src/react → react}/components/engine/ShaderEngine.mjs +0 -0
  77. /package/dist/{src/react → react}/hooks/useDarkMode.js +0 -0
  78. /package/dist/{src/react → react}/hooks/useDarkMode.mjs +0 -0
  79. /package/dist/{src/react → react}/hooks/usePingPongPasses.js +0 -0
  80. /package/dist/{src/react → react}/hooks/usePingPongPasses.mjs +0 -0
  81. /package/dist/{src/react → react}/hooks/useUniformUpdaters.js +0 -0
  82. /package/dist/{src/react → react}/hooks/useUniformUpdaters.mjs +0 -0
  83. /package/dist/{src/react → react}/lib/createUniformUpdater.js +0 -0
  84. /package/dist/{src/react → react}/lib/createUniformUpdater.mjs +0 -0
@@ -1,129 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=`
2
- attribute vec2 a_position;
3
- varying vec2 v_texCoord;
4
-
5
- void main() {
6
- gl_Position = vec4(a_position, 0.0, 1.0);
7
- v_texCoord = a_position * 0.5 + 0.5;
8
- }
9
- `,l=`
10
- precision highp float;
11
-
12
- uniform vec2 u_resolution;
13
- uniform float u_time;
14
- uniform float u_marbleScale;
15
- uniform float u_turbulence;
16
- uniform float u_swirl;
17
- uniform vec3 u_colorStart;
18
- uniform vec3 u_colorEnd;
19
- uniform vec3 u_veinColor;
20
- uniform float u_veinFrequency;
21
- uniform float u_veinWidth;
22
- uniform float u_tileScale;
23
-
24
- varying vec2 v_texCoord;
25
-
26
- float hash(float n) {
27
- return fract(sin(n) * 43758.5453123);
28
- }
29
-
30
- float hash(vec2 p) {
31
- return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453123);
32
- }
33
-
34
- float noise(vec2 x) {
35
- vec2 i = floor(x);
36
- vec2 f = fract(x);
37
-
38
- float a = hash(i);
39
- float b = hash(i + vec2(1.0, 0.0));
40
- float c = hash(i + vec2(0.0, 1.0));
41
- float d = hash(i + vec2(1.0, 1.0));
42
-
43
- vec2 u = f * f * (3.0 - 2.0 * f);
44
-
45
- return clamp(mix(mix(a, b, u.x), mix(c, d, u.x), u.y), 0.0, 1.0);
46
- }
47
-
48
- float fbm(vec2 p, int octaves) {
49
- float value = 0.0;
50
- float amplitude = 0.5;
51
- float frequency = 1.0;
52
- float maxValue = 0.0;
53
-
54
- for (int i = 0; i < 10; i++) {
55
- if (i >= octaves) break;
56
- value += amplitude * noise(p * frequency);
57
- maxValue += amplitude;
58
- frequency *= 2.0;
59
- amplitude *= 0.5;
60
- }
61
-
62
- return value / maxValue;
63
- }
64
-
65
- vec2 swirl(vec2 p, float strength) {
66
- float theta = fbm(p, 3) * strength;
67
- float c = cos(theta);
68
- float s = sin(theta);
69
- return vec2(
70
- p.x * c - p.y * s,
71
- p.x * s + p.y * c
72
- );
73
- }
74
-
75
- vec2 applyTilePixelation(vec2 uv, float tileScale) {
76
- vec2 cell = floor(uv * tileScale);
77
- 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;
78
- float hashValue = cellHash * 3.0;
79
- float pixelSize = 1.0;
80
-
81
- if (hashValue < 1.0) pixelSize = 32.0;
82
- else if (hashValue < 1.3) pixelSize = 16.0;
83
- else if (hashValue < 1.8) pixelSize = 64.0;
84
- else if (hashValue < 1.85) pixelSize = 16.0;
85
- else if (hashValue < 2.2) pixelSize = 64.0;
86
- else if (hashValue < 2.3) pixelSize = 16.0;
87
- else if (hashValue < 2.6) pixelSize = 32.0;
88
- else pixelSize = 128.0;
89
-
90
- return floor(uv * pixelSize) / pixelSize;
91
- }
92
-
93
- void main() {
94
- vec2 uv = v_texCoord * 2.0 - 1.0;
95
- uv = uv * u_resolution / min(u_resolution.x, u_resolution.y);
96
-
97
- vec2 pixelatedUv = applyTilePixelation(uv, u_tileScale);
98
-
99
- float time = u_time * 0.25;
100
-
101
- vec2 swirlUv = swirl(pixelatedUv + vec2(time * 0.0005, time * 0.00083), max(0.0, min(10.0, u_swirl)));
102
-
103
- float baseNoise = fbm(swirlUv * max(0.1, u_marbleScale) + vec2(time * 0.1, time * 0.13), 5);
104
-
105
- float turbulenceAmount = max(0.0, min(1.0, u_turbulence));
106
- float turbulence = turbulenceAmount * fbm(swirlUv * max(0.1, u_marbleScale) * 2.0 + vec2(time * -0.15), 2);
107
- baseNoise = clamp(baseNoise + turbulence, 0.0, 1.0);
108
-
109
- float veinFreq = max(0.1, u_veinFrequency);
110
- float veinW = max(0.1, min(5.0, u_veinWidth));
111
- float veins = abs(sin(baseNoise * veinFreq * 3.14159));
112
- veins = pow(veins, veinW);
113
- veins = clamp(veins, 0.0, 1.0);
114
-
115
- vec3 baseColor = mix(u_colorStart, u_colorEnd, baseNoise);
116
-
117
- vec3 marbleColor = mix(baseColor, u_veinColor, veins);
118
-
119
- float highlight = pow(fbm(swirlUv * max(0.1, u_marbleScale) * 4.0, 2), 3.0) * 0.2;
120
-
121
- marbleColor = floor(marbleColor * 32.0) / 32.0;
122
- marbleColor = mix(marbleColor, u_veinColor, veins * 0.5);
123
- marbleColor = marbleColor + 0.0425;
124
- marbleColor = clamp(marbleColor, 0.0, 1.0);
125
-
126
- marbleColor = mix(marbleColor, u_veinColor, 0.7);
127
- gl_FragColor = vec4(marbleColor, 1.0);
128
- }
129
- `;exports.marbleFragmentShader=l;exports.marbleVertexShader=e;
@@ -1,139 +0,0 @@
1
- const e = (
2
- /* glsl */
3
- `
4
- attribute vec2 a_position;
5
- varying vec2 v_texCoord;
6
-
7
- void main() {
8
- gl_Position = vec4(a_position, 0.0, 1.0);
9
- v_texCoord = a_position * 0.5 + 0.5;
10
- }
11
- `
12
- ), l = (
13
- /* glsl */
14
- `
15
- precision highp float;
16
-
17
- uniform vec2 u_resolution;
18
- uniform float u_time;
19
- uniform float u_marbleScale;
20
- uniform float u_turbulence;
21
- uniform float u_swirl;
22
- uniform vec3 u_colorStart;
23
- uniform vec3 u_colorEnd;
24
- uniform vec3 u_veinColor;
25
- uniform float u_veinFrequency;
26
- uniform float u_veinWidth;
27
- uniform float u_tileScale;
28
-
29
- varying vec2 v_texCoord;
30
-
31
- float hash(float n) {
32
- return fract(sin(n) * 43758.5453123);
33
- }
34
-
35
- float hash(vec2 p) {
36
- return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453123);
37
- }
38
-
39
- float noise(vec2 x) {
40
- vec2 i = floor(x);
41
- vec2 f = fract(x);
42
-
43
- float a = hash(i);
44
- float b = hash(i + vec2(1.0, 0.0));
45
- float c = hash(i + vec2(0.0, 1.0));
46
- float d = hash(i + vec2(1.0, 1.0));
47
-
48
- vec2 u = f * f * (3.0 - 2.0 * f);
49
-
50
- return clamp(mix(mix(a, b, u.x), mix(c, d, u.x), u.y), 0.0, 1.0);
51
- }
52
-
53
- float fbm(vec2 p, int octaves) {
54
- float value = 0.0;
55
- float amplitude = 0.5;
56
- float frequency = 1.0;
57
- float maxValue = 0.0;
58
-
59
- for (int i = 0; i < 10; i++) {
60
- if (i >= octaves) break;
61
- value += amplitude * noise(p * frequency);
62
- maxValue += amplitude;
63
- frequency *= 2.0;
64
- amplitude *= 0.5;
65
- }
66
-
67
- return value / maxValue;
68
- }
69
-
70
- vec2 swirl(vec2 p, float strength) {
71
- float theta = fbm(p, 3) * strength;
72
- float c = cos(theta);
73
- float s = sin(theta);
74
- return vec2(
75
- p.x * c - p.y * s,
76
- p.x * s + p.y * c
77
- );
78
- }
79
-
80
- vec2 applyTilePixelation(vec2 uv, float tileScale) {
81
- vec2 cell = floor(uv * tileScale);
82
- 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;
83
- float hashValue = cellHash * 3.0;
84
- float pixelSize = 1.0;
85
-
86
- if (hashValue < 1.0) pixelSize = 32.0;
87
- else if (hashValue < 1.3) pixelSize = 16.0;
88
- else if (hashValue < 1.8) pixelSize = 64.0;
89
- else if (hashValue < 1.85) pixelSize = 16.0;
90
- else if (hashValue < 2.2) pixelSize = 64.0;
91
- else if (hashValue < 2.3) pixelSize = 16.0;
92
- else if (hashValue < 2.6) pixelSize = 32.0;
93
- else pixelSize = 128.0;
94
-
95
- return floor(uv * pixelSize) / pixelSize;
96
- }
97
-
98
- void main() {
99
- vec2 uv = v_texCoord * 2.0 - 1.0;
100
- uv = uv * u_resolution / min(u_resolution.x, u_resolution.y);
101
-
102
- vec2 pixelatedUv = applyTilePixelation(uv, u_tileScale);
103
-
104
- float time = u_time * 0.25;
105
-
106
- vec2 swirlUv = swirl(pixelatedUv + vec2(time * 0.0005, time * 0.00083), max(0.0, min(10.0, u_swirl)));
107
-
108
- float baseNoise = fbm(swirlUv * max(0.1, u_marbleScale) + vec2(time * 0.1, time * 0.13), 5);
109
-
110
- float turbulenceAmount = max(0.0, min(1.0, u_turbulence));
111
- float turbulence = turbulenceAmount * fbm(swirlUv * max(0.1, u_marbleScale) * 2.0 + vec2(time * -0.15), 2);
112
- baseNoise = clamp(baseNoise + turbulence, 0.0, 1.0);
113
-
114
- float veinFreq = max(0.1, u_veinFrequency);
115
- float veinW = max(0.1, min(5.0, u_veinWidth));
116
- float veins = abs(sin(baseNoise * veinFreq * 3.14159));
117
- veins = pow(veins, veinW);
118
- veins = clamp(veins, 0.0, 1.0);
119
-
120
- vec3 baseColor = mix(u_colorStart, u_colorEnd, baseNoise);
121
-
122
- vec3 marbleColor = mix(baseColor, u_veinColor, veins);
123
-
124
- float highlight = pow(fbm(swirlUv * max(0.1, u_marbleScale) * 4.0, 2), 3.0) * 0.2;
125
-
126
- marbleColor = floor(marbleColor * 32.0) / 32.0;
127
- marbleColor = mix(marbleColor, u_veinColor, veins * 0.5);
128
- marbleColor = marbleColor + 0.0425;
129
- marbleColor = clamp(marbleColor, 0.0, 1.0);
130
-
131
- marbleColor = mix(marbleColor, u_veinColor, 0.7);
132
- gl_FragColor = vec4(marbleColor, 1.0);
133
- }
134
- `
135
- );
136
- export {
137
- l as marbleFragmentShader,
138
- e as marbleVertexShader
139
- };
@@ -1,13 +0,0 @@
1
- import { CSSProperties } from 'react';
2
- type Vec3 = [number, number, number];
3
- export interface RippleProps {
4
- damping?: number;
5
- mouseForce?: number;
6
- color1?: Vec3;
7
- color2?: Vec3;
8
- iterations?: number;
9
- className?: string;
10
- style?: CSSProperties;
11
- }
12
- export declare const Ripple: ({ damping, mouseForce, color1, color2, iterations, className, style }: RippleProps) => import("react/jsx-runtime").JSX.Element;
13
- export default Ripple;
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("react/jsx-runtime"),u=require("react"),f=require("../../src/core/lib/createShaderConfig.js"),a=require("../../src/core/lib/vectorUtils.js"),O=require("../../src/react/components/base/BasePingPongShaderComponent.js"),s=require("./rippleShaders.js"),P=[.1,.3,.1],q=[.3,.2,.4],g=({damping:S=.99,mouseForce:L=.5,color1:_=P,color2:C=q,iterations:x=2,className:E="",style:R})=>{const c=u.useRef([.5,.5]),n=u.useRef(!1),y=f.createShaderConfig({vertexShader:s.rippleVertexShader,fragmentShader:s.rippleSimulationShader,uniformNames:{u_texture0:"sampler2D",u_mouse:"vec2",u_mouseForce:"float",u_damping:"float"}}),w=f.createShaderConfig({vertexShader:s.rippleVertexShader,fragmentShader:s.rippleRenderShader,uniformNames:{u_texture0:"sampler2D",u_color1:"vec3",u_color2:"vec3"}});return u.useEffect(()=>{const i=e=>{const t=e.target.getBoundingClientRect(),o=(e.clientX-t.left)/t.width,r=1-(e.clientY-t.top)/t.height;c.current=[o,r]},d=()=>{n.current=!0},l=()=>{n.current=!1},m=e=>{if(e.touches.length>0){e.preventDefault();const t=e.target.getBoundingClientRect(),o=(e.touches[0].clientX-t.left)/t.width,r=1-(e.touches[0].clientY-t.top)/t.height;c.current=[o,r],n.current=!0}},h=e=>{if(e.touches.length>0&&n.current){e.preventDefault();const t=e.target.getBoundingClientRect(),o=(e.touches[0].clientX-t.left)/t.width,r=1-(e.touches[0].clientY-t.top)/t.height;c.current=[o,r]}},v=()=>{n.current=!1};return document.addEventListener("mousemove",i),document.addEventListener("mousedown",d),document.addEventListener("mouseup",l),document.addEventListener("touchstart",m,{passive:!1}),document.addEventListener("touchmove",h,{passive:!1}),document.addEventListener("touchend",v),()=>{document.removeEventListener("mousemove",i),document.removeEventListener("mousedown",d),document.removeEventListener("mouseup",l),document.removeEventListener("touchstart",m),document.removeEventListener("touchmove",h),document.removeEventListener("touchend",v)}},[]),M.jsx(O.BasePingPongShaderComponent,{programId:"ripple-simulation",shaderConfig:y,secondaryProgramId:"ripple-render",secondaryShaderConfig:w,iterations:x,className:E,style:R,framebufferOptions:{width:0,height:0,textureCount:2,textureOptions:{minFilter:WebGLRenderingContext.LINEAR,magFilter:WebGLRenderingContext.LINEAR}},uniforms:{u_mouse:{type:"vec2",value:a.vec2(c.current)},u_mouseForce:{type:"float",value:()=>n.current?L:0},u_damping:{type:"float",value:S}},secondaryUniforms:{u_color1:{type:"vec3",value:a.vec3(_)},u_color2:{type:"vec3",value:a.vec3(C)}}})};exports.Ripple=g;exports.default=g;
@@ -1,109 +0,0 @@
1
- import { jsx as w } from "react/jsx-runtime";
2
- import { useRef as v, useEffect as D } from "react";
3
- import { createShaderConfig as h } from "../../src/core/lib/createShaderConfig.mjs";
4
- import { vec3 as p, vec2 as M } from "../../src/core/lib/vectorUtils.mjs";
5
- import { BasePingPongShaderComponent as O } from "../../src/react/components/base/BasePingPongShaderComponent.mjs";
6
- import { rippleVertexShader as f, rippleSimulationShader as B, rippleRenderShader as F } from "./rippleShaders.mjs";
7
- const I = [0.1, 0.3, 0.1], N = [0.3, 0.2, 0.4], G = ({
8
- damping: g = 0.99,
9
- mouseForce: L = 0.5,
10
- color1: E = I,
11
- color2: x = N,
12
- iterations: C = 2,
13
- className: S = "",
14
- style: _
15
- }) => {
16
- const c = v([0.5, 0.5]), n = v(!1), R = h({
17
- vertexShader: f,
18
- fragmentShader: B,
19
- uniformNames: {
20
- u_texture0: "sampler2D",
21
- u_mouse: "vec2",
22
- u_mouseForce: "float",
23
- u_damping: "float"
24
- }
25
- }), y = h({
26
- vertexShader: f,
27
- fragmentShader: F,
28
- uniformNames: {
29
- u_texture0: "sampler2D",
30
- u_color1: "vec3",
31
- u_color2: "vec3"
32
- }
33
- });
34
- return D(() => {
35
- const s = (e) => {
36
- const t = e.target.getBoundingClientRect(), o = (e.clientX - t.left) / t.width, r = 1 - (e.clientY - t.top) / t.height;
37
- c.current = [o, r];
38
- }, u = () => {
39
- n.current = !0;
40
- }, a = () => {
41
- n.current = !1;
42
- }, i = (e) => {
43
- if (e.touches.length > 0) {
44
- e.preventDefault();
45
- const t = e.target.getBoundingClientRect(), o = (e.touches[0].clientX - t.left) / t.width, r = 1 - (e.touches[0].clientY - t.top) / t.height;
46
- c.current = [o, r], n.current = !0;
47
- }
48
- }, d = (e) => {
49
- if (e.touches.length > 0 && n.current) {
50
- e.preventDefault();
51
- const t = e.target.getBoundingClientRect(), o = (e.touches[0].clientX - t.left) / t.width, r = 1 - (e.touches[0].clientY - t.top) / t.height;
52
- c.current = [o, r];
53
- }
54
- }, m = () => {
55
- n.current = !1;
56
- };
57
- return document.addEventListener("mousemove", s), document.addEventListener("mousedown", u), document.addEventListener("mouseup", a), document.addEventListener("touchstart", i, { passive: !1 }), document.addEventListener("touchmove", d, { passive: !1 }), document.addEventListener("touchend", m), () => {
58
- document.removeEventListener("mousemove", s), document.removeEventListener("mousedown", u), document.removeEventListener("mouseup", a), document.removeEventListener("touchstart", i), document.removeEventListener("touchmove", d), document.removeEventListener("touchend", m);
59
- };
60
- }, []), /* @__PURE__ */ w(
61
- O,
62
- {
63
- programId: "ripple-simulation",
64
- shaderConfig: R,
65
- secondaryProgramId: "ripple-render",
66
- secondaryShaderConfig: y,
67
- iterations: C,
68
- className: S,
69
- style: _,
70
- framebufferOptions: {
71
- width: 0,
72
- height: 0,
73
- textureCount: 2,
74
- textureOptions: {
75
- minFilter: WebGLRenderingContext.LINEAR,
76
- magFilter: WebGLRenderingContext.LINEAR
77
- }
78
- },
79
- uniforms: {
80
- u_mouse: {
81
- type: "vec2",
82
- value: M(c.current)
83
- },
84
- u_mouseForce: {
85
- type: "float",
86
- value: () => n.current ? L : 0
87
- },
88
- u_damping: {
89
- type: "float",
90
- value: g
91
- }
92
- },
93
- secondaryUniforms: {
94
- u_color1: {
95
- type: "vec3",
96
- value: p(E)
97
- },
98
- u_color2: {
99
- type: "vec3",
100
- value: p(x)
101
- }
102
- }
103
- }
104
- );
105
- };
106
- export {
107
- G as Ripple,
108
- G as default
109
- };
@@ -1,3 +0,0 @@
1
- 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";
2
- 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";
3
- 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";
@@ -1,80 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=`
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
- `,t=`
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
- `,o=`
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
- `;exports.rippleRenderShader=o;exports.rippleSimulationShader=t;exports.rippleVertexShader=e;
@@ -1,94 +0,0 @@
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
- };
@@ -1,4 +0,0 @@
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';
@@ -1 +0,0 @@
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;
@@ -1,13 +0,0 @@
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";
5
- export {
6
- p as Marble,
7
- t as Ripple,
8
- o as marbleFragmentShader,
9
- l as marbleVertexShader,
10
- i as rippleRenderShader,
11
- x as rippleSimulationShader,
12
- S as rippleVertexShader
13
- };
@@ -1,5 +0,0 @@
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 { }
@@ -1,7 +0,0 @@
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 { }
@@ -1 +0,0 @@
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;