shaders 2.2.24 → 2.2.26

package/dist/core/Godrays-ChLh_vGl.js

@@ -0,0 +1,144 @@
+import { o as transformPosition, r as transformColor } from "./transformations-DxfQXZWi.js";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "Godrays",
+	category: "Base Layers",
+	description: "Volumetric light rays emanating from a point",
+	requiresRTT: false,
+	acceptsUVContext: true,
+	props: {
+		center: {
+			default: {
+				x: 0,
+				y: 0
+			},
+			transform: transformPosition,
+			description: "The center point of the god rays",
+			ui: {
+				type: "position",
+				label: "Center"
+			}
+		},
+		density: {
+			default: .3,
+			description: "Frequency of ray sectors",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Density"
+			}
+		},
+		intensity: {
+			default: .8,
+			description: "Ray visibility within sectors",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Intensity"
+			}
+		},
+		spotty: {
+			default: 1,
+			description: "Density of spots on rays (higher = more spots)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Spotty"
+			}
+		},
+		speed: {
+			default: .5,
+			description: "Animation speed of the rays",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 2,
+				step: .01,
+				label: "Speed"
+			}
+		},
+		rayColor: {
+			default: "#4283fb",
+			transform: transformColor,
+			description: "Color of the light rays",
+			ui: {
+				type: "color",
+				label: "Ray Color"
+			}
+		},
+		backgroundColor: {
+			default: "transparent",
+			transform: transformColor,
+			description: "Background color",
+			ui: {
+				type: "color",
+				label: "Background Color"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, uvContext }) => {
+		const { vec2: vec2$1, vec4: vec4$1, float: float$1, sin: sin$1, atan: atan$1, length, pow: pow$1, smoothstep, mix: mix$1, clamp: clamp$1, screenUV: screenUV$1, time, PI, Fn } = TSL;
+		const uv = uvContext ?? screenUV$1;
+		const centerPos = vec2$1(uniforms.center.uniform.x, uniforms.center.uniform.y.oneMinus());
+		const shapeUV = uv.sub(centerPos);
+		const valueNoise = Fn(([st]) => {
+			const i = st.floor();
+			const f = st.fract();
+			const hash = (p) => {
+				return sin$1(p.x.mul(127.1).add(p.y.mul(311.7))).mul(43758.5453).fract();
+			};
+			const a = hash(i);
+			const b = hash(i.add(vec2$1(1, 0)));
+			const c = hash(i.add(vec2$1(0, 1)));
+			const d = hash(i.add(vec2$1(1, 1)));
+			const u = f.mul(f).mul(f.mul(-2).add(3));
+			return mix$1(mix$1(a, b, u.x), mix$1(c, d, u.x), u.y);
+		});
+		const raysShape = Fn(([uv$1, r, freq, intensity]) => {
+			const a = atan$1(uv$1.y, uv$1.x);
+			const left = vec2$1(a.mul(freq), r);
+			const right = vec2$1(a.mod(PI.mul(2)).mul(freq), r);
+			const nLeft = pow$1(valueNoise(left), intensity);
+			return mix$1(pow$1(valueNoise(right), intensity), nLeft, smoothstep(-.15, .15, uv$1.x));
+		});
+		const rayEffect = Fn(() => {
+			const animTime = time.mul(uniforms.speed.uniform).mul(.2);
+			const radius = length(shapeUV);
+			const spots = float$1(6.5).mul(TSL.abs(uniforms.spotty.uniform));
+			const intensityCalc = float$1(4).sub(float$1(3).mul(clamp$1(uniforms.intensity.uniform, 0, 1)));
+			const density = float$1(6).mul(uniforms.density.uniform);
+			const accumRay = float$1(0).toVar();
+			const r1 = radius.mul(1).sub(animTime.mul(3));
+			const r2 = radius.mul(.5).mul(float$1(1).add(spots)).sub(animTime.mul(2));
+			const f1 = density.mul(5);
+			const ray = raysShape(shapeUV, r1, f1, intensityCalc).toVar();
+			ray.assign(ray.mul(raysShape(shapeUV, r2, f1.mul(4), intensityCalc)));
+			accumRay.assign(accumRay.add(ray));
+			const r3 = radius.mul(1.4).sub(animTime.mul(2.5));
+			const r4 = radius.mul(.7).mul(float$1(1).add(spots)).sub(animTime.mul(1.8));
+			const f2 = density.mul(4.5);
+			const ray2 = raysShape(shapeUV, r3, f2, intensityCalc).toVar();
+			ray2.assign(ray2.mul(raysShape(shapeUV, r4, f2.mul(3.5), intensityCalc)));
+			accumRay.assign(accumRay.add(ray2.mul(.7)));
+			return clamp$1(accumRay, 0, 1);
+		})();
+		const rayColorRGB = uniforms.rayColor.uniform.rgb;
+		const rayColorA = uniforms.rayColor.uniform.a;
+		const bgColorRGB = uniforms.backgroundColor.uniform.rgb;
+		const bgColorA = uniforms.backgroundColor.uniform.a;
+		const rayAlpha = rayEffect.mul(rayColorA);
+		const finalAlpha = rayAlpha.add(bgColorA.mul(float$1(1).sub(rayAlpha)));
+		const safeAlpha = clamp$1(finalAlpha, .001, 1);
+		const rayContribution = rayColorRGB.mul(rayAlpha);
+		const bgContribution = bgColorRGB.mul(bgColorA).mul(float$1(1).sub(rayAlpha));
+		return vec4$1(rayContribution.add(bgContribution).div(safeAlpha), finalAlpha);
+	}
+};
+var Godrays_default = componentDefinition;
+export { componentDefinition as n, Godrays_default as t };

package/dist/core/Grayscale-Bi-XBvO_.js

@@ -0,0 +1,18 @@
+import { dot, vec3, vec4 } from "three/tsl";
+const componentDefinition = {
+	name: "Grayscale",
+	category: "Adjustments",
+	description: "Convert colors to black and white",
+	requiresChild: true,
+	props: {},
+	fragmentNode: ({ childNode }) => {
+		if (!childNode) {
+			console.error("You must pass a child component into the Grayscale shader.");
+			return vec4(0);
+		}
+		const luminance = dot(childNode.rgb, vec3(.2126, .7152, .0722));
+		return vec4(luminance, luminance, luminance, childNode.a);
+	}
+};
+var Grayscale_default = componentDefinition;
+export { componentDefinition as n, Grayscale_default as t };

package/dist/core/Grid-DgyDa4H1.js

@@ -0,0 +1,58 @@
+import { r as transformColor } from "./transformations-DxfQXZWi.js";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "Grid",
+	category: "Base Layers",
+	description: "Simple grid lines pattern with adjustable thickness",
+	acceptsUVContext: true,
+	props: {
+		color: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "The color of the grid lines",
+			ui: {
+				type: "color",
+				label: "Color"
+			}
+		},
+		cells: {
+			default: 10,
+			description: "Number of cells along the shortest canvas edge (creates square cells)",
+			ui: {
+				type: "range",
+				min: 1,
+				max: 50,
+				step: 1,
+				label: "Cells"
+			}
+		},
+		thickness: {
+			default: 1,
+			description: "Thickness of grid lines (normalized, 0.0-1.0)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 5,
+				step: .1,
+				label: "Thickness"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, uvContext }) => {
+		const { vec2: vec2$1, vec4: vec4$1, fract, max: max$1, screenUV: screenUV$1, viewportSize: viewportSize$1, fwidth, smoothstep } = TSL;
+		const uv = uvContext ?? screenUV$1;
+		const aspect = viewportSize$1.x.div(viewportSize$1.y);
+		const correctedUV = vec2$1(uv.x.mul(aspect), uv.y.oneMinus());
+		const cells = uniforms.cells.uniform;
+		const gridUV = correctedUV.mul(cells);
+		const gridFract = fract(gridUV);
+		const lineWidth = uniforms.thickness.uniform.mul(.01);
+		const distToLineX = gridFract.x.min(gridFract.x.oneMinus());
+		const distToLineY = gridFract.y.min(gridFract.y.oneMinus());
+		const pixelSize = fwidth(gridUV);
+		const gridMask = max$1(smoothstep(lineWidth.add(pixelSize.x), lineWidth, distToLineX), smoothstep(lineWidth.add(pixelSize.y), lineWidth, distToLineY));
+		return vec4$1(uniforms.color.uniform.rgb, uniforms.color.uniform.a.mul(gridMask));
+	}
+};
+var Grid_default = componentDefinition;
+export { componentDefinition as n, Grid_default as t };

package/dist/core/GridDistortion-BAspCYvp.js

@@ -0,0 +1,188 @@
+import { t as applyEdgeHandling } from "./edges-Bn_OIa_h.js";
+import { a as transformEdges } from "./transformations-DxfQXZWi.js";
+import { DataTexture, FloatType, LinearFilter, RGFormat } from "three";
+import * as TSL from "three/tsl";
+var DEFAULT_GRID_SIZE = 20;
+var displacementStateCache = /* @__PURE__ */ new WeakMap();
+var getOrCreateDisplacementState = (uniforms) => {
+	let state = displacementStateCache.get(uniforms);
+	const gridSize = uniforms?.gridSize?.uniform?.value ? Math.max(8, Math.min(128, Math.floor(uniforms.gridSize.uniform.value))) : DEFAULT_GRID_SIZE;
+	if (state && state.gridSize !== gridSize) {
+		state.texture.dispose();
+		state = void 0;
+		displacementStateCache.delete(uniforms);
+	}
+	if (!state) {
+		const data = new Float32Array(gridSize * gridSize * 2);
+		const texture = new DataTexture(data, gridSize, gridSize, RGFormat, FloatType);
+		texture.magFilter = LinearFilter;
+		texture.minFilter = LinearFilter;
+		texture.needsUpdate = true;
+		state = {
+			texture,
+			data,
+			tslNode: TSL.texture(texture),
+			gridSize
+		};
+		displacementStateCache.set(uniforms, state);
+	}
+	return state;
+};
+const componentDefinition = {
+	name: "GridDistortion",
+	category: "Interactive",
+	description: "Interactive grid distortion controlled by mouse position",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		intensity: {
+			default: 1,
+			description: "Strength of the distortion effect",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 5,
+				step: .1,
+				label: "Intensity"
+			}
+		},
+		swirl: {
+			default: 0,
+			description: "Amount of swirl motion",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 2,
+				step: .1,
+				label: "Swirl"
+			}
+		},
+		decay: {
+			default: 3,
+			description: "Rate of distortion decay (higher = faster)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 10,
+				step: .1,
+				label: "Decay"
+			}
+		},
+		radius: {
+			default: 1,
+			description: "Radius of the distortion effect",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 3,
+				step: .01,
+				label: "Radius"
+			}
+		},
+		gridSize: {
+			default: 20,
+			description: "Resolution of the distortion grid (higher = more detailed)",
+			ui: {
+				type: "range",
+				min: 8,
+				max: 128,
+				step: 1,
+				label: "Grid Size"
+			}
+		},
+		edges: {
+			default: "stretch",
+			description: "How to handle edges when distortion pushes content out of bounds",
+			transform: transformEdges,
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Stretch",
+						value: "stretch"
+					},
+					{
+						label: "Transparent",
+						value: "transparent"
+					},
+					{
+						label: "Mirror",
+						value: "mirror"
+					},
+					{
+						label: "Wrap",
+						value: "wrap"
+					}
+				],
+				label: "Edges"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, onBeforeRender, childNode, onCleanup }) => {
+		const { vec2: vec2$1, vec4: vec4$1, float: float$1, uniform: uniform$1, screenUV: screenUV$1, convertToTexture: convertToTexture$1 } = TSL;
+		const { texture: displacementTexture, data: displacementData, tslNode: displacementField, gridSize: GRID_SIZE } = getOrCreateDisplacementState(uniforms);
+		const mouseVelX = uniform$1(0);
+		const mouseVelY = uniform$1(0);
+		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 velX = dt > 0 ? (pointer.x - prevX) / dt : 0;
+			const velY = dt > 0 ? (pointer.y - prevY) / dt : 0;
+			mouseVelX.value = mouseVelX.value * .85 + velX * .15;
+			mouseVelY.value = mouseVelY.value * .85 + velY * .15;
+			const decay = uniforms.decay.uniform.value;
+			const intensity = uniforms.intensity.uniform.value;
+			const radius = uniforms.radius.uniform.value * .05;
+			const swirl = uniforms.swirl.uniform.value;
+			for (let i = 0; i < GRID_SIZE; i++) for (let j = 0; j < GRID_SIZE; j++) {
+				const idx = (i * GRID_SIZE + j) * 2;
+				displacementData[idx] *= 1 - decay * dt;
+				displacementData[idx + 1] *= 1 - decay * dt;
+				const cellX = (j + .5) / GRID_SIZE;
+				const cellY = (i + .5) / GRID_SIZE;
+				const dx = cellX - pointer.x;
+				const dy = cellY - pointer.y;
+				const dist = Math.sqrt(dx * dx + dy * dy);
+				if (dist < radius * 2 && Math.abs(velX) + Math.abs(velY) > .01) {
+					const influence = Math.exp(-dist * dist / (radius * radius));
+					displacementData[idx] += mouseVelX.value * influence * intensity * dt * .5;
+					displacementData[idx + 1] += mouseVelY.value * influence * intensity * dt * .5;
+					if (swirl > 0) {
+						const angle = Math.atan2(dy, dx) + Math.PI * .5;
+						displacementData[idx] += Math.cos(angle) * swirl * influence * dt * 2;
+						displacementData[idx + 1] += Math.sin(angle) * swirl * influence * dt * 2;
+					}
+				}
+				displacementData[idx] = Math.max(-1, Math.min(1, displacementData[idx]));
+				displacementData[idx + 1] = Math.max(-1, Math.min(1, displacementData[idx + 1]));
+			}
+			displacementTexture.needsUpdate = true;
+			prevX = pointer.x;
+			prevY = pointer.y;
+		});
+		onCleanup(() => {
+			displacementTexture.dispose();
+			displacementStateCache.delete(uniforms);
+		});
+		if (!childNode) return vec4$1(0, 0, 0, 0);
+		const childTexture = convertToTexture$1(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const gridSizeUniform = uniforms.gridSize.uniform;
+		const gridScale = float$1(1).div(gridSizeUniform);
+		const gridCellUV = screenUV$1.div(gridScale).floor().mul(gridScale).add(gridScale.mul(.5));
+		const displacement = displacementField.sample(gridCellUV).xy;
+		const maxDisplacement = float$1(.1);
+		const negMaxDisplacement = float$1(-.1);
+		const clampedDisplacement = displacement.clamp(vec2$1(negMaxDisplacement, negMaxDisplacement), vec2$1(maxDisplacement, maxDisplacement));
+		const distortedUV = screenUV$1.sub(clampedDisplacement);
+		return applyEdgeHandling(distortedUV, childTexture.sample(distortedUV), childTexture, uniforms.edges.uniform);
+	}
+};
+var GridDistortion_default = componentDefinition;
+export { componentDefinition as n, GridDistortion_default as t };

package/dist/core/Group-Dul7PUBl.js

@@ -0,0 +1,14 @@
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "Group",
+	category: "Utilities",
+	description: "Container for organizing and composing child effects",
+	requiresChild: true,
+	props: {},
+	fragmentNode: ({ childNode }) => {
+		const { vec4: vec4$1 } = TSL;
+		return childNode || vec4$1(0);
+	}
+};
+var Group_default = componentDefinition;
+export { componentDefinition as n, Group_default as t };

package/dist/core/Halftone-Ifv5F_FT.js

@@ -0,0 +1,65 @@
+import { n as transformAngle } from "./transformations-DxfQXZWi.js";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "Halftone",
+	category: "Stylize",
+	description: "Halftone dot pattern effect for printing aesthetics",
+	requiresChild: true,
+	props: {
+		frequency: {
+			default: 100,
+			description: "Frequency of the halftone dots",
+			ui: {
+				type: "range",
+				min: 10,
+				max: 300,
+				step: 1,
+				label: "Frequency"
+			}
+		},
+		angle: {
+			default: 45,
+			transform: transformAngle,
+			description: "Rotation angle of the pattern (in degrees)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Angle"
+			}
+		},
+		smoothness: {
+			default: .1,
+			description: "Edge smoothness of the dots",
+			ui: {
+				type: "range",
+				min: 0,
+				max: .3,
+				step: .01,
+				label: "Smoothness"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, childNode }) => {
+		const { vec2: vec2$1, vec3: vec3$1, vec4: vec4$1, sin: sin$1, cos: cos$1, fract, length, smoothstep, dot: dot$1, screenUV: screenUV$1, viewportSize: viewportSize$1, radians } = TSL;
+		if (!childNode) return vec4$1(0);
+		const _uv = screenUV$1;
+		const frequency = uniforms.frequency.uniform;
+		const angleDegrees = uniforms.angle.uniform;
+		const smoothness = uniforms.smoothness.uniform;
+		const angle = radians(angleDegrees);
+		const aspect = viewportSize$1.x.div(viewportSize$1.y);
+		const aspectCorrectedUV = vec2$1(_uv.x.mul(aspect), _uv.y);
+		const c = cos$1(angle);
+		const s = sin$1(angle);
+		const gridUV = fract(vec2$1(dot$1(aspectCorrectedUV, vec2$1(c, s.negate())), dot$1(aspectCorrectedUV, vec2$1(s, c))).mul(frequency)).sub(.5);
+		const originalColor = childNode;
+		const dotSize = dot$1(originalColor.rgb, vec3$1(.299, .587, .114)).mul(.7).add(.15);
+		const dist = length(gridUV);
+		const dotPattern = smoothstep(dotSize.add(smoothness), dotSize.sub(smoothness), dist);
+		return vec4$1(originalColor.rgb.mul(dotPattern), originalColor.a.mul(dotPattern));
+	}
+};
+var Halftone_default = componentDefinition;
+export { componentDefinition as n, Halftone_default as t };

package/dist/core/HueShift-DvOpzM7W.js

@@ -0,0 +1,47 @@
+import { cos, sin, vec3, vec4 } from "three/tsl";
+const componentDefinition = {
+	name: "HueShift",
+	category: "Adjustments",
+	description: "Rotate hue around the color wheel",
+	requiresChild: true,
+	props: { shift: {
+		default: 0,
+		description: "The amount to shift the hue by",
+		ui: {
+			type: "range",
+			min: -180,
+			max: 180,
+			step: 1,
+			label: "Shift"
+		},
+		transform: (value) => value * Math.PI / 180
+	} },
+	fragmentNode: ({ uniforms, childNode }) => {
+		if (!childNode) {
+			console.error("You must pass a child component into the Hue Shift shader.");
+			return vec4(0);
+		}
+		const angle = uniforms.shift.uniform;
+		const cosA = cos(angle);
+		const sinA = sin(angle);
+		const k = 1 / 3;
+		const sqrt3 = 1.7320508075688772;
+		const kOneMinusCos = cosA.oneMinus().mul(k);
+		const sinOverSqrt3 = sinA.div(sqrt3);
+		const m00 = cosA.add(kOneMinusCos);
+		const m01 = kOneMinusCos.sub(sinOverSqrt3);
+		const m02 = kOneMinusCos.add(sinOverSqrt3);
+		const m10 = kOneMinusCos.add(sinOverSqrt3);
+		const m11 = cosA.add(kOneMinusCos);
+		const m12 = kOneMinusCos.sub(sinOverSqrt3);
+		const m20 = kOneMinusCos.sub(sinOverSqrt3);
+		const m21 = kOneMinusCos.add(sinOverSqrt3);
+		const m22 = cosA.add(kOneMinusCos);
+		const r = childNode.r;
+		const g = childNode.g;
+		const b = childNode.b;
+		return vec4(vec3(r.mul(m00).add(g.mul(m01)).add(b.mul(m02)), r.mul(m10).add(g.mul(m11)).add(b.mul(m12)), r.mul(m20).add(g.mul(m21)).add(b.mul(m22))), childNode.a);
+	}
+};
+var HueShift_default = componentDefinition;
+export { componentDefinition as n, HueShift_default as t };

package/dist/core/ImageTexture-DvYcQgJB.js

@@ -0,0 +1,143 @@
+import { SRGBColorSpace, Texture, TextureLoader } from "three/webgpu";
+import * as TSL from "three/tsl";
+const componentDefinition = {
+	name: "ImageTexture",
+	category: "Base Layers",
+	description: "Display an image with customizable object-fit modes",
+	acceptsUVContext: true,
+	props: {
+		url: {
+			default: "https://shaders.com/sample.jpg",
+			description: "Upload an image or provide a URL",
+			ui: {
+				type: "image-upload",
+				label: "Image"
+			}
+		},
+		objectFit: {
+			default: "cover",
+			description: "How the image should be sized within the viewport",
+			transform: (value) => {
+				return {
+					"cover": 0,
+					"contain": 1,
+					"fill": 2,
+					"scale-down": 3,
+					"none": 4
+				}[value] ?? 0;
+			},
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Cover",
+						value: "cover"
+					},
+					{
+						label: "Contain",
+						value: "contain"
+					},
+					{
+						label: "Fill",
+						value: "fill"
+					},
+					{
+						label: "Scale Down",
+						value: "scale-down"
+					},
+					{
+						label: "None",
+						value: "none"
+					}
+				],
+				label: "Object Fit"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, onCleanup, onBeforeRender, uvContext }) => {
+		const { vec2: vec2$1, vec4: vec4$1, float: float$1, texture, screenUV: screenUV$1, viewportSize: viewportSize$1, step: step$1, min: min$1, max: max$1 } = TSL;
+		const baseUV = uvContext ?? screenUV$1;
+		const loader = new TextureLoader();
+		let currentUrl = "";
+		let isLoading = false;
+		const placeholderTexture = new Texture();
+		placeholderTexture.colorSpace = SRGBColorSpace;
+		const textureNode = texture(placeholderTexture);
+		const imageAspectUniform = TSL.uniform(1);
+		const imageWidthUniform = TSL.uniform(0);
+		const imageHeightUniform = TSL.uniform(0);
+		const loadImage = (url) => {
+			if (!url || url.trim() === "" || isLoading) return;
+			isLoading = true;
+			try {
+				let resolvedUrl = url;
+				try {
+					resolvedUrl = new URL(url, window.location.href).href;
+				} catch (e) {}
+				loader.load(url, (loadedTexture) => {
+					loadedTexture.colorSpace = SRGBColorSpace;
+					const img = loadedTexture.image;
+					const newWidth = img.width || 1;
+					const newHeight = img.height || 1;
+					const newAspect = newWidth / newHeight;
+					loadedTexture.dispose();
+					currentUrl = url;
+					requestAnimationFrame(() => {
+						const currentImage = placeholderTexture.image;
+						if (currentImage && typeof currentImage === "object" && (currentImage.width !== newWidth || currentImage.height !== newHeight)) placeholderTexture.dispose();
+						imageAspectUniform.value = newAspect;
+						imageWidthUniform.value = newWidth;
+						imageHeightUniform.value = newHeight;
+						placeholderTexture.image = img;
+						placeholderTexture.colorSpace = SRGBColorSpace;
+						placeholderTexture.needsUpdate = true;
+					});
+					isLoading = false;
+				}, void 0, (error) => {
+					const isRelative = !url.startsWith("http://") && !url.startsWith("https://") && !url.startsWith("data:");
+					console.error(`[ImageTexture] Failed to load image\n  Requested URL: ${url}\n  Resolved URL: ${resolvedUrl}\n  Path type: ${isRelative ? "relative" : "absolute"}\n  Error:`, error);
+					isLoading = false;
+				});
+			} catch (error) {
+				console.error(`[ImageTexture] Error initiating image load:`, error);
+				isLoading = false;
+			}
+		};
+		setTimeout(() => {
+			const initialUrl = uniforms?.url?.uniform?.value ?? "";
+			if (initialUrl && initialUrl.trim() !== "") loadImage(initialUrl);
+		}, 0);
+		onBeforeRender(() => {
+			const newUrl = uniforms?.url?.uniform?.value ?? "";
+			if (newUrl !== currentUrl && !isLoading) loadImage(newUrl);
+		});
+		onCleanup(() => {
+			placeholderTexture.dispose();
+		});
+		const uv = baseUV;
+		const viewportAspect = viewportSize$1.x.div(viewportSize$1.y);
+		const objectFitMode = uniforms.objectFit.uniform;
+		const coverScale = max$1(viewportAspect.div(imageAspectUniform), float$1(1));
+		const coverUVScale = vec2$1(imageAspectUniform.div(viewportAspect).mul(coverScale), coverScale);
+		const containScale = min$1(viewportAspect.div(imageAspectUniform), float$1(1));
+		const containUVScale = vec2$1(imageAspectUniform.div(viewportAspect).mul(containScale), containScale);
+		const fillUVScale = vec2$1(1, 1);
+		const scaleDownScale = min$1(min$1(viewportAspect.div(imageAspectUniform), float$1(1)), min$1(viewportSize$1.x.div(imageWidthUniform), viewportSize$1.y.div(imageHeightUniform)));
+		const scaleDownUVScale = vec2$1(imageAspectUniform.div(viewportAspect).mul(scaleDownScale), scaleDownScale);
+		const noneScale = min$1(viewportSize$1.x.div(imageWidthUniform), viewportSize$1.y.div(imageHeightUniform));
+		const noneUVScale = vec2$1(imageAspectUniform.div(viewportAspect).mul(noneScale), noneScale);
+		const isCover = step$1(objectFitMode, float$1(.5));
+		const isContain = step$1(float$1(.5), objectFitMode).mul(step$1(objectFitMode, float$1(1.5)));
+		const isFill = step$1(float$1(1.5), objectFitMode).mul(step$1(objectFitMode, float$1(2.5)));
+		const isScaleDown = step$1(float$1(2.5), objectFitMode).mul(step$1(objectFitMode, float$1(3.5)));
+		const isNone = step$1(float$1(3.5), objectFitMode);
+		const uvScale = vec2$1(0).add(coverUVScale.mul(isCover)).add(containUVScale.mul(isContain)).add(fillUVScale.mul(isFill)).add(scaleDownUVScale.mul(isScaleDown)).add(noneUVScale.mul(isNone));
+		const adjustedUV = uv.sub(vec2$1(.5)).div(uvScale).add(vec2$1(.5));
+		const finalUV = vec2$1(adjustedUV.x, float$1(1).sub(adjustedUV.y));
+		const sampledColor = textureNode.sample(finalUV);
+		const isOutOfBounds = TSL.or(TSL.or(finalUV.x.lessThan(0), finalUV.x.greaterThan(1)), TSL.or(finalUV.y.lessThan(0), finalUV.y.greaterThan(1)));
+		return vec4$1(sampledColor.rgb, TSL.select(isOutOfBounds, float$1(0), sampledColor.a));
+	}
+};
+var ImageTexture_default = componentDefinition;
+export { componentDefinition as n, ImageTexture_default as t };