shaders 2.2.47 → 2.3.49

package/dist/core/VideoTexture-DKnQrDkq.js

@@ -0,0 +1,187 @@
+import { SRGBColorSpace, VideoTexture } from "three/webgpu";
+import { float, max, min, or, screenUV, select, step, texture, uniform, vec2, vec4, viewportSize } from "three/tsl";
+const componentDefinition = {
+	name: "VideoTexture",
+	category: "Textures",
+	description: "Display a video with customizable playback and object-fit modes",
+	props: {
+		url: {
+			default: "https://shaders.com/sample.mp4",
+			description: "Upload a video or provide a URL",
+			ui: {
+				type: "video-upload",
+				label: "Video",
+				group: "Media"
+			}
+		},
+		objectFit: {
+			default: "cover",
+			description: "How the video 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",
+				group: "Appearance"
+			}
+		},
+		loop: {
+			default: true,
+			description: "Loop the video playback",
+			ui: {
+				type: "checkbox",
+				label: "Loop",
+				group: "Playback"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, onCleanup, onBeforeRender }) => {
+		const baseUV = screenUV;
+		let videoElement = null;
+		let videoTexture = null;
+		let currentUrl = "";
+		let isLoading = false;
+		let isDisposed = false;
+		const videoAspectUniform = uniform(1);
+		const videoWidthUniform = uniform(640);
+		const videoHeightUniform = uniform(480);
+		const placeholderVideo = document.createElement("video");
+		placeholderVideo.playsInline = true;
+		placeholderVideo.muted = true;
+		videoTexture = new VideoTexture(placeholderVideo);
+		videoTexture.colorSpace = SRGBColorSpace;
+		const textureNode = texture(videoTexture);
+		const loadVideo = async (url) => {
+			if (!url || url.trim() === "" || isLoading || isDisposed) return;
+			isLoading = true;
+			try {
+				const video = document.createElement("video");
+				video.src = url;
+				video.playsInline = true;
+				video.crossOrigin = "anonymous";
+				video.muted = true;
+				video.loop = uniforms.loop?.uniform?.value ?? true;
+				await new Promise((resolve, reject) => {
+					video.onloadedmetadata = () => {
+						resolve();
+					};
+					video.onerror = () => {
+						reject(/* @__PURE__ */ new Error("Failed to load video"));
+					};
+					setTimeout(() => {
+						reject(/* @__PURE__ */ new Error("Video load timeout"));
+					}, 1e4);
+				});
+				if (isDisposed) {
+					video.src = "";
+					return;
+				}
+				const width = video.videoWidth || 640;
+				const height = video.videoHeight || 480;
+				videoAspectUniform.value = width / height;
+				videoWidthUniform.value = width;
+				videoHeightUniform.value = height;
+				if (videoElement) {
+					videoElement.pause();
+					videoElement.src = "";
+					videoElement = null;
+				}
+				if (videoTexture) videoTexture.dispose();
+				videoTexture = new VideoTexture(video);
+				videoTexture.colorSpace = SRGBColorSpace;
+				textureNode.value = videoTexture;
+				videoElement = video;
+				currentUrl = url;
+				try {
+					await video.play();
+				} catch (error) {
+					console.warn("[VideoTexture] Autoplay failed (browser policy):", error);
+				}
+				isLoading = false;
+			} catch (error) {
+				console.error("[VideoTexture] Failed to load video:", error);
+				isLoading = false;
+			}
+		};
+		setTimeout(() => {
+			const initialUrl = uniforms?.url?.uniform?.value ?? "";
+			if (initialUrl && initialUrl.trim() !== "") loadVideo(initialUrl);
+		}, 0);
+		onBeforeRender(() => {
+			const newUrl = uniforms?.url?.uniform?.value ?? "";
+			if (newUrl !== currentUrl && !isLoading) loadVideo(newUrl);
+			if (videoElement) {
+				const loopValue = uniforms.loop?.uniform?.value ?? true;
+				if (videoElement.loop !== loopValue) videoElement.loop = loopValue;
+			}
+		});
+		onCleanup(() => {
+			isDisposed = true;
+			if (videoElement) {
+				videoElement.pause();
+				videoElement.src = "";
+				videoElement = null;
+			}
+			if (videoTexture) {
+				videoTexture.dispose();
+				videoTexture = null;
+			}
+			placeholderVideo.src = "";
+			currentUrl = "";
+		});
+		const uv$1 = baseUV;
+		const viewportAspect = viewportSize.x.div(viewportSize.y);
+		const objectFitMode = uniforms.objectFit.uniform;
+		const coverScale = max(viewportAspect.div(videoAspectUniform), float(1));
+		const coverUVScale = vec2(videoAspectUniform.div(viewportAspect).mul(coverScale), coverScale);
+		const containScale = min(viewportAspect.div(videoAspectUniform), float(1));
+		const containUVScale = vec2(videoAspectUniform.div(viewportAspect).mul(containScale), containScale);
+		const fillUVScale = vec2(1, 1);
+		const scaleDownScale = min(min(viewportAspect.div(videoAspectUniform), float(1)), min(viewportSize.x.div(videoWidthUniform), viewportSize.y.div(videoHeightUniform)));
+		const scaleDownUVScale = vec2(videoAspectUniform.div(viewportAspect).mul(scaleDownScale), scaleDownScale);
+		const noneScale = min(viewportSize.x.div(videoWidthUniform), viewportSize.y.div(videoHeightUniform));
+		const noneUVScale = vec2(videoAspectUniform.div(viewportAspect).mul(noneScale), noneScale);
+		const isCover = step(objectFitMode, float(.5));
+		const isContain = step(float(.5), objectFitMode).mul(step(objectFitMode, float(1.5)));
+		const isFill = step(float(1.5), objectFitMode).mul(step(objectFitMode, float(2.5)));
+		const isScaleDown = step(float(2.5), objectFitMode).mul(step(objectFitMode, float(3.5)));
+		const isNone = step(float(3.5), objectFitMode);
+		const uvScale = vec2(0).add(coverUVScale.mul(isCover)).add(containUVScale.mul(isContain)).add(fillUVScale.mul(isFill)).add(scaleDownUVScale.mul(isScaleDown)).add(noneUVScale.mul(isNone));
+		const adjustedUV = uv$1.sub(vec2(.5)).div(uvScale).add(vec2(.5));
+		const finalUV = vec2(adjustedUV.x, float(1).sub(adjustedUV.y));
+		const sampledColor = textureNode.sample(finalUV);
+		const isOutOfBounds = or(or(finalUV.x.lessThan(0), finalUV.x.greaterThan(1)), or(finalUV.y.lessThan(0), finalUV.y.greaterThan(1)));
+		return vec4(sampledColor.rgb, select(isOutOfBounds, float(0), sampledColor.a));
+	}
+};
+var VideoTexture_default = componentDefinition;
+export { componentDefinition as n, VideoTexture_default as t };

package/dist/core/{WaveDistortion-D9Dox1gF.js → WaveDistortion-D-TGqE0a.js}

@@ -1,5 +1,5 @@
 import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
-import { o as transformEdges } from "./transformations-YbhRK-rd.js";
+import { o as transformEdges } from "./transformations-CC_c-QAT.js";
 import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
 import { PI, abs, convertToTexture, cos, float, fract, screenUV, sin, step, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
@@ -17,7 +17,8 @@ const componentDefinition = {
 				min: 0,
 				max: 1,
 				step: .1,
-				label: "Strength"
+				label: "Strength",
+				group: "Effect"
 			}
 		},
 		frequency: {
@@ -28,7 +29,8 @@ const componentDefinition = {
 				min: .1,
 				max: 10,
 				step: .1,
-				label: "Frequency"
+				label: "Frequency",
+				group: "Effect"
 			}
 		},
 		speed: {
@@ -39,7 +41,8 @@ const componentDefinition = {
 				min: 0,
 				max: 5,
 				step: .1,
-				label: "Speed"
+				label: "Speed",
+				group: "Animation"
 			}
 		},
 		angle: {
@@ -50,7 +53,8 @@ const componentDefinition = {
 				min: 0,
 				max: 360,
 				step: 1,
-				label: "Angle"
+				label: "Angle",
+				group: "Effect"
 			}
 		},
 		waveType: {
@@ -84,7 +88,8 @@ const componentDefinition = {
 						value: "sawtooth"
 					}
 				],
-				label: "Wave Type"
+				label: "Wave Type",
+				group: "Effect"
 			}
 		},
 		edges: {
@@ -111,7 +116,8 @@ const componentDefinition = {
 						value: "wrap"
 					}
 				],
-				label: "Edges"
+				label: "Edges",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/{WebcamTexture-BnrsnuMO.js → WebcamTexture-C3EtpWf2.js}

@@ -2,7 +2,7 @@ import { SRGBColorSpace, VideoTexture } from "three/webgpu";
 import { float, max, min, or, screenUV, select, step, texture, uniform, vec2, vec4, viewportSize } from "three/tsl";
 const componentDefinition = {
 	name: "WebcamTexture",
-	category: "Base Layers",
+	category: "Textures",
 	description: "Display a live webcam feed with customizable object-fit modes",
 	props: {
 		objectFit: {
@@ -41,7 +41,8 @@ const componentDefinition = {
 						value: "none"
 					}
 				],
-				label: "Object Fit"
+				label: "Object Fit",
+				group: "Appearance"
 			}
 		},
 		mirror: {
@@ -49,7 +50,8 @@ const componentDefinition = {
 			description: "Mirror the webcam feed horizontally (selfie mode)",
 			ui: {
 				type: "checkbox",
-				label: "Mirror"
+				label: "Mirror",
+				group: "Effect"
 			}
 		}
 	},

package/dist/core/{ZoomBlur-D9At8opY.js → ZoomBlur-DmMiy4FJ.js}

@@ -1,5 +1,11 @@
-import { s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { s as transformPosition } from "./transformations-CC_c-QAT.js";
 import { Fn, convertToTexture, float, screenUV, vec2, vec4, viewportSize } from "three/tsl";
+var rawWeights = Array.from({ length: 32 }, (_, i) => {
+	const t = (i / 31 - .5) * 2;
+	return Math.exp(-.5 * t * t / .64);
+});
+var wSum = rawWeights.reduce((a, b) => a + b);
+var blurWeights = rawWeights.map((w) => w / wSum);
 const componentDefinition = {
 	name: "ZoomBlur",
 	category: "Blurs",
@@ -15,7 +21,8 @@ const componentDefinition = {
 				min: 0,
 				max: 100,
 				step: 1,
-				label: "Intensity"
+				label: "Intensity",
+				group: "Effect"
 			}
 		},
 		center: {
@@ -27,7 +34,8 @@ const componentDefinition = {
 			description: "Center point of the zoom blur",
 			ui: {
 				type: "position",
-				label: "Center"
+				label: "Center",
+				group: "Position"
 			}
 		}
 	},
@@ -43,20 +51,15 @@ const componentDefinition = {
 		return Fn(() => {
 			const uv$1 = screenUV;
 			const total = vec4(0).toVar();
-			const totalWeight = float(0).toVar();
+			const delta = uv$1.sub(center);
+			const aspectCorrectedDelta = vec2(delta.x.mul(aspect), delta.y);
 			for (let i = 0; i < 32; i++) {
-				const t = float(i).div(float(31));
-				const weightT = t.sub(.5).mul(2);
-				const weight = float(1).div(float(2.506628)).mul(float(-.5).mul(weightT).mul(weightT).div(float(.64)).exp());
-				const scale = float(1).add(radius.mul(t));
-				const delta = uv$1.sub(center);
-				const scaledDelta = vec2(delta.x.mul(aspect), delta.y).div(scale);
+				const scale = float(1).add(radius.mul(i / 31));
+				const scaledDelta = aspectCorrectedDelta.div(scale);
 				const scaledCoord = vec2(scaledDelta.x.div(aspect), scaledDelta.y).add(center);
-				const sample = childTexture.sample(scaledCoord).mul(weight);
-				total.assign(total.add(sample));
-				totalWeight.assign(totalWeight.add(weight));
+				total.assign(total.add(childTexture.sample(scaledCoord).mul(float(blurWeights[i]))));
 			}
-			return total.div(totalWeight);
+			return total;
 		})();
 	}
 };

package/dist/core/blendModes/normal-oklab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"normal-oklab.d.ts","sourceRoot":"","sources":["../../src/blendModes/normal-oklab.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAA;AA0DjC,MAAM,CAAC,OAAO,WAAU,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,GAAE,MAAM,GAAG,IAAU,mCAwB9E"}
+{"version":3,"file":"normal-oklab.d.ts","sourceRoot":"","sources":["../../src/blendModes/normal-oklab.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAA;AA2DjC,MAAM,CAAC,OAAO,WAAU,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,GAAE,MAAM,GAAG,IAAU,mCAwB9E"}

package/dist/core/blendModes/normal-oklch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"normal-oklch.d.ts","sourceRoot":"","sources":["../../src/blendModes/normal-oklch.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAA;AAiFjC,MAAM,CAAC,OAAO,WAAU,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,GAAE,MAAM,GAAG,IAAU,mCA6B9E"}
+{"version":3,"file":"normal-oklch.d.ts","sourceRoot":"","sources":["../../src/blendModes/normal-oklch.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAA;AAkFjC,MAAM,CAAC,OAAO,WAAU,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,GAAE,MAAM,GAAG,IAAU,mCA6B9E"}

package/dist/core/{colorMixing-CZPFmiT4.js → colorMixing-Ehw-Hfs_.js}

@@ -1,4 +1,4 @@
-import { atan, cos, float, max, pow, sin, sqrt, vec3, vec4 } from "three/tsl";
+import { abs, atan, cos, float, max, pow, sign, sin, sqrt, vec3, vec4 } from "three/tsl";
 var p3ToSRGB = (p3) => {
 	return vec3(p3.x.mul(1.2249401).sub(p3.y.mul(.2249404)).sub(p3.z.mul(0)), p3.x.mul(-.0420569).add(p3.y.mul(1.0420571)).add(p3.z.mul(0)), p3.x.mul(-.0196376).sub(p3.y.mul(.0786361)).add(p3.z.mul(1.0982735)));
 };
@@ -12,9 +12,9 @@ var rgbToOklab = (rgb) => {
 	const l = r.mul(.4122214708).add(g.mul(.5363325363)).add(b.mul(.0514459929));
 	const m = r.mul(.2119034982).add(g.mul(.6806995451).add(b.mul(.1073969566)));
 	const s = r.mul(.0883024619).add(g.mul(.2817188376)).add(b.mul(.6299787005));
-	const l_ = pow(l, float(1 / 3));
-	const m_ = pow(m, float(1 / 3));
-	const s_ = pow(s, float(1 / 3));
+	const l_ = sign(l).mul(pow(abs(l), float(1 / 3)));
+	const m_ = sign(m).mul(pow(abs(m), float(1 / 3)));
+	const s_ = sign(s).mul(pow(abs(s), float(1 / 3)));
 	return vec3(l_.mul(.2104542553).add(m_.mul(.793617785)).sub(s_.mul(.0040720468)), l_.mul(1.9779984951).sub(m_.mul(2.428592205)).add(s_.mul(.4505937099)), l_.mul(.0259040371).add(m_.mul(.7827717662)).sub(s_.mul(.808675766)));
 };
 var oklabToRgb = (lab) => {

package/dist/core/index.d.ts

@@ -1,9 +1,8 @@
 /**
  * Shaders © Shader Effects, Inc.
  *
- * Licensed under the Shader Effects License Agreement (v1.1).
- * You may use Shaders freely for non-production or educational use.
- * A valid paid license is required for production deployment.
+ * Licensed under the Shader Effects License Agreement (v1.4).
+ * You may use Shaders freely for personal or production usage, but redistribution, creating competing tools, SaaS use without an OEM agreement, and publishing exported code as public libraries are prohibited (see [LICENSE](./LICENSE) Section 4 for full terms).
  */
 export { shaderRenderer } from './renderer';
 export { createUniformsMap, updateUniformValue } from './utilities/uniforms';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAG3C,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAG1D,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAG7C,YAAY,EAAC,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAC,MAAM,SAAS,CAAA;AAC/F,YAAY,EAAC,SAAS,EAAC,MAAM,cAAc,CAAA;AAC3C,YAAY,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAG3C,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAG1D,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAG7C,YAAY,EAAC,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAC,MAAM,SAAS,CAAA;AAC/F,YAAY,EAAC,SAAS,EAAC,MAAM,cAAc,CAAA;AAC3C,YAAY,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAA"}

package/dist/core/index.js

@@ -1,9 +1,9 @@
 import { t as applyEdgeHandling } from "./edges-Bd7GP4s2.js";
-import { a as transformColorUpdate, c as transformPositionUpdate, r as transformColor, s as transformPosition } from "./transformations-YbhRK-rd.js";
+import { a as transformColorUpdate, c as transformPositionUpdate, r as transformColor, s as transformPosition } from "./transformations-CC_c-QAT.js";
 import { t as createAnimatedTime } from "./time-BZqyVJXt.js";
 import { Material, Mesh, MeshBasicNodeMaterial, OrthographicCamera, PlaneGeometry, SRGBColorSpace, Scene, WebGPURenderer } from "three/webgpu";
 import { WebGLRenderer } from "three";
-import { PI, abs, add, atan, convertToTexture, cos, div, dot, float, fract, max, min, mix, mul, pow, screenUV, sin, smoothstep, sqrt, step, sub, time, uniform, uv, vec2, vec3, vec4 } from "three/tsl";
+import { PI, abs, add, atan, 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) {
 	const overlayAlpha = mul(overlay.a, opacity);
 	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
@@ -22,9 +22,9 @@ var rgbToOklab$1 = (rgb) => {
 	const l = r.mul(.4122214708).add(g.mul(.5363325363)).add(b.mul(.0514459929));
 	const m = r.mul(.2119034982).add(g.mul(.6806995451).add(b.mul(.1073969566)));
 	const s = r.mul(.0883024619).add(g.mul(.2817188376)).add(b.mul(.6299787005));
-	const l_ = pow(l, float(1 / 3));
-	const m_ = pow(m, float(1 / 3));
-	const s_ = pow(s, float(1 / 3));
+	const l_ = sign(l).mul(pow(abs(l), float(1 / 3)));
+	const m_ = sign(m).mul(pow(abs(m), float(1 / 3)));
+	const s_ = sign(s).mul(pow(abs(s), float(1 / 3)));
 	return vec3(l_.mul(.2104542553).add(m_.mul(.793617785)).sub(s_.mul(.0040720468)), l_.mul(1.9779984951).sub(m_.mul(2.428592205)).add(s_.mul(.4505937099)), l_.mul(.0259040371).add(m_.mul(.7827717662)).sub(s_.mul(.808675766)));
 };
 var oklabToRgb$1 = (lab) => {
@@ -74,9 +74,9 @@ var rgbToOklab = (rgb) => {
 	const l = r.mul(.4122214708).add(g.mul(.5363325363)).add(b.mul(.0514459929));
 	const m = r.mul(.2119034982).add(g.mul(.6806995451).add(b.mul(.1073969566)));
 	const s = r.mul(.0883024619).add(g.mul(.2817188376)).add(b.mul(.6299787005));
-	const l_ = pow(l, float(1 / 3));
-	const m_ = pow(m, float(1 / 3));
-	const s_ = pow(s, float(1 / 3));
+	const l_ = sign(l).mul(pow(abs(l), float(1 / 3)));
+	const m_ = sign(m).mul(pow(abs(m), float(1 / 3)));
+	const s_ = sign(s).mul(pow(abs(s), float(1 / 3)));
 	return vec3(l_.mul(.2104542553).add(m_.mul(.793617785)).sub(s_.mul(.0040720468)), l_.mul(1.9779984951).sub(m_.mul(2.428592205)).add(s_.mul(.4505937099)), l_.mul(.0259040371).add(m_.mul(.7827717662)).sub(s_.mul(.808675766)));
 };
 var oklabToRgb = (lab) => {
@@ -598,6 +598,7 @@ function shaderRenderer() {
 	let pointerY = .5;
 	let pointerActive = false;
 	let isUpdatingMaterial = false;
+	let pendingNodeRemoval = false;
 	let globalEventUnregister = null;
 	let unloadHandler = null;
 	let enablePerformanceTracking = false;
@@ -652,7 +653,8 @@ function shaderRenderer() {
 						}
 					});
 				});
-				if (!animationFrameId) renderFrame().catch(console.warn);
+				lastRenderTime = 0;
+				renderFrame().catch(console.warn);
 			});
 		}
 	};
@@ -751,6 +753,7 @@ function shaderRenderer() {
 			console.error("Error composing shader tree:", error);
 		} finally {
 			isUpdatingMaterial = false;
+			pendingNodeRemoval = false;
 		}
 		if (!animationFrameId) renderFrame().catch(console.warn);
 	};
@@ -894,7 +897,7 @@ function shaderRenderer() {
 							renderer
 						}), childInfo), childInfo, childInfo.id, processedMasks);
 					}
-					if (childInfo.requiresChild && childInfo.metadata.blendMode === "normal" && !childHasChildren) composedChildren = applyBlendMode(vec4(0, 0, 0, 0), childResult, "normal", childInfo.opacityUniform);
+					if (childInfo.requiresChild && childInfo.metadata.blendMode === "normal" && !childHasChildren) composedChildren = mix(composedChildren || vec4(0, 0, 0, 0), childResult, childInfo.opacityUniform);
 					else if (composedChildren === void 0) if (nodeInfo.requiresRTT || effectiveOpacity !== 1) composedChildren = applyBlendMode(vec4(1, 1, 1, 0), childResult, childInfo.metadata.blendMode, childInfo.opacityUniform);
 					else composedChildren = childResult;
 					else composedChildren = applyBlendMode(composedChildren, childResult, childInfo.metadata.blendMode, childInfo.opacityUniform);
@@ -975,7 +978,7 @@ function shaderRenderer() {
 							renderer
 						}), childInfo), childInfo, childInfo.id, processedMasks);
 					}
-					if (childInfo.requiresChild && childInfo.metadata.blendMode === "normal" && !childHasChildren) composedChildrenResult = applyBlendMode(vec4(0, 0, 0, 0), childResult, "normal", childInfo.opacityUniform);
+					if (childInfo.requiresChild && childInfo.metadata.blendMode === "normal" && !childHasChildren) composedChildrenResult = mix(composedChildrenResult || vec4(0, 0, 0, 0), childResult, childInfo.opacityUniform);
 					else if (composedChildrenResult === void 0) if (nodeInfo.requiresRTT || effectiveOpacity !== 1) composedChildrenResult = applyBlendMode(vec4(1, 1, 1, 0), childResult, childInfo.metadata.blendMode, childInfo.opacityUniform);
 					else composedChildrenResult = childResult;
 					else composedChildrenResult = applyBlendMode(composedChildrenResult, childResult, childInfo.metadata.blendMode, childInfo.opacityUniform);
@@ -1149,7 +1152,6 @@ function shaderRenderer() {
 			needsRecompose = true;
 		}
 		if (metadata.transform !== void 0) {
-			existingNode.metadata.transform && needsTransformation(existingNode.metadata.transform);
 			const newTransformState = needsTransformation(metadata.transform);
 			existingNode.metadata.transform = metadata.transform;
 			if (!existingNode.transformUniforms && metadata.transform) {
@@ -1204,7 +1206,13 @@ function shaderRenderer() {
 			}
 		}
 		nodeRegistry.nodes.delete(id);
-		if (material && isInitialized) updateMaterial();
+		pendingNodeRemoval = true;
+		if (material && isInitialized) {
+			if (materialUpdateBatchRAF === null) materialUpdateBatchRAF = requestAnimationFrame(() => {
+				materialUpdateBatchRAF = null;
+				updateMaterial();
+			});
+		}
 	};
 	const executeBeforeRenderCallbacks = (deltaTime) => {
 		const params = {
@@ -1255,6 +1263,7 @@ function shaderRenderer() {
 		}
 	};
 	const renderFrame = async () => {
+		if (pendingNodeRemoval) return;
 		if (!canRender()) return;
 		const frameStartTime = enablePerformanceTracking ? performance.now() : 0;
 		const currentTime = frameStartTime || performance.now();
@@ -1389,7 +1398,7 @@ 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 = false }) => {
+	const initialize = async ({ canvas, enablePerformanceTracking: enableTracking = true }) => {
 		if (isInitialized || isInitializing) return;
 		enablePerformanceTracking = enableTracking;
 		isInitializing = true;
@@ -1570,6 +1579,7 @@ function shaderRenderer() {
 		pointerX = .5;
 		pointerY = .5;
 		pointerActive = false;
+		pendingNodeRemoval = false;
 	};
 	const getRendererType = () => {
 		if (!renderer) return null;