shaders 2.5.109 → 2.5.111

package/dist/core/FlutedGlass-B4FlyBOn.js

@@ -0,0 +1,320 @@
+import { n as applyEdgeToUV } from "./edges-CX_lJB9R.js";
+import { a as transformColor, c as transformEdges } from "./transformations-B5lM6fYX.js";
+import { t as unpremultiplyAlpha } from "./alpha-C4ptedXe.js";
+import { t as createAnimatedTime } from "./time-DUqSFWvT.js";
+import { PI, abs, convertToTexture, cos, exp2, float, fract, mix, pow, screenUV, sign, sin, sqrt, step, uniform, vec2, vec3, vec4, viewportSize } from "three/tsl";
+const componentDefinition = {
+	name: "FlutedGlass",
+	category: "Distortions",
+	description: "Full-screen fluted glass effect — refracts content through repeating cylindrical bars",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		shape: {
+			default: "bars",
+			description: "Cross-section shape of each flute",
+			compileTime: true,
+			transform: (value) => {
+				return {
+					"bars": 0,
+					"rounded": 1,
+					"waves": 2
+				}[value] ?? 0;
+			},
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Bars",
+						value: "bars"
+					},
+					{
+						label: "Rounded",
+						value: "rounded"
+					},
+					{
+						label: "Waves",
+						value: "waves"
+					}
+				],
+				label: "Shape",
+				group: "Effect"
+			}
+		},
+		angle: {
+			default: 0,
+			description: "Direction of the flutes in degrees (0 = vertical bars)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Angle",
+				group: "Effect"
+			}
+		},
+		frequency: {
+			default: 10,
+			description: "Number of flutes across the longest viewport axis",
+			ui: {
+				type: ["range", "map"],
+				min: 1,
+				max: 20,
+				step: 1,
+				label: "Frequency",
+				group: "Effect"
+			}
+		},
+		softness: {
+			default: .5,
+			description: "How smoothly distortion fades from each flute centre to its edge (0 = flat middle / sharp seams, 1 = gentle curve)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Softness",
+				group: "Effect"
+			}
+		},
+		waveAmplitude: {
+			default: .06,
+			description: "How far each flute sways horizontally as it travels (Waves shape only)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: .5,
+				step: .01,
+				label: "Wave Amplitude",
+				group: "Effect",
+				condition: { shape: "waves" }
+			}
+		},
+		waveFrequency: {
+			default: 1.5,
+			description: "How many sways fit along each flute (Waves shape only)",
+			ui: {
+				type: ["range", "map"],
+				min: .1,
+				max: 10,
+				step: .1,
+				label: "Wave Frequency",
+				group: "Effect",
+				condition: { shape: "waves" }
+			}
+		},
+		speed: {
+			default: 0,
+			description: "Animation speed — drifts the flute pattern over time and flows wave perturbations",
+			ui: {
+				type: "range",
+				min: -1,
+				max: 1,
+				step: .05,
+				label: "Speed",
+				group: "Animation"
+			}
+		},
+		refraction: {
+			default: 1.5,
+			description: "How aggressively each flute bends content beneath it",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 4,
+				step: .01,
+				label: "Refraction",
+				group: "Effect"
+			}
+		},
+		aberration: {
+			default: .2,
+			description: "Chromatic aberration — splits RGB along the refraction direction at flute seams",
+			compileTimeWhen: (prev, next) => prev > 0 !== next > 0,
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Aberration",
+				group: "Effect"
+			}
+		},
+		lightAngle: {
+			default: 30,
+			description: "Direction the light source is coming from (0 = head-on, 90 = grazing)",
+			ui: {
+				type: "range",
+				min: -90,
+				max: 90,
+				step: 1,
+				label: "Light Angle",
+				group: "Highlight"
+			}
+		},
+		highlight: {
+			default: .2,
+			description: "Strength of the specular reflection on each flute",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 2,
+				step: .01,
+				label: "Highlight",
+				group: "Highlight"
+			}
+		},
+		highlightSoftness: {
+			default: .3,
+			description: "Spread of the specular peak (0 = pin-tight, 1 = broad sheen)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Highlight Softness",
+				group: "Highlight"
+			}
+		},
+		highlightColor: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Color of the specular highlight",
+			ui: {
+				type: "color",
+				label: "Highlight Color",
+				group: "Highlight"
+			}
+		},
+		edges: {
+			default: "mirror",
+			description: "How to handle edges when distortion samples beyond the canvas",
+			transform: transformEdges,
+			compileTime: true,
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Stretch",
+						value: "stretch"
+					},
+					{
+						label: "Transparent",
+						value: "transparent"
+					},
+					{
+						label: "Mirror",
+						value: "mirror"
+					},
+					{
+						label: "Wrap",
+						value: "wrap"
+					}
+				],
+				label: "Edges",
+				group: "Effect"
+			}
+		}
+	},
+	fragmentNode: (params) => {
+		const { uniforms, childNode, onCleanup, onBeforeRender } = params;
+		if (!childNode) return vec4(0);
+		const childTexture = convertToTexture(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const uvCoord = screenUV;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const t = createAnimatedTime(params, uniforms.speed).negate();
+		let cosA, sinA;
+		if (uniforms.angle.uniform.isUniformNode) {
+			const cu = uniform(1);
+			const su = uniform(0);
+			const updateAngle = () => {
+				const r = uniforms.angle.uniform.value * Math.PI / 180;
+				cu.value = Math.cos(r);
+				su.value = Math.sin(r);
+			};
+			updateAngle();
+			onBeforeRender(updateAngle);
+			cosA = cu;
+			sinA = su;
+		} else {
+			const r = uniforms.angle.uniform.mul(PI).div(180);
+			cosA = cos(r);
+			sinA = sin(r);
+		}
+		const hx = uniform(0);
+		const hy = uniform(1);
+		const updateLight = () => {
+			const half = uniforms.lightAngle.uniform.value * Math.PI / 360;
+			hx.value = Math.sin(half);
+			hy.value = Math.cos(half);
+		};
+		updateLight();
+		onBeforeRender(updateLight);
+		const centered = uvCoord.sub(vec2(.5, .5));
+		const aspCorr = vec2(centered.x.mul(aspect), centered.y);
+		const u = aspCorr.x.mul(cosA).add(aspCorr.y.mul(sinA));
+		const v = aspCorr.x.mul(sinA).negate().add(aspCorr.y.mul(cosA));
+		const shapeId = uniforms.shape.uniform.value;
+		const cellPos = fract((shapeId === 2 ? u.add(sin(v.mul(uniforms.waveFrequency.uniform).mul(PI.mul(2)).add(t.mul(2))).mul(uniforms.waveAmplitude.uniform)) : u).mul(uniforms.frequency.uniform).add(t)).sub(.5).mul(2);
+		const softness = uniforms.softness.uniform;
+		const absCell = abs(cellPos).max(float(1e-4));
+		let slope;
+		switch (shapeId) {
+			case 0: {
+				const exp$1 = mix(float(16), float(4), softness);
+				slope = sign(cellPos).mul(pow(absCell, exp$1));
+				break;
+			}
+			default: {
+				const exp$1 = mix(float(8), float(3), softness);
+				slope = sign(cellPos).mul(pow(absCell, exp$1));
+			}
+		}
+		const halfCell = float(.5).div(uniforms.frequency.uniform.max(float(.001)));
+		const refrU = slope.mul(uniforms.refraction.uniform).mul(halfCell).negate();
+		const refrOffsetX = refrU.mul(cosA).div(aspect);
+		const refrOffsetY = refrU.mul(sinA);
+		const refractedUV = vec2(uvCoord.x.add(refrOffsetX), uvCoord.y.add(refrOffsetY));
+		const aberrationEnabled = typeof uniforms.aberration.uniform.value === "number" ? uniforms.aberration.uniform.value > 0 : true;
+		const chrU = refrU.mul(uniforms.aberration.uniform).mul(.5);
+		const chrOffX = chrU.mul(cosA).div(aspect);
+		const chrOffY = chrU.mul(sinA);
+		const edgeMode = uniforms.edges.uniform.value;
+		const sampleAt = (uv$1) => {
+			if (edgeMode === 1) {
+				const inX = step(float(0), uv$1.x).mul(step(uv$1.x, float(1)));
+				const inY = step(float(0), uv$1.y).mul(step(uv$1.y, float(1)));
+				return childTexture.sample(uv$1).mul(inX.mul(inY));
+			}
+			return childTexture.sample(applyEdgeToUV(uv$1, edgeMode));
+		};
+		let sampled;
+		if (!aberrationEnabled) sampled = sampleAt(refractedUV);
+		else {
+			const rUV = vec2(refractedUV.x.add(chrOffX), refractedUV.y.add(chrOffY));
+			const bUV = vec2(refractedUV.x.sub(chrOffX), refractedUV.y.sub(chrOffY));
+			const rS = sampleAt(rUV);
+			const gS = sampleAt(refractedUV);
+			const bS = sampleAt(bUV);
+			sampled = vec4(rS.r, gS.g, bS.b, gS.a);
+		}
+		const straight = unpremultiplyAlpha(sampled);
+		const baseRgb = vec3(straight.r, straight.g, straight.b);
+		const slopeSq = slope.mul(slope).min(float(1));
+		const nz = sqrt(float(1).sub(slopeSq));
+		const nDotH = slope.mul(hx).add(nz.mul(hy)).max(float(0));
+		const shininess = exp2(float(8).sub(uniforms.highlightSoftness.uniform.mul(float(7))));
+		const fresnel = pow(float(1).sub(nz), float(5));
+		const fresnelMix = float(.04).add(float(.96).mul(fresnel));
+		const spec = pow(nDotH, shininess).mul(fresnelMix).mul(uniforms.highlight.uniform);
+		const hlCol = uniforms.highlightColor.uniform;
+		const specA = spec.mul(straight.a);
+		const lit = vec3(baseRgb.x.add(hlCol.x.mul(specA)), baseRgb.y.add(hlCol.y.mul(specA)), baseRgb.z.add(hlCol.z.mul(specA)));
+		return vec4(lit.x, lit.y, lit.z, straight.a);
+	}
+};
+var FlutedGlass_default = componentDefinition;
+export { componentDefinition as n, FlutedGlass_default as t };

package/dist/core/{Form3D-DaPbLGUi.js → Form3D-CqmOXXGj.js}

@@ -338,12 +338,24 @@ const componentDefinition = {
 		});
 		const t = createAnimatedTime(params, uniforms.speed);
 		const shapeType = uniforms.shape3dType.uniform.value;
+		let _parseCacheKey = null;
+		let _parseCacheVal = {};
 		const parse = (raw) => {
+			let key;
 			try {
-				return JSON.parse(typeof raw === "string" ? raw : JSON.stringify(raw));
+				key = typeof raw === "string" ? raw : JSON.stringify(raw);
 			} catch {
-				return {};
+				key = null;
 			}
+			if (key !== null && key === _parseCacheKey) return _parseCacheVal;
+			try {
+				_parseCacheVal = JSON.parse(key ?? (typeof raw === "string" ? raw : "{}"));
+				_parseCacheKey = key;
+			} catch {
+				_parseCacheVal = {};
+				_parseCacheKey = null;
+			}
+			return _parseCacheVal;
 		};
 		const cfg0 = parse(uniforms.shape3d.uniform.value);
 		const DEG = Math.PI / 180;

package/dist/core/{Glass-TRSXbuE6.js → Glass-BCOkQbvW.js}

@@ -1,5 +1,5 @@
 import { a as transformColor, l as transformPosition } from "./transformations-B5lM6fYX.js";
-import { t as createGaussianBlurCompute } from "./computeBlur-DeXZ99YL.js";
+import { r as createGaussianBlurCompute } from "./computeBlur-DCRhuYEi.js";
 import { n as createAnalyticSdfSampler, r as createSvgSdfSampler } from "./sdf-DyC2H_qS.js";
 import { Fn, If, 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;
@@ -391,7 +391,7 @@ const componentDefinition = {
 			description: "Active SDF shape type — triggers recompile when shape is switched. When empty, derived from shape JSON at mount time."
 		}
 	},
-	computeNode: ({ uniforms, childNode, onCleanup, dimensions, renderer }) => {
+	computeNode: ({ uniforms, childNode, onCleanup, dimensions, renderer, onResize }) => {
 		if (!childNode) return null;
 		const blurValue = uniforms.blur.uniform.value;
 		if (typeof blurValue === "number" && blurValue <= 0) return null;
@@ -400,7 +400,11 @@ const componentDefinition = {
 			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, .5);
+		const blur = createGaussianBlurCompute(childTexture, Math.round(dimensions.width * dpr), Math.round(dimensions.height * dpr), onCleanup);
+		const { computeNodes, outputTexture, updateRadius } = blur;
+		onResize(({ width, height }) => {
+			blur.setInputDimensions(Math.round(width * dpr), Math.round(height * dpr));
+		});
 		return {
 			outputs: {
 				childTexture,

package/dist/core/{Glow-8bKkyehK.js → Glow-CsTZA75y.js}

@@ -1,6 +1,8 @@
 import { t as unpremultiplyAlpha } from "./alpha-C4ptedXe.js";
-import { n as createVariableGaussianBlurCompute, t as createGaussianBlurCompute } from "./computeBlur-DeXZ99YL.js";
-import { Fn, If, clamp, convertToTexture, dot, float, instanceIndex, int, max, mix, pow, screenUV, texture, textureLoad, textureStore, uint, uvec2, vec2, vec3, vec4, viewportSize } from "three/tsl";
+import { i as createVariableGaussianBlurCompute, n as DEFAULT_COMPUTE_WIDTH, t as DEFAULT_COMPUTE_HEIGHT } from "./computeBlur-DCRhuYEi.js";
+import { StorageTexture } from "three/webgpu";
+import { FloatType } from "three";
+import { Fn, If, clamp, convertToTexture, dot, float, instanceIndex, int, max, mix, pow, screenUV, storageTexture, texture, textureLoad, textureStore, uint, uniform, uvec2, vec2, vec3, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "Glow",
 	category: "Stylize",
@@ -14,8 +16,8 @@ const componentDefinition = {
 			ui: {
 				type: ["range", "map"],
 				min: 0,
-				max: 10,
-				step: .1,
+				max: 50,
+				step: .5,
 				label: "Intensity",
 				group: "Effect"
 			}
@@ -27,26 +29,28 @@ const componentDefinition = {
 				type: ["range", "map"],
 				min: 0,
 				max: 1,
-				step: .1,
+				step: .05,
 				label: "Threshold",
 				group: "Effect"
 			}
 		},
 		size: {
-			default: 10,
-			description: "Size/spread of the glow effect",
+			default: 25,
+			description: "Glow spread in pixels (clean up to ~72px, mild banding above)",
+			compileTimeWhen: (prev, next) => prev === 0 !== (next === 0),
 			ui: {
 				type: ["range", "map"],
-				min: 1,
-				max: 20,
-				step: .1,
+				min: 0,
+				max: 100,
+				step: 1,
 				label: "Glow Size",
 				group: "Effect"
 			}
 		}
 	},
-	computeNode: ({ childNode, onCleanup, dimensions, renderer, uniforms }) => {
+	computeNode: ({ childNode, onCleanup, dimensions, renderer, uniforms, onResize }) => {
 		if (!childNode) return null;
+		if (uniforms.size.uniform.value === 0) return null;
 		const childTexture = convertToTexture(childNode);
 		onCleanup(() => {
 			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
@@ -54,63 +58,72 @@ const componentDefinition = {
 		const dpr = renderer?.getPixelRatio?.() ?? 1;
 		const texWidth = Math.round(dimensions.width * dpr);
 		const texHeight = Math.round(dimensions.height * dpr);
+		const computeWidth = DEFAULT_COMPUTE_WIDTH;
+		const computeHeight = 640;
+		const brightTex = new StorageTexture(computeWidth, computeHeight);
+		brightTex.type = FloatType;
+		const brightWriteNode = storageTexture(brightTex);
+		const brightReadNode = storageTexture(brightTex).toReadOnly();
+		onCleanup(() => {
+			brightTex.dispose();
+		});
+		const { computeNodes: blurNodes, outputTexture: blurredTex, blurMapWriteNode } = createVariableGaussianBlurCompute(brightReadNode, computeWidth, computeHeight, onCleanup);
+		const inputWidthU = uniform(texWidth);
+		const inputHeightU = uniform(texHeight);
+		const cw = uint(computeWidth);
+		const ch = uint(computeHeight);
 		const sizeMapInfo = uniforms.size.mapComputeInfo;
-		if (sizeMapInfo) {
-			const { computeNodes: blurNodes, outputTexture: outputTexture$1, blurMapWriteNode } = createVariableGaussianBlurCompute(childTexture, texWidth, texHeight, onCleanup);
-			const w = uint(texWidth);
-			const h = uint(texHeight);
-			const { sourceTexture, channel, inputMin, inputMax, outputMin, outputMax, curve } = sizeMapInfo;
-			const fillBlurMap = Fn(() => {
-				const idx = instanceIndex;
-				const x = idx.mod(w);
-				const y = idx.div(w);
-				If(y.lessThan(h), () => {
-					const sample = textureLoad(sourceTexture, uvec2(x, y), int(0));
+		const extractAndFill = Fn(() => {
+			const idx = instanceIndex;
+			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 srcX = u.mul(inputWidthU).round().toInt().clamp(int(0), int(inputWidthU.sub(1))).toUint();
+				const srcY = v.mul(inputHeightU).round().toInt().clamp(int(0), int(inputHeightU.sub(1))).toUint();
+				const sample = textureLoad(childTexture, uvec2(srcX, srcY), int(0));
+				const lum = dot(sample.rgb, vec3(.2126, .7152, .0722));
+				const mask = max(float(0), lum.sub(uniforms.threshold.uniform));
+				textureStore(brightWriteNode, uvec2(cx, cy), vec4(sample.rgb.mul(mask), sample.a)).toWriteOnly();
+				let radius;
+				if (sizeMapInfo) {
+					const { sourceTexture, channel, inputMin, inputMax, outputMin, outputMax, curve } = sizeMapInfo;
+					const mapSample = textureLoad(sourceTexture, uvec2(srcX, srcY), int(0));
 					let raw;
-					if (channel === "alpha") raw = sample.a;
-					else if (channel === "alphaInverted") raw = sample.a.oneMinus();
-					else if (channel === "luminanceInverted") raw = dot(sample.rgb, vec3(.2126, .7152, .0722)).oneMinus();
-					else raw = dot(sample.rgb, vec3(.2126, .7152, .0722));
+					if (channel === "alpha") raw = mapSample.a;
+					else if (channel === "alphaInverted") raw = mapSample.a.oneMinus();
+					else if (channel === "luminanceInverted") raw = dot(mapSample.rgb, vec3(.2126, .7152, .0722)).oneMinus();
+					else raw = dot(mapSample.rgb, vec3(.2126, .7152, .0722));
 					const inputRange = inputMax.sub(inputMin).max(float(1e-4));
-					const radius = mix(outputMin, outputMax, pow(clamp(raw.sub(inputMin).div(inputRange), float(0), float(1)), pow(float(2), curve.negate().mul(float(2)))));
-					textureStore(blurMapWriteNode, uvec2(x, y), vec4(radius, float(0), float(0), float(1))).toWriteOnly();
-				});
-			})().compute(texWidth * texHeight, [256]);
-			return {
-				outputs: {
-					childTexture,
-					blurredTexture: outputTexture$1
-				},
-				getComputeNodes: () => [fillBlurMap, ...blurNodes]
-			};
-		}
-		const { computeNodes, outputTexture, updateRadius } = createGaussianBlurCompute(childTexture, texWidth, texHeight, onCleanup);
+					radius = mix(outputMin, outputMax, pow(clamp(raw.sub(inputMin).div(inputRange), float(0), float(1)), pow(float(2), curve.negate().mul(float(2)))));
+				} else radius = uniforms.size.uniform;
+				textureStore(blurMapWriteNode, uvec2(cx, cy), vec4(radius, float(0), float(0), float(1))).toWriteOnly();
+			});
+		})().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;
+		});
 		return {
 			outputs: {
 				childTexture,
-				blurredTexture: outputTexture
+				blurredTexture: blurredTex
 			},
-			getComputeNodes: () => {
-				const sizeEntry = uniforms.size;
-				const size = sizeEntry.getCpuValue?.() ?? (typeof sizeEntry.uniform.value === "number" ? sizeEntry.uniform.value : null);
-				if (size !== null) updateRadius(size);
-				return computeNodes;
-			}
+			getComputeNodes: () => [extractAndFill, ...blurNodes]
 		};
 	},
 	fragmentNode: ({ uniforms, childNode, onCleanup, computeOutputs }) => {
 		if (!childNode) return vec4(0, 0, 0, 0);
+		if (uniforms.size.uniform.value === 0) return childNode;
 		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);
-			const finalColor = originalColor$1.rgb.add(glow.rgb);
-			const finalAlpha = max(originalColor$1.a, glow.a);
+			const original = computeOutputs.childTexture.sample(screenUV);
+			const bloom = texture(computeOutputs.blurredTexture).sample(screenUV);
 			const sizePin = uniforms.size.uniform.mul(float(0));
-			return unpremultiplyAlpha(vec4(finalColor.add(sizePin), finalAlpha));
+			const intensity$1 = uniforms.intensity.uniform;
+			return unpremultiplyAlpha(vec4(original.rgb.add(bloom.rgb.mul(intensity$1)).add(sizePin), original.a));
 		}
 		const childTexture = convertToTexture(childNode);
 		onCleanup(() => {

package/dist/core/{GridDistortion-CpSiGEGV.js → GridDistortion-CVpebl48.js}

@@ -1,4 +1,4 @@
-import { t as applyEdgeHandling } from "./edges-CfGcQniB.js";
+import { t as applyEdgeHandling } from "./edges-CX_lJB9R.js";
 import { c as transformEdges } from "./transformations-B5lM6fYX.js";
 import { t as unpremultiplyAlpha } from "./alpha-C4ptedXe.js";
 import { StorageTexture } from "three/webgpu";
@@ -116,7 +116,7 @@ const componentDefinition = {
 			}
 		}
 	},
-	computeNode: ({ uniforms, onCleanup, dimensions }) => {
+	computeNode: ({ uniforms, onCleanup }) => {
 		const GRID_SIZE = uniforms?.gridSize?.uniform?.value ? Math.max(8, Math.min(128, Math.floor(uniforms.gridSize.uniform.value))) : DEFAULT_GRID_SIZE;
 		const buffer = attributeArray(GRID_SIZE * GRID_SIZE, "vec4");
 		const dispTex = new StorageTexture(GRID_SIZE, GRID_SIZE);
@@ -179,7 +179,7 @@ const componentDefinition = {
 				const currentTime = Date.now();
 				const dt = Math.min((currentTime - lastTime) / 1e3, .016);
 				lastTime = currentTime;
-				const aspect = dimensions.width / Math.max(dimensions.height, 1);
+				const aspect = Math.max(1, params.dimensions.width) / Math.max(1, params.dimensions.height);
 				const velX = dt > 0 ? (params.pointer.x - prevX) / dt : 0;
 				const velY = dt > 0 ? (params.pointer.y - prevY) / dt : 0;
 				smoothVelX = smoothVelX * .85 + velX * .15;
@@ -203,7 +203,7 @@ const componentDefinition = {
 			}
 		};
 	},
-	fragmentNode: ({ uniforms, onBeforeRender, childNode, onCleanup, dimensions, computeOutputs }) => {
+	fragmentNode: ({ uniforms, onBeforeRender, childNode, onCleanup, computeOutputs }) => {
 		let displacementField;
 		let GRID_SIZE;
 		if (computeOutputs?.displacement) {
@@ -217,7 +217,7 @@ const componentDefinition = {
 			const mouseVelX = uniform(0);
 			const mouseVelY = uniform(0);
 			let prevX = .5, prevY = .5, lastTime = Date.now();
-			onBeforeRender(({ pointer }) => {
+			onBeforeRender(({ pointer, dimensions }) => {
 				const currentTime = Date.now();
 				const dt = Math.min((currentTime - lastTime) / 1e3, .016);
 				lastTime = currentTime;

package/dist/core/{HueShift-BtGVMu7q.js → HueShift-C1RxETwN.js}

@@ -7,6 +7,7 @@ const componentDefinition = {
 	props: { shift: {
 		default: 0,
 		description: "The amount to shift the hue by",
+		compileTimeWhen: (prev, next) => prev === 0 !== (next === 0),
 		ui: {
 			type: ["range", "map"],
 			min: -180,
@@ -22,6 +23,7 @@ const componentDefinition = {
 			console.error("You must pass a child component into the Hue Shift shader.");
 			return vec4(0);
 		}
+		if (uniforms.shift.uniform.value === 0) return childNode;
 		const angle = uniforms.shift.uniform;
 		const cosA = cos(angle);
 		const sinA = sin(angle);

package/dist/core/{ImageTexture-CrX_9-f0.js → ImageTexture-DXhgMEOT.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);