@octanejs/drei 0.0.1

package/src/core/Preload.three.tsrx

@@ -0,0 +1,40 @@
+import { useThree } from '@octanejs/three';
+import { useLayoutEffect } from '@octanejs/three/renderer';
+import {
+	Camera,
+	CubeCamera,
+	Object3D,
+	Scene,
+	type WebGLRenderer,
+	WebGLCubeRenderTarget,
+} from 'three';
+
+export type PreloadProps = {
+	all?: boolean;
+	scene?: Object3D;
+	camera?: Camera;
+};
+
+export function Preload({ all, scene, camera }: PreloadProps) @{
+	const renderer = useThree(({ gl }) => gl);
+	const defaultCamera = useThree(({ camera: value }) => value);
+	const defaultScene = useThree(({ scene: value }) => value);
+	useLayoutEffect(() => {
+		const invisible: Object3D[] = [];
+		if (all) {
+			(scene || defaultScene).traverse((object) => {
+				if (object.visible === false) {
+					invisible.push(object);
+					object.visible = true;
+				}
+			});
+		}
+		renderer.compile(scene || defaultScene, camera || defaultCamera);
+		const target = new WebGLCubeRenderTarget(128);
+		const cubeCamera = new CubeCamera(0.01, 100000, target);
+		cubeCamera.update(renderer as unknown as WebGLRenderer, (scene || defaultScene) as Scene);
+		target.dispose();
+		invisible.forEach((object) => (object.visible = false));
+	}, []);
+	null;
+}

package/src/core/Progress.three.tsrx

@@ -0,0 +1,47 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { create } from '@octanejs/zustand/universal';
+import { DefaultLoadingManager } from 'three';
+import { resolveRenderChildren, type RenderChildren } from './octane-children.js';
+
+interface Data {
+	errors: string[];
+	active: boolean;
+	progress: number;
+	item: string;
+	loaded: number;
+	total: number;
+}
+
+let saveLastTotalLoaded = 0;
+
+export const useProgress = /* @__PURE__ */ create<Data>((set) => {
+	DefaultLoadingManager.onStart = (item, loaded, total) => {
+		set({
+			active: true,
+			item,
+			loaded,
+			total,
+			progress: ((loaded - saveLastTotalLoaded) / (total - saveLastTotalLoaded)) * 100,
+		});
+	};
+	DefaultLoadingManager.onLoad = () => set({ active: false });
+	DefaultLoadingManager.onError = (item) => set((state) => ({ errors: [...state.errors, item] }));
+	DefaultLoadingManager.onProgress = (item, loaded, total) => {
+		if (loaded === total) saveLastTotalLoaded = total;
+		set({
+			active: true,
+			item,
+			loaded,
+			total,
+			progress: ((loaded - saveLastTotalLoaded) / (total - saveLastTotalLoaded)) * 100 || 100,
+		});
+	};
+	return { errors: [], active: false, progress: 0, item: '', loaded: 0, total: 0 };
+});
+
+export function Progress({ children }: { children?: RenderChildren<Data> }) @{
+	const result = useProgress();
+	<>
+		{resolveRenderChildren(children, result)}
+	</>
+}

package/src/core/RenderCubeTexture.three.tsrx

@@ -0,0 +1,111 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { createPortal, type ComputeFunction, type ThreeElements, type ThreeRef, useFrame, useThree } from '@octanejs/three';
+import { useEffect, useImperativeHandle, useMemo, useRef, useState, type RefObject } from '@octanejs/three/renderer';
+import type { OctaneNode } from 'octane';
+import * as THREE from 'three';
+
+export type RenderCubeTextureProps = Omit<ThreeElements['texture'], 'ref' | 'args' | 'rotation'> & {
+	stencilBuffer?: boolean;
+	depthBuffer?: boolean;
+	generateMipmaps?: boolean;
+	renderPriority?: number;
+	eventPriority?: number;
+	frames?: number;
+	compute?: ComputeFunction;
+	flip?: boolean;
+	resolution?: number;
+	children: OctaneNode;
+	near?: number;
+	far?: number;
+	position?: ThreeElements['cubeCamera']['position'];
+	rotation?: ThreeElements['cubeCamera']['rotation'];
+	scale?: ThreeElements['cubeCamera']['scale'];
+	quaternion?: ThreeElements['cubeCamera']['quaternion'];
+	matrix?: ThreeElements['cubeCamera']['matrix'];
+	matrixAutoUpdate?: boolean;
+};
+
+type RenderCubeTextureComponentProps = Omit<RenderCubeTextureProps, 'children'> & { children?: OctaneNode };
+
+export type RenderCubeTextureApi = {
+	scene: THREE.Scene;
+	fbo: THREE.WebGLCubeRenderTarget;
+	camera: THREE.CubeCamera;
+};
+
+function CubeContainer({ frames, renderPriority, children, camera }: {
+	frames: number;
+	renderPriority: number;
+	children?: OctaneNode;
+	camera: RefObject<THREE.CubeCamera>;
+}) @{
+	let count = 0;
+	useFrame((state) => {
+		if (frames === Infinity || count < frames) {
+			camera.current?.update(state.gl as any, state.scene);
+			count++;
+		}
+	}, renderPriority);
+	<>{children}</>
+}
+
+export function RenderCubeTexture({
+	children,
+	compute,
+	renderPriority = -1,
+	eventPriority = 0,
+	frames = Infinity,
+	stencilBuffer = false,
+	depthBuffer = true,
+	generateMipmaps = false,
+	resolution = 896,
+	near = 0.1,
+	far = 1000,
+	flip = false,
+	position,
+	rotation,
+	scale,
+	quaternion,
+	matrix,
+	matrixAutoUpdate,
+	ref,
+	...props
+}: RenderCubeTextureComponentProps & { ref?: ThreeRef<RenderCubeTextureApi> }) @{
+	const { size, viewport } = useThree();
+	const camera = useRef<THREE.CubeCamera | null>(null);
+	const fbo = useMemo(() => {
+		const target = new THREE.WebGLCubeRenderTarget(
+			Math.max((resolution || size.width) * viewport.dpr, (resolution || size.height) * viewport.dpr),
+			{ stencilBuffer, depthBuffer, generateMipmaps },
+		);
+		target.texture.isRenderTargetTexture = !flip;
+		target.texture.flipY = true;
+		target.texture.type = THREE.HalfFloatType;
+		return target;
+	}, [resolution, flip]);
+	useEffect(() => () => fbo.dispose(), [fbo]);
+	const [virtualScene] = useState(() => new THREE.Scene());
+	const primitiveProps = props as any;
+	useImperativeHandle((ref ?? null) as any, () => ({ scene: virtualScene, fbo, camera: camera.current! }), [fbo]);
+	<>
+		{createPortal(
+			<CubeContainer renderPriority={renderPriority} frames={frames} camera={camera as RefObject<THREE.CubeCamera>}>
+				{children}
+				<group onPointerOver={() => null} />
+			</CubeContainer>,
+			virtualScene,
+			{ events: { compute, priority: eventPriority } },
+		)}
+		<primitive object={fbo.texture} {...primitiveProps} />
+		<cubeCamera
+			ref={camera}
+			args={[near, far, fbo]}
+			position={position}
+			rotation={rotation}
+			scale={scale}
+			quaternion={quaternion}
+			matrix={matrix}
+			matrixAutoUpdate={matrixAutoUpdate}
+		/>
+	</>
+}

package/src/core/RenderTexture.three.tsrx

@@ -0,0 +1,102 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { createPortal, type ComputeFunction, type ThreeElements, type ThreeRef, useFrame, useThree } from '@octanejs/three';
+import { useCallback, useImperativeHandle, useState } from '@octanejs/three/renderer';
+import type { OctaneNode } from 'octane';
+import * as THREE from 'three';
+import { useFBO } from './Fbo.three.tsrx';
+
+export type RenderTextureProps = Omit<ThreeElements['texture'], 'ref' | 'args'> & {
+	width?: number;
+	height?: number;
+	samples?: number;
+	stencilBuffer?: boolean;
+	depthBuffer?: boolean;
+	generateMipmaps?: boolean;
+	renderPriority?: number;
+	eventPriority?: number;
+	frames?: number;
+	compute?: ComputeFunction;
+	children: OctaneNode;
+};
+
+type RenderTextureComponentProps = Omit<RenderTextureProps, 'children'> & { children?: OctaneNode };
+
+function Container({ frames, renderPriority, children, fbo }: {
+	frames: number;
+	renderPriority: number;
+	children?: OctaneNode;
+	fbo: THREE.WebGLRenderTarget;
+}) @{
+	let count = 0;
+	useFrame((state) => {
+		if (frames !== Infinity && count >= frames) return;
+		const gl = state.gl as any;
+		const oldAutoClear = gl.autoClear;
+		const oldXrEnabled = gl.xr.enabled;
+		const oldRenderTarget = gl.getRenderTarget();
+		const oldIsPresenting = gl.xr.isPresenting;
+		gl.autoClear = true;
+		gl.xr.enabled = false;
+		gl.xr.isPresenting = false;
+		gl.setRenderTarget(fbo);
+		gl.render(state.scene, state.camera);
+		gl.setRenderTarget(oldRenderTarget);
+		gl.autoClear = oldAutoClear;
+		gl.xr.enabled = oldXrEnabled;
+		gl.xr.isPresenting = oldIsPresenting;
+		count++;
+	}, renderPriority);
+	<>{children}</>
+}
+
+export function RenderTexture({
+	children,
+	compute,
+	width,
+	height,
+	samples = 8,
+	renderPriority = 0,
+	eventPriority = 0,
+	frames = Infinity,
+	stencilBuffer = false,
+	depthBuffer = true,
+	generateMipmaps = false,
+	ref,
+	...props
+}: RenderTextureComponentProps & { ref?: ThreeRef<THREE.Texture> }) @{
+	const { size, viewport } = useThree();
+	const fbo = useFBO((width || size.width) * viewport.dpr, (height || size.height) * viewport.dpr, {
+		samples,
+		stencilBuffer,
+		depthBuffer,
+		generateMipmaps,
+	});
+	const [virtualScene] = useState(() => new THREE.Scene());
+	const primitiveProps = props as any;
+	const uvCompute = useCallback<ComputeFunction>((event, state, previous) => {
+		let parent = (fbo.texture as any)?.__r3f?.parent?.object ?? (fbo.texture as any)?.__octane?.parent?.object;
+		while (parent && !(parent instanceof THREE.Object3D)) {
+			parent = parent.__r3f?.parent?.object ?? parent.__octane?.parent?.object;
+		}
+		if (!parent || !previous) return false as any;
+		if (!previous.raycaster.camera) previous.events.compute?.(event, previous, previous.previousRoot?.getState());
+		const [intersection] = previous.raycaster.intersectObject(parent);
+		if (!intersection?.uv) return false as any;
+		state.raycaster.setFromCamera(
+			state.pointer.set(intersection.uv.x * 2 - 1, intersection.uv.y * 2 - 1),
+			state.camera,
+		);
+	}, []);
+	useImperativeHandle((ref ?? null) as any, () => fbo.texture, [fbo]);
+	<>
+		{createPortal(
+			<Container renderPriority={renderPriority} frames={frames} fbo={fbo}>
+				{children}
+				<group onPointerOver={() => null} />
+			</Container>,
+			virtualScene,
+			{ events: { compute: compute ?? uvCompute, priority: eventPriority } },
+		)}
+		<primitive object={fbo.texture} {...primitiveProps} />
+	</>
+}

package/src/core/Resize.three.tsrx

@@ -0,0 +1,59 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ThreeElements, type ThreeRef } from '@octanejs/three';
+import { useLayoutEffect, useMemo, useRef } from '@octanejs/three/renderer';
+import * as THREE from 'three';
+
+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 type ResizeProps =
+	Omit<ThreeElements['group'], 'ref'> & {
+		width?: boolean;
+		height?: boolean;
+		depth?: boolean;
+		box3?: THREE.Box3;
+		precise?: boolean;
+	};
+
+export function Resize({
+	children,
+	width,
+	height,
+	depth,
+	box3,
+	precise = true,
+	ref,
+	...props
+}: ResizeProps & { ref?: ThreeRef<THREE.Group> }) @{
+	const container = useRef<THREE.Group | null>(null);
+	const outer = useRef<THREE.Group | null>(null);
+	const inner = useRef<THREE.Group | null>(null);
+	const mergedRef = useMemo(
+		() => (value: THREE.Group | null) => {
+			container.current = value;
+			assignRef(ref, value);
+		},
+		[ref],
+	);
+	useLayoutEffect(() => {
+		if (!outer.current || !inner.current) return;
+		outer.current.matrixWorld.identity();
+		const box = box3 || new THREE.Box3().setFromObject(inner.current, precise);
+		const w = box.max.x - box.min.x;
+		const h = box.max.y - box.min.y;
+		const d = box.max.z - box.min.z;
+		let dimension = Math.max(w, h, d);
+		if (width) dimension = w;
+		if (height) dimension = h;
+		if (depth) dimension = d;
+		outer.current.scale.setScalar(1 / dimension);
+	}, [width, height, depth, box3, precise]);
+	<group ref={mergedRef} {...props}>
+		<group ref={outer}>
+			<group ref={inner}>{children}</group>
+		</group>
+	</group>
+}

package/src/core/RoundedBox.three.tsrx

@@ -0,0 +1,106 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import type { ThreeElements, ThreeRef } from '@octanejs/three';
+import { useLayoutEffect, useMemo, useRef } from '@octanejs/three/renderer';
+import { type ExtrudeGeometry, type Mesh, Shape } from 'three';
+import { toCreasedNormals } from 'three-stdlib';
+
+const eps = 0.00001;
+
+function createShape(width: number, height: number, radius0: number): Shape {
+	const shape = new Shape();
+	const radius = radius0 - eps;
+	shape.absarc(eps, eps, eps, -Math.PI / 2, -Math.PI, true);
+	shape.absarc(eps, height - radius * 2, eps, Math.PI, Math.PI / 2, true);
+	shape.absarc(width - radius * 2, height - radius * 2, eps, Math.PI / 2, 0, true);
+	shape.absarc(width - radius * 2, eps, eps, 0, -Math.PI / 2, true);
+	return shape;
+}
+
+export type RoundedBoxProps =
+	{
+		args?: [width?: number, height?: number, depth?: number];
+		radius?: number;
+		smoothness?: number;
+		bevelSegments?: number;
+		steps?: number;
+		creaseAngle?: number;
+	} & Omit<ThreeElements['mesh'], 'ref' | 'args'>;
+
+export type RoundedBoxGeometryProps =
+	Omit<RoundedBoxProps, 'children'> & Omit<ThreeElements['extrudeGeometry'], 'args' | 'ref'>;
+
+export function RoundedBox({
+	args: [width = 1, height = 1, depth = 1] = [],
+	radius = 0.05,
+	steps = 1,
+	smoothness = 4,
+	bevelSegments = 4,
+	creaseAngle = 0.4,
+	children,
+	ref,
+	...rest
+}: RoundedBoxProps & { ref?: ThreeRef<Mesh> }) @{
+	const meshRef = useMemo(() => (value: Mesh | null) => assignThreeRef(ref, value), [ref]);
+
+	<mesh ref={meshRef} {...rest}>
+		<RoundedBoxGeometry
+			args={[width, height, depth]}
+			radius={radius}
+			steps={steps}
+			smoothness={smoothness}
+			bevelSegments={bevelSegments}
+			creaseAngle={creaseAngle}
+		/>
+		{children}
+	</mesh>
+}
+
+function assignThreeRef<T>(ref: ThreeRef<T> | undefined, value: T | null): void {
+	if (Array.isArray(ref)) {
+		for (const item of ref) assignThreeRef(item, value);
+	} else if (typeof ref === 'function') {
+		ref(value);
+	} else if (ref !== undefined && 'current' in ref) {
+		ref.current = value;
+	}
+}
+
+export function RoundedBoxGeometry({
+	args: [width = 1, height = 1, depth = 1] = [],
+	radius = 0.05,
+	steps = 1,
+	smoothness = 4,
+	bevelSegments = 4,
+	creaseAngle = 0.4,
+	ref,
+	...rest
+}: RoundedBoxGeometryProps & { ref?: ThreeRef<ExtrudeGeometry> }) @{
+	const shape = useMemo(() => createShape(width, height, radius), [width, height, radius]);
+	const params = useMemo(
+		() => ({
+			depth: depth - radius * 2,
+			bevelEnabled: true,
+			bevelSegments: bevelSegments * 2,
+			steps,
+			bevelSize: radius - eps,
+			bevelThickness: radius,
+			curveSegments: smoothness,
+		}),
+		[depth, radius, smoothness, bevelSegments, steps],
+	);
+	const geometryRef = useRef<ExtrudeGeometry | null>(null);
+
+	useLayoutEffect(() => {
+		if (geometryRef.current !== null) {
+			geometryRef.current.center();
+			// three-mesh-bvh augments the workspace BufferGeometry type from its
+			// peer instance; both libraries operate on the same Three.js object.
+			toCreasedNormals(
+				geometryRef.current as unknown as Parameters<typeof toCreasedNormals>[0],
+				creaseAngle,
+			);
+		}
+	}, [shape, params, creaseAngle]);
+
+	<extrudeGeometry ref={[geometryRef, ref ?? null]} args={[shape, params]} {...rest} />
+}

package/src/core/Sampler.three.tsrx

@@ -0,0 +1,116 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ThreeElements } from '@octanejs/three';
+import { useLayoutEffect, useRef, useState, type RefObject } from '@octanejs/three/renderer';
+import type { OctaneNode } from 'octane';
+import {
+	Color,
+	Group,
+	InstancedBufferAttribute,
+	InstancedMesh,
+	Mesh,
+	Object3D,
+	Vector3,
+} from 'three';
+import { MeshSurfaceSampler } from 'three-stdlib';
+import { slotDefault } from './compiler-slot.js';
+
+type SamplePayload = {
+	position: Vector3;
+	normal: Vector3;
+	color: Color;
+};
+
+type TransformPayload = SamplePayload & {
+	dummy: Object3D;
+	sampledMesh: Mesh;
+};
+
+export type TransformFn = (payload: TransformPayload, index: number) => void;
+
+export type SamplerProps = Omit<ThreeElements['group'], 'ref'> & {
+	mesh?: RefObject<Mesh>;
+	instances?: RefObject<InstancedMesh>;
+	weight?: string;
+	transform?: TransformFn;
+	count?: number;
+	children?: OctaneNode;
+};
+
+export interface useSurfaceSamplerProps {
+	transform?: TransformFn;
+	weight?: string;
+	count?: number;
+}
+
+export function useSurfaceSampler(
+	mesh: RefObject<Mesh>,
+	count = 16,
+	transform?: TransformFn,
+	weight?: string,
+	instanceMesh?: RefObject<InstancedMesh> | null,
+): InstancedBufferAttribute {
+	count = slotDefault(count, 16);
+	transform = slotDefault(transform, undefined);
+	weight = slotDefault(weight, undefined);
+	instanceMesh = slotDefault(instanceMesh, undefined);
+	const [buffer, setBuffer] = useState(() => {
+		const values = Array.from(
+			{ length: count },
+			() => [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+		).flat();
+		return new InstancedBufferAttribute(Float32Array.from(values), 16);
+	});
+
+	useLayoutEffect(() => {
+		if (!mesh.current) return;
+		// three-stdlib currently resolves a newer @types/three copy; runtime instances are compatible.
+		const sampler = new MeshSurfaceSampler(mesh.current as any);
+		if (weight) sampler.setWeightAttribute(weight);
+		sampler.build();
+		const position = new Vector3();
+		const normal = new Vector3();
+		const color = new Color();
+		const dummy = new Object3D();
+		mesh.current.updateMatrixWorld(true);
+		for (let index = 0; index < count; index++) {
+			sampler.sample(position as any, normal as any, color as any);
+			if (transform) {
+				transform({ dummy, sampledMesh: mesh.current, position, normal, color }, index);
+			} else {
+				dummy.position.copy(position);
+			}
+			dummy.updateMatrix();
+			instanceMesh?.current?.setMatrixAt(index, dummy.matrix);
+			dummy.matrix.toArray(buffer.array, index * 16);
+		}
+		if (instanceMesh?.current) instanceMesh.current.instanceMatrix.needsUpdate = true;
+		buffer.needsUpdate = true;
+		setBuffer(new InstancedBufferAttribute(buffer.array as Float32Array, buffer.itemSize).copy(buffer));
+	}, [mesh, instanceMesh, weight, count, transform]);
+
+	return buffer;
+}
+
+export function Sampler({
+	children,
+	weight,
+	transform,
+	instances,
+	mesh,
+	count = 16,
+	...props
+}: SamplerProps) @{
+	const group = useRef<Group | null>(null);
+	const instancedRef = useRef<InstancedMesh | null>(null);
+	const meshToSampleRef = useRef<Mesh | null>(null);
+	useLayoutEffect(() => {
+		instancedRef.current = instances?.current ?? group.current?.children.find(
+			(child) => Object.hasOwn(child, 'instanceMatrix'),
+		) as InstancedMesh | null;
+		meshToSampleRef.current = mesh?.current ?? group.current?.children.find(
+			(child) => child.type === 'Mesh',
+		) as Mesh | null;
+	}, [children, mesh?.current, instances?.current]);
+	useSurfaceSampler(meshToSampleRef, count, transform, weight, instancedRef);
+	<group ref={group} {...props}>{children}</group>
+}

package/src/core/ScreenSizer.three.tsrx

@@ -0,0 +1,43 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ThreeElements, type ThreeRef, useFrame } from '@octanejs/three';
+import { useMemo, useRef } from '@octanejs/three/renderer';
+import { Object3D, Vector3 } from 'three';
+import { calculateScaleFactor } from './calculateScaleFactor.js';
+
+const worldPosition = new Vector3();
+
+export type ScreenSizerProps =
+	Omit<ThreeElements['object3D'], 'ref'> & {
+		scale?: number;
+	};
+
+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 ScreenSizer({ scale = 1, ref, ...props }: ScreenSizerProps & {
+	ref?: ThreeRef<Object3D>;
+}) @{
+	const container = useRef<Object3D | null>(null);
+	const mergedRef = useMemo(
+		() => (value: Object3D | null) => {
+			container.current = value;
+			assignRef(ref, value);
+		},
+		[ref],
+	);
+	useFrame((state) => {
+		const object = container.current;
+		if (!object) return;
+		const factor = calculateScaleFactor(
+			object.getWorldPosition(worldPosition),
+			scale,
+			state.camera,
+			state.size,
+		);
+		object.scale.setScalar(factor * scale);
+	});
+	<object3D ref={mergedRef} {...props} />
+}

package/src/core/ScreenSpace.three.tsrx

@@ -0,0 +1,21 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ThreeElements, type ThreeRef, useFrame } from '@octanejs/three';
+import { useRef } from '@octanejs/three/renderer';
+import type { Group } from 'three';
+
+export type ScreenSpaceProps = Omit<ThreeElements['group'], 'ref'> & { depth?: number };
+
+export function ScreenSpace({ children, depth = -1, ref, ...rest }: ScreenSpaceProps & {
+	ref?: ThreeRef<Group>;
+}) @{
+	const localRef = useRef<Group | null>(null);
+	useFrame(({ camera }) => {
+		if (localRef.current) {
+			localRef.current.quaternion.copy(camera.quaternion);
+			localRef.current.position.copy(camera.position);
+		}
+	});
+	<group ref={[localRef, ref ?? null]} {...rest}>
+		<group position={[0, 0, -depth]}>{children}</group>
+	</group>
+}