shaders 2.2.42 → 2.2.44

package/dist/react/RectangularCoordinates.js

@@ -0,0 +1,144 @@
+import { OmbreContext } from "./Shader.js";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { createUniformsMap } from "../core/index.js";
+import { jsx } from "react/jsx-runtime";
+import { componentDefinition } from "../core/shaders/RectangularCoordinates/index.js";
+function computeEffectiveProps(props, defaultProps$1) {
+	let baseProps = { ...defaultProps$1 };
+	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0) baseProps[key] = value;
+	return baseProps;
+}
+var DEFAULT_TRANSFORM = {
+	offsetX: 0,
+	offsetY: 0,
+	rotation: 0,
+	scale: 1,
+	anchorX: .5,
+	anchorY: .5,
+	edges: "transparent"
+};
+var defaultProps = {
+	blendMode: "normal",
+	renderOrder: 0,
+	visible: true
+};
+try {
+	if (componentDefinition && componentDefinition.props) Object.entries(componentDefinition.props).forEach(([key, config]) => {
+		const propConfig = config;
+		if (propConfig && typeof propConfig === "object" && "default" in propConfig) defaultProps[key] = propConfig.default;
+	});
+} catch (e) {
+	console.warn("Error extracting default props:", e);
+}
+const OmbreComponent = (props) => {
+	const context = useContext(OmbreContext);
+	if (!context) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
+	const { ombreParentId: parentId, ombreNodeRegister: parentRegister, ombreUniformUpdate: parentUniformUpdate, ombreMetadataUpdate: parentMetadataUpdate } = context;
+	const instanceId = useMemo(() => {
+		return props.id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
+	}, [props.id]);
+	const effectiveProps = useMemo(() => {
+		return computeEffectiveProps(props, defaultProps);
+	}, [props]);
+	const effectiveTransform = useMemo(() => ({
+		...DEFAULT_TRANSFORM,
+		...props.transform
+	}), [props.transform]);
+	const uniformsRef = useRef(null);
+	if (uniformsRef.current === null) uniformsRef.current = createUniformsMap(componentDefinition, effectiveProps, instanceId);
+	const childContextValue = useMemo(() => {
+		return {
+			...context,
+			ombreParentId: instanceId
+		};
+	}, [context, instanceId]);
+	useEffect(() => {
+		if (!uniformsRef.current) return;
+		try {
+			const metadata = {
+				blendMode: props.blendMode || "normal",
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				renderOrder: props.renderOrder || 0,
+				transform: effectiveTransform
+			};
+			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, metadata, uniformsRef.current, componentDefinition);
+			return () => {
+				parentRegister(instanceId, null, null, null, null);
+			};
+		} catch (error) {
+			console.error("Error registering shader node:", error);
+			return () => {};
+		}
+	}, [
+		instanceId,
+		parentId,
+		parentRegister
+	]);
+	const prevPropsRef = useRef({});
+	useEffect(() => {
+		if (!uniformsRef.current) return;
+		try {
+			Object.entries(uniformsRef.current).forEach(([propName, uniformData]) => {
+				if (!uniformData || typeof uniformData !== "object") return;
+				const { uniform, transform } = uniformData;
+				if (uniform?.value !== void 0 && propName in effectiveProps) {
+					const newValue = effectiveProps[propName];
+					if (newValue !== prevPropsRef.current[propName]) {
+						parentUniformUpdate(instanceId, propName, newValue);
+						prevPropsRef.current[propName] = newValue;
+					}
+				}
+			});
+		} catch (error) {
+			console.error("Error updating uniforms:", error);
+		}
+	}, [
+		effectiveProps,
+		instanceId,
+		parentUniformUpdate
+	]);
+	useEffect(() => {
+		try {
+			parentMetadataUpdate(instanceId, {
+				blendMode: props.blendMode || "normal",
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				renderOrder: props.renderOrder || 0,
+				transform: effectiveTransform
+			});
+		} catch (error) {
+			console.error("Error updating metadata:", error);
+		}
+	}, [
+		props.blendMode,
+		props.opacity,
+		props.visible,
+		props.maskSource,
+		props.maskType,
+		props.renderOrder,
+		props.id,
+		effectiveTransform,
+		instanceId,
+		parentMetadataUpdate
+	]);
+	if (props.ref && typeof props.ref === "function") try {
+		props.ref(null);
+	} catch (e) {}
+	return /* @__PURE__ */ jsx(OmbreContext.Provider, {
+		value: childContextValue,
+		children: props.children
+	});
+};
+var RectangularCoordinates_default = OmbreComponent;
+export { RectangularCoordinates_default as default };

package/dist/react/Ripples.js

@@ -0,0 +1,144 @@
+import { OmbreContext } from "./Shader.js";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { createUniformsMap } from "../core/index.js";
+import { jsx } from "react/jsx-runtime";
+import { componentDefinition } from "../core/shaders/Ripples/index.js";
+function computeEffectiveProps(props, defaultProps$1) {
+	let baseProps = { ...defaultProps$1 };
+	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0) baseProps[key] = value;
+	return baseProps;
+}
+var DEFAULT_TRANSFORM = {
+	offsetX: 0,
+	offsetY: 0,
+	rotation: 0,
+	scale: 1,
+	anchorX: .5,
+	anchorY: .5,
+	edges: "transparent"
+};
+var defaultProps = {
+	blendMode: "normal",
+	renderOrder: 0,
+	visible: true
+};
+try {
+	if (componentDefinition && componentDefinition.props) Object.entries(componentDefinition.props).forEach(([key, config]) => {
+		const propConfig = config;
+		if (propConfig && typeof propConfig === "object" && "default" in propConfig) defaultProps[key] = propConfig.default;
+	});
+} catch (e) {
+	console.warn("Error extracting default props:", e);
+}
+const OmbreComponent = (props) => {
+	const context = useContext(OmbreContext);
+	if (!context) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
+	const { ombreParentId: parentId, ombreNodeRegister: parentRegister, ombreUniformUpdate: parentUniformUpdate, ombreMetadataUpdate: parentMetadataUpdate } = context;
+	const instanceId = useMemo(() => {
+		return props.id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
+	}, [props.id]);
+	const effectiveProps = useMemo(() => {
+		return computeEffectiveProps(props, defaultProps);
+	}, [props]);
+	const effectiveTransform = useMemo(() => ({
+		...DEFAULT_TRANSFORM,
+		...props.transform
+	}), [props.transform]);
+	const uniformsRef = useRef(null);
+	if (uniformsRef.current === null) uniformsRef.current = createUniformsMap(componentDefinition, effectiveProps, instanceId);
+	const childContextValue = useMemo(() => {
+		return {
+			...context,
+			ombreParentId: instanceId
+		};
+	}, [context, instanceId]);
+	useEffect(() => {
+		if (!uniformsRef.current) return;
+		try {
+			const metadata = {
+				blendMode: props.blendMode || "normal",
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				renderOrder: props.renderOrder || 0,
+				transform: effectiveTransform
+			};
+			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, metadata, uniformsRef.current, componentDefinition);
+			return () => {
+				parentRegister(instanceId, null, null, null, null);
+			};
+		} catch (error) {
+			console.error("Error registering shader node:", error);
+			return () => {};
+		}
+	}, [
+		instanceId,
+		parentId,
+		parentRegister
+	]);
+	const prevPropsRef = useRef({});
+	useEffect(() => {
+		if (!uniformsRef.current) return;
+		try {
+			Object.entries(uniformsRef.current).forEach(([propName, uniformData]) => {
+				if (!uniformData || typeof uniformData !== "object") return;
+				const { uniform, transform } = uniformData;
+				if (uniform?.value !== void 0 && propName in effectiveProps) {
+					const newValue = effectiveProps[propName];
+					if (newValue !== prevPropsRef.current[propName]) {
+						parentUniformUpdate(instanceId, propName, newValue);
+						prevPropsRef.current[propName] = newValue;
+					}
+				}
+			});
+		} catch (error) {
+			console.error("Error updating uniforms:", error);
+		}
+	}, [
+		effectiveProps,
+		instanceId,
+		parentUniformUpdate
+	]);
+	useEffect(() => {
+		try {
+			parentMetadataUpdate(instanceId, {
+				blendMode: props.blendMode || "normal",
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				renderOrder: props.renderOrder || 0,
+				transform: effectiveTransform
+			});
+		} catch (error) {
+			console.error("Error updating metadata:", error);
+		}
+	}, [
+		props.blendMode,
+		props.opacity,
+		props.visible,
+		props.maskSource,
+		props.maskType,
+		props.renderOrder,
+		props.id,
+		effectiveTransform,
+		instanceId,
+		parentMetadataUpdate
+	]);
+	if (props.ref && typeof props.ref === "function") try {
+		props.ref(null);
+	} catch (e) {}
+	return /* @__PURE__ */ jsx(OmbreContext.Provider, {
+		value: childContextValue,
+		children: props.children
+	});
+};
+var Ripples_default = OmbreComponent;
+export { Ripples_default as default };

package/dist/react/Saturation.js

@@ -0,0 +1,144 @@
+import { OmbreContext } from "./Shader.js";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { createUniformsMap } from "../core/index.js";
+import { jsx } from "react/jsx-runtime";
+import { componentDefinition } from "../core/shaders/Saturation/index.js";
+function computeEffectiveProps(props, defaultProps$1) {
+	let baseProps = { ...defaultProps$1 };
+	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0) baseProps[key] = value;
+	return baseProps;
+}
+var DEFAULT_TRANSFORM = {
+	offsetX: 0,
+	offsetY: 0,
+	rotation: 0,
+	scale: 1,
+	anchorX: .5,
+	anchorY: .5,
+	edges: "transparent"
+};
+var defaultProps = {
+	blendMode: "normal",
+	renderOrder: 0,
+	visible: true
+};
+try {
+	if (componentDefinition && componentDefinition.props) Object.entries(componentDefinition.props).forEach(([key, config]) => {
+		const propConfig = config;
+		if (propConfig && typeof propConfig === "object" && "default" in propConfig) defaultProps[key] = propConfig.default;
+	});
+} catch (e) {
+	console.warn("Error extracting default props:", e);
+}
+const OmbreComponent = (props) => {
+	const context = useContext(OmbreContext);
+	if (!context) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
+	const { ombreParentId: parentId, ombreNodeRegister: parentRegister, ombreUniformUpdate: parentUniformUpdate, ombreMetadataUpdate: parentMetadataUpdate } = context;
+	const instanceId = useMemo(() => {
+		return props.id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
+	}, [props.id]);
+	const effectiveProps = useMemo(() => {
+		return computeEffectiveProps(props, defaultProps);
+	}, [props]);
+	const effectiveTransform = useMemo(() => ({
+		...DEFAULT_TRANSFORM,
+		...props.transform
+	}), [props.transform]);
+	const uniformsRef = useRef(null);
+	if (uniformsRef.current === null) uniformsRef.current = createUniformsMap(componentDefinition, effectiveProps, instanceId);
+	const childContextValue = useMemo(() => {
+		return {
+			...context,
+			ombreParentId: instanceId
+		};
+	}, [context, instanceId]);
+	useEffect(() => {
+		if (!uniformsRef.current) return;
+		try {
+			const metadata = {
+				blendMode: props.blendMode || "normal",
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				renderOrder: props.renderOrder || 0,
+				transform: effectiveTransform
+			};
+			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, metadata, uniformsRef.current, componentDefinition);
+			return () => {
+				parentRegister(instanceId, null, null, null, null);
+			};
+		} catch (error) {
+			console.error("Error registering shader node:", error);
+			return () => {};
+		}
+	}, [
+		instanceId,
+		parentId,
+		parentRegister
+	]);
+	const prevPropsRef = useRef({});
+	useEffect(() => {
+		if (!uniformsRef.current) return;
+		try {
+			Object.entries(uniformsRef.current).forEach(([propName, uniformData]) => {
+				if (!uniformData || typeof uniformData !== "object") return;
+				const { uniform, transform } = uniformData;
+				if (uniform?.value !== void 0 && propName in effectiveProps) {
+					const newValue = effectiveProps[propName];
+					if (newValue !== prevPropsRef.current[propName]) {
+						parentUniformUpdate(instanceId, propName, newValue);
+						prevPropsRef.current[propName] = newValue;
+					}
+				}
+			});
+		} catch (error) {
+			console.error("Error updating uniforms:", error);
+		}
+	}, [
+		effectiveProps,
+		instanceId,
+		parentUniformUpdate
+	]);
+	useEffect(() => {
+		try {
+			parentMetadataUpdate(instanceId, {
+				blendMode: props.blendMode || "normal",
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				renderOrder: props.renderOrder || 0,
+				transform: effectiveTransform
+			});
+		} catch (error) {
+			console.error("Error updating metadata:", error);
+		}
+	}, [
+		props.blendMode,
+		props.opacity,
+		props.visible,
+		props.maskSource,
+		props.maskType,
+		props.renderOrder,
+		props.id,
+		effectiveTransform,
+		instanceId,
+		parentMetadataUpdate
+	]);
+	if (props.ref && typeof props.ref === "function") try {
+		props.ref(null);
+	} catch (e) {}
+	return /* @__PURE__ */ jsx(OmbreContext.Provider, {
+		value: childContextValue,
+		children: props.children
+	});
+};
+var Saturation_default = OmbreComponent;
+export { Saturation_default as default };

package/dist/react/Shader.js

@@ -0,0 +1,166 @@
+import { createContext, useEffect, useMemo, useRef } from "react";
+import { shaderRenderer } from "../core/index.js";
+import { vec4 } from "three/tsl";
+import { TelemetryCollector, isExternalUser, shouldCollectTelemetry } from "../core/telemetry/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const OmbreContext = createContext(null);
+const Shader = ({ children, hideNotice = false, style = {}, className = "",...rest }) => {
+	const containerRef = useRef(null);
+	const canvasRef = useRef(null);
+	const rootId = useMemo(() => "ombre-root-" + Math.random().toString(36).substring(7), []);
+	const rendererRef = useRef(null);
+	if (rendererRef.current === null) rendererRef.current = shaderRenderer();
+	const telemetryCollectorRef = useRef(null);
+	const nodeRegister = useMemo(() => {
+		return (id, fragmentNodeFunc, parentId, metadata, uniforms = null, componentDefinition = null) => {
+			if (fragmentNodeFunc === null) {
+				try {
+					rendererRef.current.removeNode(id);
+				} catch (err) {
+					console.warn("Error removing node:", err);
+				}
+				return;
+			}
+			try {
+				rendererRef.current.registerNode(id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition);
+			} catch (err) {
+				console.error("Error registering node:", err, {
+					id,
+					parentId,
+					metadata
+				});
+			}
+		};
+	}, []);
+	const uniformUpdate = useMemo(() => {
+		return (nodeId, uniformName, value) => {
+			try {
+				rendererRef.current.updateUniformValue(nodeId, uniformName, value);
+			} catch (err) {
+				console.warn("Error updating uniform:", err);
+			}
+		};
+	}, []);
+	const metadataUpdate = useMemo(() => {
+		return (nodeId, metadata) => {
+			try {
+				rendererRef.current.updateNodeMetadata(nodeId, metadata);
+			} catch (err) {
+				console.warn("Error updating metadata:", err);
+			}
+		};
+	}, []);
+	const contextValue = useMemo(() => {
+		return {
+			ombreParentId: rootId,
+			ombreNodeRegister: nodeRegister,
+			ombreUniformUpdate: uniformUpdate,
+			ombreMetadataUpdate: metadataUpdate
+		};
+	}, [
+		rootId,
+		nodeRegister,
+		uniformUpdate,
+		metadataUpdate
+	]);
+	const isInitializedRef = useRef(false);
+	const isInitializingRef = useRef(false);
+	const isCleanedUpRef = useRef(false);
+	const wasVisibleRef = useRef(false);
+	const visibilityObserverRef = useRef(null);
+	const initializeRenderer = async () => {
+		const canvas = canvasRef.current;
+		if (!canvas || isInitializedRef.current || isInitializingRef.current) return;
+		isInitializingRef.current = true;
+		try {
+			const renderer = rendererRef.current;
+			if (!renderer.isInitialized()) await renderer.initialize({ canvas });
+			renderer.registerNode(rootId, ({ childNode }) => childNode || vec4(0, 0, 0, 0), null, null, {});
+			isInitializedRef.current = true;
+			isInitializingRef.current = false;
+			if (!hideNotice) renderer.showLicenseWarning();
+			if (isExternalUser() && shouldCollectTelemetry()) {
+				telemetryCollectorRef.current = new TelemetryCollector(renderer);
+				telemetryCollectorRef.current.start();
+			}
+		} catch (err) {
+			console.error("[Shader] Initialization failed:", err);
+			isInitializingRef.current = false;
+			throw err;
+		}
+	};
+	const setupVisibilityObserver = () => {
+		const container = containerRef.current;
+		if (!container || visibilityObserverRef.current) return;
+		visibilityObserverRef.current = new IntersectionObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			const rect = container.getBoundingClientRect();
+			const isCurrentlyVisible = entry.isIntersecting && rect && rect.width > 0 && rect.height > 0;
+			if (isCurrentlyVisible && !wasVisibleRef.current) {
+				if (rendererRef.current.isInitialized()) rendererRef.current.startAnimation();
+				else initializeRenderer().catch(console.error);
+				wasVisibleRef.current = true;
+			} else if (!isCurrentlyVisible && wasVisibleRef.current) {
+				rendererRef.current.stopAnimation();
+				wasVisibleRef.current = false;
+			}
+		}, { threshold: 0 });
+		visibilityObserverRef.current.observe(container);
+	};
+	useEffect(() => {
+		isCleanedUpRef.current = false;
+		const container = containerRef.current;
+		if (!container) return;
+		const rect = container.getBoundingClientRect();
+		if (rect.width > 0 && rect.height > 0) {
+			initializeRenderer().catch(console.error);
+			wasVisibleRef.current = true;
+		} else wasVisibleRef.current = false;
+		setupVisibilityObserver();
+		return () => {
+			if (isCleanedUpRef.current) return;
+			isCleanedUpRef.current = true;
+			if (telemetryCollectorRef.current) {
+				telemetryCollectorRef.current.stop();
+				telemetryCollectorRef.current = null;
+			}
+			if (visibilityObserverRef.current) {
+				visibilityObserverRef.current.disconnect();
+				visibilityObserverRef.current = null;
+			}
+			if (rendererRef.current && isInitializedRef.current) try {
+				rendererRef.current.cleanup();
+			} catch (err) {
+				console.warn("[Shader] Error during cleanup:", err);
+			}
+			isInitializedRef.current = false;
+			isInitializingRef.current = false;
+		};
+	}, []);
+	useEffect(() => {
+		if (!hideNotice && rendererRef.current && isInitializedRef.current) try {
+			rendererRef.current.showLicenseWarning();
+		} catch (err) {}
+	}, [hideNotice]);
+	return /* @__PURE__ */ jsx(OmbreContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: containerRef,
+			className: "shader" + (className ? " " + className : ""),
+			style,
+			...rest,
+			children: [/* @__PURE__ */ jsx("canvas", {
+				"data-renderer": "shaders",
+				ref: canvasRef,
+				style: {
+					width: "100%",
+					height: "100%",
+					display: "block"
+				}
+			}), children]
+		})
+	});
+};
+var Shader_default = Shader;
+export { OmbreContext, Shader_default as default };