shaders 2.5.108 → 2.5.110

package/dist/core/{ImageTexture-CrX_9-f0.js → ImageTexture-uxj4LpF7.js}

@@ -1,5 +1,5 @@
 import { SRGBColorSpace, Texture, TextureLoader } from "three/webgpu";
-import { float, max, min, or, screenUV, select, step, texture, uniform, vec2, vec4, viewportSize } from "three/tsl";
+import { float, max, min, or, screenUV, select, texture, uniform, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "ImageTexture",
 	category: "Textures",
@@ -26,6 +26,7 @@ const componentDefinition = {
 					"none": 4
 				}[value] ?? 0;
 			},
+			compileTime: true,
 			ui: {
 				type: "select",
 				options: [
@@ -167,22 +168,34 @@ const componentDefinition = {
 		});
 		const uv$1 = baseUV;
 		const viewportAspect = viewportSize.x.div(viewportSize.y);
-		const objectFitMode = uniforms.objectFit.uniform;
-		const coverScale = max(viewportAspect.div(imageAspectUniform), float(1));
-		const coverUVScale = vec2(imageAspectUniform.div(viewportAspect).mul(coverScale), coverScale);
-		const containScale = min(viewportAspect.div(imageAspectUniform), float(1));
-		const containUVScale = vec2(imageAspectUniform.div(viewportAspect).mul(containScale), containScale);
-		const fillUVScale = vec2(1, 1);
-		const scaleDownScale = min(min(viewportAspect.div(imageAspectUniform), float(1)), min(viewportSize.x.div(imageWidthUniform), viewportSize.y.div(imageHeightUniform)));
-		const scaleDownUVScale = vec2(imageAspectUniform.div(viewportAspect).mul(scaleDownScale), scaleDownScale);
-		const noneScale = min(viewportSize.x.div(imageWidthUniform), viewportSize.y.div(imageHeightUniform));
-		const noneUVScale = vec2(imageAspectUniform.div(viewportAspect).mul(noneScale), noneScale);
-		const isCover = step(objectFitMode, float(.5));
-		const isContain = step(float(.5), objectFitMode).mul(step(objectFitMode, float(1.5)));
-		const isFill = step(float(1.5), objectFitMode).mul(step(objectFitMode, float(2.5)));
-		const isScaleDown = step(float(2.5), objectFitMode).mul(step(objectFitMode, float(3.5)));
-		const isNone = step(float(3.5), objectFitMode);
-		const uvScale = vec2(0).add(coverUVScale.mul(isCover)).add(containUVScale.mul(isContain)).add(fillUVScale.mul(isFill)).add(scaleDownUVScale.mul(isScaleDown)).add(noneUVScale.mul(isNone));
+		const objectFitMode = uniforms.objectFit.uniform.value;
+		let uvScale;
+		switch (objectFitMode) {
+			case 1: {
+				const containScale = min(viewportAspect.div(imageAspectUniform), float(1));
+				uvScale = vec2(imageAspectUniform.div(viewportAspect).mul(containScale), containScale);
+				break;
+			}
+			case 2:
+				uvScale = vec2(1, 1);
+				break;
+			case 3: {
+				const scaleDownScale = min(min(viewportAspect.div(imageAspectUniform), float(1)), min(viewportSize.x.div(imageWidthUniform), viewportSize.y.div(imageHeightUniform)));
+				uvScale = vec2(imageAspectUniform.div(viewportAspect).mul(scaleDownScale), scaleDownScale);
+				break;
+			}
+			case 4: {
+				const noneScale = min(viewportSize.x.div(imageWidthUniform), viewportSize.y.div(imageHeightUniform));
+				uvScale = vec2(imageAspectUniform.div(viewportAspect).mul(noneScale), noneScale);
+				break;
+			}
+			case 0:
+			default: {
+				const coverScale = max(viewportAspect.div(imageAspectUniform), float(1));
+				uvScale = vec2(imageAspectUniform.div(viewportAspect).mul(coverScale), coverScale);
+				break;
+			}
+		}
 		const adjustedUV = uv$1.sub(vec2(.5)).div(uvScale).add(vec2(.5));
 		const finalUV = vec2(adjustedUV.x, float(1).sub(adjustedUV.y));
 		const sampledColor = textureNode.sample(finalUV);

package/dist/core/{Liquify-D9YIfbfB.js → Liquify-p-_qcb1f.js}

@@ -91,7 +91,7 @@ const componentDefinition = {
 			}
 		}
 	},
-	computeNode: ({ uniforms, onCleanup, dimensions }) => {
+	computeNode: ({ uniforms, onCleanup }) => {
 		const bufferA = attributeArray(GRID_SIZE * GRID_SIZE, "vec4");
 		const bufferB = attributeArray(GRID_SIZE * GRID_SIZE, "vec4");
 		const dispTex = new StorageTexture(GRID_SIZE, GRID_SIZE);
@@ -179,7 +179,7 @@ const componentDefinition = {
 				const dt = Math.min((currentTime - lastTime) / 1e3, .016);
 				lastTime = currentTime;
 				if (dt <= 0) return null;
-				const aspect = dimensions.width / Math.max(dimensions.height, 1);
+				const aspect = Math.max(1, params.dimensions.width) / Math.max(1, params.dimensions.height);
 				const stiffness = uniforms.stiffness.uniform.value;
 				const damping = uniforms.damping.uniform.value;
 				const radius = uniforms.radius.uniform.value * .08;
@@ -213,7 +213,7 @@ const componentDefinition = {
 			}
 		};
 	},
-	fragmentNode: ({ uniforms, onBeforeRender, childNode, onCleanup, dimensions, computeOutputs }) => {
+	fragmentNode: ({ uniforms, onBeforeRender, childNode, onCleanup, computeOutputs }) => {
 		if (!childNode) return vec4(0, 0, 0, 0);
 		const childTexture = computeOutputs?.childTexture ?? convertToTexture(childNode);
 		if (!computeOutputs) onCleanup(() => {
@@ -242,12 +242,12 @@ const componentDefinition = {
 			let prevY = .5;
 			let lastTime = Date.now();
 			const SUBSTEPS = 2;
-			onBeforeRender(({ pointer }) => {
+			onBeforeRender(({ pointer, dimensions }) => {
 				const currentTime = Date.now();
 				const dt = Math.min((currentTime - lastTime) / 1e3, .016);
 				lastTime = currentTime;
 				if (dt <= 0) return;
-				const aspect = dimensions.width / Math.max(dimensions.height, 1);
+				const aspect = Math.max(1, dimensions.width) / Math.max(1, dimensions.height);
 				const stiffness = uniforms.stiffness.uniform.value;
 				const damping = uniforms.damping.uniform.value;
 				const radius = uniforms.radius.uniform.value * .08;

package/dist/core/{ProgressiveBlur-B_z0pZ1V.js → ProgressiveBlur-NbvxFfRa.js}

@@ -1,6 +1,6 @@
 import { l as transformPosition, r as transformAngle } from "./transformations-B5lM6fYX.js";
 import { t as unpremultiplyAlpha } from "./alpha-C4ptedXe.js";
-import { n as createVariableGaussianBlurCompute } from "./computeBlur-DeXZ99YL.js";
+import { i as createVariableGaussianBlurCompute } from "./computeBlur-DCRhuYEi.js";
 import { Fn, If, clamp, convertToTexture, cos, dot, float, instanceIndex, int, max, mix, pow, radians, screenUV, sin, smoothstep, texture, textureLoad, textureStore, uint, uniform, uvec2, vec2, vec3, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "ProgressiveBlur",
@@ -60,7 +60,7 @@ const componentDefinition = {
 			}
 		}
 	},
-	computeNode: ({ childNode, onCleanup, dimensions, renderer, uniforms }) => {
+	computeNode: ({ childNode, onCleanup, dimensions, renderer, uniforms, onResize }) => {
 		if (!childNode) return null;
 		if (uniforms.angle.mapComputeInfo || uniforms.falloff.mapComputeInfo) return null;
 		const childTexture = convertToTexture(childNode);
@@ -70,14 +70,17 @@ const componentDefinition = {
 		const dpr = renderer?.getPixelRatio?.() ?? 1;
 		const texWidth = Math.round(dimensions.width * dpr);
 		const texHeight = Math.round(dimensions.height * dpr);
-		const { computeNodes: blurNodes, outputTexture, blurMapWriteNode } = createVariableGaussianBlurCompute(childTexture, texWidth, texHeight, onCleanup);
+		const blur = createVariableGaussianBlurCompute(childTexture, texWidth, texHeight, onCleanup);
+		const { computeNodes: blurNodes, outputTexture, blurMapWriteNode, computeWidth, computeHeight } = blur;
 		const angleU = uniform(0);
 		const centerXU = uniform(0);
 		const centerYU = uniform(.5);
 		const falloffU = uniform(1);
 		const aspectU = uniform(1);
-		const w = uint(texWidth);
-		const h = uint(texHeight);
+		const inputWidthU = uniform(texWidth);
+		const inputHeightU = uniform(texHeight);
+		const cw = uint(computeWidth);
+		const ch = uint(computeHeight);
 		function readScalar(entry) {
 			return entry.getCpuValue?.() ?? (typeof entry.uniform.value === "number" ? entry.uniform.value : null);
 		}
@@ -97,18 +100,18 @@ const componentDefinition = {
 			const { sourceTexture, channel, inputMin, inputMax, outputMin, outputMax, curve } = intensityMapInfo;
 			const fillBlurMap$1 = Fn(() => {
 				const idx = instanceIndex;
-				const x = idx.mod(w);
-				const y = idx.div(w);
-				If(y.lessThan(h), () => {
-					const u = x.toFloat().add(float(.5)).div(float(texWidth));
-					const v = y.toFloat().add(float(.5)).div(float(texHeight));
+				const cx = idx.mod(cw);
+				const cy = idx.div(cw);
+				If(cy.lessThan(ch), () => {
+					const u = cx.toFloat().add(float(.5)).div(float(computeWidth));
+					const v = cy.toFloat().add(float(.5)).div(float(computeHeight));
 					const angleRad = angleU.mul(float(Math.PI / 180));
 					const direction = vec2(angleRad.cos().div(aspectU), angleRad.sin());
 					const centerPos = vec2(centerXU, float(1).sub(centerYU));
 					const centeredUV = vec2(u, v).sub(centerPos);
 					const directionalDist = max(float(0), centeredUV.dot(direction));
 					const blurAmount = smoothstep(float(0), falloffU, directionalDist);
-					const mapSample = textureLoad(sourceTexture, uvec2(x, y), int(0));
+					const mapSample = textureLoad(sourceTexture, uvec2(u.mul(inputWidthU).round().toInt().clamp(int(0), int(inputWidthU.sub(1))).toUint(), v.mul(inputHeightU).round().toInt().clamp(int(0), int(inputHeightU.sub(1))).toUint()), int(0));
 					let raw;
 					if (channel === "alpha") raw = mapSample.a;
 					else if (channel === "alphaInverted") raw = mapSample.a.oneMinus();
@@ -117,9 +120,16 @@ const componentDefinition = {
 					const inputRange = inputMax.sub(inputMin).max(float(1e-4));
 					const maxRadius = mix(outputMin, outputMax, pow(clamp(raw.sub(inputMin).div(inputRange), float(0), float(1)), pow(float(2), curve.negate().mul(float(2))))).mul(float(.36));
 					const radius = blurAmount.mul(maxRadius);
-					textureStore(blurMapWriteNode, uvec2(x, y), vec4(radius, float(0), float(0), float(1))).toWriteOnly();
+					textureStore(blurMapWriteNode, uvec2(cx, cy), vec4(radius, float(0), float(0), float(1))).toWriteOnly();
 				});
-			})().compute(texWidth * texHeight, [256]);
+			})().compute(computeWidth * computeHeight, [256]);
+			onResize(({ width, height }) => {
+				const newW = Math.round(width * dpr);
+				const newH = Math.round(height * dpr);
+				inputWidthU.value = newW;
+				inputHeightU.value = newH;
+				blur.setInputDimensions(newW, newH);
+			});
 			return {
 				outputs: {
 					childTexture,
@@ -134,20 +144,23 @@ const componentDefinition = {
 		const maxRadiusU = uniform(18);
 		const fillBlurMap = Fn(() => {
 			const idx = instanceIndex;
-			const x = idx.mod(w);
-			const y = idx.div(w);
-			If(y.lessThan(h), () => {
-				const u = x.toFloat().add(float(.5)).div(float(texWidth));
-				const v = y.toFloat().add(float(.5)).div(float(texHeight));
+			const cx = idx.mod(cw);
+			const cy = idx.div(cw);
+			If(cy.lessThan(ch), () => {
+				const u = cx.toFloat().add(float(.5)).div(float(computeWidth));
+				const v = cy.toFloat().add(float(.5)).div(float(computeHeight));
 				const angleRad = angleU.mul(float(Math.PI / 180));
 				const direction = vec2(angleRad.cos().div(aspectU), angleRad.sin());
 				const centerPos = vec2(centerXU, float(1).sub(centerYU));
 				const centeredUV = vec2(u, v).sub(centerPos);
 				const directionalDist = max(float(0), centeredUV.dot(direction));
 				const radius = smoothstep(float(0), falloffU, directionalDist).mul(maxRadiusU);
-				textureStore(blurMapWriteNode, uvec2(x, y), vec4(radius, float(0), float(0), float(1))).toWriteOnly();
+				textureStore(blurMapWriteNode, uvec2(cx, cy), vec4(radius, float(0), float(0), float(1))).toWriteOnly();
 			});
-		})().compute(texWidth * texHeight, [256]);
+		})().compute(computeWidth * computeHeight, [256]);
+		onResize(({ width, height }) => {
+			blur.setInputDimensions(Math.round(width * dpr), Math.round(height * dpr));
+		});
 		return {
 			outputs: {
 				childTexture,

package/dist/core/{Saturation-CB19kOXg.js → Saturation-DCFAIUvZ.js}

@@ -7,6 +7,7 @@ const componentDefinition = {
 	props: { intensity: {
 		default: 1,
 		description: "The intensity of the saturation effect (1 being no change)",
+		compileTimeWhen: (prev, next) => prev === 1 !== (next === 1),
 		ui: {
 			type: ["range", "map"],
 			min: 0,
@@ -21,6 +22,7 @@ const componentDefinition = {
 			console.error("You must pass a child component into the Saturation shader.");
 			return vec4(0);
 		}
+		if (uniforms.intensity.uniform.value === 1) return childNode;
 		const luminance = dot(childNode.rgb, vec3(.2126, .7152, .0722));
 		return vec4(mix(vec3(luminance, luminance, luminance), childNode.rgb, uniforms.intensity.uniform), childNode.a);
 	}

package/dist/core/{Sharpness-CQOboeqy.js → Sharpness-DSpEoCSL.js}

@@ -9,6 +9,7 @@ const componentDefinition = {
 	props: { sharpness: {
 		default: 0,
 		description: "How sharp to make the underlying image",
+		compileTimeWhen: (prev, next) => prev === 0 !== (next === 0),
 		ui: {
 			type: ["range", "map"],
 			min: 0,
@@ -20,6 +21,7 @@ const componentDefinition = {
 	} },
 	fragmentNode: ({ uniforms, childNode, onCleanup }) => {
 		if (!childNode) return vec4(0, 0, 0, 0);
+		if (uniforms.sharpness.uniform.value === 0) return childNode;
 		const childTexture = convertToTexture(childNode);
 		onCleanup(() => {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();

package/dist/core/{Shatter-SHNbU2KC.js → Shatter-ByKkCYTR.js}

@@ -2,7 +2,7 @@ import { t as applyEdgeHandling } from "./edges-CfGcQniB.js";
 import { c as transformEdges } from "./transformations-B5lM6fYX.js";
 import { t as unpremultiplyAlpha } from "./alpha-C4ptedXe.js";
 import { StorageTexture } from "three/webgpu";
-import { DataTexture, FloatType, LinearFilter as LinearFilter$1, NearestFilter, RGBAFormat } from "three";
+import { DataTexture, FloatType, NearestFilter, RGBAFormat } from "three";
 import { Fn, If, convertToTexture, float, instanceIndex, int, screenUV, smoothstep, storageTexture, texture, textureStore, uint, uniformArray, uvec2, vec2, vec4 } from "three/tsl";
 var seededRandom = (seed) => {
 	const x = Math.sin(seed) * 1e4;
@@ -220,13 +220,25 @@ const componentDefinition = {
 	fragmentNode: ({ uniforms, onBeforeRender, childNode, onCleanup, dimensions, computeOutputs }) => {
 		const FRICTION = 1;
 		const cellData = new Float32Array(SHARD_COUNT * 4);
-		const cellTexture = new DataTexture(cellData, 4, 4, RGBAFormat, FloatType);
-		cellTexture.magFilter = LinearFilter$1;
-		cellTexture.minFilter = LinearFilter$1;
+		const cellPosArray = new Array(SHARD_COUNT * 2).fill(0);
+		const cellPosUniform = uniformArray(cellPosArray, "float");
 		const displacementData = new Float32Array(SHARD_COUNT * 4);
-		const displacementTexture = new DataTexture(displacementData, 4, 4, RGBAFormat, FloatType);
-		displacementTexture.magFilter = LinearFilter$1;
-		displacementTexture.minFilter = LinearFilter$1;
+		const dispArray = new Array(SHARD_COUNT * 2).fill(0);
+		const dispUniform = uniformArray(dispArray, "float");
+		const syncCellPosUniform = () => {
+			for (let i = 0; i < SHARD_COUNT; i++) {
+				cellPosArray[i * 2] = cellData[i * 4];
+				cellPosArray[i * 2 + 1] = cellData[i * 4 + 1];
+			}
+			cellPosUniform.array = cellPosArray;
+		};
+		const syncDispUniform = () => {
+			for (let i = 0; i < SHARD_COUNT; i++) {
+				dispArray[i * 2] = displacementData[i * 4];
+				dispArray[i * 2 + 1] = displacementData[i * 4 + 1];
+			}
+			dispUniform.array = dispArray;
+		};
 		let voronoiField;
 		if (computeOutputs?.voronoiTexture) voronoiField = texture(computeOutputs.voronoiTexture);
 		else {
@@ -268,7 +280,7 @@ const componentDefinition = {
 					cellData[i * 4 + 2] = seededRandom(seed + i * 3);
 					cellData[i * 4 + 3] = seededRandom(seed + i * 3 + 1);
 				}
-				cellTexture.needsUpdate = true;
+				syncCellPosUniform();
 			};
 			generateCells(currentSeed);
 			generateVoronoi();
@@ -292,12 +304,12 @@ const componentDefinition = {
 				cellData[i * 4 + 2] = seededRandom(seed + i * 3);
 				cellData[i * 4 + 3] = seededRandom(seed + i * 3 + 1);
 			}
-			cellTexture.needsUpdate = true;
+			syncCellPosUniform();
 		};
 		let currentSeedForDisp = uniforms.seed.uniform.value;
 		generateCellsFull(currentSeedForDisp);
 		displacementData.fill(0);
-		displacementTexture.needsUpdate = true;
+		syncDispUniform();
 		let prevX = .5, prevY = .5, lastTime = Date.now();
 		onBeforeRender(({ pointer }) => {
 			const currentTime = Date.now();
@@ -354,31 +366,23 @@ const componentDefinition = {
 				displacementData[i * 4 + 2] = 0;
 				displacementData[i * 4 + 3] = 0;
 			}
-			displacementTexture.needsUpdate = true;
+			syncDispUniform();
 			prevX = pointer.x;
 			prevY = pointer.y;
 		});
-		onCleanup(() => {
-			cellTexture.dispose();
-			displacementTexture.dispose();
-		});
 		if (!childNode) return vec4(0, 0, 0, 0);
 		const childTexture = convertToTexture(childNode);
 		onCleanup(() => {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
 		});
-		const cellField = texture(cellTexture);
-		const dispField = texture(displacementTexture);
 		const voronoiSample = voronoiField.sample(screenUV);
-		const nearestIdx = voronoiSample.r;
-		const secondIdx = voronoiSample.g;
-		const nearestUV = vec2(nearestIdx.mod(float(4)).add(.5).div(4), nearestIdx.div(float(4)).floor().add(.5).div(4));
-		const secondUV = vec2(secondIdx.mod(float(4)).add(.5).div(4), secondIdx.div(float(4)).floor().add(.5).div(4));
-		const nearestCellPos = cellField.sample(nearestUV).xy;
-		const secondCellPos = cellField.sample(secondUV).xy;
+		const nearestI = voronoiSample.r.toInt();
+		const secondI = voronoiSample.g.toInt();
+		const nearestCellPos = vec2(cellPosUniform.element(nearestI.mul(2)), cellPosUniform.element(nearestI.mul(2).add(1)));
+		const secondCellPos = vec2(cellPosUniform.element(secondI.mul(2)), cellPosUniform.element(secondI.mul(2).add(1)));
 		const minDist1 = screenUV.sub(nearestCellPos).length();
 		const minDist2 = screenUV.sub(secondCellPos).length();
-		const displacement = dispField.sample(nearestUV).xy;
+		const displacement = vec2(dispUniform.element(nearestI.mul(2)), dispUniform.element(nearestI.mul(2).add(1)));
 		const displacementMag = displacement.length();
 		const edgeDiff = minDist2.sub(minDist1);
 		const crackThreshold = uniforms.crackWidth.uniform.mul(.005);

package/dist/core/{SimplexNoise-BcSgytjc.js → SimplexNoise-CMuU8n27.js}

@@ -1,4 +1,4 @@
-import { a as transformColor } from "./transformations-B5lM6fYX.js";
+import { a as transformColor, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
 import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
 import { t as createAnimatedTime } from "./time-DUqSFWvT.js";
 import { clamp, exp, mx_noise_float, screenUV, vec2, vec3, viewportSize } from "three/tsl";
@@ -27,6 +27,18 @@ const componentDefinition = {
 				group: "Colors"
 			}
 		},
+		colorSpace: {
+			default: "linear",
+			transform: transformColorSpace,
+			compileTime: true,
+			description: "Color space for color interpolation",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Space",
+				group: "Colors"
+			}
+		},
 		scale: {
 			default: 2,
 			description: "Pattern scale (higher = larger patterns)",
@@ -98,7 +110,7 @@ const componentDefinition = {
 		const noise = mx_noise_float(vec3(pos.x, pos.y, animTime.mul(.5)));
 		const contrastMultiplier = uniforms.contrast.uniform.add(1);
 		const k = clamp(noise.mul(contrastMultiplier).add(uniforms.balance.uniform).mul(.5).add(.5), 0, 1);
-		return mixColors(uniforms.colorB.uniform, uniforms.colorA.uniform, k, 0);
+		return mixColors(uniforms.colorB.uniform, uniforms.colorA.uniform, k, uniforms.colorSpace.uniform.value);
 	}
 };
 var SimplexNoise_default = componentDefinition;

package/dist/core/Swirl-B_KxdaX2.js

@@ -0,0 +1,105 @@
+import { a as transformColor, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B5lM6fYX.js";
+import { t as mixColors } from "./colorMixing-BPpDnR5I.js";
+import { t as createAnimatedTime } from "./time-DUqSFWvT.js";
+import { Fn, cos, screenUV, sin, smoothstep, vec2, vec4 } from "three/tsl";
+const componentDefinition = {
+	name: "Swirl",
+	category: "Textures",
+	description: "Flowing swirl pattern with multi-layered noise",
+	props: {
+		colorA: {
+			default: "#1275d8",
+			description: "Primary gradient color",
+			transform: transformColor,
+			ui: {
+				type: "color",
+				label: "Color A",
+				group: "Colors"
+			}
+		},
+		colorB: {
+			default: "#e19136",
+			description: "Secondary gradient color",
+			transform: transformColor,
+			ui: {
+				type: "color",
+				label: "Color B",
+				group: "Colors"
+			}
+		},
+		speed: {
+			default: 1,
+			description: "Flow animation speed",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 5,
+				step: .1,
+				label: "Speed",
+				group: "Animation"
+			}
+		},
+		detail: {
+			default: 1,
+			description: "Level of detail and intricacy in the swirl patterns",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 5,
+				step: .1,
+				label: "Detail",
+				group: "Effect"
+			}
+		},
+		blend: {
+			default: 50,
+			description: "Skew color balance toward A (lower values) or B (higher values)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Blend",
+				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: (params) => {
+		const { uniforms } = params;
+		const t = createAnimatedTime(params, uniforms.speed);
+		const detail = uniforms.detail.uniform;
+		const csMode = uniforms.colorSpace.uniform.value;
+		return Fn(() => {
+			const freq1 = detail;
+			const d1 = vec2(screenUV.x.add(sin(screenUV.y.mul(freq1.mul(1.7)).add(t.mul(.8))).mul(.12).add(cos(screenUV.x.mul(freq1.mul(.9)).sub(t.mul(.5))).mul(.05))), screenUV.y.add(cos(screenUV.x.mul(freq1.mul(1.3)).sub(t.mul(.6))).mul(.12).add(sin(screenUV.y.mul(freq1.mul(1.1)).add(t.mul(.7))).mul(.05)))).toVar();
+			const pattern1 = sin(d1.x.mul(freq1.mul(2.1)).add(d1.y.mul(freq1.mul(1.8))).add(t.mul(.4)));
+			const freq2 = detail.mul(2.1);
+			const d2 = vec2(d1.x.add(cos(d1.y.mul(freq2.mul(2.7)).sub(t.mul(.45))).mul(.07).add(sin(d1.x.mul(freq2.mul(1.9)).add(t.mul(.6))).mul(.04))), d1.y.add(sin(d1.x.mul(freq2.mul(2.3)).add(t.mul(.65))).mul(.07).add(cos(d1.y.mul(freq2.mul(1.6)).sub(t.mul(.4))).mul(.04)))).toVar();
+			const pattern2 = cos(d2.x.mul(freq2.mul(1.4)).sub(d2.y.mul(freq2.mul(1.9))).add(t.mul(.35)));
+			const freq3 = detail.mul(3.7);
+			const d3 = vec2(d2.x.add(sin(d2.y.mul(freq3.mul(1.8)).add(t.mul(.85))).mul(.04).add(cos(d2.x.mul(freq3.mul(1.3)).sub(t.mul(.55))).mul(.025)).add(sin(d2.x.add(d2.y).mul(freq3.mul(.7)).add(t.mul(.9))).mul(.02))), d2.y.add(cos(d2.x.mul(freq3.mul(1.6)).sub(t.mul(.75))).mul(.04).add(sin(d2.y.mul(freq3.mul(1.1)).add(t.mul(.5))).mul(.025)).add(cos(d2.x.add(d2.y).mul(freq3.mul(.8)).sub(t.mul(.95))).mul(.02)))).toVar();
+			const pattern3 = sin(d3.x.mul(freq3.mul(1.1)).add(d3.y.mul(freq3.mul(1.5))).sub(t.mul(.55)));
+			const combinedPattern = pattern1.mul(.45).add(pattern2.mul(.35)).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, csMode);
+			const shimmer = sin(t.mul(2.5).add(combinedPattern.mul(8))).mul(.015).add(1);
+			const finalColor = colorMix.mul(shimmer);
+			return vec4(finalColor.rgb, finalColor.a);
+		})();
+	}
+};
+var Swirl_default = componentDefinition;
+export { componentDefinition as n, Swirl_default as t };

package/dist/core/{TiltShift-GqDjHvmk.js → TiltShift-BSAyR0Me.js}

@@ -1,6 +1,6 @@
 import { l as transformPosition, r as transformAngle } from "./transformations-B5lM6fYX.js";
 import { t as unpremultiplyAlpha } from "./alpha-C4ptedXe.js";
-import { n as createVariableGaussianBlurCompute } from "./computeBlur-DeXZ99YL.js";
+import { i as createVariableGaussianBlurCompute } from "./computeBlur-DCRhuYEi.js";
 import { Fn, If, abs, clamp, convertToTexture, cos, dot, float, instanceIndex, int, mix, pow, radians, screenUV, sin, smoothstep, texture, textureLoad, textureStore, uint, uniform, uvec2, vec2, vec3, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "TiltShift",
@@ -72,7 +72,7 @@ const componentDefinition = {
 			}
 		}
 	},
-	computeNode: ({ childNode, onCleanup, dimensions, renderer, uniforms }) => {
+	computeNode: ({ childNode, onCleanup, dimensions, renderer, uniforms, onResize }) => {
 		if (!childNode) return null;
 		if (uniforms.angle.mapComputeInfo || uniforms.width.mapComputeInfo || uniforms.falloff.mapComputeInfo) return null;
 		const childTexture = convertToTexture(childNode);
@@ -82,15 +82,18 @@ const componentDefinition = {
 		const dpr = renderer?.getPixelRatio?.() ?? 1;
 		const texWidth = Math.round(dimensions.width * dpr);
 		const texHeight = Math.round(dimensions.height * dpr);
-		const { computeNodes: blurNodes, outputTexture, blurMapWriteNode } = createVariableGaussianBlurCompute(childTexture, texWidth, texHeight, onCleanup);
+		const blur = createVariableGaussianBlurCompute(childTexture, texWidth, texHeight, onCleanup, 14);
+		const { computeNodes: blurNodes, outputTexture, blurMapWriteNode, computeWidth, computeHeight } = blur;
 		const angleU = uniform(0);
 		const centerXU = uniform(.5);
 		const centerYU = uniform(.5);
 		const focusWidthU = uniform(.15);
 		const falloffU = uniform(.3);
 		const aspectU = uniform(1);
-		const w = uint(texWidth);
-		const h = uint(texHeight);
+		const inputWidthU = uniform(texWidth);
+		const inputHeightU = uniform(texHeight);
+		const cw = uint(computeWidth);
+		const ch = uint(computeHeight);
 		function readScalar(entry) {
 			return entry.getCpuValue?.() ?? (typeof entry.uniform.value === "number" ? entry.uniform.value : null);
 		}
@@ -112,18 +115,18 @@ const componentDefinition = {
 			const { sourceTexture, channel, inputMin, inputMax, outputMin, outputMax, curve } = intensityMapInfo;
 			const fillBlurMap$1 = Fn(() => {
 				const idx = instanceIndex;
-				const x = idx.mod(w);
-				const y = idx.div(w);
-				If(y.lessThan(h), () => {
-					const u = x.toFloat().add(float(.5)).div(float(texWidth));
-					const v = y.toFloat().add(float(.5)).div(float(texHeight));
+				const cx = idx.mod(cw);
+				const cy = idx.div(cw);
+				If(cy.lessThan(ch), () => {
+					const u = cx.toFloat().add(float(.5)).div(float(computeWidth));
+					const v = cy.toFloat().add(float(.5)).div(float(computeHeight));
 					const angleRad = angleU.mul(float(Math.PI / 180));
 					const perpVector = vec2(angleRad.sin().negate(), angleRad.cos());
 					const centerPos = vec2(centerXU, float(1).sub(centerYU));
 					const centeredUV = vec2(u, v).sub(centerPos);
 					const distFromLine = abs(dot(vec2(centeredUV.x.mul(aspectU), centeredUV.y), perpVector));
 					const blurAmount = smoothstep(focusWidthU, focusWidthU.add(falloffU), distFromLine);
-					const mapSample = textureLoad(sourceTexture, uvec2(x, y), int(0));
+					const mapSample = textureLoad(sourceTexture, uvec2(u.mul(inputWidthU).round().toInt().clamp(int(0), int(inputWidthU.sub(1))).toUint(), v.mul(inputHeightU).round().toInt().clamp(int(0), int(inputHeightU.sub(1))).toUint()), int(0));
 					let raw;
 					if (channel === "alpha") raw = mapSample.a;
 					else if (channel === "alphaInverted") raw = mapSample.a.oneMinus();
@@ -132,9 +135,16 @@ const componentDefinition = {
 					const inputRange = inputMax.sub(inputMin).max(float(1e-4));
 					const maxRadius = mix(outputMin, outputMax, pow(clamp(raw.sub(inputMin).div(inputRange), float(0), float(1)), pow(float(2), curve.negate().mul(float(2))))).mul(float(.36));
 					const radius = blurAmount.mul(maxRadius);
-					textureStore(blurMapWriteNode, uvec2(x, y), vec4(radius, float(0), float(0), float(1))).toWriteOnly();
+					textureStore(blurMapWriteNode, uvec2(cx, cy), vec4(radius, float(0), float(0), float(1))).toWriteOnly();
 				});
-			})().compute(texWidth * texHeight, [256]);
+			})().compute(computeWidth * computeHeight, [256]);
+			onResize(({ width, height }) => {
+				const newW = Math.round(width * dpr);
+				const newH = Math.round(height * dpr);
+				inputWidthU.value = newW;
+				inputHeightU.value = newH;
+				blur.setInputDimensions(newW, newH);
+			});
 			return {
 				outputs: {
 					childTexture,
@@ -149,20 +159,27 @@ const componentDefinition = {
 		const maxRadiusU = uniform(18);
 		const fillBlurMap = Fn(() => {
 			const idx = instanceIndex;
-			const x = idx.mod(w);
-			const y = idx.div(w);
-			If(y.lessThan(h), () => {
-				const u = x.toFloat().add(float(.5)).div(float(texWidth));
-				const v = y.toFloat().add(float(.5)).div(float(texHeight));
+			const cx = idx.mod(cw);
+			const cy = idx.div(cw);
+			If(cy.lessThan(ch), () => {
+				const u = cx.toFloat().add(float(.5)).div(float(computeWidth));
+				const v = cy.toFloat().add(float(.5)).div(float(computeHeight));
 				const angleRad = angleU.mul(float(Math.PI / 180));
 				const perpVector = vec2(angleRad.sin().negate(), angleRad.cos());
 				const centerPos = vec2(centerXU, float(1).sub(centerYU));
 				const centeredUV = vec2(u, v).sub(centerPos);
 				const distFromLine = abs(dot(vec2(centeredUV.x.mul(aspectU), centeredUV.y), perpVector));
 				const radius = smoothstep(focusWidthU, focusWidthU.add(falloffU), distFromLine).mul(maxRadiusU);
-				textureStore(blurMapWriteNode, uvec2(x, y), vec4(radius, float(0), float(0), float(1))).toWriteOnly();
+				textureStore(blurMapWriteNode, uvec2(cx, cy), vec4(radius, float(0), float(0), float(1))).toWriteOnly();
 			});
-		})().compute(texWidth * texHeight, [256]);
+		})().compute(computeWidth * computeHeight, [256]);
+		onResize(({ width, height }) => {
+			const newW = Math.round(width * dpr);
+			const newH = Math.round(height * dpr);
+			inputWidthU.value = newW;
+			inputHeightU.value = newH;
+			blur.setInputDimensions(newW, newH);
+		});
 		return {
 			outputs: {
 				childTexture,
@@ -181,8 +198,17 @@ const componentDefinition = {
 		if (computeOutputs?.blurredTexture) {
 			const sharp = computeOutputs.childTexture.sample(screenUV);
 			const blurred = texture(computeOutputs.blurredTexture).sample(screenUV);
+			const aspect$1 = viewportSize.x.div(viewportSize.y);
+			const angleRad$1 = radians(uniforms.angle.uniform);
+			const perpVector$1 = vec2(angleRad$1.sin().negate(), angleRad$1.cos());
+			const centerPosition$1 = vec2(uniforms.center.uniform[0], uniforms.center.uniform[1].oneMinus());
+			const centeredUV$1 = screenUV.sub(centerPosition$1);
+			const distFromLine$1 = abs(dot(vec2(centeredUV$1.x.mul(aspect$1), centeredUV$1.y), perpVector$1));
+			const focusWidth$1 = uniforms.width.uniform.mul(.5);
+			const blurAmount$1 = smoothstep(focusWidth$1, focusWidth$1.add(uniforms.falloff.uniform), distFromLine$1);
 			const propsPin = uniforms.intensity.uniform.mul(float(0)).add(uniforms.width.uniform.mul(float(0))).add(uniforms.falloff.uniform.mul(float(0))).add(uniforms.angle.uniform.mul(float(0)));
-			return unpremultiplyAlpha(vec4(blurred.rgb.add(propsPin), sharp.a));
+			const mixed = mix(sharp, blurred, blurAmount$1);
+			return unpremultiplyAlpha(vec4(mixed.rgb.add(propsPin), mixed.a));
 		}
 		const childTexture = convertToTexture(childNode);
 		onCleanup(() => {