shaders 2.2.48 → 2.3.50

package/dist/core/{DotGrid-BZVfqUZO.js → DotGrid-wXnfcjrM.js}

@@ -1,8 +1,8 @@
-import { r as transformColor } from "./transformations-YbhRK-rd.js";
+import { r as transformColor } from "./transformations-CC_c-QAT.js";
 import { float, floor, fwidth, length, mix, screenUV, sin, smoothstep, time, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "DotGrid",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Grid of dots with optional twinkling animation",
 	props: {
 		color: {
@@ -11,18 +11,20 @@ const componentDefinition = {
 			transform: transformColor,
 			ui: {
 				type: "color",
-				label: "Color"
+				label: "Color",
+				group: "Colors"
 			}
 		},
 		density: {
-			default: 100,
+			default: 30,
 			description: "The number of dots on the longest canvas edge",
 			ui: {
 				type: "range",
-				min: 10,
-				max: 500,
-				step: 10,
-				label: "Density"
+				min: 1,
+				max: 200,
+				step: 1,
+				label: "Density",
+				group: "Effect"
 			}
 		},
 		dotSize: {
@@ -32,8 +34,9 @@ const componentDefinition = {
 				type: "range",
 				min: 0,
 				max: 1,
-				step: .1,
-				label: "Dot Size"
+				step: .05,
+				label: "Dot Size",
+				group: "Effect"
 			}
 		},
 		twinkle: {
@@ -44,7 +47,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Twinkle"
+				label: "Twinkle",
+				group: "Animation"
 			}
 		}
 	},

package/dist/core/{Duotone-sjvdZBlx.js → Duotone-B8dYgrFR.js}

@@ -1,5 +1,5 @@
-import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-YbhRK-rd.js";
-import { t as mixColors } from "./colorMixing-CZPFmiT4.js";
+import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-CC_c-QAT.js";
+import { t as mixColors } from "./colorMixing-Ehw-Hfs_.js";
 import { convertToTexture, dot, screenUV, smoothstep, vec3, vec4 } from "three/tsl";
 const componentDefinition = {
 	name: "Duotone",
@@ -14,7 +14,8 @@ const componentDefinition = {
 			description: "First color (used for darker areas)",
 			ui: {
 				type: "color",
-				label: "Color A"
+				label: "Color A",
+				group: "Colors"
 			}
 		},
 		colorB: {
@@ -23,7 +24,8 @@ const componentDefinition = {
 			description: "Second color (used for brighter areas)",
 			ui: {
 				type: "color",
-				label: "Color B"
+				label: "Color B",
+				group: "Colors"
 			}
 		},
 		blend: {
@@ -34,7 +36,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Blend"
+				label: "Blend",
+				group: "Effect"
 			}
 		},
 		colorSpace: {
@@ -44,7 +47,8 @@ const componentDefinition = {
 			ui: {
 				type: "select",
 				options: colorSpaceOptions,
-				label: "Color Space"
+				label: "Color Space",
+				group: "Colors"
 			}
 		}
 	},

package/dist/core/{FilmGrain-Cr3qP38A.js → FilmGrain-D_6m7GJ4.js}

@@ -12,7 +12,8 @@ const componentDefinition = {
 			min: 0,
 			max: 1,
 			step: .1,
-			label: "Strength"
+			label: "Strength",
+			group: "Effect"
 		}
 	} },
 	fragmentNode: ({ uniforms, childNode }) => {

package/dist/core/{FloatingParticles-CPsVFZJl.js → FloatingParticles-YuuXeICf.js}

@@ -1,4 +1,4 @@
-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 { Fn, cos, dot, float, floor, fract, length, min, mix, screenUV, sin, smoothstep, time, vec2, vec3, vec4, viewportSize } from "three/tsl";
 var hash1_2 = Fn(([p]) => {
@@ -22,7 +22,7 @@ var getParticleDistance = Fn(([uv$1, cellUV, randomness]) => {
 });
 const componentDefinition = {
 	name: "FloatingParticles",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Animated floating particles with twinkle effects",
 	requiresRTT: false,
 	props: {
@@ -34,7 +34,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Randomness"
+				label: "Randomness",
+				group: "Effect"
 			}
 		},
 		speed: {
@@ -45,7 +46,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Speed"
+				label: "Speed",
+				group: "Animation"
 			}
 		},
 		angle: {
@@ -56,7 +58,8 @@ const componentDefinition = {
 				min: 0,
 				max: 360,
 				step: 1,
-				label: "Angle"
+				label: "Angle",
+				group: "Animation"
 			}
 		},
 		particleSize: {
@@ -67,7 +70,8 @@ const componentDefinition = {
 				min: .1,
 				max: 20,
 				step: .1,
-				label: "Particle Size"
+				label: "Particle Size",
+				group: "Effect"
 			}
 		},
 		particleSoftness: {
@@ -78,7 +82,8 @@ const componentDefinition = {
 				min: 0,
 				max: 5,
 				step: .1,
-				label: "Particle Softness"
+				label: "Particle Softness",
+				group: "Effect"
 			}
 		},
 		twinkle: {
@@ -89,7 +94,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Twinkle"
+				label: "Twinkle",
+				group: "Animation"
 			}
 		},
 		count: {
@@ -100,7 +106,8 @@ const componentDefinition = {
 				min: 1,
 				max: 5,
 				step: 1,
-				label: "Count"
+				label: "Count",
+				group: "Effect"
 			}
 		},
 		particleColor: {
@@ -109,7 +116,8 @@ const componentDefinition = {
 			description: "Color of the particles",
 			ui: {
 				type: "color",
-				label: "Particle Color"
+				label: "Particle Color",
+				group: "Colors"
 			}
 		},
 		speedVariance: {
@@ -120,7 +128,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Speed Variance"
+				label: "Speed Variance",
+				group: "Animation"
 			}
 		},
 		angleVariance: {
@@ -131,7 +140,8 @@ const componentDefinition = {
 				min: 0,
 				max: 180,
 				step: 1,
-				label: "Angle Variance"
+				label: "Angle Variance",
+				group: "Animation"
 			}
 		},
 		particleDensity: {
@@ -142,7 +152,8 @@ const componentDefinition = {
 				min: .5,
 				max: 3,
 				step: .1,
-				label: "Particle Density"
+				label: "Particle Density",
+				group: "Effect"
 			}
 		}
 	},
@@ -170,7 +181,7 @@ const componentDefinition = {
 			minDist = checkRight.select(min(minDist, getParticleDistance(uv$2, rootUV.add(vec2(1, 0)), uniforms.randomness.uniform)), minDist);
 			minDist = checkTop.select(min(minDist, getParticleDistance(uv$2, rootUV.add(vec2(0, -1)), uniforms.randomness.uniform)), minDist);
 			minDist = checkBottom.select(min(minDist, getParticleDistance(uv$2, rootUV.add(vec2(0, 1)), uniforms.randomness.uniform)), minDist);
-			const baseIntensity = smoothstep(outerRadius, scaledSize.mul(.6), minDist);
+			const baseIntensity = smoothstep(scaledSize.mul(.6), outerRadius, minDist).oneMinus();
 			const twinkleIntensity = uniforms.twinkle.uniform;
 			const particlePhase = rootUV.x.mul(12.9898).add(rootUV.y.mul(78.233)).sin().mul(43758.5453).fract();
 			const twinkleValue = sin(time.mul(2).add(particlePhase.mul(6.28318))).mul(.5).add(.5);

package/dist/core/{FlowField-BJFGOUZL.js → FlowField-Dx2eqOcU.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
-import { o as transformEdges } from "./transformations-YbhRK-rd.js";
+import { o as transformEdges } from "./transformations-CC_c-QAT.js";
 import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
 import { convertToTexture, cos, float, length, max, mx_noise_float, screenUV, sin, vec2, vec3, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
@@ -17,7 +17,8 @@ const componentDefinition = {
 				min: 0,
 				max: .5,
 				step: .05,
-				label: "Strength"
+				label: "Strength",
+				group: "Effect"
 			}
 		},
 		detail: {
@@ -28,7 +29,8 @@ const componentDefinition = {
 				min: .5,
 				max: 5,
 				step: .1,
-				label: "Detail"
+				label: "Detail",
+				group: "Effect"
 			}
 		},
 		speed: {
@@ -39,7 +41,8 @@ const componentDefinition = {
 				min: 0,
 				max: 5,
 				step: .1,
-				label: "Speed"
+				label: "Speed",
+				group: "Animation"
 			}
 		},
 		edges: {
@@ -66,7 +69,8 @@ const componentDefinition = {
 						value: "wrap"
 					}
 				],
-				label: "Edges"
+				label: "Edges",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/{GlassTiles-DzYvo92U.js → GlassTiles-hnt2pUQN.js}

@@ -14,7 +14,8 @@ const componentDefinition = {
 				min: 0,
 				max: 10,
 				step: .1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		tileCount: {
@@ -25,7 +26,8 @@ const componentDefinition = {
 				min: 5,
 				max: 50,
 				step: 1,
-				label: "Tile Count"
+				label: "Tile Count",
+				group: "Effect"
 			}
 		},
 		rotation: {
@@ -36,7 +38,8 @@ const componentDefinition = {
 				min: 0,
 				max: 360,
 				step: 1,
-				label: "Rotation"
+				label: "Rotation",
+				group: "Effect"
 			}
 		},
 		roundness: {
@@ -47,7 +50,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Roundness"
+				label: "Roundness",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/Glitch-DfPXeSlL.js

@@ -0,0 +1,168 @@
+import { Fn, abs, clamp, convertToTexture, float, floor, fract, mix, screenUV, sin, step, time, vec2, vec3, vec4, viewportSize } from "three/tsl";
+var hash11 = Fn(([p]) => {
+	return fract(sin(p.mul(78.233)).mul(43758.5453));
+});
+const componentDefinition = {
+	name: "Glitch",
+	category: "Stylize",
+	description: "Digital glitch that melts pixels and distorts colors",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		intensity: {
+			default: .5,
+			description: "Overall glitch strength and frequency of glitch bursts",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Intensity",
+				group: "Effect"
+			}
+		},
+		speed: {
+			default: 1,
+			description: "How fast the glitch pattern evolves",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 5,
+				step: .1,
+				label: "Speed",
+				group: "Effect"
+			}
+		},
+		rgbShift: {
+			default: 5,
+			description: "Amount of chromatic aberration (RGB channel splitting)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 20,
+				step: .5,
+				label: "RGB Shift",
+				group: "Effect"
+			}
+		},
+		blockDensity: {
+			default: 10,
+			description: "Base number of horizontal glitch bands",
+			ui: {
+				type: "range",
+				min: 2,
+				max: 50,
+				step: 1,
+				label: "Block Density",
+				group: "Effect"
+			}
+		},
+		colorBarIntensity: {
+			default: .2,
+			description: "Intensity of vivid neon color bar overlay in glitch regions",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Color Bars",
+				group: "Effect"
+			}
+		},
+		mirrorAmount: {
+			default: .3,
+			description: "Chance of glitch blocks showing mirrored/flipped content",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Mirror",
+				group: "Effect"
+			}
+		},
+		scanlineIntensity: {
+			default: .2,
+			description: "Visibility of CRT-style horizontal scanlines in distorted areas",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Scanlines",
+				group: "Effect"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, childNode, onCleanup }) => {
+		if (!childNode) return vec4(0, 0, 0, 0);
+		const childTexture = convertToTexture(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const intensity = uniforms.intensity.uniform;
+		const speed = uniforms.speed.uniform;
+		const rgbShiftAmount = uniforms.rgbShift.uniform;
+		const blockDensity = uniforms.blockDensity.uniform;
+		const colorBarMix = uniforms.colorBarIntensity.uniform;
+		const mirrorChance = uniforms.mirrorAmount.uniform;
+		const scanlines = uniforms.scanlineIntensity.uniform;
+		const t = time.mul(speed);
+		const slowFrame = floor(t.mul(2.5));
+		const slowHash = hash11(slowFrame);
+		const slowPulse = slowHash.mul(slowHash).mul(slowHash);
+		const fastFrame = floor(t.mul(10));
+		const fastHash = hash11(fastFrame.add(73));
+		const fastPulse = fastHash.mul(fastHash);
+		const threshold = float(1).sub(intensity);
+		const majorBurst = step(threshold, slowPulse);
+		const minorFlicker = step(threshold.add(.15), fastPulse);
+		const glitchStrength = clamp(majorBurst.mul(.8).add(minorFlicker.mul(.4)), 0, 1).mul(intensity);
+		const bandY1 = floor(screenUV.y.mul(blockDensity));
+		const bandSeed1 = bandY1.mul(.37).add(slowFrame.mul(7.13));
+		const bandHash1 = hash11(bandSeed1);
+		const bandActive1 = step(float(1).sub(glitchStrength.mul(.5)), bandHash1);
+		const displace1 = hash11(bandSeed1.add(42)).sub(.5).mul(.25).mul(bandActive1);
+		const bandSeed2 = floor(screenUV.y.mul(blockDensity.mul(2))).mul(.53).add(fastFrame.mul(3.37));
+		const bandHash2 = hash11(bandSeed2);
+		const bandActive2 = step(float(1).sub(glitchStrength.mul(.7)), bandHash2);
+		const displace2 = hash11(bandSeed2.add(99)).sub(.5).mul(.12).mul(bandActive2);
+		const bandSeed3 = floor(screenUV.y.mul(blockDensity.mul(4))).mul(.71).add(fastFrame.mul(11.71));
+		const bandHash3 = hash11(bandSeed3);
+		const bandActive3 = step(float(1).sub(glitchStrength.mul(.9)), bandHash3);
+		const displace3 = hash11(bandSeed3.add(173)).sub(.5).mul(.05).mul(bandActive3);
+		const colX = floor(screenUV.x.mul(4));
+		const blockSeed = colX.mul(.41).add(bandY1.mul(.67)).add(slowFrame.mul(2.31));
+		const blockHash = hash11(blockSeed);
+		const blockActive = step(float(1).sub(glitchStrength.mul(.35)), blockHash);
+		const blockDisplace = hash11(blockSeed.add(77)).sub(.5).mul(.18).mul(blockActive);
+		const totalDisplaceX = displace1.add(displace2).add(displace3).add(blockDisplace);
+		const vertJitter = bandActive1.mul(hash11(bandSeed1.add(200)).sub(.5)).mul(.012);
+		const displacedUV = vec2(clamp(screenUV.x.add(totalDisplaceX.mul(glitchStrength)), 0, 1), clamp(screenUV.y.add(vertJitter.mul(glitchStrength)), 0, 1));
+		const mirrorSeed = colX.mul(.83).add(bandY1.mul(1.17)).add(slowFrame.mul(4.57));
+		const hMirrorHash = hash11(mirrorSeed);
+		const vMirrorHash = hash11(mirrorSeed.add(500));
+		const hMirrorActive = step(float(1).sub(mirrorChance.mul(glitchStrength)), hMirrorHash).mul(bandActive1);
+		const vMirrorActive = step(float(1).sub(mirrorChance.mul(glitchStrength).mul(.4)), vMirrorHash).mul(bandActive1);
+		const mirroredUV = vec2(mix(displacedUV.x, float(1).sub(displacedUV.x), hMirrorActive), mix(displacedUV.y, float(1).sub(displacedUV.y), vMirrorActive));
+		const rgbOffset = rgbShiftAmount.mul(.003).mul(glitchStrength.add(abs(totalDisplaceX).mul(2)));
+		const redUV = vec2(clamp(mirroredUV.x.add(rgbOffset), 0, 1), mirroredUV.y);
+		const blueUV = vec2(clamp(mirroredUV.x.sub(rgbOffset), 0, 1), mirroredUV.y);
+		const rSample = childTexture.sample(redUV).r;
+		const gSample = childTexture.sample(mirroredUV).g;
+		const bSample = childTexture.sample(blueUV).b;
+		const glitchedColor = vec3(rSample, gSample, bSample);
+		const fillStyleHash = hash11(blockSeed.add(555));
+		const barOffset = hash11(bandY1.add(slowFrame.mul(3.33)).add(333));
+		const barIndex = floor(fract(screenUV.x.mul(3).add(barOffset.mul(7))).mul(7));
+		const smpteColor = vec3(float(1).sub(step(float(2), barIndex)).add(step(float(4), barIndex).mul(float(1).sub(step(float(6), barIndex)))), float(1).sub(step(float(4), barIndex)), float(1).sub(step(float(.5), fract(barIndex.mul(.5)))));
+		const sh6 = fract(hash11(bandY1.add(13)).mul(.8).add(slowFrame.mul(.07))).mul(6);
+		const withBars = mix(glitchedColor, mix(vec3(clamp(abs(sh6.sub(3)).sub(1), 0, 1), clamp(float(2).sub(abs(sh6.sub(2))), 0, 1), clamp(float(2).sub(abs(sh6.sub(4))), 0, 1)).mul(1.3), smpteColor, step(float(.5), fillStyleHash)), bandActive1.mul(blockActive).mul(colorBarMix).mul(glitchStrength));
+		const anyDistortion = clamp(bandActive1.add(bandActive2).add(bandActive3), 0, 1);
+		const scanlineWave = sin(screenUV.y.mul(viewportSize.y).mul(float(3.14159265))).mul(.5).add(.5);
+		const scanlineEffect = float(1).sub(scanlines.mul(scanlineWave).mul(.3).mul(anyDistortion));
+		return vec4(withBars.mul(scanlineEffect), float(1));
+	}
+};
+var Glitch_default = componentDefinition;
+export { componentDefinition as n, Glitch_default as t };

package/dist/core/{Glow-C4JrnNxe.js → Glow-CQv_dRPj.js}

@@ -14,7 +14,8 @@ const componentDefinition = {
 				min: 0,
 				max: 10,
 				step: .1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		threshold: {
@@ -25,7 +26,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Threshold"
+				label: "Threshold",
+				group: "Effect"
 			}
 		},
 		size: {
@@ -36,7 +38,8 @@ const componentDefinition = {
 				min: 1,
 				max: 20,
 				step: .1,
-				label: "Glow Size"
+				label: "Glow Size",
+				group: "Effect"
 			}
 		}
 	},
@@ -47,23 +50,53 @@ const componentDefinition = {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
 		});
 		const originalColor = childTexture.sample(screenUV);
-		const glowEffect = Fn(() => {
+		const weights = [
+			.056,
+			.135,
+			.278,
+			.487,
+			.726,
+			.923,
+			1,
+			.923,
+			.726,
+			.487,
+			.278,
+			.135,
+			.056
+		];
+		const weightSum = 6.214;
+		const horizontalTexture = convertToTexture(Fn(() => {
 			const blurRadius = uniforms.size.uniform;
 			const threshold = uniforms.threshold.uniform;
 			const pixelSize = vec2(1).div(viewportSize);
-			const blurredGlow = vec4(0, 0, 0, 0).toVar();
-			const radius = 5;
-			for (let dx = -radius; dx <= radius; dx++) for (let dy = -radius; dy <= radius; dy++) {
-				const offset = vec2(float(dx), float(dy)).mul(pixelSize).mul(blurRadius);
-				const sampleUV = screenUV.add(offset);
-				const sampleColor = childTexture.sample(sampleUV);
+			const total = vec4(0).toVar();
+			for (let x = -6; x <= 6; x++) {
+				const weight = float(weights[x + 6] / weightSum);
+				const offset = vec2(float(x), float(0)).mul(blurRadius).mul(pixelSize);
+				const sampleCoord = screenUV.add(offset);
+				const sampleColor = childTexture.sample(sampleCoord);
 				const luminance = dot(sampleColor.rgb, vec3(.299, .587, .114));
 				const brightnessMask = max(float(0), luminance.sub(threshold));
 				const brightColor = sampleColor.mul(brightnessMask);
-				blurredGlow.assign(blurredGlow.add(brightColor));
+				total.assign(total.add(brightColor.mul(weight)));
+			}
+			return total;
+		})());
+		onCleanup(() => {
+			if (horizontalTexture?.renderTarget?.dispose) horizontalTexture.renderTarget.dispose();
+		});
+		const glowEffect = Fn(() => {
+			const blurRadius = uniforms.size.uniform;
+			const pixelSize = vec2(1).div(viewportSize);
+			const total = vec4(0).toVar();
+			for (let y = -6; y <= 6; y++) {
+				const weight = float(weights[y + 6] / weightSum);
+				const offset = vec2(float(0), float(y)).mul(blurRadius).mul(pixelSize);
+				const sampleCoord = screenUV.add(offset);
+				total.assign(total.add(horizontalTexture.sample(sampleCoord).mul(weight)));
 			}
-			const totalSamples = float((radius * 2 + 1) * (radius * 2 + 1));
-			return blurredGlow.div(totalSamples);
+			return total;
 		})();
 		const intensity = uniforms.intensity.uniform;
 		const intensifiedGlow = glowEffect.mul(intensity);