shaders 2.3.74 → 2.4.76

package/dist/core/index.js

@@ -1,7 +1,101 @@
 import { t as applyEdgeHandling } from "./edges-CfGcQniB.js";
 import { a as transformColor, l as transformPosition, n as setColorSpaceMode, s as transformColorUpdate, u as transformPositionUpdate } from "./transformations-B5lM6fYX.js";
-import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
-import { Material, Mesh, MeshBasicNodeMaterial, OrthographicCamera, PlaneGeometry, SRGBColorSpace, Scene, WebGPURenderer } from "three/webgpu";
+import "./alpha-C4ptedXe.js";
+import "./AngularBlur-BgZWbEjj.js";
+import "./Ascii-BwSMmD6Z.js";
+import "./colorMixing-BPpDnR5I.js";
+import { t as createAnimatedTime } from "./time-DUqSFWvT.js";
+import "./Aurora-BPHeGEZ_.js";
+import "./Beam-CAnoOWgt.js";
+import "./Blob-56vuq_qL.js";
+import "./Blur-DTyNQt1R.js";
+import "./BrightnessContrast-BoR9bi58.js";
+import "./Bulge-DN2R75Hp.js";
+import "./ChannelBlur-CCaPXjka.js";
+import "./Checkerboard-_IUtUrDv.js";
+import "./ChromaFlow-Cq6hDVjX.js";
+import "./ChromaticAberration-G8_bwQtD.js";
+import "./Circle--0oHzoCi.js";
+import "./ConcentricSpin-BzxzMieZ.js";
+import "./ContourLines-yEb5IJ1Y.js";
+import "./sdf-BDsv-WBk.js";
+import "./Crescent-B4Z_WAgY.js";
+import "./Cross-M5Vm5Kmy.js";
+import "./CRTScreen-BZ-sAmPZ.js";
+import "./CursorRipples-BY1iu4MX.js";
+import "./CursorTrail-BzrL2WMh.js";
+import "./DiffuseBlur-Dyd42LXw.js";
+import "./Dither-CTInG_SB.js";
+import "./DotGrid-CsL0dnYB.js";
+import "./Duotone-BbCFLFMK.js";
+import "./Ellipse-BjbjXlOx.js";
+import "./Emboss-K5TExa67.js";
+import "./FallingLines-DBNJVWio.js";
+import "./FilmGrain-CSuerGc6.js";
+import "./FloatingParticles-CoBM_CJ8.js";
+import "./Flower-B-53jiUT.js";
+import "./FlowField-Bh3-dX6I.js";
+import "./Glass-Xwagp7_F.js";
+import "./GlassTiles-C3KnN5iI.js";
+import "./Glitch-ktKO_KpJ.js";
+import "./Glow-DBifdH__.js";
+import "./Godrays-Bh6SzbNk.js";
+import "./Grayscale-C3gjFyCl.js";
+import "./Grid-CtdGngeK.js";
+import "./GridDistortion-S4PnLDHk.js";
+import "./Group-B9Y-gzFl.js";
+import "./Halftone-B5YmZMs3.js";
+import "./HueShift-BTUePzBC.js";
+import "./ImageTexture-Bx-3RaXB.js";
+import "./Invert-CRnAnmF1.js";
+import "./Kaleidoscope-ChPX5tcw.js";
+import "./LensFlare-Ci0e-hkw.js";
+import "./LinearBlur-DaW1vgWS.js";
+import "./LinearGradient-D7APN-6R.js";
+import "./Liquify-CeIq9oBd.js";
+import "./Mirror-BYbVTGkj.js";
+import "./Neon-Bt0J1xV_.js";
+import "./Paper-C2D-Fwp3.js";
+import "./Perspective-Bdm0cUQh.js";
+import "./Pixelate-CTjHHN-r.js";
+import "./Plasma-CCGtK1Nq.js";
+import "./PolarCoordinates-XCMKSG2_.js";
+import "./Polygon-bhh40D7s.js";
+import "./Posterize-BI-jQFPl.js";
+import "./ProgressiveBlur-BJTqGhls.js";
+import "./RadialGradient-iLZnaIxZ.js";
+import "./RectangularCoordinates-BaO9nFBZ.js";
+import "./Ring-CVjkjiUD.js";
+import "./Ripples-DM_4XyVc.js";
+import "./RoundedRect-DIZw7grS.js";
+import "./Saturation-Sn1JvnA0.js";
+import "./Sharpness-bKBphxzQ.js";
+import "./Shatter-BaTW-RUu.js";
+import "./SimplexNoise-BHkNvira.js";
+import "./SineWave-BiSC-P30.js";
+import "./SolidColor-Cx-mC1as.js";
+import "./Spherize-Do9r5rep.js";
+import "./Spiral-cnUEuXK4.js";
+import "./Star-CYt36zBy.js";
+import "./Strands-Cv5R6Tve.js";
+import "./Stretch-Cbg46rCc.js";
+import "./Stripes-BFeaEYmE.js";
+import "./StudioBackground-DmjrfYQk.js";
+import "./Swirl-BnYnaDkG.js";
+import "./TiltShift-CZYvmOJC.js";
+import "./Tint-CpEcvX7Q.js";
+import "./Trapezoid-C9JGRsdF.js";
+import "./Tritone-zGl8HUq_.js";
+import "./Twirl-CYwSYwxr.js";
+import "./Vesica-BF2ZOKVA.js";
+import "./Vibrance-MtwpojF5.js";
+import "./browser-BHtD5nQW.js";
+import "./VideoTexture-Cl-V4Igy.js";
+import "./WaveDistortion-BOovaVR7.js";
+import "./WebcamTexture-5b9qf7mC.js";
+import "./ZoomBlur-COhLGJIk.js";
+import { t as getAllShaders } from "./shaderRegistry-BNFvV6rz.js";
+import { Material, Mesh, MeshBasicNodeMaterial, OrthographicCamera, PlaneGeometry, SRGBColorSpace, Scene, Vector2, WebGPURenderer } from "three/webgpu";
 import { WebGLRenderer } from "three";
 import { PI, abs, add, atan, clamp, convertToTexture, cos, div, dot, float, fract, max, min, mix, mul, pow, screenUV, sign, sin, smoothstep, sqrt, step, sub, time, uniform, uv, vec2, vec3, vec4 } from "three/tsl";
 function normal_default(base, overlay, opacity = 1) {
@@ -599,6 +693,13 @@ var globalEventManager = (() => {
 		};
 	} };
 })();
+var applySpring = (current, velocity, target, smoothing, momentum, dt) => {
+	if (smoothing === 0 && momentum === 0) return [target, 0];
+	const stiffness = 200 * Math.pow(.01, smoothing);
+	const damping = 2 * Math.sqrt(stiffness) * (1 - momentum * .85);
+	const newVelocity = velocity + (stiffness * (target - current) - damping * velocity) * dt;
+	return [current + newVelocity * dt, newVelocity];
+};
 function shaderRenderer() {
 	let canvasElement = null;
 	let renderer;
@@ -622,9 +723,11 @@ function shaderRenderer() {
 	let initializationAbortController = null;
 	let isVisible = false;
 	let shouldAnimate = true;
+	let forceFullFrameRate = false;
 	let currentWidth = 0;
 	let currentHeight = 0;
 	let lastRenderTime = 0;
+	let globalElapsedTime = 0;
 	let needsMaterialRefresh = false;
 	let pointerX = .5;
 	let pointerY = .5;
@@ -869,14 +972,89 @@ function shaderRenderer() {
 		const inputRange = max(inputMaxU.sub(inputMinU), 1e-4);
 		return mix(outputMinU, outputMaxU, pow(clamp(raw.sub(inputMinU).div(inputRange), 0, 1), pow(float(2), curveU.negate().mul(2))));
 	};
+	const resolveMousePositionForProp = (_config, nodeId, propName) => {
+		const nodeInfo = nodeRegistry.nodes.get(nodeId);
+		if (!nodeInfo) return null;
+		if (!nodeInfo.mouseDriverState) nodeInfo.mouseDriverState = {};
+		if (!nodeInfo.mouseDriverState[propName]) {
+			const trackX = _config.x === void 0 || _config.x === "mouse";
+			const trackY = _config.y === void 0 || _config.y === "mouse";
+			const initX = trackX ? pointerX : _config.x;
+			const initY = trackY ? pointerY : _config.y;
+			const smoothedUniform = uniform(new Vector2(initX, 1 - initY));
+			nodeInfo.mouseDriverState[propName] = {
+				currentX: initX,
+				currentY: initY,
+				velocityX: 0,
+				velocityY: 0,
+				smoothedUniform
+			};
+		}
+		return nodeInfo.mouseDriverState[propName].smoothedUniform;
+	};
+	const resolveMouseMapForProp = (config, nodeId, propName) => {
+		const nodeInfo = nodeRegistry.nodes.get(nodeId);
+		if (!nodeInfo) return null;
+		if (!nodeInfo.mouseDriverState) nodeInfo.mouseDriverState = {};
+		if (!nodeInfo.mouseDriverState[propName]) {
+			const initial = Math.max(.001, config.axis === "x" ? pointerX : pointerY);
+			const smoothedUniform = uniform(initial);
+			nodeInfo.mouseDriverState[propName] = {
+				currentX: initial,
+				currentY: 0,
+				velocityX: 0,
+				velocityY: 0,
+				smoothedUniform
+			};
+		}
+		if (!nodeInfo.mapUniforms) nodeInfo.mapUniforms = {};
+		if (!nodeInfo.mapUniforms[propName]) nodeInfo.mapUniforms[propName] = {
+			inputMin: uniform(0, "float"),
+			inputMax: uniform(1, "float"),
+			outputMin: uniform(config.outputMin, "float"),
+			outputMax: uniform(config.outputMax, "float"),
+			curve: uniform(config.curve ?? 0, "float")
+		};
+		else {
+			nodeInfo.mapUniforms[propName].outputMin.value = config.outputMin;
+			nodeInfo.mapUniforms[propName].outputMax.value = config.outputMax;
+			nodeInfo.mapUniforms[propName].curve.value = config.curve ?? 0;
+		}
+		const { outputMin: outputMinU, outputMax: outputMaxU, curve: curveU } = nodeInfo.mapUniforms[propName];
+		const smoothedU = nodeInfo.mouseDriverState[propName].smoothedUniform;
+		return mix(outputMinU, outputMaxU, pow(smoothedU, pow(float(2), curveU.negate().mul(2))));
+	};
+	const resolveAutoAnimateForProp = (config, nodeId, propName) => {
+		const nodeInfo = nodeRegistry.nodes.get(nodeId);
+		if (!nodeInfo) return null;
+		if (!nodeInfo.autoAnimateState) nodeInfo.autoAnimateState = {};
+		if (!nodeInfo.autoAnimateState[propName]) nodeInfo.autoAnimateState[propName] = { smoothedUniform: uniform(config.outputMin, "float") };
+		return nodeInfo.autoAnimateState[propName].smoothedUniform;
+	};
 	const buildEffectiveUniforms = (baseUniforms, maps, nodeId, processedMasks) => {
 		if (!maps || Object.keys(maps).length === 0) return baseUniforms;
 		const effectiveUniforms = { ...baseUniforms };
 		const customSampleUVs = nodeRegistry.nodes.get(nodeId)?.mapSampleUVsFunc?.(baseUniforms) ?? {};
-		for (const [propName, mapConfig] of Object.entries(maps)) {
-			if (!(propName in effectiveUniforms)) continue;
-			const resolvedNode = resolveMapForProp(mapConfig, processedMasks, nodeId, propName, customSampleUVs[propName]);
-			if (resolvedNode !== null) effectiveUniforms[propName] = {
+		for (const [propName, driverConfig] of Object.entries(maps)) {
+			let resolvedNode = null;
+			if (driverConfig.type === "map") {
+				if (!(propName in effectiveUniforms)) continue;
+				resolvedNode = resolveMapForProp(driverConfig, processedMasks, nodeId, propName, customSampleUVs[propName]);
+			} else if (driverConfig.type === "mouse-position") {
+				resolvedNode = resolveMousePositionForProp(driverConfig, nodeId, propName);
+				if (resolvedNode !== null && propName in effectiveUniforms) effectiveUniforms[propName] = {
+					...effectiveUniforms[propName],
+					uniform: resolvedNode
+				};
+				continue;
+			} else if (driverConfig.type === "mouse") {
+				if (!(propName in effectiveUniforms)) continue;
+				resolvedNode = resolveMouseMapForProp(driverConfig, nodeId, propName);
+			} else if (driverConfig.type === "auto-animate") {
+				if (!(propName in effectiveUniforms)) continue;
+				resolvedNode = resolveAutoAnimateForProp(driverConfig, nodeId, propName);
+			}
+			if (resolvedNode !== null && propName in effectiveUniforms) effectiveUniforms[propName] = {
 				...effectiveUniforms[propName],
 				uniform: resolvedNode
 			};
@@ -1275,19 +1453,61 @@ function shaderRenderer() {
 				const newKeys = Object.keys(newMaps);
 				if (oldKeys.length !== newKeys.length || !oldKeys.every((k) => k in newMaps)) return true;
 				for (const key of newKeys) {
-					if (oldMaps[key].source !== newMaps[key].source) return true;
-					if (oldMaps[key].channel !== newMaps[key].channel) return true;
-					if (!existingNode.mapUniforms?.[key]) return true;
+					const oldCfg = oldMaps[key];
+					const newCfg = newMaps[key];
+					if (oldCfg.type !== newCfg.type) return true;
+					if (newCfg.type === "map") {
+						const nc = newCfg;
+						const oc = oldCfg;
+						if (oc.source !== nc.source) return true;
+						if (oc.channel !== nc.channel) return true;
+						if (!existingNode.mapUniforms?.[key]) return true;
+					} else if (newCfg.type === "mouse") {
+						const nc = newCfg;
+						if (oldCfg.axis !== nc.axis) return true;
+						if (!existingNode.mouseDriverState?.[key]) return true;
+					} else if (newCfg.type === "mouse-position") {
+						if (!existingNode.mouseDriverState?.[key]) return true;
+					} else if (newCfg.type === "auto-animate") {
+						if (!existingNode.autoAnimateState?.[key]) return true;
+					}
 				}
 				return false;
-			})()) needsRecompose = true;
-			else for (const [key, mapCfg] of Object.entries(newMaps)) {
+			})()) {
+				if (oldMaps && newMaps) {
+					for (const key of Object.keys(oldMaps)) if (key in newMaps && oldMaps[key].type !== newMaps[key].type) {
+						if (existingNode.autoAnimateState) delete existingNode.autoAnimateState[key];
+					}
+				}
+				if (oldMaps && newMaps && existingNode.mouseDriverState) {
+					for (const key of Object.keys(oldMaps)) if (key in newMaps && oldMaps[key].type !== newMaps[key].type) delete existingNode.mouseDriverState[key];
+				}
+				needsRecompose = true;
+			} else for (const [key, driverCfg] of Object.entries(newMaps)) if (driverCfg.type === "map") {
+				const mapCfg = driverCfg;
 				const cached = existingNode.mapUniforms[key];
-				cached.inputMin.value = mapCfg.inputMin;
-				cached.inputMax.value = mapCfg.inputMax;
-				cached.outputMin.value = mapCfg.outputMin;
-				cached.outputMax.value = mapCfg.outputMax;
-				cached.curve.value = mapCfg.curve ?? 0;
+				if (cached) {
+					cached.inputMin.value = mapCfg.inputMin;
+					cached.inputMax.value = mapCfg.inputMax;
+					cached.outputMin.value = mapCfg.outputMin;
+					cached.outputMax.value = mapCfg.outputMax;
+					cached.curve.value = mapCfg.curve ?? 0;
+				}
+			} else if (driverCfg.type === "mouse") {
+				const mouseCfg = driverCfg;
+				const cached = existingNode.mapUniforms?.[key];
+				if (cached) {
+					cached.outputMin.value = mouseCfg.outputMin;
+					cached.outputMax.value = mouseCfg.outputMax;
+					cached.curve.value = mouseCfg.curve ?? 0;
+				}
+			} else if (driverCfg.type === "auto-animate") {
+				const animCfg = driverCfg;
+				const cached = existingNode.mapUniforms?.[key];
+				if (cached) {
+					cached.outputMin.value = animCfg.outputMin;
+					cached.outputMax.value = animCfg.outputMax;
+				}
 			}
 		}
 		if (metadata.transform !== void 0) {
@@ -1355,6 +1575,103 @@ function shaderRenderer() {
 			});
 		}
 	};
+	const applyBounceEase = (t) => {
+		const n1 = 7.5625, d1 = 2.75;
+		if (t < 1 / d1) return n1 * t * t;
+		if (t < 2 / d1) {
+			t -= 1.5 / d1;
+			return n1 * t * t + .75;
+		}
+		if (t < 2.5 / d1) {
+			t -= 2.25 / d1;
+			return n1 * t * t + .9375;
+		}
+		t -= 2.625 / d1;
+		return n1 * t * t + .984375;
+	};
+	const applyEasing = (t, easing) => {
+		switch (easing) {
+			case "linear": return t;
+			case "quad": return t < .5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+			case "expo":
+				if (t === 0) return 0;
+				if (t === 1) return 1;
+				return t < .5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2;
+			case "bounce": return applyBounceEase(t);
+			case "sine":
+			default: return (1 - Math.cos(Math.PI * t)) / 2;
+		}
+	};
+	const updateMouseDrivers = (deltaTime) => {
+		globalElapsedTime += deltaTime;
+		for (const nodeInfo of nodeRegistry.nodes.values()) {
+			if (!nodeInfo.mouseDriverState && !nodeInfo.autoAnimateState) continue;
+			const maps = nodeInfo.metadata.maps;
+			if (!maps) continue;
+			for (const [propName, state] of Object.entries(nodeInfo.mouseDriverState ?? {})) {
+				const driverConfig = maps[propName];
+				if (!driverConfig) continue;
+				if (driverConfig.type === "mouse-position") {
+					const smoothing = driverConfig.smoothing ?? 0;
+					const momentum = driverConfig.momentum ?? 0;
+					const trackX = driverConfig.x === void 0 || driverConfig.x === "mouse";
+					const trackY = driverConfig.y === void 0 || driverConfig.y === "mouse";
+					let finalX;
+					let finalY;
+					if (trackX) {
+						const [nx, vx] = applySpring(state.currentX, state.velocityX, pointerX, smoothing, momentum, deltaTime);
+						state.currentX = nx;
+						state.velocityX = vx;
+						finalX = nx;
+					} else {
+						finalX = driverConfig.x;
+						state.velocityX = 0;
+					}
+					if (trackY) {
+						const [ny, vy] = applySpring(state.currentY, state.velocityY, pointerY, smoothing, momentum, deltaTime);
+						state.currentY = ny;
+						state.velocityY = vy;
+						finalY = ny;
+					} else {
+						finalY = driverConfig.y;
+						state.velocityY = 0;
+					}
+					const reach = driverConfig.reach ?? 1;
+					const originX = driverConfig.originX ?? .5;
+					const originY = driverConfig.originY ?? .5;
+					const xSign = driverConfig.invertX ? -1 : 1;
+					const ySign = driverConfig.invertY ? -1 : 1;
+					const scaledX = originX + xSign * (finalX - originX) * reach;
+					const scaledY = originY + ySign * (finalY - originY) * reach;
+					const gpuX = scaledX;
+					const gpuY = 1 - scaledY;
+					state.smoothedUniform.value.set(gpuX, gpuY);
+				} else if (driverConfig.type === "mouse") {
+					const smoothing = driverConfig.smoothing ?? 0;
+					const momentum = driverConfig.momentum ?? 0;
+					const target = driverConfig.axis === "x" ? pointerX : pointerY;
+					const [nx, vx] = applySpring(state.currentX, state.velocityX, target, smoothing, momentum, deltaTime);
+					state.currentX = nx;
+					state.velocityX = vx;
+					state.smoothedUniform.value = Math.max(.001, nx);
+				}
+			}
+			if (!nodeInfo.autoAnimateState) continue;
+			for (const [propName, state] of Object.entries(nodeInfo.autoAnimateState)) {
+				const driverConfig = maps[propName];
+				if (!driverConfig || driverConfig.type !== "auto-animate") continue;
+				const globalT = globalElapsedTime * (driverConfig.speed ?? 1) * .2;
+				let phase;
+				if (driverConfig.mode === "loop") phase = applyEasing((globalT % 1 + 1) % 1, driverConfig.easing ?? driverConfig.waveform ?? "sine");
+				else {
+					const t01 = (globalT % 1 + 1) % 1;
+					phase = applyEasing(t01 < .5 ? t01 * 2 : (1 - t01) * 2, driverConfig.easing ?? driverConfig.waveform ?? "sine");
+				}
+				const { outputMin, outputMax } = driverConfig;
+				state.smoothedUniform.value = outputMin + phase * (outputMax - outputMin);
+			}
+		}
+	};
 	const executeBeforeRenderCallbacks = (deltaTime) => {
 		const params = {
 			deltaTime,
@@ -1414,15 +1731,16 @@ function shaderRenderer() {
 		const currentTime = frameStartTime || performance.now();
 		const deltaTime = lastRenderTime > 0 ? (currentTime - lastRenderTime) / 1e3 : .016;
 		const OFF_SCREEN_FPS_INTERVAL = 1e3;
-		const MIN_FRAME_INTERVAL = 1e3 / 120;
+		const MIN_FRAME_INTERVAL = 1e3 / 60 - 1;
 		if (lastRenderTime > 0) {
 			const timeSinceLastRender = currentTime - lastRenderTime;
-			if (!isVisible && timeSinceLastRender < OFF_SCREEN_FPS_INTERVAL) return;
-			if (isVisible && timeSinceLastRender < MIN_FRAME_INTERVAL) return;
+			if (!isVisible && !forceFullFrameRate && timeSinceLastRender < OFF_SCREEN_FPS_INTERVAL) return;
+			if ((isVisible || forceFullFrameRate) && timeSinceLastRender < MIN_FRAME_INTERVAL) return;
 		}
 		const cappedDeltaTime = Math.min(deltaTime, .1);
 		lastRenderTime = currentTime;
 		if (enablePerformanceTracking) performance.mark("shader-cpu-start");
+		updateMouseDrivers(cappedDeltaTime);
 		executeBeforeRenderCallbacks(cappedDeltaTime);
 		try {
 			if (isUpdatingMaterial) return;
@@ -1551,9 +1869,10 @@ function shaderRenderer() {
 		pendingRegistrationQueue = [];
 		for (const { id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition } of queue) if (fragmentNodeFunc) registerNode(id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition);
 	};
-	const initialize = async ({ canvas, enablePerformanceTracking: enableTracking = true, colorSpace = "p3-linear" }) => {
+	const initialize = async ({ canvas, enablePerformanceTracking: enableTracking = true, colorSpace = "p3-linear", context, gpu, forceFullFrameRate: forceFullFps = false }) => {
 		if (isInitialized || isInitializing) return;
 		enablePerformanceTracking = enableTracking;
+		forceFullFrameRate = forceFullFps;
 		rendererColorSpace = colorSpace;
 		setColorSpaceMode(colorSpace);
 		isInitializing = true;
@@ -1579,7 +1898,18 @@ function shaderRenderer() {
 			};
 			window.addEventListener("beforeunload", unloadHandler);
 			if (localAbortController.signal.aborted) return;
-			try {
+			if (context) {
+				console.log("[Shaders] Using provided WebGL context");
+				renderer = new WebGLRenderer({
+					canvas,
+					context,
+					antialias: true,
+					alpha: true,
+					depth: false,
+					stencil: true,
+					powerPreference: "high-performance"
+				});
+			} else try {
 				renderer = new WebGPURenderer({
 					canvas,
 					antialias: true,
@@ -1587,19 +1917,26 @@ function shaderRenderer() {
 					depth: false,
 					powerPreference: "high-performance"
 				});
-				await renderer.init();
+				if (gpu?.device && gpu?.adapter) await renderer.init({
+					device: gpu.device,
+					adapter: gpu.adapter
+				});
+				else await renderer.init();
 				if (localAbortController.signal.aborted) return;
 			} catch (e) {
 				if (localAbortController.signal.aborted) return;
 				console.warn("[Shaders] WebGPU initialization failed, falling back to WebGL:", e);
 				try {
-					renderer = new WebGLRenderer({
+					const webglOptions = {
 						canvas,
 						antialias: true,
 						alpha: true,
 						depth: false,
+						stencil: true,
 						powerPreference: "high-performance"
-					});
+					};
+					if (context) webglOptions.context = context;
+					renderer = new WebGLRenderer(webglOptions);
 					if (localAbortController.signal.aborted) return;
 				} catch (webglError) {
 					if (localAbortController.signal.aborted) return;
@@ -1749,6 +2086,7 @@ function shaderRenderer() {
 		getPerformanceStats,
 		getNodeRegistry: () => ({ nodes: new Map(nodeRegistry.nodes) }),
 		getRendererType,
+		getInternalRenderer: () => renderer ?? null,
 		__testing: {
 			needsTransformation,
 			findChildNodes,
@@ -1759,6 +2097,114 @@ function shaderRenderer() {
 		}
 	};
 }
+function createRendererFromJSON(preset, options) {
+	const coreRenderer = shaderRenderer();
+	const componentRegistry = /* @__PURE__ */ new Map();
+	const nodeIdMap = /* @__PURE__ */ new Map();
+	getAllShaders().forEach((shader) => {
+		componentRegistry.set(shader.definition.name, shader.definition);
+	});
+	async function initialize(canvas) {
+		await coreRenderer.initialize({
+			canvas,
+			enablePerformanceTracking: options?.enablePerformanceTracking || false,
+			context: options?.context,
+			gpu: options?.gpu,
+			forceFullFrameRate: options?.forceFullFrameRate || false
+		});
+		registerPresetNodes();
+		coreRenderer.stopAnimation();
+	}
+	async function renderFrame() {
+		if (!coreRenderer.isInitialized()) {
+			console.warn("[presetRenderer] Renderer not yet initialized, skipping frame");
+			return;
+		}
+		await coreRenderer.renderAndWait();
+	}
+	function updatePreset(newPreset) {
+		nodeIdMap.forEach((_, nodeId) => {
+			coreRenderer.removeNode(nodeId);
+		});
+		nodeIdMap.clear();
+		preset = newPreset;
+		registerPresetNodes();
+	}
+	function getGPUContext() {
+		const rendererType = coreRenderer.getRendererType();
+		const internalRenderer = coreRenderer.getInternalRenderer();
+		if (rendererType === "webgpu") return {
+			type: "webgpu",
+			device: internalRenderer.backend?.device,
+			adapter: internalRenderer.backend?.adapter,
+			canvas: internalRenderer.domElement
+		};
+		else return {
+			type: "webgl",
+			context: internalRenderer.getContext?.(),
+			canvas: internalRenderer.domElement
+		};
+	}
+	function dispose() {
+		coreRenderer.cleanup();
+	}
+	function registerPresetNodes() {
+		const rootId = "preset-root";
+		coreRenderer.registerNode(rootId, ({ childNode }) => childNode || vec4(0, 0, 0, 0), null, null, {});
+		preset.components.forEach((component, index) => {
+			registerComponent(component, rootId, index);
+		});
+	}
+	function registerComponent(component, parentId, renderOrder) {
+		const componentDef = componentRegistry.get(component.type);
+		if (!componentDef) {
+			console.warn(`[createRendererFromJSON] Unknown component type: ${component.type}`);
+			return;
+		}
+		const nodeId = component.id || `${component.type}_${Date.now()}_${Math.random()}`;
+		nodeIdMap.set(nodeId, component.type);
+		const uniforms = propsToUniforms(component.props || {}, componentDef);
+		const metadata = {
+			blendMode: component.props?.blendMode || "normal",
+			opacity: component.props?.opacity,
+			visible: component.props?.visible,
+			renderOrder,
+			id: component.id,
+			mask: component.props?.maskSource ? {
+				source: component.props.maskSource,
+				type: component.props.maskType || "alpha"
+			} : void 0,
+			transform: component.props?.transform
+		};
+		coreRenderer.registerNode(nodeId, componentDef.fragmentNode, parentId, metadata, uniforms, componentDef);
+		component.children?.forEach((child, index) => {
+			registerComponent(child, nodeId, index);
+		});
+	}
+	function propsToUniforms(props, componentDef) {
+		const uniforms = {};
+		Object.entries(componentDef.props).forEach(([key, propConfig]) => {
+			const value = props[key] !== void 0 ? props[key] : propConfig.default;
+			const transformedValue = propConfig.transform ? propConfig.transform(value) : value;
+			if (transformedValue && typeof transformedValue === "object" && "node" in transformedValue) uniforms[key] = {
+				uniform: transformedValue.node,
+				transform: propConfig.transform
+			};
+			else uniforms[key] = {
+				uniform: uniform(transformedValue),
+				transform: propConfig.transform
+			};
+		});
+		return uniforms;
+	}
+	return {
+		initialize,
+		renderFrame,
+		updatePreset,
+		getGPUContext,
+		dispose
+	};
+}
 function resolveMaskDependencies(nodes) {
 	const elementIdToNodeId = /* @__PURE__ */ new Map();
 	const maskDependencies = /* @__PURE__ */ new Map();
@@ -1833,4 +2279,4 @@ const edgeMask = (options = {}) => {
 	const ovalDistance = ovalX.mul(ovalX).add(ovalY.mul(ovalY)).sqrt();
 	return float(1).sub(smoothstep(float(1).sub(float(inset)), float(1).sub(float(inset)).add(float(softness)), ovalDistance.mul(float(1).add(float(softness)))));
 };
-export { createAnimatedTime, createUniformsMap, distort, edgeMask, glow, grain, resolveMaskDependencies, shaderRenderer, updateUniformValue };
+export { createAnimatedTime, createRendererFromJSON, createUniformsMap, distort, edgeMask, glow, grain, resolveMaskDependencies, shaderRenderer, updateUniformValue };

package/dist/core/presetRenderer.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Component configuration from JSON preset
+ */
+export interface ComponentConfig {
+    type: string;
+    id?: string;
+    props?: Record<string, any>;
+    children?: ComponentConfig[];
+}
+/**
+ * Preset configuration structure
+ */
+export interface PresetConfig {
+    components: ComponentConfig[];
+    structureVersion?: number;
+}
+/**
+ * Options for creating a preset renderer
+ */
+export interface PresetRendererOptions {
+    enablePerformanceTracking?: boolean;
+    gpu?: {
+        device: GPUDevice;
+        adapter: GPUAdapter;
+    };
+    context?: WebGLRenderingContext | WebGL2RenderingContext;
+    forceFullFrameRate?: boolean;
+}
+/**
+ * GPU context information for sharing with other renderers
+ */
+export interface GPUContext {
+    type: 'webgpu' | 'webgl';
+    device?: GPUDevice;
+    adapter?: GPUAdapter;
+    context?: WebGLRenderingContext | WebGL2RenderingContext;
+    canvas: HTMLCanvasElement;
+}
+/**
+ * Create a renderer from preset JSON configuration
+ * Provides manual render control for integration with third-party tools
+ *
+ * @example
+ * ```typescript
+ * const preset = {
+ *   components: [
+ *     {
+ *       type: 'RadialGradient',
+ *       props: {
+ *         color1: '#ff0000',
+ *         color2: '#0000ff'
+ *       }
+ *     }
+ *   ]
+ * }
+ *
+ * const renderer = createRendererFromJSON(preset)
+ * await renderer.initialize(canvas)
+ *
+ * // Manual render loop
+ * function animate() {
+ *   await renderer.renderFrame()
+ *   requestAnimationFrame(animate)
+ * }
+ * animate()
+ * ```
+ */
+export declare function createRendererFromJSON(preset: PresetConfig, options?: PresetRendererOptions): {
+    initialize: (canvas: HTMLCanvasElement) => Promise<void>;
+    renderFrame: () => Promise<void>;
+    updatePreset: (newPreset: PresetConfig) => void;
+    getGPUContext: () => GPUContext;
+    dispose: () => void;
+};
+//# sourceMappingURL=presetRenderer.d.ts.map

package/dist/core/presetRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presetRenderer.d.ts","sourceRoot":"","sources":["../src/presetRenderer.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,eAAe,EAAE,CAAA;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,yBAAyB,CAAC,EAAE,OAAO,CAAA;IAEnC,GAAG,CAAC,EAAE;QACJ,MAAM,EAAE,SAAS,CAAA;QACjB,OAAO,EAAE,UAAU,CAAA;KACpB,CAAA;IACD,OAAO,CAAC,EAAE,qBAAqB,GAAG,sBAAsB,CAAA;IAExD,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAA;IACxB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,OAAO,CAAC,EAAE,qBAAqB,GAAG,sBAAsB,CAAA;IACxD,MAAM,EAAE,iBAAiB,CAAA;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,qBAAqB;yBAgBG,iBAAiB,KAAG,OAAO,CAAC,IAAI,CAAC;uBAoBrC,OAAO,CAAC,IAAI,CAAC;8BAaV,YAAY,KAAG,IAAI;yBAgB1B,UAAU;mBAwBhB,IAAI;EAyHzB"}