shaders 3.0.453 → 3.1.455

package/dist/core/{SunBurst-D5p0QAnh.js → SunBurst-DiqSzz5A.js}

@@ -1,6 +1,8 @@
-import { Bt as sin, Ht as sqrt, Pt as pow, Vt as smoothstep, b as vec4, it as std_exports, ln as f32, m as call, nt as src_default, rn as vec2f, y as mixExpr, yt as atan2 } from "./edges-B7Yet3LV.js";
-import { t as animatedTime } from "./porters-D_xmIPz2.js";
-import { a as transformColor, c as transformPosition } from "./transformations-C7gn_5rF.js";
+import { Ht as sqrt, Vt as smoothstep, at as std_exports, b as mixExpr, h as call, rn as vec2f, rt as src_default, un as f32, x as vec4, yt as atan2 } from "./edges-CD7gCAto.js";
+import { r as geom_exports, t as aspectOf } from "./geom-90G-d_hc.js";
+import { n as angularSineLobes, o as lightfields_exports } from "./lightfields-ffHoLyJn.js";
+import { t as animatedTime } from "./porters-DUtQounc.js";
+import { a as transformColor, c as transformPosition } from "./transformations-B-zNWNdd.js";
 const sunBurstAlpha = src_default.fn([
 	vec2f,
 	vec2f,
@@ -12,14 +14,15 @@ const sunBurstAlpha = src_default.fn([
 	f32
 ], f32)(/* @__PURE__ */ (($) => (globalThis.__TYPEGPU_META__ ??= /* @__PURE__ */ new WeakMap()).set($.f = ((uv, viewport, center, rayCount, softness, radius, feather, animTime) => {
 	"use gpu";
-	const aspect = __tsover_div(viewport.x, viewport.y);
+	const aspect = aspectOf(viewport);
 	const cx = center.x;
 	const cy = __tsover_sub(1, center.y);
 	const dx = __tsover_sub(__tsover_mul(uv.x, aspect), __tsover_mul(cx, aspect));
 	const dy = __tsover_sub(uv.y, cy);
 	const dist = sqrt(__tsover_add(__tsover_mul(dx, dx), __tsover_mul(dy, dy)));
 	const angle = atan2(dy, dx);
-	const rayMask = pow(__tsover_add(__tsover_mul(sin(__tsover_sub(__tsover_mul(angle, rayCount), animTime)), .5), .5), __tsover_mul(__tsover_div(1, __tsover_add(softness, .05)), .3));
+	const sharpness = __tsover_mul(__tsover_div(1, __tsover_add(softness, .05)), .3);
+	const rayMask = angularSineLobes(angle, rayCount, -animTime, sharpness);
 	const falloffStart = __tsover_mul(radius, __tsover_sub(1, feather));
 	const outerMask = __tsover_sub(1, smoothstep(falloffStart, radius, dist));
 	return __tsover_mul(rayMask, outerMask);
@@ -66,18 +69,13 @@ const sunBurstAlpha = src_default.fn([
 				13,
 				"aspect",
 				[
-					1,
+					6,
 					[
 						7,
-						"viewport",
-						"x"
+						"geom",
+						"aspectOf"
 					],
-					"/",
-					[
-						7,
-						"viewport",
-						"y"
-					]
+					["viewport"]
 				]
 			],
 			[
@@ -182,39 +180,6 @@ const sunBurstAlpha = src_default.fn([
 					["dy", "dx"]
 				]
 			],
-			[
-				13,
-				"t",
-				[
-					1,
-					[
-						1,
-						[
-							6,
-							[
-								7,
-								"std",
-								"sin"
-							],
-							[[
-								1,
-								[
-									1,
-									"angle",
-									"*",
-									"rayCount"
-								],
-								"-",
-								"animTime"
-							]]
-						],
-						"*",
-						[5, "0.5"]
-					],
-					"+",
-					[5, "0.5"]
-				]
-			],
 			[
 				13,
 				"sharpness",
@@ -242,10 +207,19 @@ const sunBurstAlpha = src_default.fn([
 					6,
 					[
 						7,
-						"std",
-						"pow"
+						"lightfields",
+						"angularSineLobes"
 					],
-					["t", "sharpness"]
+					[
+						"angle",
+						"rayCount",
+						[
+							4,
+							"-",
+							"animTime"
+						],
+						"sharpness"
+					]
 				]
 			],
 			[
@@ -292,9 +266,17 @@ const sunBurstAlpha = src_default.fn([
 				"outerMask"
 			]]
 		]],
-		"externalNames": ["std"]
+		"externalNames": [
+			"geom",
+			"std",
+			"lightfields"
+		]
 	},
-	externals: () => ({ std: std_exports })
+	externals: () => ({
+		geom: geom_exports,
+		std: std_exports,
+		lightfields: lightfields_exports
+	})
 }) && $.f)({}));
 const componentDefinition = {
 	name: "SunBurst",

package/dist/core/{Surface3D-HSAAGomd.js → Surface3D-DxzfMHn2.js}

@@ -1,8 +1,8 @@
-import { At as max, Bt as sin, Dt as floor, Et as exp2, F as unpremultiplyAlpha, Gt as data_exports, Mt as mix, Nt as normalize, Pt as pow, St as cos, Tt as exp, Vt as smoothstep, Yt as textureStorage2d, _t as abs, an as vec2u, b as vec4, cn as vec4f, ct as textureStore, d as ZERO, dn as u32, en as struct, gt as select, i as edgeMirrorUV, it as std_exports, jt as min, ln as f32, m as call, nt as src_default, o as edgeWrapUV, on as vec3f, qt as arrayOf, rn as vec2f, s as edges_exports, wt as dot, xt as clamp } from "./edges-B7Yet3LV.js";
-import { p as noise_exports, u as mxNoiseFloat2 } from "./noise-B-PI7JUx.js";
-import { n as createGuardedCompute, r as createStateBuffer } from "./compute-Ax-p6Ubc.js";
-import { t as isMobileGpuViewport } from "./device-BODv_4aH.js";
-import { a as transformColor, s as transformEdges } from "./transformations-C7gn_5rF.js";
+import { At as max, Bt as sin, Dt as floor, Et as exp2, Gt as data_exports, I as unpremultiplyAlpha, Mt as mix, Nt as normalize, Pt as pow, St as cos, Tt as exp, Vt as smoothstep, Yt as textureStorage2d, _t as abs, an as vec2u, at as std_exports, cn as vec4f, en as struct, f as ZERO, fn as u32, gt as select, h as call, i as edgeMirrorUV, jt as min, lt as textureStore, o as edgeWrapUV, on as vec3f, qt as arrayOf, rn as vec2f, rt as src_default, s as edges_exports, un as f32, wt as dot, x as vec4, xt as clamp } from "./edges-CD7gCAto.js";
+import { s as TWO_PI$1, t as DEG_TO_RAD$1 } from "./constants-DoOzbl5b.js";
+import { p as noise_exports, u as mxNoiseFloat2 } from "./noise-Bd6IGS0W.js";
+import { M as createGuardedCompute, N as createPingPongPair, P as createStateBuffer, t as isMobileGpuViewport } from "./device-B0ZwBfOg.js";
+import { a as transformColor, s as transformEdges } from "./transformations-B-zNWNdd.js";
 var WAVE_GRID = 256;
 var WAVE_CELLS = WAVE_GRID * WAVE_GRID;
 var WAVE_MAX = WAVE_GRID - 1;
@@ -20,8 +20,8 @@ var WAVE_DECAY_PER_STEP = .004;
 var WAVE_DAMP = 1 - WAVE_DECAY * WAVE_DECAY_PER_STEP;
 var WAVE_SETTLE_MS = WAVE_DAMP >= 1 ? Infinity : Math.min(3e4, Math.log(1e-6) / Math.log(Math.max(WAVE_DAMP, .001)) * 16.67);
 var STATE_FORMAT = "rgba16float";
-var DEG_TO_RAD = Math.PI / 180;
-var TWO_PI = Math.PI * 2;
+var DEG_TO_RAD = DEG_TO_RAD$1;
+var TWO_PI = TWO_PI$1;
 var S3Params = /* @__PURE__ */ (globalThis.__TYPEGPU_AUTONAME__ ?? ((a) => a))(struct({
 	amp: f32,
 	freq: f32,
@@ -5109,18 +5109,13 @@ const componentDefinition = {
 			bindGroup: computeBg
 		});
 		const propagate = cursorEnabled ? makePropagateKernel() : null;
-		const propBgAB = cursorEnabled ? root.createBindGroup(propagateLayout, {
-			readSrc: bufferA,
-			writeBuf: bufferB,
+		const wave = createPingPongPair(bufferA, bufferB);
+		const propGroup = cursorEnabled ? wave.groups((readSrc, writeBuf) => root.createBindGroup(propagateLayout, {
+			readSrc,
+			writeBuf,
 			readBuf,
 			params: paramsU.buffer
-		}) : null;
-		const propBgBA = cursorEnabled ? root.createBindGroup(propagateLayout, {
-			readSrc: bufferB,
-			writeBuf: bufferA,
-			readBuf,
-			params: paramsU.buffer
-		}) : null;
+		})) : null;
 		const propagatePass = cursorEnabled && propagate ? createGuardedCompute(root, /* @__PURE__ */ (($) => (globalThis.__TYPEGPU_META__ ??= /* @__PURE__ */ new WeakMap()).set($.f = ((cx, cy) => {
 			"use gpu";
 			propagate(cx, cy);
@@ -5144,7 +5139,6 @@ const componentDefinition = {
 			},
 			externals: () => ({ propagate })
 		}) && $.f)({}), { size: [WAVE_GRID, WAVE_GRID] }) : null;
-		let direction = 0;
 		let prevPx = .5;
 		let prevPy = .5;
 		let lastTime = Date.now();
@@ -5308,9 +5302,9 @@ const componentDefinition = {
 				const sig = writeParams(fp, mouseSpeed, waveSettled ? 0 : 1);
 				if (waveSettled && sig === lastSig) return [];
 				lastSig = sig;
-				if (waveSettled || !propagatePass) return [computePass];
-				const prop = direction === 0 ? propagatePass.with(propBgAB) : propagatePass.with(propBgBA);
-				direction = 1 - direction;
+				if (waveSettled || !propagatePass || !propGroup) return [computePass];
+				const prop = propagatePass.with(propGroup());
+				wave.swap();
 				return [prop, computePass];
 			}
 		};

package/dist/core/{Swirl-C1lH2gAk.js → Swirl-DBxZ6Wud.js}

@@ -1,6 +1,6 @@
-import { Bt as sin, G as mixColorsVariants, Gt as data_exports, St as cos, Vt as smoothstep, W as mixColorsLinear, it as std_exports, ln as f32, m as call, nt as src_default, rn as vec2f } from "./edges-B7Yet3LV.js";
-import { S as mixColorStopsRuntime, h as colorStopsPropConfig, t as animatedTime } from "./porters-D_xmIPz2.js";
-import { a as transformColor, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-C7gn_5rF.js";
+import { Bt as sin, G as mixColorsLinear, Gt as data_exports, K as mixColorsVariants, St as cos, Vt as smoothstep, at as std_exports, h as call, rn as vec2f, rt as src_default, un as f32 } from "./edges-CD7gCAto.js";
+import { J as mixColorStopsRuntime, V as colorStopsPropConfig, t as animatedTime } from "./porters-DUtQounc.js";
+import { a as transformColor, o as transformColorSpace, t as colorSpaceOptions } from "./transformations-B-zNWNdd.js";
 const swirlField = src_default.fn([
 	vec2f,
 	f32,

package/dist/core/Teardrop-CnhwMyQx.js

@@ -0,0 +1,168 @@
+import { rn as vec2f, rt as src_default, un as f32 } from "./edges-CD7gCAto.js";
+import { C as defineSdfShapeShader } from "./porters-DUtQounc.js";
+import { C as sdf_exports, D as teardropSdf, E as strokeMaskFromSdf, a as ShapeMask, w as shapeLocalCoords } from "./device-B0ZwBfOg.js";
+const teardropShape = src_default.fn([
+	vec2f,
+	f32,
+	f32,
+	f32,
+	f32,
+	f32,
+	f32,
+	vec2f,
+	f32
+], ShapeMask)(/* @__PURE__ */ (($) => (globalThis.__TYPEGPU_META__ ??= /* @__PURE__ */ new WeakMap()).set($.f = ((center, radius, height, rotation, softness, strokeThickness, strokePosition, uv, aspect) => {
+	"use gpu";
+	const local = shapeLocalCoords(center, rotation, uv, aspect);
+	return strokeMaskFromSdf(teardropSdf(local.x, local.y, radius, height), softness, strokeThickness, strokePosition);
+}), {
+	v: 1,
+	name: void 0,
+	ast: {
+		"params": [
+			{
+				"type": "i",
+				"name": "center"
+			},
+			{
+				"type": "i",
+				"name": "radius"
+			},
+			{
+				"type": "i",
+				"name": "height"
+			},
+			{
+				"type": "i",
+				"name": "rotation"
+			},
+			{
+				"type": "i",
+				"name": "softness"
+			},
+			{
+				"type": "i",
+				"name": "strokeThickness"
+			},
+			{
+				"type": "i",
+				"name": "strokePosition"
+			},
+			{
+				"type": "i",
+				"name": "uv"
+			},
+			{
+				"type": "i",
+				"name": "aspect"
+			}
+		],
+		"body": [0, [
+			[
+				13,
+				"local",
+				[
+					6,
+					[
+						7,
+						"sdf",
+						"shapeLocalCoords"
+					],
+					[
+						"center",
+						"rotation",
+						"uv",
+						"aspect"
+					]
+				]
+			],
+			[
+				13,
+				"dist",
+				[
+					6,
+					[
+						7,
+						"sdf",
+						"teardropSdf"
+					],
+					[
+						[
+							7,
+							"local",
+							"x"
+						],
+						[
+							7,
+							"local",
+							"y"
+						],
+						"radius",
+						"height"
+					]
+				]
+			],
+			[10, [
+				6,
+				[
+					7,
+					"sdf",
+					"strokeMaskFromSdf"
+				],
+				[
+					"dist",
+					"softness",
+					"strokeThickness",
+					"strokePosition"
+				]
+			]]
+		]],
+		"externalNames": ["sdf"]
+	},
+	externals: () => ({ sdf: sdf_exports })
+}) && $.f)({}));
+const componentDefinition = defineSdfShapeShader({
+	name: "Teardrop",
+	description: "Teardrop — a rounded bulb tapering to a sharp point",
+	shapeFn: teardropShape,
+	shapeFnName: "teardropShape",
+	bodyArgs: [
+		"radius",
+		"height",
+		"rotation"
+	],
+	colorDescription: "Fill color of the teardrop",
+	centerDescription: "Center position of the teardrop",
+	bounds: { size: {
+		width: "radius",
+		height: "height"
+	} },
+	shapeProps: {
+		radius: {
+			default: .22,
+			description: "Radius of the rounded bulb",
+			ui: {
+				type: "range",
+				min: .02,
+				max: .6,
+				step: .01,
+				label: "Width",
+				group: "Shape"
+			}
+		},
+		height: {
+			default: .4,
+			description: "Length from the bulb to the point",
+			ui: {
+				type: "range",
+				min: .1,
+				max: .7,
+				step: .01,
+				label: "Length",
+				group: "Shape"
+			}
+		}
+	}
+});
+var Teardrop_default = componentDefinition;
+export { componentDefinition as n, teardropShape as r, Teardrop_default as t };

package/dist/core/{Text-DPjLa6Eh.js → Text-Cb6QJNWo.js}

@@ -1,6 +1,9 @@
-import { Bt as sin, Gt as data_exports, St as cos, Ut as step, b as vec4, it as std_exports, l as sampleCatmullRomExpr, ln as f32, m as call, nt as src_default, on as vec3f, rn as vec2f } from "./edges-B7Yet3LV.js";
-import { a as transformColor, c as transformPosition } from "./transformations-C7gn_5rF.js";
-import { n as loadGoogleFont, t as isFontAvailable } from "./fonts-DxVn9e-I.js";
+import { Bt as sin, Gt as data_exports, St as cos, Ut as step, at as std_exports, h as call, on as vec3f, rn as vec2f, rt as src_default, u as sampleCatmullRomExpr, un as f32, x as vec4 } from "./edges-CD7gCAto.js";
+import { t as DEG_TO_RAD$1 } from "./constants-DoOzbl5b.js";
+import { a as transformColor, c as transformPosition } from "./transformations-B-zNWNdd.js";
+import { t as createSwappableMediaTexture } from "./mediaLifecycle-yHZ8w5aj.js";
+import { n as createFontDependentRaster, r as createRasterInvalidator, t as createCanvasRasterTarget } from "./canvasRaster-BB2bNhS7.js";
+import { n as loadGoogleFont, t as isFontAvailable } from "./fonts-ScBvKolx.js";
 function applyTextTransform(text, mode) {
 	switch (mode) {
 		case "uppercase": return text.toUpperCase();
@@ -113,7 +116,7 @@ function measureTextBlock(spec, lineHeightEm, maxWidthPer100) {
 	};
 }
 var MAX_TEXTURE_AXIS = 4096;
-var DEG_TO_RAD = Math.PI / 180;
+var DEG_TO_RAD = DEG_TO_RAD$1;
 var TEXT_SUPERSAMPLE = 3;
 var wrapWidthPxOf = (v, canvasWidth) => {
 	if (v && typeof v === "object" && typeof v.value === "number") return v.unit === "px" ? v.value : v.value * canvasWidth;
@@ -749,28 +752,20 @@ const componentDefinition = {
 			}
 		}
 	},
-	fragment: ({ uniforms, ctx, uvContext, onCleanup, onBeforeRender, canvas, dimensions, getCpuValue, setExtraField, createMediaTexture, registerMediaTexture }) => {
-		const rasterCanvas = document.createElement("canvas");
-		rasterCanvas.width = 2;
-		rasterCanvas.height = 2;
-		const rasterCtx = rasterCanvas.getContext("2d");
-		let glyphTex = createMediaTexture({
-			width: 2,
-			height: 2,
-			label: "Text:glyph"
+	fragment: (params) => {
+		const { uniforms, ctx, uvContext, dimensions, getCpuValue, setExtraField } = params;
+		const target = createCanvasRasterTarget(params, {
+			maxAxis: MAX_TEXTURE_AXIS,
+			supersample: TEXT_SUPERSAMPLE
+		});
+		const rasterCtx = target.context();
+		const glyphTex = createSwappableMediaTexture(params, {
+			label: "Text:glyph",
+			initial: {
+				width: 2,
+				height: 2
+			}
 		});
-		let isDisposed = false;
-		const ensureTexSize = (w, h) => {
-			if (isDisposed || glyphTex.width === w && glyphTex.height === h) return;
-			const next = createMediaTexture({
-				width: w,
-				height: h,
-				label: "Text:glyph"
-			});
-			const old = glyphTex;
-			glyphTex = next;
-			old.destroy();
-		};
 		const defaults = componentDefinition.props;
 		const readProps = () => ({
 			text: String(getCpuValue("text") ?? defaults.text.default),
@@ -785,19 +780,16 @@ const componentDefinition = {
 			textTransform: String(getCpuValue("textTransform") ?? defaults.textTransform.default)
 		});
 		const raster = () => {
-			if (!rasterCtx || isDisposed) return;
+			if (!rasterCtx || target.disposed) return;
 			const p = readProps();
 			const dimW = dimensions.width || 1;
 			const dimH = dimensions.height || 1;
-			const dpr = Math.max(.1, (canvas.width || dimW) / dimW);
 			const fontSizePx = p.fontSizeUV * dimH;
 			const wrapWidthPx = p.widthUV * dimW;
 			if (!p.text.trim() || fontSizePx <= 0) {
-				rasterCanvas.width = 2;
-				rasterCanvas.height = 2;
-				rasterCtx.clearRect(0, 0, 2, 2);
-				ensureTexSize(2, 2);
-				glyphTex.write(rasterCanvas);
+				target.resize(2, 2);
+				glyphTex.ensureSize(2, 2);
+				glyphTex.write(target.canvas());
 				setExtraField("halfW", .001);
 				setExtraField("halfH", .001);
 				return;
@@ -820,13 +812,8 @@ const componentDefinition = {
 			const padPx = Math.max(.25 * fontSizePx, (ascentPx + descentPx - lineBoxPx) / 2 + .25 * fontSizePx);
 			const cssW = contentWPx + padPx * 2;
 			const cssH = blockHPx + padPx * 2;
-			let scale = dpr * TEXT_SUPERSAMPLE;
-			scale = Math.min(scale, MAX_TEXTURE_AXIS / cssW, MAX_TEXTURE_AXIS / cssH);
-			const texW = Math.max(2, Math.round(cssW * scale));
-			const texH = Math.max(2, Math.round(cssH * scale));
-			rasterCanvas.width = texW;
-			rasterCanvas.height = texH;
-			rasterCtx.clearRect(0, 0, texW, texH);
+			const { scale, texW, texH } = target.rasterSize(cssW, cssH);
+			target.resize(texW, texH);
 			rasterCtx.fillStyle = "#ffffff";
 			rasterCtx.font = `${p.italic ? "italic " : ""}${p.fontWeight} ${fontSizePx * scale}px "${p.fontFamily}", sans-serif`;
 			if (supportsCanvasLetterSpacing()) rasterCtx.letterSpacing = `${p.letterSpacing * fontSizePx * scale}px`;
@@ -842,46 +829,40 @@ const componentDefinition = {
 				const baselineY = blockTopY + (ascentPx + i * pitchPx) * scale;
 				rasterCtx.fillText(line, drawX, baselineY);
 			}
-			ensureTexSize(texW, texH);
-			glyphTex.write(rasterCanvas);
+			glyphTex.ensureSize(texW, texH);
+			glyphTex.write(target.canvas());
 			setExtraField("halfW", Math.max(1e-4, cssW / 2 / dimH));
 			setExtraField("halfH", Math.max(1e-4, cssH / 2 / dimH));
 		};
-		let loadedFontKey = "";
-		const ensureFont = () => {
-			const p = readProps();
-			const key = `${p.fontFamily}|${p.fontWeight}|${p.italic}`;
-			if (key === loadedFontKey) return;
-			loadedFontKey = key;
-			loadGoogleFont(p.fontFamily, p.fontWeight, p.italic).then(() => {
+		const font = createFontDependentRaster({
+			key: () => {
+				const p = readProps();
+				return `${p.fontFamily}|${p.fontWeight}|${p.italic}`;
+			},
+			load: () => {
+				const p = readProps();
+				return loadGoogleFont(p.fontFamily, p.fontWeight, p.italic);
+			},
+			onLoaded: () => {
 				bumpMeasureGeneration();
 				raster();
-			}).catch(() => {});
-		};
+			}
+		});
 		setTimeout(() => {
 			raster();
-			ensureFont();
+			font.ensure();
 		}, 0);
-		let lastRasterKey = "";
-		let lastUpdateTime = 0;
-		onBeforeRender(() => {
-			const now = Date.now();
-			if (now - lastUpdateTime < 16) return;
-			lastUpdateTime = now;
-			const p = readProps();
-			const key = `${p.text}|${p.fontFamily}|${p.fontWeight}|${p.italic}|${p.fontSizeUV}|${p.letterSpacing}|${p.lineHeight}|${p.textAlign}|${p.widthUV}|${p.textTransform}|${dimensions.width}x${dimensions.height}|${canvas.width}`;
-			if (key === lastRasterKey) return;
-			lastRasterKey = key;
-			raster();
-			ensureFont();
-		});
-		onCleanup(() => {
-			isDisposed = true;
-			glyphTex.destroy();
-			rasterCanvas.width = 0;
-			rasterCanvas.height = 0;
+		createRasterInvalidator(params, {
+			key: () => {
+				const p = readProps();
+				return `${p.text}|${p.fontFamily}|${p.fontWeight}|${p.italic}|${p.fontSizeUV}|${p.letterSpacing}|${p.lineHeight}|${p.textAlign}|${p.widthUV}|${p.textTransform}|${dimensions.width}x${dimensions.height}|${params.canvas.width}`;
+			},
+			run: () => {
+				raster();
+				font.ensure();
+			}
 		});
-		const glyphField = registerMediaTexture(() => glyphTex.texture);
+		const glyphField = glyphTex.kit;
 		const field = call(textField, "textField", [
 			uvContext ?? ctx.uv,
 			ctx.aspect,