shaders 2.2.47 → 2.3.49

package/dist/core/ContourLines-NASMUR3G.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-DT7Q3TzC.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-dJ8C3PKh.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-Bac0W21a.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 };

package/dist/core/{DotGrid-BZVfqUZO.js → DotGrid-Cedu_WEn.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-DL9vhoyo.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-BzdJM5vN.js}

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