shaders 2.5.93 → 2.5.95

package/dist/core/CursorTrail-CCRbdwHJ.js

@@ -0,0 +1,263 @@
+import { a as transformColor, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
+import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
+import { StorageTexture } from "three/webgpu";
+import { DataTexture, FloatType, LinearFilter as LinearFilter$1, RGBAFormat } from "three";
+import { Fn, If, attributeArray, float, instanceIndex, screenUV, step, storageTexture, texture, textureStore, uint, uniform, uvec2, vec2, vec4 } from "three/tsl";
+var GRID_SIZE = 128;
+const componentDefinition = {
+	name: "CursorTrail",
+	category: "Interactive",
+	description: "Animated trail effect that tracks cursor movement",
+	props: {
+		colorA: {
+			default: "#00aaff",
+			transform: transformColor,
+			description: "Color of fresh trails",
+			ui: {
+				type: "color",
+				label: "Start Color",
+				group: "Colors"
+			}
+		},
+		colorB: {
+			default: "#ff00aa",
+			transform: transformColor,
+			description: "Color trails transition to as they fade",
+			ui: {
+				type: "color",
+				label: "End Color",
+				group: "Colors"
+			}
+		},
+		radius: {
+			default: .5,
+			description: "Base radius of trail circles",
+			ui: {
+				type: "range",
+				min: .5,
+				max: 2,
+				step: .1,
+				label: "Radius",
+				group: "Effect"
+			}
+		},
+		length: {
+			default: .5,
+			description: "How long trail circles persist (in seconds)",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 2,
+				step: .1,
+				label: "Trail Length",
+				group: "Animation"
+			}
+		},
+		shrink: {
+			default: 1,
+			description: "How much circles shrink as they fade out (0 = no shrink, 1 = full shrink)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .1,
+				label: "Shrink Amount",
+				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"
+			}
+		}
+	},
+	computeNode: ({ uniforms, onCleanup, dimensions, renderer }) => {
+		const trailBuffer = attributeArray(GRID_SIZE * GRID_SIZE, "vec4");
+		const trailTex = new StorageTexture(GRID_SIZE, GRID_SIZE);
+		trailTex.type = FloatType;
+		const trailTexNode = storageTexture(trailTex);
+		onCleanup(() => {
+			trailTex.dispose();
+		});
+		const fadeRateU = uniform(.97);
+		const ageRateU = uniform(.03);
+		const shrinkU = uniform(1);
+		const cursorXU = uniform(.5);
+		const cursorYU = uniform(.5);
+		const radiusU = uniform(.05);
+		const amountU = uniform(0);
+		const aspectU = uniform(1);
+		const mouseActiveU = uniform(0);
+		const gs = uint(GRID_SIZE);
+		const decayPass = Fn(() => {
+			const idx = instanceIndex;
+			const cell = trailBuffer.element(idx);
+			const intensity = cell.x.mul(fadeRateU);
+			const size = float(1).sub(float(1).sub(intensity).mul(shrinkU));
+			const age = cell.z.add(ageRateU).min(float(1));
+			trailBuffer.element(idx).assign(vec4(intensity, size, age, float(0)));
+		})().compute(GRID_SIZE * GRID_SIZE, [256]);
+		const stampPass = Fn(() => {
+			const idx = instanceIndex;
+			const j = idx.mod(gs);
+			const i = idx.div(gs);
+			If(mouseActiveU.greaterThan(float(.5)), () => {
+				const cellX = j.toFloat().add(float(.5)).div(float(GRID_SIZE));
+				const cellY = i.toFloat().add(float(.5)).div(float(GRID_SIZE));
+				const ddx = aspectU.greaterThanEqual(float(1)).select(cellX.sub(cursorXU).mul(aspectU), cellX.sub(cursorXU));
+				const ddy = aspectU.greaterThanEqual(float(1)).select(cellY.sub(cursorYU), cellY.sub(cursorYU).div(aspectU));
+				const distSq = ddx.mul(ddx).add(ddy.mul(ddy));
+				const influenceRadius = radiusU.mul(float(3));
+				If(distSq.lessThan(influenceRadius.mul(influenceRadius)), () => {
+					const influence = distSq.negate().div(radiusU.mul(radiusU)).exp();
+					const newIntensity = trailBuffer.element(idx).x.add(influence.mul(amountU)).min(float(1));
+					trailBuffer.element(idx).assign(vec4(newIntensity, float(1), float(0), float(0)));
+				});
+			});
+		})().compute(GRID_SIZE * GRID_SIZE, [256]);
+		const outputPass = Fn(() => {
+			const idx = instanceIndex;
+			const j = idx.mod(gs);
+			const i = idx.div(gs);
+			const cell = trailBuffer.element(idx);
+			textureStore(trailTexNode, uvec2(j, i), cell).toWriteOnly();
+		})().compute(GRID_SIZE * GRID_SIZE, [256]);
+		let prevX = .5;
+		let prevY = .5;
+		let lastTime = Date.now();
+		let lastActiveTime = Date.now();
+		return {
+			outputs: { trailTexture: trailTex },
+			getComputeNodes: (params) => {
+				const currentTime = Date.now();
+				const dt = Math.min((currentTime - lastTime) / 1e3, .016);
+				lastTime = currentTime;
+				const aspect = dimensions.width / dimensions.height;
+				const radius = uniforms.radius.uniform.value * .1;
+				const length$1 = uniforms.length.uniform.value;
+				const shrink = uniforms.shrink.uniform.value;
+				const dx = params.pointer.x - prevX;
+				const dy = params.pointer.y - prevY;
+				const speed = Math.sqrt(dx * dx + dy * dy);
+				const oldX = prevX;
+				const oldY = prevY;
+				prevX = params.pointer.x;
+				prevY = params.pointer.y;
+				if (speed > .001) lastActiveTime = currentTime;
+				const settleMs = Math.min(3e4, Math.max(3e3, length$1 * 5e3));
+				if (currentTime - lastActiveTime > settleMs) return null;
+				fadeRateU.value = 1 - dt / Math.max(.1, length$1);
+				ageRateU.value = dt / Math.max(.1, length$1);
+				shrinkU.value = shrink;
+				radiusU.value = radius;
+				aspectU.value = aspect;
+				renderer.compute(decayPass);
+				if (speed > .001) {
+					const stepSize = Math.max(.005, radius * .5);
+					const numSteps = Math.min(20, Math.max(1, Math.ceil(speed / stepSize)));
+					const amountPerStep = speed / numSteps * 50 * dt;
+					mouseActiveU.value = 1;
+					amountU.value = amountPerStep;
+					for (let s = 0; s < numSteps; s++) {
+						const t = (s + .5) / numSteps;
+						cursorXU.value = oldX + dx * t;
+						cursorYU.value = oldY + dy * t;
+						renderer.compute(stampPass);
+					}
+				}
+				return [outputPass];
+			}
+		};
+	},
+	fragmentNode: ({ uniforms, onBeforeRender, onCleanup, dimensions, computeOutputs }) => {
+		let trailField;
+		if (computeOutputs?.trailTexture) trailField = texture(computeOutputs.trailTexture);
+		else {
+			const trailData = new Float32Array(GRID_SIZE * GRID_SIZE * 4);
+			const trailTexture = new DataTexture(trailData, GRID_SIZE, GRID_SIZE, RGBAFormat, FloatType);
+			trailTexture.magFilter = LinearFilter$1;
+			trailTexture.minFilter = LinearFilter$1;
+			trailTexture.needsUpdate = true;
+			trailField = texture(trailTexture);
+			let prevX = .5;
+			let prevY = .5;
+			let lastTime = Date.now();
+			onBeforeRender(({ pointer }) => {
+				const currentTime = Date.now();
+				const dt = Math.min((currentTime - lastTime) / 1e3, .016);
+				lastTime = currentTime;
+				const aspect = dimensions.width / dimensions.height;
+				const radius = uniforms.radius.uniform.value * .1;
+				const length$1 = uniforms.length.uniform.value;
+				const shrink = uniforms.shrink.uniform.value;
+				const dx = pointer.x - prevX;
+				const dy = pointer.y - prevY;
+				const speed = Math.sqrt(dx * dx + dy * dy);
+				const fadeRate = 1 - dt / Math.max(.1, length$1);
+				const ageRate = dt / Math.max(.1, length$1);
+				for (let i = 0; i < GRID_SIZE * GRID_SIZE * 4; i += 4) {
+					trailData[i] *= fadeRate;
+					trailData[i + 1] = 1 - (1 - trailData[i]) * shrink;
+					trailData[i + 2] = Math.min(1, trailData[i + 2] + ageRate);
+				}
+				if (speed > .001) {
+					const influenceRadius = radius * 3;
+					const stepSize = Math.max(.005, radius * .5);
+					const numSteps = Math.min(20, Math.max(1, Math.ceil(speed / stepSize)));
+					const amountPerStep = speed / numSteps * 50 * dt;
+					for (let s = 0; s < numSteps; s++) {
+						const t = (s + .5) / numSteps;
+						const px = prevX + dx * t;
+						const py = prevY + dy * t;
+						const minJ = Math.max(0, Math.floor((px - influenceRadius) * GRID_SIZE));
+						const maxJ = Math.min(GRID_SIZE - 1, Math.ceil((px + influenceRadius) * GRID_SIZE));
+						const minI = Math.max(0, Math.floor((py - influenceRadius) * GRID_SIZE));
+						const maxI = Math.min(GRID_SIZE - 1, Math.ceil((py + influenceRadius) * GRID_SIZE));
+						for (let i = minI; i <= maxI; i++) for (let j = minJ; j <= maxJ; j++) {
+							const idx = (i * GRID_SIZE + j) * 4;
+							const cellX = (j + .5) / GRID_SIZE;
+							const cellY = (i + .5) / GRID_SIZE;
+							const cellDx = aspect >= 1 ? (cellX - px) * aspect : cellX - px;
+							const cellDy = aspect >= 1 ? cellY - py : (cellY - py) / aspect;
+							const dist = Math.sqrt(cellDx * cellDx + cellDy * cellDy);
+							if (dist < influenceRadius) {
+								const influence = Math.exp(-dist * dist / (radius * radius));
+								trailData[idx] = Math.min(1, trailData[idx] + influence * amountPerStep);
+								trailData[idx + 1] = 1;
+								trailData[idx + 2] = 0;
+							}
+						}
+					}
+				}
+				trailTexture.needsUpdate = true;
+				prevX = pointer.x;
+				prevY = pointer.y;
+			});
+			onCleanup(() => {
+				trailTexture.dispose();
+			});
+		}
+		const pixelSize = float(1 / GRID_SIZE);
+		const centerSample = trailField.sample(screenUV);
+		const sample1 = trailField.sample(screenUV.add(vec2(pixelSize, float(0))));
+		const sample2 = trailField.sample(screenUV.add(vec2(float(0), pixelSize)));
+		const sample3 = trailField.sample(screenUV.add(vec2(pixelSize.negate(), float(0))));
+		const sample4 = trailField.sample(screenUV.add(vec2(float(0), pixelSize.negate())));
+		const trailIntensity = centerSample.x.mul(float(.5)).add(sample1.x.mul(float(.125))).add(sample2.x.mul(float(.125))).add(sample3.x.mul(float(.125))).add(sample4.x.mul(float(.125)));
+		const trailAge = centerSample.z.mul(float(.5)).add(sample1.z.mul(float(.125))).add(sample2.z.mul(float(.125))).add(sample3.z.mul(float(.125))).add(sample4.z.mul(float(.125)));
+		const circleMask = step(float(.01), trailIntensity);
+		const colorA = uniforms.colorA.uniform;
+		const colorB = uniforms.colorB.uniform;
+		const trailColor = mixColors(colorA, colorB, trailAge, uniforms.colorSpace.uniform.value);
+		return vec4(trailColor.rgb, trailColor.a.mul(circleMask));
+	}
+};
+var CursorTrail_default = componentDefinition;
+export { componentDefinition as n, CursorTrail_default as t };

package/dist/core/{Ellipse-BNmzdnpK.js → Ellipse-CXxGqTYI.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 { o as ellipseSdf } from "./sdf-Bux00UoZ.js";
+import { o as ellipseSdf } from "./sdf-DyC2H_qS.js";
 import { cos, float, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 var transformStrokePosition = (value) => {
 	return {

package/dist/core/{Emboss-nrduRrVs.js → Emboss-ClQV27Mt.js}

@@ -1,5 +1,5 @@
 import { l as transformPosition } from "./transformations-B5lM6fYX.js";
-import { n as createAnalyticSdfSampler, r as createSvgSdfSampler } from "./sdf-Bux00UoZ.js";
+import { n as createAnalyticSdfSampler, r as createSvgSdfSampler } from "./sdf-DyC2H_qS.js";
 import { Fn, abs, clamp, convertToTexture, cos, float, max, screenUV, sin, smoothstep, sqrt, vec2, vec3, vec4, viewportSize } from "three/tsl";
 var _INV_LIGHT_LEN = 1 / Math.sqrt(1.49);
 var _LZN = .7 * _INV_LIGHT_LEN;

package/dist/core/{Flower-B4xPp0Qa.js → Flower-MAwlZEv8.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 { s as flowerSdf } from "./sdf-Bux00UoZ.js";
+import { s as flowerSdf } from "./sdf-DyC2H_qS.js";
 import { cos, float, screenUV, sin, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
 var transformStrokePosition = (value) => {
 	return {

package/dist/core/{Glass-CR9981-Z.js → Glass-gQCmJlsQ.js}

@@ -1,6 +1,7 @@
 import { a as transformColor, l as transformPosition } from "./transformations-B5lM6fYX.js";
-import { n as createAnalyticSdfSampler, r as createSvgSdfSampler } from "./sdf-Bux00UoZ.js";
-import { Fn, clamp, convertToTexture, cos, dot, exp2, float, max, mix, pow, screenUV, sin, smoothstep, sqrt, vec2, vec3, vec4, viewportSize } from "three/tsl";
+import { t as createGaussianBlurCompute } from "./computeBlur-B0KA4n89.js";
+import { n as createAnalyticSdfSampler, r as createSvgSdfSampler } from "./sdf-DyC2H_qS.js";
+import { Fn, clamp, convertToTexture, dot, exp2, float, max, mix, pow, screenUV, smoothstep, sqrt, texture, uniform, vec2, vec3, vec4, viewportSize } from "three/tsl";
 var GOLDEN_ANGLE = 2.3999632297286535;
 var BLUR_SAMPLE_COUNT = 9;
 const BLUR_DISK = [];
@@ -10,7 +11,16 @@ for (let i = 0; i < BLUR_SAMPLE_COUNT; i++) {
 	BLUR_DISK.push([Math.cos(angle) * r, Math.sin(angle) * r]);
 }
 var INV_HLEN_GLASS = 1 / Math.sqrt(5);
-function applyGlassEffect(childTexture, sdfSampler, uniforms) {
+function applyGlassEffect(childTexture, sdfSampler, uniforms, onBeforeRender, blurredTexture) {
+	const lx = uniform(0);
+	const ly = uniform(0);
+	const updateLightAngle = () => {
+		const rad = uniforms.lightAngle.uniform.value * Math.PI / 180;
+		lx.value = Math.cos(rad);
+		ly.value = Math.sin(rad);
+	};
+	updateLightAngle();
+	onBeforeRender?.(updateLightAngle);
 	return Fn(() => {
 		const uv$1 = screenUV;
 		const aspect = viewportSize.x.div(viewportSize.y);
@@ -27,9 +37,6 @@ function applyGlassEffect(childTexture, sdfSampler, uniforms) {
 		const gradY = sdfSampler(sdfUV.add(vec2(float(0), EPS))).r.sub(sdfRaw).div(EPS);
 		const rb1 = clamp(sdf.negate().div(sharp).mul(float(32)), float(0), float(1));
 		const rb2base = clamp(sdf.sub(pxH).negate().div(sharp).mul(float(16)), float(0), float(1)).sub(clamp(sdf.negate().div(sharp).mul(float(16)), float(0), float(1)));
-		const lightRad = uniforms.lightAngle.uniform.mul(float(Math.PI / 180));
-		const lx = cos(lightRad);
-		const ly = sin(lightRad);
 		const lightFacing = gradX.mul(lx).add(gradY.mul(ly)).mul(float(.5)).add(float(.5));
 		const rb2 = rb2base.mul(lightFacing).mul(uniforms.highlight.uniform);
 		const thicknessRange = uniforms.thickness.uniform.mul(float(.3)).max(float(.005));
@@ -42,7 +49,21 @@ function applyGlassEffect(childTexture, sdfSampler, uniforms) {
 		const blurEnabled = typeof uniforms.blur.uniform.value === "number" ? uniforms.blur.uniform.value > 0 : true;
 		const aberrationEnabled = typeof uniforms.aberration.uniform.value === "number" ? uniforms.aberration.uniform.value > 0 : true;
 		let blurred;
-		if (!blurEnabled && !aberrationEnabled) blurred = childTexture.sample(lensUV);
+		if (blurredTexture && blurEnabled) {
+			const blurTex = texture(blurredTexture);
+			if (!aberrationEnabled) blurred = blurTex.sample(lensUV);
+			else {
+				const chrScale = uniforms.aberration.uniform.mul(float(.06));
+				const chrOffX = offsetX.mul(chrScale);
+				const chrOffY = offsetY.mul(chrScale);
+				const rUV = lensUV.add(vec2(chrOffX, chrOffY));
+				const bUV = lensUV.sub(vec2(chrOffX, chrOffY));
+				const rSample = blurTex.sample(rUV);
+				const gSample = blurTex.sample(lensUV);
+				const bSample = blurTex.sample(bUV);
+				blurred = vec4(rSample.r, gSample.g, bSample.b, gSample.a);
+			}
+		} else if (!blurEnabled && !aberrationEnabled) blurred = childTexture.sample(lensUV);
 		else if (!blurEnabled && aberrationEnabled) {
 			const chrScale = uniforms.aberration.uniform.mul(float(.06));
 			const chrOffX = offsetX.mul(chrScale);
@@ -362,12 +383,35 @@ const componentDefinition = {
 			description: "Active SDF shape type — triggers recompile when shape is switched. When empty, derived from shape JSON at mount time."
 		}
 	},
-	fragmentNode: ({ uniforms, childNode, onCleanup, onBeforeRender }) => {
-		if (!childNode) return vec4(0);
+	computeNode: ({ uniforms, childNode, onCleanup, dimensions, renderer }) => {
+		if (!childNode) return null;
+		const blurValue = uniforms.blur.uniform.value;
+		if (typeof blurValue === "number" && blurValue <= 0) return null;
 		const childTexture = convertToTexture(childNode);
 		onCleanup(() => {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
 		});
+		const dpr = renderer?.getPixelRatio?.() ?? 1;
+		const { computeNodes, outputTexture, updateRadius } = createGaussianBlurCompute(childTexture, Math.round(dimensions.width * dpr), Math.round(dimensions.height * dpr), onCleanup);
+		return {
+			outputs: {
+				childTexture,
+				blurredTexture: outputTexture
+			},
+			getComputeNodes: () => {
+				const currentBlur = uniforms.blur.uniform.value;
+				updateRadius(currentBlur * 2);
+				return computeNodes;
+			}
+		};
+	},
+	fragmentNode: ({ uniforms, childNode, onCleanup, onBeforeRender, computeOutputs }) => {
+		if (!childNode) return vec4(0);
+		const childTexture = computeOutputs?.childTexture ?? convertToTexture(childNode);
+		if (!computeOutputs) onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const blurredTexture = computeOutputs?.blurredTexture;
 		const shapeSdfUrl = uniforms.shapeSdfUrl.uniform.value;
 		const initialConfig = (() => {
 			const val = uniforms.shape.uniform.value;
@@ -383,8 +427,8 @@ const componentDefinition = {
 				};
 			}
 		})();
-		if (shapeSdfUrl) return applyGlassEffect(childTexture, createSvgSdfSampler(shapeSdfUrl, onBeforeRender, onCleanup), uniforms);
-		else return applyGlassEffect(childTexture, createAnalyticSdfSampler(uniforms.shapeType.uniform.value || initialConfig.type || "circleSDF", initialConfig, uniforms.shape, onBeforeRender), uniforms);
+		if (shapeSdfUrl) return applyGlassEffect(childTexture, createSvgSdfSampler(shapeSdfUrl, onBeforeRender, onCleanup), uniforms, onBeforeRender, blurredTexture);
+		else return applyGlassEffect(childTexture, createAnalyticSdfSampler(uniforms.shapeType.uniform.value || initialConfig.type || "circleSDF", initialConfig, uniforms.shape, onBeforeRender), uniforms, onBeforeRender, blurredTexture);
 	}
 };
 var Glass_default = componentDefinition;

package/dist/core/{Glow-CKWIRcBt.js → Glow-DvN-WnB4.js}

@@ -1,5 +1,6 @@
 import { t as unpremultiplyAlpha } from "./alpha-C4ptedXe.js";
-import { Fn, convertToTexture, dot, float, max, screenUV, vec2, vec3, vec4, viewportSize } from "three/tsl";
+import { t as createGaussianBlurCompute } from "./computeBlur-B0KA4n89.js";
+import { Fn, convertToTexture, dot, float, max, screenUV, texture, vec2, vec3, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Glow",
 	category: "Stylize",
@@ -44,8 +45,37 @@ const componentDefinition = {
 			}
 		}
 	},
-	fragmentNode: ({ uniforms, childNode, onCleanup }) => {
+	computeNode: ({ childNode, onCleanup, dimensions, renderer, uniforms }) => {
+		if (!childNode) return null;
+		const childTexture = convertToTexture(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const dpr = renderer?.getPixelRatio?.() ?? 1;
+		const { computeNodes, outputTexture, updateRadius } = createGaussianBlurCompute(childTexture, Math.round(dimensions.width * dpr), Math.round(dimensions.height * dpr), onCleanup);
+		return {
+			outputs: {
+				childTexture,
+				blurredTexture: outputTexture
+			},
+			getComputeNodes: () => {
+				const size = uniforms.size.uniform.value;
+				updateRadius(size);
+				return computeNodes;
+			}
+		};
+	},
+	fragmentNode: ({ uniforms, childNode, onCleanup, computeOutputs }) => {
 		if (!childNode) return vec4(0, 0, 0, 0);
+		if (computeOutputs?.blurredTexture) {
+			const originalColor$1 = computeOutputs.childTexture.sample(screenUV);
+			const blurredColor = texture(computeOutputs.blurredTexture).sample(screenUV);
+			const luminance = dot(originalColor$1.rgb, vec3(.299, .587, .114));
+			const brightnessMask = max(float(0), luminance.sub(uniforms.threshold.uniform));
+			const intensity$1 = uniforms.intensity.uniform;
+			const glow = blurredColor.mul(brightnessMask).mul(intensity$1);
+			return unpremultiplyAlpha(vec4(originalColor$1.rgb.add(glow.rgb), max(originalColor$1.a, glow.a)));
+		}
 		const childTexture = convertToTexture(childNode);
 		onCleanup(() => {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();