@react-three/drei 11.0.0-alpha.3 → 11.0.0-alpha.5

package/webgpu/index.mjs

@@ -2,11 +2,10 @@ import * as React from 'react';
 import { forwardRef, useImperativeHandle, useMemo, useEffect, useCallback, useRef, useLayoutEffect, useState, Fragment, createContext, useContext } from 'react';
 import { useThree, useFrame, extend, createPortal, applyProps, useInstanceHandle, context as context$a, useLoader, addEffect, addAfterEffect } from '@react-three/fiber';
 import * as THREE from 'three/webgpu';
-import { MeshBasicNodeMaterial, REVISION, RenderTarget, MeshNormalNodeMaterial, QuadMesh, MeshPhysicalNodeMaterial, Frustum, Matrix4, Line2NodeMaterial, Vector3, Vector4, Vector2, Color, InstancedInterleavedBuffer, InterleavedBufferAttribute, Object3D, WebGLCubeRenderTarget, HalfFloatType, CubeCamera as CubeCamera$1, MathUtils, TextureLoader, Texture as Texture$1, MeshLambertMaterial, Quaternion, DynamicDrawUsage, CatmullRomCurve3, CubicBezierCurve3, QuadraticBezierCurve3, Shape as Shape$1, CanvasTexture, DoubleSide, PerspectiveCamera as PerspectiveCamera$1, OrthographicCamera as OrthographicCamera$1, AudioListener, AudioLoader, AnimationMixer, BufferAttribute, Box3, Sphere as Sphere$1, InstancedBufferAttribute, DepthTexture, DepthFormat, UnsignedShortType, CubeTextureLoader, DefaultLoadingManager, Ray, Raycaster, Camera, CubeReflectionMapping, EquirectangularReflectionMapping, Scene, RepeatWrapping, WebGLRenderTarget, LinearFilter, BufferGeometry, Mesh, SpriteNodeMaterial, AdditiveBlending, CylinderGeometry } from 'three/webgpu';
+import { MeshBasicNodeMaterial, RenderTarget, MeshNormalNodeMaterial, QuadMesh, MeshPhysicalNodeMaterial, Frustum, Matrix4, Line2NodeMaterial, Vector3, Vector4, Vector2, Color, InstancedInterleavedBuffer, InterleavedBufferAttribute, Object3D, WebGLCubeRenderTarget, HalfFloatType, CubeCamera as CubeCamera$1, EventDispatcher, Euler, Quaternion, MathUtils, TextureLoader, Texture as Texture$1, MeshLambertMaterial, DynamicDrawUsage, CatmullRomCurve3, CubicBezierCurve3, QuadraticBezierCurve3, Shape as Shape$1, CanvasTexture, DoubleSide, PerspectiveCamera as PerspectiveCamera$1, OrthographicCamera as OrthographicCamera$1, REVISION, AudioListener, AudioLoader, AnimationMixer, BufferAttribute, Box3, Sphere as Sphere$1, InstancedBufferAttribute, DepthTexture, DepthFormat, UnsignedShortType, CubeTextureLoader, DefaultLoadingManager, Ray, Raycaster, Camera, CubeReflectionMapping, EquirectangularReflectionMapping, Scene, RepeatWrapping, SpriteNodeMaterial, AdditiveBlending, CylinderGeometry } from 'three/webgpu';
 import { ArcballControls as ArcballControls$1 } from 'three/examples/jsm/controls/ArcballControls.js';
-import { DeviceOrientationControls as DeviceOrientationControls$1 } from 'three-stdlib';
 import { useGesture } from '@use-gesture/react';
-import { FirstPersonControls as FirstPersonControls$1 } from 'three/examples/jsm/controls/FirstPersonControls';
+import { FirstPersonControls as FirstPersonControls$1 } from 'three/examples/jsm/controls/FirstPersonControls.js';
 import { FlyControls as FlyControls$1 } from 'three/examples/jsm/controls/FlyControls.js';
 import { create as create$1 } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
@@ -17,38 +16,38 @@ import { PointerLockControls as PointerLockControls$1 } from 'three/examples/jsm
 import * as ReactDOM from 'react-dom/client';
 import { TrackballControls as TrackballControls$1 } from 'three/examples/jsm/controls/TrackballControls.js';
 import { SimplexNoise } from 'three/examples/jsm/math/SimplexNoise.js';
-import { uniform, Fn, float, vec4, uniformTexture, uv, vec2 as vec2$2, texture, positionWorld, mul, add, negate, dot, refract, div, sub, length, cross, select, max, vec3, normalize, normalWorld, Discard, screenCoordinate, cameraPosition, pow, mx_fractal_noise_vec3, int, Loop, cameraProjectionMatrix, cameraViewMatrix, diffuseColor, mix, fract, sin, log, exp, reflector, clamp, reflect, smoothstep, round, distance, positionLocal, mx_noise_vec3, cos, mat3, normalLocal, attribute, modelViewMatrix, varying, min, abs, saturate, positionView, frontFacing, fwidth, modelWorldMatrix, positionGeometry } from 'three/tsl';
+import { uniform, Fn, float, vec4, uniformTexture, uv, vec2 as vec2$2, texture, positionWorld, mul, add, negate, dot, refract, div, sub, length, cross, select, max, vec3, normalize, normalWorld, Discard, screenCoordinate, cameraPosition, pow, mx_fractal_noise_vec3, int, Loop, cameraProjectionMatrix, cameraViewMatrix, diffuseColor, mix, fract, sin, log, exp, reflector, clamp, reflect, smoothstep, round, distance, positionLocal, mx_noise_vec3, cos, mat3, normalLocal, attribute, modelViewMatrix, varying, min, frontFacing, fwidth, abs, saturate, positionView, modelWorldMatrix, positionGeometry } from 'three/tsl';
 import { Line2 } from 'three/examples/jsm/lines/webgpu/Line2.js';
 import { LineSegments2 } from 'three/examples/jsm/lines/webgpu/LineSegments2.js';
 import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js';
 import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js';
-import { Flow } from 'three/examples/jsm/modifiers/CurveModifier';
+import { Flow } from 'three/examples/jsm/modifiers/CurveModifier.js';
 import { DecalGeometry } from 'three/examples/jsm/geometries/DecalGeometry.js';
-import { toCreasedNormals, mergeVertices } from 'three/examples/jsm/utils/BufferGeometryUtils';
-import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
-import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
+import { toCreasedNormals, mergeVertices } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
+import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
 import { suspend, preload, clear as clear$1 } from 'suspend-react';
-import { TransformControls as TransformControls$1 } from 'three/examples/jsm/controls/TransformControls';
-import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils';
+import { TransformControls as TransformControls$1 } from 'three/examples/jsm/controls/TransformControls.js';
+import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils.js';
 import { MeshSurfaceSampler } from 'three/examples/jsm/math/MeshSurfaceSampler.js';
-import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader';
+import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader.js';
 import { Events } from 'hls.js';
-import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
-import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader';
+import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';
 import { getGPUTier } from 'detect-gpu';
 import StatsImpl from 'stats.js';
 import Stats$1 from 'stats-gl';
 import tunnel from 'tunnel-rat';
-import { GroundedSkybox } from 'three/examples/jsm/objects/GroundedSkybox';
-import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
-import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader';
+import { GroundedSkybox } from 'three/examples/jsm/objects/GroundedSkybox.js';
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
+import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader.js';
 import { HDRJPGLoader, GainMapLoader } from '@monogrid/gainmap-js';
 import { Sky as Sky$1 } from 'three/examples/jsm/objects/Sky.js';
 import { SkyMesh } from 'three/examples/jsm/objects/SkyMesh.js';
-import { SelectionBox } from 'three/examples/jsm/interactive/SelectionBox';
+import { SelectionBox } from 'three/examples/jsm/interactive/SelectionBox.js';
 import { shallow } from 'zustand/shallow';
 import { hashBlur } from 'three/examples/jsm/tsl/display/hashBlur.js';
 
@@ -239,318 +238,28 @@ const ContactShadows = /* @__PURE__ */ React.forwardRef(
   }
 );
 
-function shaderMaterial(uniforms, vertexShader, fragmentShader, onInit) {
-  return class extends THREE.ShaderMaterial {
-    static key = THREE.MathUtils.generateUUID();
-    constructor(parameters) {
-      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);
-    }
-  };
-}
-
-const DiscardMaterial$1 = /* @__PURE__ */ shaderMaterial(
-  {},
-  "void main() { }",
-  "void main() { gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); discard;  }"
-);
-
-const getVersion = () => parseInt(REVISION.replace(/\D+/g, ""));
-const version = /* @__PURE__ */ getVersion();
-
-function isLight(object) {
-  return object.isLight;
-}
-function isGeometry$1(object) {
-  return !!object.geometry;
-}
 const accumulativeContext = /* @__PURE__ */ React.createContext(
   null
 );
-const SoftShadowMaterial = /* @__PURE__ */ shaderMaterial(
-  {
-    color: /* @__PURE__ */ new THREE.Color(),
-    blend: 2,
-    alphaTest: 0.75,
-    opacity: 0,
-    map: null
-  },
-  `varying vec2 vUv;
-   void main() {
-     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);
-     vUv = uv;
-   }`,
-  `varying vec2 vUv;
-   uniform sampler2D map;
-   uniform vec3 color;
-   uniform float opacity;
-   uniform float alphaTest;
-   uniform float blend;
-   void main() {
-     vec4 sampledDiffuseColor = texture2D(map, vUv);
-     gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);
-     #include <tonemapping_fragment>
-     #include <${version >= 154 ? "colorspace_fragment" : "encodings_fragment"}>
-   }`
-);
-const AccumulativeShadows = /* @__PURE__ */ React.forwardRef(
-  ({
-    children,
-    temporal,
-    frames = 40,
-    limit = Infinity,
-    blend = 20,
-    scale = 10,
-    opacity = 1,
-    alphaTest = 0.75,
-    color = "black",
-    colorBlend = 2,
-    resolution = 1024,
-    toneMapped = true,
-    ...props
-  }, forwardRef) => {
-    extend({ SoftShadowMaterial });
-    const gl = useThree((state) => state.gl);
-    const scene = useThree((state) => state.scene);
-    const camera = useThree((state) => state.camera);
-    const invalidate = useThree((state) => state.invalidate);
-    const gPlane = React.useRef(
-      null
-    );
-    const gLights = React.useRef(null);
-    const [plm] = React.useState(() => new ProgressiveLightMap(gl, scene, resolution));
-    React.useLayoutEffect(() => {
-      plm.configure(gPlane.current);
-    }, []);
-    const api = React.useMemo(
-      () => ({
-        lights: /* @__PURE__ */ new Map(),
-        temporal: !!temporal,
-        frames: Math.max(2, frames),
-        blend: Math.max(2, frames === Infinity ? blend : frames),
-        count: 0,
-        getMesh: () => gPlane.current,
-        reset: () => {
-          plm.clear();
-          const material = gPlane.current.material;
-          material.opacity = 0;
-          material.alphaTest = 0;
-          api.count = 0;
-        },
-        update: (frames2 = 1) => {
-          const material = gPlane.current.material;
-          if (!api.temporal) {
-            material.opacity = opacity;
-            material.alphaTest = alphaTest;
-          } else {
-            material.opacity = Math.min(opacity, material.opacity + opacity / api.blend);
-            material.alphaTest = Math.min(alphaTest, material.alphaTest + alphaTest / api.blend);
-          }
-          gLights.current.visible = true;
-          plm.prepare();
-          for (let i = 0; i < frames2; i++) {
-            api.lights.forEach((light) => light.update());
-            plm.update(camera, api.blend);
-          }
-          gLights.current.visible = false;
-          plm.finish();
-        }
-      }),
-      [plm, camera, scene, temporal, frames, blend, opacity, alphaTest]
-    );
-    React.useLayoutEffect(() => {
-      api.reset();
-      if (!api.temporal && api.frames !== Infinity) api.update(api.blend);
-    });
-    React.useImperativeHandle(forwardRef, () => api, [api]);
-    useFrame(() => {
-      if ((api.temporal || api.frames === Infinity) && api.count < api.frames && api.count < limit) {
-        invalidate();
-        api.update();
-        api.count++;
-      }
-    });
-    return /* @__PURE__ */ React.createElement("group", { ...props }, /* @__PURE__ */ React.createElement("group", { traverse: () => null, ref: gLights }, /* @__PURE__ */ React.createElement(accumulativeContext.Provider, { value: api }, children)), /* @__PURE__ */ React.createElement("mesh", { receiveShadow: true, ref: gPlane, scale, rotation: [-Math.PI / 2, 0, 0] }, /* @__PURE__ */ React.createElement("planeGeometry", null), /* @__PURE__ */ React.createElement(
-      "softShadowMaterial",
-      {
-        transparent: true,
-        depthWrite: false,
-        toneMapped,
-        color,
-        blend: colorBlend,
-        map: plm.progressiveLightMap2.texture
-      }
-    )));
-  }
-);
-const RandomizedLight = /* @__PURE__ */ React.forwardRef(
-  ({
-    castShadow = true,
-    bias = 1e-3,
-    mapSize = 512,
-    size = 5,
-    near = 0.5,
-    far = 500,
-    frames = 1,
-    position = [0, 0, 0],
-    radius = 1,
-    amount = 8,
-    intensity = version >= 155 ? Math.PI : 1,
-    ambient = 0.5,
-    ...props
-  }, forwardRef) => {
-    const gLights = React.useRef(null);
-    const length = new THREE.Vector3(...position).length();
-    const parent = React.useContext(accumulativeContext);
-    const update = React.useCallback(() => {
-      let light;
-      if (gLights.current) {
-        for (let l = 0; l < gLights.current.children.length; l++) {
-          light = gLights.current.children[l];
-          if (Math.random() > ambient) {
-            light.position.set(
-              position[0] + THREE.MathUtils.randFloatSpread(radius),
-              position[1] + THREE.MathUtils.randFloatSpread(radius),
-              position[2] + THREE.MathUtils.randFloatSpread(radius)
-            );
-          } else {
-            let lambda = Math.acos(2 * Math.random() - 1) - Math.PI / 2;
-            let phi = 2 * Math.PI * Math.random();
-            light.position.set(
-              Math.cos(lambda) * Math.cos(phi) * length,
-              Math.abs(Math.cos(lambda) * Math.sin(phi) * length),
-              Math.sin(lambda) * length
-            );
-          }
-        }
-      }
-    }, [radius, ambient, length, ...position]);
-    const api = React.useMemo(() => ({ update }), [update]);
-    React.useImperativeHandle(forwardRef, () => api, [api]);
-    React.useLayoutEffect(() => {
-      const group = gLights.current;
-      if (parent) parent.lights?.set(group.uuid, api);
-      return () => void parent?.lights?.delete(group.uuid);
-    }, [parent, api]);
-    return /* @__PURE__ */ React.createElement("group", { ref: gLights, ...props }, Array.from({ length: amount }, (_, index) => /* @__PURE__ */ React.createElement(
-      "directionalLight",
-      {
-        key: index,
-        castShadow,
-        "shadow-bias": bias,
-        "shadow-mapSize": [mapSize, mapSize],
-        intensity: intensity / amount
-      },
-      /* @__PURE__ */ React.createElement("orthographicCamera", { attach: "shadow-camera", args: [-size, size, size, -size, near, far] })
-    )));
-  }
-);
-class ProgressiveLightMap {
-  renderer;
-  res;
-  scene;
-  object;
-  buffer1Active;
-  progressiveLightMap1;
-  progressiveLightMap2;
-  discardMat;
-  targetMat;
-  previousShadowMap;
-  averagingWindow;
-  clearColor;
-  clearAlpha;
-  lights;
-  meshes;
-  constructor(renderer, scene, res = 1024) {
-    this.renderer = renderer;
-    this.res = res;
-    this.scene = scene;
-    this.buffer1Active = false;
-    this.lights = [];
-    this.meshes = [];
-    this.object = null;
-    this.clearColor = new THREE.Color();
-    this.clearAlpha = 0;
-    const textureParams = {
-      type: THREE.HalfFloatType,
-      magFilter: THREE.NearestFilter,
-      minFilter: THREE.NearestFilter
-    };
-    this.progressiveLightMap1 = new THREE.WebGLRenderTarget(this.res, this.res, textureParams);
-    this.progressiveLightMap2 = new THREE.WebGLRenderTarget(this.res, this.res, textureParams);
-    this.discardMat = new DiscardMaterial$1();
-    this.targetMat = new THREE.MeshLambertMaterial({ fog: false });
-    this.previousShadowMap = { value: this.progressiveLightMap1.texture };
-    this.averagingWindow = { value: 100 };
-    this.targetMat.onBeforeCompile = (shader) => {
-      shader.vertexShader = "varying vec2 vUv;\n" + shader.vertexShader.slice(0, -1) + "vUv = uv; gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }";
-      const bodyStart = shader.fragmentShader.indexOf("void main() {");
-      shader.fragmentShader = "varying vec2 vUv;\n" + shader.fragmentShader.slice(0, bodyStart) + "uniform sampler2D previousShadowMap;\n	uniform float averagingWindow;\n" + shader.fragmentShader.slice(bodyStart - 1, -1) + `
-vec3 texelOld = texture2D(previousShadowMap, vUv).rgb;
-        gl_FragColor.rgb = mix(texelOld, gl_FragColor.rgb, 1.0/ averagingWindow);
-      }`;
-      shader.uniforms.previousShadowMap = this.previousShadowMap;
-      shader.uniforms.averagingWindow = this.averagingWindow;
-    };
-  }
-  clear() {
-    this.renderer.getClearColor(this.clearColor);
-    this.clearAlpha = this.renderer.getClearAlpha();
-    this.renderer.setClearColor("black", 1);
-    this.renderer.setRenderTarget(this.progressiveLightMap1);
-    this.renderer.clear();
-    this.renderer.setRenderTarget(this.progressiveLightMap2);
-    this.renderer.clear();
-    this.renderer.setRenderTarget(null);
-    this.renderer.setClearColor(this.clearColor, this.clearAlpha);
-    this.lights = [];
-    this.meshes = [];
-    this.scene.traverse((object) => {
-      if (isGeometry$1(object)) {
-        this.meshes.push({ object, material: object.material });
-      } else if (isLight(object)) {
-        this.lights.push({ object, intensity: object.intensity });
-      }
-    });
-  }
-  prepare() {
-    this.lights.forEach((light) => light.object.intensity = 0);
-    this.meshes.forEach((mesh) => mesh.object.material = this.discardMat);
-  }
-  finish() {
-    this.lights.forEach((light) => light.object.intensity = light.intensity);
-    this.meshes.forEach((mesh) => mesh.object.material = mesh.material);
-  }
-  configure(object) {
-    this.object = object;
-  }
-  update(camera, blendWindow = 100) {
-    if (!this.object) return;
-    this.averagingWindow.value = blendWindow;
-    this.object.material = this.targetMat;
-    const activeMap = this.buffer1Active ? this.progressiveLightMap1 : this.progressiveLightMap2;
-    const inactiveMap = this.buffer1Active ? this.progressiveLightMap2 : this.progressiveLightMap1;
-    const oldBg = this.scene.background;
-    this.scene.background = null;
-    this.renderer.setRenderTarget(activeMap);
-    this.previousShadowMap.value = inactiveMap.texture;
-    this.buffer1Active = !this.buffer1Active;
-    this.renderer.render(this.scene, camera);
-    this.renderer.setRenderTarget(null);
-    this.scene.background = oldBg;
+let hasWarned$1 = false;
+function warnOnce$1(message) {
+  if (!hasWarned$1) {
+    console.warn(message);
+    hasWarned$1 = true;
   }
 }
+const AccumulativeShadows = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  warnOnce$1(
+    "drei: AccumulativeShadows is not yet supported in WebGPU. It uses GLSL shaders that need to be converted to TSL. Consider using ContactShadows instead, or import from @react-three/drei/legacy for WebGL."
+  );
+  return null;
+});
+const RandomizedLight = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  warnOnce$1(
+    "drei: RandomizedLight is not yet supported in WebGPU. It requires AccumulativeShadows which uses GLSL shaders. Import from @react-three/drei/legacy for WebGL."
+  );
+  return null;
+});
 
 function useFBO(width, height, settings) {
   const size = useThree((state) => state.size);
@@ -1477,10 +1186,11 @@ let MeshReflectorMaterial$1 = class MeshReflectorMaterial extends THREE.MeshStan
         premultipliedAlpha: false
       });
       const reflectionColor = mix(reflectionSample.rgb, reflectionBlurred.rgb, clamp(this.hasBlurUniform, 0, 1));
+      const reflectionClamped = clamp(reflectionColor, 0, 1);
       const contrastAdjusted = vec3(
-        reflectionColor.x.sub(0.5).mul(this.mixContrastUniform).add(0.5),
-        reflectionColor.y.sub(0.5).mul(this.mixContrastUniform).add(0.5),
-        reflectionColor.z.sub(0.5).mul(this.mixContrastUniform).add(0.5)
+        reflectionClamped.x.sub(0.5).mul(this.mixContrastUniform).add(0.5),
+        reflectionClamped.y.sub(0.5).mul(this.mixContrastUniform).add(0.5),
+        reflectionClamped.z.sub(0.5).mul(this.mixContrastUniform).add(0.5)
       );
       const mirrorClamped = clamp(this.mirrorUniform, 0, 1);
       return vec4(vec3(1).sub(vec3(mirrorClamped)).add(contrastAdjusted.mul(this.mixStrengthUniform)), 1);
@@ -3176,12 +2886,12 @@ const Segments = /* @__PURE__ */ React.forwardRef((props, forwardedRef) => {
     for (let i = 0; i < limit; i++) {
       const segment = segments[i]?.current;
       if (segment) {
-        positions[i * 6 + 0] = segment.start.x;
-        positions[i * 6 + 1] = segment.start.y;
-        positions[i * 6 + 2] = segment.start.z;
-        positions[i * 6 + 3] = segment.end.x;
-        positions[i * 6 + 4] = segment.end.y;
-        positions[i * 6 + 5] = segment.end.z;
+        positions[i * 6 + 0] = segment.start?.x || 0;
+        positions[i * 6 + 1] = segment.start?.y || 0;
+        positions[i * 6 + 2] = segment.start?.z || 0;
+        positions[i * 6 + 3] = segment.end?.x || 0;
+        positions[i * 6 + 4] = segment.end?.y || 0;
+        positions[i * 6 + 5] = segment.end?.z || 0;
         colors[i * 6 + 0] = segment.color.r;
         colors[i * 6 + 1] = segment.color.g;
         colors[i * 6 + 2] = segment.color.b;
@@ -3216,7 +2926,10 @@ class SegmentObject {
     this.end = new THREE.Vector3(0, 0, 0);
   }
 }
-const normPos = (pos) => pos instanceof THREE.Vector3 ? pos : new THREE.Vector3(...typeof pos === "number" ? [pos, pos, pos] : pos);
+const normPos = (pos) => {
+  if (!pos) return new THREE.Vector3(0, 0, 0);
+  return pos instanceof THREE.Vector3 ? pos : new THREE.Vector3(...typeof pos === "number" ? [pos, pos, pos] : pos);
+};
 const Segment = /* @__PURE__ */ React.forwardRef(({ color, start, end }, forwardedRef) => {
   const api = React.useContext(context$9);
   if (!api) throw "Segment must used inside Segments component.";
@@ -3540,6 +3253,81 @@ const ArcballControls = /* @__PURE__ */ forwardRef(
   }
 );
 
+let DeviceOrientationControls$1 = class DeviceOrientationControls extends EventDispatcher {
+  object;
+  changeEvent = { type: "change" };
+  EPS = 1e-6;
+  enabled = true;
+  deviceOrientation = { alpha: 0, beta: 0, gamma: 0 };
+  screenOrientation = 0;
+  alphaOffset = 0;
+  // radians
+  constructor(object) {
+    super();
+    this.object = object;
+    this.object.rotation.reorder("YXZ");
+    this.connect();
+  }
+  onDeviceOrientationChangeEvent = (event) => {
+    this.deviceOrientation = event;
+  };
+  onScreenOrientationChangeEvent = () => {
+    this.screenOrientation = window.orientation || 0;
+  };
+  // The angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y''
+  zee = new Vector3(0, 0, 1);
+  euler = new Euler();
+  q0 = new Quaternion();
+  q1 = new Quaternion(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5));
+  // - PI/2 around the x-axis
+  setObjectQuaternion = (quaternion, alpha, beta, gamma, orient) => {
+    this.euler.set(beta, alpha, -gamma, "YXZ");
+    quaternion.setFromEuler(this.euler);
+    quaternion.multiply(this.q1);
+    quaternion.multiply(this.q0.setFromAxisAngle(this.zee, -orient));
+  };
+  connect = () => {
+    this.onScreenOrientationChangeEvent();
+    if (window.DeviceOrientationEvent !== void 0 && // @ts-ignore
+    typeof window.DeviceOrientationEvent.requestPermission === "function") {
+      window.DeviceOrientationEvent.requestPermission().then((response) => {
+        if (response == "granted") {
+          window.addEventListener("orientationchange", this.onScreenOrientationChangeEvent);
+          window.addEventListener("deviceorientation", this.onDeviceOrientationChangeEvent);
+        }
+      }).catch((error) => {
+        console.error("THREE.DeviceOrientationControls: Unable to use DeviceOrientation API:", error);
+      });
+    } else {
+      window.addEventListener("orientationchange", this.onScreenOrientationChangeEvent);
+      window.addEventListener("deviceorientation", this.onDeviceOrientationChangeEvent);
+    }
+    this.enabled = true;
+  };
+  disconnect = () => {
+    window.removeEventListener("orientationchange", this.onScreenOrientationChangeEvent);
+    window.removeEventListener("deviceorientation", this.onDeviceOrientationChangeEvent);
+    this.enabled = false;
+  };
+  lastQuaternion = new Quaternion();
+  update = () => {
+    if (this.enabled === false) return;
+    const device = this.deviceOrientation;
+    if (device) {
+      const alpha = device.alpha ? MathUtils.degToRad(device.alpha) + this.alphaOffset : 0;
+      const beta = device.beta ? MathUtils.degToRad(device.beta) : 0;
+      const gamma = device.gamma ? MathUtils.degToRad(device.gamma) : 0;
+      const orient = this.screenOrientation ? MathUtils.degToRad(this.screenOrientation) : 0;
+      this.setObjectQuaternion(this.object.quaternion, alpha, beta, gamma, orient);
+      if (8 * (1 - this.lastQuaternion.dot(this.object.quaternion)) > this.EPS) {
+        this.lastQuaternion.copy(this.object.quaternion);
+        this.dispatchEvent(this.changeEvent);
+      }
+    }
+  };
+  dispose = () => this.disconnect();
+};
+
 const DeviceOrientationControls = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
     const { camera, onChange, makeDefault, ...rest } = props;
@@ -3609,8 +3397,9 @@ const DragControls = React.forwardRef(
           onDragStart && onDragStart(initialModelPosition);
           invalidate();
         },
-        onDrag: ({ xy: [dragX, dragY], intentional }) => {
+        onDrag: ({ xy: [dragX, dragY], intentional, event }) => {
           if (!intentional) return;
+          if (dragConfig && dragConfig.preventOverlap) event.preventDefault();
           const normalizedMouseX = (dragX - size.left) / size.width * 2 - 1;
           const normalizedMouseY = -((dragY - size.top) / size.height) * 2 + 1;
           mousePosition2D.set(normalizedMouseX, normalizedMouseY);
@@ -3779,12 +3568,21 @@ function KeyboardControls({ map, children, onChange, domElement }) {
       obj.pressed = false;
       if (up) fn(false);
     };
+    const blurHandler = () => {
+      const resetState = map.reduce((prev, cur) => ({ ...prev, [cur.name]: false }), {});
+      set(resetState);
+      Object.values(keyMap).forEach((obj) => {
+        obj.pressed = false;
+      });
+    };
     const source = domElement || window;
     source.addEventListener("keydown", downHandler, { passive: true });
     source.addEventListener("keyup", upHandler, { passive: true });
+    window.addEventListener("blur", blurHandler);
     return () => {
       source.removeEventListener("keydown", downHandler);
       source.removeEventListener("keyup", upHandler);
+      window.removeEventListener("blur", blurHandler);
     };
   }, [domElement, key]);
   return /* @__PURE__ */ React.createElement(context$8.Provider, { value: api, children });
@@ -4135,7 +3933,13 @@ function PresentationControls({
   return /* @__PURE__ */ React.createElement("group", { ref, ...bind?.() }, children);
 }
 
+function roundToPixelRatio(value) {
+  const ratio = window.devicePixelRatio || 1;
+  return Math.round(value * ratio) / ratio;
+}
+
 const context$7 = /* @__PURE__ */ React.createContext(null);
+const rootCache = /* @__PURE__ */ new WeakMap();
 function useScroll() {
   return React.useContext(context$7);
 }
@@ -4149,6 +3953,7 @@ function ScrollControls({
   damping = 0.25,
   maxSpeed = Infinity,
   prepend = false,
+  pixelPerfect = true,
   style = {},
   children
 }) {
@@ -4170,6 +3975,7 @@ function ScrollControls({
       delta: 0,
       scroll,
       pages,
+      pixelPerfect,
       // 0-1 for a range between from -> from + distance
       range(from, distance2, margin = 0) {
         const start = from - margin;
@@ -4188,7 +3994,7 @@ function ScrollControls({
       }
     };
     return state2;
-  }, [eps, damping, horizontal, pages]);
+  }, [eps, damping, horizontal, pages, pixelPerfect]);
   React.useEffect(() => {
     el.style.position = "absolute";
     el.style.width = "100%";
@@ -4301,10 +4107,23 @@ const ScrollHtml = React.forwardRef(
     React.useImperativeHandle(ref, () => group.current, []);
     const { width, height } = useThree((state2) => state2.size);
     const fiberState = React.useContext(context$a);
-    const root = React.useMemo(() => ReactDOM.createRoot(state.fixed), [state.fixed]);
+    const root = React.useMemo(() => {
+      let root2 = rootCache.get(state.fixed);
+      if (!root2) {
+        root2 = ReactDOM.createRoot(state.fixed);
+        rootCache.set(state.fixed, root2);
+      }
+      return root2;
+    }, [state.fixed]);
     useFrame(() => {
       if (state.delta > state.eps) {
-        group.current.style.transform = `translate3d(${state.horizontal ? -width * (state.pages - 1) * state.offset : 0}px,${state.horizontal ? 0 : height * (state.pages - 1) * -state.offset}px,0)`;
+        let x = state.horizontal ? -width * (state.pages - 1) * state.offset : 0;
+        let y = state.horizontal ? 0 : height * (state.pages - 1) * -state.offset;
+        if (state.pixelPerfect) {
+          x = roundToPixelRatio(x);
+          y = roundToPixelRatio(y);
+        }
+        group.current.style.transform = `translate3d(${x}px,${y}px,0)`;
       }
     });
     root.render(
@@ -5233,377 +5052,6 @@ const Text3D = /* @__PURE__ */ React.forwardRef(
   }
 );
 
-const WireframeMaterialShaders$1 = {
-  uniforms: {
-    strokeOpacity: 1,
-    fillOpacity: 0.25,
-    fillMix: 0,
-    thickness: 0.05,
-    colorBackfaces: false,
-    dashInvert: true,
-    dash: false,
-    dashRepeats: 4,
-    dashLength: 0.5,
-    squeeze: false,
-    squeezeMin: 0.2,
-    squeezeMax: 1,
-    stroke: /* @__PURE__ */ new THREE.Color("#ff0000"),
-    backfaceStroke: /* @__PURE__ */ new THREE.Color("#0000ff"),
-    fill: /* @__PURE__ */ new THREE.Color("#00ff00")
-  },
-  vertex: (
-    /* glsl */
-    `
-	  attribute vec3 barycentric;
-	
-		varying vec3 v_edges_Barycentric;
-		varying vec3 v_edges_Position;
-
-		void initWireframe() {
-			v_edges_Barycentric = barycentric;
-			v_edges_Position = position.xyz;
-		}
-	  `
-  ),
-  fragment: (
-    /* glsl */
-    `
-		#ifndef PI
-	  	#define PI 3.1415926535897932384626433832795
-		#endif
-  
-	  varying vec3 v_edges_Barycentric;
-	  varying vec3 v_edges_Position;
-  
-	  uniform float strokeOpacity;
-	  uniform float fillOpacity;
-	  uniform float fillMix;
-	  uniform float thickness;
-	  uniform bool colorBackfaces;
-  
-	  // Dash
-	  uniform bool dashInvert;
-	  uniform bool dash;
-	  uniform bool dashOnly;
-	  uniform float dashRepeats;
-	  uniform float dashLength;
-  
-	  // Squeeze
-	  uniform bool squeeze;
-	  uniform float squeezeMin;
-	  uniform float squeezeMax;
-  
-	  // Colors
-	  uniform vec3 stroke;
-	  uniform vec3 backfaceStroke;
-	  uniform vec3 fill;
-  
-	  // This is like
-	  float wireframe_aastep(float threshold, float dist) {
-		  float afwidth = fwidth(dist) * 0.5;
-		  return smoothstep(threshold - afwidth, threshold + afwidth, dist);
-	  }
-  
-	  float wireframe_map(float value, float min1, float max1, float min2, float max2) {
-		  return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
-	  }
-  
-	  float getWireframe() {
-			vec3 barycentric = v_edges_Barycentric;
-		
-			// Distance from center of each triangle to its edges.
-			float d = min(min(barycentric.x, barycentric.y), barycentric.z);
-
-			// for dashed rendering, we can use this to get the 0 .. 1 value of the line length
-			float positionAlong = max(barycentric.x, barycentric.y);
-			if (barycentric.y < barycentric.x && barycentric.y < barycentric.z) {
-				positionAlong = 1.0 - positionAlong;
-			}
-
-			// the thickness of the stroke
-			float computedThickness = wireframe_map(thickness, 0.0, 1.0, 0.0, 0.34);
-
-			// if we want to shrink the thickness toward the center of the line segment
-			if (squeeze) {
-				computedThickness *= mix(squeezeMin, squeezeMax, (1.0 - sin(positionAlong * PI)));
-			}
-
-			// Create dash pattern
-			if (dash) {
-				// here we offset the stroke position depending on whether it
-				// should overlap or not
-				float offset = 1.0 / dashRepeats * dashLength / 2.0;
-				if (!dashInvert) {
-					offset += 1.0 / dashRepeats / 2.0;
-				}
-
-				// if we should animate the dash or not
-				// if (dashAnimate) {
-				// 	offset += time * 0.22;
-				// }
-
-				// create the repeating dash pattern
-				float pattern = fract((positionAlong + offset) * dashRepeats);
-				computedThickness *= 1.0 - wireframe_aastep(dashLength, pattern);
-			}
-
-			// compute the anti-aliased stroke edge  
-			float edge = 1.0 - wireframe_aastep(computedThickness, d);
-
-			return edge;
-	  }
-	  `
-  )
-};
-const WireframeMaterial$1 = /* @__PURE__ */ shaderMaterial(
-  WireframeMaterialShaders$1.uniforms,
-  WireframeMaterialShaders$1.vertex + /* glsl */
-  `
-  	void main() {
-		initWireframe();
-		gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-	}
-  `,
-  WireframeMaterialShaders$1.fragment + /* glsl */
-  `
-  void main () {
-		// Compute color
-
-		float edge = getWireframe();
-		vec4 colorStroke = vec4(stroke, edge);
-
-		#ifdef FLIP_SIDED
-			colorStroke.rgb = backfaceStroke;
-		#endif
-    
-		vec4 colorFill = vec4(fill, fillOpacity);
-		vec4 outColor = mix(colorFill, colorStroke, edge * strokeOpacity);
-
-		gl_FragColor = outColor;
-	}
-  `
-);
-function setWireframeOverride$1(material, uniforms) {
-  material.onBeforeCompile = (shader) => {
-    shader.uniforms = {
-      ...shader.uniforms,
-      ...uniforms
-    };
-    shader.vertexShader = shader.vertexShader.replace(
-      "void main() {",
-      `
-		  ${WireframeMaterialShaders$1.vertex}
-		  void main() {
-			initWireframe();
-		`
-    );
-    shader.fragmentShader = shader.fragmentShader.replace(
-      "void main() {",
-      `
-		  ${WireframeMaterialShaders$1.fragment}
-		  void main() {
-		`
-    );
-    shader.fragmentShader = shader.fragmentShader.replace(
-      "#include <color_fragment>",
-      /* glsl */
-      `
-		  #include <color_fragment>
-			  float edge = getWireframe();
-		  vec4 colorStroke = vec4(stroke, edge);
-		  #ifdef FLIP_SIDED
-			colorStroke.rgb = backfaceStroke;
-		  #endif
-		  vec4 colorFill = vec4(mix(diffuseColor.rgb, fill, fillMix), mix(diffuseColor.a, fillOpacity, fillMix));
-		  vec4 outColor = mix(colorFill, colorStroke, edge * strokeOpacity);
-
-		  diffuseColor.rgb = outColor.rgb;
-		  diffuseColor.a *= outColor.a;
-		`
-    );
-  };
-  material.side = THREE.DoubleSide;
-  material.transparent = true;
-}
-function useWireframeUniforms$1(uniforms, props) {
-  React.useEffect(
-    () => void (uniforms.fillOpacity.value = props.fillOpacity ?? uniforms.fillOpacity.value),
-    [props.fillOpacity]
-  );
-  React.useEffect(() => void (uniforms.fillMix.value = props.fillMix ?? uniforms.fillMix.value), [props.fillMix]);
-  React.useEffect(
-    () => void (uniforms.strokeOpacity.value = props.strokeOpacity ?? uniforms.strokeOpacity.value),
-    [props.strokeOpacity]
-  );
-  React.useEffect(
-    () => void (uniforms.thickness.value = props.thickness ?? uniforms.thickness.value),
-    [props.thickness]
-  );
-  React.useEffect(() => void (uniforms.colorBackfaces.value = !!props.colorBackfaces), [props.colorBackfaces]);
-  React.useEffect(() => void (uniforms.dash.value = !!props.dash), [props.dash]);
-  React.useEffect(() => void (uniforms.dashInvert.value = !!props.dashInvert), [props.dashInvert]);
-  React.useEffect(
-    () => void (uniforms.dashRepeats.value = props.dashRepeats ?? uniforms.dashRepeats.value),
-    [props.dashRepeats]
-  );
-  React.useEffect(
-    () => void (uniforms.dashLength.value = props.dashLength ?? uniforms.dashLength.value),
-    [props.dashLength]
-  );
-  React.useEffect(() => void (uniforms.squeeze.value = !!props.squeeze), [props.squeeze]);
-  React.useEffect(
-    () => void (uniforms.squeezeMin.value = props.squeezeMin ?? uniforms.squeezeMin.value),
-    [props.squeezeMin]
-  );
-  React.useEffect(
-    () => void (uniforms.squeezeMax.value = props.squeezeMax ?? uniforms.squeezeMax.value),
-    [props.squeezeMax]
-  );
-  React.useEffect(
-    () => void (uniforms.stroke.value = props.stroke ? new THREE.Color(props.stroke) : uniforms.stroke.value),
-    [props.stroke]
-  );
-  React.useEffect(
-    () => void (uniforms.fill.value = props.fill ? new THREE.Color(props.fill) : uniforms.fill.value),
-    [props.fill]
-  );
-  React.useEffect(
-    () => void (uniforms.backfaceStroke.value = props.backfaceStroke ? new THREE.Color(props.backfaceStroke) : uniforms.backfaceStroke.value),
-    [props.backfaceStroke]
-  );
-}
-
-function isWithGeometry(object) {
-  return !!object?.geometry;
-}
-function isGeometry(object) {
-  return !!object?.isBufferGeometry;
-}
-function isRefObject$1(object) {
-  return !!object?.current;
-}
-function isRef$1(object) {
-  return object?.current !== void 0;
-}
-function isWireframeGeometry(geometry) {
-  return geometry.type === "WireframeGeometry";
-}
-function getUniforms() {
-  const u = {};
-  for (const key in WireframeMaterialShaders$1.uniforms) {
-    u[key] = { value: WireframeMaterialShaders$1.uniforms[key] };
-  }
-  return u;
-}
-function getBarycentricCoordinates(geometry, removeEdge) {
-  const position = geometry.getAttribute("position");
-  const count = position.count;
-  const barycentric = [];
-  for (let i = 0; i < count; i++) {
-    const even = i % 2 === 0;
-    const Q = removeEdge ? 1 : 0;
-    if (even) {
-      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(inputGeometry) {
-  const geo = isRefObject$1(inputGeometry) ? inputGeometry.current : inputGeometry;
-  if (!isGeometry(geo)) {
-    if (isWireframeGeometry(geo)) {
-      throw new Error("Wireframe: WireframeGeometry is not supported.");
-    }
-    const parent = geo.parent;
-    if (isWithGeometry(parent)) {
-      if (isWireframeGeometry(parent.geometry)) {
-        throw new Error("Wireframe: WireframeGeometry is not supported.");
-      }
-      return parent.geometry;
-    }
-  } else {
-    return geo;
-  }
-}
-function setBarycentricCoordinates$1(geometry, simplify) {
-  if (geometry.index) {
-    console.warn("Wireframe: Requires non-indexed geometry, converting to non-indexed geometry.");
-    const nonIndexedGeo = geometry.toNonIndexed();
-    geometry.copy(nonIndexedGeo);
-    geometry.setIndex(null);
-  }
-  const newBarycentric = getBarycentricCoordinates(geometry, simplify);
-  geometry.setAttribute("barycentric", newBarycentric);
-}
-function WireframeWithCustomGeo({
-  geometry: customGeometry,
-  simplify = false,
-  ...props
-}) {
-  extend({ MeshWireframeMaterial: WireframeMaterial$1 });
-  const [geometry, setGeometry] = React.useState(null);
-  React.useLayoutEffect(() => {
-    const geom = getInputGeometry(customGeometry);
-    if (!geom) {
-      throw new Error("Wireframe: geometry prop must be a BufferGeometry or a ref to a BufferGeometry.");
-    }
-    setBarycentricCoordinates$1(geom, simplify);
-    if (isRef$1(customGeometry)) {
-      setGeometry(geom);
-    }
-  }, [simplify, customGeometry]);
-  const drawnGeo = isRef$1(customGeometry) ? geometry : customGeometry;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, drawnGeo && /* @__PURE__ */ React.createElement("mesh", { geometry: drawnGeo }, /* @__PURE__ */ React.createElement(
-    "meshWireframeMaterial",
-    {
-      attach: "material",
-      transparent: true,
-      side: THREE.DoubleSide,
-      polygonOffset: true,
-      polygonOffsetFactor: -4,
-      ...props
-    }
-  )));
-}
-function WireframeWithoutCustomGeo({
-  simplify = false,
-  ...props
-}) {
-  const objectRef = React.useRef(null);
-  const uniforms = React.useMemo(() => getUniforms(), [WireframeMaterialShaders$1.uniforms]);
-  useWireframeUniforms$1(uniforms, props);
-  React.useLayoutEffect(() => {
-    const geom = getInputGeometry(objectRef);
-    if (!geom) {
-      throw new Error("Wireframe: Must be a child of a Mesh, Line or Points object or specify a geometry prop.");
-    }
-    const og = geom.clone();
-    setBarycentricCoordinates$1(geom, simplify);
-    return () => {
-      geom.copy(og);
-      og.dispose();
-    };
-  }, [simplify]);
-  React.useLayoutEffect(() => {
-    const parentMesh = objectRef.current.parent;
-    const og = parentMesh.material.clone();
-    setWireframeOverride$1(parentMesh.material, uniforms);
-    return () => {
-      parentMesh.material.dispose();
-      parentMesh.material = og;
-    };
-  }, []);
-  return /* @__PURE__ */ React.createElement("object3D", { ref: objectRef });
-}
-function Wireframe({ geometry: customGeometry, ...props }) {
-  if (customGeometry) {
-    return /* @__PURE__ */ React.createElement(WireframeWithCustomGeo, { geometry: customGeometry, ...props });
-  }
-  return /* @__PURE__ */ React.createElement(WireframeWithoutCustomGeo, { ...props });
-}
-
 const Context = /* @__PURE__ */ React.createContext({});
 const useGizmoContext = () => {
   return React.useContext(Context);
@@ -5899,6 +5347,11 @@ const GizmoViewport = ({
   return /* @__PURE__ */ React.createElement("group", { scale: 40, ...props }, /* @__PURE__ */ React.createElement(Axis, { color: colorX, rotation: [0, 0, 0], scale: axisScale }), /* @__PURE__ */ React.createElement(Axis, { color: colorY, rotation: [0, 0, Math.PI / 2], scale: axisScale }), /* @__PURE__ */ React.createElement(Axis, { color: colorZ, rotation: [0, -Math.PI / 2, 0], scale: axisScale }), !hideAxisHeads && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AxisHead, { arcStyle: colorX, position: [1, 0, 0], label: labels[0], ...axisHeadProps }), /* @__PURE__ */ React.createElement(AxisHead, { arcStyle: colorY, position: [0, 1, 0], label: labels[1], ...axisHeadProps }), /* @__PURE__ */ React.createElement(AxisHead, { arcStyle: colorZ, position: [0, 0, 1], label: labels[2], ...axisHeadProps }), !hideNegativeAxes && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AxisHead, { arcStyle: colorX, position: [-1, 0, 0], ...axisHeadProps }), /* @__PURE__ */ React.createElement(AxisHead, { arcStyle: colorY, position: [0, -1, 0], ...axisHeadProps }), /* @__PURE__ */ React.createElement(AxisHead, { arcStyle: colorZ, position: [0, 0, -1], ...axisHeadProps }))));
 };
 
+const roundEven = (n) => {
+  const rounded = Math.ceil(n);
+  return rounded % 2 === 0 ? rounded : rounded + 1;
+};
+
 const v1 = /* @__PURE__ */ new Vector3();
 const v2 = /* @__PURE__ */ new Vector3();
 const v3 = /* @__PURE__ */ new Vector3();
@@ -5970,7 +5423,7 @@ const getCameraCSSMatrix = /* @__PURE__ */ ((multipliers) => {
 const getObjectCSSMatrix = /* @__PURE__ */ ((scaleMultipliers) => {
   return (matrix, factor) => getCSSMatrix(matrix, scaleMultipliers(factor), "translate(-50%,-50%)");
 })((f) => [1 / f, 1 / f, 1 / f, 1, -1 / f, -1 / f, -1 / f, -1, 1 / f, 1 / f, 1 / f, 1, 1, 1, 1, 1]);
-function isRefObject(ref) {
+function isRefObject$1(ref) {
   return ref && typeof ref === "object" && "current" in ref;
 }
 const Html = /* @__PURE__ */ React.forwardRef(
@@ -5997,9 +5450,11 @@ const Html = /* @__PURE__ */ React.forwardRef(
     as = "div",
     wrapperClass,
     pointerEvents = "auto",
+    pixelPerfect = true,
     ...props
   }, ref) => {
     const { gl, camera, scene, size, raycaster, events, viewport } = useThree();
+    const forceEven = useThree((state) => state.internal.forceEven);
     const [el] = React.useState(() => document.createElement(as));
     const root = React.useRef(null);
     const group = React.useRef(null);
@@ -6011,7 +5466,7 @@ const Html = /* @__PURE__ */ React.forwardRef(
     const occlusionMeshRef = React.useRef(null);
     const isMeshSizeSet = React.useRef(false);
     const isRayCastOcclusion = React.useMemo(() => {
-      return occlude && occlude !== "blending" || Array.isArray(occlude) && occlude.length && isRefObject(occlude[0]);
+      return occlude && occlude !== "blending" || Array.isArray(occlude) && occlude.length && isRefObject$1(occlude[0]);
     }, [occlude]);
     React.useLayoutEffect(() => {
       const el2 = gl.domElement;
@@ -6024,38 +5479,54 @@ const Html = /* @__PURE__ */ React.forwardRef(
         el2.style.position = null;
         el2.style.pointerEvents = null;
       }
-    }, [occlude]);
+    }, [occlude, zIndexRange, gl.domElement]);
     React.useLayoutEffect(() => {
       if (group.current) {
-        const currentRoot = root.current = ReactDOM.createRoot(el);
+        if (!root.current) {
+          root.current = ReactDOM.createRoot(el);
+        }
         scene.updateMatrixWorld();
         if (transform) {
           el.style.cssText = `position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;`;
         } else {
-          const vec = calculatePosition(group.current, camera, size);
-          el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vec[0]}px,${vec[1]}px,0);transform-origin:0 0;`;
+          el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(0,-9999px,0);transform-origin:0 0;`;
         }
         if (target) {
           if (prepend) target.prepend(el);
           else target.appendChild(el);
         }
         return () => {
-          if (target) target.removeChild(el);
-          currentRoot.unmount();
+          if (root.current) {
+            root.current.unmount();
+            root.current = null;
+          }
+          if (target && target.contains(el)) {
+            target.removeChild(el);
+          }
         };
       }
-    }, [target, transform]);
+    }, [target, transform, el, prepend, scene]);
     React.useLayoutEffect(() => {
       if (wrapperClass) el.className = wrapperClass;
-    }, [wrapperClass]);
+    }, [wrapperClass, el]);
+    React.useLayoutEffect(() => {
+      return () => {
+        if (root.current) {
+          root.current.unmount();
+          root.current = null;
+        }
+      };
+    }, []);
     const styles = React.useMemo(() => {
+      const width = forceEven ? roundEven(size.width) : size.width;
+      const height = forceEven ? roundEven(size.height) : size.height;
       if (transform) {
         return {
           position: "absolute",
           top: 0,
           left: 0,
-          width: size.width,
-          height: size.height,
+          width,
+          height,
           transformStyle: "preserve-3d",
           pointerEvents: "none"
         };
@@ -6064,15 +5535,15 @@ const Html = /* @__PURE__ */ React.forwardRef(
           position: "absolute",
           transform: center ? "translate3d(-50%,-50%,0)" : "none",
           ...fullscreen && {
-            top: -size.height / 2,
-            left: -size.width / 2,
-            width: size.width,
-            height: size.height
+            top: forceEven ? roundEven(-size.height / 2) : -size.height / 2,
+            left: forceEven ? roundEven(-size.width / 2) : -size.width / 2,
+            width,
+            height
           },
           ...style
         };
       }
-    }, [style, center, fullscreen, size, transform]);
+    }, [style, center, fullscreen, size, transform, forceEven]);
     const transformInnerStyles = React.useMemo(
       () => ({ position: "absolute", pointerEvents }),
       [pointerEvents]
@@ -6086,7 +5557,7 @@ const Html = /* @__PURE__ */ React.forwardRef(
       } else {
         root.current?.render(/* @__PURE__ */ React.createElement("div", { ref, style: styles, className, children }));
       }
-    });
+    }, [transform, styles, transformInnerStyles, ref, className, style, children]);
     const visible = React.useRef(true);
     useFrame((gl2) => {
       if (group.current) {
@@ -6118,7 +5589,12 @@ const Html = /* @__PURE__ */ React.forwardRef(
           const zRange = occlude ? isRayCastOcclusion ? [zIndexRange[0], halfRange] : [halfRange - 1, 0] : zIndexRange;
           el.style.zIndex = `${objectZIndex(group.current, camera, zRange)}`;
           if (transform) {
-            const [widthHalf, heightHalf] = [size.width / 2, size.height / 2];
+            let widthHalf = forceEven ? roundEven(size.width / 2) : size.width / 2;
+            let heightHalf = forceEven ? roundEven(size.height / 2) : size.height / 2;
+            if (pixelPerfect) {
+              widthHalf = roundToPixelRatio(widthHalf);
+              heightHalf = roundToPixelRatio(heightHalf);
+            }
             const fov = camera.projectionMatrix.elements[5] * heightHalf;
             const { isOrthographicCamera, top, left, bottom, right } = camera;
             const cameraMatrix = getCameraCSSMatrix(camera.matrixWorldInverse);
@@ -6129,8 +5605,10 @@ const Html = /* @__PURE__ */ React.forwardRef(
               matrix.elements[3] = matrix.elements[7] = matrix.elements[11] = 0;
               matrix.elements[15] = 1;
             }
-            el.style.width = size.width + "px";
-            el.style.height = size.height + "px";
+            const elWidth = forceEven ? roundEven(size.width) : size.width;
+            const elHeight = forceEven ? roundEven(size.height) : size.height;
+            el.style.width = elWidth + "px";
+            el.style.height = elHeight + "px";
             el.style.perspective = isOrthographicCamera ? "" : `${fov}px`;
             if (transformOuterRef.current && transformInnerRef.current) {
               transformOuterRef.current.style.transform = `${cameraTransform}${cameraMatrix}translate(${widthHalf}px,${heightHalf}px)`;
@@ -6138,7 +5616,13 @@ const Html = /* @__PURE__ */ React.forwardRef(
             }
           } else {
             const scale = distanceFactor === void 0 ? 1 : objectScale(group.current, camera) * distanceFactor;
-            el.style.transform = `translate3d(${vec[0]}px,${vec[1]}px,0) scale(${scale})`;
+            let x = forceEven ? roundEven(vec[0]) : vec[0];
+            let y = forceEven ? roundEven(vec[1]) : vec[1];
+            if (pixelPerfect) {
+              x = roundToPixelRatio(x);
+              y = roundToPixelRatio(y);
+            }
+            el.style.transform = `translate3d(${x}px,${y}px,0) scale(${scale})`;
           }
           oldPosition.current = vec;
           oldZoom.current = camera.zoom;
@@ -6244,6 +5728,11 @@ const Html = /* @__PURE__ */ React.forwardRef(
 );
 
 const context$4 = /* @__PURE__ */ React.createContext(null);
+const resolveObject = (object, fallback) => {
+  if (!object) return fallback;
+  if ("current" in object) return object.current;
+  return object;
+};
 
 const vec1$1 = /* @__PURE__ */ new THREE.Vector3();
 const vec2$1 = /* @__PURE__ */ new THREE.Vector3();
@@ -6278,6 +5767,8 @@ const AxisArrow = ({ direction, axis }) => {
     onDragStart,
     onDrag,
     onDragEnd,
+    onHover,
+    dragState,
     userData,
     LineComponent: Line
   } = React.useContext(context$4);
@@ -6309,7 +5800,13 @@ const AxisArrow = ({ direction, axis }) => {
   const onPointerMove = React.useCallback(
     (e) => {
       e.stopPropagation();
-      if (!isHovered) setIsHovered(true);
+      if (!isHovered) {
+        const drag = dragState.current;
+        if (drag === null || drag.component === "Arrow" && drag.axis === axis) {
+          setIsHovered(true);
+          onHover({ component: "Arrow", axis, hovering: true });
+        }
+      }
       if (clickInfo.current) {
         const { clickPoint, dir } = clickInfo.current;
         const [min, max] = translationLimits?.[axis] || [void 0, void 0];
@@ -6328,7 +5825,7 @@ const AxisArrow = ({ direction, axis }) => {
         onDrag(offsetMatrix$1);
       }
     },
-    [annotations, onDrag, isHovered, translation, translationLimits, axis]
+    [annotations, onDrag, onHover, dragState, isHovered, translation, translationLimits, axis]
   );
   const onPointerUp = React.useCallback(
     (e) => {
@@ -6343,10 +5840,16 @@ const AxisArrow = ({ direction, axis }) => {
     },
     [annotations, camControls, onDragEnd]
   );
-  const onPointerOut = React.useCallback((e) => {
-    e.stopPropagation();
-    setIsHovered(false);
-  }, []);
+  const onPointerOut = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (isHovered) {
+        setIsHovered(false);
+        onHover({ component: "Arrow", axis, hovering: false });
+      }
+    },
+    [onHover, axis, isHovered]
+  );
   const { cylinderLength, coneWidth, coneLength, matrixL } = React.useMemo(() => {
     const coneWidth2 = fixed ? lineWidth / scale * 1.6 : scale / 20;
     const coneLength2 = fixed ? 0.2 : scale / 5;
@@ -6450,6 +5953,8 @@ const rotMatrix = /* @__PURE__ */ new THREE.Matrix4();
 const posNew = /* @__PURE__ */ new THREE.Vector3();
 const ray$1 = /* @__PURE__ */ new THREE.Ray();
 const intersection$1 = /* @__PURE__ */ new THREE.Vector3();
+const viewPlane = /* @__PURE__ */ new THREE.Plane();
+const viewIntersection = /* @__PURE__ */ new THREE.Vector3();
 const AxisRotator = ({
   dir1,
   dir2,
@@ -6470,6 +5975,8 @@ const AxisRotator = ({
     onDragStart,
     onDrag,
     onDragEnd,
+    onHover,
+    dragState,
     userData,
     LineComponent: Line
   } = React.useContext(context$4);
@@ -6503,14 +6010,29 @@ const AxisRotator = ({
   const onPointerMove = React.useCallback(
     (e) => {
       e.stopPropagation();
-      if (!isHovered) setIsHovered(true);
+      if (!isHovered) {
+        const drag = dragState.current;
+        if (drag === null || drag.component === "Rotator" && drag.axis === axis) {
+          setIsHovered(true);
+          onHover({ component: "Rotator", axis, hovering: true });
+        }
+      }
       if (clickInfo.current) {
         const { clickPoint, origin, e1, e2, normal, plane } = clickInfo.current;
         const [min, max] = rotationLimits?.[axis] || [void 0, void 0];
         ray$1.copy(e.ray);
-        ray$1.intersectPlane(plane, intersection$1);
-        ray$1.direction.negate();
-        ray$1.intersectPlane(plane, intersection$1);
+        const dotProduct = Math.abs(ray$1.direction.dot(normal));
+        if (dotProduct < 0.1) {
+          viewPlane.setFromNormalAndCoplanarPoint(ray$1.direction.clone().negate(), origin);
+          ray$1.intersectPlane(viewPlane, viewIntersection);
+          const toIntersection = viewIntersection.clone().sub(origin);
+          const projectedDist = toIntersection.dot(normal);
+          intersection$1.copy(viewIntersection).sub(normal.clone().multiplyScalar(projectedDist));
+        } else {
+          ray$1.intersectPlane(plane, intersection$1);
+          ray$1.direction.negate();
+          ray$1.intersectPlane(plane, intersection$1);
+        }
         let deltaAngle = calculateAngle(clickPoint, intersection$1, origin, e1, e2);
         let degrees = toDegrees(deltaAngle);
         if (e.shiftKey) {
@@ -6536,7 +6058,7 @@ const AxisRotator = ({
         onDrag(rotMatrix);
       }
     },
-    [annotations, onDrag, isHovered, rotationLimits, axis]
+    [annotations, onDrag, onHover, dragState, isHovered, rotationLimits, axis]
   );
   const onPointerUp = React.useCallback(
     (e) => {
@@ -6552,10 +6074,16 @@ const AxisRotator = ({
     },
     [annotations, camControls, onDragEnd]
   );
-  const onPointerOut = React.useCallback((e) => {
-    e.stopPropagation();
-    setIsHovered(false);
-  }, []);
+  const onPointerOut = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (isHovered) {
+        setIsHovered(false);
+        onHover({ component: "Rotator", axis, hovering: false });
+      }
+    },
+    [onHover, axis, isHovered]
+  );
   const matrixL = React.useMemo(() => {
     const dir1N = dir1.clone().normalize();
     const dir2N = dir2.clone().normalize();
@@ -6656,6 +6184,8 @@ const PlaneSlider = ({
     onDragStart,
     onDrag,
     onDragEnd,
+    onHover,
+    dragState,
     userData,
     LineComponent: Line
   } = React.useContext(context$4);
@@ -6691,7 +6221,13 @@ const PlaneSlider = ({
   const onPointerMove = React.useCallback(
     (e) => {
       e.stopPropagation();
-      if (!isHovered) setIsHovered(true);
+      if (!isHovered) {
+        const drag = dragState.current;
+        if (drag === null || drag.component === "Slider" && drag.axis === axis) {
+          setIsHovered(true);
+          onHover({ component: "Slider", axis, hovering: true });
+        }
+      }
       if (clickInfo.current) {
         const { clickPoint, e1, e2, plane } = clickInfo.current;
         const [minX, maxX] = translationLimits?.[(axis + 1) % 3] || [void 0, void 0];
@@ -6727,7 +6263,7 @@ const PlaneSlider = ({
         onDrag(offsetMatrix);
       }
     },
-    [annotations, onDrag, isHovered, translation, translationLimits, axis]
+    [annotations, onDrag, onHover, dragState, isHovered, translation, translationLimits, axis]
   );
   const onPointerUp = React.useCallback(
     (e) => {
@@ -6742,10 +6278,16 @@ const PlaneSlider = ({
     },
     [annotations, camControls, onDragEnd]
   );
-  const onPointerOut = React.useCallback((e) => {
-    e.stopPropagation();
-    setIsHovered(false);
-  }, []);
+  const onPointerOut = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (isHovered) {
+        setIsHovered(false);
+        onHover({ component: "Slider", axis, hovering: false });
+      }
+    },
+    [onHover, axis, isHovered]
+  );
   const matrixL = React.useMemo(() => {
     const dir1N = dir1.clone().normalize();
     const dir2N = dir2.clone().normalize();
@@ -6883,6 +6425,8 @@ const ScalingSphere = ({ direction, axis }) => {
     onDragStart,
     onDrag,
     onDragEnd,
+    onHover,
+    dragState,
     userData
   } = React.useContext(context$4);
   const size = useThree((state) => state.size);
@@ -6919,7 +6463,13 @@ const ScalingSphere = ({ direction, axis }) => {
   const onPointerMove = React.useCallback(
     (e) => {
       e.stopPropagation();
-      if (!isHovered) setIsHovered(true);
+      if (!isHovered) {
+        const drag = dragState.current;
+        if (drag === null || drag.component === "Sphere" && drag.axis === axis) {
+          setIsHovered(true);
+          onHover({ component: "Sphere", axis, hovering: true });
+        }
+      }
       if (clickInfo.current) {
         const { clickPoint, dir, mPLG, mPLGInv, offsetMultiplier } = clickInfo.current;
         const [min, max] = scaleLimits?.[axis] || [1e-5, void 0];
@@ -6945,7 +6495,7 @@ const ScalingSphere = ({ direction, axis }) => {
         onDrag(scaleMatrix);
       }
     },
-    [annotations, position, onDrag, isHovered, scaleLimits, axis]
+    [annotations, position, onDrag, onHover, dragState, isHovered, scaleLimits, axis]
   );
   const onPointerUp = React.useCallback(
     (e) => {
@@ -6962,10 +6512,16 @@ const ScalingSphere = ({ direction, axis }) => {
     },
     [annotations, camControls, onDragEnd, position]
   );
-  const onPointerOut = React.useCallback((e) => {
-    e.stopPropagation();
-    setIsHovered(false);
-  }, []);
+  const onPointerOut = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (isHovered) {
+        setIsHovered(false);
+        onHover({ component: "Sphere", axis, hovering: false });
+      }
+    },
+    [onHover, axis, isHovered]
+  );
   const { radius, matrixL } = React.useMemo(() => {
     const radius2 = fixed ? lineWidth / scale * 1.8 : scale / 22.5;
     const quaternion = new THREE.Quaternion().setFromUnitVectors(upV, direction.clone().normalize());
@@ -7035,9 +6591,11 @@ const PivotControls = /* @__PURE__ */ React.forwardRef(
   ({
     enabled = true,
     matrix,
+    object,
     onDragStart,
     onDrag,
     onDragEnd,
+    onHover,
     autoTransform = true,
     anchor,
     disableAxes = false,
@@ -7073,14 +6631,35 @@ const PivotControls = /* @__PURE__ */ React.forwardRef(
     const gizmoRef = React.useRef(null);
     const childrenRef = React.useRef(null);
     const translation = React.useRef([0, 0, 0]);
+    const dragState = React.useRef(null);
     const cameraScale = React.useRef(new THREE.Vector3(1, 1, 1));
     const gizmoScale = React.useRef(new THREE.Vector3(1, 1, 1));
+    React.useEffect(() => {
+      if (object) {
+        const target = resolveObject(object);
+        if (target) {
+          const pivot = ref.current;
+          const didAutoUpdate = target.matrixAutoUpdate;
+          target.updateWorldMatrix(true, true);
+          target.matrixAutoUpdate = false;
+          pivot.matrix.copy(target.matrix);
+          return () => {
+            if (didAutoUpdate) {
+              target.matrixAutoUpdate = true;
+              target.matrix.decompose(target.position, target.quaternion, target.scale);
+            }
+          };
+        }
+      }
+    }, [object]);
     React.useLayoutEffect(() => {
       if (!anchor) return;
-      childrenRef.current.updateWorldMatrix(true, true);
-      mPInv.copy(childrenRef.current.matrixWorld).invert();
+      const anchorTarget = resolveObject(object, childrenRef.current);
+      if (!anchorTarget) return;
+      anchorTarget.updateWorldMatrix(true, true);
+      mPInv.copy(anchorTarget.matrixWorld).invert();
       bb.makeEmpty();
-      childrenRef.current.traverse((obj) => {
+      anchorTarget.traverse((obj) => {
         if (!obj.geometry) return;
         if (!obj.geometry.boundingBox) obj.geometry.computeBoundingBox();
         mL.copy(obj.matrixWorld).premultiply(mPInv);
@@ -7095,9 +6674,17 @@ const PivotControls = /* @__PURE__ */ React.forwardRef(
       gizmoRef.current.position.copy(vPosition);
       invalidate();
     });
+    const mergedUserData = React.useMemo(
+      () => ({
+        ...userData,
+        ...depthTest === false && { interactivePriority: 1 }
+      }),
+      [userData, depthTest]
+    );
     const config = React.useMemo(
       () => ({
         onDragStart: (props2) => {
+          dragState.current = props2;
           mL0.copy(ref.current.matrix);
           mW0.copy(ref.current.matrixWorld);
           onDragStart && onDragStart(props2);
@@ -7113,13 +6700,20 @@ const PivotControls = /* @__PURE__ */ React.forwardRef(
           if (autoTransform) {
             ref.current.matrix.copy(mL);
           }
+          const target = resolveObject(object);
+          if (target) target.matrix.copy(mL);
           onDrag && onDrag(mL, mdL, mW, mdW);
           invalidate();
         },
         onDragEnd: () => {
+          dragState.current = null;
           if (onDragEnd) onDragEnd();
           invalidate();
         },
+        onHover: (props2) => {
+          if (onHover) onHover(props2);
+        },
+        dragState,
         translation,
         translationLimits,
         rotationLimits,
@@ -7131,7 +6725,7 @@ const PivotControls = /* @__PURE__ */ React.forwardRef(
         fixed,
         depthTest,
         renderOrder,
-        userData,
+        userData: mergedUserData,
         annotations,
         annotationsClass,
         LineComponent: LineComp
@@ -7140,6 +6734,7 @@ const PivotControls = /* @__PURE__ */ React.forwardRef(
         onDragStart,
         onDrag,
         onDragEnd,
+        onHover,
         translation,
         translationLimits,
         rotationLimits,
@@ -7151,11 +6746,12 @@ const PivotControls = /* @__PURE__ */ React.forwardRef(
         ...axisColors,
         hoveredColor,
         opacity,
-        userData,
+        mergedUserData,
         autoTransform,
         annotations,
         annotationsClass,
-        LineComp
+        LineComp,
+        object
       ]
     );
     const vec = new THREE.Vector3();
@@ -7290,6 +6886,9 @@ const TransformControls = /* @__PURE__ */ React.forwardRef(
   }
 );
 
+const getVersion = () => parseInt(REVISION.replace(/\D+/g, ""));
+const version = /* @__PURE__ */ getVersion();
+
 const opaque_fragment = version >= 154 ? "opaque_fragment" : "output_fragment";
 class PointMaterialImpl extends THREE.PointsMaterial {
   constructor(props) {
@@ -7517,7 +7116,7 @@ function createInstances() {
   ];
 }
 const InstancedAttribute = React.forwardRef(
-  ({ name, defaultValue, normalized, usage = THREE.DynamicDrawUsage }, fref) => {
+  ({ name, defaultValue, normalized, usage = THREE.DynamicDrawUsage, type = "float" }, fref) => {
     const ref = React.useRef(null);
     React.useImperativeHandle(fref, () => ref.current, []);
     React.useLayoutEffect(() => {
@@ -7525,7 +7124,26 @@ const InstancedAttribute = React.forwardRef(
       parent.geometry.attributes[name] = ref.current;
       const value = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
       const array = Array.from({ length: parent.userData.limit }, () => value).flat();
-      ref.current.array = new Float32Array(array);
+      switch (type) {
+        case "float":
+          ref.current.array = new Float32Array(array);
+          break;
+        case "int":
+          ref.current.array = new Int32Array(array);
+          break;
+        case "uint":
+          ref.current.array = new Uint32Array(array);
+          break;
+        case "short":
+          ref.current.array = new Int16Array(array);
+          break;
+        case "ushort":
+          ref.current.array = new Uint16Array(array);
+          break;
+        case "byte":
+          ref.current.array = new Uint8Array(array);
+          break;
+      }
       ref.current.itemSize = value.length;
       ref.current.count = array.length / ref.current.itemSize;
       return () => {
@@ -9050,12 +8668,17 @@ const Gltf = /* @__PURE__ */ React.forwardRef(
   }
 );
 
-const cdn = "https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master";
-function useKTX2(input, basisPath = `${cdn}/basis/`) {
+let transcoderPath = "https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/basis/";
+function useKTX2(input, basisPath = true, extendLoader) {
   const renderer = useThree((state) => state.renderer);
   const textures = useLoader(KTX2Loader, IsObject(input) ? Object.values(input) : input, (loader) => {
+    if (extendLoader) {
+      extendLoader(loader);
+    }
+    if (basisPath) {
+      loader.setTranscoderPath(typeof basisPath === "string" ? basisPath : transcoderPath);
+    }
     loader.detectSupport(renderer);
-    loader.setTranscoderPath(basisPath);
   });
   useEffect(() => {
     const array = Array.isArray(textures) ? textures : [textures];
@@ -9070,16 +8693,20 @@ function useKTX2(input, basisPath = `${cdn}/basis/`) {
     return textures;
   }
 }
-useKTX2.preload = (url, basisPath = `${cdn}/basis/`) => useLoader.preload(KTX2Loader, url, (loader) => {
-  loader.setTranscoderPath(basisPath);
+useKTX2.preload = (url, basisPath = true, extendLoader) => useLoader.preload(KTX2Loader, url, (loader) => {
+  if (extendLoader) {
+    extendLoader(loader);
+  }
+  if (basisPath) {
+    loader.setTranscoderPath(typeof basisPath === "string" ? basisPath : transcoderPath);
+  }
 });
 useKTX2.clear = (input) => useLoader.clear(KTX2Loader, input);
-const Ktx2 = ({
-  children,
-  input,
-  basisPath
-}) => {
-  const texture = useKTX2(input, basisPath);
+useKTX2.setTranscoderPath = (path) => {
+  transcoderPath = path;
+};
+const Ktx2 = ({ children, input, basisPath, extendLoader }) => {
+  const texture = useKTX2(input, basisPath, extendLoader);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children?.(texture));
 };
 
@@ -9366,18 +8993,21 @@ function Fisheye({
   const normal = new THREE.Vector3();
   const sph = new THREE.Sphere(new THREE.Vector3(), radius);
   const normalMatrix = new THREE.Matrix3();
-  const compute = React.useCallback((event, state, prev) => {
-    state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
-    state.raycaster.setFromCamera(state.pointer, orthoC);
-    if (!state.raycaster.ray.intersectSphere(sph, normal)) return;
-    else normal.normalize();
-    normalMatrix.getNormalMatrix(cubeApi.current.camera.matrixWorld);
-    cubeApi.current.camera.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);
-    return void 0;
-  }, []);
+  const compute = React.useCallback(
+    (event, state, prev) => {
+      state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+      state.raycaster.setFromCamera(state.pointer, orthoC);
+      if (!state.raycaster.ray.intersectSphere(sph, normal)) return;
+      else normal.normalize();
+      normalMatrix.getNormalMatrix(cubeApi.current.camera.matrixWorld);
+      cubeApi.current.camera.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);
+      return void 0;
+    },
+    [width, height]
+  );
   useFrame(
     ({ gl }) => {
       if (renderPriority) gl.render(sphere.current, orthoC);
@@ -9483,14 +9113,22 @@ const isWebGPURenderer = (def) => !!def.isWebGPURenderer;
 const col = /* @__PURE__ */ new THREE.Color();
 const TUNNEL_KEY = "__drei_view_tunnel__";
 const tracked = globalThis[TUNNEL_KEY] || (globalThis[TUNNEL_KEY] = tunnel());
-function computeContainerPosition(canvasSize, trackRect) {
+function computeContainerPosition(canvasSize, trackRect, forceEven) {
   const { right, top: trackTop, left: trackLeft, bottom: trackBottom, width, height } = trackRect;
   const isOffscreen = trackRect.bottom < 0 || trackTop > canvasSize.height || right < 0 || trackRect.left > canvasSize.width;
   const canvasBottom = canvasSize.top + canvasSize.height;
-  const bottom = canvasBottom - trackBottom;
-  const left = trackLeft - canvasSize.left;
-  const top = trackTop - canvasSize.top;
-  return { position: { width, height, left, top, bottom, right }, isOffscreen };
+  const rawBottom = canvasBottom - trackBottom;
+  const rawLeft = trackLeft - canvasSize.left;
+  const rawTop = trackTop - canvasSize.top;
+  const position = forceEven ? {
+    width: roundEven(width),
+    height: roundEven(height),
+    left: roundEven(rawLeft),
+    top: roundEven(rawTop),
+    bottom: roundEven(rawBottom),
+    right: roundEven(right)
+  } : { width, height, left: rawLeft, top: rawTop, bottom: rawBottom, right };
+  return { position, isOffscreen };
 }
 function prepareSkissor(renderer, camera, {
   left,
@@ -9530,6 +9168,7 @@ function clear(renderer) {
 }
 function Container({ visible = true, canvasSize, scene, index, children, frames, rect, track }) {
   const { scene: portalScene, camera: portalCamera, renderer, get, setEvents } = useThree();
+  const forceEven = useThree((state) => state.internal.forceEven);
   const [isOffscreen, setOffscreen] = React.useState(false);
   const mountedRef = React.useRef(true);
   React.useEffect(() => {
@@ -9547,7 +9186,7 @@ function Container({ visible = true, canvasSize, scene, index, children, frames,
         frameCount++;
       }
       if (rect.current) {
-        const { position, isOffscreen: _isOffscreen } = computeContainerPosition(canvasSize, rect.current);
+        const { position, isOffscreen: _isOffscreen } = computeContainerPosition(canvasSize, rect.current, forceEven);
         if (isOffscreen !== _isOffscreen) setOffscreen(_isOffscreen);
         if (visible && !_isOffscreen && rect.current) {
           const targetScene = children ? portalScene : scene;
@@ -9569,14 +9208,14 @@ function Container({ visible = true, canvasSize, scene, index, children, frames,
   React.useLayoutEffect(() => {
     const curRect = rect.current;
     if (curRect && (!visible || !isOffscreen)) {
-      const { position, isOffscreen: _isOffscreen } = computeContainerPosition(canvasSize, curRect);
+      const { position, isOffscreen: _isOffscreen } = computeContainerPosition(canvasSize, curRect, forceEven);
       if (!_isOffscreen) {
         const autoClear = prepareSkissor(renderer, portalCamera, position);
         clear(renderer);
         finishSkissor(renderer, autoClear);
       }
     }
-  }, [visible, isOffscreen, renderer, portalCamera, canvasSize]);
+  }, [visible, isOffscreen, renderer, portalCamera, canvasSize, forceEven]);
   React.useEffect(() => {
     if (!track) return;
     const curRect = rect.current;
@@ -9584,7 +9223,7 @@ function Container({ visible = true, canvasSize, scene, index, children, frames,
     setEvents({ connected: track.current });
     return () => {
       if (curRect) {
-        const { position, isOffscreen: _isOffscreen } = computeContainerPosition(canvasSize, curRect);
+        const { position, isOffscreen: _isOffscreen } = computeContainerPosition(canvasSize, curRect, forceEven);
         if (!_isOffscreen) {
           const autoClear = prepareSkissor(renderer, portalCamera, position);
           clear(renderer);
@@ -9593,13 +9232,14 @@ function Container({ visible = true, canvasSize, scene, index, children, frames,
       }
       setEvents({ connected: old });
     };
-  }, [track, renderer, portalCamera, canvasSize, get, setEvents]);
+  }, [track, renderer, portalCamera, canvasSize, get, setEvents, forceEven]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children, /* @__PURE__ */ React.createElement("group", { onPointerOver: () => null }));
 }
 const CanvasView = /* @__PURE__ */ React.forwardRef(
   ({ track, visible = true, index = 1, id, style, className, frames = Infinity, children, ...props }, fref) => {
     const rect = React.useRef(null);
     const { size, scene } = useThree();
+    const forceEven = useThree((state) => state.internal.forceEven);
     const [virtualScene] = React.useState(() => new THREE.Scene());
     const [ready, toggle] = React.useReducer(() => true, false);
     const compute = React.useCallback(
@@ -9636,12 +9276,12 @@ const CanvasView = /* @__PURE__ */ React.forwardRef(
       {
         events: { compute, priority: index },
         size: {
-          width: rect.current?.width,
-          height: rect.current?.height,
+          width: forceEven && rect.current?.width ? roundEven(rect.current.width) : rect.current?.width,
+          height: forceEven && rect.current?.height ? roundEven(rect.current.height) : rect.current?.height,
           // @ts-ignore
-          top: rect.current?.top,
+          top: forceEven && rect.current?.top ? roundEven(rect.current.top) : rect.current?.top,
           // @ts-ignore
-          left: rect.current?.left
+          left: forceEven && rect.current?.left ? roundEven(rect.current.left) : rect.current?.left
         }
       }
     ));
@@ -10068,8 +9708,8 @@ function getLoader(extension) {
   return loader;
 }
 
-const isRef = (obj) => obj.current && obj.current.isScene;
-const resolveScene = (scene) => isRef(scene) ? scene.current : scene;
+const isRef$1 = (obj) => obj.current && obj.current.isScene;
+const resolveScene = (scene) => isRef$1(scene) ? scene.current : scene;
 function setEnvProps(background, scene, defaultScene, texture, sceneProps = {}) {
   sceneProps = {
     backgroundBlurriness: 0,
@@ -10816,1118 +10456,905 @@ function useSelect() {
   return React.useContext(context);
 }
 
-function BakeShadows() {
-  const gl = useThree((state) => state.gl);
-  useEffect(() => {
-    gl.shadowMap.autoUpdate = false;
-    gl.shadowMap.needsUpdate = true;
-    return () => {
-      gl.shadowMap.autoUpdate = gl.shadowMap.needsUpdate = true;
-    };
-  }, [gl.shadowMap]);
-  return null;
-}
-
-let ConvolutionMaterial$1 = class ConvolutionMaterial extends THREE.ShaderMaterial {
-  kernel;
-  constructor(texelSize = new THREE.Vector2()) {
-    super({
-      uniforms: {
-        inputBuffer: new THREE.Uniform(null),
-        depthBuffer: new THREE.Uniform(null),
-        resolution: new THREE.Uniform(new THREE.Vector2()),
-        texelSize: new THREE.Uniform(new THREE.Vector2()),
-        halfTexelSize: new THREE.Uniform(new THREE.Vector2()),
-        kernel: new THREE.Uniform(0),
-        scale: new THREE.Uniform(1),
-        cameraNear: new THREE.Uniform(0),
-        cameraFar: new THREE.Uniform(1),
-        minDepthThreshold: new THREE.Uniform(0),
-        maxDepthThreshold: new THREE.Uniform(1),
-        depthScale: new THREE.Uniform(0),
-        depthToBlurRatioBias: new THREE.Uniform(0.25)
-      },
-      fragmentShader: `#include <common>
-        #include <dithering_pars_fragment>      
-        uniform sampler2D inputBuffer;
-        uniform sampler2D depthBuffer;
-        uniform float cameraNear;
-        uniform float cameraFar;
-        uniform float minDepthThreshold;
-        uniform float maxDepthThreshold;
-        uniform float depthScale;
-        uniform float depthToBlurRatioBias;
-        varying vec2 vUv;
-        varying vec2 vUv0;
-        varying vec2 vUv1;
-        varying vec2 vUv2;
-        varying vec2 vUv3;
-
-        void main() {
-          float depthFactor = 0.0;
-          
-          #ifdef USE_DEPTH
-            vec4 depth = texture2D(depthBuffer, vUv);
-            depthFactor = smoothstep(minDepthThreshold, maxDepthThreshold, 1.0-(depth.r * depth.a));
-            depthFactor *= depthScale;
-            depthFactor = max(0.0, min(1.0, depthFactor + 0.25));
-          #endif
-          
-          vec4 sum = texture2D(inputBuffer, mix(vUv0, vUv, depthFactor));
-          sum += texture2D(inputBuffer, mix(vUv1, vUv, depthFactor));
-          sum += texture2D(inputBuffer, mix(vUv2, vUv, depthFactor));
-          sum += texture2D(inputBuffer, mix(vUv3, vUv, depthFactor));
-          gl_FragColor = sum * 0.25 ;
-
-          #include <dithering_fragment>
-          #include <tonemapping_fragment>
-          #include <${version >= 154 ? "colorspace_fragment" : "encodings_fragment"}>
-        }`,
-      vertexShader: `uniform vec2 texelSize;
-        uniform vec2 halfTexelSize;
-        uniform float kernel;
-        uniform float scale;
-        varying vec2 vUv;
-        varying vec2 vUv0;
-        varying vec2 vUv1;
-        varying vec2 vUv2;
-        varying vec2 vUv3;
-
-        void main() {
-          vec2 uv = position.xy * 0.5 + 0.5;
-          vUv = uv;
-
-          vec2 dUv = (texelSize * vec2(kernel) + halfTexelSize) * scale;
-          vUv0 = vec2(uv.x - dUv.x, uv.y + dUv.y);
-          vUv1 = vec2(uv.x + dUv.x, uv.y + dUv.y);
-          vUv2 = vec2(uv.x + dUv.x, uv.y - dUv.y);
-          vUv3 = vec2(uv.x - dUv.x, uv.y - dUv.y);
-
-          gl_Position = vec4(position.xy, 1.0, 1.0);
-        }`,
-      blending: THREE.NoBlending,
-      depthWrite: false,
-      depthTest: false
-    });
-    this.toneMapped = false;
-    this.setTexelSize(texelSize.x, texelSize.y);
-    this.kernel = new Float32Array([0, 1, 2, 2, 3]);
+const aastep = /* @__PURE__ */ Fn((inputs) => {
+  const [threshold, dist] = inputs;
+  const afwidth = fwidth(dist).mul(0.5);
+  return smoothstep(threshold.sub(afwidth), threshold.add(afwidth), dist);
+});
+const remap = /* @__PURE__ */ Fn((inputs) => {
+  const [value, min1, max1, min2, max2] = inputs;
+  return min2.add(value.sub(min1).mul(max2.sub(min2)).div(max1.sub(min1)));
+});
+class WireframeMaterialImpl extends MeshBasicNodeMaterial {
+  //* Private Uniform Nodes --
+  _strokeOpacity;
+  _fillOpacity;
+  _fillMix;
+  _thickness;
+  _colorBackfaces;
+  // Using number as bool (0/1)
+  _dashInvert;
+  _dash;
+  _dashRepeats;
+  _dashLength;
+  _squeeze;
+  _squeezeMin;
+  _squeezeMax;
+  _stroke;
+  _backfaceStroke;
+  _fill;
+  /** Type flag for identification */
+  isWireframeMaterial = true;
+  constructor() {
+    super();
+    this._strokeOpacity = uniform(1);
+    this._fillOpacity = uniform(0.25);
+    this._fillMix = uniform(0);
+    this._thickness = uniform(0.05);
+    this._colorBackfaces = uniform(0);
+    this._dashInvert = uniform(1);
+    this._dash = uniform(0);
+    this._dashRepeats = uniform(4);
+    this._dashLength = uniform(0.5);
+    this._squeeze = uniform(0);
+    this._squeezeMin = uniform(0.2);
+    this._squeezeMax = uniform(1);
+    this._stroke = uniform(new THREE.Color("#ff0000"));
+    this._backfaceStroke = uniform(new THREE.Color("#0000ff"));
+    this._fill = uniform(new THREE.Color("#00ff00"));
+    this.transparent = true;
+    this.side = THREE.DoubleSide;
+    this._buildWireframeShader();
   }
-  setTexelSize(x, y) {
-    this.uniforms.texelSize.value.set(x, y);
-    this.uniforms.halfTexelSize.value.set(x, y).multiplyScalar(0.5);
+  _buildWireframeShader() {
+    const strokeOpacityUniform = this._strokeOpacity;
+    const fillOpacityUniform = this._fillOpacity;
+    const thicknessUniform = this._thickness;
+    const colorBackfacesUniform = this._colorBackfaces;
+    const dashInvertUniform = this._dashInvert;
+    const dashUniform = this._dash;
+    const dashRepeatsUniform = this._dashRepeats;
+    const dashLengthUniform = this._dashLength;
+    const squeezeUniform = this._squeeze;
+    const squeezeMinUniform = this._squeezeMin;
+    const squeezeMaxUniform = this._squeezeMax;
+    const strokeUniform = this._stroke;
+    const backfaceStrokeUniform = this._backfaceStroke;
+    const fillUniform = this._fill;
+    const barycentricAttr = attribute("barycentric", "vec3");
+    const vBarycentric = varying(barycentricAttr, "v_barycentric");
+    this.outputNode = Fn(() => {
+      const barycentric = vBarycentric;
+      const d = min(min(barycentric.x, barycentric.y), barycentric.z);
+      const positionAlong = float(0).toVar();
+      const maxXY = max(barycentric.x, barycentric.y);
+      const isYSmallest = barycentric.y.lessThan(barycentric.x).and(barycentric.y.lessThan(barycentric.z));
+      positionAlong.assign(select(isYSmallest, float(1).sub(maxXY), maxXY));
+      const computedThickness = remap(thicknessUniform, float(0), float(1), float(0), float(0.34)).toVar();
+      const squeezeEnabled = squeezeUniform.greaterThan(0.5);
+      const squeezeFactor = mix(squeezeMinUniform, squeezeMaxUniform, float(1).sub(sin(positionAlong.mul(Math.PI))));
+      computedThickness.assign(select(squeezeEnabled, computedThickness.mul(squeezeFactor), computedThickness));
+      const dashEnabled = dashUniform.greaterThan(0.5);
+      const dashInverted = dashInvertUniform.greaterThan(0.5);
+      const baseOffset = float(1).div(dashRepeatsUniform).mul(dashLengthUniform).mul(0.5);
+      const additionalOffset = float(1).div(dashRepeatsUniform).mul(0.5);
+      const dashOffset = select(dashInverted, baseOffset, baseOffset.add(additionalOffset));
+      const pattern = fract(positionAlong.add(dashOffset).mul(dashRepeatsUniform));
+      const dashMask = float(1).sub(aastep(dashLengthUniform, pattern));
+      computedThickness.assign(select(dashEnabled, computedThickness.mul(dashMask), computedThickness));
+      const edge = float(1).sub(aastep(computedThickness, d));
+      const useBackfaceColor = colorBackfacesUniform.greaterThan(0.5);
+      const isFrontFace = frontFacing;
+      const currentStroke = select(useBackfaceColor.and(isFrontFace.not()), backfaceStrokeUniform, strokeUniform);
+      const colorStroke = vec4(currentStroke, edge);
+      const colorFill = vec4(fillUniform, fillOpacityUniform);
+      const outColor = mix(colorFill, colorStroke, edge.mul(strokeOpacityUniform));
+      return outColor;
+    })();
   }
-  setResolution(resolution) {
-    this.uniforms.resolution.value.copy(resolution);
+  //* Uniform Accessors ==============================
+  /** Stroke (edge) opacity, default: 1 */
+  get strokeOpacity() {
+    return this._strokeOpacity.value;
   }
-};
-
-class BlurPass {
-  renderTargetA;
-  renderTargetB;
-  convolutionMaterial;
-  scene;
-  camera;
-  screen;
-  renderToScreen = false;
-  constructor({
-    gl,
-    resolution,
-    width = 500,
-    height = 500,
-    minDepthThreshold = 0,
-    maxDepthThreshold = 1,
-    depthScale = 0,
-    depthToBlurRatioBias = 0.25
-  }) {
-    this.renderTargetA = new WebGLRenderTarget(resolution, resolution, {
-      minFilter: LinearFilter,
-      magFilter: LinearFilter,
-      stencilBuffer: false,
-      depthBuffer: false,
-      type: HalfFloatType
-    });
-    this.renderTargetB = this.renderTargetA.clone();
-    this.convolutionMaterial = new ConvolutionMaterial$1();
-    this.convolutionMaterial.setTexelSize(1 / width, 1 / height);
-    this.convolutionMaterial.setResolution(new Vector2(width, height));
-    this.scene = new Scene();
-    this.camera = new Camera();
-    this.convolutionMaterial.uniforms.minDepthThreshold.value = minDepthThreshold;
-    this.convolutionMaterial.uniforms.maxDepthThreshold.value = maxDepthThreshold;
-    this.convolutionMaterial.uniforms.depthScale.value = depthScale;
-    this.convolutionMaterial.uniforms.depthToBlurRatioBias.value = depthToBlurRatioBias;
-    this.convolutionMaterial.defines.USE_DEPTH = depthScale > 0;
-    const vertices = new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]);
-    const uvs = new Float32Array([0, 0, 2, 0, 0, 2]);
-    const geometry = new BufferGeometry();
-    geometry.setAttribute("position", new BufferAttribute(vertices, 3));
-    geometry.setAttribute("uv", new BufferAttribute(uvs, 2));
-    this.screen = new Mesh(geometry, this.convolutionMaterial);
-    this.screen.frustumCulled = false;
-    this.scene.add(this.screen);
-  }
-  render(renderer, inputBuffer, outputBuffer) {
-    const scene = this.scene;
-    const camera = this.camera;
-    const renderTargetA = this.renderTargetA;
-    const renderTargetB = this.renderTargetB;
-    let material = this.convolutionMaterial;
-    let uniforms = material.uniforms;
-    uniforms.depthBuffer.value = inputBuffer.depthTexture;
-    const kernel = material.kernel;
-    let lastRT = inputBuffer;
-    let destRT;
-    let i, l;
-    for (i = 0, l = kernel.length - 1; i < l; ++i) {
-      destRT = (i & 1) === 0 ? renderTargetA : renderTargetB;
-      uniforms.kernel.value = kernel[i];
-      uniforms.inputBuffer.value = lastRT.texture;
-      renderer.setRenderTarget(destRT);
-      renderer.render(scene, camera);
-      lastRT = destRT;
-    }
-    uniforms.kernel.value = kernel[i];
-    uniforms.inputBuffer.value = lastRT.texture;
-    renderer.setRenderTarget(this.renderToScreen ? null : outputBuffer);
-    renderer.render(scene, camera);
+  set strokeOpacity(v) {
+    this._strokeOpacity.value = v;
   }
-}
-
-class ConvolutionMaterial extends MeshBasicNodeMaterial {
-  //* Private Uniform Nodes --
-  _inputBuffer;
-  _depthBuffer;
-  _resolution;
-  _texelSize;
-  _halfTexelSize;
-  _kernel;
-  _scale;
-  _cameraNear;
-  _cameraFar;
-  _minDepthThreshold;
-  _maxDepthThreshold;
-  _depthScale;
-  _depthToBlurRatioBias;
-  _useDepth;
-  /** Kernel weights for multi-pass blur */
-  kernel;
-  constructor(texelSize = new THREE.Vector2()) {
-    super();
-    this._inputBuffer = uniformTexture(new THREE.Texture());
-    this._depthBuffer = uniformTexture(new THREE.Texture());
-    this._resolution = uniform(new THREE.Vector2());
-    this._texelSize = uniform(new THREE.Vector2());
-    this._halfTexelSize = uniform(new THREE.Vector2());
-    this._kernel = uniform(0);
-    this._scale = uniform(1);
-    this._cameraNear = uniform(0);
-    this._cameraFar = uniform(1);
-    this._minDepthThreshold = uniform(0);
-    this._maxDepthThreshold = uniform(1);
-    this._depthScale = uniform(0);
-    this._depthToBlurRatioBias = uniform(0.25);
-    this._useDepth = uniform(0);
-    this.blending = THREE.NoBlending;
-    this.depthWrite = false;
-    this.depthTest = false;
-    this.toneMapped = false;
-    this.kernel = new Float32Array([0, 1, 2, 2, 3]);
-    this.setTexelSize(texelSize.x, texelSize.y);
-    this._buildShader();
+  /** Fill opacity (background), default: 0.25 */
+  get fillOpacity() {
+    return this._fillOpacity.value;
   }
-  _buildShader() {
-    const inputBufferTex = this._inputBuffer;
-    const depthBufferTex = this._depthBuffer;
-    const texelSizeUniform = this._texelSize;
-    const halfTexelSizeUniform = this._halfTexelSize;
-    const kernelUniform = this._kernel;
-    const scaleUniform = this._scale;
-    const minDepthThresholdUniform = this._minDepthThreshold;
-    const maxDepthThresholdUniform = this._maxDepthThreshold;
-    const depthScaleUniform = this._depthScale;
-    const useDepthUniform = this._useDepth;
-    const baseUv = varying(uv(), "vUv");
-    const dUv = varying(
-      Fn(() => {
-        return texelSizeUniform.mul(kernelUniform).add(halfTexelSizeUniform).mul(scaleUniform);
-      })(),
-      "vDuv"
-    );
-    const vUv0 = varying(Fn(() => vec2$2(baseUv.x.sub(dUv.x), baseUv.y.add(dUv.y)))(), "vUv0");
-    const vUv1 = varying(Fn(() => vec2$2(baseUv.x.add(dUv.x), baseUv.y.add(dUv.y)))(), "vUv1");
-    const vUv2 = varying(Fn(() => vec2$2(baseUv.x.add(dUv.x), baseUv.y.sub(dUv.y)))(), "vUv2");
-    const vUv3 = varying(Fn(() => vec2$2(baseUv.x.sub(dUv.x), baseUv.y.sub(dUv.y)))(), "vUv3");
-    this.colorNode = Fn(() => {
-      const depthFactor = float(0).toVar();
-      const isUsingDepth = useDepthUniform.greaterThan(0.5);
-      const depthSample = texture(depthBufferTex, baseUv);
-      const rawDepth = float(1).sub(depthSample.r.mul(depthSample.a));
-      const smoothedDepth = smoothstep(minDepthThresholdUniform, maxDepthThresholdUniform, rawDepth);
-      const scaledDepth = smoothedDepth.mul(depthScaleUniform);
-      const clampedDepth = max(float(0), min(float(1), scaledDepth.add(0.25)));
-      depthFactor.assign(select(isUsingDepth, clampedDepth, float(0)));
-      const sample0 = texture(inputBufferTex, mix(vUv0, baseUv, depthFactor));
-      const sample1 = texture(inputBufferTex, mix(vUv1, baseUv, depthFactor));
-      const sample2 = texture(inputBufferTex, mix(vUv2, baseUv, depthFactor));
-      const sample3 = texture(inputBufferTex, mix(vUv3, baseUv, depthFactor));
-      const sum = sample0.add(sample1).add(sample2).add(sample3);
-      return sum.mul(0.25);
-    })();
-  }
-  //* Utility Methods ==============================
-  /** Set texel size for blur calculations */
-  setTexelSize(x, y) {
-    this._texelSize.value.set(x, y);
-    this._halfTexelSize.value.set(x * 0.5, y * 0.5);
-  }
-  /** Set render resolution */
-  setResolution(resolution) {
-    this._resolution.value.copy(resolution);
+  set fillOpacity(v) {
+    this._fillOpacity.value = v;
   }
-  //* Uniform Accessors ==============================
-  /** Input color buffer to blur */
-  get inputBuffer() {
-    return this._inputBuffer.value;
+  /** Mix factor between material color and fill color, default: 0 */
+  get fillMix() {
+    return this._fillMix.value;
   }
-  set inputBuffer(v) {
-    this._inputBuffer.value = v ?? new THREE.Texture();
+  set fillMix(v) {
+    this._fillMix.value = v;
   }
-  /** Depth buffer for depth-aware blur */
-  get depthBuffer() {
-    return this._depthBuffer.value;
+  /** Edge thickness 0-1, default: 0.05 */
+  get thickness() {
+    return this._thickness.value;
   }
-  set depthBuffer(v) {
-    this._depthBuffer.value = v ?? new THREE.Texture();
+  set thickness(v) {
+    this._thickness.value = v;
   }
-  /** Render resolution */
-  get resolution() {
-    return this._resolution.value;
+  /** Use different color for backfaces */
+  get colorBackfaces() {
+    return this._colorBackfaces.value > 0.5;
   }
-  set resolution(v) {
-    this._resolution.value = v;
+  set colorBackfaces(v) {
+    this._colorBackfaces.value = v ? 1 : 0;
   }
-  /** Texel size (1/resolution) */
-  get texelSize() {
-    return this._texelSize.value;
+  /** Invert dash pattern */
+  get dashInvert() {
+    return this._dashInvert.value > 0.5;
   }
-  set texelSize(v) {
-    this._texelSize.value = v;
+  set dashInvert(v) {
+    this._dashInvert.value = v ? 1 : 0;
   }
-  /** Half texel size for offset calculations */
-  get halfTexelSize() {
-    return this._halfTexelSize.value;
+  /** Enable dashed lines */
+  get dash() {
+    return this._dash.value > 0.5;
   }
-  set halfTexelSize(v) {
-    this._halfTexelSize.value = v;
+  set dash(v) {
+    this._dash.value = v ? 1 : 0;
   }
-  /** Kernel offset multiplier (changes per blur pass) */
-  get kernelValue() {
-    return this._kernel.value;
+  /** Number of dash repeats, default: 4 */
+  get dashRepeats() {
+    return this._dashRepeats.value;
   }
-  set kernelValue(v) {
-    this._kernel.value = v;
+  set dashRepeats(v) {
+    this._dashRepeats.value = v;
   }
-  /** Scale factor for blur spread */
-  get scale() {
-    return this._scale.value;
+  /** Dash length 0-1, default: 0.5 */
+  get dashLength() {
+    return this._dashLength.value;
   }
-  set scale(v) {
-    this._scale.value = v;
+  set dashLength(v) {
+    this._dashLength.value = v;
   }
-  /** Camera near plane for depth calculations */
-  get cameraNear() {
-    return this._cameraNear.value;
+  /** Squeeze thickness toward line center */
+  get squeeze() {
+    return this._squeeze.value > 0.5;
   }
-  set cameraNear(v) {
-    this._cameraNear.value = v;
+  set squeeze(v) {
+    this._squeeze.value = v ? 1 : 0;
   }
-  /** Camera far plane for depth calculations */
-  get cameraFar() {
-    return this._cameraFar.value;
+  /** Minimum squeeze factor, default: 0.2 */
+  get squeezeMin() {
+    return this._squeezeMin.value;
   }
-  set cameraFar(v) {
-    this._cameraFar.value = v;
+  set squeezeMin(v) {
+    this._squeezeMin.value = v;
   }
-  /** Minimum depth threshold for blur (objects closer than this get less blur) */
-  get minDepthThreshold() {
-    return this._minDepthThreshold.value;
+  /** Maximum squeeze factor, default: 1 */
+  get squeezeMax() {
+    return this._squeezeMax.value;
   }
-  set minDepthThreshold(v) {
-    this._minDepthThreshold.value = v;
+  set squeezeMax(v) {
+    this._squeezeMax.value = v;
   }
-  /** Maximum depth threshold for blur (objects farther than this get full blur) */
-  get maxDepthThreshold() {
-    return this._maxDepthThreshold.value;
+  /** Stroke (edge) color */
+  get stroke() {
+    return this._stroke.value;
   }
-  set maxDepthThreshold(v) {
-    this._maxDepthThreshold.value = v;
+  set stroke(v) {
+    if (v instanceof THREE.Color) this._stroke.value = v;
+    else this._stroke.value = new THREE.Color(v);
   }
-  /** Scale factor for depth-based blur adjustment */
-  get depthScale() {
-    return this._depthScale.value;
+  /** Backface stroke color */
+  get backfaceStroke() {
+    return this._backfaceStroke.value;
   }
-  set depthScale(v) {
-    this._depthScale.value = v;
+  set backfaceStroke(v) {
+    if (v instanceof THREE.Color) this._backfaceStroke.value = v;
+    else this._backfaceStroke.value = new THREE.Color(v);
   }
-  /** Bias added to depth-to-blur ratio */
-  get depthToBlurRatioBias() {
-    return this._depthToBlurRatioBias.value;
+  /** Fill (background) color */
+  get fill() {
+    return this._fill.value;
   }
-  set depthToBlurRatioBias(v) {
-    this._depthToBlurRatioBias.value = v;
+  set fill(v) {
+    if (v instanceof THREE.Color) this._fill.value = v;
+    else this._fill.value = new THREE.Color(v);
   }
-  /** Enable/disable depth-based blur (0 = off, 1 = on) */
-  get useDepth() {
-    return this._useDepth.value > 0.5;
+}
+function setBarycentricCoordinates(geometry) {
+  const position = geometry.getAttribute("position");
+  const count = position.count;
+  if (geometry.index) {
+    geometry = geometry.toNonIndexed();
   }
-  set useDepth(v) {
-    this._useDepth.value = v ? 1 : 0;
+  const barycentricArray = new Float32Array(count * 3);
+  for (let i = 0; i < count; i += 3) {
+    barycentricArray[i * 3 + 0] = 1;
+    barycentricArray[i * 3 + 1] = 0;
+    barycentricArray[i * 3 + 2] = 0;
+    barycentricArray[(i + 1) * 3 + 0] = 0;
+    barycentricArray[(i + 1) * 3 + 1] = 1;
+    barycentricArray[(i + 1) * 3 + 2] = 0;
+    barycentricArray[(i + 2) * 3 + 0] = 0;
+    barycentricArray[(i + 2) * 3 + 1] = 0;
+    barycentricArray[(i + 2) * 3 + 2] = 1;
   }
+  geometry.setAttribute("barycentric", new THREE.BufferAttribute(barycentricArray, 3));
+  return geometry;
 }
-
-var GradientType = /* @__PURE__ */ ((GradientType2) => {
-  GradientType2["Linear"] = "linear";
-  GradientType2["Radial"] = "radial";
-  return GradientType2;
-})(GradientType || {});
-function GradientTexture({
-  stops,
-  colors,
-  size = 1024,
-  width = 16,
-  type = "linear" /* Linear */,
-  innerCircleRadius = 0,
-  outerCircleRadius = "auto",
-  ...props
-}) {
-  const gl = useThree((state) => state.gl);
-  const canvas = React.useMemo(() => {
-    const canvas2 = document.createElement("canvas");
-    const context = canvas2.getContext("2d");
-    canvas2.width = width;
-    canvas2.height = size;
-    let gradient;
-    if (type === "linear" /* Linear */) {
-      gradient = context.createLinearGradient(0, 0, 0, size);
-    } else {
-      const canvasCenterX = canvas2.width / 2;
-      const canvasCenterY = canvas2.height / 2;
-      const radius = outerCircleRadius !== "auto" ? Math.abs(Number(outerCircleRadius)) : Math.sqrt(canvasCenterX ** 2 + canvasCenterY ** 2);
-      gradient = context.createRadialGradient(
-        canvasCenterX,
-        canvasCenterY,
-        Math.abs(innerCircleRadius),
-        canvasCenterX,
-        canvasCenterY,
-        radius
-      );
-    }
-    const tempColor = new THREE.Color();
-    let i = stops.length;
-    while (i--) {
-      gradient.addColorStop(stops[i], tempColor.set(colors[i]).getStyle());
-    }
-    context.save();
-    context.fillStyle = gradient;
-    context.fillRect(0, 0, width, size);
-    context.restore();
-    return canvas2;
-  }, [stops]);
-  return /* @__PURE__ */ React.createElement("canvasTexture", { colorSpace: gl.outputColorSpace, args: [canvas], attach: "map", ...props });
-}
-
-const LUMA = /* @__PURE__ */ vec3(0.299, 0.587, 0.114);
-const toGrayscale = /* @__PURE__ */ Fn(
-  ({ inputColor, intensity }) => {
-    const gray = vec3(dot(inputColor.rgb, LUMA));
-    return vec4(mix(inputColor.rgb, gray, intensity), inputColor.a);
-  }
-);
-const aspect = (size) => size.div(min(size.x, size.y));
-const udRoundBox = /* @__PURE__ */ Fn(
-  ({ p, b, r }) => {
-    return length(max(abs(p).sub(b).add(r), float(0))).sub(r);
-  }
-);
-function useImageMaterial(tex, options) {
-  const uniforms = React.useMemo(
-    () => ({
-      color: uniform(new THREE.Color("white")),
-      scale: uniform(new THREE.Vector2(1, 1)),
-      imageBounds: uniform(new THREE.Vector2(1, 1)),
-      resolution: uniform(1024),
-      zoom: uniform(1),
-      radius: uniform(0),
-      grayscale: uniform(0),
-      opacity: uniform(1)
-    }),
-    []
-  );
-  const material = React.useMemo(() => {
-    const mat = new THREE.MeshBasicNodeMaterial();
-    mat.colorNode = Fn(() => {
-      const uvCoord = uv();
-      const s = aspect(uniforms.scale);
-      const i = aspect(uniforms.imageBounds);
-      const rs = s.x.div(s.y);
-      const ri = i.x.div(i.y);
-      const newX = select(rs.lessThan(ri), i.x.mul(s.y).div(i.y), s.x);
-      const newY = select(rs.lessThan(ri), s.y, i.y.mul(s.x).div(i.x));
-      const newSize = vec2$2(newX, newY);
-      const offsetX = select(rs.lessThan(ri), newX.sub(s.x).div(float(2)).div(newX), float(0));
-      const offsetY = select(rs.lessThan(ri), float(0), newY.sub(s.y).div(float(2)).div(newY));
-      const offset = vec2$2(offsetX, offsetY);
-      const transformedUv = uvCoord.mul(s).div(newSize).add(offset);
-      const zUv = transformedUv.sub(vec2$2(0.5, 0.5)).div(uniforms.zoom).add(vec2$2(0.5, 0.5));
-      const res = uniforms.scale.mul(uniforms.resolution);
-      const halfRes = res.mul(0.5);
-      const dist = udRoundBox({
-        p: uvCoord.mul(res).sub(halfRes),
-        b: halfRes,
-        r: uniforms.resolution.mul(uniforms.radius)
-      });
-      const edgeAlpha = smoothstep(float(1), float(0), dist);
-      const texColor = texture(tex, zUv);
-      const tintedRgb = texColor.rgb.mul(uniforms.color);
-      const finalAlpha = texColor.a.mul(uniforms.opacity).mul(edgeAlpha);
-      const tinted = vec4(tintedRgb, finalAlpha);
-      return toGrayscale({ inputColor: tinted, intensity: uniforms.grayscale });
-    })();
-    return mat;
-  }, [tex, uniforms]);
-  React.useLayoutEffect(() => {
-    uniforms.color.value.set(options.color);
-    uniforms.scale.value.set(options.scale[0], options.scale[1]);
-    uniforms.imageBounds.value.set(options.imageBounds[0], options.imageBounds[1]);
-    uniforms.resolution.value = options.resolution;
-    uniforms.zoom.value = options.zoom;
-    uniforms.radius.value = options.radius;
-    uniforms.grayscale.value = options.grayscale;
-    uniforms.opacity.value = options.opacity;
-  }, [
-    uniforms,
-    options.color,
-    options.scale[0],
-    options.scale[1],
-    options.imageBounds[0],
-    options.imageBounds[1],
-    options.resolution,
-    options.zoom,
-    options.radius,
-    options.grayscale,
-    options.opacity
-  ]);
-  React.useLayoutEffect(() => {
-    material.toneMapped = options.toneMapped ?? true;
-    material.transparent = options.transparent ?? false;
-    if (options.side !== void 0) material.side = options.side;
-    material.needsUpdate = true;
-  }, [material, options.toneMapped, options.transparent, options.side]);
-  return material;
-}
-const ImageBase = /* @__PURE__ */ React.forwardRef(
+const WireframeMaterial = /* @__PURE__ */ React.forwardRef(
   ({
-    children,
-    color = "white",
-    segments = 1,
-    scale = 1,
-    zoom = 1,
-    grayscale = 0,
-    opacity = 1,
-    radius = 0,
-    texture,
-    toneMapped,
-    transparent,
-    side,
+    fillOpacity = 0.25,
+    fillMix = 0,
+    strokeOpacity = 1,
+    thickness = 0.05,
+    colorBackfaces = false,
+    dashInvert = true,
+    dash = false,
+    dashRepeats = 4,
+    dashLength = 0.5,
+    squeeze = false,
+    squeezeMin = 0.2,
+    squeezeMax = 1,
+    stroke = "#ff0000",
+    backfaceStroke = "#0000ff",
+    fill = "#00ff00",
     ...props
   }, fref) => {
+    extend({ WireframeMaterial: WireframeMaterialImpl });
     const ref = React.useRef(null);
-    const size = useThree((state) => state.size);
-    const planeBounds = Array.isArray(scale) ? [scale[0], scale[1]] : [scale, scale];
-    const img = texture.image;
-    const imageBounds = [img.width, img.height];
-    const resolution = Math.max(size.width, size.height);
-    const material = useImageMaterial(texture, {
-      color,
-      zoom,
-      radius,
-      grayscale,
-      opacity,
-      scale: planeBounds,
-      imageBounds,
-      resolution,
-      toneMapped,
-      transparent,
-      side
-    });
     React.useImperativeHandle(fref, () => ref.current, []);
-    return /* @__PURE__ */ React.createElement("mesh", { ref, scale: Array.isArray(scale) ? [...scale, 1] : scale, ...props }, /* @__PURE__ */ React.createElement("planeGeometry", { args: [1, 1, segments, segments] }), /* @__PURE__ */ React.createElement("primitive", { object: material, attach: "material" }), children);
-  }
-);
-const ImageWithUrl = /* @__PURE__ */ React.forwardRef(
-  ({ url, ...props }, ref) => {
-    const texture = useTexture(url);
-    return /* @__PURE__ */ React.createElement(ImageBase, { ...props, texture, ref });
+    return /* @__PURE__ */ React.createElement(
+      "wireframeMaterial",
+      {
+        ref,
+        ...props,
+        fillOpacity,
+        fillMix,
+        strokeOpacity,
+        thickness,
+        colorBackfaces,
+        dashInvert,
+        dash,
+        dashRepeats,
+        dashLength,
+        squeeze,
+        squeezeMin,
+        squeezeMax,
+        stroke: stroke instanceof THREE.Color ? stroke : new THREE.Color(stroke),
+        backfaceStroke: backfaceStroke instanceof THREE.Color ? backfaceStroke : new THREE.Color(backfaceStroke),
+        fill: fill instanceof THREE.Color ? fill : new THREE.Color(fill)
+      }
+    );
   }
 );
-const ImageWithTexture = /* @__PURE__ */ React.forwardRef(({ url: _url, ...props }, ref) => {
-  return /* @__PURE__ */ React.createElement(ImageBase, { ...props, ref });
-});
-const Image = /* @__PURE__ */ React.forwardRef((props, ref) => {
-  if (props.url) return /* @__PURE__ */ React.createElement(ImageWithUrl, { ...props, ref });
-  else if (props.texture) return /* @__PURE__ */ React.createElement(ImageWithTexture, { ...props, ref });
-  else throw new Error("<Image /> requires a url or texture");
-});
-
-const pcss = ({ focus = 0, size = 25, samples = 10 } = {}) => `
-#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)
-  );
+const WireframeMaterialShaders = {
+  uniforms: {
+    strokeOpacity: 1,
+    fillOpacity: 0.25,
+    fillMix: 0,
+    thickness: 0.05,
+    colorBackfaces: false,
+    dashInvert: true,
+    dash: false,
+    dashRepeats: 4,
+    dashLength: 0.5,
+    squeeze: false,
+    squeezeMin: 0.2,
+    squeezeMax: 1,
+    stroke: /* @__PURE__ */ new THREE.Color("#ff0000"),
+    backfaceStroke: /* @__PURE__ */ new THREE.Color("#0000ff"),
+    fill: /* @__PURE__ */ new THREE.Color("#00ff00")
+  },
+  vertex: "// Converted to TSL - see WireframeMaterial",
+  fragment: "// Converted to TSL - see WireframeMaterial"
+};
+function setWireframeOverride(_material, _uniforms) {
+  console.warn("setWireframeOverride is deprecated. Use WireframeMaterial directly with TSL for WebGPU.");
+}
+function useWireframeUniforms(_uniforms, _props) {
+  console.warn("useWireframeUniforms is deprecated. Use WireframeMaterial props directly with TSL for WebGPU.");
 }
 
-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;
+function isWithGeometry(object) {
+  return !!object?.geometry;
+}
+function isGeometry(object) {
+  return !!object?.isBufferGeometry;
 }
-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;
+function isRefObject(object) {
+  return !!object?.current;
 }
-
-
-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;
+function isRef(object) {
+  return object?.current !== void 0;
 }
-float penumbraSize( const in float zReceiver, const in float zBlocker ) { // Parallel plane estimation
-  return (zReceiver - zBlocker) / zBlocker;
+function isWireframeGeometry(geometry) {
+  return geometry.type === "WireframeGeometry";
 }
-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++;
+function getInputGeometry(inputGeometry) {
+  const geo = isRefObject(inputGeometry) ? inputGeometry.current : inputGeometry;
+  if (!isGeometry(geo)) {
+    if (isWireframeGeometry(geo)) {
+      throw new Error("Wireframe: WireframeGeometry is not supported.");
     }
-    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);
-}`;
-function reset(gl, scene, camera) {
-  scene.traverse((object) => {
-    if (object.material) {
-      gl.properties.remove(object.material);
-      object.material.dispose?.();
+    const parent = geo.parent;
+    if (isWithGeometry(parent)) {
+      if (isWireframeGeometry(parent.geometry)) {
+        throw new Error("Wireframe: WireframeGeometry is not supported.");
+      }
+      return parent.geometry;
     }
-  });
-  gl.info.programs.length = 0;
-  gl.compile(scene, camera);
+  } else {
+    return geo;
+  }
 }
-function SoftShadows({ focus = 0, samples = 10, size = 25 }) {
-  const gl = useThree((state) => state.gl);
-  const scene = useThree((state) => state.scene);
-  const camera = useThree((state) => state.camera);
-  React.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]);
-  return null;
+function WireframeWithCustomGeo({
+  geometry: customGeometry,
+  simplify = false,
+  ...props
+}) {
+  const [geometry, setGeometry] = React.useState(null);
+  React.useLayoutEffect(() => {
+    let geom = getInputGeometry(customGeometry);
+    if (!geom) {
+      throw new Error("Wireframe: geometry prop must be a BufferGeometry or a ref to a BufferGeometry.");
+    }
+    geom = setBarycentricCoordinates(geom);
+    if (isRef(customGeometry)) {
+      setGeometry(geom);
+    }
+  }, [simplify, customGeometry]);
+  const drawnGeo = isRef(customGeometry) ? geometry : customGeometry;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, drawnGeo && /* @__PURE__ */ React.createElement("mesh", { geometry: drawnGeo }, /* @__PURE__ */ React.createElement(WireframeMaterial, { ...props })));
 }
-
-class SpotLightMaterial extends MeshBasicNodeMaterial {
-  //* Private Uniform Nodes --
-  _depth;
-  _opacity;
-  _attenuation;
-  _anglePower;
-  _spotPosition;
-  _lightColor;
+function WireframeWithoutCustomGeo({
+  simplify = false,
+  ...props
+}) {
+  const objectRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    let geom = getInputGeometry(objectRef);
+    if (!geom) {
+      throw new Error("Wireframe: Must be a child of a Mesh, Line or Points object or specify a geometry prop.");
+    }
+    const og = geom.clone();
+    geom = setBarycentricCoordinates(geom);
+    const parent = objectRef.current.parent;
+    if (parent && parent.geometry !== geom) {
+      parent.geometry = geom;
+    }
+    return () => {
+      if (parent) {
+        parent.geometry.dispose();
+        parent.geometry = og;
+      }
+    };
+  }, [simplify]);
+  return /* @__PURE__ */ React.createElement("object3D", { ref: objectRef });
+}
+function Wireframe({ geometry: customGeometry, ...props }) {
+  if (customGeometry) {
+    return /* @__PURE__ */ React.createElement(WireframeWithCustomGeo, { geometry: customGeometry, ...props });
+  }
+  return /* @__PURE__ */ React.createElement(WireframeWithoutCustomGeo, { ...props });
+}
+
+function BakeShadows() {
+  const gl = useThree((state) => state.gl);
+  useEffect(() => {
+    gl.shadowMap.autoUpdate = false;
+    gl.shadowMap.needsUpdate = true;
+    return () => {
+      gl.shadowMap.autoUpdate = gl.shadowMap.needsUpdate = true;
+    };
+  }, [gl.shadowMap]);
+  return null;
+}
+
+class ConvolutionMaterial extends MeshBasicNodeMaterial {
+  //* Private Uniform Nodes --
+  _inputBuffer;
+  _depthBuffer;
+  _resolution;
+  _texelSize;
+  _halfTexelSize;
+  _kernel;
+  _scale;
   _cameraNear;
   _cameraFar;
-  _resolution;
-  constructor() {
+  _minDepthThreshold;
+  _maxDepthThreshold;
+  _depthScale;
+  _depthToBlurRatioBias;
+  _useDepth;
+  /** Kernel weights for multi-pass blur */
+  kernel;
+  constructor(texelSize = new THREE.Vector2()) {
     super();
-    this._depth = uniformTexture(new THREE.Texture());
-    this._opacity = uniform(1);
-    this._attenuation = uniform(5);
-    this._anglePower = uniform(5);
-    this._spotPosition = uniform(new THREE.Vector3(0, 0, 0));
-    this._lightColor = uniform(new THREE.Color("white"));
-    this._cameraNear = uniform(0.1);
-    this._cameraFar = uniform(100);
-    this._resolution = uniform(new THREE.Vector2(0, 0));
-    this.transparent = true;
+    this._inputBuffer = uniformTexture(new THREE.Texture());
+    this._depthBuffer = uniformTexture(new THREE.Texture());
+    this._resolution = uniform(new THREE.Vector2());
+    this._texelSize = uniform(new THREE.Vector2());
+    this._halfTexelSize = uniform(new THREE.Vector2());
+    this._kernel = uniform(0);
+    this._scale = uniform(1);
+    this._cameraNear = uniform(0);
+    this._cameraFar = uniform(1);
+    this._minDepthThreshold = uniform(0);
+    this._maxDepthThreshold = uniform(1);
+    this._depthScale = uniform(0);
+    this._depthToBlurRatioBias = uniform(0.25);
+    this._useDepth = uniform(0);
+    this.blending = THREE.NoBlending;
     this.depthWrite = false;
-    this.side = THREE.DoubleSide;
+    this.depthTest = false;
+    this.toneMapped = false;
+    this.kernel = new Float32Array([0, 1, 2, 2, 3]);
+    this.setTexelSize(texelSize.x, texelSize.y);
     this._buildShader();
   }
-  //* Build TSL Shader ==============================
   _buildShader() {
-    const depthTex = this._depth;
-    const opacityUniform = this._opacity;
-    const attenuationUniform = this._attenuation;
-    const anglePowerUniform = this._anglePower;
-    const spotPositionUniform = this._spotPosition;
-    const lightColorUniform = this._lightColor;
-    const cameraNearUniform = this._cameraNear;
-    const cameraFarUniform = this._cameraFar;
-    const resolutionUniform = this._resolution;
-    const vNormal = varying(normalize(modelViewMatrix.transformDirection(normalLocal)), "vNormal");
-    const vIntensity = varying(
-      saturate(float(1).sub(distance(positionWorld, spotPositionUniform).div(attenuationUniform))),
-      "vIntensity"
+    const inputBufferTex = this._inputBuffer;
+    const depthBufferTex = this._depthBuffer;
+    const texelSizeUniform = this._texelSize;
+    const halfTexelSizeUniform = this._halfTexelSize;
+    const kernelUniform = this._kernel;
+    const scaleUniform = this._scale;
+    const minDepthThresholdUniform = this._minDepthThreshold;
+    const maxDepthThresholdUniform = this._maxDepthThreshold;
+    const depthScaleUniform = this._depthScale;
+    const useDepthUniform = this._useDepth;
+    const baseUv = varying(uv(), "vUv");
+    const dUv = varying(
+      Fn(() => {
+        return texelSizeUniform.mul(kernelUniform).add(halfTexelSizeUniform).mul(scaleUniform);
+      })(),
+      "vDuv"
     );
-    const vViewZ = varying(positionView.z, "vViewZ");
+    const vUv0 = varying(Fn(() => vec2$2(baseUv.x.sub(dUv.x), baseUv.y.add(dUv.y)))(), "vUv0");
+    const vUv1 = varying(Fn(() => vec2$2(baseUv.x.add(dUv.x), baseUv.y.add(dUv.y)))(), "vUv1");
+    const vUv2 = varying(Fn(() => vec2$2(baseUv.x.add(dUv.x), baseUv.y.sub(dUv.y)))(), "vUv2");
+    const vUv3 = varying(Fn(() => vec2$2(baseUv.x.sub(dUv.x), baseUv.y.sub(dUv.y)))(), "vUv3");
     this.colorNode = Fn(() => {
-      const angleIntensity = pow(abs(vNormal.z), anglePowerUniform);
-      const intensity = vIntensity.mul(angleIntensity).toVar();
-      const hasDepth = resolutionUniform.x.greaterThan(0);
-      const screenUV = vec2$2(
-        screenCoordinate.x.div(resolutionUniform.x),
-        float(1).sub(screenCoordinate.y.div(resolutionUniform.y))
-      );
-      const sampledDepth = texture(depthTex, screenUV).r;
-      const near = cameraNearUniform;
-      const far = cameraFarUniform;
-      const sceneViewZ = near.mul(far).div(far.sub(near).mul(sampledDepth).sub(far));
-      const depthDiff = vViewZ.sub(sceneViewZ);
-      const softFactor = smoothstep(float(0), float(1), depthDiff);
-      intensity.assign(select(hasDepth, intensity.mul(softFactor), intensity));
-      return vec4(lightColorUniform, intensity.mul(opacityUniform));
+      const depthFactor = float(0).toVar();
+      const isUsingDepth = useDepthUniform.greaterThan(0.5);
+      const depthSample = texture(depthBufferTex, baseUv);
+      const rawDepth = float(1).sub(depthSample.r.mul(depthSample.a));
+      const smoothedDepth = smoothstep(minDepthThresholdUniform, maxDepthThresholdUniform, rawDepth);
+      const scaledDepth = smoothedDepth.mul(depthScaleUniform);
+      const clampedDepth = max(float(0), min(float(1), scaledDepth.add(0.25)));
+      depthFactor.assign(select(isUsingDepth, clampedDepth, float(0)));
+      const sample0 = texture(inputBufferTex, mix(vUv0, baseUv, depthFactor));
+      const sample1 = texture(inputBufferTex, mix(vUv1, baseUv, depthFactor));
+      const sample2 = texture(inputBufferTex, mix(vUv2, baseUv, depthFactor));
+      const sample3 = texture(inputBufferTex, mix(vUv3, baseUv, depthFactor));
+      const sum = sample0.add(sample1).add(sample2).add(sample3);
+      return sum.mul(0.25);
     })();
   }
+  //* Utility Methods ==============================
+  /** Set texel size for blur calculations */
+  setTexelSize(x, y) {
+    this._texelSize.value.set(x, y);
+    this._halfTexelSize.value.set(x * 0.5, y * 0.5);
+  }
+  /** Set render resolution */
+  setResolution(resolution) {
+    this._resolution.value.copy(resolution);
+  }
   //* Uniform Accessors ==============================
-  get depth() {
-    return this._depth?.value;
+  /** Input color buffer to blur */
+  get inputBuffer() {
+    return this._inputBuffer.value;
   }
-  set depth(v) {
-    if (this._depth) this._depth.value = v ?? new THREE.Texture();
+  set inputBuffer(v) {
+    this._inputBuffer.value = v ?? new THREE.Texture();
   }
-  get opacity() {
-    return this._opacity?.value;
+  /** Depth buffer for depth-aware blur */
+  get depthBuffer() {
+    return this._depthBuffer.value;
   }
-  set opacity(v) {
-    if (this._opacity) this._opacity.value = v;
+  set depthBuffer(v) {
+    this._depthBuffer.value = v ?? new THREE.Texture();
   }
-  get attenuation() {
-    return this._attenuation?.value;
+  /** Render resolution */
+  get resolution() {
+    return this._resolution.value;
   }
-  set attenuation(v) {
-    if (this._attenuation) this._attenuation.value = v;
+  set resolution(v) {
+    this._resolution.value = v;
   }
-  get anglePower() {
-    return this._anglePower?.value;
+  /** Texel size (1/resolution) */
+  get texelSize() {
+    return this._texelSize.value;
   }
-  set anglePower(v) {
-    if (this._anglePower) this._anglePower.value = v;
+  set texelSize(v) {
+    this._texelSize.value = v;
   }
-  get spotPosition() {
-    return this._spotPosition?.value;
+  /** Half texel size for offset calculations */
+  get halfTexelSize() {
+    return this._halfTexelSize.value;
   }
-  set spotPosition(v) {
-    if (this._spotPosition) this._spotPosition.value = v;
+  set halfTexelSize(v) {
+    this._halfTexelSize.value = v;
   }
-  get lightColor() {
-    return this._lightColor?.value;
+  /** Kernel offset multiplier (changes per blur pass) */
+  get kernelValue() {
+    return this._kernel.value;
   }
-  set lightColor(v) {
-    if (this._lightColor) this._lightColor.value = v;
+  set kernelValue(v) {
+    this._kernel.value = v;
+  }
+  /** Scale factor for blur spread */
+  get scale() {
+    return this._scale.value;
+  }
+  set scale(v) {
+    this._scale.value = v;
   }
+  /** Camera near plane for depth calculations */
   get cameraNear() {
-    return this._cameraNear?.value;
+    return this._cameraNear.value;
   }
   set cameraNear(v) {
-    if (this._cameraNear) this._cameraNear.value = v;
+    this._cameraNear.value = v;
   }
+  /** Camera far plane for depth calculations */
   get cameraFar() {
-    return this._cameraFar?.value;
+    return this._cameraFar.value;
   }
   set cameraFar(v) {
-    if (this._cameraFar) this._cameraFar.value = v;
+    this._cameraFar.value = v;
   }
-  get resolution() {
-    return this._resolution?.value;
+  /** Minimum depth threshold for blur (objects closer than this get less blur) */
+  get minDepthThreshold() {
+    return this._minDepthThreshold.value;
   }
-  set resolution(v) {
-    if (this._resolution) this._resolution.value = v;
+  set minDepthThreshold(v) {
+    this._minDepthThreshold.value = v;
   }
-}
-
-const aastep = /* @__PURE__ */ Fn((inputs) => {
-  const [threshold, dist] = inputs;
-  const afwidth = fwidth(dist).mul(0.5);
-  return smoothstep(threshold.sub(afwidth), threshold.add(afwidth), dist);
-});
-const remap = /* @__PURE__ */ Fn((inputs) => {
-  const [value, min1, max1, min2, max2] = inputs;
-  return min2.add(value.sub(min1).mul(max2.sub(min2)).div(max1.sub(min1)));
-});
-class WireframeMaterialImpl extends MeshBasicNodeMaterial {
-  //* Private Uniform Nodes --
-  _strokeOpacity;
-  _fillOpacity;
-  _fillMix;
-  _thickness;
-  _colorBackfaces;
-  // Using number as bool (0/1)
-  _dashInvert;
-  _dash;
-  _dashRepeats;
-  _dashLength;
-  _squeeze;
-  _squeezeMin;
-  _squeezeMax;
-  _stroke;
-  _backfaceStroke;
-  _fill;
-  /** Type flag for identification */
-  isWireframeMaterial = true;
-  constructor() {
-    super();
-    this._strokeOpacity = uniform(1);
-    this._fillOpacity = uniform(0.25);
-    this._fillMix = uniform(0);
-    this._thickness = uniform(0.05);
-    this._colorBackfaces = uniform(0);
-    this._dashInvert = uniform(1);
-    this._dash = uniform(0);
-    this._dashRepeats = uniform(4);
-    this._dashLength = uniform(0.5);
-    this._squeeze = uniform(0);
-    this._squeezeMin = uniform(0.2);
-    this._squeezeMax = uniform(1);
-    this._stroke = uniform(new THREE.Color("#ff0000"));
-    this._backfaceStroke = uniform(new THREE.Color("#0000ff"));
-    this._fill = uniform(new THREE.Color("#00ff00"));
-    this.transparent = true;
-    this.side = THREE.DoubleSide;
-    this._buildWireframeShader();
-  }
-  _buildWireframeShader() {
-    const strokeOpacityUniform = this._strokeOpacity;
-    const fillOpacityUniform = this._fillOpacity;
-    const thicknessUniform = this._thickness;
-    const colorBackfacesUniform = this._colorBackfaces;
-    const dashInvertUniform = this._dashInvert;
-    const dashUniform = this._dash;
-    const dashRepeatsUniform = this._dashRepeats;
-    const dashLengthUniform = this._dashLength;
-    const squeezeUniform = this._squeeze;
-    const squeezeMinUniform = this._squeezeMin;
-    const squeezeMaxUniform = this._squeezeMax;
-    const strokeUniform = this._stroke;
-    const backfaceStrokeUniform = this._backfaceStroke;
-    const fillUniform = this._fill;
-    const barycentricAttr = attribute("barycentric", "vec3");
-    const vBarycentric = varying(barycentricAttr, "v_barycentric");
-    this.outputNode = Fn(() => {
-      const barycentric = vBarycentric;
-      const d = min(min(barycentric.x, barycentric.y), barycentric.z);
-      const positionAlong = float(0).toVar();
-      const maxXY = max(barycentric.x, barycentric.y);
-      const isYSmallest = barycentric.y.lessThan(barycentric.x).and(barycentric.y.lessThan(barycentric.z));
-      positionAlong.assign(select(isYSmallest, float(1).sub(maxXY), maxXY));
-      const computedThickness = remap(thicknessUniform, float(0), float(1), float(0), float(0.34)).toVar();
-      const squeezeEnabled = squeezeUniform.greaterThan(0.5);
-      const squeezeFactor = mix(squeezeMinUniform, squeezeMaxUniform, float(1).sub(sin(positionAlong.mul(Math.PI))));
-      computedThickness.assign(select(squeezeEnabled, computedThickness.mul(squeezeFactor), computedThickness));
-      const dashEnabled = dashUniform.greaterThan(0.5);
-      const dashInverted = dashInvertUniform.greaterThan(0.5);
-      const baseOffset = float(1).div(dashRepeatsUniform).mul(dashLengthUniform).mul(0.5);
-      const additionalOffset = float(1).div(dashRepeatsUniform).mul(0.5);
-      const dashOffset = select(dashInverted, baseOffset, baseOffset.add(additionalOffset));
-      const pattern = fract(positionAlong.add(dashOffset).mul(dashRepeatsUniform));
-      const dashMask = float(1).sub(aastep(dashLengthUniform, pattern));
-      computedThickness.assign(select(dashEnabled, computedThickness.mul(dashMask), computedThickness));
-      const edge = float(1).sub(aastep(computedThickness, d));
-      const useBackfaceColor = colorBackfacesUniform.greaterThan(0.5);
-      const isFrontFace = frontFacing;
-      const currentStroke = select(useBackfaceColor.and(isFrontFace.not()), backfaceStrokeUniform, strokeUniform);
-      const colorStroke = vec4(currentStroke, edge);
-      const colorFill = vec4(fillUniform, fillOpacityUniform);
-      const outColor = mix(colorFill, colorStroke, edge.mul(strokeOpacityUniform));
-      return outColor;
-    })();
-  }
-  //* Uniform Accessors ==============================
-  /** Stroke (edge) opacity, default: 1 */
-  get strokeOpacity() {
-    return this._strokeOpacity.value;
-  }
-  set strokeOpacity(v) {
-    this._strokeOpacity.value = v;
-  }
-  /** Fill opacity (background), default: 0.25 */
-  get fillOpacity() {
-    return this._fillOpacity.value;
+  /** Maximum depth threshold for blur (objects farther than this get full blur) */
+  get maxDepthThreshold() {
+    return this._maxDepthThreshold.value;
   }
-  set fillOpacity(v) {
-    this._fillOpacity.value = v;
+  set maxDepthThreshold(v) {
+    this._maxDepthThreshold.value = v;
   }
-  /** Mix factor between material color and fill color, default: 0 */
-  get fillMix() {
-    return this._fillMix.value;
+  /** Scale factor for depth-based blur adjustment */
+  get depthScale() {
+    return this._depthScale.value;
   }
-  set fillMix(v) {
-    this._fillMix.value = v;
+  set depthScale(v) {
+    this._depthScale.value = v;
   }
-  /** Edge thickness 0-1, default: 0.05 */
-  get thickness() {
-    return this._thickness.value;
+  /** Bias added to depth-to-blur ratio */
+  get depthToBlurRatioBias() {
+    return this._depthToBlurRatioBias.value;
   }
-  set thickness(v) {
-    this._thickness.value = v;
+  set depthToBlurRatioBias(v) {
+    this._depthToBlurRatioBias.value = v;
   }
-  /** Use different color for backfaces */
-  get colorBackfaces() {
-    return this._colorBackfaces.value > 0.5;
+  /** Enable/disable depth-based blur (0 = off, 1 = on) */
+  get useDepth() {
+    return this._useDepth.value > 0.5;
   }
-  set colorBackfaces(v) {
-    this._colorBackfaces.value = v ? 1 : 0;
+  set useDepth(v) {
+    this._useDepth.value = v ? 1 : 0;
   }
-  /** Invert dash pattern */
-  get dashInvert() {
-    return this._dashInvert.value > 0.5;
+}
+
+var GradientType = /* @__PURE__ */ ((GradientType2) => {
+  GradientType2["Linear"] = "linear";
+  GradientType2["Radial"] = "radial";
+  return GradientType2;
+})(GradientType || {});
+function GradientTexture({
+  stops,
+  colors,
+  size = 1024,
+  width = 16,
+  type = "linear" /* Linear */,
+  innerCircleRadius = 0,
+  outerCircleRadius = "auto",
+  ...props
+}) {
+  const gl = useThree((state) => state.gl);
+  const canvas = React.useMemo(() => {
+    const canvas2 = document.createElement("canvas");
+    const context = canvas2.getContext("2d");
+    canvas2.width = width;
+    canvas2.height = size;
+    let gradient;
+    if (type === "linear" /* Linear */) {
+      gradient = context.createLinearGradient(0, 0, 0, size);
+    } else {
+      const canvasCenterX = canvas2.width / 2;
+      const canvasCenterY = canvas2.height / 2;
+      const radius = outerCircleRadius !== "auto" ? Math.abs(Number(outerCircleRadius)) : Math.sqrt(canvasCenterX ** 2 + canvasCenterY ** 2);
+      gradient = context.createRadialGradient(
+        canvasCenterX,
+        canvasCenterY,
+        Math.abs(innerCircleRadius),
+        canvasCenterX,
+        canvasCenterY,
+        radius
+      );
+    }
+    const tempColor = new THREE.Color();
+    let i = stops.length;
+    while (i--) {
+      gradient.addColorStop(stops[i], tempColor.set(colors[i]).getStyle());
+    }
+    context.save();
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, width, size);
+    context.restore();
+    return canvas2;
+  }, [stops]);
+  return /* @__PURE__ */ React.createElement("canvasTexture", { colorSpace: gl.outputColorSpace, args: [canvas], attach: "map", ...props });
+}
+
+const LUMA = /* @__PURE__ */ vec3(0.299, 0.587, 0.114);
+const toGrayscale = /* @__PURE__ */ Fn(
+  ({ inputColor, intensity }) => {
+    const gray = vec3(dot(inputColor.rgb, LUMA));
+    return vec4(mix(inputColor.rgb, gray, intensity), inputColor.a);
   }
-  set dashInvert(v) {
-    this._dashInvert.value = v ? 1 : 0;
+);
+const aspect = (size) => size.div(min(size.x, size.y));
+const udRoundBox = /* @__PURE__ */ Fn(
+  ({ p, b, r }) => {
+    return length(max(abs(p).sub(b).add(r), float(0))).sub(r);
   }
-  /** Enable dashed lines */
-  get dash() {
-    return this._dash.value > 0.5;
+);
+function useImageMaterial(tex, options) {
+  const uniforms = React.useMemo(
+    () => ({
+      color: uniform(new THREE.Color("white")),
+      scale: uniform(new THREE.Vector2(1, 1)),
+      imageBounds: uniform(new THREE.Vector2(1, 1)),
+      resolution: uniform(1024),
+      zoom: uniform(1),
+      radius: uniform(0),
+      grayscale: uniform(0),
+      opacity: uniform(1)
+    }),
+    []
+  );
+  const material = React.useMemo(() => {
+    const mat = new THREE.MeshBasicNodeMaterial();
+    mat.colorNode = Fn(() => {
+      const uvCoord = uv();
+      const s = aspect(uniforms.scale);
+      const i = aspect(uniforms.imageBounds);
+      const rs = s.x.div(s.y);
+      const ri = i.x.div(i.y);
+      const newX = select(rs.lessThan(ri), i.x.mul(s.y).div(i.y), s.x);
+      const newY = select(rs.lessThan(ri), s.y, i.y.mul(s.x).div(i.x));
+      const newSize = vec2$2(newX, newY);
+      const offsetX = select(rs.lessThan(ri), newX.sub(s.x).div(float(2)).div(newX), float(0));
+      const offsetY = select(rs.lessThan(ri), float(0), newY.sub(s.y).div(float(2)).div(newY));
+      const offset = vec2$2(offsetX, offsetY);
+      const transformedUv = uvCoord.mul(s).div(newSize).add(offset);
+      const zUv = transformedUv.sub(vec2$2(0.5, 0.5)).div(uniforms.zoom).add(vec2$2(0.5, 0.5));
+      const res = uniforms.scale.mul(uniforms.resolution);
+      const halfRes = res.mul(0.5);
+      const dist = udRoundBox({
+        p: uvCoord.mul(res).sub(halfRes),
+        b: halfRes,
+        r: uniforms.resolution.mul(uniforms.radius)
+      });
+      const edgeAlpha = smoothstep(float(1), float(0), dist);
+      const texColor = texture(tex, zUv);
+      const tintedRgb = texColor.rgb.mul(uniforms.color);
+      const finalAlpha = texColor.a.mul(uniforms.opacity).mul(edgeAlpha);
+      const tinted = vec4(tintedRgb, finalAlpha);
+      return toGrayscale({ inputColor: tinted, intensity: uniforms.grayscale });
+    })();
+    return mat;
+  }, [tex, uniforms]);
+  React.useLayoutEffect(() => {
+    uniforms.color.value.set(options.color);
+    uniforms.scale.value.set(options.scale[0], options.scale[1]);
+    uniforms.imageBounds.value.set(options.imageBounds[0], options.imageBounds[1]);
+    uniforms.resolution.value = options.resolution;
+    uniforms.zoom.value = options.zoom;
+    uniforms.radius.value = options.radius;
+    uniforms.grayscale.value = options.grayscale;
+    uniforms.opacity.value = options.opacity;
+  }, [
+    uniforms,
+    options.color,
+    options.scale[0],
+    options.scale[1],
+    options.imageBounds[0],
+    options.imageBounds[1],
+    options.resolution,
+    options.zoom,
+    options.radius,
+    options.grayscale,
+    options.opacity
+  ]);
+  React.useLayoutEffect(() => {
+    material.toneMapped = options.toneMapped ?? true;
+    material.transparent = options.transparent ?? false;
+    if (options.side !== void 0) material.side = options.side;
+    material.needsUpdate = true;
+  }, [material, options.toneMapped, options.transparent, options.side]);
+  return material;
+}
+const ImageBase = /* @__PURE__ */ React.forwardRef(
+  ({
+    children,
+    color = "white",
+    segments = 1,
+    scale = 1,
+    zoom = 1,
+    grayscale = 0,
+    opacity = 1,
+    radius = 0,
+    texture,
+    toneMapped,
+    transparent,
+    side,
+    ...props
+  }, fref) => {
+    const ref = React.useRef(null);
+    const size = useThree((state) => state.size);
+    const planeBounds = Array.isArray(scale) ? [scale[0], scale[1]] : [scale, scale];
+    const img = texture.image;
+    const imageBounds = [img.width, img.height];
+    const resolution = Math.max(size.width, size.height);
+    const material = useImageMaterial(texture, {
+      color,
+      zoom,
+      radius,
+      grayscale,
+      opacity,
+      scale: planeBounds,
+      imageBounds,
+      resolution,
+      toneMapped,
+      transparent,
+      side
+    });
+    React.useImperativeHandle(fref, () => ref.current, []);
+    return /* @__PURE__ */ React.createElement("mesh", { ref, scale: Array.isArray(scale) ? [...scale, 1] : scale, ...props }, /* @__PURE__ */ React.createElement("planeGeometry", { args: [1, 1, segments, segments] }), /* @__PURE__ */ React.createElement("primitive", { object: material, attach: "material" }), children);
   }
-  set dash(v) {
-    this._dash.value = v ? 1 : 0;
+);
+const ImageWithUrl = /* @__PURE__ */ React.forwardRef(
+  ({ url, ...props }, ref) => {
+    const texture = useTexture(url);
+    return /* @__PURE__ */ React.createElement(ImageBase, { ...props, texture, ref });
   }
-  /** Number of dash repeats, default: 4 */
-  get dashRepeats() {
-    return this._dashRepeats.value;
+);
+const ImageWithTexture = /* @__PURE__ */ React.forwardRef(({ url: _url, ...props }, ref) => {
+  return /* @__PURE__ */ React.createElement(ImageBase, { ...props, ref });
+});
+const Image = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  if (props.url) return /* @__PURE__ */ React.createElement(ImageWithUrl, { ...props, ref });
+  else if (props.texture) return /* @__PURE__ */ React.createElement(ImageWithTexture, { ...props, ref });
+  else throw new Error("<Image /> requires a url or texture");
+});
+
+class SpotLightMaterial extends MeshBasicNodeMaterial {
+  //* Private Uniform Nodes --
+  _depth;
+  _opacity;
+  _attenuation;
+  _anglePower;
+  _spotPosition;
+  _lightColor;
+  _cameraNear;
+  _cameraFar;
+  _resolution;
+  constructor() {
+    super();
+    this._depth = uniformTexture(new THREE.Texture());
+    this._opacity = uniform(1);
+    this._attenuation = uniform(5);
+    this._anglePower = uniform(5);
+    this._spotPosition = uniform(new THREE.Vector3(0, 0, 0));
+    this._lightColor = uniform(new THREE.Color("white"));
+    this._cameraNear = uniform(0.1);
+    this._cameraFar = uniform(100);
+    this._resolution = uniform(new THREE.Vector2(0, 0));
+    this.transparent = true;
+    this.depthWrite = false;
+    this.side = THREE.DoubleSide;
+    this._buildShader();
   }
-  set dashRepeats(v) {
-    this._dashRepeats.value = v;
+  //* Build TSL Shader ==============================
+  _buildShader() {
+    const depthTex = this._depth;
+    const opacityUniform = this._opacity;
+    const attenuationUniform = this._attenuation;
+    const anglePowerUniform = this._anglePower;
+    const spotPositionUniform = this._spotPosition;
+    const lightColorUniform = this._lightColor;
+    const cameraNearUniform = this._cameraNear;
+    const cameraFarUniform = this._cameraFar;
+    const resolutionUniform = this._resolution;
+    const vNormal = varying(normalize(modelViewMatrix.transformDirection(normalLocal)), "vNormal");
+    const vIntensity = varying(
+      saturate(float(1).sub(distance(positionWorld, spotPositionUniform).div(attenuationUniform))),
+      "vIntensity"
+    );
+    const vViewZ = varying(positionView.z, "vViewZ");
+    this.colorNode = Fn(() => {
+      const angleIntensity = pow(abs(vNormal.z), anglePowerUniform);
+      const intensity = vIntensity.mul(angleIntensity).toVar();
+      const hasDepth = resolutionUniform.x.greaterThan(0);
+      const screenUV = vec2$2(
+        screenCoordinate.x.div(resolutionUniform.x),
+        float(1).sub(screenCoordinate.y.div(resolutionUniform.y))
+      );
+      const sampledDepth = texture(depthTex, screenUV).r;
+      const near = cameraNearUniform;
+      const far = cameraFarUniform;
+      const sceneViewZ = near.mul(far).div(far.sub(near).mul(sampledDepth).sub(far));
+      const depthDiff = vViewZ.sub(sceneViewZ);
+      const softFactor = smoothstep(float(0), float(1), depthDiff);
+      intensity.assign(select(hasDepth, intensity.mul(softFactor), intensity));
+      return vec4(lightColorUniform, intensity.mul(opacityUniform));
+    })();
   }
-  /** Dash length 0-1, default: 0.5 */
-  get dashLength() {
-    return this._dashLength.value;
+  //* Uniform Accessors ==============================
+  get depth() {
+    return this._depth?.value;
   }
-  set dashLength(v) {
-    this._dashLength.value = v;
+  set depth(v) {
+    if (this._depth) this._depth.value = v ?? new THREE.Texture();
   }
-  /** Squeeze thickness toward line center */
-  get squeeze() {
-    return this._squeeze.value > 0.5;
+  get opacity() {
+    return this._opacity?.value;
   }
-  set squeeze(v) {
-    this._squeeze.value = v ? 1 : 0;
+  set opacity(v) {
+    if (this._opacity) this._opacity.value = v;
   }
-  /** Minimum squeeze factor, default: 0.2 */
-  get squeezeMin() {
-    return this._squeezeMin.value;
+  get attenuation() {
+    return this._attenuation?.value;
   }
-  set squeezeMin(v) {
-    this._squeezeMin.value = v;
+  set attenuation(v) {
+    if (this._attenuation) this._attenuation.value = v;
   }
-  /** Maximum squeeze factor, default: 1 */
-  get squeezeMax() {
-    return this._squeezeMax.value;
+  get anglePower() {
+    return this._anglePower?.value;
   }
-  set squeezeMax(v) {
-    this._squeezeMax.value = v;
+  set anglePower(v) {
+    if (this._anglePower) this._anglePower.value = v;
   }
-  /** Stroke (edge) color */
-  get stroke() {
-    return this._stroke.value;
+  get spotPosition() {
+    return this._spotPosition?.value;
   }
-  set stroke(v) {
-    if (v instanceof THREE.Color) this._stroke.value = v;
-    else this._stroke.value = new THREE.Color(v);
+  set spotPosition(v) {
+    if (this._spotPosition) this._spotPosition.value = v;
   }
-  /** Backface stroke color */
-  get backfaceStroke() {
-    return this._backfaceStroke.value;
+  get lightColor() {
+    return this._lightColor?.value;
   }
-  set backfaceStroke(v) {
-    if (v instanceof THREE.Color) this._backfaceStroke.value = v;
-    else this._backfaceStroke.value = new THREE.Color(v);
+  set lightColor(v) {
+    if (this._lightColor) this._lightColor.value = v;
   }
-  /** Fill (background) color */
-  get fill() {
-    return this._fill.value;
+  get cameraNear() {
+    return this._cameraNear?.value;
   }
-  set fill(v) {
-    if (v instanceof THREE.Color) this._fill.value = v;
-    else this._fill.value = new THREE.Color(v);
+  set cameraNear(v) {
+    if (this._cameraNear) this._cameraNear.value = v;
   }
-}
-function setBarycentricCoordinates(geometry) {
-  const position = geometry.getAttribute("position");
-  const count = position.count;
-  if (geometry.index) {
-    geometry = geometry.toNonIndexed();
+  get cameraFar() {
+    return this._cameraFar?.value;
   }
-  const barycentricArray = new Float32Array(count * 3);
-  for (let i = 0; i < count; i += 3) {
-    barycentricArray[i * 3 + 0] = 1;
-    barycentricArray[i * 3 + 1] = 0;
-    barycentricArray[i * 3 + 2] = 0;
-    barycentricArray[(i + 1) * 3 + 0] = 0;
-    barycentricArray[(i + 1) * 3 + 1] = 1;
-    barycentricArray[(i + 1) * 3 + 2] = 0;
-    barycentricArray[(i + 2) * 3 + 0] = 0;
-    barycentricArray[(i + 2) * 3 + 1] = 0;
-    barycentricArray[(i + 2) * 3 + 2] = 1;
+  set cameraFar(v) {
+    if (this._cameraFar) this._cameraFar.value = v;
   }
-  geometry.setAttribute("barycentric", new THREE.BufferAttribute(barycentricArray, 3));
-  return geometry;
-}
-const WireframeMaterial = /* @__PURE__ */ React.forwardRef(
-  ({
-    fillOpacity = 0.25,
-    fillMix = 0,
-    strokeOpacity = 1,
-    thickness = 0.05,
-    colorBackfaces = false,
-    dashInvert = true,
-    dash = false,
-    dashRepeats = 4,
-    dashLength = 0.5,
-    squeeze = false,
-    squeezeMin = 0.2,
-    squeezeMax = 1,
-    stroke = "#ff0000",
-    backfaceStroke = "#0000ff",
-    fill = "#00ff00",
-    ...props
-  }, fref) => {
-    extend({ WireframeMaterial: WireframeMaterialImpl });
-    const ref = React.useRef(null);
-    React.useImperativeHandle(fref, () => ref.current, []);
-    return /* @__PURE__ */ React.createElement(
-      "wireframeMaterial",
-      {
-        ref,
-        ...props,
-        fillOpacity,
-        fillMix,
-        strokeOpacity,
-        thickness,
-        colorBackfaces,
-        dashInvert,
-        dash,
-        dashRepeats,
-        dashLength,
-        squeeze,
-        squeezeMin,
-        squeezeMax,
-        stroke: stroke instanceof THREE.Color ? stroke : new THREE.Color(stroke),
-        backfaceStroke: backfaceStroke instanceof THREE.Color ? backfaceStroke : new THREE.Color(backfaceStroke),
-        fill: fill instanceof THREE.Color ? fill : new THREE.Color(fill)
-      }
-    );
+  get resolution() {
+    return this._resolution?.value;
+  }
+  set resolution(v) {
+    if (this._resolution) this._resolution.value = v;
   }
-);
-const WireframeMaterialShaders = {
-  uniforms: {
-    strokeOpacity: 1,
-    fillOpacity: 0.25,
-    fillMix: 0,
-    thickness: 0.05,
-    colorBackfaces: false,
-    dashInvert: true,
-    dash: false,
-    dashRepeats: 4,
-    dashLength: 0.5,
-    squeeze: false,
-    squeezeMin: 0.2,
-    squeezeMax: 1,
-    stroke: /* @__PURE__ */ new THREE.Color("#ff0000"),
-    backfaceStroke: /* @__PURE__ */ new THREE.Color("#0000ff"),
-    fill: /* @__PURE__ */ new THREE.Color("#00ff00")
-  },
-  vertex: "// Converted to TSL - see WireframeMaterial",
-  fragment: "// Converted to TSL - see WireframeMaterial"
-};
-function setWireframeOverride(_material, _uniforms) {
-  console.warn("setWireframeOverride is deprecated. Use WireframeMaterial directly with TSL for WebGPU.");
-}
-function useWireframeUniforms(_uniforms, _props) {
-  console.warn("useWireframeUniforms is deprecated. Use WireframeMaterial props directly with TSL for WebGPU.");
 }
 
 class StarfieldMaterial extends SpriteNodeMaterial {
@@ -12286,6 +11713,20 @@ const Grid = /* @__PURE__ */ React.forwardRef(
   }
 );
 
+let hasWarned = false;
+function warnOnce(message) {
+  if (!hasWarned) {
+    console.warn(message);
+    hasWarned = true;
+  }
+}
+function SoftShadows(props) {
+  warnOnce(
+    "drei: SoftShadows is not yet supported in WebGPU. It uses ShaderChunk to inject PCSS shaders which is WebGL-only. Import from @react-three/drei/legacy for WebGL."
+  );
+  return null;
+}
+
 let spotlightIdCounter = 0;
 const generateSpotlightId = () => `spotlight_${spotlightIdCounter++}`;
 function VolumetricMesh({
@@ -12544,4 +11985,4 @@ const Sparkles = /* @__PURE__ */ React.forwardRef(({ noise = 1, count = 100, spe
   );
 });
 
-export { AccumulativeShadows, AdaptiveDpr, AdaptiveEvents, ArcballControls, BBAnchor, Backdrop, BakeShadows, Billboard, BlurPass, Bounds, Box, CameraShake, Capsule, CatmullRomLine, Caustics, CausticsMaterial, CausticsNormalMaterial, CausticsProjectionMaterial, Center, Circle, Clone, Cloud, CloudInstance, Clouds, ComputedAttribute, Cone, ContactShadows, ConvolutionMaterial, CubeCamera, CubeTexture, CubicBezierLine, CurveModifier, CycleRaycast, Cylinder, Decal, Detailed, DetectGPU, DeviceOrientationControls, DiscardMaterial, Dodecahedron, DragControls, Edges, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, Example, Extrude, FakeCloudMaterial, Fbo, Fbx, FirstPersonControls, Fisheye, Float, FlyControls, GizmoHelper, GizmoViewcube, GizmoViewport, Gltf, GradientTexture, GradientType, Grid, Helper, Html, Hud, Icosahedron, Image, Instance, InstancedAttribute, Instances, IsObject, KeyboardControls, Ktx2, Lathe, Lightformer, Line, Loader, MapControls, Mask, MatcapTexture, Merged, MeshDistortMaterial, MeshPortalMaterial, MeshReflectorMaterial, MeshReflectorMaterial$1 as MeshReflectorMaterialImpl, MeshRefractionMaterial, MeshTransmissionMaterial, MeshWobbleMaterial, MotionPathControls, NormalTexture, Octahedron, OrbitControls, OrthographicCamera, Outlines, PerformanceMonitor, PerspectiveCamera, PivotControls, Plane, Point, PointMaterial, PointMaterialImpl, PointerLockControls, Points, PointsBuffer, Polyhedron, PositionMesh, PositionPoint, PositionalAudio, Preload, PresentationControls, Progress, QuadraticBezierLine, RandomizedLight, RenderCubeTexture, RenderTexture, Resize, Ring, RoundedBox, RoundedBoxGeometry, Sampler, ScreenQuad, ScreenSizer, ScreenSpace, ScreenVideoTexture, Scroll, ScrollControls, Segment, SegmentObject, Segments, Select, Shadow, Shape, Sky, SoftShadows, Sparkles, SparklesMaterial, Sphere, SpotLight, SpotLightMaterial, SpriteAnimator, Stage, StarfieldMaterial, Stars, Stats, StatsGl, Svg, Tetrahedron, Text3D, Texture, Torus, TorusKnot, TrackballControls, Trail, TrailTexture, TransformControls, Tube, VideoTexture, View, WebcamVideoTexture, Wireframe, WireframeMaterial, WireframeMaterialShaders, accumulativeContext, calcPosFromAngles, checkIfFrameIsEmpty, createInstances, getFirstFrame, meshBounds, presetsObj, setBarycentricCoordinates, setWireframeOverride, useAnimations, useAspect, useBounds, useContextBridge, useCubeCamera, useCubeTexture, useCursor, useCustomRaycast, useDepthBuffer, useDetectGPU, useEnvironment, useFBO, useFBX, useFont, useGLTF, useGizmoContext, useHelper, useIntersect, useKTX2, useKeyboardControls, useMask, useMatcapTexture, useMotion, useNormalTexture, usePerformanceMonitor, useProgress, useScroll, useSelect, useSpriteAnimator, useSpriteLoader, useSurfaceSampler, useTexture, useTrail, useTrailTexture, useVideoTexture, useWireframeUniforms };
+export { AccumulativeShadows, AdaptiveDpr, AdaptiveEvents, ArcballControls, BBAnchor, Backdrop, BakeShadows, Billboard, Bounds, Box, CameraShake, Capsule, CatmullRomLine, Caustics, CausticsMaterial, CausticsNormalMaterial, CausticsProjectionMaterial, Center, Circle, Clone, Cloud, CloudInstance, Clouds, ComputedAttribute, Cone, ContactShadows, ConvolutionMaterial, CubeCamera, CubeTexture, CubicBezierLine, CurveModifier, CycleRaycast, Cylinder, Decal, Detailed, DetectGPU, DeviceOrientationControls, DiscardMaterial, Dodecahedron, DragControls, Edges, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, Example, Extrude, FakeCloudMaterial, Fbo, Fbx, FirstPersonControls, Fisheye, Float, FlyControls, GizmoHelper, GizmoViewcube, GizmoViewport, Gltf, GradientTexture, GradientType, Grid, Helper, Html, Hud, Icosahedron, Image, Instance, InstancedAttribute, Instances, IsObject, KeyboardControls, Ktx2, Lathe, Lightformer, Line, Loader, MapControls, Mask, MatcapTexture, Merged, MeshDistortMaterial, MeshPortalMaterial, MeshReflectorMaterial, MeshReflectorMaterial$1 as MeshReflectorMaterialImpl, MeshRefractionMaterial, MeshTransmissionMaterial, MeshWobbleMaterial, MotionPathControls, NormalTexture, Octahedron, OrbitControls, OrthographicCamera, Outlines, PerformanceMonitor, PerspectiveCamera, PivotControls, Plane, Point, PointMaterial, PointMaterialImpl, PointerLockControls, Points, PointsBuffer, Polyhedron, PositionMesh, PositionPoint, PositionalAudio, Preload, PresentationControls, Progress, QuadraticBezierLine, RandomizedLight, RenderCubeTexture, RenderTexture, Resize, Ring, RoundedBox, RoundedBoxGeometry, Sampler, ScreenQuad, ScreenSizer, ScreenSpace, ScreenVideoTexture, Scroll, ScrollControls, Segment, SegmentObject, Segments, Select, Shadow, Shape, Sky, SoftShadows, Sparkles, SparklesMaterial, Sphere, SpotLight, SpotLightMaterial, SpriteAnimator, Stage, StarfieldMaterial, Stars, Stats, StatsGl, Svg, Tetrahedron, Text3D, Texture, Torus, TorusKnot, TrackballControls, Trail, TrailTexture, TransformControls, Tube, VideoTexture, View, WebcamVideoTexture, Wireframe, WireframeMaterial, WireframeMaterialShaders, accumulativeContext, calcPosFromAngles, checkIfFrameIsEmpty, createInstances, getFirstFrame, meshBounds, presetsObj, setBarycentricCoordinates, setWireframeOverride, useAnimations, useAspect, useBounds, useContextBridge, useCubeCamera, useCubeTexture, useCursor, useCustomRaycast, useDepthBuffer, useDetectGPU, useEnvironment, useFBO, useFBX, useFont, useGLTF, useGizmoContext, useHelper, useIntersect, useKTX2, useKeyboardControls, useMask, useMatcapTexture, useMotion, useNormalTexture, usePerformanceMonitor, useProgress, useScroll, useSelect, useSpriteAnimator, useSpriteLoader, useSurfaceSampler, useTexture, useTrail, useTrailTexture, useVideoTexture, useWireframeUniforms };