shaders 2.2.48 → 2.3.50

package/dist/core/{Shatter-BeD72o80.js → Shatter-EEzkIXGb.js}

@@ -1,6 +1,6 @@
 import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
-import { o as transformEdges } from "./transformations-YbhRK-rd.js";
-import { DataTexture, FloatType, LinearFilter, RGBAFormat } from "three";
+import { o as transformEdges } from "./transformations-CC_c-QAT.js";
+import { DataTexture, FloatType, LinearFilter, NearestFilter, RGBAFormat } from "three";
 import { convertToTexture, float, screenUV, smoothstep, texture, vec2, vec4 } from "three/tsl";
 var seededRandom = (seed) => {
 	const x = Math.sin(seed) * 1e4;
@@ -21,7 +21,8 @@ const componentDefinition = {
 				min: .5,
 				max: 5,
 				step: .1,
-				label: "Crack Width"
+				label: "Crack Width",
+				group: "Effect"
 			}
 		},
 		intensity: {
@@ -32,7 +33,8 @@ const componentDefinition = {
 				min: 0,
 				max: 20,
 				step: 1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		radius: {
@@ -43,7 +45,8 @@ const componentDefinition = {
 				min: .1,
 				max: 1,
 				step: .1,
-				label: "Radius"
+				label: "Radius",
+				group: "Effect"
 			}
 		},
 		decay: {
@@ -54,7 +57,8 @@ const componentDefinition = {
 				min: .1,
 				max: 10,
 				step: .1,
-				label: "Decay"
+				label: "Decay",
+				group: "Effect"
 			}
 		},
 		seed: {
@@ -65,7 +69,8 @@ const componentDefinition = {
 				min: 0,
 				max: 50,
 				step: 1,
-				label: "Seed"
+				label: "Seed",
+				group: "Effect"
 			}
 		},
 		chromaticSplit: {
@@ -76,7 +81,8 @@ const componentDefinition = {
 				min: 0,
 				max: 5,
 				step: .1,
-				label: "Chromatic Split"
+				label: "Chromatic Split",
+				group: "Effect"
 			}
 		},
 		refractionStrength: {
@@ -87,7 +93,8 @@ const componentDefinition = {
 				min: 0,
 				max: 10,
 				step: .1,
-				label: "Refraction"
+				label: "Refraction",
+				group: "Effect"
 			}
 		},
 		shardLighting: {
@@ -98,7 +105,8 @@ const componentDefinition = {
 				min: 0,
 				max: .5,
 				step: .1,
-				label: "Shard Lighting"
+				label: "Shard Lighting",
+				group: "Effect"
 			}
 		},
 		edges: {
@@ -125,7 +133,8 @@ const componentDefinition = {
 						value: "wrap"
 					}
 				],
-				label: "Edges"
+				label: "Edges",
+				group: "Effect"
 			}
 		}
 	},
@@ -140,6 +149,11 @@ const componentDefinition = {
 		const displacementTexture = new DataTexture(displacementData, 4, 4, RGBAFormat, FloatType);
 		displacementTexture.magFilter = LinearFilter;
 		displacementTexture.minFilter = LinearFilter;
+		const VORONOI_SIZE = 1024;
+		const voronoiData = new Float32Array(VORONOI_SIZE * VORONOI_SIZE * 4);
+		const voronoiTexture = new DataTexture(voronoiData, VORONOI_SIZE, VORONOI_SIZE, RGBAFormat, FloatType);
+		voronoiTexture.magFilter = NearestFilter;
+		voronoiTexture.minFilter = NearestFilter;
 		const generateCells = (seed) => {
 			for (let i = 0; i < SHARD_COUNT; i++) {
 				cellData[i * 4] = seededRandom(seed + i * 2);
@@ -149,8 +163,39 @@ const componentDefinition = {
 			}
 			cellTexture.needsUpdate = true;
 		};
+		const generateVoronoi = () => {
+			for (let y = 0; y < VORONOI_SIZE; y++) for (let x = 0; x < VORONOI_SIZE; x++) {
+				const u = (x + .5) / VORONOI_SIZE;
+				const v = (y + .5) / VORONOI_SIZE;
+				let d1 = Infinity;
+				let d2 = Infinity;
+				let idx1 = 0;
+				let idx2 = 0;
+				for (let i = 0; i < SHARD_COUNT; i++) {
+					const dx = u - cellData[i * 4];
+					const dy = v - cellData[i * 4 + 1];
+					const distSq = dx * dx + dy * dy;
+					if (distSq < d1) {
+						d2 = d1;
+						idx2 = idx1;
+						d1 = distSq;
+						idx1 = i;
+					} else if (distSq < d2) {
+						d2 = distSq;
+						idx2 = i;
+					}
+				}
+				const offset = (y * VORONOI_SIZE + x) * 4;
+				voronoiData[offset] = idx1;
+				voronoiData[offset + 1] = idx2;
+				voronoiData[offset + 2] = 0;
+				voronoiData[offset + 3] = 0;
+			}
+			voronoiTexture.needsUpdate = true;
+		};
 		let currentSeed = uniforms.seed.uniform.value;
 		generateCells(currentSeed);
+		generateVoronoi();
 		displacementData.fill(0);
 		displacementTexture.needsUpdate = true;
 		let prevX = .5;
@@ -165,6 +210,7 @@ const componentDefinition = {
 			if (newSeed !== currentSeed) {
 				currentSeed = newSeed;
 				generateCells(currentSeed);
+				generateVoronoi();
 				displacementData.fill(0);
 			}
 			const intensity = uniforms.intensity.uniform.value;
@@ -186,8 +232,8 @@ const componentDefinition = {
 				const cellY = cellData[i * 4 + 1];
 				const randomDirX = cellData[i * 4 + 2] - .5;
 				const randomDirY = cellData[i * 4 + 3] - .5;
-				const dx = (cellX - pointer.x) / aspect;
-				const dy = cellY - pointer.y;
+				const dx = aspect >= 1 ? (cellX - pointer.x) * aspect : cellX - pointer.x;
+				const dy = aspect >= 1 ? cellY - pointer.y : (cellY - pointer.y) / aspect;
 				const dist = Math.sqrt(dx * dx + dy * dy);
 				let currentDx = displacementData[i * 4];
 				let currentDy = displacementData[i * 4 + 1];
@@ -220,6 +266,7 @@ const componentDefinition = {
 		onCleanup(() => {
 			cellTexture.dispose();
 			displacementTexture.dispose();
+			voronoiTexture.dispose();
 		});
 		if (!childNode) return vec4(0, 0, 0, 0);
 		const childTexture = convertToTexture(childNode);
@@ -228,43 +275,22 @@ const componentDefinition = {
 		});
 		const cellField = texture(cellTexture);
 		const dispField = texture(displacementTexture);
-		const cells = [];
-		for (let i = 0; i < SHARD_COUNT; i++) {
-			const u = (i % 4 + .5) / 4;
-			const v = (Math.floor(i / 4) + .5) / 4;
-			const cellPos = cellField.sample(vec2(u, v)).xy;
-			const dist = screenUV.sub(cellPos).length();
-			cells.push({
-				dist,
-				index: float(i)
-			});
-		}
-		let minDist1 = cells[0].dist;
-		let minDist2 = float(1e3);
-		let nearestIdx = cells[0].index;
-		for (let i = 1; i < SHARD_COUNT; i++) {
-			const dist = cells[i].dist;
-			const isNewNearest = dist.lessThan(minDist1);
-			const isNewSecond = dist.lessThan(minDist2).and(isNewNearest.not());
-			const nextMin2 = isNewNearest.select(minDist1, isNewSecond.select(dist, minDist2));
-			const nextMin1 = isNewNearest.select(dist, minDist1);
-			const nextIdx = isNewNearest.select(cells[i].index, nearestIdx);
-			minDist2 = nextMin2;
-			minDist1 = nextMin1;
-			nearestIdx = nextIdx;
-		}
-		const dispU = nearestIdx.mod(float(4)).add(.5).div(4);
-		const dispV = nearestIdx.div(float(4)).floor().add(.5).div(4);
-		const displacement = dispField.sample(vec2(dispU, dispV)).xy;
+		const voronoiSample = texture(voronoiTexture).sample(screenUV);
+		const nearestIdx = voronoiSample.r;
+		const secondIdx = voronoiSample.g;
+		const nearestUV = vec2(nearestIdx.mod(float(4)).add(.5).div(4), nearestIdx.div(float(4)).floor().add(.5).div(4));
+		const secondUV = vec2(secondIdx.mod(float(4)).add(.5).div(4), secondIdx.div(float(4)).floor().add(.5).div(4));
+		const nearestCellPos = cellField.sample(nearestUV).xy;
+		const secondCellPos = cellField.sample(secondUV).xy;
+		const minDist1 = screenUV.sub(nearestCellPos).length();
+		const minDist2 = screenUV.sub(secondCellPos).length();
+		const displacement = dispField.sample(nearestUV).xy;
 		const displacementMag = displacement.length();
 		const edgeDiff = minDist2.sub(minDist1);
 		const crackThreshold = uniforms.crackWidth.uniform.mul(.005);
 		const baseCrackIntensity = float(1).sub(smoothstep(float(0), crackThreshold, edgeDiff));
 		const displacementFactor = smoothstep(float(0), float(.01), displacementMag);
 		const crackIntensity = baseCrackIntensity.mul(displacementFactor);
-		const nearestCellU = nearestIdx.mod(float(4)).add(.5).div(4);
-		const nearestCellV = nearestIdx.div(float(4)).floor().add(.5).div(4);
-		const nearestCellPos = cellField.sample(vec2(nearestCellU, nearestCellV)).xy;
 		const toNearest = screenUV.sub(nearestCellPos).normalize();
 		const edgeNormal = vec2(toNearest.y.negate(), toNearest.x);
 		const displacedUV = screenUV.sub(displacement);

package/dist/core/{SimplexNoise-DIo9v2-R.js → SimplexNoise-DKov4Yho.js}

@@ -1,10 +1,10 @@
-import { r as transformColor } from "./transformations-YbhRK-rd.js";
+import { r as transformColor } from "./transformations-CC_c-QAT.js";
 import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
-import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
+import { t as mixColors } from "./colorMixing-Ehw-Hfs_.js";
 import { clamp, exp, float, mx_noise_float, screenUV, vec2, vec3, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "SimplexNoise",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Organic noise with animated movement",
 	props: {
 		colorA: {
@@ -13,16 +13,18 @@ const componentDefinition = {
 			transform: transformColor,
 			ui: {
 				type: "color",
-				label: "Color A"
+				label: "Color A",
+				group: "Colors"
 			}
 		},
 		colorB: {
-			default: "transparent",
+			default: "#000000",
 			description: "Second color",
 			transform: transformColor,
 			ui: {
 				type: "color",
-				label: "Color B"
+				label: "Color B",
+				group: "Colors"
 			}
 		},
 		scale: {
@@ -33,7 +35,8 @@ const componentDefinition = {
 				min: -2,
 				max: 5,
 				step: .1,
-				label: "Scale"
+				label: "Scale",
+				group: "Effect"
 			}
 		},
 		balance: {
@@ -44,7 +47,8 @@ const componentDefinition = {
 				min: -1,
 				max: 1,
 				step: .1,
-				label: "Balance"
+				label: "Balance",
+				group: "Effect"
 			}
 		},
 		contrast: {
@@ -55,7 +59,8 @@ const componentDefinition = {
 				min: -2,
 				max: 5,
 				step: .1,
-				label: "Contrast"
+				label: "Contrast",
+				group: "Appearance"
 			}
 		},
 		seed: {
@@ -66,7 +71,8 @@ const componentDefinition = {
 				min: 0,
 				max: 100,
 				step: 1,
-				label: "Seed"
+				label: "Seed",
+				group: "Effect"
 			}
 		},
 		speed: {
@@ -77,7 +83,8 @@ const componentDefinition = {
 				min: 0,
 				max: 5,
 				step: .1,
-				label: "Speed"
+				label: "Speed",
+				group: "Animation"
 			}
 		}
 	},

package/dist/core/{SineWave-DFNnXFYQ.js → SineWave-Cy0wWKUU.js}

@@ -1,9 +1,9 @@
-import { n as transformAngle, r as transformColor, s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { n as transformAngle, r as transformColor, s as transformPosition } from "./transformations-CC_c-QAT.js";
 import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
 import { PI, abs, cos, radians, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "SineWave",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Animated wave with thickness and softness",
 	props: {
 		color: {
@@ -12,7 +12,8 @@ const componentDefinition = {
 			description: "The color of the sine wave",
 			ui: {
 				type: "color",
-				label: "Color"
+				label: "Color",
+				group: "Colors"
 			}
 		},
 		amplitude: {
@@ -23,7 +24,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Amplitude"
+				label: "Amplitude",
+				group: "Effect"
 			}
 		},
 		frequency: {
@@ -34,7 +36,8 @@ const componentDefinition = {
 				min: .1,
 				max: 20,
 				step: .1,
-				label: "Frequency"
+				label: "Frequency",
+				group: "Effect"
 			}
 		},
 		speed: {
@@ -45,7 +48,8 @@ const componentDefinition = {
 				min: -5,
 				max: 5,
 				step: .1,
-				label: "Speed"
+				label: "Speed",
+				group: "Animation"
 			}
 		},
 		angle: {
@@ -57,7 +61,8 @@ const componentDefinition = {
 				min: 0,
 				max: 360,
 				step: 1,
-				label: "Angle"
+				label: "Angle",
+				group: "Effect"
 			}
 		},
 		position: {
@@ -69,7 +74,8 @@ const componentDefinition = {
 			description: "The center position of the wave",
 			ui: {
 				type: "position",
-				label: "Position"
+				label: "Position",
+				group: "Position"
 			}
 		},
 		thickness: {
@@ -80,7 +86,8 @@ const componentDefinition = {
 				min: 0,
 				max: 2,
 				step: .1,
-				label: "Thickness"
+				label: "Thickness",
+				group: "Effect"
 			}
 		},
 		softness: {
@@ -91,7 +98,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Softness"
+				label: "Softness",
+				group: "Effect"
 			}
 		}
 	},
@@ -112,7 +120,7 @@ const componentDefinition = {
 		const distanceFromWave = abs(rotatedY.sub(sineWave));
 		const halfThickness = uniforms.thickness.uniform.mul(.5);
 		const halfSoftness = uniforms.softness.uniform.mul(.5);
-		const waveMask = smoothstep(halfThickness.add(halfSoftness), halfThickness.sub(halfSoftness), distanceFromWave);
+		const waveMask = smoothstep(halfThickness.sub(halfSoftness), halfThickness.add(halfSoftness), distanceFromWave).oneMinus();
 		return vec4(uniforms.color.uniform.rgb, uniforms.color.uniform.a.mul(waveMask));
 	}
 };

package/dist/core/{SolidColor-B4eYGf_i.js → SolidColor-P4OKglCC.js}

@@ -1,7 +1,7 @@
-import { r as transformColor } from "./transformations-YbhRK-rd.js";
+import { r as transformColor } from "./transformations-CC_c-QAT.js";
 const componentDefinition = {
 	name: "SolidColor",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Fill the canvas with a single solid color",
 	props: { color: {
 		default: "#5b18ca",
@@ -9,7 +9,8 @@ const componentDefinition = {
 		description: "The solid color to display",
 		ui: {
 			type: "color",
-			label: "Color"
+			label: "Color",
+			group: "Colors"
 		}
 	} },
 	fragmentNode: ({ uniforms }) => {

package/dist/core/{Spherize-BIVrRcZG.js → Spherize-BLEvqakM.js}

@@ -1,4 +1,4 @@
-import { r as transformColor, s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { r as transformColor, s as transformPosition } from "./transformations-CC_c-QAT.js";
 import { convertToTexture, dot, float, max, normalize, pow, screenUV, smoothstep, sqrt, vec2, vec3, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Spherize",
@@ -15,7 +15,8 @@ const componentDefinition = {
 				min: .1,
 				max: 3,
 				step: .1,
-				label: "Radius"
+				label: "Radius",
+				group: "Effect"
 			}
 		},
 		depth: {
@@ -26,7 +27,8 @@ const componentDefinition = {
 				min: 0,
 				max: 3,
 				step: .1,
-				label: "Depth"
+				label: "Depth",
+				group: "Effect"
 			}
 		},
 		center: {
@@ -38,7 +40,8 @@ const componentDefinition = {
 			description: "The center point of the sphere",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		lightPosition: {
@@ -50,7 +53,8 @@ const componentDefinition = {
 			description: "Position of the specular light source",
 			ui: {
 				type: "position",
-				label: "Light Position"
+				label: "Light Position",
+				group: "Position"
 			}
 		},
 		lightIntensity: {
@@ -61,7 +65,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Light Intensity"
+				label: "Light Intensity",
+				group: "Effect"
 			}
 		},
 		lightSoftness: {
@@ -72,7 +77,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Light Softness"
+				label: "Light Softness",
+				group: "Effect"
 			}
 		},
 		lightColor: {
@@ -81,7 +87,8 @@ const componentDefinition = {
 			description: "Color of the specular highlight",
 			ui: {
 				type: "color",
-				label: "Light Color"
+				label: "Light Color",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/{Spiral-CqjRxq1I.js → Spiral-DXuKs26n.js}

@@ -1,10 +1,10 @@
-import { i as transformColorSpace, r as transformColor, s as transformPosition, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
+import { i as transformColorSpace, r as transformColor, s as transformPosition, t as colorSpaceOptions } from "./transformations-CC_c-QAT.js";
 import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
-import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
+import { t as mixColors } from "./colorMixing-Ehw-Hfs_.js";
 import { abs, atan, clamp, float, fract, fwidth, length, mix, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Spiral",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Rotating spiral pattern with animated movement",
 	props: {
 		colorA: {
@@ -13,7 +13,8 @@ const componentDefinition = {
 			description: "Background color",
 			ui: {
 				type: "color",
-				label: "Color A"
+				label: "Color A",
+				group: "Colors"
 			}
 		},
 		colorB: {
@@ -22,7 +23,8 @@ const componentDefinition = {
 			description: "Spiral stroke color",
 			ui: {
 				type: "color",
-				label: "Color B"
+				label: "Color B",
+				group: "Colors"
 			}
 		},
 		strokeWidth: {
@@ -33,7 +35,8 @@ const componentDefinition = {
 				min: 0,
 				max: 2,
 				step: .1,
-				label: "Stroke Width"
+				label: "Stroke Width",
+				group: "Effect"
 			}
 		},
 		strokeFalloff: {
@@ -44,7 +47,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Stroke Falloff"
+				label: "Stroke Falloff",
+				group: "Effect"
 			}
 		},
 		softness: {
@@ -55,7 +59,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Softness"
+				label: "Softness",
+				group: "Effect"
 			}
 		},
 		speed: {
@@ -66,7 +71,8 @@ const componentDefinition = {
 				min: -3,
 				max: 3,
 				step: .1,
-				label: "Speed"
+				label: "Speed",
+				group: "Animation"
 			}
 		},
 		center: {
@@ -78,7 +84,8 @@ const componentDefinition = {
 			description: "The center point of the spiral",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		},
 		scale: {
@@ -89,7 +96,8 @@ const componentDefinition = {
 				min: .1,
 				max: 5,
 				step: .1,
-				label: "Scale"
+				label: "Scale",
+				group: "Effect"
 			}
 		},
 		colorSpace: {
@@ -99,7 +107,8 @@ const componentDefinition = {
 			ui: {
 				type: "select",
 				options: colorSpaceOptions,
-				label: "Color Space"
+				label: "Color Space",
+				group: "Colors"
 			}
 		}
 	},