@snailicid3/gbt-scope 0.0.1

package/dist/index.js

@@ -0,0 +1,669 @@
+/*
+ * @snailicid3/gbt-scope v0.0.1
+ * Module: GbtScope
+ * (c) 2026 Gillian Tunney
+ * React components and hooks for the operator user interface.
+ * https://github.com/gbtunney/gbt-monorepov2
+ * Released under the MIT License.
+ * Build: 9/9/2026, 7:05:01 AM
+ */
+import { ArcRotateCamera, Camera, Color4, FreeCamera, HemisphericLight, MeshBuilder, ShaderMaterial, Texture, Vector2, Vector3, Vector4 } from "@babylonjs/core";
+import { isValidColor, parseColorToHexStrict } from "@snailicid3/color";
+import SceneComponent from "babylonjs-hook";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/helpers.ts
+const getResolution = (dimensions) => {
+	const { height: _height, width: _width } = dimensions;
+	const aA = _height / _width > 1 ? _width / _height : 1;
+	const aB = _height / _width > 1 ? 1 : _height / _width;
+	return new Vector4(_width, _height, aA, aB);
+};
+const { x, y, z } = Vector3.Zero();
+const setOrthoCamera = (scene, camera, { enabled = true, ortho = true, target = [
+	0,
+	0,
+	0
+] }) => {
+	camera.setTarget(new Vector3(...target));
+	camera.mode = Camera.ORTHOGRAPHIC_CAMERA;
+	if (enabled) camera.attachControl(scene.getEngine().getRenderingCanvas(), true);
+	else camera.detachControl();
+	return camera;
+};
+const setRotateCameraPosition = (camera, scene, { enabled = true, hRotation = 0, mouseWheelSpeed = .01, position = [
+	x,
+	y,
+	z
+], radius = 10, target = [
+	0,
+	0,
+	0
+], vRotation = 0 }) => {
+	camera.alpha = hRotation;
+	camera.beta = vRotation;
+	camera.radius = radius;
+	camera.wheelDeltaPercentage = mouseWheelSpeed;
+	camera.setTarget(new Vector3(...target));
+	if (enabled) camera.attachControl(scene.getEngine().getRenderingCanvas(), true);
+	else camera.detachControl();
+};
+//#endregion
+//#region src/materials/shader-radial-symmetry.ts
+const vertexShader = `
+precision highp float;
+
+// Attributes
+attribute vec3 position;
+attribute vec2 uv;
+
+// Uniforms
+uniform mat4 worldViewProjection;
+
+// Varying
+varying vec2 vUv;
+
+void main() {
+    vUv = uv;
+    gl_Position = worldViewProjection * vec4(position, 1.0);
+}
+`;
+const fragmentShader = `
+precision mediump float;
+
+// Uniforms
+uniform sampler2D uTexture;
+uniform vec4 resolution;
+uniform float uOpacity;
+uniform float segments;
+uniform vec2 uOffset;
+uniform float uRotation;
+uniform float uOffsetAmount;
+uniform float uRotationAmount;
+uniform float uScaleFactor;
+uniform float uImageAspect;
+uniform float uTiling; // Tiling factor for the entire pattern
+uniform float uTileMode; // 0 = none, 1 = repeat, 2 = mirror
+
+// Varying
+varying vec2 vUv;
+
+const float PI = 3.14159265359;
+
+vec2 adjustUV(vec2 uv, vec2 offset, float rotation) {
+    float cosRot = cos(rotation * uRotationAmount);
+    float sinRot = sin(rotation * uRotationAmount);
+    mat2 rotMat = mat2(cosRot, -sinRot, sinRot, cosRot);
+    vec2 rotatedUV = rotMat * (uv - vec2(0.5)) + vec2(0.5); // Apply rotation first
+    return rotatedUV + offset * uOffsetAmount; // Apply offset after rotation
+}
+
+// Mirrored repeat: even tiles use fract, odd tiles use the reversed fract,
+// producing seamless mirrored edges instead of hard wraps.
+vec2 mirrorUV(vec2 uv) {
+    vec2 tile = floor(uv);
+    vec2 odd = mod(tile, 2.0);
+    return mix(fract(uv), 1.0 - fract(uv), odd);
+}
+
+void main() {
+    // Adjust UV coordinates for resolution
+    vec2 newUV = (vUv - vec2(0.5)) * resolution.zw + vec2(0.5);
+    vec2 uv = newUV * 2.0 - 1.0;
+
+    // Convert to polar coordinates
+    float angle = atan(uv.y, uv.x);
+    float radius = length(uv);
+
+    // Apply kaleidoscope effect
+    float segment = PI * 2.0 / segments;
+    angle = mod(angle, segment);
+    angle = segment - abs(segment / 2.0 - angle);
+    uv = radius * vec2(cos(angle), sin(angle));
+
+    // Scale the pattern
+    float scale = 1.0 / uScaleFactor;
+   
+    // Apply tiling to the entire pattern based on the selected tile mode
+    vec2 scaledUV = uv * uTiling;
+    vec2 tiledUV;
+    if (uTileMode < 0.5) {
+        tiledUV = uv; // none: no wrapping
+    } else if (uTileMode < 1.5) {
+        tiledUV = fract(scaledUV); // repeat: square repeats (historical behavior)
+    } else {
+        tiledUV = mirrorUV(scaledUV); // mirror: seamless mirrored repeats
+    }
+
+    // Adjust UV for texture sampling
+    vec2 adjustedUV = adjustUV(tiledUV * scale + scale, uOffset, uRotation);
+    vec2 aspectCorrectedUV = vec2(adjustedUV.x, adjustedUV.y * uImageAspect);
+
+    // Sample the texture
+    vec4 color = texture2D(uTexture, aspectCorrectedUV);
+    color.a *= uOpacity;
+
+    // Output the final color
+    gl_FragColor = color;
+}
+`;
+//#endregion
+//#region src/motion/curve.ts
+/**
+* Maps an input value through a {@link GbtScopeCurve}: deadzone → gain → exponent → clamp → optional invert. The input
+* is treated by magnitude (`Math.abs`), so direction is supplied by `invert`, not the sign of `value`.
+*/
+const applyCurve = (value, curve = {}) => {
+	const { deadzone = 0, exponent = 1, invert = false, max = 1, min = 0, multiplier = 1 } = curve;
+	const normalized = Math.max(0, Math.abs(value) - deadzone);
+	const curved = Math.pow(normalized * multiplier, exponent);
+	const clamped = Math.min(Math.max(curved, min), max);
+	return invert ? -clamped : clamped;
+};
+/**
+* Type guard distinguishing the legacy `[min, max]` tuple form of `mouse_curve` from the richer {@link GbtScopeCurve}
+* object form.
+*/
+const isTupleCurve = (value) => {
+	if (!Array.isArray(value)) return false;
+	const items = value;
+	return items.length === 2 && typeof items[0] === "number" && typeof items[1] === "number";
+};
+/**
+* Bridges the legacy `[min, max]` tuple (plus a separate `mouse_multiplier`) into an equivalent {@link GbtScopeCurve}.
+* With the historical defaults `[0, 0.015]` and multiplier `0.01`, `applyCurve` reproduces the old inline
+* `Math.min(Math.max(dist * mult, min), max)` clamp exactly.
+*/
+const tupleToGbtScopeCurve = (tuple, multiplier = 1) => ({
+	max: tuple[1],
+	min: tuple[0],
+	multiplier
+});
+//#endregion
+//#region src/motion/animator.ts
+/**
+* Applies every animator to a copy of `state` for one frame and returns the new state. Each animator's source value is
+* curved, scaled by `speed * delta` (frame-rate independent), then added to or set on its target.
+*/
+const applyAnimators = (state, animators, inputs) => {
+	const next = {
+		...state,
+		offset: [...state.offset]
+	};
+	const getSourceValue = (source) => {
+		switch (source) {
+			case "mouseDistance": return inputs.mouseDistance;
+			case "scrollProgress": return inputs.scrollProgress;
+			case "scrollVelocity": return inputs.scrollVelocity;
+			case "time": return inputs.time;
+		}
+	};
+	animators.forEach((anim) => {
+		const raw = getSourceValue(anim.source);
+		const curved = applyCurve(raw, anim.curve);
+		const value = (anim.speed ?? 1) * curved * inputs.delta;
+		const apply = (current) => anim.mode === "set" ? value : current + value;
+		switch (anim.target) {
+			case "offset.x":
+				next.offset = [apply(next.offset[0]), next.offset[1]];
+				break;
+			case "offset.y":
+				next.offset = [next.offset[0], apply(next.offset[1])];
+				break;
+			case "opacity":
+				next.opacity = apply(next.opacity);
+				break;
+			case "rotation":
+				next.rotation = apply(next.rotation);
+				break;
+			case "scaleFactor": next.scaleFactor = apply(next.scaleFactor);
+		}
+	});
+	return next;
+};
+//#endregion
+//#region src/motion/driver.ts
+/** Pushes a {@link GbtScopeState} onto the shader material's uniforms. */
+const writeState = (material, state) => {
+	material.setFloat("uRotation", state.rotation);
+	material.setFloat("uScaleFactor", state.scaleFactor);
+	material.setFloat("uOpacity", state.opacity);
+	material.setVector2("uOffset", new Vector2(state.offset[0], state.offset[1]));
+};
+/**
+* Registers a single render-loop observer that drives the material's animated uniforms from the animators + live
+* inputs, frame-rate independent via `engine.getDeltaTime()`. Replaces Babylon's Animation API. Returns a dispose
+* function that removes the observer.
+*/
+const createGbtScopeDriver = (scene, material, { animatorsRef, overridesRef, pointer, scroll, stateRef }) => {
+	let time = 0;
+	const observer = scene.onBeforeRenderObservable.add(() => {
+		const delta = scene.getEngine().getDeltaTime() / 1e3;
+		time += delta;
+		const overrides = overridesRef?.current;
+		const inputs = {
+			delta,
+			mouseDistance: overrides?.mouseDistance ?? Math.hypot(pointer.state.x, pointer.state.y),
+			scrollProgress: overrides?.scrollProgress ?? scroll.state.progress,
+			scrollVelocity: overrides?.scrollVelocity ?? scroll.state.velocity,
+			time
+		};
+		stateRef.current = applyAnimators(stateRef.current, animatorsRef.current, inputs);
+		writeState(material, stateRef.current);
+		scroll.decay();
+	});
+	return () => {
+		scene.onBeforeRenderObservable.remove(observer);
+	};
+};
+//#endregion
+//#region src/types.ts
+/**
+* Canonical default values for {@link GbtScopeMaterialProps}. `src` is required and has no default. Imported by
+* component defaults and Storybook args so the defaults live in a single place.
+*/
+const defaultGbtScopeMaterialProps = {
+	imageAspect: 1,
+	offset: [0, 0],
+	offsetScale: 1,
+	opacity: 1,
+	rotation: 0,
+	rotationScale: 1,
+	scaleFactor: 1,
+	segments: 6,
+	tileMode: "repeat",
+	tiling: 1
+};
+//#endregion
+//#region src/components/GbtScopeMaterial.tsx
+const DEFAULT_DIMENSIONS = {
+	height: 1200,
+	width: 1200
+};
+/** Maps a {@link GbtScopeTileMode} to the shader's `uTileMode` float. */
+const tileModeToFloat = (mode) => mode === "none" ? 0 : mode === "mirror" ? 2 : 1;
+const UNIFORMS = [
+	"worldViewProjection",
+	"uTexture",
+	"resolution",
+	"uOpacity",
+	"segments",
+	"uOffset",
+	"uRotation",
+	"uOffsetAmount",
+	"uRotationAmount",
+	"uScaleFactor",
+	"uImageAspect",
+	"uTiling",
+	"uTileMode"
+];
+/**
+* Kaleidoscope shader material applied to a Babylon mesh. Static uniforms update reactively from props; the animated
+* uniforms (rotation/offset/scaleFactor/ opacity) are driven each frame by {@link createGbtScopeDriver} from the
+* `animators` + live pointer/scroll inputs. No Babylon Animation is used.
+*/
+const GbtScopeMaterial = ({ animators = [], dimensions = DEFAULT_DIMENSIONS, imageAspect = defaultGbtScopeMaterialProps.imageAspect, inputOverrides, mesh, name = "kaleidoscope", offset = defaultGbtScopeMaterialProps.offset, offsetScale = defaultGbtScopeMaterialProps.offsetScale, onInit, onUpdate, opacity = defaultGbtScopeMaterialProps.opacity, pointer, rotation = defaultGbtScopeMaterialProps.rotation, rotationScale = defaultGbtScopeMaterialProps.rotationScale, scaleFactor = defaultGbtScopeMaterialProps.scaleFactor, scroll, segments = defaultGbtScopeMaterialProps.segments, src, tileMode = defaultGbtScopeMaterialProps.tileMode, tiling = defaultGbtScopeMaterialProps.tiling }) => {
+	const materialRef = useRef(null);
+	const animatorsRef = useRef(animators);
+	const overridesRef = useRef(inputOverrides);
+	const stateRef = useRef({
+		offset: [offset[0], offset[1]],
+		opacity,
+		rotation,
+		scaleFactor
+	});
+	useEffect(() => {
+		if (!src || !mesh) return void 0;
+		const scene = mesh.getScene();
+		const material = new ShaderMaterial(name, scene, {
+			fragmentSource: fragmentShader,
+			vertexSource: vertexShader
+		}, {
+			attributes: ["position", "uv"],
+			uniforms: UNIFORMS
+		});
+		material.setTexture("uTexture", new Texture(src, scene, true, false));
+		mesh.material = material;
+		materialRef.current = material;
+		const disposeDriver = createGbtScopeDriver(scene, material, {
+			animatorsRef,
+			overridesRef,
+			pointer,
+			scroll,
+			stateRef
+		});
+		onInit?.(material);
+		return () => {
+			disposeDriver();
+			material.dispose();
+			materialRef.current = null;
+		};
+	}, [
+		mesh,
+		src,
+		name
+	]);
+	useEffect(() => {
+		animatorsRef.current = animators;
+	}, [animators]);
+	useEffect(() => {
+		overridesRef.current = inputOverrides;
+	}, [inputOverrides]);
+	useEffect(() => {
+		stateRef.current = {
+			offset: [offset[0], offset[1]],
+			opacity,
+			rotation,
+			scaleFactor
+		};
+	}, [
+		rotation,
+		offset,
+		scaleFactor,
+		opacity
+	]);
+	useEffect(() => {
+		const material = materialRef.current;
+		if (!material) return;
+		material.setVector4("resolution", getResolution(dimensions));
+		material.setFloat("segments", segments);
+		material.setFloat("uOffsetAmount", offsetScale);
+		material.setFloat("uRotationAmount", rotationScale);
+		material.setFloat("uImageAspect", imageAspect);
+		material.setFloat("uTiling", tiling || 1);
+		material.setFloat("uTileMode", tileModeToFloat(tileMode));
+		onUpdate?.(material);
+	}, [
+		dimensions,
+		segments,
+		offsetScale,
+		rotationScale,
+		imageAspect,
+		tiling,
+		tileMode,
+		onUpdate
+	]);
+	return null;
+};
+//#endregion
+//#region src/motion/pointer.ts
+/**
+* Creates a mutable pointer-state object for use inside a Babylon.js scene setup callback. Intentionally NOT a React
+* hook: `onSceneReady` runs outside React's render cycle, so a hook's state would be stale inside the render
+* observable. The returned `state` object is mutated in place and is safe to read every frame.
+*
+* Position is normalized to [-1, 1] on both axes (canvas-relative). Uses pointer events so mouse and touch behave
+* uniformly: a mouse resets to [0, 0] on leaving the canvas, while a touch latches at the last tap/drag position (tap
+* center to zero it) — hover-less devices would otherwise never produce input.
+*/
+const createPointerState = () => {
+	const _state = {
+		x: 0,
+		y: 0
+	};
+	const handlePointerMove = (event) => {
+		const rect = event.currentTarget.getBoundingClientRect();
+		_state.x = (event.clientX - rect.left) / rect.width * 2 - 1;
+		_state.y = (event.clientY - rect.top) / rect.height * 2 - 1;
+	};
+	const handlePointerLeave = (event) => {
+		if (event.pointerType !== "mouse") return;
+		_state.x = 0;
+		_state.y = 0;
+	};
+	return {
+		attach: (canvas) => {
+			canvas.addEventListener("pointerdown", handlePointerMove);
+			canvas.addEventListener("pointermove", handlePointerMove);
+			canvas.addEventListener("pointerleave", handlePointerLeave);
+		},
+		detach: (canvas) => {
+			canvas.removeEventListener("pointerdown", handlePointerMove);
+			canvas.removeEventListener("pointermove", handlePointerMove);
+			canvas.removeEventListener("pointerleave", handlePointerLeave);
+		},
+		state: _state
+	};
+};
+//#endregion
+//#region src/motion/scroll.ts
+const readProgress = () => {
+	if (typeof window === "undefined" || typeof document === "undefined") return 0;
+	const doc = document.documentElement;
+	const max = doc.scrollHeight - doc.clientHeight;
+	return max > 0 ? Math.min(Math.max(window.scrollY / max, 0), 1) : 0;
+};
+/**
+* Creates a mutable scroll-state object for use inside a Babylon.js scene setup callback. Tracks page scroll `progress`
+* [0,1] and a wheel-driven `velocity` that the driver decays each frame. Plain factory (not a React hook) — mirrors
+* {@link ./pointer.createPointerState} so it can be read from the render observable.
+*/
+const createScrollState = () => {
+	const _state = {
+		progress: readProgress(),
+		velocity: 0
+	};
+	const handleWheel = (event) => {
+		_state.velocity += event.deltaY / 1e3;
+	};
+	const handleScroll = () => {
+		_state.progress = readProgress();
+	};
+	const resolve = (target) => target ?? (typeof window !== "undefined" ? window : {});
+	return {
+		attach: (target) => {
+			const t = resolve(target);
+			t.addEventListener("wheel", handleWheel, { passive: true });
+			t.addEventListener("scroll", handleScroll, { passive: true });
+		},
+		decay: (factor = .9) => {
+			_state.velocity *= factor;
+			if (Math.abs(_state.velocity) < 1e-4) _state.velocity = 0;
+		},
+		detach: (target) => {
+			const t = resolve(target);
+			t.removeEventListener("wheel", handleWheel);
+			t.removeEventListener("scroll", handleScroll);
+		},
+		state: _state
+	};
+};
+//#endregion
+//#region src/components/GbtScopeFlatViewer.tsx
+/** Default props for the flat viewer — single source of truth for Storybook args. */
+const defaultGbtScopeFlatViewerProps = {
+	...defaultGbtScopeMaterialProps,
+	animators: [],
+	aspect_ratio: 1,
+	bg_color: "black",
+	cameraSettings: {
+		enabled: false,
+		ortho: true,
+		target: [
+			0,
+			0,
+			0
+		]
+	},
+	name: "gbt-scope-flat",
+	resolution: "screen",
+	src: "uv-checker.png"
+};
+const GbtScopeFlatViewer = ({ animators = [], aspect_ratio = 1, bg_color = "black", cameraSettings = {
+	enabled: false,
+	ortho: true,
+	target: [
+		0,
+		0,
+		0
+	]
+}, imageAspect = defaultGbtScopeMaterialProps.imageAspect, inputOverrides, name = "gbt-scope-flat", offset = defaultGbtScopeMaterialProps.offset, offsetScale = defaultGbtScopeMaterialProps.offsetScale, opacity = defaultGbtScopeMaterialProps.opacity, resolution = "screen", rotation = defaultGbtScopeMaterialProps.rotation, rotationScale = defaultGbtScopeMaterialProps.rotationScale, scaleFactor = defaultGbtScopeMaterialProps.scaleFactor, segments = defaultGbtScopeMaterialProps.segments, src, tileMode = defaultGbtScopeMaterialProps.tileMode, tiling = defaultGbtScopeMaterialProps.tiling }) => {
+	const [scene, setScene] = useState(null);
+	const [plane, setPlane] = useState(null);
+	const [pointerState] = useState(createPointerState);
+	const [scrollState] = useState(createScrollState);
+	const customStyle = {
+		backgroundColor: isValidColor(bg_color) ? parseColorToHexStrict(bg_color) : "initial",
+		border: "2px solid green",
+		margin: 0,
+		padding: 0,
+		position: "relative",
+		...aspect_ratio !== "parent" ? { aspectRatio: aspect_ratio } : {}
+	};
+	const dimensions = resolution === "screen" ? scene !== null ? {
+		height: scene.getEngine().getRenderHeight(),
+		width: scene.getEngine().getRenderWidth()
+	} : void 0 : resolution ?? void 0;
+	const onSceneReady = (_scene) => {
+		_scene.clearColor = new Color4(0, 0, 0, 1);
+		setScene(_scene);
+		const camera = new FreeCamera(`camera_${name}`, new Vector3(0, 0, -10), _scene);
+		setOrthoCamera(_scene, camera, cameraSettings);
+		new HemisphericLight(`light_${name}`, new Vector3(0, 1, 0), _scene);
+		const planeMesh = MeshBuilder.CreatePlane(`plane_${name}`, {
+			height: _scene.getEngine().getRenderHeight(),
+			width: _scene.getEngine().getRenderWidth()
+		}, _scene);
+		setPlane(planeMesh);
+		const canvas = _scene.getEngine().getRenderingCanvas();
+		if (canvas) {
+			canvas.tabIndex = 1;
+			canvas.addEventListener("keydown", (event) => {
+				if (event.key === "Escape") setOrthoCamera(_scene, camera, cameraSettings);
+			});
+			pointerState.attach(canvas);
+			scrollState.attach();
+			_scene.onDisposeObservable.add(() => {
+				pointerState.detach(canvas);
+				scrollState.detach();
+			});
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		style: customStyle,
+		children: /* @__PURE__ */ jsx(SceneComponent, {
+			antialias: true,
+			id: "my-canvas",
+			onSceneReady,
+			style: {
+				height: "100%",
+				width: "100%"
+			},
+			children: scene && plane && /* @__PURE__ */ jsx(GbtScopeMaterial, {
+				animators,
+				dimensions,
+				imageAspect,
+				inputOverrides,
+				mesh: plane,
+				name: `material_${name}`,
+				offset,
+				offsetScale,
+				opacity,
+				pointer: pointerState,
+				rotation,
+				rotationScale,
+				scaleFactor,
+				scroll: scrollState,
+				segments,
+				src,
+				tileMode,
+				tiling
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/GbtScopeMeshViewer.tsx
+/** Default props for the 3D mesh viewer — single source of truth for Storybook args. */
+const defaultGbtScopeMeshViewerProps = {
+	...defaultGbtScopeMaterialProps,
+	animators: [],
+	aspect_ratio: 1,
+	bg_color: "black",
+	cameraSettings: {
+		enabled: true,
+		hRotation: Math.PI / 2,
+		vRotation: Math.PI / 4
+	},
+	name: "gbt-scope-mesh",
+	resolution: null,
+	src: "uv-checker.png"
+};
+const GbtScopeMeshViewer = ({ animators = [], aspect_ratio = 1, bg_color = "black", cameraSettings = {
+	enabled: true,
+	hRotation: Math.PI / 2,
+	vRotation: Math.PI / 4
+}, imageAspect = defaultGbtScopeMaterialProps.imageAspect, inputOverrides, name = "gbt-scope-mesh", offset = defaultGbtScopeMaterialProps.offset, offsetScale = defaultGbtScopeMaterialProps.offsetScale, opacity = defaultGbtScopeMaterialProps.opacity, resolution = null, rotation = defaultGbtScopeMaterialProps.rotation, rotationScale = defaultGbtScopeMaterialProps.rotationScale, scaleFactor = defaultGbtScopeMaterialProps.scaleFactor, segments = defaultGbtScopeMaterialProps.segments, src, tileMode = defaultGbtScopeMaterialProps.tileMode, tiling = defaultGbtScopeMaterialProps.tiling }) => {
+	const [scene, setScene] = useState(null);
+	const [box, setBox] = useState(null);
+	const [pointerState] = useState(createPointerState);
+	const [scrollState] = useState(createScrollState);
+	const customStyle = {
+		backgroundColor: isValidColor(bg_color) ? parseColorToHexStrict(bg_color) : "initial",
+		border: "2px solid green",
+		...aspect_ratio !== "parent" ? { aspectRatio: aspect_ratio } : {}
+	};
+	const dimensions = resolution === "screen" ? scene !== null ? {
+		height: scene.getEngine().getRenderHeight(),
+		width: scene.getEngine().getRenderWidth()
+	} : void 0 : resolution ?? void 0;
+	const onSceneReady = (_scene) => {
+		_scene.clearColor = new Color4(0, 0, 0, 0);
+		setScene(_scene);
+		const camera = new ArcRotateCamera(`camera_${name}`, cameraSettings.hRotation ?? Math.PI / 2, cameraSettings.vRotation ?? Math.PI / 4, 10, Vector3.Zero(), _scene);
+		setRotateCameraPosition(camera, _scene, cameraSettings);
+		new HemisphericLight(`light_${name}`, new Vector3(0, 1, 0), _scene);
+		const boxMesh = MeshBuilder.CreateBox(`box_${name}`, { size: 2 }, _scene);
+		boxMesh.position.y = 1;
+		setBox(boxMesh);
+		const canvas = _scene.getEngine().getRenderingCanvas();
+		if (canvas) {
+			canvas.tabIndex = 1;
+			canvas.addEventListener("keydown", (event) => {
+				if (event.key === "Escape") setRotateCameraPosition(camera, _scene, cameraSettings);
+			});
+			pointerState.attach(canvas);
+			scrollState.attach();
+			_scene.onDisposeObservable.add(() => {
+				pointerState.detach(canvas);
+				scrollState.detach();
+			});
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		style: customStyle,
+		children: /* @__PURE__ */ jsx(SceneComponent, {
+			antialias: true,
+			id: "my-canvas",
+			onSceneReady,
+			style: {
+				height: "100%",
+				width: "100%"
+			},
+			children: scene && box && /* @__PURE__ */ jsx(GbtScopeMaterial, {
+				animators,
+				dimensions,
+				imageAspect,
+				inputOverrides,
+				mesh: box,
+				name: `material_${name}`,
+				offset,
+				offsetScale,
+				opacity,
+				pointer: pointerState,
+				rotation,
+				rotationScale,
+				scaleFactor,
+				scroll: scrollState,
+				segments,
+				src,
+				tileMode,
+				tiling
+			})
+		})
+	});
+};
+//#endregion
+export { GbtScopeFlatViewer, GbtScopeMaterial, GbtScopeMeshViewer, applyAnimators, applyCurve, createPointerState, createScrollState, defaultGbtScopeFlatViewerProps, defaultGbtScopeMaterialProps, defaultGbtScopeMeshViewerProps, isTupleCurve, tupleToGbtScopeCurve };
+
+//# sourceMappingURL=index.js.map