@octanejs/drei 0.0.1

package/src/core/Segments.three.tsrx

@@ -0,0 +1,119 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type Color, type ThreeRef, type Vector3 as Vector3Prop, useFrame } from '@octanejs/three';
+import { useLayoutEffect, useMemo, useRef, useState } from '@octanejs/three/renderer';
+import { createContext, useContext } from 'octane';
+import type { OctaneNode } from 'octane';
+import * as THREE from 'three';
+import { Line2, LineMaterial, type LineMaterialParameters, LineSegmentsGeometry } from 'three-stdlib';
+
+export type SegmentsProps = LineMaterialParameters & {
+	limit?: number;
+	lineWidth?: number;
+	children: OctaneNode;
+};
+
+export class SegmentObject {
+	color = new THREE.Color('white');
+	start = new THREE.Vector3();
+	end = new THREE.Vector3();
+}
+
+type SegmentRef = { current: SegmentObject | null };
+type SegmentsApi = { subscribe(ref: SegmentRef): () => void };
+const SegmentsContext = createContext<SegmentsApi | null>(null);
+
+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 Segments({
+	limit = 1000,
+	lineWidth = 1,
+	children,
+	ref,
+	...rest
+}: SegmentsProps & { ref?: ThreeRef<Line2> }) @{
+	const [segments, setSegments] = useState<SegmentRef[]>([]);
+	const [line] = useState(() => new Line2());
+	const [material] = useState(() => new LineMaterial());
+	const [geometry] = useState(() => new LineSegmentsGeometry());
+	const [resolution] = useState(() => new THREE.Vector2(512, 512));
+	const [positions] = useState<number[]>(() => Array(limit * 6).fill(0));
+	const [colors] = useState<number[]>(() => Array(limit * 6).fill(0));
+	const api = useMemo<SegmentsApi>(() => ({
+		subscribe(segmentRef) {
+			setSegments((current) => [...current, segmentRef]);
+			return () => setSegments((current) => current.filter((item) => item.current !== segmentRef.current));
+		},
+	}), []);
+	useFrame(() => {
+		for (let index = 0; index < limit; index++) {
+			const segment = segments[index]?.current;
+			if (!segment) continue;
+			positions[index * 6] = segment.start.x;
+			positions[index * 6 + 1] = segment.start.y;
+			positions[index * 6 + 2] = segment.start.z;
+			positions[index * 6 + 3] = segment.end.x;
+			positions[index * 6 + 4] = segment.end.y;
+			positions[index * 6 + 5] = segment.end.z;
+			colors[index * 6] = segment.color.r;
+			colors[index * 6 + 1] = segment.color.g;
+			colors[index * 6 + 2] = segment.color.b;
+			colors[index * 6 + 3] = segment.color.r;
+			colors[index * 6 + 4] = segment.color.g;
+			colors[index * 6 + 5] = segment.color.b;
+		}
+		geometry.setColors(colors);
+		geometry.setPositions(positions);
+		line.computeLineDistances();
+	});
+	const mergedRef = useMemo(() => (value: Line2 | null) => assignRef(ref, value), [ref]);
+	<primitive object={line} ref={mergedRef as any}>
+		<primitive object={geometry} attach="geometry" />
+		<primitive
+			object={material}
+			attach="material"
+			vertexColors={true}
+			resolution={resolution}
+			linewidth={lineWidth}
+			{...rest as any}
+		/>
+		<SegmentsContext.Provider value={api}>{children}</SegmentsContext.Provider>
+	</primitive>
+}
+
+export type SegmentProps = {
+	start: Vector3Prop;
+	end: Vector3Prop;
+	color?: Color;
+};
+
+function normalizePosition(position: SegmentProps['start']): THREE.Vector3 {
+	if (position instanceof THREE.Vector3) return position;
+	return new THREE.Vector3(...(typeof position === 'number'
+		? [position, position, position] as [number, number, number]
+		: position));
+}
+
+export function Segment({ color, start, end, ref }: SegmentProps & {
+	ref?: ThreeRef<SegmentObject>;
+}) @{
+	const api = useContext(SegmentsContext);
+	if (!api) throw new Error('Segment must used inside Segments component.');
+	const objectRef = useRef<SegmentObject | null>(null);
+	const [object] = useState(() => new SegmentObject());
+	const mergedRef = useMemo(
+		() => (value: SegmentObject | null) => { objectRef.current = value; assignRef(ref, value); },
+		[ref],
+	);
+	useLayoutEffect(() => api.subscribe(objectRef), [api]);
+	<primitive
+		object={object}
+		ref={mergedRef as any}
+		color={color}
+		start={normalizePosition(start)}
+		end={normalizePosition(end)}
+	/>
+}

package/src/core/Sky.three.tsrx

@@ -0,0 +1,63 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ThreeRef, type Vector3 as Vector3Prop } from '@octanejs/three';
+import { useMemo, useState } from '@octanejs/three/renderer';
+import * as THREE from 'three';
+import { Sky as SkyImpl } from 'three-stdlib';
+
+export type SkyProps = {
+	distance?: number;
+	sunPosition?: Vector3Prop;
+	inclination?: number;
+	azimuth?: number;
+	mieCoefficient?: number;
+	mieDirectionalG?: number;
+	rayleigh?: number;
+	turbidity?: number;
+};
+
+export function calcPosFromAngles(
+	inclination: number,
+	azimuth: number,
+	vector: THREE.Vector3 = new THREE.Vector3(),
+): THREE.Vector3 {
+	const theta = Math.PI * (inclination - 0.5);
+	const phi = 2 * Math.PI * (azimuth - 0.5);
+	vector.x = Math.cos(phi);
+	vector.y = Math.sin(theta);
+	vector.z = Math.sin(phi);
+	return vector;
+}
+
+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 Sky({
+	inclination = 0.6,
+	azimuth = 0.1,
+	distance = 1000,
+	mieCoefficient = 0.005,
+	mieDirectionalG = 0.8,
+	rayleigh = 0.5,
+	turbidity = 10,
+	sunPosition = calcPosFromAngles(inclination, azimuth),
+	ref,
+	...props
+}: SkyProps & { ref?: ThreeRef<SkyImpl> }) @{
+	const scale = useMemo(() => new THREE.Vector3().setScalar(distance), [distance]);
+	const [sky] = useState(() => new SkyImpl());
+	const mergedRef = useMemo(() => (value: SkyImpl | null) => assignRef(ref, value), [ref]);
+	<primitive
+		object={sky}
+		ref={mergedRef}
+		material-uniforms-mieCoefficient-value={mieCoefficient}
+		material-uniforms-mieDirectionalG-value={mieDirectionalG}
+		material-uniforms-rayleigh-value={rayleigh}
+		material-uniforms-sunPosition-value={sunPosition}
+		material-uniforms-turbidity-value={turbidity}
+		scale={scale}
+		{...props}
+	/>
+}

package/src/core/Sparkles.three.tsrx

@@ -0,0 +1,145 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ThreeElements, type ThreeRef, useFrame, useThree } from '@octanejs/three';
+import { useMemo, useRef, useState } from '@octanejs/three/renderer';
+import * as THREE from 'three';
+
+export class SparklesImplMaterial extends THREE.ShaderMaterial {
+	constructor() {
+		super({
+			uniforms: { time: { value: 0 }, pixelRatio: { value: 1 } },
+			vertexShader: `uniform float pixelRatio;
+uniform float time;
+attribute float size;
+attribute float speed;
+attribute float opacity;
+attribute vec3 noise;
+attribute vec3 color;
+varying vec3 vColor;
+varying float vOpacity;
+void main() {
+  vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+  modelPosition.y += sin(time * speed + modelPosition.x * noise.x * 100.0) * 0.2;
+  modelPosition.z += cos(time * speed + modelPosition.x * noise.y * 100.0) * 0.2;
+  modelPosition.x += cos(time * speed + modelPosition.x * noise.z * 100.0) * 0.2;
+  vec4 viewPosition = viewMatrix * modelPosition;
+  gl_Position = projectionMatrix * viewPosition;
+  gl_PointSize = size * 25. * pixelRatio;
+  gl_PointSize *= (1.0 / - viewPosition.z);
+  vColor = color;
+  vOpacity = opacity;
+}`,
+			fragmentShader: `varying vec3 vColor;
+varying float vOpacity;
+void main() {
+  float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
+  float strength = 0.05 / distanceToCenter - 0.1;
+  gl_FragColor = vec4(vColor, strength * vOpacity);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}`,
+		});
+	}
+	get time(): number { return this.uniforms.time.value; }
+	set time(value: number) { this.uniforms.time.value = value; }
+	get pixelRatio(): number { return this.uniforms.pixelRatio.value; }
+	set pixelRatio(value: number) { this.uniforms.pixelRatio.value = value; }
+}
+
+function isFloat32Array(value: unknown): value is Float32Array {
+	return Boolean(value) && (value as Float32Array).constructor === Float32Array;
+}
+
+function isVector(value: unknown): value is THREE.Vector2 | THREE.Vector3 | THREE.Vector4 {
+	return value instanceof THREE.Vector2 || value instanceof THREE.Vector3 || value instanceof THREE.Vector4;
+}
+
+function normalizeVector(value: unknown): number[] {
+	if (Array.isArray(value)) return value;
+	if (isVector(value)) return value.toArray();
+	return [value, value, value] as number[];
+}
+
+function attribute<T>(count: number, prop?: T | Float32Array, setDefault?: (value: T) => number) {
+	if (prop !== undefined) {
+		if (isFloat32Array(prop)) return prop;
+		if (prop instanceof THREE.Color) {
+			return Float32Array.from(Array.from({ length: count * 3 }, () => [prop.r, prop.g, prop.b]).flat());
+		}
+		if (isVector(prop) || Array.isArray(prop)) {
+			return Float32Array.from(Array.from({ length: count * 3 }, () => normalizeVector(prop)).flat());
+		}
+		return Float32Array.from({ length: count }, () => prop as number);
+	}
+	return Float32Array.from({ length: count }, setDefault!);
+}
+
+export type SparklesProps = Omit<ThreeElements['points'], 'ref' | 'scale'> & {
+	count?: number;
+	speed?: number | Float32Array;
+	opacity?: number | Float32Array;
+	color?: THREE.ColorRepresentation | Float32Array;
+	size?: number | Float32Array;
+	scale?: number | [number, number, number] | THREE.Vector3;
+	noise?: number | [number, number, number] | THREE.Vector3 | Float32Array;
+};
+
+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 Sparkles({
+	noise = 1,
+	count = 100,
+	speed = 1,
+	opacity = 1,
+	scale = 1,
+	size,
+	color,
+	children,
+	ref,
+	...props
+}: SparklesProps & { ref?: ThreeRef<THREE.Points> }) @{
+	const localRef = useRef<THREE.Points | null>(null);
+	const dpr = useThree((state) => state.viewport.dpr);
+	const normalizedScale = normalizeVector(scale);
+	const positions = useMemo(
+		() => Float32Array.from(Array.from({ length: count }, () => normalizedScale.map(THREE.MathUtils.randFloatSpread)).flat()),
+		[count, ...normalizedScale],
+	);
+	const sizes = useMemo(() => attribute<number>(count, size, Math.random), [count, size]);
+	const opacities = useMemo(() => attribute<number>(count, opacity), [count, opacity]);
+	const speeds = useMemo(() => attribute<number>(count, speed), [count, speed]);
+	const noises = useMemo(() => attribute<typeof noise>(count * 3, noise), [count, noise]);
+	const colors = useMemo(
+		() => attribute<THREE.ColorRepresentation>(
+			color === undefined ? count * 3 : count,
+			!isFloat32Array(color) ? new THREE.Color(color) : color,
+			() => 1,
+		),
+		[count, color],
+	);
+	const [material] = useState(() => new SparklesImplMaterial());
+	material.pixelRatio = dpr;
+	material.transparent = true;
+	material.depthWrite = false;
+	const mergedRef = useMemo(
+		() => (value: THREE.Points | null) => { localRef.current = value; assignRef(ref, value); },
+		[ref],
+	);
+	useFrame((state) => {
+		if (localRef.current?.material) (localRef.current.material as SparklesImplMaterial).time = state.clock.elapsedTime;
+	});
+	<points key={`particle-${count}-${JSON.stringify(scale)}`} {...props} ref={mergedRef}>
+		<bufferGeometry>
+			<bufferAttribute attach="attributes-position" args={[positions, 3]} />
+			<bufferAttribute attach="attributes-size" args={[sizes, 1]} />
+			<bufferAttribute attach="attributes-opacity" args={[opacities, 1]} />
+			<bufferAttribute attach="attributes-speed" args={[speeds, 1]} />
+			<bufferAttribute attach="attributes-color" args={[colors, 3]} />
+			<bufferAttribute attach="attributes-noise" args={[noises, 3]} />
+		</bufferGeometry>
+		{children || <primitive object={material} attach="material" />}
+	</points>
+}

package/src/core/Splat.three.tsrx

@@ -0,0 +1,52 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { extend, useFrame, useLoader, useThree } from '@octanejs/three';
+import { useLayoutEffect, useRef } from '@octanejs/three/renderer';
+import * as THREE from 'three';
+import {
+	SplatLoader,
+	SplatMaterial,
+	type SharedState,
+	type SplatProps,
+	type TargetMesh,
+} from './splat-resource.js';
+
+export type { SharedState, SplatMaterialType, SplatProps, TargetMesh } from './splat-resource.js';
+
+const SplatMaterialElement = extend(SplatMaterial);
+
+export function Splat({
+	src,
+	toneMapped = false,
+	alphaTest = 0,
+	alphaHash = false,
+	chunkSize = 25000,
+	...props
+}: SplatProps) @{
+	const ref = useRef<TargetMesh | null>(null);
+	const gl = useThree((state) => state.gl) as unknown as THREE.WebGLRenderer;
+	const camera = useThree((state) => state.camera);
+	const shared = useLoader(SplatLoader, src, (loader) => {
+		loader.gl = gl;
+		loader.chunkSize = chunkSize;
+	}) as SharedState;
+	useLayoutEffect(() => {
+		if (!ref.current) return;
+		return shared.connect(ref.current);
+	}, [src]);
+	useFrame(() => { if (ref.current) shared.update(ref.current, camera, alphaHash); });
+	<mesh ref={ref} frustumCulled={false} {...props as any}>
+		<SplatMaterialElement {...({
+			key: `${src}/${alphaTest}/${alphaHash}${SplatMaterial.key}`,
+			transparent: !alphaHash,
+			depthTest: true,
+			alphaTest: alphaHash ? 0 : alphaTest,
+			centerAndScaleTexture: shared.centerAndScaleTexture,
+			covAndColorTexture: shared.covAndColorTexture,
+			depthWrite: alphaHash ? true : alphaTest > 0,
+			blending: alphaHash ? THREE.NormalBlending : THREE.CustomBlending,
+			blendSrcAlpha: THREE.OneFactor,
+			alphaHash: Boolean(alphaHash),
+			toneMapped,
+		} as any)} />
+	</mesh>
+}