shaders 2.5.88 → 2.5.90

package/dist/core/MultiPointGradient-BcjurHeM.js

@@ -0,0 +1,181 @@
+import { a as transformColor, l as transformPosition } from "./transformations-B5lM6fYX.js";
+import { Fn, float, pow, screenUV, sqrt, vec2, vec3, vec4, viewportSize } from "three/tsl";
+const componentDefinition = {
+	name: "MultiPointGradient",
+	category: "Textures",
+	description: "Five individually placed color points blended together by proximity — drag each point to shape the gradient",
+	props: {
+		colorA: {
+			default: "#4776E6",
+			transform: transformColor,
+			description: "Color of control point A",
+			ui: {
+				type: "color",
+				label: "Color",
+				group: "Point A"
+			}
+		},
+		positionA: {
+			default: {
+				x: .2,
+				y: .2
+			},
+			transform: transformPosition,
+			description: "Position of control point A",
+			ui: {
+				type: "position",
+				label: "Position",
+				group: "Point A"
+			}
+		},
+		colorB: {
+			default: "#C44DFF",
+			transform: transformColor,
+			description: "Color of control point B",
+			ui: {
+				type: "color",
+				label: "Color",
+				group: "Point B"
+			}
+		},
+		positionB: {
+			default: {
+				x: .8,
+				y: .2
+			},
+			transform: transformPosition,
+			description: "Position of control point B",
+			ui: {
+				type: "position",
+				label: "Position",
+				group: "Point B"
+			}
+		},
+		colorC: {
+			default: "#1ABC9C",
+			transform: transformColor,
+			description: "Color of control point C",
+			ui: {
+				type: "color",
+				label: "Color",
+				group: "Point C"
+			}
+		},
+		positionC: {
+			default: {
+				x: .2,
+				y: .8
+			},
+			transform: transformPosition,
+			description: "Position of control point C",
+			ui: {
+				type: "position",
+				label: "Position",
+				group: "Point C"
+			}
+		},
+		colorD: {
+			default: "#F8BBD9",
+			transform: transformColor,
+			description: "Color of control point D",
+			ui: {
+				type: "color",
+				label: "Color",
+				group: "Point D"
+			}
+		},
+		positionD: {
+			default: {
+				x: .8,
+				y: .8
+			},
+			transform: transformPosition,
+			description: "Position of control point D",
+			ui: {
+				type: "position",
+				label: "Position",
+				group: "Point D"
+			}
+		},
+		colorE: {
+			default: "#FF8C42",
+			transform: transformColor,
+			description: "Color of control point E",
+			ui: {
+				type: "color",
+				label: "Color",
+				group: "Point E"
+			}
+		},
+		positionE: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Position of control point E",
+			ui: {
+				type: "position",
+				label: "Position",
+				group: "Point E"
+			}
+		},
+		smoothness: {
+			default: 2,
+			description: "Controls how smoothly colors blend.",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 5,
+				step: .05,
+				label: "Smoothness",
+				group: "Effect"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms }) => {
+		const smoothness = uniforms.smoothness.uniform;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const uvAspect = vec2(screenUV.x.mul(aspect), screenUV.y);
+		const points = [
+			{
+				color: uniforms.colorA.uniform,
+				pos: vec2(uniforms.positionA.uniform.x.mul(aspect), uniforms.positionA.uniform.y.oneMinus())
+			},
+			{
+				color: uniforms.colorB.uniform,
+				pos: vec2(uniforms.positionB.uniform.x.mul(aspect), uniforms.positionB.uniform.y.oneMinus())
+			},
+			{
+				color: uniforms.colorC.uniform,
+				pos: vec2(uniforms.positionC.uniform.x.mul(aspect), uniforms.positionC.uniform.y.oneMinus())
+			},
+			{
+				color: uniforms.colorD.uniform,
+				pos: vec2(uniforms.positionD.uniform.x.mul(aspect), uniforms.positionD.uniform.y.oneMinus())
+			},
+			{
+				color: uniforms.colorE.uniform,
+				pos: vec2(uniforms.positionE.uniform.x.mul(aspect), uniforms.positionE.uniform.y.oneMinus())
+			}
+		];
+		return Fn(() => {
+			const wRGB = vec3(0).toVar();
+			const wA = float(0).toVar();
+			const wSum = float(0).toVar();
+			for (const { color, pos } of points) {
+				const dx = uvAspect.x.sub(pos.x);
+				const dy = uvAspect.y.sub(pos.y);
+				const dist = sqrt(dx.mul(dx).add(dy.mul(dy))).add(float(.001));
+				const effectivePower = float(8).div(smoothness.add(float(.5))).min(float(8));
+				const weight = float(1).div(pow(dist, effectivePower));
+				wRGB.assign(wRGB.add(color.rgb.mul(weight)));
+				wA.assign(wA.add(color.a.mul(weight)));
+				wSum.assign(wSum.add(weight));
+			}
+			return vec4(wRGB.div(wSum), wA.div(wSum));
+		})();
+	}
+};
+var MultiPointGradient_default = componentDefinition;
+export { componentDefinition as n, MultiPointGradient_default as t };

package/dist/core/{Neon-gsfaMvGq.js → Neon-CRC16G0F.js}

@@ -1,5 +1,5 @@
 import { a as transformColor, l as transformPosition } from "./transformations-B5lM6fYX.js";
-import { n as createAnalyticSdfSampler, r as createSvgSdfSampler } from "./sdf-CZRX0uur.js";
+import { n as createAnalyticSdfSampler, r as createSvgSdfSampler } from "./sdf-Bux00UoZ.js";
 import { Fn, atan, clamp, cos, exp, exp2, float, max, mix, pow, screenUV, sin, smoothstep, sqrt, uniform, vec2, vec3, vec4, viewportSize } from "three/tsl";
 var _LZ = .7;
 var _INV_LIGHT_LEN = 1 / Math.sqrt(1 + _LZ * _LZ);

package/dist/core/{Polygon-BeqB8MSz.js → Polygon-2V8po0Ba.js}

@@ -1,6 +1,6 @@
 import { a as transformColor, l as transformPosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
 import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
-import { c as polygonSdf, t as circleSdf } from "./sdf-CZRX0uur.js";
+import { c as polygonSdf, t as circleSdf } from "./sdf-Bux00UoZ.js";
 import { cos, float, mix, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 var transformStrokePosition = (value) => {
 	return {

package/dist/core/RadialGradient-niSnNlOF.js

@@ -0,0 +1,123 @@
+import { a as transformColor, l as transformPosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
+import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
+import { cos, distance, float, fract, screenUV, sin, vec2, viewportSize } from "three/tsl";
+const componentDefinition = {
+	name: "RadialGradient",
+	category: "Textures",
+	description: "Radial gradient radiating from a center point",
+	props: {
+		colorA: {
+			default: "#ff0000",
+			transform: transformColor,
+			description: "The starting color at the center of the gradient",
+			ui: {
+				type: "color",
+				label: "Color A",
+				group: "Colors"
+			}
+		},
+		colorB: {
+			default: "#0000ff",
+			transform: transformColor,
+			description: "The ending color at the edge of the gradient",
+			ui: {
+				type: "color",
+				label: "Color B",
+				group: "Colors"
+			}
+		},
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "The center point of the radial gradient",
+			ui: {
+				type: "position",
+				label: "Center",
+				group: "Position"
+			}
+		},
+		radius: {
+			default: 1,
+			description: "The radius of the gradient (normalized, 0.0-1.0)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 2,
+				step: .1,
+				label: "Radius",
+				group: "Effect"
+			}
+		},
+		repeat: {
+			default: 1,
+			description: "Number of times the gradient repeats. Values above 1 create concentric rings.",
+			ui: {
+				type: ["range", "map"],
+				min: 1,
+				max: 20,
+				step: .5,
+				label: "Repeat",
+				group: "Effect"
+			}
+		},
+		aspect: {
+			default: 1,
+			description: "Stretches the gradient into an ellipse. Values below 1 compress vertically, above 1 compress horizontally.",
+			ui: {
+				type: ["range", "map"],
+				min: .1,
+				max: 4,
+				step: .05,
+				label: "Aspect",
+				group: "Effect"
+			}
+		},
+		skewAngle: {
+			default: 0,
+			description: "Rotates the ellipse axis in degrees. Only visible when Aspect is not 1.",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Skew Angle",
+				group: "Effect"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			compileTime: true,
+			description: "Color space for color interpolation",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Space",
+				group: "Colors"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms }) => {
+		const uv$1 = screenUV;
+		const aspectRatio = viewportSize.x.div(viewportSize.y);
+		const aspectCorrectedUV = vec2(uv$1.x.mul(aspectRatio), uv$1.y);
+		const centerPos = vec2(uniforms.center.uniform.x.mul(aspectRatio), uniforms.center.uniform.y.oneMinus());
+		const dx = aspectCorrectedUV.x.sub(centerPos.x);
+		const dy = aspectCorrectedUV.y.sub(centerPos.y);
+		const skewRad = uniforms.skewAngle.uniform.mul(float(Math.PI / 180));
+		const cosS = cos(skewRad);
+		const sinS = sin(skewRad);
+		const rdx = dx.mul(cosS).add(dy.mul(sinS));
+		const rdy = dx.mul(sinS).negate().add(dy.mul(cosS));
+		const dist = distance(vec2(rdx.mul(uniforms.aspect.uniform), rdy), vec2(float(0), float(0)));
+		const safeRadius = uniforms.radius.uniform.max(float(1e-6));
+		const t = dist.div(safeRadius).mul(uniforms.repeat.uniform);
+		const finalT = uniforms.repeat.uniform.greaterThan(float(1.0001)).select(fract(t), t.clamp(float(0), float(1)));
+		return mixColors(uniforms.colorA.uniform, uniforms.colorB.uniform, finalT, uniforms.colorSpace.uniform.value);
+	}
+};
+var RadialGradient_default = componentDefinition;
+export { componentDefinition as n, RadialGradient_default as t };

package/dist/core/{Ring-DJl9JUMR.js → Ring-BiKv_lr2.js}

@@ -1,6 +1,6 @@
 import { a as transformColor, l as transformPosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
 import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
-import { l as ringSdf } from "./sdf-CZRX0uur.js";
+import { l as ringSdf } from "./sdf-Bux00UoZ.js";
 import { float, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 var transformStrokePosition = (value) => {
 	return {

package/dist/core/{RoundedRect--rHP7xW4.js → RoundedRect-BjOTRXb0.js}

@@ -1,6 +1,6 @@
 import { a as transformColor, l as transformPosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
 import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
-import { u as roundedRectSdf } from "./sdf-CZRX0uur.js";
+import { u as roundedRectSdf } from "./sdf-Bux00UoZ.js";
 import { cos, float, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 var transformStrokePosition = (value) => {
 	return {

package/dist/core/Solarize-B0aT_8tE.js

@@ -0,0 +1,47 @@
+import { dot, mix, vec3, vec4 } from "three/tsl";
+const componentDefinition = {
+	name: "Solarize",
+	category: "Adjustments",
+	description: "Inverts tones above a luminance threshold — a classic darkroom and photo effect",
+	requiresChild: true,
+	props: {
+		threshold: {
+			default: .5,
+			description: "Luminance level above which colors are inverted. Pixels brighter than this threshold get flipped.",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Threshold",
+				group: "Effect"
+			}
+		},
+		strength: {
+			default: 1,
+			description: "Blend between original (0) and fully solarized (1)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Strength",
+				group: "Effect"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, childNode }) => {
+		if (!childNode) {
+			console.error("You must pass a child component into the Solarize shader.");
+			return vec4(0);
+		}
+		const threshold = uniforms.threshold.uniform;
+		const strength = uniforms.strength.uniform;
+		const luminance = dot(childNode.rgb, vec3(.299, .587, .114));
+		const inverted = vec3(1).sub(childNode.rgb);
+		const solarized = luminance.greaterThan(threshold).select(inverted, childNode.rgb);
+		return vec4(mix(childNode.rgb, solarized, strength), childNode.a);
+	}
+};
+var Solarize_default = componentDefinition;
+export { componentDefinition as n, Solarize_default as t };

package/dist/core/{Star-CxI_taxd.js → Star-DJnks6B5.js}

@@ -1,6 +1,6 @@
 import { a as transformColor, l as transformPosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
 import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
-import { d as starSdf } from "./sdf-CZRX0uur.js";
+import { d as starSdf } from "./sdf-Bux00UoZ.js";
 import { cos, float, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 var transformStrokePosition = (value) => {
 	return {

package/dist/core/{Trapezoid-D7qg9Gc5.js → Trapezoid-CoK8i1IS.js}

@@ -1,6 +1,6 @@
 import { a as transformColor, l as transformPosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
 import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
-import { f as trapezoidSdf } from "./sdf-CZRX0uur.js";
+import { f as trapezoidSdf } from "./sdf-Bux00UoZ.js";
 import { cos, float, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 var transformStrokePosition = (value) => {
 	return {

package/dist/core/Truchet-Bz6ETvSS.js

@@ -0,0 +1,100 @@
+import { a as transformColor, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
+import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
+import { Fn, abs, dot, float, floor, fract, fwidth, length, min, screenUV, sin, smoothstep, step, vec2, viewportSize } from "three/tsl";
+var truchetHash = Fn(([p]) => {
+	return fract(sin(dot(p, vec2(127.1, 311.7))).mul(float(43758.5453)));
+});
+const componentDefinition = {
+	name: "Truchet",
+	category: "Textures",
+	description: "Quarter-circle arc tiles that connect to form organic, maze-like flowing curves",
+	props: {
+		colorA: {
+			default: "#000000",
+			transform: transformColor,
+			description: "Background color between the arcs",
+			ui: {
+				type: "color",
+				label: "Color A",
+				group: "Colors"
+			}
+		},
+		colorB: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Arc line color",
+			ui: {
+				type: "color",
+				label: "Color B",
+				group: "Colors"
+			}
+		},
+		cells: {
+			default: 10,
+			description: "Number of tiles across the shortest canvas edge",
+			ui: {
+				type: ["range", "map"],
+				min: 2,
+				max: 40,
+				step: 1,
+				label: "Cells",
+				group: "Effect"
+			}
+		},
+		thickness: {
+			default: 2,
+			description: "Thickness of the arc lines",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 20,
+				step: .1,
+				label: "Thickness",
+				group: "Effect"
+			}
+		},
+		seed: {
+			default: 0,
+			description: "Random seed — changes which tiles flip, producing a different maze pattern",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Seed",
+				group: "Effect"
+			}
+		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			compileTime: true,
+			description: "Color space for color interpolation",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Space",
+				group: "Colors"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms }) => {
+		const uv$1 = screenUV;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const scaledUV = vec2(uv$1.x.mul(aspect), uv$1.y).mul(uniforms.cells.uniform);
+		const cell = floor(scaledUV);
+		const localUV = fract(scaledUV);
+		const flip = truchetHash(cell.add(uniforms.seed.uniform)).greaterThan(float(.5));
+		const c1x = flip.select(float(1), float(0));
+		const c1y = flip.select(float(0), float(0));
+		const c2x = flip.select(float(0), float(1));
+		const c2y = flip.select(float(1), float(1));
+		const arcDist = min(abs(length(localUV.sub(vec2(c1x, c1y))).sub(float(.5))), abs(length(localUV.sub(vec2(c2x, c2y))).sub(float(.5))));
+		const lineWidth = uniforms.thickness.uniform.mul(float(.005));
+		const pixel = fwidth(scaledUV.x).mul(float(.5));
+		const lineMask = smoothstep(lineWidth.add(pixel), lineWidth, arcDist).mul(step(float(1e-4), lineWidth));
+		return mixColors(uniforms.colorA.uniform, uniforms.colorB.uniform, lineMask, uniforms.colorSpace.uniform.value);
+	}
+};
+var Truchet_default = componentDefinition;
+export { componentDefinition as n, Truchet_default as t };

package/dist/core/{Vesica-p8oNtcOH.js → Vesica-BELYZ5M8.js}

@@ -1,6 +1,6 @@
 import { a as transformColor, l as transformPosition, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
 import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
-import { p as vesicaSdf } from "./sdf-CZRX0uur.js";
+import { p as vesicaSdf } from "./sdf-Bux00UoZ.js";
 import { cos, float, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 var transformStrokePosition = (value) => {
 	return {

package/dist/core/{VideoTexture-ChFw0jKS.js → VideoTexture-C90aUnt4.js}

@@ -1,4 +1,4 @@
-import { t as needsVideoCanvasWorkaround } from "./browser-CWKHEzb9.js";
+import { t as needsVideoCanvasWorkaround } from "./browser-CpS3EEFG.js";
 import { CanvasTexture, SRGBColorSpace, VideoTexture } from "three/webgpu";
 import { float, max, min, or, screenUV, select, step, texture, uniform, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {

package/dist/core/Vignette-B94FMFBz.js

@@ -0,0 +1,84 @@
+import { a as transformColor, l as transformPosition } from "./transformations-B5lM6fYX.js";
+import { length, mix, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
+const componentDefinition = {
+	name: "Vignette",
+	category: "Stylize",
+	description: "Darkens or tints the edges of the frame, drawing attention toward the center",
+	requiresChild: true,
+	props: {
+		color: {
+			default: "#000000",
+			transform: transformColor,
+			description: "Color of the vignette at the edges",
+			ui: {
+				type: "color",
+				label: "Color",
+				group: "Colors"
+			}
+		},
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Center of the clear area where the vignette begins",
+			ui: {
+				type: "position",
+				label: "Center",
+				group: "Position"
+			}
+		},
+		radius: {
+			default: .5,
+			description: "Distance from center where the vignette begins to fade in",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1.5,
+				step: .01,
+				label: "Radius",
+				group: "Effect"
+			}
+		},
+		falloff: {
+			default: .5,
+			description: "Width of the transition zone from clear to full vignette",
+			ui: {
+				type: ["range", "map"],
+				min: .01,
+				max: 1.5,
+				step: .01,
+				label: "Falloff",
+				group: "Effect"
+			}
+		},
+		intensity: {
+			default: 1,
+			description: "Strength of the vignette effect",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Intensity",
+				group: "Effect"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, childNode }) => {
+		if (!childNode) {
+			console.error("You must pass a child component into the Vignette shader.");
+			return vec4(0);
+		}
+		const uv$1 = screenUV;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const aspectUV = vec2(uv$1.x.mul(aspect), uv$1.y);
+		const centerPos = vec2(uniforms.center.uniform.x.mul(aspect), uniforms.center.uniform.y.oneMinus());
+		const dist = length(aspectUV.sub(centerPos));
+		const vignetteMask = smoothstep(uniforms.radius.uniform, uniforms.radius.uniform.add(uniforms.falloff.uniform), dist);
+		return vec4(mix(childNode.rgb, uniforms.color.uniform.rgb, vignetteMask.mul(uniforms.intensity.uniform)), childNode.a);
+	}
+};
+var Vignette_default = componentDefinition;
+export { componentDefinition as n, Vignette_default as t };