@octanejs/drei 0.0.1

package/src/core/DetectGPU.three.tsrx

@@ -0,0 +1,22 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { use } from '@octanejs/three/renderer';
+import { getGPUTier, type GetGPUTier } from 'detect-gpu';
+import { slotDefault } from './compiler-slot.js';
+import { resolveRenderChildren, type RenderChildren } from './octane-children.js';
+import { resourcePromise } from './resource.js';
+
+export const useDetectGPU = (props?: GetGPUTier) => {
+	props = slotDefault(props, undefined);
+	return use(resourcePromise(() => getGPUTier(props), ['useDetectGPU']));
+};
+
+export type DetectGPUProps = {
+	children?: RenderChildren<ReturnType<typeof useDetectGPU>>;
+} & Parameters<typeof useDetectGPU>[0];
+
+export function DetectGPU({ children, ...options }: DetectGPUProps) @{
+	const result = useDetectGPU(options);
+	<>
+		{resolveRenderChildren(children, result)}
+	</>
+}

package/src/core/Effects.three.tsrx

@@ -0,0 +1,123 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import {
+	extend,
+	type ThreeElement,
+	type ThreeRef,
+	useFrame,
+	useThree,
+} from '@octanejs/three';
+import { useEffect, useMemo, useRef, useState } from '@octanejs/three/renderer';
+import * as THREE from 'three';
+import {
+	EffectComposer,
+	GammaCorrectionShader,
+	RenderPass,
+	ShaderPass,
+} from 'three-stdlib';
+import { isOctaneChildrenBlock } from './octane-element.js';
+
+const EffectComposerElement = extend(EffectComposer);
+const RenderPassElement = extend(RenderPass);
+const ShaderPassElement = extend(ShaderPass);
+
+export type EffectsProps = Omit<ThreeElement<typeof EffectComposer>, 'ref' | 'args'> & {
+	multisamping?: number;
+	colorSpace?: THREE.ColorSpace;
+	type?: THREE.TextureDataType;
+	renderIndex?: number;
+	disableGamma?: boolean;
+	disableRenderPass?: boolean;
+	disableRender?: boolean;
+	depthBuffer?: boolean;
+	stencilBuffer?: boolean;
+	anisotropy?: 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;
+}
+
+function appendPasses(passes: any[], children: unknown): void {
+	if (Array.isArray(children)) {
+		for (const child of children) appendPasses(passes, child);
+		return;
+	}
+	// Universal plan/element descriptors are objects. Compiled children blocks and
+	// other functions are not cloneable — those render through auto-attach instead.
+	if (children == null || typeof children === 'boolean' || typeof children === 'function') return;
+	if (typeof children !== 'object') return;
+	const element = children as { props?: Record<string, unknown> };
+	const key = passes.length;
+	passes.push({
+		...element,
+		key: String(key),
+		props: { ...element.props, key, attach: `passes-${key}` },
+	});
+}
+
+export function Effects({
+	children,
+	multisamping = 8,
+	renderIndex = 1,
+	disableRender,
+	disableGamma,
+	disableRenderPass,
+	depthBuffer = true,
+	stencilBuffer = false,
+	anisotropy = 1,
+	colorSpace,
+	type,
+	ref,
+	...props
+}: EffectsProps & { ref?: ThreeRef<EffectComposer> }) @{
+	const composer = useRef<EffectComposer | null>(null);
+	const mergedRef = useMemo(
+		() => (value: EffectComposer | null) => {
+			composer.current = value;
+			assignRef(ref, value);
+		},
+		[ref],
+	);
+	const { scene, camera, gl, size, viewport } = useThree();
+	const [target] = useState(() => {
+		const renderTarget = new THREE.WebGLRenderTarget(size.width, size.height, {
+			type: type || THREE.HalfFloatType,
+			format: THREE.RGBAFormat,
+			depthBuffer,
+			stencilBuffer,
+			anisotropy,
+		});
+		if (type === THREE.UnsignedByteType && colorSpace != null) {
+			renderTarget.texture.colorSpace = colorSpace;
+		}
+		renderTarget.samples = multisamping;
+		return renderTarget;
+	});
+	useEffect(() => {
+		composer.current?.setSize(size.width, size.height);
+		composer.current?.setPixelRatio(viewport.dpr);
+	}, [gl, size, viewport.dpr]);
+	useFrame(() => {
+		if (!disableRender) composer.current?.render();
+	}, renderIndex);
+	const passes: any[] = [];
+	if (!disableRenderPass) {
+		passes.push(<RenderPassElement key="renderpass" attach={`passes-${passes.length}`} args={[scene, camera] as any} />);
+	}
+	if (!disableGamma) {
+		passes.push(<ShaderPassElement key="gammapass" attach={`passes-${passes.length}`} args={[GammaCorrectionShader]} />);
+	}
+	const blockChildren = isOctaneChildrenBlock(children) ? children : null;
+	if (!blockChildren) appendPasses(passes, children);
+	<EffectComposerElement
+		ref={mergedRef}
+		args={[gl as any, target]}
+		__octaneAutoAttachArray="passes"
+		{...props as any}
+	>
+		{passes}
+		{blockChildren}
+	</EffectComposerElement>
+}

package/src/core/Environment.three.tsrx

@@ -0,0 +1,220 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import {
+	applyProps,
+	createPortal,
+	extend,
+	type ThreeElement,
+	useFrame,
+	useThree,
+} from '@octanejs/three';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, type RefObject } from '@octanejs/three/renderer';
+import type { OctaneNode } from 'octane';
+import { universalComponent } from 'octane/universal';
+import {
+	CubeCamera,
+	type CubeTexture,
+	type Euler,
+	HalfFloatType,
+	Scene,
+	type Texture,
+	WebGLCubeRenderTarget,
+} from 'three';
+import { GroundProjectedEnv as GroundProjectedEnvImpl } from 'three-stdlib';
+import type { EnvironmentLoaderProps } from './environment-loader.js';
+import { useEnvironment } from './useEnvironment.three.tsrx';
+
+export type EnvironmentProps = {
+	children?: OctaneNode;
+	frames?: number;
+	near?: number;
+	far?: number;
+	resolution?: number;
+	background?: boolean | 'only';
+	blur?: number;
+	backgroundBlurriness?: number;
+	backgroundIntensity?: number;
+	backgroundRotation?: Euler;
+	environmentIntensity?: number;
+	environmentRotation?: Euler;
+	map?: Texture;
+	scene?: Scene | RefObject<Scene>;
+	ground?: boolean | { radius?: number; height?: number; scale?: number };
+} & EnvironmentLoaderProps;
+
+function isSceneRef(scene: Scene | RefObject<Scene>): scene is RefObject<Scene> {
+	return Boolean(scene && 'current' in scene && scene.current?.isScene);
+}
+
+function resolveScene(scene: Scene | RefObject<Scene>): Scene {
+	return isSceneRef(scene) ? scene.current! : scene;
+}
+
+function setEnvironmentProperties(
+	background: boolean | 'only',
+	scene: Scene | RefObject<Scene> | undefined,
+	defaultScene: Scene,
+	texture: Texture,
+	sceneProps: Partial<EnvironmentProps> = {},
+): () => void {
+	const nextProps = {
+		backgroundBlurriness: 0,
+		backgroundIntensity: 1,
+		backgroundRotation: [0, 0, 0],
+		environmentIntensity: 1,
+		environmentRotation: [0, 0, 0],
+		...sceneProps,
+	};
+	const target = resolveScene(scene ?? defaultScene);
+	const oldBackground = target.background;
+	const oldEnvironment = target.environment;
+	const oldSceneProps = {
+		backgroundBlurriness: target.backgroundBlurriness,
+		backgroundIntensity: target.backgroundIntensity,
+		backgroundRotation: target.backgroundRotation?.clone?.() ?? [0, 0, 0],
+		environmentIntensity: target.environmentIntensity,
+		environmentRotation: target.environmentRotation?.clone?.() ?? [0, 0, 0],
+	};
+	if (background !== 'only') target.environment = texture;
+	if (background) target.background = texture;
+	applyProps(target as any, nextProps as any);
+	return () => {
+		if (background !== 'only') target.environment = oldEnvironment;
+		if (background) target.background = oldBackground;
+		applyProps(target as any, oldSceneProps as any);
+	};
+}
+
+export function EnvironmentMap({
+	scene,
+	background = false,
+	map,
+	...config
+}: EnvironmentProps) @{
+	const defaultScene = useThree((state) => state.scene);
+	useLayoutEffect(() => {
+		if (map) return setEnvironmentProperties(background, scene, defaultScene, map, config);
+	});
+	null
+}
+
+export function EnvironmentCube({
+	background = false,
+	scene,
+	blur,
+	backgroundBlurriness,
+	backgroundIntensity,
+	backgroundRotation,
+	environmentIntensity,
+	environmentRotation,
+	...loaderOptions
+}: EnvironmentProps) @{
+	const texture = useEnvironment(loaderOptions);
+	const defaultScene = useThree((state) => state.scene);
+	useLayoutEffect(() => setEnvironmentProperties(background, scene, defaultScene, texture, {
+		backgroundBlurriness: blur ?? backgroundBlurriness,
+		backgroundIntensity,
+		backgroundRotation,
+		environmentIntensity,
+		environmentRotation,
+	}));
+	useEffect(() => () => texture.dispose(), [texture]);
+	null
+}
+
+export function EnvironmentPortal({
+	children,
+	near = 0.1,
+	far = 1000,
+	resolution = 256,
+	frames = 1,
+	map,
+	background = false,
+	blur,
+	backgroundBlurriness,
+	backgroundIntensity,
+	backgroundRotation,
+	environmentIntensity,
+	environmentRotation,
+	scene,
+	files,
+	path,
+	preset,
+	extensions,
+}: EnvironmentProps) @{
+	const gl = useThree((state) => state.gl);
+	const defaultScene = useThree((state) => state.scene);
+	const camera = useRef<CubeCamera | null>(null);
+	const [virtualScene] = useState(() => new Scene());
+	const target = useMemo(() => {
+		const value = new WebGLCubeRenderTarget(resolution);
+		value.texture.type = HalfFloatType;
+		return value;
+	}, [resolution]);
+	useEffect(() => () => target.dispose(), [target]);
+	useLayoutEffect(() => {
+		if (frames === 1 && camera.current) {
+			const autoClear = gl.autoClear;
+			gl.autoClear = true;
+			camera.current.update(gl as any, virtualScene);
+			gl.autoClear = autoClear;
+		}
+		return setEnvironmentProperties(background, scene, defaultScene, target.texture, {
+			backgroundBlurriness: blur ?? backgroundBlurriness,
+			backgroundIntensity,
+			backgroundRotation,
+			environmentIntensity,
+			environmentRotation,
+		});
+	}, [children, virtualScene, target.texture, scene, defaultScene, background, frames, gl]);
+	let count = 1;
+	useFrame(() => {
+		if ((frames === Infinity || count < frames) && camera.current) {
+			const autoClear = gl.autoClear;
+			gl.autoClear = true;
+			camera.current.update(gl as any, virtualScene);
+			gl.autoClear = autoClear;
+			count++;
+		}
+	});
+	<>
+		{createPortal(
+			<>
+				{children}
+				<cubeCamera ref={camera} args={[near, far, target]} />
+				@if (files || preset) {
+					<EnvironmentCube background={true} files={files} preset={preset} path={path} extensions={extensions} />
+				} @else if (map) {
+					<EnvironmentMap background={true} map={map} extensions={extensions} />
+				}
+			</>,
+			virtualScene,
+		)}
+	</>
+}
+
+const GroundProjectedEnvElement = extend(GroundProjectedEnvImpl);
+
+function EnvironmentGround(props: EnvironmentProps) @{
+	const textureDefault = useEnvironment(props);
+	const texture = props.map ?? textureDefault;
+	useEffect(() => () => textureDefault.dispose(), [textureDefault]);
+	const args = useMemo<[CubeTexture | Texture]>(() => [texture], [texture]);
+	const height = typeof props.ground === 'object' ? props.ground.height : undefined;
+	const radius = typeof props.ground === 'object' ? props.ground.radius : undefined;
+	const scale = typeof props.ground === 'object' ? props.ground.scale ?? 1000 : 1000;
+	<>
+		<EnvironmentMap {...props} map={texture} />
+		<GroundProjectedEnvElement args={args as any} scale={scale} height={height} radius={radius} />
+	</>
+}
+
+export function Environment(props: EnvironmentProps) @{
+	const component = props.ground
+		? EnvironmentGround
+		: props.map
+			? EnvironmentMap
+			: props.children
+				? EnvironmentPortal
+				: EnvironmentCube;
+	<>{universalComponent('three', component as any, props as unknown as Record<string, unknown>)}</>
+}

package/src/core/Example.three.tsrx

@@ -0,0 +1,56 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ThreeElements, type ThreeRef } from '@octanejs/three';
+import { useCallback, useImperativeHandle, useMemo, useState } from '@octanejs/three/renderer';
+import type { OctaneNode } from 'octane';
+import { MeshNormalMaterial, MeshStandardMaterial, type ColorRepresentation, type Group } from 'three';
+import { Center } from './Center.three.tsrx';
+import { Text3D } from './Text3D.three.tsrx';
+
+export type ExampleProps = {
+	font: string;
+	color?: ColorRepresentation;
+	debug?: boolean;
+	bevelSize?: number;
+	children?: OctaneNode;
+} & Omit<ThreeElements['group'], 'ref'>;
+
+export type ExampleApi = {
+	incr: (x?: number) => void;
+	decr: (x?: number) => void;
+};
+
+export function Example({
+	font,
+	color = '#cbcbcb',
+	bevelSize = 0.04,
+	debug = false,
+	children,
+	ref,
+	...props
+}: ExampleProps & { ref?: ThreeRef<ExampleApi> }) @{
+	const [counter, setCounter] = useState(0);
+	const incr = useCallback((x = 1) => setCounter(counter + x), [counter]);
+	const decr = useCallback((x = 1) => setCounter(counter - x), [counter]);
+	const api = useMemo<ExampleApi>(() => ({ incr, decr }), [incr, decr]);
+	useImperativeHandle((ref ?? null) as any, () => api, [api]);
+	const material = useMemo(
+		() => debug
+			? new MeshNormalMaterial({ wireframe: true })
+			: new MeshStandardMaterial({ color }),
+		[debug, color],
+	);
+	<group {...props}>
+		@try {
+			<Center top cacheKey={JSON.stringify({ counter, font })}>
+				<Text3D
+					bevelEnabled
+					bevelSize={bevelSize}
+					font={font}
+					material={material}
+					children={counter}
+				/>
+			</Center>
+		} @pending {}
+		{children}
+	</group>
+}

package/src/core/Fbo.three.tsrx

@@ -0,0 +1,70 @@
+import { useThree } from '@octanejs/three';
+import { useEffect, useLayoutEffect, useMemo } from '@octanejs/three/renderer';
+import * as THREE from 'three';
+import { slotDefault } from './compiler-slot.js';
+import { resolveRenderChildren, type RenderChildren } from './octane-children.js';
+
+type FBOSettings =
+	{
+		/** @deprecated use `depthBuffer` instead. */
+		depth?: boolean;
+	} & THREE.RenderTargetOptions;
+
+export function useFBO(width?: number | FBOSettings, height?: number, settings?: FBOSettings) {
+	width = slotDefault(width, undefined);
+	height = slotDefault(height, undefined);
+	settings = slotDefault(settings, undefined);
+	const size = useThree((state) => state.size);
+	const viewport = useThree((state) => state.viewport);
+	const targetWidth =
+		typeof width === 'number' ? width : size.width * viewport.dpr;
+	const targetHeight =
+		typeof height === 'number' ? height : size.height * viewport.dpr;
+	const resolvedSettings = (typeof width === 'number' ? settings : width) || {};
+	const { samples = 0, depth, ...targetSettings } = resolvedSettings;
+	const depthBuffer = depth ?? resolvedSettings.depthBuffer;
+	const target = useMemo(() => {
+		const value = new THREE.WebGLRenderTarget(targetWidth, targetHeight, {
+			minFilter: THREE.LinearFilter,
+			magFilter: THREE.LinearFilter,
+			type: THREE.HalfFloatType,
+			...targetSettings,
+		});
+		if (depthBuffer) {
+			value.depthTexture = new THREE.DepthTexture(targetWidth, targetHeight, THREE.FloatType);
+		}
+		value.samples = samples;
+		return value;
+	}, []);
+	useLayoutEffect(() => {
+		target.setSize(targetWidth, targetHeight);
+		if (samples) target.samples = samples;
+	}, [samples, target, targetWidth, targetHeight]);
+	useEffect(() => () => target.dispose(), []);
+	return target;
+}
+
+type UseFBOParams = Parameters<typeof useFBO>;
+type FBO = ReturnType<typeof useFBO>;
+
+export type FboProps =
+	{
+		children?: RenderChildren<FBO>;
+		width?: UseFBOParams[0];
+		height?: UseFBOParams[1];
+	} & FBOSettings;
+
+export function Fbo({ children, width, height, ref, ...settings }: FboProps & {
+	ref?: { current: FBO | null } | ((value: FBO | null) => void);
+}) @{
+	const target = useFBO(width, height, settings);
+	useLayoutEffect(() => {
+		if (typeof ref === 'function') ref(target);
+		else if (ref) ref.current = target;
+		return () => {
+			if (typeof ref === 'function') ref(null);
+			else if (ref) ref.current = null;
+		};
+	}, [ref, target]);
+	<>{resolveRenderChildren(children, target)}</>
+}

package/src/core/Fbx.three.tsrx

@@ -0,0 +1,25 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { useLoader, type ThreeRef } from '@octanejs/three';
+import type { Group } from 'three';
+import { FBXLoader } from 'three-stdlib';
+import { Clone, type CloneProps } from './Clone.three.tsrx';
+
+export const useFBX = Object.assign(
+	(path: string): Group => useLoader(FBXLoader, path) as unknown as Group,
+	{
+		preload(path: string) {
+			useLoader.preload(FBXLoader, path);
+		},
+		clear(input: string | string[]) {
+			useLoader.clear(FBXLoader, input);
+		},
+	},
+);
+
+export function Fbx({ path, ref, ...props }: { path: string; ref?: ThreeRef<Group> } & Omit<
+	CloneProps,
+	'object'
+>) @{
+	const fbx = useFBX(path);
+	<Clone ref={ref} {...props} object={fbx.children[0]} />
+}

package/src/core/Fisheye.three.tsrx

@@ -0,0 +1,82 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ComputeFunction, type ThreeElements, useFrame, useThree } from '@octanejs/three';
+import { useCallback, useLayoutEffect, useRef, useState, type RefObject } from '@octanejs/three/renderer';
+import type { OctaneNode } from 'octane';
+import * as THREE from 'three';
+import { RenderCubeTexture, type RenderCubeTextureApi } from './RenderCubeTexture.three.tsrx';
+
+export type FisheyeProps = ThreeElements['mesh'] & {
+	zoom?: number;
+	segments?: number;
+	resolution?: number;
+	children: OctaneNode;
+	renderPriority?: number;
+};
+
+function UpdateCubeCamera({ api }: { api: RefObject<RenderCubeTextureApi> }) @{
+	const position = new THREE.Vector3();
+	const rotation = new THREE.Quaternion();
+	const scale = new THREE.Vector3();
+	const flip = new THREE.Euler(0, Math.PI, 0);
+	useFrame((state) => {
+		state.camera.matrixWorld.decompose(position, rotation, scale);
+		api.current?.camera.position.copy(position);
+		api.current?.camera.quaternion.setFromEuler(flip).premultiply(rotation);
+	});
+	null
+}
+
+export function Fisheye({
+	renderPriority = 1,
+	zoom = 0,
+	segments = 64,
+	children,
+	resolution = 896,
+	...props
+}: FisheyeProps) @{
+	const sphere = useRef<THREE.Mesh | null>(null);
+	const cubeApi = useRef<RenderCubeTextureApi | null>(null);
+	const { width, height } = useThree((state) => state.size);
+	const [camera] = useState(() => new THREE.OrthographicCamera());
+	useLayoutEffect(() => {
+		camera.position.set(0, 0, 100);
+		camera.zoom = 100;
+		camera.left = width / -2;
+		camera.right = width / 2;
+		camera.top = height / 2;
+		camera.bottom = height / -2;
+		camera.updateProjectionMatrix();
+	}, [width, height]);
+	const radius = (Math.sqrt(width * width + height * height) / 100) * (0.5 + zoom / 2);
+	const normal = new THREE.Vector3();
+	const sphereBounds = new THREE.Sphere(new THREE.Vector3(), radius);
+	const normalMatrix = new THREE.Matrix3();
+	const compute = useCallback<ComputeFunction>((event, state) => {
+		state.pointer.set(
+			((event as any).offsetX / state.size.width) * 2 - 1,
+			-((event as any).offsetY / state.size.height) * 2 + 1,
+		);
+		state.raycaster.setFromCamera(state.pointer, camera);
+		if (!state.raycaster.ray.intersectSphere(sphereBounds, normal)) return;
+		normal.normalize();
+		const cubeCamera = cubeApi.current?.camera;
+		if (!cubeCamera) return;
+		normalMatrix.getNormalMatrix(cubeCamera.matrixWorld);
+		cubeCamera.getWorldPosition(state.raycaster.ray.origin);
+		state.raycaster.ray.direction.set(0, 0, 1).reflect(normal);
+		state.raycaster.ray.direction.x *= -1;
+		state.raycaster.ray.direction.applyNormalMatrix(normalMatrix).multiplyScalar(-1);
+	}, []);
+	useFrame((state) => {
+		if (renderPriority && sphere.current) state.gl.render(sphere.current as any, camera);
+	}, renderPriority);
+	<mesh ref={sphere} {...props} scale={radius}>
+		<sphereGeometry args={[1, segments, segments]} />
+		<meshBasicMaterial>
+			<RenderCubeTexture compute={compute} attach="envMap" flip resolution={resolution} ref={cubeApi}>
+				{children}
+				<UpdateCubeCamera api={cubeApi as RefObject<RenderCubeTextureApi>} />
+			</RenderCubeTexture>
+		</meshBasicMaterial>
+	</mesh>
+}