shaders 2.3.75 → 2.4.77

package/dist/core/Glass-CRaFJ-8c.js

@@ -0,0 +1,421 @@
+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, clamp, convertToTexture, cos, dot, exp2, float, max, mix, pow, screenUV, sin, smoothstep, sqrt, uniform, vec2, vec3, vec4, viewportSize } from "three/tsl";
+var GOLDEN_ANGLE = 2.3999632297286535;
+var BLUR_SAMPLE_COUNT = 13;
+const BLUR_DISK = [];
+for (let i = 0; i < BLUR_SAMPLE_COUNT; i++) {
+	const angle = i * GOLDEN_ANGLE;
+	const r = Math.sqrt(i / BLUR_SAMPLE_COUNT);
+	BLUR_DISK.push([Math.cos(angle) * r, Math.sin(angle) * r]);
+}
+var INV_HLEN_GLASS = 1 / Math.sqrt(5);
+function applyGlassEffect(childTexture, sdfSampler, uniforms) {
+	return Fn(() => {
+		const uv$1 = screenUV;
+		const aspect = viewportSize.x.div(viewportSize.y);
+		const sharp = uniforms.edgeSoftness.uniform.mul(float(.5)).max(float(.001));
+		const pixelSize = vec2(1).div(viewportSize);
+		const pxH = float(1).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 sdfRaw = sdfSampler(sdfUV).r;
+		const sdf = sdfRaw.div(scale);
+		const EPS = float(.01);
+		const gradX = sdfSampler(sdfUV.add(vec2(EPS, float(0)))).r.sub(sdfRaw).div(EPS);
+		const gradY = sdfSampler(sdfUV.add(vec2(float(0), EPS))).r.sub(sdfRaw).div(EPS);
+		const rb1 = clamp(sdf.negate().div(sharp).mul(float(32)), float(0), float(1));
+		const rb2base = clamp(sdf.sub(pxH).negate().div(sharp).mul(float(16)), float(0), float(1)).sub(clamp(sdf.negate().div(sharp).mul(float(16)), float(0), float(1)));
+		const lightRad = uniforms.lightAngle.uniform.mul(float(Math.PI / 180));
+		const lx = cos(lightRad);
+		const ly = sin(lightRad);
+		const lightFacing = gradX.mul(lx).add(gradY.mul(ly)).mul(float(.5)).add(float(.5));
+		const rb2 = rb2base.mul(lightFacing).mul(uniforms.highlight.uniform);
+		const thicknessRange = uniforms.thickness.uniform.mul(float(.3)).max(float(.005));
+		const depthNorm = clamp(sdf.negate().div(thicknessRange), float(0), float(1));
+		const refrStrength = float(1).sub(depthNorm).mul(float(1).sub(depthNorm));
+		const refrScale = uniforms.refraction.uniform.mul(float(.15));
+		const offsetX = gradX.negate().mul(refrScale).mul(refrStrength).div(aspect);
+		const offsetY = gradY.negate().mul(refrScale).mul(refrStrength);
+		const lensUV = centerPos.add(uv$1.sub(centerPos).div(uniforms.innerZoom.uniform)).add(vec2(offsetX, offsetY));
+		const chrScale = uniforms.aberration.uniform.mul(float(.06));
+		const chrOffX = offsetX.mul(chrScale);
+		const chrOffY = offsetY.mul(chrScale);
+		const rUV = lensUV.add(vec2(chrOffX, chrOffY));
+		const bUV = lensUV.sub(vec2(chrOffX, chrOffY));
+		const accR = vec4(0).toVar();
+		const accG = vec4(0).toVar();
+		const accB = vec4(0).toVar();
+		for (const [ox, oy] of BLUR_DISK) {
+			const blurOff = pixelSize.mul(vec2(float(ox), float(oy))).mul(uniforms.blur.uniform.mul(2));
+			accR.assign(accR.add(childTexture.sample(rUV.add(blurOff))));
+			accG.assign(accG.add(childTexture.sample(lensUV.add(blurOff))));
+			accB.assign(accB.add(childTexture.sample(bUV.add(blurOff))));
+		}
+		const samplesInv = float(1 / BLUR_SAMPLE_COUNT);
+		const rVal = accR.mul(samplesInv).r;
+		const gVal = accG.mul(samplesInv).g;
+		const bVal = accB.mul(samplesInv).b;
+		const aVal = accG.mul(samplesInv).a;
+		const blurred = vec4(rVal, gVal, bVal, aVal);
+		const tintCol = vec3(uniforms.tintColor.uniform.x, uniforms.tintColor.uniform.y, uniforms.tintColor.uniform.z);
+		const tintAmt = uniforms.tintIntensity.uniform;
+		const blurredRgb = vec3(blurred.r, blurred.g, blurred.b);
+		const lumWeights = vec3(.299, .587, .114);
+		const origLum = dot(blurredRgb, lumWeights);
+		const tinted = mix(blurredRgb, tintCol, tintAmt);
+		const tintedLum = dot(tinted, lumWeights);
+		const lumPreserved = tinted.mul(origLum.div(max(tintedLum, float(1e-4))));
+		const tintedGlass = vec4(uniforms.tintPreserveLuminosity.uniform.equal(float(1)).select(lumPreserved, tinted), blurred.a);
+		const nz = float(2);
+		const nLen = sqrt(gradX.mul(gradX).add(gradY.mul(gradY)).add(nz.mul(nz)));
+		const nx = gradX.div(nLen);
+		const ny = gradY.div(nLen);
+		const nnz = nz.div(nLen);
+		const nDotH = nx.mul(lx.mul(float(INV_HLEN_GLASS))).add(ny.mul(ly.mul(float(INV_HLEN_GLASS)))).add(nnz.mul(float(2 * INV_HLEN_GLASS)));
+		const shininess = exp2(float(8).sub(uniforms.highlightSoftness.uniform.mul(float(7))));
+		const specGlint = pow(clamp(nDotH, float(0), float(1)), shininess).mul(uniforms.highlight.uniform).mul(refrStrength);
+		const fresnelWidth = uniforms.fresnelSoftness.uniform.mul(float(.06)).max(float(.001));
+		const fresnelDepth = clamp(sdf.negate().div(fresnelWidth), float(0), float(1));
+		const fresnelRim = float(1).sub(fresnelDepth).mul(float(1).sub(fresnelDepth)).mul(uniforms.fresnel.uniform).mul(rb1);
+		const hlCol = uniforms.highlightColor.uniform;
+		const frCol = uniforms.fresnelColor.uniform;
+		const lighting = tintedGlass.add(vec4(hlCol.x.mul(rb2), hlCol.y.mul(rb2), hlCol.z.mul(rb2), rb2)).add(vec4(hlCol.x.mul(specGlint), hlCol.y.mul(specGlint), hlCol.z.mul(specGlint), float(0))).add(vec4(frCol.x.mul(fresnelRim), frCol.y.mul(fresnelRim), frCol.z.mul(fresnelRim), float(0)));
+		const transition = smoothstep(float(0), float(1), rb1);
+		const isCutout = uniforms.cutout.uniform.equal(float(1));
+		const composited = mix(childTexture.sample(uv$1), lighting, transition);
+		const cutoutAlpha = isCutout.select(transition, float(1));
+		return vec4(composited.r, composited.g, composited.b, composited.a.mul(cutoutAlpha));
+	})();
+}
+var transformBoolean = (value) => value ? 1 : 0;
+var DEFAULT_SHAPE_CONFIG = JSON.stringify({
+	type: "circleSDF",
+	radius: .35
+});
+const componentDefinition = {
+	name: "Glass",
+	category: "Shape Effects",
+	description: "Optically realistic glass lens driven in a custom shape",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Center position of the glass shape",
+			ui: {
+				type: "position",
+				label: "Center",
+				group: "Position"
+			}
+		},
+		scale: {
+			default: 1,
+			description: "Scale of the glass shape (1 = default size)",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 3,
+				step: .05,
+				label: "Scale",
+				group: "Position"
+			}
+		},
+		cutout: {
+			default: false,
+			description: "Cut out the alpha outside the glass shape",
+			transform: transformBoolean,
+			ui: {
+				type: "checkbox",
+				label: "Cutout",
+				group: "Glass"
+			}
+		},
+		refraction: {
+			default: 1,
+			description: "Lens refraction — how aggressively the edges warp content beneath (0 = none, 1 = max)",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 2,
+				step: .01,
+				label: "Refraction",
+				group: "Glass"
+			}
+		},
+		edgeSoftness: {
+			default: .1,
+			description: "Edge softness — higher values give a wider, softer fade at the glass boundary",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .05,
+				label: "Edge Softness",
+				group: "Glass"
+			}
+		},
+		blur: {
+			default: 0,
+			description: "Frosted blur amount — 0 = clear glass, higher = frosted/diffuse",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 20,
+				step: .1,
+				label: "Blur",
+				group: "Glass"
+			}
+		},
+		thickness: {
+			default: .2,
+			transform: (v) => v * .5,
+			description: "Glass depth — how far inward from the edge the refraction extends",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Thickness",
+				group: "Glass"
+			}
+		},
+		aberration: {
+			default: .5,
+			description: "Chromatic aberration — splits RGB channels along the refraction vector",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Aberration",
+				group: "Glass"
+			}
+		},
+		innerZoom: {
+			default: 1,
+			description: "Inner zoom level — magnifies content seen through the glass",
+			ui: {
+				type: "range",
+				min: .5,
+				max: 3,
+				step: .05,
+				label: "Inner Zoom",
+				group: "Glass"
+			}
+		},
+		lightAngle: {
+			default: 300,
+			description: "Light angle in degrees",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Light Angle",
+				group: "Highlight"
+			}
+		},
+		highlight: {
+			default: .05,
+			description: "Directional edge highlight — bright rim on the light-facing boundary",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 2,
+				step: .05,
+				label: "Highlight",
+				group: "Highlight"
+			}
+		},
+		highlightColor: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Color of the directional edge highlight and specular glint",
+			ui: {
+				type: "color",
+				label: "Highlight Color",
+				group: "Highlight"
+			}
+		},
+		highlightSoftness: {
+			default: .5,
+			description: "Specular highlight softness",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Highlight Softness",
+				group: "Highlight"
+			}
+		},
+		fresnel: {
+			default: .1,
+			description: "Fresnel rim glow — a soft luminous halo around the glass boundary",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Fresnel",
+				group: "Fresnel"
+			}
+		},
+		fresnelSoftness: {
+			default: .1,
+			description: "Fresnel rim width — higher values spread the glow further inward",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Fresnel Softness",
+				group: "Fresnel"
+			}
+		},
+		fresnelColor: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Color of the fresnel rim glow",
+			ui: {
+				type: "color",
+				label: "Fresnel Color",
+				group: "Fresnel"
+			}
+		},
+		tintColor: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Color tint applied to the internal directional gradient",
+			ui: {
+				type: "color",
+				label: "Tint Color",
+				group: "Tint"
+			}
+		},
+		tintIntensity: {
+			default: 0,
+			description: "Intensity of the color tint applied to the glass interior",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Tint Intensity",
+				group: "Tint"
+			}
+		},
+		tintPreserveLuminosity: {
+			default: true,
+			transform: transformBoolean,
+			description: "Preserve original brightness when tinting",
+			ui: {
+				type: "checkbox",
+				label: "Preserve Luminosity",
+				group: "Tint"
+			}
+		},
+		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, childNode, onCleanup, onBeforeRender }) => {
+		if (!childNode) return vec4(0);
+		const childTexture = convertToTexture(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		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 applyGlassEffect(childTexture, createSvgSdfSampler(shapeSdfUrl, onBeforeRender, onCleanup), uniforms);
+		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 applyGlassEffect(childTexture, sdfSampler, uniforms);
+		}
+	}
+};
+var Glass_default = componentDefinition;
+export { componentDefinition as n, Glass_default as t };

package/dist/core/{ImageTexture-6e1Gz4IG.js → ImageTexture-BJ1udc62.js}

@@ -66,9 +66,60 @@ const componentDefinition = {
 		const imageAspectUniform = uniform(1);
 		const imageWidthUniform = uniform(0);
 		const imageHeightUniform = uniform(0);
+		const SVG_RASTER_SIZE = 2048;
+		function isSvgUrl(url) {
+			return /\.svg($|\?|#)/i.test(url);
+		}
+		function rasterizeSvg(url) {
+			return new Promise((resolve, reject) => {
+				const img = new Image();
+				img.crossOrigin = "anonymous";
+				img.onload = () => {
+					const aspect = (img.naturalWidth || SVG_RASTER_SIZE) / (img.naturalHeight || SVG_RASTER_SIZE);
+					const canvasW = aspect >= 1 ? SVG_RASTER_SIZE : Math.round(SVG_RASTER_SIZE * aspect);
+					const canvasH = aspect >= 1 ? Math.round(SVG_RASTER_SIZE / aspect) : SVG_RASTER_SIZE;
+					const canvas = document.createElement("canvas");
+					canvas.width = canvasW;
+					canvas.height = canvasH;
+					const ctx = canvas.getContext("2d");
+					if (!ctx) {
+						reject(/* @__PURE__ */ new Error("Could not get 2D context"));
+						return;
+					}
+					ctx.drawImage(img, 0, 0, canvasW, canvasH);
+					resolve({
+						canvas,
+						width: canvasW,
+						height: canvasH
+					});
+				};
+				img.onerror = reject;
+				img.src = url;
+			});
+		}
 		const loadImage = (url) => {
 			if (!url || url.trim() === "" || isLoading) return;
 			isLoading = true;
+			if (isSvgUrl(url)) {
+				rasterizeSvg(url).then(({ canvas, width, height }) => {
+					const newAspect = width / height;
+					currentUrl = url;
+					requestAnimationFrame(() => {
+						placeholderTexture.dispose();
+						imageAspectUniform.value = newAspect;
+						imageWidthUniform.value = width;
+						imageHeightUniform.value = height;
+						placeholderTexture.image = canvas;
+						placeholderTexture.colorSpace = SRGBColorSpace;
+						placeholderTexture.needsUpdate = true;
+					});
+					isLoading = false;
+				}).catch((error) => {
+					console.error(`[ImageTexture] Failed to rasterize SVG: ${url}`, error);
+					isLoading = false;
+				});
+				return;
+			}
 			try {
 				let resolvedUrl = url;
 				try {