shaders 2.2.48 → 2.3.50

package/dist/core/ConcentricSpin-CLTGx_sN.js

@@ -0,0 +1,173 @@
+import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
+import { o as transformEdges, s as transformPosition } from "./transformations-CC_c-QAT.js";
+import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
+import { Fn, convertToTexture, cos, float, floor, fract, mix, mod, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
+const componentDefinition = {
+	name: "ConcentricSpin",
+	category: "Distortions",
+	description: "Concentric rings that each rotate the underlying image by different amounts",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		intensity: {
+			default: 20,
+			description: "Maximum rotation angle per ring",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Intensity",
+				group: "Effect"
+			}
+		},
+		rings: {
+			default: 8,
+			description: "Number of concentric rings",
+			ui: {
+				type: "range",
+				min: 1,
+				max: 30,
+				step: 1,
+				label: "Rings",
+				group: "Effect"
+			}
+		},
+		smoothness: {
+			default: .03,
+			description: "Softness of transitions between rings",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Smoothness",
+				group: "Effect"
+			}
+		},
+		seed: {
+			default: 0,
+			description: "Randomization seed for per-ring rotation variation",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Seed",
+				group: "Effect"
+			}
+		},
+		speed: {
+			default: .1,
+			description: "Speed of continuous ring rotation",
+			ui: {
+				type: "range",
+				min: -5,
+				max: 5,
+				step: .1,
+				label: "Speed",
+				group: "Animation"
+			}
+		},
+		speedRandomness: {
+			default: .5,
+			description: "How much each ring varies in rotation speed and direction",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Speed Randomness",
+				group: "Animation"
+			}
+		},
+		edges: {
+			default: "mirror",
+			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",
+				group: "Effect"
+			}
+		},
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Center point of the concentric rings",
+			ui: {
+				type: "position",
+				label: "Center Position",
+				group: "Position"
+			}
+		}
+	},
+	fragmentNode: (params) => {
+		const { uniforms, childNode, onCleanup } = params;
+		if (!childNode) return vec4(0, 0, 0, 0);
+		const childTexture = convertToTexture(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const center = vec2(uniforms.center.uniform.x, uniforms.center.uniform.y.oneMinus());
+		const maxAngle = uniforms.intensity.uniform.mul(.01745);
+		const rings = uniforms.rings.uniform;
+		const edgeSoftness = uniforms.smoothness.uniform;
+		const seed = uniforms.seed.uniform;
+		const speedRandomness = uniforms.speedRandomness.uniform;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const animTime = createAnimatedTime(params, uniforms.speed);
+		const hash = (x) => fract(sin(x.mul(12.9898)).mul(43758.5453)).sub(.5).mul(2);
+		return Fn(() => {
+			const uv$1 = screenUV;
+			const dx = uv$1.x.sub(center.x).mul(aspect);
+			const dy = uv$1.y.sub(center.y);
+			const ringCoord = vec2(dx, dy).length().mul(rings);
+			const ringIndex = floor(ringCoord);
+			const ringFrac = fract(ringCoord);
+			const seedOffset = seed.mul(.137);
+			const staticA = hash(ringIndex.add(seedOffset)).mul(maxAngle);
+			const staticB = hash(ringIndex.add(1).add(seedOffset)).mul(maxAngle);
+			const ringSpeedA = mix(float(1), hash(ringIndex.add(42.7)), speedRandomness);
+			const ringSpeedB = mix(float(1), hash(ringIndex.add(1).add(42.7)), speedRandomness);
+			const animA = animTime.mul(.25).mul(ringSpeedA);
+			const animB = animTime.mul(.25).mul(ringSpeedB);
+			const totalA = staticA.add(animA);
+			const totalB = staticB.add(animB);
+			const TWO_PI = float(Math.PI * 2);
+			const diff = mod(totalB.sub(totalA).add(Math.PI), TWO_PI).sub(Math.PI);
+			const halfEdge = edgeSoftness.mul(.5).add(.001);
+			const blend = smoothstep(float(.5).sub(halfEdge), float(.5).add(halfEdge), ringFrac);
+			const angle = totalA.add(diff.mul(blend));
+			const cosA = cos(angle);
+			const sinA = sin(angle);
+			const rotX = dx.mul(cosA).sub(dy.mul(sinA));
+			const rotY = dx.mul(sinA).add(dy.mul(cosA));
+			const distortedUV = vec2(rotX.div(aspect).add(center.x), rotY.add(center.y));
+			return applyEdgeHandling(distortedUV, childTexture.sample(distortedUV), childTexture, uniforms.edges.uniform);
+		})();
+	}
+};
+var ConcentricSpin_default = componentDefinition;
+export { componentDefinition as n, ConcentricSpin_default as t };

package/dist/core/ContourLines-Dc5J7iw5.js

@@ -0,0 +1,163 @@
+import { r as transformColor } from "./transformations-CC_c-QAT.js";
+import { dot, float, fract, fwidth, mix, oneMinus, pow, smoothstep, vec3, vec4 } from "three/tsl";
+var transformSource = (value) => {
+	return value === "alpha" ? 1 : 0;
+};
+var transformColorMode = (value) => {
+	return value === "custom" ? 1 : 0;
+};
+var transformBoolean = (value) => {
+	return value ? 1 : 0;
+};
+const componentDefinition = {
+	name: "ContourLines",
+	category: "Stylize",
+	description: "Draw topographical contour lines based on luminance or alpha",
+	requiresChild: true,
+	props: {
+		levels: {
+			default: 5,
+			description: "Number of contour levels",
+			ui: {
+				type: "range",
+				min: 2,
+				max: 30,
+				step: 1,
+				label: "Levels",
+				group: "Effect"
+			}
+		},
+		lineWidth: {
+			default: 2,
+			description: "Width of the contour lines in pixels",
+			ui: {
+				type: "range",
+				min: .5,
+				max: 5,
+				step: .1,
+				label: "Line Width",
+				group: "Effect"
+			}
+		},
+		softness: {
+			default: 0,
+			description: "Edge softness of the lines (0 = sharp, 1 = soft)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .05,
+				label: "Softness",
+				group: "Effect"
+			}
+		},
+		gamma: {
+			default: .5,
+			description: "Contour distribution. <1 clusters in bright, >1 clusters in dark",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 2,
+				step: .05,
+				label: "Gamma",
+				group: "Effect"
+			}
+		},
+		invert: {
+			default: false,
+			description: "Invert the source values",
+			transform: transformBoolean,
+			ui: {
+				type: "checkbox",
+				label: "Invert",
+				group: "Effect"
+			}
+		},
+		source: {
+			default: "luminance",
+			description: "Use luminance or alpha channel for contours",
+			transform: transformSource,
+			ui: {
+				type: "select",
+				options: [{
+					label: "Luminance",
+					value: "luminance"
+				}, {
+					label: "Alpha",
+					value: "alpha"
+				}],
+				label: "Source",
+				group: "Effect"
+			}
+		},
+		colorMode: {
+			default: "source",
+			description: "Use source image colors or custom colors",
+			transform: transformColorMode,
+			ui: {
+				type: "select",
+				options: [{
+					label: "Source",
+					value: "source"
+				}, {
+					label: "Custom",
+					value: "custom"
+				}],
+				label: "Color Mode",
+				group: "Colors"
+			}
+		},
+		lineColor: {
+			default: "#000000",
+			description: "Color of the contour lines (custom mode)",
+			transform: transformColor,
+			ui: {
+				type: "color",
+				label: "Line Color",
+				group: "Colors",
+				condition: { colorMode: "custom" }
+			}
+		},
+		backgroundColor: {
+			default: "transparent",
+			description: "Background color (custom mode)",
+			transform: transformColor,
+			ui: {
+				type: "color",
+				label: "Background Color",
+				group: "Colors",
+				condition: { colorMode: "custom" }
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, childNode }) => {
+		if (!childNode) return vec4(0, 0, 0, 0);
+		const levels = uniforms.levels.uniform;
+		const lineWidth = uniforms.lineWidth.uniform;
+		const softness = uniforms.softness.uniform;
+		const gamma = uniforms.gamma.uniform;
+		const isInverted = uniforms.invert.uniform.equal(float(1));
+		const lineColorVec = uniforms.lineColor.uniform;
+		const customLineColor = vec3(lineColorVec.x, lineColorVec.y, lineColorVec.z);
+		const customLineAlpha = lineColorVec.w;
+		const bgColorVec = uniforms.backgroundColor.uniform;
+		const customBgColor = vec3(bgColorVec.x, bgColorVec.y, bgColorVec.z);
+		const customBgAlpha = bgColorVec.w;
+		const originalColor = childNode;
+		const luminance = dot(originalColor.rgb, vec3(.2126, .7152, .0722));
+		const rawSourceValue = uniforms.source.uniform.equal(float(1)).select(originalColor.a, luminance);
+		const scaledValue = pow(isInverted.select(oneMinus(rawSourceValue), rawSourceValue), gamma).mul(levels).add(.5);
+		const fw = fwidth(scaledValue).max(float(1e-4));
+		const normalizedDist = fract(scaledValue.add(.5)).sub(.5).abs().div(fw);
+		const transitionFactor = softness.mul(.99).add(.01);
+		const lineMask = smoothstep(lineWidth.mul(oneMinus(transitionFactor)), lineWidth, normalizedDist).oneMinus();
+		const isCustomMode = uniforms.colorMode.uniform.equal(float(1));
+		const lineColor = isCustomMode.select(customLineColor, originalColor.rgb);
+		const lineAlpha = isCustomMode.select(customLineAlpha, float(1));
+		const bgColor = isCustomMode.select(customBgColor, vec3(0, 0, 0));
+		const bgAlpha = isCustomMode.select(customBgAlpha, float(0));
+		return vec4(mix(bgColor, lineColor, lineMask), mix(bgAlpha, lineAlpha, lineMask));
+	}
+};
+var ContourLines_default = componentDefinition;
+export { componentDefinition as n, ContourLines_default as t };

package/dist/core/{CursorTrail-BKfdORYc.js → CursorTrail-COnyRZH9.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 { DataTexture, FloatType, LinearFilter, RGBAFormat } from "three";
 import { float, screenUV, step, texture, vec2, vec4 } from "three/tsl";
 const componentDefinition = {
@@ -13,7 +13,8 @@ const componentDefinition = {
 			description: "Color of fresh trails",
 			ui: {
 				type: "color",
-				label: "Start Color"
+				label: "Start Color",
+				group: "Colors"
 			}
 		},
 		colorB: {
@@ -22,7 +23,8 @@ const componentDefinition = {
 			description: "Color trails transition to as they fade",
 			ui: {
 				type: "color",
-				label: "End Color"
+				label: "End Color",
+				group: "Colors"
 			}
 		},
 		radius: {
@@ -33,7 +35,8 @@ const componentDefinition = {
 				min: .5,
 				max: 2,
 				step: .1,
-				label: "Radius"
+				label: "Radius",
+				group: "Effect"
 			}
 		},
 		length: {
@@ -44,7 +47,8 @@ const componentDefinition = {
 				min: .1,
 				max: 2,
 				step: .1,
-				label: "Trail Length"
+				label: "Trail Length",
+				group: "Animation"
 			}
 		},
 		shrink: {
@@ -55,7 +59,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Shrink Amount"
+				label: "Shrink Amount",
+				group: "Effect"
 			}
 		},
 		colorSpace: {
@@ -65,7 +70,8 @@ const componentDefinition = {
 			ui: {
 				type: "select",
 				options: colorSpaceOptions,
-				label: "Color Space"
+				label: "Color Space",
+				group: "Colors"
 			}
 		}
 	},
@@ -108,8 +114,8 @@ const componentDefinition = {
 					const idx = (i * GRID_SIZE + j) * 4;
 					const cellX = (j + .5) / GRID_SIZE;
 					const cellY = (i + .5) / GRID_SIZE;
-					const cellDx = (cellX - pointer.x) / aspect;
-					const cellDy = cellY - pointer.y;
+					const cellDx = aspect >= 1 ? (cellX - pointer.x) * aspect : cellX - pointer.x;
+					const cellDy = aspect >= 1 ? cellY - pointer.y : (cellY - pointer.y) / aspect;
 					const dist = Math.sqrt(cellDx * cellDx + cellDy * cellDy);
 					if (dist < influenceRadius) {
 						const addAmount = Math.exp(-dist * dist / (radius * radius)) * speed * 50 * dt;

package/dist/core/{DiffuseBlur-BTSRl65K.js → DiffuseBlur-DcV8M7hN.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 { convertToTexture, dot, fract, screenUV, sin, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "DiffuseBlur",
@@ -16,7 +16,8 @@ const componentDefinition = {
 				min: 0,
 				max: 100,
 				step: 1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		edges: {
@@ -43,7 +44,8 @@ const componentDefinition = {
 						value: "wrap"
 					}
 				],
-				label: "Edges"
+				label: "Edges",
+				group: "Effect"
 			}
 		}
 	},
@@ -53,15 +55,9 @@ const componentDefinition = {
 		onCleanup(() => {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
 		});
-		const hash = (p) => {
-			return fract(sin(dot(p, vec2(12.9898, 78.233).mul(2))).mul(43758.5453));
-		};
 		const uv$1 = screenUV;
-		const pixelSize = vec2(1).div(viewportSize);
-		const seed = uv$1.mul(1e3);
-		const rand1 = hash(seed);
-		const rand2 = hash(seed.add(vec2(73.2, 41.9)));
-		const offset = vec2(rand1.mul(2).sub(1), rand2.mul(2).sub(1)).mul(uniforms.intensity.uniform).mul(pixelSize);
+		const sinVal = sin(dot(uv$1.mul(1e3), vec2(25.9796, 156.466)));
+		const offset = fract(vec2(sinVal.mul(43758.5453), sinVal.mul(28461.7231))).mul(2).sub(1).mul(uniforms.intensity.uniform).div(viewportSize);
 		const displacedUV = uv$1.add(offset);
 		return applyEdgeHandling(displacedUV, childTexture.sample(displacedUV), childTexture, uniforms.edges.uniform);
 	}

package/dist/core/Dither-C-w0ugGX.js

@@ -0,0 +1,210 @@
+import { r as transformColor } from "./transformations-CC_c-QAT.js";
+import { DataTexture, FloatType, NearestFilter, RGBAFormat, RepeatWrapping } from "three";
+import { convertToTexture, dot, float, floor, fract, mix, screenUV, sin, step, texture, vec2, vec3, vec4, viewportSize } from "three/tsl";
+var transformPattern = (value) => {
+	return {
+		"bayer2": 0,
+		"bayer4": 1,
+		"bayer8": 2,
+		"clusteredDot": 3,
+		"blueNoise": 4,
+		"whiteNoise": 5
+	}[value] ?? 1;
+};
+var transformColorMode = (value) => {
+	return value === "source" ? 1 : 0;
+};
+const componentDefinition = {
+	name: "Dither",
+	category: "Stylize",
+	description: "Dithering effect with multiple pattern options",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		pattern: {
+			default: "bayer4",
+			transform: transformPattern,
+			description: "Dithering pattern algorithm",
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Bayer 2x2",
+						value: "bayer2"
+					},
+					{
+						label: "Bayer 4x4",
+						value: "bayer4"
+					},
+					{
+						label: "Bayer 8x8",
+						value: "bayer8"
+					},
+					{
+						label: "Clustered Dot",
+						value: "clusteredDot"
+					},
+					{
+						label: "Blue Noise",
+						value: "blueNoise"
+					},
+					{
+						label: "White Noise",
+						value: "whiteNoise"
+					}
+				],
+				label: "Pattern",
+				group: "Effect"
+			}
+		},
+		pixelSize: {
+			default: 4,
+			description: "Size of dithering pixels",
+			ui: {
+				type: "range",
+				min: 1,
+				max: 20,
+				step: 1,
+				label: "Pixel Size",
+				group: "Effect"
+			}
+		},
+		threshold: {
+			default: .5,
+			description: "Luminance threshold for dithering",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Threshold",
+				group: "Effect"
+			}
+		},
+		spread: {
+			default: 1,
+			description: "How much of the luminance range participates in dithering (lower = more solid areas)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Spread",
+				group: "Effect"
+			}
+		},
+		colorMode: {
+			default: "custom",
+			transform: transformColorMode,
+			description: "How colors are determined",
+			ui: {
+				type: "select",
+				options: [{
+					label: "Custom Colors",
+					value: "custom"
+				}, {
+					label: "Source Colors",
+					value: "source"
+				}],
+				label: "Color Mode",
+				group: "Colors"
+			}
+		},
+		colorA: {
+			default: "transparent",
+			transform: transformColor,
+			description: "Dark color for dithering",
+			ui: {
+				type: "color",
+				label: "Dark Color",
+				condition: { colorMode: "custom" },
+				group: "Colors"
+			}
+		},
+		colorB: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Light color for dithering",
+			ui: {
+				type: "color",
+				label: "Light Color",
+				condition: { colorMode: "custom" },
+				group: "Colors"
+			}
+		}
+	},
+	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 DITHER_SIZE = 8;
+		const ditherData = new Float32Array(DITHER_SIZE * DITHER_SIZE * 4);
+		const bQ = (x, y) => y * 3 + x * 2 - x * y * 4;
+		const cM = [
+			[
+				12,
+				5,
+				6,
+				13
+			],
+			[
+				4,
+				0,
+				1,
+				7
+			],
+			[
+				11,
+				3,
+				2,
+				8
+			],
+			[
+				15,
+				10,
+				9,
+				14
+			]
+		];
+		for (let y = 0; y < DITHER_SIZE; y++) for (let x = 0; x < DITHER_SIZE; x++) {
+			const i = (y * DITHER_SIZE + x) * 4;
+			ditherData[i] = bQ(x % 2, y % 2) / 4;
+			ditherData[i + 1] = (bQ(x % 2, y % 2) * 4 + bQ(Math.floor(x % 4 / 2), Math.floor(y % 4 / 2))) / 16;
+			ditherData[i + 2] = (bQ(x % 2, y % 2) * 16 + bQ(Math.floor(x % 4 / 2), Math.floor(y % 4 / 2)) * 4 + bQ(Math.floor(x / 4), Math.floor(y / 4))) / 64;
+			ditherData[i + 3] = cM[y % 4][x % 4] / 16;
+		}
+		const ditherTex = new DataTexture(ditherData, DITHER_SIZE, DITHER_SIZE, RGBAFormat, FloatType);
+		ditherTex.magFilter = NearestFilter;
+		ditherTex.minFilter = NearestFilter;
+		ditherTex.wrapS = RepeatWrapping;
+		ditherTex.wrapT = RepeatWrapping;
+		ditherTex.needsUpdate = true;
+		onCleanup(() => {
+			ditherTex.dispose();
+		});
+		const pixelSize = uniforms.pixelSize.uniform;
+		const threshold = uniforms.threshold.uniform;
+		const spread = uniforms.spread.uniform;
+		const pixelCoord = floor(screenUV.mul(viewportSize).div(pixelSize));
+		const pixelatedUV = pixelCoord.add(.5).mul(pixelSize).div(viewportSize);
+		const sourceColor = childTexture.sample(pixelatedUV);
+		const luminance = dot(sourceColor.rgb, vec3(.299, .587, .114)).mul(sourceColor.a);
+		const patternSample = texture(ditherTex).sample(pixelCoord.div(float(DITHER_SIZE)));
+		const blueNoiseCoord = pixelCoord.add(.5);
+		const blueNoiseValue = fract(float(52.9829189).mul(fract(blueNoiseCoord.x.mul(.06711056).add(blueNoiseCoord.y.mul(.00583715)))));
+		const whiteNoiseValue = fract(sin(dot(pixelCoord, vec2(12.9898, 78.233))).mul(43758.5453));
+		const patternIndex = uniforms.pattern.uniform;
+		const ditherValue = patternIndex.equal(0).select(patternSample.r, patternIndex.equal(1).select(patternSample.g, patternIndex.equal(2).select(patternSample.b, patternIndex.equal(3).select(patternSample.a, patternIndex.equal(4).select(blueNoiseValue, whiteNoiseValue)))));
+		const ditherResult = step(float(.5).add(ditherValue.sub(.5).mul(spread)), luminance.add(threshold.sub(.5)));
+		const colorModeIndex = uniforms.colorMode.uniform;
+		const customFinalRGB = mix(uniforms.colorA.uniform.rgb, uniforms.colorB.uniform.rgb, ditherResult);
+		const customFinalAlpha = mix(uniforms.colorA.uniform.a, uniforms.colorB.uniform.a, ditherResult);
+		const sourceFinalRGB = mix(sourceColor.rgb.mul(.3), sourceColor.rgb.mul(1.3).min(vec3(1)), ditherResult);
+		const sourceFinalAlpha = sourceColor.a;
+		return vec4(colorModeIndex.equal(0).select(customFinalRGB, sourceFinalRGB), colorModeIndex.equal(0).select(customFinalAlpha, sourceFinalAlpha));
+	}
+};
+var Dither_default = componentDefinition;
+export { componentDefinition as n, Dither_default as t };