shaders 2.2.31 → 2.2.33
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/dist/core/GlassTiles-BaAwsNxl.js +84 -0
- package/dist/core/Swirl-BfD35doJ.js +96 -0
- package/dist/core/index.js +13 -2
- package/dist/core/renderer.d.ts +1 -0
- package/dist/core/renderer.d.ts.map +1 -1
- package/dist/core/shaders/GlassTiles/index.d.ts +18 -4
- package/dist/core/shaders/GlassTiles/index.d.ts.map +1 -1
- package/dist/core/shaders/GlassTiles/index.js +1 -1
- package/dist/core/shaders/Swirl/index.d.ts +1 -43
- package/dist/core/shaders/Swirl/index.d.ts.map +1 -1
- package/dist/core/shaders/Swirl/index.js +1 -1
- package/dist/react/{generatePresetCode-CCibXbtZ.js → generatePresetCode-Ci4D5lDy.js} +41 -12
- package/dist/react/index.js +1 -1
- package/dist/react/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/react/utils/generatePresetCode.js +1 -1
- package/dist/react/utils/generatePresetCode.template.d.ts.map +1 -1
- package/dist/registry.js +60 -148
- package/dist/solid/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/solid/utils/generatePresetCode.js +56 -10
- package/dist/solid/utils/generatePresetCode.template.d.ts.map +1 -1
- package/dist/svelte/{generatePresetCode-CymgoDq_.js → generatePresetCode-hILbcEw8.js} +41 -12
- package/dist/svelte/index.js +1 -1
- package/dist/svelte/utils/generatePresetCode.js +1 -1
- package/dist/vue/engine/Shader.vue.d.ts.map +1 -1
- package/dist/vue/{generatePresetCode-CRJmU8iF.js → generatePresetCode-DfkHaBG4.js} +36 -12
- package/dist/vue/index.js +12 -14
- package/dist/vue/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/vue/utils/generatePresetCode.js +1 -1
- package/dist/vue/utils/generatePresetCode.template.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/core/GlassTiles-uW7j91uC.js +0 -55
- package/dist/core/Swirl-KUjGnUAM.js +0 -171
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { add, convertToTexture, cos, div, floor, mul, screenUV, sin, sub, uniform, vec2, vec4 } from "three/tsl";
|
|
2
|
+
const componentDefinition = {
|
|
3
|
+
name: "GlassTiles",
|
|
4
|
+
category: "Distortions",
|
|
5
|
+
description: "Refraction-like distortion in a tile grid pattern",
|
|
6
|
+
requiresRTT: true,
|
|
7
|
+
requiresChild: true,
|
|
8
|
+
props: {
|
|
9
|
+
intensity: {
|
|
10
|
+
default: 2,
|
|
11
|
+
description: "The intensity of the glass tiles effect",
|
|
12
|
+
ui: {
|
|
13
|
+
type: "range",
|
|
14
|
+
min: 0,
|
|
15
|
+
max: 10,
|
|
16
|
+
step: .1,
|
|
17
|
+
label: "Intensity"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
tileCount: {
|
|
21
|
+
default: 20,
|
|
22
|
+
description: "Number of tiles across the shortest dimension",
|
|
23
|
+
ui: {
|
|
24
|
+
type: "range",
|
|
25
|
+
min: 5,
|
|
26
|
+
max: 50,
|
|
27
|
+
step: 1,
|
|
28
|
+
label: "Tile Count"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
rotation: {
|
|
32
|
+
default: 0,
|
|
33
|
+
description: "Rotation angle of the tile grid in degrees",
|
|
34
|
+
ui: {
|
|
35
|
+
type: "range",
|
|
36
|
+
min: 0,
|
|
37
|
+
max: 360,
|
|
38
|
+
step: 1,
|
|
39
|
+
label: "Rotation"
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
roundness: {
|
|
43
|
+
default: 0,
|
|
44
|
+
description: "Makes tiles more circular instead of square",
|
|
45
|
+
ui: {
|
|
46
|
+
type: "range",
|
|
47
|
+
min: 0,
|
|
48
|
+
max: 1,
|
|
49
|
+
step: .01,
|
|
50
|
+
label: "Roundness"
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
fragmentNode: ({ uniforms, childNode, dimensions, onCleanup }) => {
|
|
55
|
+
if (!childNode) {
|
|
56
|
+
console.error("You must pass a child component into the Glass Tiles shader.");
|
|
57
|
+
return vec4(0);
|
|
58
|
+
}
|
|
59
|
+
const texture$1 = convertToTexture(childNode);
|
|
60
|
+
onCleanup(() => {
|
|
61
|
+
if (texture$1?.renderTarget?.dispose) texture$1.renderTarget.dispose();
|
|
62
|
+
});
|
|
63
|
+
const aspectRatioUniform = uniform(dimensions.width / dimensions.height);
|
|
64
|
+
const baseUV = screenUV;
|
|
65
|
+
const intensity = uniforms.intensity.uniform;
|
|
66
|
+
const baseTileCount = uniforms.tileCount.uniform;
|
|
67
|
+
const rotationDegrees = uniforms.rotation.uniform;
|
|
68
|
+
const roundnessAmount = uniforms.roundness.uniform;
|
|
69
|
+
const tileCount = vec2(aspectRatioUniform.greaterThanEqual(1).select(mul(baseTileCount, aspectRatioUniform), baseTileCount), aspectRatioUniform.lessThan(1).select(div(baseTileCount, aspectRatioUniform), baseTileCount));
|
|
70
|
+
const aspectCorrectedUV = vec2(mul(baseUV.x, aspectRatioUniform), baseUV.y);
|
|
71
|
+
const rotationRadians = mul(rotationDegrees, Math.PI / 180);
|
|
72
|
+
const cosAngle = cos(rotationRadians);
|
|
73
|
+
const sinAngle = sin(rotationRadians);
|
|
74
|
+
const centered = sub(aspectCorrectedUV, vec2(mul(.5, aspectRatioUniform), .5));
|
|
75
|
+
const rotatedUV = add(vec2(sub(mul(centered.x, cosAngle), mul(centered.y, sinAngle)), add(mul(centered.x, sinAngle), mul(centered.y, cosAngle))), vec2(mul(.5, aspectRatioUniform), .5));
|
|
76
|
+
const gridUV = vec2(div(rotatedUV.x, aspectRatioUniform), rotatedUV.y);
|
|
77
|
+
const fromCenter = sub(div(sub(gridUV, div(floor(mul(gridUV, tileCount)), tileCount)), div(vec2(1), tileCount)), vec2(.5, .5));
|
|
78
|
+
const clampedRoundness = sub(1, mul(mul(fromCenter.x, fromCenter.x).add(mul(fromCenter.y, fromCenter.y)), mul(roundnessAmount, 4))).max(0);
|
|
79
|
+
const distortedUV = add(baseUV, mul(fromCenter, mul(mul(intensity, .025), clampedRoundness)));
|
|
80
|
+
return vec4(texture$1.sample(distortedUV));
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
var GlassTiles_default = componentDefinition;
|
|
84
|
+
export { componentDefinition as n, GlassTiles_default as t };
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
|
|
2
|
+
import { t as createAnimatedTime } from "./time-DgRTVr2F.js";
|
|
3
|
+
import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
|
|
4
|
+
import { cos, screenUV, sin, smoothstep, vec2, vec4 } from "three/tsl";
|
|
5
|
+
const componentDefinition = {
|
|
6
|
+
name: "Swirl",
|
|
7
|
+
category: "Base Layers",
|
|
8
|
+
description: "Flowing swirl pattern with multi-layered noise",
|
|
9
|
+
props: {
|
|
10
|
+
colorA: {
|
|
11
|
+
default: "#1275d8",
|
|
12
|
+
description: "Primary gradient color",
|
|
13
|
+
transform: transformColor,
|
|
14
|
+
ui: {
|
|
15
|
+
type: "color",
|
|
16
|
+
label: "Color A"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
colorB: {
|
|
20
|
+
default: "#e19136",
|
|
21
|
+
description: "Secondary gradient color",
|
|
22
|
+
transform: transformColor,
|
|
23
|
+
ui: {
|
|
24
|
+
type: "color",
|
|
25
|
+
label: "Color B"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
speed: {
|
|
29
|
+
default: 1,
|
|
30
|
+
description: "Flow animation speed",
|
|
31
|
+
ui: {
|
|
32
|
+
type: "range",
|
|
33
|
+
min: 0,
|
|
34
|
+
max: 5,
|
|
35
|
+
step: .1,
|
|
36
|
+
label: "Speed"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
detail: {
|
|
40
|
+
default: 1,
|
|
41
|
+
description: "Level of detail and intricacy in the swirl patterns",
|
|
42
|
+
ui: {
|
|
43
|
+
type: "range",
|
|
44
|
+
min: 0,
|
|
45
|
+
max: 5,
|
|
46
|
+
step: .1,
|
|
47
|
+
label: "Detail"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
blend: {
|
|
51
|
+
default: 50,
|
|
52
|
+
description: "Skew color balance toward A (lower values) or B (higher values)",
|
|
53
|
+
ui: {
|
|
54
|
+
type: "range",
|
|
55
|
+
min: 0,
|
|
56
|
+
max: 100,
|
|
57
|
+
step: 1,
|
|
58
|
+
label: "Blend"
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
colorSpace: {
|
|
62
|
+
default: "linear",
|
|
63
|
+
transform: transformColorSpace,
|
|
64
|
+
description: "Color space for color interpolation",
|
|
65
|
+
ui: {
|
|
66
|
+
type: "select",
|
|
67
|
+
options: colorSpaceOptions,
|
|
68
|
+
label: "Color Space"
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
fragmentNode: (params) => {
|
|
73
|
+
const { uniforms } = params;
|
|
74
|
+
const uvCoords = screenUV;
|
|
75
|
+
const t = createAnimatedTime(params, uniforms.speed);
|
|
76
|
+
const detail = uniforms.detail.uniform;
|
|
77
|
+
const freq1 = detail;
|
|
78
|
+
const distort1 = vec2(uvCoords.x.add(sin(uvCoords.y.mul(freq1.mul(1.7)).add(t.mul(.8))).mul(.12).add(cos(uvCoords.x.mul(freq1.mul(.9)).sub(t.mul(.5))).mul(.05))), uvCoords.y.add(cos(uvCoords.x.mul(freq1.mul(1.3)).sub(t.mul(.6))).mul(.12).add(sin(uvCoords.y.mul(freq1.mul(1.1)).add(t.mul(.7))).mul(.05))));
|
|
79
|
+
const pattern1 = sin(distort1.x.mul(freq1.mul(2.1)).add(distort1.y.mul(freq1.mul(1.8))).add(t.mul(.4)));
|
|
80
|
+
const freq2 = detail.mul(2.1);
|
|
81
|
+
const distort2 = vec2(distort1.x.add(cos(distort1.y.mul(freq2.mul(2.7)).sub(t.mul(.45))).mul(.07).add(sin(distort1.x.mul(freq2.mul(1.9)).add(t.mul(.6))).mul(.04))), distort1.y.add(sin(distort1.x.mul(freq2.mul(2.3)).add(t.mul(.65))).mul(.07).add(cos(distort1.y.mul(freq2.mul(1.6)).sub(t.mul(.4))).mul(.04))));
|
|
82
|
+
const pattern2 = cos(distort2.x.mul(freq2.mul(1.4)).sub(distort2.y.mul(freq2.mul(1.9))).add(t.mul(.35)));
|
|
83
|
+
const freq3 = detail.mul(3.7);
|
|
84
|
+
const distort3 = vec2(distort2.x.add(sin(distort2.y.mul(freq3.mul(1.8)).add(t.mul(.85))).mul(.04).add(cos(distort2.x.mul(freq3.mul(1.3)).sub(t.mul(.55))).mul(.025)).add(sin(distort2.x.add(distort2.y).mul(freq3.mul(.7)).add(t.mul(.9))).mul(.02))), distort2.y.add(cos(distort2.x.mul(freq3.mul(1.6)).sub(t.mul(.75))).mul(.04).add(sin(distort2.y.mul(freq3.mul(1.1)).add(t.mul(.5))).mul(.025)).add(cos(distort2.x.add(distort2.y).mul(freq3.mul(.8)).sub(t.mul(.95))).mul(.02))));
|
|
85
|
+
const pattern3 = sin(distort3.x.mul(freq3.mul(1.1)).add(distort3.y.mul(freq3.mul(1.5))).sub(t.mul(.55)));
|
|
86
|
+
const combinedPattern = pattern1.mul(.45).add(pattern2.mul(.35)).add(pattern3.mul(.2));
|
|
87
|
+
const blendBias = uniforms.blend.uniform.sub(50).mul(.006);
|
|
88
|
+
const blendFactor = smoothstep(.3, .7, combinedPattern.mul(.5).add(.5).add(blendBias));
|
|
89
|
+
const colorMix = mixColors(uniforms.colorA.uniform, uniforms.colorB.uniform, blendFactor, uniforms.colorSpace.uniform);
|
|
90
|
+
const shimmer = sin(t.mul(2.5).add(combinedPattern.mul(8))).mul(.015).add(1);
|
|
91
|
+
const finalColor = colorMix.mul(shimmer);
|
|
92
|
+
return vec4(finalColor.rgb, finalColor.a);
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
var Swirl_default = componentDefinition;
|
|
96
|
+
export { componentDefinition as n, Swirl_default as t };
|
package/dist/core/index.js
CHANGED
|
@@ -21,7 +21,7 @@ import { n as componentDefinition$15 } from "./DotGrid-B2DXsjFE.js";
|
|
|
21
21
|
import { n as componentDefinition$16 } from "./Duotone-CRwhugbV.js";
|
|
22
22
|
import { n as componentDefinition$17 } from "./FilmGrain-CY4ZO9UI.js";
|
|
23
23
|
import { n as componentDefinition$18 } from "./FloatingParticles-BduIDXKd.js";
|
|
24
|
-
import { n as componentDefinition$19 } from "./GlassTiles-
|
|
24
|
+
import { n as componentDefinition$19 } from "./GlassTiles-BaAwsNxl.js";
|
|
25
25
|
import { n as componentDefinition$20 } from "./Glow-D0boDIAW.js";
|
|
26
26
|
import { n as componentDefinition$21 } from "./Godrays-ChqiT2zn.js";
|
|
27
27
|
import { n as componentDefinition$22 } from "./Grayscale-Bi-XBvO_.js";
|
|
@@ -50,7 +50,7 @@ import { n as componentDefinition$44 } from "./Spherize-DDP0_5VP.js";
|
|
|
50
50
|
import { n as componentDefinition$45 } from "./Spiral-Cx7Z8gLc.js";
|
|
51
51
|
import { n as componentDefinition$46 } from "./Strands-C9FBVtDe.js";
|
|
52
52
|
import { n as componentDefinition$47 } from "./Stretch-BCpOO3q6.js";
|
|
53
|
-
import { n as componentDefinition$48 } from "./Swirl-
|
|
53
|
+
import { n as componentDefinition$48 } from "./Swirl-BfD35doJ.js";
|
|
54
54
|
import { n as componentDefinition$49 } from "./TiltShift-CvKqM1xk.js";
|
|
55
55
|
import { n as componentDefinition$50 } from "./Tritone-BeEJj4U0.js";
|
|
56
56
|
import { n as componentDefinition$51 } from "./Twirl-EJ3aS_lo.js";
|
|
@@ -1319,6 +1319,16 @@ function shaderRenderer() {
|
|
|
1319
1319
|
console.error(`Error executing after render callback for node ${nodeInfo.id}:`, e);
|
|
1320
1320
|
}
|
|
1321
1321
|
};
|
|
1322
|
+
const renderAndWait = async () => {
|
|
1323
|
+
if (!canRender()) throw new Error("Renderer is not ready");
|
|
1324
|
+
await renderFrame();
|
|
1325
|
+
if (renderer instanceof WebGPURenderer) try {
|
|
1326
|
+
const backend = renderer.backend;
|
|
1327
|
+
if (backend?.device) await backend.device.queue.onSubmittedWorkDone();
|
|
1328
|
+
} catch (e) {
|
|
1329
|
+
await new Promise((resolve) => setTimeout(resolve, 16));
|
|
1330
|
+
}
|
|
1331
|
+
};
|
|
1322
1332
|
const renderFrame = async () => {
|
|
1323
1333
|
if (!canRender()) return;
|
|
1324
1334
|
const frameStartTime = enablePerformanceTracking ? performance.now() : 0;
|
|
@@ -1656,6 +1666,7 @@ function shaderRenderer() {
|
|
|
1656
1666
|
isInitialized: () => isInitialized,
|
|
1657
1667
|
startAnimation,
|
|
1658
1668
|
stopAnimation,
|
|
1669
|
+
renderAndWait,
|
|
1659
1670
|
getPerformanceStats,
|
|
1660
1671
|
getNodeRegistry: () => ({ nodes: new Map(nodeRegistry.nodes) }),
|
|
1661
1672
|
getRendererType,
|
package/dist/core/renderer.d.ts
CHANGED
|
@@ -116,6 +116,7 @@ export declare function shaderRenderer(): {
|
|
|
116
116
|
isInitialized: () => boolean;
|
|
117
117
|
startAnimation: () => void;
|
|
118
118
|
stopAnimation: () => void;
|
|
119
|
+
renderAndWait: () => Promise<void>;
|
|
119
120
|
getPerformanceStats: () => PerformanceStats;
|
|
120
121
|
getNodeRegistry: () => {
|
|
121
122
|
nodes: ReadonlyMap<string, NodeInfo>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAIH,KAAK,IAAI,EAMZ,MAAM,cAAc,CAAA;AAKrB,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,WAAW,EAAC,MAAM,SAAS,CAAA;AACvH,OAAO,EAAqB,gBAAgB,EAAC,MAAM,sBAAsB,CAAA;AAKzE;;GAEG;AACH,UAAU,QAAQ;IAEd;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAA;IAEV;;OAEG;IACH,aAAa,EAAE,MAAM,CAAA;IAErB;;OAEG;IACH,gBAAgB,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;IAErD;;OAEG;IACH,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IAEvB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAA;IAEpB;;;;OAIG;IACH,aAAa,EAAE,OAAO,CAAA;IAEtB;;OAEG;IACH,cAAc,EAAE,GAAG,CAAA;IAEnB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAA;IAEtB;;OAEG;IACH,QAAQ,EAAE,WAAW,CAAA;IAErB;;;OAGG;IACH,gBAAgB,EAAE,eAAe,EAAE,CAAA;IAEnC;;;OAGG;IACH,qBAAqB,EAAE,cAAc,EAAE,CAAA;IAEvC;;;OAGG;IACH,oBAAoB,EAAE,cAAc,EAAE,CAAA;IAEtC;;;OAGG;IACH,eAAe,EAAE,cAAc,EAAE,CAAA;IAEjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE;QAChB,OAAO,EAAE,GAAG,CAAA;QACZ,OAAO,EAAE,GAAG,CAAA;QACZ,QAAQ,EAAE,GAAG,CAAA;QACb,KAAK,EAAE,GAAG,CAAA;QACV,OAAO,EAAE,GAAG,CAAA;QACZ,OAAO,EAAE,GAAG,CAAA;QACZ,KAAK,EAAE,GAAG,CAAA;QACV,WAAW,EAAE,GAAG,CAAA;KACnB,CAAA;IAED;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAE/B;AAED;;GAEG;AACH,UAAU,YAAY;IAClB,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAC5B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAClC;AAED;;GAEG;AACH,UAAU,iBAAiB;IACvB,MAAM,EAAE,iBAAiB,CAAA;IACzB,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACtC;AAyHD;;GAEG;AACH,wBAAgB,cAAc;
|
|
1
|
+
{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAIH,KAAK,IAAI,EAMZ,MAAM,cAAc,CAAA;AAKrB,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,WAAW,EAAC,MAAM,SAAS,CAAA;AACvH,OAAO,EAAqB,gBAAgB,EAAC,MAAM,sBAAsB,CAAA;AAKzE;;GAEG;AACH,UAAU,QAAQ;IAEd;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAA;IAEV;;OAEG;IACH,aAAa,EAAE,MAAM,CAAA;IAErB;;OAEG;IACH,gBAAgB,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;IAErD;;OAEG;IACH,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IAEvB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAA;IAEpB;;;;OAIG;IACH,aAAa,EAAE,OAAO,CAAA;IAEtB;;OAEG;IACH,cAAc,EAAE,GAAG,CAAA;IAEnB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAA;IAEtB;;OAEG;IACH,QAAQ,EAAE,WAAW,CAAA;IAErB;;;OAGG;IACH,gBAAgB,EAAE,eAAe,EAAE,CAAA;IAEnC;;;OAGG;IACH,qBAAqB,EAAE,cAAc,EAAE,CAAA;IAEvC;;;OAGG;IACH,oBAAoB,EAAE,cAAc,EAAE,CAAA;IAEtC;;;OAGG;IACH,eAAe,EAAE,cAAc,EAAE,CAAA;IAEjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE;QAChB,OAAO,EAAE,GAAG,CAAA;QACZ,OAAO,EAAE,GAAG,CAAA;QACZ,QAAQ,EAAE,GAAG,CAAA;QACb,KAAK,EAAE,GAAG,CAAA;QACV,OAAO,EAAE,GAAG,CAAA;QACZ,OAAO,EAAE,GAAG,CAAA;QACZ,KAAK,EAAE,GAAG,CAAA;QACV,WAAW,EAAE,GAAG,CAAA;KACnB,CAAA;IAED;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAE/B;AAED;;GAEG;AACH,UAAU,YAAY;IAClB,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAC5B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAClC;AAED;;GAEG;AACH,UAAU,iBAAiB;IACvB,MAAM,EAAE,iBAAiB,CAAA;IACzB,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACtC;AAyHD;;GAEG;AACH,wBAAgB,cAAc;wEAwmDG,iBAAiB;;uBAxrBpB,MAAM,oBAAoB,mBAAmB,CAAC,cAAc,CAAC,GAAG,IAAI,YAAY,MAAM,GAAG,IAAI,YAAY,YAAY,GAAG,IAAI,aAAY,WAAW,wBAA6B,mBAAmB,KAAG,IAAI;qBA4R5M,MAAM,KAAG,IAAI;iCA1ID,MAAM,eAAe,MAAM,SAAS,GAAG,KAAG,IAAI;iCAgC9C,MAAM,YAAY,OAAO,CAAC,YAAY,CAAC,KAAG,IAAI;8BAksBnD,IAAI;;0BA7UR,IAAI;yBAeL,IAAI;yBA/LE,OAAO,CAAC,IAAI,CAAC;+BAgKb,gBAAgB;;eAweoB,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC;;2BAlBrE,QAAQ,GAAG,OAAO,GAAG,IAAI;;;mCApiDnB,MAAM,KAAG,QAAQ,EAAE;oCAuCzC,IAAI,YACF,QAAQ,UACV,MAAM,kBACE,GAAG,CAAC,MAAM,CAAC,gBACb,IAAI,KACnB,IAAI;0CAuCK,IAAI,YACF,QAAQ,KACnB,IAAI;;;;EA8+CV"}
|
|
@@ -4,17 +4,31 @@ export interface ComponentProps {
|
|
|
4
4
|
/**
|
|
5
5
|
* The intensity of the glass tiles effect
|
|
6
6
|
*
|
|
7
|
-
* Accepts a number between 0 and
|
|
8
|
-
* @default
|
|
7
|
+
* Accepts a number between 0 and 10.
|
|
8
|
+
* @default 2
|
|
9
9
|
*/
|
|
10
10
|
intensity: number;
|
|
11
11
|
/**
|
|
12
12
|
* Number of tiles across the shortest dimension
|
|
13
13
|
*
|
|
14
|
-
* Accepts a number between
|
|
15
|
-
* @default
|
|
14
|
+
* Accepts a number between 5 and 50.
|
|
15
|
+
* @default 20
|
|
16
16
|
*/
|
|
17
17
|
tileCount: number;
|
|
18
|
+
/**
|
|
19
|
+
* Rotation angle of the tile grid in degrees
|
|
20
|
+
*
|
|
21
|
+
* Accepts a number between 0 and 360.
|
|
22
|
+
* @default 0
|
|
23
|
+
*/
|
|
24
|
+
rotation: number;
|
|
25
|
+
/**
|
|
26
|
+
* Makes tiles more circular instead of square
|
|
27
|
+
*
|
|
28
|
+
* Accepts a number between 0 and 1.
|
|
29
|
+
* @default 0
|
|
30
|
+
*/
|
|
31
|
+
roundness: number;
|
|
18
32
|
}
|
|
19
33
|
export declare const componentDefinition: ComponentDefinition<ComponentProps>;
|
|
20
34
|
export default componentDefinition;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/GlassTiles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AAKvE,MAAM,WAAW,cAAc;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/GlassTiles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AAKvE,MAAM,WAAW,cAAc;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,CA6GnE,CAAA;AAED,eAAe,mBAAmB,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as componentDefinition, t as GlassTiles_default } from "../../GlassTiles-
|
|
1
|
+
import { n as componentDefinition, t as GlassTiles_default } from "../../GlassTiles-BaAwsNxl.js";
|
|
2
2
|
export { componentDefinition, GlassTiles_default as default };
|
|
@@ -25,7 +25,7 @@ export interface ComponentProps {
|
|
|
25
25
|
/**
|
|
26
26
|
* Level of detail and intricacy in the swirl patterns
|
|
27
27
|
*
|
|
28
|
-
* Accepts a number between 0 and
|
|
28
|
+
* Accepts a number between 0 and 5.
|
|
29
29
|
* @default 1
|
|
30
30
|
*/
|
|
31
31
|
detail: number;
|
|
@@ -36,20 +36,6 @@ export interface ComponentProps {
|
|
|
36
36
|
* @default 50
|
|
37
37
|
*/
|
|
38
38
|
blend: number;
|
|
39
|
-
/**
|
|
40
|
-
* Horizontal frequency for coarse/base layer
|
|
41
|
-
*
|
|
42
|
-
* Accepts a number between 0 and 100.
|
|
43
|
-
* @default 50
|
|
44
|
-
*/
|
|
45
|
-
coarseX: number;
|
|
46
|
-
/**
|
|
47
|
-
* Vertical frequency for coarse/base layer
|
|
48
|
-
*
|
|
49
|
-
* Accepts a number between 0 and 100.
|
|
50
|
-
* @default 50
|
|
51
|
-
*/
|
|
52
|
-
coarseY: number;
|
|
53
39
|
/**
|
|
54
40
|
* Color space for color interpolation
|
|
55
41
|
*
|
|
@@ -57,34 +43,6 @@ export interface ComponentProps {
|
|
|
57
43
|
* @default "linear"
|
|
58
44
|
*/
|
|
59
45
|
colorSpace: string;
|
|
60
|
-
/**
|
|
61
|
-
* Horizontal frequency for medium detail layer
|
|
62
|
-
*
|
|
63
|
-
* Accepts a number between 0 and 100.
|
|
64
|
-
* @default 50
|
|
65
|
-
*/
|
|
66
|
-
mediumX: number;
|
|
67
|
-
/**
|
|
68
|
-
* Vertical frequency for medium detail layer
|
|
69
|
-
*
|
|
70
|
-
* Accepts a number between 0 and 100.
|
|
71
|
-
* @default 50
|
|
72
|
-
*/
|
|
73
|
-
mediumY: number;
|
|
74
|
-
/**
|
|
75
|
-
* Horizontal frequency for fine detail layer
|
|
76
|
-
*
|
|
77
|
-
* Accepts a number between 0 and 100.
|
|
78
|
-
* @default 50
|
|
79
|
-
*/
|
|
80
|
-
fineX: number;
|
|
81
|
-
/**
|
|
82
|
-
* Vertical frequency for fine detail layer
|
|
83
|
-
*
|
|
84
|
-
* Accepts a number between 0 and 100.
|
|
85
|
-
* @default 50
|
|
86
|
-
*/
|
|
87
|
-
fineY: number;
|
|
88
46
|
}
|
|
89
47
|
export declare const componentDefinition: ComponentDefinition<ComponentProps>;
|
|
90
48
|
export default componentDefinition;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/Swirl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AAQvE,MAAM,WAAW,cAAc;IAC3B,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/Swirl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AAQvE,MAAM,WAAW,cAAc;IAC3B,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,CA8InE,CAAA;AAED,eAAe,mBAAmB,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "../../transformations-YbhRK-rd.js";
|
|
2
2
|
import "../../time-DgRTVr2F.js";
|
|
3
3
|
import "../../colorMixing-CZPFmiT4.js";
|
|
4
|
-
import { n as componentDefinition, t as Swirl_default } from "../../Swirl-
|
|
4
|
+
import { n as componentDefinition, t as Swirl_default } from "../../Swirl-BfD35doJ.js";
|
|
5
5
|
export { componentDefinition, Swirl_default as default };
|
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
var DEFAULT_TRANSFORM = {
|
|
2
|
+
offsetX: 0,
|
|
3
|
+
offsetY: 0,
|
|
4
|
+
rotation: 0,
|
|
5
|
+
scale: 1,
|
|
6
|
+
anchorX: .5,
|
|
7
|
+
anchorY: .5,
|
|
8
|
+
edges: "transparent"
|
|
9
|
+
};
|
|
10
|
+
function toObjectLiteral(obj) {
|
|
11
|
+
return `{ ${Object.entries(obj).map(([key, value]) => {
|
|
12
|
+
return `${key}: ${typeof value === "string" ? `"${value}"` : value}`;
|
|
13
|
+
}).join(", ")} }`;
|
|
14
|
+
}
|
|
1
15
|
var shaderMetadata = {
|
|
2
16
|
"AngularBlur": {
|
|
3
17
|
"opacity": 1,
|
|
@@ -194,8 +208,10 @@ var shaderMetadata = {
|
|
|
194
208
|
"GlassTiles": {
|
|
195
209
|
"opacity": 1,
|
|
196
210
|
"blendMode": "normal",
|
|
197
|
-
"intensity":
|
|
198
|
-
"tileCount":
|
|
211
|
+
"intensity": 2,
|
|
212
|
+
"tileCount": 20,
|
|
213
|
+
"rotation": 0,
|
|
214
|
+
"roundness": 0
|
|
199
215
|
},
|
|
200
216
|
"Glow": {
|
|
201
217
|
"opacity": 1,
|
|
@@ -476,12 +492,6 @@ var shaderMetadata = {
|
|
|
476
492
|
"speed": 1,
|
|
477
493
|
"detail": 1,
|
|
478
494
|
"blend": 50,
|
|
479
|
-
"coarseX": 50,
|
|
480
|
-
"coarseY": 50,
|
|
481
|
-
"mediumX": 50,
|
|
482
|
-
"mediumY": 50,
|
|
483
|
-
"fineX": 50,
|
|
484
|
-
"fineY": 50,
|
|
485
495
|
"colorSpace": "linear"
|
|
486
496
|
},
|
|
487
497
|
"TiltShift": {
|
|
@@ -541,20 +551,39 @@ var shaderMetadata = {
|
|
|
541
551
|
}
|
|
542
552
|
};
|
|
543
553
|
function generatePropString(props, componentType, indent = " ") {
|
|
544
|
-
return Object.entries(props).filter(([key, value]) => {
|
|
554
|
+
return Object.entries(props).sort(([a], [b]) => a.localeCompare(b)).filter(([key, value]) => {
|
|
555
|
+
if (key === "maskType" && value === "alpha") return false;
|
|
556
|
+
if (key === "transform" && typeof value === "object") {
|
|
557
|
+
if (Object.keys(DEFAULT_TRANSFORM).every((k) => value[k] === DEFAULT_TRANSFORM[k])) return false;
|
|
558
|
+
}
|
|
545
559
|
const componentDefaults = shaderMetadata[componentType] || {};
|
|
546
560
|
if (componentDefaults.hasOwnProperty(key)) {
|
|
547
561
|
const defaultValue = componentDefaults[key];
|
|
548
|
-
if (typeof value === "object" && typeof defaultValue === "object") return JSON.stringify(value) !== JSON.stringify(defaultValue);
|
|
562
|
+
if (value != null && defaultValue != null && typeof value === "object" && typeof defaultValue === "object") return JSON.stringify(value) !== JSON.stringify(defaultValue);
|
|
549
563
|
return value !== defaultValue;
|
|
550
564
|
}
|
|
551
565
|
if (key === "opacity" && value === 1) return false;
|
|
552
566
|
if (key === "blendMode" && value === "normal") return false;
|
|
553
567
|
return true;
|
|
554
568
|
}).map(([key, value]) => {
|
|
569
|
+
if (key === "transform" && typeof value === "object") {
|
|
570
|
+
const nonDefaultKeys = {};
|
|
571
|
+
for (const k in value) if (value[k] !== DEFAULT_TRANSFORM[k]) nonDefaultKeys[k] = value[k];
|
|
572
|
+
const keys = Object.keys(nonDefaultKeys).sort();
|
|
573
|
+
if (keys.length > 1) return `${key}={{\n${indent} ${keys.map((k) => `${k}: ${typeof nonDefaultKeys[k] === "string" ? `"${nonDefaultKeys[k]}"` : nonDefaultKeys[k]}`).join(`,\n${indent} `)}\n${indent} }}`;
|
|
574
|
+
else if (keys.length === 1) {
|
|
575
|
+
const k = keys[0];
|
|
576
|
+
const v = nonDefaultKeys[k];
|
|
577
|
+
return `${key}={{ ${k}: ${typeof v === "string" ? `"${v}"` : v} }}`;
|
|
578
|
+
}
|
|
579
|
+
}
|
|
555
580
|
if (typeof value === "string") return `${key}="${value}"`;
|
|
556
|
-
else if (typeof value === "object")
|
|
557
|
-
|
|
581
|
+
else if (value !== null && typeof value === "object") {
|
|
582
|
+
const roundedValue = { ...value };
|
|
583
|
+
if ("x" in roundedValue && typeof roundedValue.x === "number") roundedValue.x = Math.round(roundedValue.x * 100) / 100;
|
|
584
|
+
if ("y" in roundedValue && typeof roundedValue.y === "number") roundedValue.y = Math.round(roundedValue.y * 100) / 100;
|
|
585
|
+
return `${key}={${toObjectLiteral(roundedValue)}}`;
|
|
586
|
+
} else return `${key}={${value}}`;
|
|
558
587
|
}).join("\n" + indent + " ");
|
|
559
588
|
}
|
|
560
589
|
function isIdUsedAsMaskSource(id, allComponents) {
|
package/dist/react/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as generatePresetCode } from "./generatePresetCode-
|
|
1
|
+
import { n as generatePresetCode } from "./generatePresetCode-Ci4D5lDy.js";
|
|
2
2
|
import { createContext, useContext, useEffect, useMemo, useRef } from "react";
|
|
3
3
|
import { createUniformsMap, shaderRenderer } from "../core/index.js";
|
|
4
4
|
import { componentDefinition } from "../core/shaders/AngularBlur/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;
|
|
1
|
+
{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAqpBD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAyC/D;AAGD,eAAO,MAAM,mBAAmB,UAyD/B,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as generatePresetCode, t as availableComponents } from "../generatePresetCode-
|
|
1
|
+
import { n as generatePresetCode, t as availableComponents } from "../generatePresetCode-Ci4D5lDy.js";
|
|
2
2
|
export { availableComponents, generatePresetCode };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generatePresetCode.template.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.template.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;
|
|
1
|
+
{"version":3,"file":"generatePresetCode.template.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.template.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AA4HD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAyC/D;AAGD,eAAO,MAAM,mBAAmB,OAG/B,CAAA"}
|