shaders 2.3.75 → 2.4.76

package/dist/core/Neon-Bt0J1xV_.js

@@ -0,0 +1,418 @@
+import { a as transformColor, l as transformPosition } from "./transformations-B5lM6fYX.js";
+import { a as ellipseSdf, c as ringSdf, d as trapezoidSdf, f as vesicaSdf, i as crossSdf, l as roundedRectSdf, n as createSvgSdfSampler, o as flowerSdf, r as crescentSdf, s as polygonSdf, t as circleSdf, u as starSdf } from "./sdf-BDsv-WBk.js";
+import { Fn, atan, clamp, cos, exp, exp2, float, max, mix, pow, screenUV, sin, smoothstep, sqrt, uniform, vec2, vec3, vec4, viewportSize } from "three/tsl";
+var _LZ = .7;
+var _INV_LIGHT_LEN = 1 / Math.sqrt(1 + _LZ * _LZ);
+var _LZN = _LZ * _INV_LIGHT_LEN;
+var _HZ = _LZN + 1;
+var _INV_H_LEN = 1 / Math.sqrt(_INV_LIGHT_LEN * _INV_LIGHT_LEN + _HZ * _HZ);
+function applyNeonEffect(sdfSampler, uniforms, timeNode) {
+	return Fn(() => {
+		const uv$1 = screenUV;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const centerPos = vec2(uniforms.center.uniform.x, uniforms.center.uniform.y.oneMinus());
+		const scale = uniforms.scale.uniform;
+		const sdfUV = vec2(uv$1.x.sub(centerPos.x).mul(aspect).div(scale).add(float(.5)), uv$1.y.sub(centerPos.y).div(scale).add(float(.5)));
+		const smoothAmt = uniforms.cornerSmoothing.uniform;
+		const smoothEPS = float(.008).add(smoothAmt.mul(float(.03)));
+		const sdfCenter = sdfSampler(sdfUV).r;
+		const sdfRight = sdfSampler(sdfUV.add(vec2(smoothEPS, float(0)))).r;
+		const sdfLeft = sdfSampler(sdfUV.sub(vec2(smoothEPS, float(0)))).r;
+		const sdfUp = sdfSampler(sdfUV.add(vec2(float(0), smoothEPS))).r;
+		const sdfDown = sdfSampler(sdfUV.sub(vec2(float(0), smoothEPS))).r;
+		const gradX = sdfRight.sub(sdfLeft).div(smoothEPS.mul(float(2)));
+		const gradY = sdfUp.sub(sdfDown).div(smoothEPS.mul(float(2)));
+		const sdf = mix(sdfCenter, sdfCenter.add(sdfRight).add(sdfLeft).add(sdfUp).add(sdfDown).div(float(5)), smoothAmt);
+		const gradLen = sqrt(gradX.mul(gradX).add(gradY.mul(gradY))).max(float(1e-4));
+		const gnx = gradX.div(gradLen);
+		const gny = gradY.div(gradLen);
+		const tubeR = uniforms.tubeThickness.uniform;
+		const depthNorm = clamp(sdf.negate().div(tubeR.max(float(.001))), float(0), float(1));
+		const softPx = float(.004);
+		const outerMask = smoothstep(softPx, softPx.negate(), sdf);
+		const innerMask = smoothstep(tubeR.add(softPx), tubeR.sub(softPx), sdf.negate());
+		const tubeMask = outerMask.mul(innerMask);
+		const t = depthNorm;
+		const cylinderZ = sqrt(t.mul(float(2).sub(t)).max(float(0)));
+		const cylinderR = float(1).sub(t);
+		const nx = gnx.mul(cylinderR);
+		const ny = gny.mul(cylinderR);
+		const nz = cylinderZ;
+		const lightRad = uniforms.lightAngle.uniform.mul(float(Math.PI / 180));
+		const lx = cos(lightRad);
+		const ly = sin(lightRad);
+		const lxn = lx.mul(float(_INV_LIGHT_LEN));
+		const lyn = ly.mul(float(_INV_LIGHT_LEN));
+		const lzn = float(_LZN);
+		const diffuse = clamp(nx.mul(lxn).add(ny.mul(lyn)).add(nz.mul(lzn)), float(0), float(1));
+		const NdotH = nx.mul(lxn.mul(float(_INV_H_LEN))).add(ny.mul(lyn.mul(float(_INV_H_LEN)))).add(nz.mul(float(_HZ * _INV_H_LEN)));
+		const shininess = exp2(float(8).sub(uniforms.specularSize.uniform.mul(float(7))));
+		const specular = pow(clamp(NdotH, float(0), float(1)), shininess).mul(uniforms.specularIntensity.uniform);
+		const flowDx = sdfUV.x.sub(float(.5));
+		const flowWave = sin(atan(sdfUV.y.sub(float(.5)), flowDx).mul(float(2)).add(timeNode.mul(uniforms.flowSpeed.uniform))).mul(float(.5)).add(float(.5));
+		const flowMod = mix(float(1), flowWave, uniforms.flowAmount.uniform);
+		const primaryCol = vec3(uniforms.color.uniform.x, uniforms.color.uniform.y, uniforms.color.uniform.z);
+		const secondCol = vec3(uniforms.secondaryColor.uniform.x, uniforms.secondaryColor.uniform.y, uniforms.secondaryColor.uniform.z);
+		const blendAmt = uniforms.secondaryBlend.uniform;
+		const baseColor = mix(primaryCol, mix(secondCol, primaryCol, diffuse), blendAmt);
+		const ambient = float(.12);
+		const selfEmission = cylinderZ.mul(float(.35));
+		const shadedRgb = baseColor.mul(ambient.add(diffuse.mul(float(.55))).add(selfEmission));
+		const specCol = vec3(specular, specular, specular);
+		const tubeRgb = shadedRgb.add(specCol);
+		const hotCoreAmt = smoothstep(float(.55), float(1), depthNorm).mul(uniforms.hotCoreIntensity.uniform).mul(flowMod);
+		const tubeFlowed = mix(tubeRgb, mix(primaryCol, vec3(1, 1, 1), float(.75)), hotCoreAmt).mul(mix(float(1), flowMod, float(.4)));
+		const glowR = uniforms.glowRadius.uniform.max(float(.001));
+		const glowI = uniforms.glowIntensity.uniform;
+		const sdfOutside = max(sdf, float(0));
+		const innerGlowFalloff = float(12).div(glowR);
+		const innerGlow = exp(sdfOutside.negate().mul(innerGlowFalloff)).mul(float(.7));
+		const outerGlowFalloff = float(4).div(glowR);
+		const outerGlow = exp(sdfOutside.negate().mul(outerGlowFalloff)).mul(float(.35));
+		const totalGlow = innerGlow.add(outerGlow).mul(glowI);
+		const outsideFactor = smoothstep(float(-.003), float(.003), sdf);
+		const glowMasked = totalGlow.mul(outsideFactor);
+		const glowCol = vec3(uniforms.glowColor.uniform.x, uniforms.glowColor.uniform.y, uniforms.glowColor.uniform.z);
+		const flickerTime = timeNode.mul(uniforms.flickerSpeed.uniform);
+		const f1 = sin(flickerTime.mul(float(17.13)));
+		const f2 = sin(flickerTime.mul(float(31.71)));
+		const f3 = sin(flickerTime.mul(float(47.29)));
+		const combined = f1.add(f2.mul(float(.5))).add(f3.mul(float(.3)));
+		const threshold = mix(float(-2), float(.8), uniforms.flickerAmount.uniform);
+		const flickerValue = smoothstep(threshold.sub(float(.1)), threshold.add(float(.1)), combined);
+		const intensityMul = uniforms.intensity.uniform.mul(flickerValue);
+		const finalTubeRgb = tubeFlowed.mul(intensityMul);
+		const finalGlowRgb = glowCol.mul(glowMasked).mul(intensityMul);
+		return vec4(mix(finalGlowRgb.x, finalTubeRgb.x, tubeMask), mix(finalGlowRgb.y, finalTubeRgb.y, tubeMask), mix(finalGlowRgb.z, finalTubeRgb.z, tubeMask), max(tubeMask, clamp(glowMasked.mul(float(.6)), float(0), float(1))));
+	})();
+}
+var DEFAULT_SHAPE_CONFIG = JSON.stringify({
+	type: "circleSDF",
+	radius: .35
+});
+const componentDefinition = {
+	name: "Neon",
+	category: "Shape Effects",
+	description: "Photorealistic neon tube / 3D pipe effect driven by a custom shape",
+	props: {
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Center position of the neon shape",
+			ui: {
+				type: "position",
+				label: "Center",
+				group: "Position"
+			}
+		},
+		scale: {
+			default: 1,
+			description: "Scale of the neon shape (1 = default size)",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 3,
+				step: .05,
+				label: "Scale",
+				group: "Position"
+			}
+		},
+		color: {
+			default: "#00ddff",
+			transform: transformColor,
+			description: "Primary neon tube color",
+			ui: {
+				type: "color",
+				label: "Tube Color",
+				group: "Colors"
+			}
+		},
+		secondaryColor: {
+			default: "#ff00aa",
+			transform: transformColor,
+			description: "Shadow-side color for a two-tone / dual-lit pipe look",
+			ui: {
+				type: "color",
+				label: "Secondary Color",
+				group: "Colors"
+			}
+		},
+		secondaryBlend: {
+			default: .5,
+			description: "Blend between mono (0) and two-tone (1) tube coloring",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Blend",
+				group: "Colors"
+			}
+		},
+		glowColor: {
+			default: "#00ddff",
+			transform: transformColor,
+			description: "Color of the outer glow / bloom",
+			ui: {
+				type: "color",
+				label: "Glow Color",
+				group: "Colors"
+			}
+		},
+		tubeThickness: {
+			default: .2,
+			transform: (v) => v * .05,
+			description: "How far inward from the boundary the tube extends. Low = thin neon outline, high = thick 3D pipe",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Tube Thickness",
+				group: "Tube"
+			}
+		},
+		intensity: {
+			default: 1.5,
+			description: "Overall brightness multiplier",
+			ui: {
+				type: "range",
+				min: .5,
+				max: 4,
+				step: .05,
+				label: "Intensity",
+				group: "Tube"
+			}
+		},
+		hotCoreIntensity: {
+			default: .6,
+			description: "Bright white-hot center line — the gas discharge glow inside the tube",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Hot Core",
+				group: "Tube"
+			}
+		},
+		glowIntensity: {
+			default: .6,
+			description: "Outer glow / bloom strength",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 2,
+				step: .05,
+				label: "Glow Intensity",
+				group: "Glow"
+			}
+		},
+		glowRadius: {
+			default: .25,
+			description: "How far the glow extends beyond the tube",
+			ui: {
+				type: "range",
+				min: .01,
+				max: 1,
+				step: .01,
+				label: "Glow Radius",
+				group: "Glow"
+			}
+		},
+		lightAngle: {
+			default: 300,
+			description: "Directional light angle in degrees — controls 3D shading on the tube",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Light Angle",
+				group: "Lighting"
+			}
+		},
+		specularIntensity: {
+			default: .5,
+			description: "Specular highlight brightness on the tube surface",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 2,
+				step: .05,
+				label: "Specular",
+				group: "Lighting"
+			}
+		},
+		specularSize: {
+			default: .5,
+			description: "Specular highlight size — 0 = tight pinpoint, 1 = broad sheen",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Specular Size",
+				group: "Lighting"
+			}
+		},
+		cornerSmoothing: {
+			default: .15,
+			description: "Rounds sharp corners to mimic how real glass tubes curve at bends",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Corner Smoothing",
+				group: "Tube"
+			}
+		},
+		flickerSpeed: {
+			default: 0,
+			description: "Flicker animation speed — 0 = off, higher = faster sporadic on/off",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 5,
+				step: .1,
+				label: "Speed",
+				group: "Flicker"
+			}
+		},
+		flickerAmount: {
+			default: .2,
+			description: "How often the neon flickers off — 0 = always on, 1 = frequent outages",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Amount",
+				group: "Flicker"
+			}
+		},
+		flowSpeed: {
+			default: 0,
+			description: "Flow animation speed — 0 = off, light rotates through the tube",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 5,
+				step: .1,
+				label: "Speed",
+				group: "Flow"
+			}
+		},
+		flowAmount: {
+			default: .3,
+			description: "Strength of the flowing brightness variation — 0 = uniform, 1 = dramatic",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Amount",
+				group: "Flow"
+			}
+		},
+		shape: {
+			default: DEFAULT_SHAPE_CONFIG,
+			description: "Serialized shape configuration (JSON)",
+			ui: {
+				type: "shape",
+				label: "Shape",
+				group: "Shape"
+			}
+		},
+		shapeSdfUrl: {
+			default: "",
+			compileTime: true,
+			description: "URL to a pre-generated SDF .bin file — when non-empty, activates SVG mode and triggers a shader recompile"
+		}
+	},
+	fragmentNode: ({ uniforms, onCleanup, onBeforeRender }) => {
+		const timeU = uniform(0);
+		onBeforeRender(({ deltaTime }) => {
+			timeU.value += deltaTime;
+		});
+		const shapeSdfUrl = uniforms.shapeSdfUrl.uniform.value;
+		const initialConfig = (() => {
+			try {
+				return JSON.parse(uniforms.shape.uniform.value);
+			} catch {
+				return {
+					type: "circleSDF",
+					radius: .35,
+					centerX: .5,
+					centerY: .5
+				};
+			}
+		})();
+		if (shapeSdfUrl) return applyNeonEffect(createSvgSdfSampler(shapeSdfUrl, onBeforeRender, onCleanup), uniforms, timeU);
+		else {
+			const SHAPE_MODES = {
+				circleSDF: 0,
+				polygonSDF: 1,
+				flowerSDF: 2,
+				ringSDF: 3,
+				crossSDF: 4,
+				starSDF: 5,
+				roundedRectSDF: 6,
+				ellipseSDF: 7,
+				vesicaSDF: 8,
+				crescentSDF: 9,
+				trapezoidSDF: 10
+			};
+			const radiusU = uniform(initialConfig.radius ?? .35);
+			const sidesU = uniform(initialConfig.sides ?? 6);
+			const roundingU = uniform(initialConfig.rounding ?? 0);
+			const innerRatioU = uniform(initialConfig.innerRatio ?? initialConfig.thickness ?? .4);
+			const rotationU = uniform(initialConfig.rotation ?? 0);
+			const heightU = uniform(initialConfig.height ?? .25);
+			const offsetU = uniform(initialConfig.offset ?? .2);
+			const shapeModeU = uniform(SHAPE_MODES[initialConfig.type] ?? 0);
+			onBeforeRender(() => {
+				try {
+					const cfg = JSON.parse(uniforms.shape.uniform.value);
+					radiusU.value = cfg.radius ?? cfg.width ?? cfg.bottomWidth ?? .35;
+					sidesU.value = cfg.sides ?? 6;
+					roundingU.value = cfg.rounding ?? 0;
+					innerRatioU.value = cfg.innerRatio ?? cfg.thickness ?? cfg.spread ?? cfg.topWidth ?? cfg.topRatio ?? .4;
+					rotationU.value = cfg.rotation ?? 0;
+					heightU.value = cfg.height ?? .25;
+					offsetU.value = cfg.offset ?? .2;
+					shapeModeU.value = SHAPE_MODES[cfg.type] ?? 0;
+				} catch {}
+			});
+			const sdfSampler = (uv$1) => {
+				const dx = uv$1.x.sub(float(.5));
+				const dy = uv$1.y.sub(float(.5));
+				const rotRad = rotationU.mul(float(Math.PI / 180));
+				const cosR = cos(rotRad);
+				const sinR = sin(rotRad);
+				const rdx = dx.mul(cosR).add(dy.mul(sinR));
+				const rdy = dy.mul(cosR).sub(dx.mul(sinR));
+				const circle = circleSdf(dx, dy, radiusU);
+				const polygon = mix(polygonSdf(rdx, rdy, radiusU, sidesU), circle, roundingU);
+				const flower = flowerSdf(rdx, rdy, radiusU, sidesU, innerRatioU);
+				const ring = ringSdf(dx, dy, radiusU, innerRatioU);
+				const cross = crossSdf(rdx, rdy, radiusU, innerRatioU, roundingU);
+				const star = starSdf(rdx, rdy, radiusU, sidesU, innerRatioU);
+				const roundedRect = roundedRectSdf(rdx, rdy, radiusU, heightU, roundingU);
+				const ellipse = ellipseSdf(rdx, rdy, radiusU, heightU);
+				const vesica = vesicaSdf(rdx, rdy, radiusU, innerRatioU);
+				const crescent = crescentSdf(rdx, rdy, radiusU, innerRatioU, offsetU);
+				const trapezoid = trapezoidSdf(rdx, rdy, innerRatioU, radiusU, heightU);
+				const m = shapeModeU;
+				return vec4(m.lessThan(float(.5)).select(circle, m.lessThan(float(1.5)).select(polygon, m.lessThan(float(2.5)).select(flower, m.lessThan(float(3.5)).select(ring, m.lessThan(float(4.5)).select(cross, m.lessThan(float(5.5)).select(star, m.lessThan(float(6.5)).select(roundedRect, m.lessThan(float(7.5)).select(ellipse, m.lessThan(float(8.5)).select(vesica, m.lessThan(float(9.5)).select(crescent, trapezoid)))))))))), float(0), float(0), float(1));
+			};
+			return applyNeonEffect(sdfSampler, uniforms, timeU);
+		}
+	}
+};
+var Neon_default = componentDefinition;
+export { componentDefinition as n, Neon_default as t };

package/dist/core/Paper-C2D-Fwp3.js

@@ -0,0 +1,93 @@
+import { abs, clamp, convertToTexture, float, mx_noise_float, screenUV, vec2, vec3, vec4, viewportSize } from "three/tsl";
+const componentDefinition = {
+	name: "Paper",
+	category: "Stylize",
+	description: "Applies realistic paper grain and surface roughness to child content",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		roughness: {
+			default: .3,
+			description: "Surface roughness — higher values create more pronounced brightness variation",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Roughness",
+				group: "Texture"
+			}
+		},
+		grainScale: {
+			default: 1,
+			description: "Scale of the paper grain — lower = coarser, higher = finer",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 3,
+				step: .05,
+				label: "Grain Scale",
+				group: "Texture"
+			}
+		},
+		displacement: {
+			default: .15,
+			description: "Surface micro-roughness — shifts pixels at grain scale like real paper fiber bumps",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Displacement",
+				group: "Texture"
+			}
+		},
+		seed: {
+			default: 0,
+			description: "Random seed for pattern variation",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				label: "Seed",
+				group: "Texture"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, childNode, onCleanup }) => {
+		if (!childNode) return vec4(0);
+		const childTexture = convertToTexture(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const uv$1 = screenUV;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const aspectUV = vec2(uv$1.x.mul(aspect), uv$1.y);
+		const seedOffset = uniforms.seed.uniform;
+		const grainFreq = uniforms.grainScale.uniform.mul(float(120)).add(float(120));
+		const warpFreq = grainFreq.mul(float(.25));
+		const warpPos = aspectUV.mul(warpFreq).add(seedOffset.add(float(50)));
+		const warpX = mx_noise_float(vec3(warpPos.x, warpPos.y, float(22.3)));
+		const warpY = mx_noise_float(vec3(warpPos.x, warpPos.y, float(29.7)));
+		const dispAmt = uniforms.displacement.uniform.mul(float(.002));
+		const displacedUV = uv$1.add(vec2(warpX.mul(dispAmt), warpY.mul(dispAmt)));
+		const childColor = childTexture.sample(displacedUV);
+		const grainUV = vec2(displacedUV.x.mul(aspect), displacedUV.y).add(vec2(warpX.mul(float(.005)), warpY.mul(float(.005))));
+		const p1 = grainUV.mul(grainFreq.mul(float(.1))).add(seedOffset);
+		const n1 = mx_noise_float(vec3(p1.x, p1.y, float(1.3)));
+		const p2 = grainUV.mul(grainFreq.mul(float(.4))).add(seedOffset.add(float(33.7)));
+		const n2 = abs(mx_noise_float(vec3(p2.x, p2.y, float(4.1))));
+		const p3 = grainUV.mul(grainFreq).add(seedOffset.add(float(71.2)));
+		const n3 = mx_noise_float(vec3(p3.x, p3.y, float(9.8)));
+		const p4 = grainUV.mul(grainFreq.mul(float(2))).add(seedOffset.add(float(107.3)));
+		const n4 = mx_noise_float(vec3(p4.x, p4.y, float(15.6)));
+		const grain = n1.mul(float(.3)).add(n2.mul(float(.3))).add(n3.mul(float(.25))).add(n4.mul(float(.15)));
+		const rough = uniforms.roughness.uniform;
+		const brightness = clamp(float(1).add(grain.mul(rough.mul(float(.4)))), float(0), float(1.5));
+		const finalRgb = vec3(childColor.r, childColor.g, childColor.b).mul(brightness);
+		return vec4(finalRgb.x, finalRgb.y, finalRgb.z, childColor.a);
+	}
+};
+var Paper_default = componentDefinition;
+export { componentDefinition as n, Paper_default as t };

package/dist/core/Pixelate-CTjHHN-r.js

@@ -0,0 +1,68 @@
+import { t as unpremultiplyAlpha } from "./alpha-C4ptedXe.js";
+import { convertToTexture, float, floor, fract, length, screenUV, vec2, vec4, viewportSize } from "three/tsl";
+const componentDefinition = {
+	name: "Pixelate",
+	category: "Stylize",
+	description: "Pixelation effect with adjustable cell size",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		scale: {
+			default: 50,
+			description: "Number of pixels along the longest edge (higher = smaller pixels)",
+			ui: {
+				type: ["range", "map"],
+				min: 1,
+				max: 200,
+				step: 1,
+				label: "Scale",
+				group: "Effect"
+			}
+		},
+		gap: {
+			default: 0,
+			description: "Space between pixels as a fraction of cell size (0 = no gap, 1 = fully invisible)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: .95,
+				step: .01,
+				label: "Gap",
+				group: "Effect"
+			}
+		},
+		roundness: {
+			default: 0,
+			description: "Roundness of each pixel's corners (0 = square, 1 = circle)",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Roundness",
+				group: "Effect"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, childNode, onCleanup }) => {
+		if (!childNode) return vec4(0, 0, 0, 0);
+		const childTexture = convertToTexture(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const pixelSize = uniforms.scale.uniform;
+		const isWide = aspect.greaterThan(float(1));
+		const pixelCountX = isWide.select(pixelSize, pixelSize.mul(aspect)).max(float(1));
+		const pixelCountY = isWide.select(pixelSize.div(aspect), pixelSize).max(float(1));
+		const pixelatedUV = vec2(floor(screenUV.x.mul(pixelCountX)).div(pixelCountX), floor(screenUV.y.mul(pixelCountY)).div(pixelCountY));
+		const sampledColor = unpremultiplyAlpha(childTexture.sample(pixelatedUV));
+		const localUV = vec2(fract(screenUV.x.mul(pixelCountX)).sub(.5), fract(screenUV.y.mul(pixelCountY)).sub(.5));
+		const halfSize = float(.5).sub(uniforms.gap.uniform.mul(.5));
+		const cornerRadius = uniforms.roundness.uniform.mul(halfSize);
+		const mask = length(vec2(localUV.x.abs().sub(halfSize).add(cornerRadius).max(float(0)), localUV.y.abs().sub(halfSize).add(cornerRadius).max(float(0)))).sub(cornerRadius).lessThanEqual(float(0)).select(float(1), float(0));
+		return vec4(sampledColor.rgb, sampledColor.a.mul(mask));
+	}
+};
+var Pixelate_default = componentDefinition;
+export { componentDefinition as n, Pixelate_default as t };