@octanejs/drei 0.0.1

package/src/core/shaderMaterial.ts

@@ -0,0 +1,50 @@
+import type { ConstructorRepresentation } from '@octanejs/three';
+import * as THREE from 'three';
+import type { MeshBVHUniformStruct } from 'three-mesh-bvh';
+
+type UniformValue =
+	| THREE.Texture
+	| THREE.TypedArray
+	| THREE.Matrix4
+	| THREE.Matrix3
+	| THREE.Quaternion
+	| THREE.Vector4
+	| THREE.Vector3
+	| THREE.Vector2
+	| THREE.Color
+	| MeshBVHUniformStruct
+	| number
+	| boolean
+	| null;
+
+type Uniforms = Record<string, UniformValue | Record<string, UniformValue> | Array<UniformValue>>;
+
+export function shaderMaterial<U extends Uniforms, M extends THREE.ShaderMaterial & U>(
+	uniforms: U,
+	vertexShader: string,
+	fragmentShader: string,
+	onInit?: (material?: M) => void,
+) {
+	return class extends THREE.ShaderMaterial {
+		static key = THREE.MathUtils.generateUUID();
+
+		constructor(parameters?: THREE.ShaderMaterialParameters) {
+			super({ vertexShader, fragmentShader, ...parameters });
+
+			for (const key in uniforms) {
+				this.uniforms[key] = new THREE.Uniform(uniforms[key]);
+				Object.defineProperty(this, key, {
+					get() {
+						return this.uniforms[key].value;
+					},
+					set(value) {
+						this.uniforms[key].value = value;
+					},
+				});
+			}
+			this.uniforms = THREE.UniformsUtils.clone(this.uniforms);
+
+			onInit?.(this as unknown as M);
+		}
+	} as unknown as ConstructorRepresentation<M> & { key: string };
+}

package/src/core/shadows.three.tsrx

@@ -0,0 +1,164 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ThreeElements, type ThreeRef, useFrame, useInstanceHandle } from '@octanejs/three';
+import { useLayoutEffect, useMemo, useRef } from '@octanejs/three/renderer';
+import {
+	Color,
+	DoubleSide,
+	type Mesh,
+	type MeshBasicMaterial,
+	type MeshDepthMaterial,
+	type MeshDistanceMaterial,
+	type PlaneGeometry,
+	RGBADepthPacking,
+	type Texture,
+} from 'three';
+
+export type ShadowProps =
+	Omit<ThreeElements['mesh'], 'ref'> & {
+		colorStop?: number;
+		fog?: boolean;
+		color?: Color | number | string;
+		opacity?: number;
+		depthWrite?: boolean;
+	};
+
+export type ShadowType = Mesh<PlaneGeometry, MeshBasicMaterial>;
+
+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 Shadow({
+	fog = false,
+	renderOrder,
+	depthWrite = false,
+	colorStop = 0,
+	color = 'black',
+	opacity = 0.5,
+	ref,
+	...props
+}: ShadowProps & { ref?: ThreeRef<ShadowType> }) @{
+	const canvas = useMemo(() => {
+		const element = document.createElement('canvas');
+		element.width = 128;
+		element.height = 128;
+		const context = element.getContext('2d') as CanvasRenderingContext2D;
+		const gradient = context.createRadialGradient(64, 64, 0, 64, 64, 64);
+		gradient.addColorStop(colorStop, new Color(color).getStyle());
+		gradient.addColorStop(1, 'rgba(0,0,0,0)');
+		context.fillStyle = gradient;
+		context.fillRect(0, 0, 128, 128);
+		return element;
+	}, [color, colorStop]);
+	const mergedRef = useMemo(() => (value: ShadowType | null) => assignRef(ref, value), [ref]);
+	<mesh renderOrder={renderOrder} ref={mergedRef} rotation-x={-Math.PI / 2} {...props}>
+		<planeGeometry />
+		<meshBasicMaterial
+			transparent
+			opacity={opacity}
+			fog={fog}
+			depthWrite={depthWrite}
+			side={DoubleSide}
+		>
+			<canvasTexture attach="map" args={[canvas]} />
+		</meshBasicMaterial>
+	</mesh>
+}
+
+export interface ShadowAlphaProps {
+	opacity?: number;
+	alphaMap?: Texture | boolean;
+}
+
+export function ShadowAlpha({ opacity, alphaMap }: ShadowAlphaProps) @{
+	const depthMaterialRef = useRef<MeshDepthMaterial | null>(null);
+	const distanceMaterialRef = useRef<MeshDistanceMaterial | null>(null);
+	const depthInstance = useInstanceHandle(depthMaterialRef);
+	const uShadowOpacity = useRef({ value: 1 });
+	const uAlphaMap = useRef<{ value: Texture | null }>({ value: null });
+	const uHasAlphaMap = useRef({ value: false });
+	useLayoutEffect(() => {
+		if (!depthMaterialRef.current || !distanceMaterialRef.current) return;
+		depthMaterialRef.current.onBeforeCompile = distanceMaterialRef.current.onBeforeCompile = (
+			shader,
+		) => {
+			const mainLineStart = shader.fragmentShader.indexOf('void main');
+			let mainLine = '';
+			let character: string | undefined;
+			let index = mainLineStart;
+			while (character !== '\n' && index < mainLineStart + 100) {
+				character = shader.fragmentShader.charAt(index);
+				mainLine += character;
+				index++;
+			}
+			mainLine = mainLine.trim();
+			shader.vertexShader = shader.vertexShader.replace(
+				'void main() {',
+				`
+        varying vec2 custom_vUv;
+
+        void main() {
+          custom_vUv = uv;
+          `,
+			);
+			shader.fragmentShader = shader.fragmentShader.replace(
+				mainLine,
+				`
+          uniform float uShadowOpacity;
+          uniform sampler2D uAlphaMap;
+          uniform bool uHasAlphaMap;
+
+          varying vec2 custom_vUv;
+  
+          float bayerDither2x2( vec2 v ) {
+            return mod( 3.0 * v.y + 2.0 * v.x, 4.0 );
+          }
+    
+          float bayerDither4x4( vec2 v ) {
+            vec2 P1 = mod( v, 2.0 );
+            vec2 P2 = mod( floor( 0.5  * v ), 2.0 );
+            return 4.0 * bayerDither2x2( P1 ) + bayerDither2x2( P2 );
+          }
+  
+          void main() {
+            float alpha = 
+              uHasAlphaMap ? 
+                uShadowOpacity * texture2D(uAlphaMap, custom_vUv).x
+              : uShadowOpacity;
+
+            if( ( bayerDither4x4( floor( mod( gl_FragCoord.xy, 4.0 ) ) ) ) / 16.0 >= alpha ) discard;
+            `,
+			);
+			shader.uniforms.uShadowOpacity = uShadowOpacity.current;
+			shader.uniforms.uAlphaMap = uAlphaMap.current;
+			shader.uniforms.uHasAlphaMap = uHasAlphaMap.current;
+		};
+	}, []);
+	useFrame(() => {
+		const parent = depthInstance.current?.parent?.object as
+			| (Mesh & {
+					material?: MeshBasicMaterial;
+			  })
+			| undefined;
+		const parentMaterial = parent?.material;
+		if (!parentMaterial) return;
+		uShadowOpacity.current.value = opacity ?? parentMaterial.opacity;
+		if (alphaMap === false) {
+			uAlphaMap.current.value = null;
+			uHasAlphaMap.current.value = false;
+		} else {
+			uAlphaMap.current.value = (alphaMap || parentMaterial.alphaMap) as Texture | null;
+			uHasAlphaMap.current.value = Boolean(uAlphaMap.current.value);
+		}
+	});
+	<>
+		<meshDepthMaterial
+			ref={depthMaterialRef}
+			attach="customDepthMaterial"
+			depthPacking={RGBADepthPacking}
+		/>
+		<meshDistanceMaterial ref={distanceMaterialRef} attach="customDistanceMaterial" />
+	</>
+}

package/src/core/shapes.three.tsrx

@@ -0,0 +1,170 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import type { ThreeElements, ThreeRef } from '@octanejs/three';
+import { useLayoutEffect, useRef } from '@octanejs/three/renderer';
+import type { OctaneNode } from 'octane';
+import * as THREE from 'three';
+
+export type Args<T> = T extends new (...args: any) => any ? ConstructorParameters<T> : T;
+export type ShapeProps<T> = Omit<ThreeElements['mesh'], 'ref' | 'args'> & { args?: Args<T> };
+
+type ShapeComponentProps<T> = ShapeProps<T> & { ref?: ThreeRef<THREE.Mesh> };
+type GeometryProps<T> = { args?: Args<T> };
+type GeometryComponent<T> = (props: GeometryProps<T>) => OctaneNode;
+
+interface ShapeMeshProps<T> extends ShapeComponentProps<T> {
+	Geometry: GeometryComponent<T>;
+	effect?: (mesh: THREE.Mesh) => void;
+}
+
+function ShapeMesh<T>({
+	Geometry,
+	args,
+	children,
+	effect,
+	ref,
+	key: _key,
+	...props
+}: ShapeMeshProps<T>) @{
+	const meshRef = useRef<THREE.Mesh | null>(null);
+
+	useLayoutEffect(() => {
+		if (meshRef.current !== null) effect?.(meshRef.current);
+	});
+
+	<mesh ref={[meshRef, ref ?? null]} {...props}>
+		<Geometry args={args} />
+		{children}
+	</mesh>
+}
+
+function BoxGeometry(props: GeometryProps<typeof THREE.BoxGeometry>) @{
+	<boxGeometry attach="geometry" args={props.args} />
+}
+function CircleGeometry(props: GeometryProps<typeof THREE.CircleGeometry>) @{
+	<circleGeometry attach="geometry" args={props.args} />
+}
+function ConeGeometry(props: GeometryProps<typeof THREE.ConeGeometry>) @{
+	<coneGeometry attach="geometry" args={props.args} />
+}
+function CylinderGeometry(props: GeometryProps<typeof THREE.CylinderGeometry>) @{
+	<cylinderGeometry attach="geometry" args={props.args} />
+}
+function SphereGeometry(props: GeometryProps<typeof THREE.SphereGeometry>) @{
+	<sphereGeometry attach="geometry" args={props.args} />
+}
+function PlaneGeometry(props: GeometryProps<typeof THREE.PlaneGeometry>) @{
+	<planeGeometry attach="geometry" args={props.args} />
+}
+function TubeGeometry(props: GeometryProps<typeof THREE.TubeGeometry>) @{
+	<tubeGeometry attach="geometry" args={props.args} />
+}
+function TorusGeometry(props: GeometryProps<typeof THREE.TorusGeometry>) @{
+	<torusGeometry attach="geometry" args={props.args} />
+}
+function TorusKnotGeometry(props: GeometryProps<typeof THREE.TorusKnotGeometry>) @{
+	<torusKnotGeometry attach="geometry" args={props.args} />
+}
+function TetrahedronGeometry(props: GeometryProps<typeof THREE.TetrahedronGeometry>) @{
+	<tetrahedronGeometry attach="geometry" args={props.args} />
+}
+function RingGeometry(props: GeometryProps<typeof THREE.RingGeometry>) @{
+	<ringGeometry attach="geometry" args={props.args} />
+}
+function PolyhedronGeometry(props: GeometryProps<typeof THREE.PolyhedronGeometry>) @{
+	<polyhedronGeometry attach="geometry" args={props.args} />
+}
+function IcosahedronGeometry(props: GeometryProps<typeof THREE.IcosahedronGeometry>) @{
+	<icosahedronGeometry attach="geometry" args={props.args} />
+}
+function OctahedronGeometry(props: GeometryProps<typeof THREE.OctahedronGeometry>) @{
+	<octahedronGeometry attach="geometry" args={props.args} />
+}
+function DodecahedronGeometry(props: GeometryProps<typeof THREE.DodecahedronGeometry>) @{
+	<dodecahedronGeometry attach="geometry" args={props.args} />
+}
+function ExtrudeGeometry(props: GeometryProps<typeof THREE.ExtrudeGeometry>) @{
+	<extrudeGeometry attach="geometry" args={props.args} />
+}
+function LatheGeometry(props: GeometryProps<typeof THREE.LatheGeometry>) @{
+	<latheGeometry attach="geometry" args={props.args} />
+}
+function CapsuleGeometry(props: GeometryProps<typeof THREE.CapsuleGeometry>) @{
+	<capsuleGeometry attach="geometry" args={props.args} />
+}
+function ShapeGeometry(props: GeometryProps<typeof THREE.ShapeGeometry>) @{
+	<shapeGeometry attach="geometry" args={props.args} />
+}
+
+export function Box(props: ShapeComponentProps<typeof THREE.BoxGeometry>) @{
+	<ShapeMesh {...props} Geometry={BoxGeometry} />
+}
+export function Circle(props: ShapeComponentProps<typeof THREE.CircleGeometry>) @{
+	<ShapeMesh {...props} Geometry={CircleGeometry} />
+}
+export function Cone(props: ShapeComponentProps<typeof THREE.ConeGeometry>) @{
+	<ShapeMesh {...props} Geometry={ConeGeometry} />
+}
+export function Cylinder(props: ShapeComponentProps<typeof THREE.CylinderGeometry>) @{
+	<ShapeMesh {...props} Geometry={CylinderGeometry} />
+}
+export function Sphere(props: ShapeComponentProps<typeof THREE.SphereGeometry>) @{
+	<ShapeMesh {...props} Geometry={SphereGeometry} />
+}
+export function Plane(props: ShapeComponentProps<typeof THREE.PlaneGeometry>) @{
+	<ShapeMesh {...props} Geometry={PlaneGeometry} />
+}
+export function Tube(props: ShapeComponentProps<typeof THREE.TubeGeometry>) @{
+	<ShapeMesh {...props} Geometry={TubeGeometry} />
+}
+export function Torus(props: ShapeComponentProps<typeof THREE.TorusGeometry>) @{
+	<ShapeMesh {...props} Geometry={TorusGeometry} />
+}
+export function TorusKnot(props: ShapeComponentProps<typeof THREE.TorusKnotGeometry>) @{
+	<ShapeMesh {...props} Geometry={TorusKnotGeometry} />
+}
+export function Tetrahedron(props: ShapeComponentProps<typeof THREE.TetrahedronGeometry>) @{
+	<ShapeMesh {...props} Geometry={TetrahedronGeometry} />
+}
+export function Ring(props: ShapeComponentProps<typeof THREE.RingGeometry>) @{
+	<ShapeMesh {...props} Geometry={RingGeometry} />
+}
+export function Polyhedron(props: ShapeComponentProps<typeof THREE.PolyhedronGeometry>) @{
+	<ShapeMesh {...props} Geometry={PolyhedronGeometry} />
+}
+export function Icosahedron(props: ShapeComponentProps<typeof THREE.IcosahedronGeometry>) @{
+	<ShapeMesh {...props} Geometry={IcosahedronGeometry} />
+}
+export function Octahedron(props: ShapeComponentProps<typeof THREE.OctahedronGeometry>) @{
+	<ShapeMesh {...props} Geometry={OctahedronGeometry} />
+}
+export function Dodecahedron(props: ShapeComponentProps<typeof THREE.DodecahedronGeometry>) @{
+	<ShapeMesh {...props} Geometry={DodecahedronGeometry} />
+}
+export function Extrude(props: ShapeComponentProps<typeof THREE.ExtrudeGeometry>) @{
+	<ShapeMesh {...props} Geometry={ExtrudeGeometry} />
+}
+export function Lathe(props: ShapeComponentProps<typeof THREE.LatheGeometry>) @{
+	<ShapeMesh {...props} Geometry={LatheGeometry} />
+}
+export function Capsule(props: ShapeComponentProps<typeof THREE.CapsuleGeometry>) @{
+	<ShapeMesh {...props} Geometry={CapsuleGeometry} />
+}
+
+function updateShapeUvs({ geometry }: THREE.Mesh): void {
+	// Calculate UVs (by https://discourse.threejs.org/u/prisoner849).
+	const pos = geometry.attributes.position as THREE.BufferAttribute;
+	const bounds = new THREE.Box3().setFromBufferAttribute(pos);
+	const size = new THREE.Vector3();
+	bounds.getSize(size);
+	const uv: number[] = [];
+
+	for (let index = 0; index < pos.count; index++) {
+		uv.push((pos.getX(index) - bounds.min.x) / size.x, (pos.getY(index) - bounds.min.y) / size.y);
+	}
+
+	geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uv, 2));
+}
+
+export function Shape(props: ShapeComponentProps<typeof THREE.ShapeGeometry>) @{
+	<ShapeMesh {...props} Geometry={ShapeGeometry} effect={updateShapeUvs} />
+}

package/src/core/simple-materials.three.tsrx

@@ -0,0 +1,124 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import type { ThreeElements, ThreeRef } from '@octanejs/three';
+import { useLayoutEffect, useMemo, useRef, useState } from '@octanejs/three/renderer';
+import * as THREE from 'three';
+import { slotDefault } from './compiler-slot.js';
+import { shaderMaterial } from './shaderMaterial.js';
+
+export const DiscardMaterialImpl = shaderMaterial(
+	{},
+	'void main() { }',
+	'void main() { gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); discard;  }',
+);
+
+export type MeshDiscardMaterialProps = Omit<ThreeElements['shaderMaterial'], 'ref'>;
+
+export function MeshDiscardMaterial({ ref, ...props }: MeshDiscardMaterialProps & {
+	ref?: ThreeRef<THREE.ShaderMaterial>;
+}) @{
+	const [material] = useState(() => new DiscardMaterialImpl());
+	<primitive object={material} ref={ref as any} attach="material" {...props as any} />
+}
+
+const opaqueFragment =
+	Number.parseInt(THREE.REVISION, 10) >= 154 ? 'opaque_fragment' : 'output_fragment';
+
+export class PointMaterialImpl extends THREE.PointsMaterial {
+	constructor(props?: THREE.PointsMaterialParameters | null) {
+		super(props ?? undefined);
+		this.onBeforeCompile = (shader, renderer) => {
+			const { isWebGL2 } = renderer.capabilities;
+			shader.fragmentShader = shader.fragmentShader.replace(
+				`#include <${opaqueFragment}>`,
+				`
+        ${
+					!isWebGL2
+						? `#extension GL_OES_standard_derivatives : enable\n#include <${opaqueFragment}>`
+						: `#include <${opaqueFragment}>`
+				}
+      vec2 cxy = 2.0 * gl_PointCoord - 1.0;
+      float r = dot(cxy, cxy);
+      float delta = fwidth(r);     
+      float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
+      gl_FragColor = vec4(gl_FragColor.rgb, mask * gl_FragColor.a );
+      #include <tonemapping_fragment>
+      #include <${
+					Number.parseInt(THREE.REVISION, 10) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'
+				}>
+      `,
+			);
+		};
+	}
+}
+
+export type PointMaterialProps = Omit<ThreeElements['pointsMaterial'], 'ref'>;
+
+export function PointMaterial({ ref, ...props }: PointMaterialProps & {
+	ref?: ThreeRef<PointMaterialImpl>;
+}) @{
+	const [material] = useState(() => new PointMaterialImpl(null));
+	<primitive object={material} ref={ref as any} attach="material" {...props as any} />
+}
+
+function createScreenQuadGeometry() {
+	const geometry = new THREE.BufferGeometry();
+	const vertices = new Float32Array([-1, -1, 3, -1, -1, 3]);
+	geometry.boundingSphere = new THREE.Sphere(new THREE.Vector3(), Infinity);
+	geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 2));
+	return geometry;
+}
+
+export type ScreenQuadProps = Omit<ThreeElements['mesh'], 'ref' | 'args'>;
+
+export function ScreenQuad({ children, ref, ...props }: ScreenQuadProps & {
+	ref?: ThreeRef<THREE.Mesh>;
+}) @{
+	const geometry = useMemo(createScreenQuadGeometry, []);
+	<mesh ref={ref as any} geometry={geometry} frustumCulled={false} {...props}>{children}</mesh>
+}
+
+export type MaskProps =
+	Omit<ThreeElements['mesh'], 'ref' | 'id'> & {
+		id: number;
+		colorWrite?: boolean;
+		depthWrite?: boolean;
+	};
+
+export function Mask({
+	id = 1,
+	colorWrite = false,
+	depthWrite = false,
+	ref,
+	...props
+}: MaskProps & { ref?: ThreeRef<THREE.Mesh> }) @{
+	const localRef = useRef<THREE.Mesh | null>(null);
+	const spread = useMemo(
+		() => ({
+			colorWrite,
+			depthWrite,
+			stencilWrite: true,
+			stencilRef: id,
+			stencilFunc: THREE.AlwaysStencilFunc,
+			stencilFail: THREE.ReplaceStencilOp,
+			stencilZFail: THREE.ReplaceStencilOp,
+			stencilZPass: THREE.ReplaceStencilOp,
+		}),
+		[id, colorWrite, depthWrite],
+	);
+	useLayoutEffect(() => {
+		if (localRef.current) Object.assign(localRef.current.material, spread);
+	});
+	<mesh ref={[localRef, ref ?? null]} renderOrder={-id} {...props} />
+}
+
+export function useMask(id: number, inverse = false) {
+	inverse = slotDefault(inverse, false);
+	return {
+		stencilWrite: true,
+		stencilRef: id,
+		stencilFunc: inverse ? THREE.NotEqualStencilFunc : THREE.EqualStencilFunc,
+		stencilFail: THREE.KeepStencilOp,
+		stencilZFail: THREE.KeepStencilOp,
+		stencilZPass: THREE.KeepStencilOp,
+	};
+}

package/src/core/softShadows.three.tsrx

@@ -0,0 +1,151 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { useThree } from '@octanejs/three';
+import { useEffect } from '@octanejs/three/renderer';
+import * as THREE from 'three';
+
+export type SoftShadowsProps = {
+	size?: number;
+	samples?: number;
+	focus?: number;
+};
+
+const pcss = ({ focus = 0, size = 25, samples = 10 }: SoftShadowsProps = {}) => `
+#define PENUMBRA_FILTER_SIZE float(${size})
+#define RGB_NOISE_FUNCTION(uv) (randRGB(uv))
+vec3 randRGB(vec2 uv) {
+  return vec3(
+    fract(sin(dot(uv, vec2(12.75613, 38.12123))) * 13234.76575),
+    fract(sin(dot(uv, vec2(19.45531, 58.46547))) * 43678.23431),
+    fract(sin(dot(uv, vec2(23.67817, 78.23121))) * 93567.23423)
+  );
+}
+
+vec3 lowPassRandRGB(vec2 uv) {
+  // 3x3 convolution (average)
+  // can be implemented as separable with an extra buffer for a total of 6 samples instead of 9
+  vec3 result = vec3(0);
+  result += RGB_NOISE_FUNCTION(uv + vec2(-1.0, -1.0));
+  result += RGB_NOISE_FUNCTION(uv + vec2(-1.0,  0.0));
+  result += RGB_NOISE_FUNCTION(uv + vec2(-1.0, +1.0));
+  result += RGB_NOISE_FUNCTION(uv + vec2( 0.0, -1.0));
+  result += RGB_NOISE_FUNCTION(uv + vec2( 0.0,  0.0));
+  result += RGB_NOISE_FUNCTION(uv + vec2( 0.0, +1.0));
+  result += RGB_NOISE_FUNCTION(uv + vec2(+1.0, -1.0));
+  result += RGB_NOISE_FUNCTION(uv + vec2(+1.0,  0.0));
+  result += RGB_NOISE_FUNCTION(uv + vec2(+1.0, +1.0));
+  result *= 0.111111111; // 1.0 / 9.0
+  return result;
+}
+vec3 highPassRandRGB(vec2 uv) {
+  // by subtracting the low-pass signal from the original signal, we're being left with the high-pass signal
+  // hp(x) = x - lp(x)
+  return RGB_NOISE_FUNCTION(uv) - lowPassRandRGB(uv) + 0.5;
+}
+
+
+vec2 vogelDiskSample(int sampleIndex, int sampleCount, float angle) {
+  const float goldenAngle = 2.399963f; // radians
+  float r = sqrt(float(sampleIndex) + 0.5f) / sqrt(float(sampleCount));
+  float theta = float(sampleIndex) * goldenAngle + angle;
+  float sine = sin(theta);
+  float cosine = cos(theta);
+  return vec2(cosine, sine) * r;
+}
+float penumbraSize( const in float zReceiver, const in float zBlocker ) { // Parallel plane estimation
+  return (zReceiver - zBlocker) / zBlocker;
+}
+float findBlocker(sampler2D shadowMap, vec2 uv, float compare, float angle) {
+  float texelSize = 1.0 / float(textureSize(shadowMap, 0).x);
+  float blockerDepthSum = float(${focus});
+  float blockers = 0.0;
+
+  int j = 0;
+  vec2 offset = vec2(0.);
+  float depth = 0.;
+
+  #pragma unroll_loop_start
+  for(int i = 0; i < ${samples}; i ++) {
+    offset = (vogelDiskSample(j, ${samples}, angle) * texelSize) * 2.0 * PENUMBRA_FILTER_SIZE;
+    depth = unpackRGBAToDepth( texture2D( shadowMap, uv + offset));
+    if (depth < compare) {
+      blockerDepthSum += depth;
+      blockers++;
+    }
+    j++;
+  }
+  #pragma unroll_loop_end
+
+  if (blockers > 0.0) {
+    return blockerDepthSum / blockers;
+  }
+  return -1.0;
+}
+
+        
+float vogelFilter(sampler2D shadowMap, vec2 uv, float zReceiver, float filterRadius, float angle) {
+  float texelSize = 1.0 / float(textureSize(shadowMap, 0).x);
+  float shadow = 0.0f;
+  int j = 0;
+  vec2 vogelSample = vec2(0.0);
+  vec2 offset = vec2(0.0);
+  #pragma unroll_loop_start
+  for (int i = 0; i < ${samples}; i++) {
+    vogelSample = vogelDiskSample(j, ${samples}, angle) * texelSize;
+    offset = vogelSample * (1.0 + filterRadius * float(${size}));
+    shadow += step( zReceiver, unpackRGBAToDepth( texture2D( shadowMap, uv + offset ) ) );
+    j++;
+  }
+  #pragma unroll_loop_end
+  return shadow * 1.0 / ${samples}.0;
+}
+
+float PCSS (sampler2D shadowMap, vec4 coords) {
+  vec2 uv = coords.xy;
+  float zReceiver = coords.z; // Assumed to be eye-space z in this code
+  float angle = highPassRandRGB(gl_FragCoord.xy).r * PI2;
+  float avgBlockerDepth = findBlocker(shadowMap, uv, zReceiver, angle);
+  if (avgBlockerDepth == -1.0) {
+    return 1.0;
+  }
+  float penumbraRatio = penumbraSize(zReceiver, avgBlockerDepth);
+  return vogelFilter(shadowMap, uv, zReceiver, 1.25 * penumbraRatio, angle);
+}`;
+
+type ResetRenderer = {
+	properties: { remove(material: THREE.Material): void };
+	info: { programs: unknown[] };
+	compile(scene: THREE.Object3D, camera: THREE.Camera): void;
+};
+
+function reset(gl: ResetRenderer, scene: THREE.Scene, camera: THREE.Camera): void {
+	scene.traverse((object) => {
+		const material = (object as THREE.Mesh).material;
+		if (material) {
+			gl.properties.remove(material as unknown as THREE.Material);
+			(material as THREE.Material).dispose?.();
+		}
+	});
+	gl.info.programs.length = 0;
+	gl.compile(scene, camera);
+}
+
+export function SoftShadows({ focus = 0, samples = 10, size = 25 }: SoftShadowsProps) @{
+	const gl = useThree((state) => state.gl) as unknown as ResetRenderer;
+	const scene = useThree((state) => state.scene) as unknown as THREE.Scene;
+	const camera = useThree((state) => state.camera) as unknown as THREE.Camera;
+	useEffect(() => {
+		const original = THREE.ShaderChunk.shadowmap_pars_fragment;
+		THREE.ShaderChunk.shadowmap_pars_fragment = THREE.ShaderChunk.shadowmap_pars_fragment
+			.replace('#ifdef USE_SHADOWMAP', `#ifdef USE_SHADOWMAP\n${pcss({ size, samples, focus })}`)
+			.replace(
+				'#if defined( SHADOWMAP_TYPE_PCF )',
+				'\nreturn PCSS(shadowMap, shadowCoord);\n#if defined( SHADOWMAP_TYPE_PCF )',
+			);
+		reset(gl, scene, camera);
+		return () => {
+			THREE.ShaderChunk.shadowmap_pars_fragment = original;
+			reset(gl, scene, camera);
+		};
+	}, [focus, size, samples]);
+	null;
+}