shaders 2.2.23 → 2.2.25

package/dist/core/Spiral-BSB_R39p.js

@@ -0,0 +1,132 @@
+import { i as transformColorSpace, o as transformPosition, r as transformColor, t as colorSpaceOptions } from "./transformations-DxfQXZWi.js";
+import { t as mixColors } from "./colorMixing-BXiTAqJU.js";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "Spiral",
+	category: "Base Layers",
+	description: "Rotating spiral pattern with animated movement",
+	acceptsUVContext: true,
+	props: {
+		colorA: {
+			default: "#000000",
+			transform: transformColor,
+			description: "Background color",
+			ui: {
+				type: "color",
+				label: "Color A"
+			}
+		},
+		colorB: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Spiral stroke color",
+			ui: {
+				type: "color",
+				label: "Color B"
+			}
+		},
+		strokeWidth: {
+			default: .5,
+			description: "Thickness of spiral stroke",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 2,
+				step: .01,
+				label: "Stroke Width"
+			}
+		},
+		strokeFalloff: {
+			default: 0,
+			description: "Stroke losing width further from center",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Stroke Falloff"
+			}
+		},
+		softness: {
+			default: 0,
+			description: "Color transition sharpness (0 = hard edge, 1 = smooth fade)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Softness"
+			}
+		},
+		speed: {
+			default: 1,
+			description: "Animation speed (negative values reverse direction)",
+			ui: {
+				type: "range",
+				min: -3,
+				max: 3,
+				step: .1,
+				label: "Speed"
+			}
+		},
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "The center point of the spiral",
+			ui: {
+				type: "position",
+				label: "Center"
+			}
+		},
+		scale: {
+			default: 1,
+			description: "Scale factor for spiral bands (higher = more bands, lower = fewer bands)",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 5,
+				step: .1,
+				label: "Scale"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			description: "Color space for color interpolation",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Space"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, uvContext }) => {
+		const { vec2: vec2$1, vec4: vec4$1, float: float$1, atan: atan$1, length, clamp: clamp$1, fract, abs: abs$1, mix: mix$1, smoothstep, screenUV: screenUV$1, time, fwidth, viewportSize: viewportSize$1 } = TSL;
+		const baseUV = uvContext ?? screenUV$1;
+		const aspect = viewportSize$1.x.div(viewportSize$1.y);
+		const aspectCorrectedUV = vec2$1(baseUV.x.mul(aspect), baseUV.y);
+		const centerPos = vec2$1(uniforms.center.uniform.x.mul(aspect), uniforms.center.uniform.y.oneMinus());
+		const uv = aspectCorrectedUV.sub(centerPos);
+		const t = time.mul(uniforms.speed.uniform);
+		const l = length(uv);
+		const adjustedLength = l;
+		const angle = atan$1(uv.y, uv.x).sub(t);
+		const TWO_PI = float$1(6.283185307);
+		const angleNormalised = angle.div(TWO_PI);
+		const offset = adjustedLength.mul(uniforms.scale.uniform).add(angleNormalised);
+		const shape = abs$1(fract(offset).sub(.5)).mul(2);
+		const baseWidth = clamp$1(uniforms.strokeWidth.uniform, uniforms.strokeFalloff.uniform.mul(.005), 1);
+		const falloffAmount = clamp$1(uniforms.strokeFalloff.uniform, 0, 1).mul(l).oneMinus();
+		const width = baseWidth.mul(falloffAmount);
+		const fw = fwidth(offset);
+		const pixelSize = mix$1(float$1(4).sub(smoothstep(.05, .4, uniforms.strokeWidth.uniform.mul(2)).mul(smoothstep(.05, .4, uniforms.strokeWidth.uniform.oneMinus().mul(2))).mul(3)).mul(fw), fwidth(shape), clamp$1(fw, 0, 1));
+		const res = smoothstep(width.sub(pixelSize).sub(uniforms.softness.uniform), width.add(pixelSize).add(uniforms.softness.uniform), shape);
+		const mixedColor = mixColors(uniforms.colorA.uniform, uniforms.colorB.uniform, res, uniforms.colorSpace.uniform);
+		return vec4$1(mixedColor.rgb, mixedColor.a);
+	}
+};
+var Spiral_default = componentDefinition;
+export { componentDefinition as n, Spiral_default as t };

package/dist/core/Strands-0stO5BMy.js

@@ -0,0 +1,161 @@
+import { t as createAnimatedTime } from "./time-CTJvRUZ4.js";
+import { o as transformPosition, r as transformColor } from "./transformations-DxfQXZWi.js";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "Strands",
+	category: "Base Layers",
+	description: "Procedural wavy strands with layered animation",
+	requiresRTT: false,
+	requiresChild: false,
+	acceptsUVContext: true,
+	props: {
+		speed: {
+			default: .5,
+			description: "Overall animation speed",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Speed"
+			}
+		},
+		amplitude: {
+			default: 1,
+			description: "Wave height amplitude",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 5,
+				step: .1,
+				label: "Amplitude"
+			}
+		},
+		frequency: {
+			default: 1,
+			description: "Wave frequency",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 5,
+				step: .01,
+				label: "Frequency"
+			}
+		},
+		lineCount: {
+			default: 12,
+			description: "Number of wave lines",
+			ui: {
+				type: "range",
+				min: 4,
+				max: 32,
+				step: 1,
+				label: "Line Count"
+			}
+		},
+		lineWidth: {
+			default: .1,
+			description: "Width of wave lines",
+			ui: {
+				type: "range",
+				min: .01,
+				max: .5,
+				step: .01,
+				label: "Line Width"
+			}
+		},
+		waveColor: {
+			default: "#f1c907",
+			transform: transformColor,
+			description: "Color of the waves",
+			ui: {
+				type: "color",
+				label: "Wave Color"
+			}
+		},
+		pinEdges: {
+			default: true,
+			description: "Pin waves at edges (fade effect)",
+			ui: {
+				type: "checkbox",
+				label: "Pin Edges"
+			}
+		},
+		start: {
+			default: {
+				x: 0,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Starting point of the waves",
+			ui: {
+				type: "position",
+				label: "Start"
+			}
+		},
+		end: {
+			default: {
+				x: 1,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Ending point of the waves",
+			ui: {
+				type: "position",
+				label: "End"
+			}
+		}
+	},
+	fragmentNode: (params) => {
+		const { uniforms, uvContext } = params;
+		const { vec2: vec2$1, vec4: vec4$1, cos: cos$1, abs: abs$1, smoothstep, mix: mix$1, max: max$1, screenUV: screenUV$1, viewportSize: viewportSize$1, float: float$1, Fn } = TSL;
+		const baseUV = uvContext ?? screenUV$1;
+		const t = createAnimatedTime(params, uniforms.speed);
+		const random = Fn(([time]) => {
+			return cos$1(time).add(cos$1(time.mul(1.2).add(1.6))).add(cos$1(time.mul(1.4).add(1.5))).div(3);
+		});
+		return Fn(([uv]) => {
+			const aspectRatio = viewportSize$1.x.div(viewportSize$1.y);
+			const startPos = vec2$1(uniforms.start.uniform.x.mul(aspectRatio), uniforms.start.uniform.y.oneMinus());
+			const endPos = vec2$1(uniforms.end.uniform.x.mul(aspectRatio), uniforms.end.uniform.y.oneMinus());
+			const aspectUV = vec2$1(uv.x.mul(aspectRatio), uv.y);
+			const direction = endPos.sub(startPos);
+			const length = direction.length();
+			const normalizedDir = direction.div(length);
+			const perpDir = vec2$1(normalizedDir.y.negate(), normalizedDir.x);
+			const relativePos = aspectUV.sub(startPos);
+			const progress = relativePos.dot(normalizedDir).div(length);
+			const distFromLine = relativePos.dot(perpDir);
+			const waveCoord = progress.mul(10);
+			const perpCoord = distFromLine.mul(10);
+			const edgeFade = uniforms.pinEdges.uniform.select(smoothstep(float$1(0), float$1(.1), progress).mul(smoothstep(float$1(1), float$1(.9), progress)), float$1(1));
+			const horizontalFade = uniforms.pinEdges.uniform.select(cos$1(progress.mul(6.28)).mul(.5).add(.5).oneMinus(), float$1(1));
+			const verticalFade = cos$1(progress.mul(6.28)).mul(.5).add(.5).oneMinus();
+			const linesColor = vec4$1(0, 0, 0, 0).toVar();
+			const maxLines = uniforms.lineCount.uniform;
+			for (let i = 0; i < 32; i++) {
+				const lineActive = float$1(i).lessThan(maxLines);
+				const lineIndex = float$1(i);
+				const normalizedIndex = lineIndex.div(maxLines);
+				const offsetFreq = float$1(.5);
+				const offsetSpeed = float$1(1.33);
+				const offsetTime = t.mul(offsetSpeed);
+				const offsetPosition = lineIndex.add(waveCoord.mul(offsetFreq));
+				const rand = random(offsetPosition.add(offsetTime)).mul(.5).add(.5);
+				const halfWidth = mix$1(float$1(.01), uniforms.lineWidth.uniform, rand.mul(horizontalFade)).mul(.5);
+				const minSpread = float$1(.6);
+				const maxSpread = float$1(2);
+				const offset = random(offsetPosition.add(offsetTime.mul(normalizedIndex.add(1)))).mul(mix$1(minSpread, maxSpread, horizontalFade)).mul(uniforms.amplitude.uniform);
+				const linePosition = random(waveCoord.mul(uniforms.frequency.uniform).add(t)).mul(horizontalFade).mul(uniforms.amplitude.uniform).add(offset);
+				const dist = abs$1(perpCoord.sub(linePosition));
+				const lineEdgeSoftness = float$1(.01);
+				const line = smoothstep(halfWidth.add(lineEdgeSoftness), halfWidth.sub(lineEdgeSoftness), dist);
+				const lineContribution = vec4$1(uniforms.waveColor.uniform.r, uniforms.waveColor.uniform.g, uniforms.waveColor.uniform.b, line).mul(rand);
+				linesColor.assign(max$1(linesColor, lineActive.select(lineContribution, vec4$1(0, 0, 0, 0))));
+			}
+			return linesColor.mul(vec4$1(1, 1, 1, verticalFade.mul(edgeFade)));
+		})(baseUV);
+	}
+};
+var Strands_default = componentDefinition;
+export { componentDefinition as n, Strands_default as t };

package/dist/core/Stretch-B645paha.js

@@ -0,0 +1,133 @@
+import { t as applyEdgeHandling } from "./edges-Bn_OIa_h.js";
+import { a as transformEdges, o as transformPosition } from "./transformations-DxfQXZWi.js";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "Stretch",
+	category: "Distortions",
+	description: "Stretch content towards a direction from a center point",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "The center point of the stretch effect",
+			ui: {
+				type: "position",
+				label: "Center"
+			}
+		},
+		strength: {
+			default: 1,
+			description: "The intensity of the stretch effect",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Strength"
+			}
+		},
+		angle: {
+			default: 0,
+			description: "The direction of the stretch in degrees",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Angle"
+			}
+		},
+		falloff: {
+			default: 0,
+			description: "Controls the sharpness of the transition (0 = sharp edge, 1 = gradual transition)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Falloff"
+			}
+		},
+		edges: {
+			default: "stretch",
+			description: "How to handle edges when distortion pushes content out of bounds",
+			transform: transformEdges,
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Stretch",
+						value: "stretch"
+					},
+					{
+						label: "Transparent",
+						value: "transparent"
+					},
+					{
+						label: "Mirror",
+						value: "mirror"
+					},
+					{
+						label: "Wrap",
+						value: "wrap"
+					}
+				],
+				label: "Edges"
+			}
+		}
+	},
+	uvTransformNode: ({ uv, uniforms, viewportSize: viewportSize$1 }) => {
+		const { vec2: vec2$1, float: float$1, sin: sin$1, cos: cos$1 } = TSL;
+		const aspect = viewportSize$1.x.div(viewportSize$1.y);
+		const aspectCorrectedUV = vec2$1(uv.x.mul(aspect), uv.y);
+		const centerPos = vec2$1(uniforms.center.uniform.x.mul(aspect), uniforms.center.uniform.y.oneMinus());
+		const delta = aspectCorrectedUV.sub(centerPos);
+		const angleRad = uniforms.angle.uniform.mul(Math.PI / 180);
+		const directionVector = vec2$1(cos$1(angleRad), sin$1(angleRad));
+		const projection = delta.dot(directionVector);
+		const perpendicular = delta.sub(directionVector.mul(projection));
+		const falloffAmount = uniforms.falloff.uniform;
+		const transitionWidth = TSL.mix(float$1(.001), float$1(75), falloffAmount);
+		const effectMask = TSL.clamp(projection.div(transitionWidth), float$1(0), float$1(1));
+		const scaledStrength = uniforms.strength.uniform.mul(float$1(100));
+		const stretchFactor = float$1(1).add(scaledStrength.mul(effectMask));
+		const finalProjection = projection.div(stretchFactor);
+		const stretchedDelta = directionVector.mul(finalProjection).add(perpendicular);
+		const stretchedUV = centerPos.add(stretchedDelta);
+		return vec2$1(stretchedUV.x.div(aspect), stretchedUV.y);
+	},
+	fragmentNode: ({ uniforms, childNode, onCleanup }) => {
+		const { vec2: vec2$1, vec4: vec4$1, screenUV: screenUV$1, viewportSize: viewportSize$1, convertToTexture: convertToTexture$1, float: float$1, sin: sin$1, cos: cos$1 } = TSL;
+		if (!childNode) return vec4$1(0, 0, 0, 0);
+		const childTexture = convertToTexture$1(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const aspect = viewportSize$1.x.div(viewportSize$1.y);
+		const aspectCorrectedUV = vec2$1(screenUV$1.x.mul(aspect), screenUV$1.y);
+		const centerPos = vec2$1(uniforms.center.uniform.x.mul(aspect), uniforms.center.uniform.y.oneMinus());
+		const delta = aspectCorrectedUV.sub(centerPos);
+		const angleRad = uniforms.angle.uniform.mul(Math.PI / 180);
+		const directionVector = vec2$1(cos$1(angleRad), sin$1(angleRad));
+		const projection = delta.dot(directionVector);
+		const parallel = directionVector.mul(projection);
+		const perpendicular = delta.sub(parallel);
+		const falloffAmount = uniforms.falloff.uniform;
+		const transitionWidth = TSL.mix(float$1(.001), float$1(75), falloffAmount);
+		const effectMask = TSL.clamp(projection.div(transitionWidth), float$1(0), float$1(1));
+		const scaledStrength = uniforms.strength.uniform.mul(float$1(100));
+		const stretchFactor = float$1(1).add(scaledStrength.mul(effectMask));
+		const finalProjection = projection.div(stretchFactor);
+		const stretchedDelta = directionVector.mul(finalProjection).add(perpendicular);
+		const stretchedUV = centerPos.add(stretchedDelta);
+		const finalUV = vec2$1(stretchedUV.x.div(aspect), stretchedUV.y);
+		return applyEdgeHandling(finalUV, childTexture.sample(finalUV), childTexture, uniforms.edges.uniform);
+	}
+};
+var Stretch_default = componentDefinition;
+export { componentDefinition as n, Stretch_default as t };

package/dist/core/Swirl-CVnbawit.js

@@ -0,0 +1,173 @@
+import { t as createAnimatedTime } from "./time-CTJvRUZ4.js";
+import { i as transformColorSpace, r as transformColor, t as colorSpaceOptions } from "./transformations-DxfQXZWi.js";
+import { t as mixColors } from "./colorMixing-BXiTAqJU.js";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "Swirl",
+	category: "Base Layers",
+	description: "Flowing swirl pattern with multi-layered noise",
+	acceptsUVContext: true,
+	props: {
+		colorA: {
+			default: "#1275d8",
+			description: "Primary gradient color",
+			transform: transformColor,
+			ui: {
+				type: "color",
+				label: "Primary Color"
+			}
+		},
+		colorB: {
+			default: "#e19136",
+			description: "Secondary gradient color",
+			transform: transformColor,
+			ui: {
+				type: "color",
+				label: "Secondary Color"
+			}
+		},
+		speed: {
+			default: 1,
+			description: "Flow animation speed",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 5,
+				step: .1,
+				label: "Speed"
+			}
+		},
+		detail: {
+			default: 1,
+			description: "Level of detail and intricacy in the swirl patterns",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 10,
+				step: .1,
+				label: "Detail"
+			}
+		},
+		blend: {
+			default: 50,
+			description: "Skew color balance toward A (lower values) or B (higher values)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Blend"
+			}
+		},
+		coarseX: {
+			default: 50,
+			description: "Horizontal frequency for coarse/base layer",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Coarse X"
+			}
+		},
+		coarseY: {
+			default: 50,
+			description: "Vertical frequency for coarse/base layer",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Coarse Y"
+			}
+		},
+		mediumX: {
+			default: 50,
+			description: "Horizontal frequency for medium detail layer",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Medium X"
+			}
+		},
+		mediumY: {
+			default: 50,
+			description: "Vertical frequency for medium detail layer",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Medium Y"
+			}
+		},
+		fineX: {
+			default: 50,
+			description: "Horizontal frequency for fine detail layer",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Fine X"
+			}
+		},
+		fineY: {
+			default: 50,
+			description: "Vertical frequency for fine detail layer",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Fine Y"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			description: "Color space for color interpolation",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Space"
+			}
+		}
+	},
+	fragmentNode: (params) => {
+		const { uniforms, uvContext } = params;
+		const { vec2: vec2$1, vec4: vec4$1, float: float$1, screenUV: screenUV$1, sin: sin$1, cos: cos$1, smoothstep } = TSL;
+		const uvCoords = uvContext ?? screenUV$1;
+		const t = createAnimatedTime(params, uniforms.speed);
+		const detail = uniforms.detail.uniform;
+		const scaleCoarse = float$1(.02);
+		const scaleMedium = float$1(.028);
+		const scaleFine = float$1(.056);
+		const freq1 = detail;
+		const coarseScaleX = uniforms.coarseX.uniform.mul(scaleCoarse);
+		const coarseScaleY = uniforms.coarseY.uniform.mul(scaleCoarse);
+		const distort1 = vec2$1(uvCoords.x.add(sin$1(uvCoords.y.mul(freq1.mul(coarseScaleY).mul(1.7)).add(t.mul(.8))).mul(.12)), uvCoords.y.add(cos$1(uvCoords.x.mul(freq1.mul(coarseScaleX).mul(1.3)).sub(t.mul(.6))).mul(.12)));
+		const pattern1 = sin$1(distort1.x.mul(freq1.mul(coarseScaleX).mul(2.1)).add(distort1.y.mul(freq1.mul(coarseScaleY).mul(1.8))).add(t.mul(.4)));
+		const freq2 = detail.mul(1.4);
+		const mediumScaleX = uniforms.mediumX.uniform.mul(scaleMedium);
+		const mediumScaleY = uniforms.mediumY.uniform.mul(scaleMedium);
+		const distort2 = vec2$1(distort1.x.add(cos$1(distort1.y.mul(freq2.mul(mediumScaleY).mul(1.9)).sub(t.mul(.5))).mul(.06)), distort1.y.add(sin$1(distort1.x.mul(freq2.mul(mediumScaleX).mul(2.3)).add(t.mul(.7))).mul(.06)));
+		const pattern2 = cos$1(distort2.x.mul(freq2.mul(mediumScaleX).mul(1.6)).sub(distort2.y.mul(freq2.mul(mediumScaleY).mul(2.4))).add(t.mul(.3)));
+		const freq3 = detail.mul(2.8);
+		const fineScaleX = uniforms.fineX.uniform.mul(scaleFine);
+		const fineScaleY = uniforms.fineY.uniform.mul(scaleFine);
+		const distort3 = vec2$1(distort2.x.add(sin$1(distort2.y.mul(freq3.mul(fineScaleY).mul(1.1)).add(t.mul(.9))).mul(.03)), distort2.y.add(cos$1(distort2.x.mul(freq3.mul(fineScaleX).mul(.9)).sub(t.mul(.4))).mul(.03)));
+		const pattern3 = sin$1(distort3.x.mul(freq3.mul(fineScaleX).mul(1.3)).add(distort3.y.mul(freq3.mul(fineScaleY).mul(1.7))).sub(t.mul(.6)));
+		const combinedPattern = pattern1.mul(.5).add(pattern2.mul(.3)).add(pattern3.mul(.2));
+		const blendBias = uniforms.blend.uniform.sub(50).mul(.006);
+		const blendFactor = smoothstep(.3, .7, combinedPattern.mul(.5).add(.5).add(blendBias));
+		const colorMix = mixColors(uniforms.colorA.uniform, uniforms.colorB.uniform, blendFactor, uniforms.colorSpace.uniform);
+		const shimmer = sin$1(t.mul(2.5).add(combinedPattern.mul(8))).mul(.015).add(1);
+		const finalColor = colorMix.mul(shimmer);
+		return vec4$1(finalColor.rgb, finalColor.a);
+	}
+};
+var Swirl_default = componentDefinition;
+export { componentDefinition as n, Swirl_default as t };