@octanejs/drei 0.0.1

package/src/core/Trail.three.tsrx

@@ -0,0 +1,167 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import {
+	createPortal,
+	extend,
+	type ThreeElement,
+	type ThreeRef,
+	useFrame,
+	useInstanceHandle,
+	useThree,
+} from '@octanejs/three';
+import {
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState,
+	type RefObject,
+} from '@octanejs/three/renderer';
+import type { OctaneNode } from 'octane';
+import { MeshLineGeometry as MeshLineGeometryImpl, MeshLineMaterial } from 'meshline';
+import {
+	type ColorRepresentation,
+	Group,
+	Mesh,
+	Object3D,
+	Vector2,
+	Vector3,
+} from 'three';
+
+declare module '@octanejs/three' {
+	interface ThreeElements {
+		meshLineMaterial: ThreeElement<typeof MeshLineMaterial>;
+	}
+}
+
+extend({ MeshLineMaterial });
+
+type Settings = {
+	width: number;
+	length: number;
+	decay: number;
+	local: boolean;
+	stride: number;
+	interval: number;
+};
+
+export type TrailProps = {
+	color?: ColorRepresentation;
+	attenuation?: (width: number) => number;
+	target?: RefObject<Object3D>;
+	children?: OctaneNode;
+} & Partial<Settings>;
+
+const defaults: Partial<Settings> = {
+	width: 0.2,
+	length: 1,
+	decay: 1,
+	local: false,
+	stride: 0,
+	interval: 1,
+};
+
+const shiftLeft = (collection: Float32Array, steps = 1): Float32Array => {
+	collection.set(collection.subarray(steps));
+	collection.fill(-Infinity, -steps);
+	return collection;
+};
+
+export function useTrail(
+	target: Object3D | null,
+	settings: Partial<Settings>,
+): RefObject<Float32Array | null> {
+	const { length, local, decay, interval, stride } = { ...defaults, ...settings } as Settings;
+	const points = useRef<Float32Array | null>(null);
+	const [worldPosition] = useState(() => new Vector3());
+	const previousPosition = useRef(new Vector3());
+	const frameCount = useRef(0);
+
+	useLayoutEffect(() => {
+		if (target) {
+			points.current = Float32Array.from(
+				{ length: length * 10 * 3 },
+				(_, index) => target.position.getComponent(index % 3),
+			);
+		}
+	}, [length, target]);
+	useFrame(() => {
+		if (!target || !points.current) return;
+		if (frameCount.current === 0) {
+			const newPosition = local ? target.position : target.getWorldPosition(worldPosition);
+			for (let index = 0; index < decay; index++) {
+				if (newPosition.distanceTo(previousPosition.current) < stride) continue;
+				shiftLeft(points.current, 3);
+				points.current.set(newPosition.toArray(), points.current.length - 3);
+			}
+			previousPosition.current.copy(newPosition);
+		}
+		frameCount.current++;
+		frameCount.current %= interval;
+	});
+	return points;
+}
+
+export type MeshLineGeometry = Mesh & MeshLineGeometryImpl;
+
+function assignRef<T>(ref: ThreeRef<T> | undefined, value: T | null): void {
+	if (Array.isArray(ref)) for (const item of ref) assignRef(item, value);
+	else if (typeof ref === 'function') ref(value);
+	else if (ref && 'current' in ref) ref.current = value;
+}
+
+export function Trail({
+	children,
+	width = 0.2,
+	length = 1,
+	decay = 1,
+	local = false,
+	stride = 0,
+	interval = 1,
+	color = 'hotpink',
+	attenuation,
+	target,
+	ref,
+}: TrailProps & { ref?: ThreeRef<MeshLineGeometry> }) @{
+	const size = useThree((state) => state.size);
+	const scene = useThree((state) => state.scene);
+	const anchorGroup = useRef<Group | null>(null);
+	const anchorHandle = useInstanceHandle(anchorGroup);
+	const [anchor, setAnchor] = useState<Object3D | null>(null);
+	const points = useTrail(anchor, { length, decay, local, stride, interval });
+	const [geometry] = useState(() => new MeshLineGeometryImpl());
+	const material = useMemo(() => new MeshLineMaterial({
+		lineWidth: 0.1 * width,
+		color,
+		sizeAttenuation: 1,
+		resolution: new Vector2(size.width, size.height),
+	} as any), [width, color, size]);
+	const mergedRef = useMemo(
+		() => (value: Mesh | null) => assignRef(ref, value as MeshLineGeometry | null),
+		[ref],
+	);
+
+	useEffect(() => {
+		const next = target?.current ?? anchorGroup.current?.children.find((object) => object instanceof Object3D);
+		if (next) setAnchor(next);
+	}, [points, target]);
+	useLayoutEffect(() => {
+		const override = anchorHandle.current?.children.find(
+			(child) => (child.object as any)?.isMeshLineMaterial === true || child.object instanceof MeshLineMaterial,
+		);
+		if (override) material.setValues(override.props as any);
+	}, [anchorHandle, material, children]);
+	useEffect(() => {
+		material.uniforms.resolution.value.set(size.width, size.height);
+	}, [material, size]);
+	useFrame(() => {
+		if (points.current) geometry.setPoints(points.current as any, attenuation);
+	});
+
+	<group>
+		{createPortal(
+			<mesh ref={mergedRef} geometry={geometry as any} material={material as any} />,
+			scene,
+		)}
+		<group ref={anchorGroup}>{children}</group>
+	</group>
+}

package/src/core/TrailTexture.three.tsrx

@@ -0,0 +1,171 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { useFrame } from '@octanejs/three';
+import { useCallback, useMemo } from '@octanejs/three/renderer';
+import { Texture } from 'three';
+import { slotDefault } from './compiler-slot.js';
+import { resolveRenderChildren, type RenderChildren } from './octane-children.js';
+
+type Point = { x: number; y: number; age: number; force: number };
+
+type TrailConfig = {
+	size?: number;
+	maxAge?: number;
+	radius?: number;
+	intensity?: number;
+	interpolate?: number;
+	smoothing?: number;
+	minForce?: number;
+	blend?: CanvasRenderingContext2D['globalCompositeOperation'];
+	ease?: (value: number) => number;
+};
+
+const smoothAverage = (current: number, measurement: number, smoothing = 0.9) =>
+	measurement * smoothing + current * (1 - smoothing);
+const easeCircleOut = (value: number) => Math.sqrt(1 - Math.pow(value - 1, 2));
+
+class TrailTextureImpl {
+	trail: Point[] = [];
+	canvas!: HTMLCanvasElement;
+	ctx!: CanvasRenderingContext2D;
+	texture!: Texture;
+	force = 0;
+	size: number;
+	maxAge: number;
+	radius: number;
+	intensity: number;
+	ease: (value: number) => number;
+	minForce: number;
+	interpolate: number;
+	smoothing: number;
+	blend: CanvasRenderingContext2D['globalCompositeOperation'];
+
+	constructor({
+		size = 256,
+		maxAge = 750,
+		radius = 0.3,
+		intensity = 0.2,
+		interpolate = 0,
+		smoothing = 0,
+		minForce = 0.3,
+		blend = 'screen',
+		ease = easeCircleOut,
+	}: TrailConfig = {}) {
+		this.size = size;
+		this.maxAge = maxAge;
+		this.radius = radius;
+		this.intensity = intensity;
+		this.ease = ease;
+		this.interpolate = interpolate;
+		this.smoothing = smoothing;
+		this.minForce = minForce;
+		this.blend = blend;
+		this.initTexture();
+	}
+
+	initTexture(): void {
+		this.canvas = document.createElement('canvas');
+		this.canvas.width = this.canvas.height = this.size;
+		const context = this.canvas.getContext('2d');
+		if (context === null) throw new Error('2D not available');
+		this.ctx = context;
+		this.ctx.fillStyle = 'black';
+		this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+		this.texture = new Texture(this.canvas);
+		this.canvas.id = 'touchTexture';
+		this.canvas.style.width = this.canvas.style.height = `${this.canvas.width}px`;
+	}
+
+	update(delta: number): void {
+		this.clear();
+		this.trail.forEach((point, index) => {
+			point.age += delta * 1000;
+			if (point.age > this.maxAge) this.trail.splice(index, 1);
+		});
+		if (!this.trail.length) this.force = 0;
+		this.trail.forEach((point) => this.drawTouch(point));
+		this.texture.needsUpdate = true;
+	}
+
+	clear(): void {
+		this.ctx.globalCompositeOperation = 'source-over';
+		this.ctx.fillStyle = 'black';
+		this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+	}
+
+	addTouch(point: { x: number; y: number }): void {
+		const last = this.trail[this.trail.length - 1];
+		if (last) {
+			const dx = last.x - point.x;
+			const dy = last.y - point.y;
+			const distance = dx * dx + dy * dy;
+			const force = Math.max(this.minForce, Math.min(distance * 10_000, 1));
+			this.force = smoothAverage(force, this.force, this.smoothing);
+			if (this.interpolate) {
+				const lines = Math.ceil(distance / Math.pow((this.radius * 0.5) / this.interpolate, 2));
+				if (lines > 1) {
+					for (let index = 1; index < lines; index++) {
+						this.trail.push({
+							x: last.x - (dx / lines) * index,
+							y: last.y - (dy / lines) * index,
+							age: 0,
+							force,
+						});
+					}
+				}
+			}
+		}
+		this.trail.push({ x: point.x, y: point.y, age: 0, force: this.force });
+	}
+
+	drawTouch(point: Point): void {
+		const position = { x: point.x * this.size, y: (1 - point.y) * this.size };
+		let intensity = 1;
+		if (point.age < this.maxAge * 0.3) {
+			intensity = this.ease(point.age / (this.maxAge * 0.3));
+		} else {
+			intensity = this.ease(1 - (point.age - this.maxAge * 0.3) / (this.maxAge * 0.7));
+		}
+		intensity *= point.force;
+		this.ctx.globalCompositeOperation = this.blend;
+		const radius = this.size * this.radius * intensity;
+		const gradient = this.ctx.createRadialGradient(
+			position.x,
+			position.y,
+			Math.max(0, radius * 0.25),
+			position.x,
+			position.y,
+			Math.max(0, radius),
+		);
+		gradient.addColorStop(0, `rgba(255, 255, 255, ${this.intensity})`);
+		gradient.addColorStop(1, 'rgba(0, 0, 0, 0.0)');
+		this.ctx.beginPath();
+		this.ctx.fillStyle = gradient;
+		this.ctx.arc(position.x, position.y, Math.max(0, radius), 0, Math.PI * 2);
+		this.ctx.fill();
+	}
+}
+
+export function useTrailTexture(
+	config: Partial<TrailConfig> = {},
+): [Texture, (event: { uv: { x: number; y: number } }) => void] {
+	config = slotDefault(config, {});
+	const { size, maxAge, radius, intensity, interpolate, smoothing, minForce, blend, ease } = config;
+	const trail = useMemo(
+		() => new TrailTextureImpl(config),
+		[size, maxAge, radius, intensity, interpolate, smoothing, minForce, blend, ease],
+	);
+	useFrame((_state, delta) => void trail.update(delta));
+	const onMove = useCallback((event: { uv: { x: number; y: number } }) => trail.addTouch(event.uv), [trail]);
+	return [trail.texture, onMove];
+}
+
+export type TrailTextureProps = {
+	children?: RenderChildren<ReturnType<typeof useTrailTexture>>;
+} & TrailConfig;
+
+export function TrailTexture({ children, ...config }: TrailTextureProps) @{
+	const result = useTrailTexture(config);
+	<>
+		{resolveRenderChildren(children, result)}
+	</>
+}

package/src/core/TransformControls.three.tsrx

@@ -0,0 +1,155 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ThreeElement, type ThreeRef, useThree } from '@octanejs/three';
+import {
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+} from '@octanejs/three/renderer';
+import type { OctaneNode } from 'octane';
+import * as THREE from 'three';
+import { TransformControls as TransformControlsImpl } from 'three-stdlib';
+
+type ControlsProto = { enabled: boolean };
+
+export type TransformControlsProps = Omit<
+	ThreeElement<typeof TransformControlsImpl>,
+	'ref' | 'args'
+> &
+	Omit<ThreeElement<typeof THREE.Group>, 'ref'> & {
+		object?: THREE.Object3D | { current: THREE.Object3D | null };
+		enabled?: boolean;
+		axis?: string | null;
+		domElement?: HTMLElement;
+		mode?: 'translate' | 'rotate' | 'scale';
+		translationSnap?: number | null;
+		rotationSnap?: number | null;
+		scaleSnap?: number | null;
+		space?: 'world' | 'local';
+		size?: number;
+		showX?: boolean;
+		showY?: boolean;
+		showZ?: boolean;
+		children?: OctaneNode;
+		camera?: THREE.Camera;
+		onChange?: (event?: THREE.Event) => void;
+		onMouseDown?: (event?: THREE.Event) => void;
+		onMouseUp?: (event?: THREE.Event) => void;
+		onObjectChange?: (event?: THREE.Event) => void;
+		makeDefault?: boolean;
+		ref?: ThreeRef<TransformControlsImpl>;
+	};
+
+export function TransformControls({
+	children,
+	domElement,
+	onChange,
+	onMouseDown,
+	onMouseUp,
+	onObjectChange,
+	object,
+	makeDefault,
+	camera,
+	enabled,
+	axis,
+	mode,
+	translationSnap,
+	rotationSnap,
+	scaleSnap,
+	space,
+	size,
+	showX,
+	showY,
+	showZ,
+	ref,
+	...props
+}: TransformControlsProps) @{
+	const defaultControls = useThree((state) => state.controls) as ControlsProto | undefined;
+	const gl = useThree((state) => state.gl);
+	const events = useThree((state) => state.events);
+	const defaultCamera = useThree((state) => state.camera);
+	const invalidate = useThree((state) => state.invalidate);
+	const get = useThree((state) => state.get);
+	const set = useThree((state) => state.set);
+	const explicitCamera = camera || defaultCamera;
+	const explicitDomElement = (domElement || events.connected || gl.domElement) as HTMLElement;
+	const controls = useMemo(
+		() => new TransformControlsImpl(explicitCamera as any, explicitDomElement),
+		[explicitCamera, explicitDomElement],
+	);
+	const group = useRef<THREE.Group | null>(null);
+
+	useLayoutEffect(() => {
+		if (object) {
+			controls.attach(object instanceof THREE.Object3D ? (object as any) : (object.current as any));
+		} else if (group.current instanceof THREE.Object3D) {
+			controls.attach(group.current as any);
+		}
+		return () => void controls.detach();
+	}, [object, children, controls]);
+
+	useEffect(() => {
+		if (defaultControls) {
+			const callback = (event: { value: boolean }) => (defaultControls.enabled = !event.value);
+			(controls as any).addEventListener('dragging-changed', callback);
+			return () => (controls as any).removeEventListener('dragging-changed', callback);
+		}
+	}, [controls, defaultControls]);
+
+	const onChangeRef = useRef(onChange);
+	const onMouseDownRef = useRef(onMouseDown);
+	const onMouseUpRef = useRef(onMouseUp);
+	const onObjectChangeRef = useRef(onObjectChange);
+	useLayoutEffect(() => void (onChangeRef.current = onChange), [onChange]);
+	useLayoutEffect(() => void (onMouseDownRef.current = onMouseDown), [onMouseDown]);
+	useLayoutEffect(() => void (onMouseUpRef.current = onMouseUp), [onMouseUp]);
+	useLayoutEffect(() => void (onObjectChangeRef.current = onObjectChange), [onObjectChange]);
+
+	useEffect(() => {
+		const change = (event: THREE.Event) => {
+			invalidate();
+			onChangeRef.current?.(event);
+		};
+		const mouseDown = (event: THREE.Event) => onMouseDownRef.current?.(event);
+		const mouseUp = (event: THREE.Event) => onMouseUpRef.current?.(event);
+		const objectChange = (event: THREE.Event) => onObjectChangeRef.current?.(event);
+		(controls as any).addEventListener('change', change);
+		(controls as any).addEventListener('mouseDown', mouseDown);
+		(controls as any).addEventListener('mouseUp', mouseUp);
+		(controls as any).addEventListener('objectChange', objectChange);
+		return () => {
+			(controls as any).removeEventListener('change', change);
+			(controls as any).removeEventListener('mouseDown', mouseDown);
+			(controls as any).removeEventListener('mouseUp', mouseUp);
+			(controls as any).removeEventListener('objectChange', objectChange);
+		};
+	}, [invalidate, controls]);
+
+	useEffect(() => {
+		if (makeDefault) {
+			const old = get().controls;
+			set({ controls });
+			return () => set({ controls: old });
+		}
+	}, [makeDefault, controls]);
+
+	<>
+		<primitive
+			ref={ref as any}
+			object={controls}
+			enabled={enabled}
+			mode={mode}
+			translationSnap={translationSnap}
+			rotationSnap={rotationSnap}
+			scaleSnap={scaleSnap}
+			space={space}
+			size={size}
+			showX={showX}
+			showY={showY}
+			showZ={showZ}
+		/>
+		<group ref={group} {...props as any}>
+			{children}
+		</group>
+	</>
+}

package/src/core/VideoTexture.three.tsrx

@@ -0,0 +1,116 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ThreeRef, useThree } from '@octanejs/three';
+import { use, useEffect, useLayoutEffect, useRef } from '@octanejs/three/renderer';
+import type Hls from 'hls.js';
+import { Events } from 'hls.js';
+import * as THREE from 'three';
+import { slotDefault } from './compiler-slot.js';
+import { resolveRenderChildren, type RenderChildren } from './octane-children.js';
+import { resourcePromise } from './resource.js';
+import { getHls, IS_BROWSER } from './video-texture-resource.js';
+
+export type UseVideoTextureOptions = {
+	unsuspend?: keyof HTMLVideoElementEventMap;
+	start?: boolean;
+	hls?: Parameters<typeof getHls>[0];
+	onVideoFrame?: VideoFrameRequestCallback;
+} & Partial<Omit<HTMLVideoElement, 'children' | 'src' | 'srcObject'>>;
+
+function useVideoFrame(video: HTMLVideoElement, callbackValue?: VideoFrameRequestCallback): void {
+	useEffect(() => {
+		if (!callbackValue || !video.requestVideoFrameCallback) return;
+		let handle: ReturnType<HTMLVideoElement['requestVideoFrameCallback']>;
+		const callback: VideoFrameRequestCallback = (...args) => {
+			callbackValue(...args);
+			handle = video.requestVideoFrameCallback(callback);
+		};
+		video.requestVideoFrameCallback(callback);
+		return () => video.cancelVideoFrameCallback(handle);
+	}, [video, callbackValue]);
+}
+
+export function useVideoTexture(
+	srcOrSrcObject: HTMLVideoElement['src' | 'srcObject'],
+	options: UseVideoTextureOptions = {},
+): THREE.VideoTexture {
+	const {
+		unsuspend = 'loadedmetadata',
+		start = true,
+		hls: hlsConfig = {},
+		crossOrigin = 'anonymous',
+		muted = true,
+		loop = true,
+		playsInline = true,
+		onVideoFrame,
+		...videoProps
+	} = slotDefault(options, {});
+	const gl = useThree((state) => state.gl);
+	const hlsRef = useRef<Hls | null>(null);
+	const texture = use(
+		resourcePromise(
+			() =>
+				new Promise<THREE.VideoTexture>(async (resolve) => {
+					let src: string | undefined;
+					let srcObject: MediaProvider | null | undefined;
+					if (typeof srcOrSrcObject === 'string') src = srcOrSrcObject;
+					else srcObject = srcOrSrcObject;
+					const video = Object.assign(document.createElement('video'), {
+						src,
+						srcObject,
+						crossOrigin,
+						loop,
+						muted,
+						playsInline,
+						...videoProps,
+					});
+					if (src && IS_BROWSER && src.endsWith('.m3u8')) {
+						const hls = (hlsRef.current = await getHls(hlsConfig));
+						if (hls) {
+							hls.on(Events.MEDIA_ATTACHED, () => void hls.loadSource(src));
+							hls.attachMedia(video);
+						}
+					}
+					const value = new THREE.VideoTexture(video);
+					value.colorSpace = gl.outputColorSpace as THREE.ColorSpace;
+					video.addEventListener(unsuspend, () => resolve(value));
+				}),
+			[srcOrSrcObject],
+		),
+	);
+	const video = texture.source.data as HTMLVideoElement;
+	useVideoFrame(video, onVideoFrame);
+	useEffect(() => {
+		if (start) void texture.image.play();
+		return () => {
+			if (hlsRef.current) {
+				hlsRef.current.destroy();
+				hlsRef.current = null;
+			}
+		};
+	}, [texture, start]);
+	return texture;
+}
+
+export type VideoTextureProps = {
+	children?: RenderChildren<THREE.VideoTexture>;
+	src: Parameters<typeof useVideoTexture>[0];
+	ref?: ThreeRef<THREE.VideoTexture>;
+} & Parameters<typeof useVideoTexture>[1];
+
+function assignRef<T>(ref: ThreeRef<T> | undefined, value: T | null): void {
+	if (Array.isArray(ref)) for (const item of ref) assignRef(item, value);
+	else if (typeof ref === 'function') ref(value);
+	else if (ref && 'current' in ref) ref.current = value;
+}
+
+export function VideoTexture({ children, src, ref, ...config }: VideoTextureProps) @{
+	const texture = useVideoTexture(src, config);
+	useEffect(() => () => void texture.dispose(), [texture]);
+	useLayoutEffect(() => {
+		assignRef(ref, texture);
+		return () => assignRef(ref, null);
+	}, [ref, texture]);
+	<>
+		{resolveRenderChildren(children, texture)}
+	</>
+}

package/src/core/Wireframe.three.tsrx

@@ -0,0 +1,92 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { extend, useInstanceHandle } from '@octanejs/three';
+import { useLayoutEffect, useMemo, useRef, useState, type RefObject } from '@octanejs/three/renderer';
+import { universalComponent } from 'octane/universal';
+import * as THREE from 'three';
+import { WireframeMaterial, type WireframeMaterialProps, WireframeMaterialShaders, setWireframeOverride, useWireframeUniforms } from '../materials/WireframeMaterial.js';
+
+interface WireframeProps { geometry?: THREE.BufferGeometry | RefObject<THREE.BufferGeometry>; simplify?: boolean }
+type WithGeometry = THREE.Mesh<THREE.BufferGeometry, THREE.Material> | THREE.Line<THREE.BufferGeometry, THREE.Material> | THREE.Points<THREE.BufferGeometry, THREE.Material>;
+const MeshWireframeMaterial = extend(WireframeMaterial);
+
+function isWithGeometry(object?: THREE.Object3D | null): object is WithGeometry { return !!(object as THREE.Mesh)?.geometry; }
+function isGeometry(object?: unknown | null): object is THREE.BufferGeometry { return !!(object as THREE.BufferGeometry)?.isBufferGeometry; }
+function isRefObject<T>(object?: unknown | null): object is RefObject<T> { return !!(object as RefObject<T>)?.current; }
+function isRef<T>(object?: unknown | null): object is RefObject<T> { return (object as RefObject<T>)?.current !== undefined; }
+function isWireframeGeometry(geometry: unknown): geometry is THREE.WireframeGeometry { return (geometry as THREE.WireframeGeometry)?.type === 'WireframeGeometry'; }
+
+function getUniforms() {
+	const uniforms: Record<string, THREE.IUniform> = {};
+	for (const key in WireframeMaterialShaders.uniforms) uniforms[key] = { value: WireframeMaterialShaders.uniforms[key as keyof typeof WireframeMaterialShaders.uniforms] };
+	return uniforms;
+}
+
+function getBarycentricCoordinates(geometry: THREE.BufferGeometry, removeEdge?: boolean) {
+	const count = geometry.getAttribute('position').count; const barycentric: number[] = [];
+	for (let i = 0; i < count; i++) {
+		const Q = removeEdge ? 1 : 0;
+		if (i % 2 === 0) barycentric.push(0, 0, 1, 0, 1, 0, 1, 0, Q);
+		else barycentric.push(0, 1, 0, 0, 0, 1, 1, 0, Q);
+	}
+	return new THREE.BufferAttribute(Float32Array.from(barycentric), 3);
+}
+
+function getInputGeometry(input: THREE.BufferGeometry | RefObject<THREE.BufferGeometry> | RefObject<THREE.Object3D>) {
+	const geometry = isRefObject(input) ? input.current : input;
+	if (!isGeometry(geometry)) {
+		if (isWireframeGeometry(geometry)) throw new Error('Wireframe: WireframeGeometry is not supported.');
+		const parent = geometry?.parent;
+		if (isWithGeometry(parent)) {
+			if (isWireframeGeometry(parent.geometry)) throw new Error('Wireframe: WireframeGeometry is not supported.');
+			return parent.geometry;
+		}
+	} else return geometry;
+}
+
+function setBarycentricCoordinates(geometry: THREE.BufferGeometry, simplify: boolean) {
+	if (geometry.index) {
+		console.warn('Wireframe: Requires non-indexed geometry, converting to non-indexed geometry.');
+		geometry.copy(geometry.toNonIndexed()); geometry.setIndex(null);
+	}
+	geometry.setAttribute('barycentric', getBarycentricCoordinates(geometry, simplify));
+}
+
+function WireframeWithCustomGeo({ geometry: customGeometry, simplify = false, ...props }: WireframeProps & WireframeMaterialProps) @{
+	const [geometry, setGeometry] = useState<THREE.BufferGeometry | null>(null);
+	useLayoutEffect(() => {
+		const value = getInputGeometry(customGeometry!);
+		if (!value) throw new Error('Wireframe: geometry prop must be a BufferGeometry or a ref to a BufferGeometry.');
+		setBarycentricCoordinates(value, simplify);
+		if (isRef(customGeometry)) setGeometry(value);
+	}, [simplify, customGeometry]);
+	const drawnGeometry = isRef(customGeometry) ? geometry : customGeometry;
+	@if (drawnGeometry) {
+		<mesh geometry={drawnGeometry as THREE.BufferGeometry}>
+			<MeshWireframeMaterial attach="material" transparent side={THREE.DoubleSide} polygonOffset polygonOffsetFactor={-4} {...props as any} extensions={{ derivatives: true, fragDepth: false, drawBuffers: false, shaderTextureLOD: false }} />
+		</mesh>
+	}
+}
+
+function WireframeWithoutCustomGeo({ simplify = false, ...props }: Omit<WireframeProps, 'geometry'> & WireframeMaterialProps) @{
+	const objectRef = useRef<THREE.Object3D | null>(null);
+	const instance = useInstanceHandle(objectRef);
+	const uniforms = useMemo(() => getUniforms(), []);
+	useWireframeUniforms(uniforms, props);
+	useLayoutEffect(() => {
+		const geometry = getInputGeometry(objectRef as RefObject<THREE.Object3D>);
+		if (!geometry) throw new Error('Wireframe: Must be a child of a Mesh, Line or Points object or specify a geometry prop.');
+		const original = geometry.clone(); setBarycentricCoordinates(geometry, simplify);
+		return () => { geometry.copy(original); original.dispose(); };
+	}, [simplify]);
+	useLayoutEffect(() => {
+		const parentMesh = instance.current!.parent!.object as THREE.Mesh<THREE.BufferGeometry, THREE.Material>;
+		const original = parentMesh.material.clone(); setWireframeOverride(parentMesh.material, uniforms);
+		return () => { parentMesh.material.dispose(); parentMesh.material = original; };
+	}, []);
+	<object3D ref={objectRef as any} />
+}
+
+export function Wireframe(props: WireframeProps & WireframeMaterialProps) @{
+	const component = props.geometry ? WireframeWithCustomGeo : WireframeWithoutCustomGeo;
+	<>{universalComponent('three', component as any, props as unknown as Record<string, unknown>)}</>
+}