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

package/webgpu/index.mjs

@@ -2,9 +2,8 @@ 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, 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 { MeshBasicNodeMaterial, RenderTarget, MeshPhongNodeMaterial, MeshNormalNodeMaterial, QuadMesh, MeshPhysicalNodeMaterial, Frustum, Matrix4, CubeRenderTarget, Line2NodeMaterial, Vector3, Vector4, Vector2, Color, InstancedInterleavedBuffer, InterleavedBufferAttribute, Object3D, HalfFloatType, CubeCamera as CubeCamera$1, EventDispatcher, Euler, Quaternion, MathUtils, TextureLoader, Texture as Texture$1, MeshLambertMaterial, DynamicDrawUsage, CatmullRomCurve3, CubicBezierCurve3, QuadraticBezierCurve3, Shape as Shape$1, CanvasTexture, PerspectiveCamera as PerspectiveCamera$1, OrthographicCamera as OrthographicCamera$1, REVISION, AudioListener, AudioLoader, AnimationMixer, BufferAttribute, Box3, Sphere as Sphere$1, InstancedBufferAttribute, DoubleSide, DepthTexture, DepthFormat, UnsignedShortType, CubeTextureLoader, DefaultLoadingManager, Ray, Raycaster, Camera, CubeReflectionMapping, EquirectangularReflectionMapping, Scene, RepeatWrapping, SpriteNodeMaterial, AdditiveBlending, ShadowNode, CylinderGeometry } from 'three/webgpu';
 import { ArcballControls as ArcballControls$1 } from 'three/examples/jsm/controls/ArcballControls.js';
-import { useGesture } from '@use-gesture/react';
 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';
@@ -13,10 +12,11 @@ import { MapControls as MapControls$1 } from 'three/examples/jsm/controls/MapCon
 import { misc, easing } from 'maath';
 import { OrbitControls as OrbitControls$1 } from 'three/addons/controls/OrbitControls.js';
 import { PointerLockControls as PointerLockControls$1 } from 'three/examples/jsm/controls/PointerLockControls.js';
+import { useGesture } from '@use-gesture/react';
 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, frontFacing, fwidth, abs, saturate, positionView, modelWorldMatrix, positionGeometry } from 'three/tsl';
+import { uniform, Fn, float, vec4, uniformTexture, uv, vec2 as vec2$2, texture, Discard, max, sub, mix, output, positionWorld, mul, add, negate, dot, refract, div, length, cross, select, vec3, normalize, normalWorld, cameraPosition, screenCoordinate, mx_fractal_noise_vec3, int, thickness, pow, roughness, Loop, ior, screenUV, screenSize, cameraProjectionMatrix, cameraViewMatrix, attenuationColor, attenuationDistance, diffuseColor, transmission, fract, sin, modelWorldMatrix, log, exp, DFGLUT, reflector, clamp, equirectUV, reflect, smoothstep, round, distance, positionLocal, mx_noise_vec3, cos, mat3, normalLocal, attribute, modelViewMatrix, varying, min, frontFacing, fwidth, abs, saturate, positionView, positionGeometry, reference, renderGroup, interleavedGradientNoise, vogelDiskSample, step } 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';
@@ -31,7 +31,6 @@ import { TransformControls as TransformControls$1 } from 'three/examples/jsm/con
 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.js';
-import { Events } from 'hls.js';
 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';
@@ -50,6 +49,7 @@ import { SkyMesh } from 'three/examples/jsm/objects/SkyMesh.js';
 import { SelectionBox } from 'three/examples/jsm/interactive/SelectionBox.js';
 import { shallow } from 'zustand/shallow';
 import { hashBlur } from 'three/examples/jsm/tsl/display/hashBlur.js';
+import PhysicalLightingModel from 'three/src/nodes/functions/PhysicalLightingModel.js';
 
 class DepthNodeMaterial extends MeshBasicNodeMaterial {
   _opacity;
@@ -238,28 +238,354 @@ const ContactShadows = /* @__PURE__ */ React.forwardRef(
   }
 );
 
+const discardFragment = /* @__PURE__ */ Fn(() => {
+  Discard();
+  return vec4(0, 0, 0, 0);
+});
+const DiscardMaterial = /* @__PURE__ */ new MeshBasicNodeMaterial({
+  fragmentNode: discardFragment()
+});
+
+function isLight(object) {
+  return object.isLight;
+}
+function isGeometry$1(object) {
+  return !!object.geometry;
+}
 const accumulativeContext = /* @__PURE__ */ React.createContext(
   null
 );
-let hasWarned$1 = false;
-function warnOnce$1(message) {
-  if (!hasWarned$1) {
-    console.warn(message);
-    hasWarned$1 = true;
+class SoftShadowMaterialImpl extends MeshBasicNodeMaterial {
+  _color;
+  _blend;
+  _alphaTest;
+  _opacity;
+  _map;
+  constructor() {
+    super();
+    this._color = uniform(new THREE.Color());
+    this._blend = uniform(2);
+    this._alphaTest = uniform(0.75);
+    this._opacity = uniform(0);
+    this._map = uniformTexture(new THREE.Texture());
+    this.transparent = true;
+    this.depthWrite = false;
+    this._buildShader();
+  }
+  _buildShader() {
+    const colorUniform = this._color;
+    const blendUniform = this._blend;
+    const alphaTestUniform = this._alphaTest;
+    const opacityUniform = this._opacity;
+    const mapTex = this._map;
+    this.colorNode = Fn(() => {
+      const texCoord = uv();
+      const sampled = texture(mapTex, texCoord);
+      const rgb = colorUniform.mul(sampled.r).mul(blendUniform);
+      const sum = sampled.r.add(sampled.g).add(sampled.b);
+      const alpha = max(float(0), float(1).sub(sum.div(alphaTestUniform))).mul(opacityUniform);
+      return vec4(rgb, alpha);
+    })();
+  }
+  get shadowColor() {
+    return this._color.value;
+  }
+  set shadowColor(v) {
+    if (v instanceof THREE.Color) {
+      this._color.value.copy(v);
+    } else {
+      this._color.value.set(v);
+    }
+  }
+  get blend() {
+    return this._blend.value;
+  }
+  set blend(v) {
+    this._blend.value = v;
+  }
+  get alphaTest() {
+    return this._alphaTest.value;
+  }
+  set alphaTest(v) {
+    this._alphaTest.value = v;
+  }
+  get opacity() {
+    return this._opacity.value;
+  }
+  set opacity(v) {
+    if (!this._opacity) this._opacity = uniform(v);
+    else this._opacity.value = v;
+  }
+  get map() {
+    if (!this._map) {
+      this._map = uniformTexture(new THREE.Texture());
+    }
+    return this._map.value;
+  }
+  set map(v) {
+    this._map.value = v;
   }
 }
-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;
-});
+class ProgressiveShadowMaterial extends MeshPhongNodeMaterial {
+  _previousShadowMap;
+  _averagingWindow;
+  constructor(initialTexture) {
+    super();
+    this._previousShadowMap = texture(initialTexture);
+    this._averagingWindow = uniform(100);
+    this.fog = false;
+    this._buildShader();
+  }
+  _buildShader() {
+    const previousMapTex = this._previousShadowMap;
+    const averagingWindowUniform = this._averagingWindow;
+    const uvNode = uv();
+    this.vertexNode = vec4(sub(uvNode, vec2$2(0.5)).mul(2), 1, 1);
+    this.outputNode = vec4(mix(previousMapTex.sample(uv()), output, float(1).div(averagingWindowUniform)));
+  }
+  get previousShadowMap() {
+    return this._previousShadowMap.value;
+  }
+  set previousShadowMap(v) {
+    this._previousShadowMap.value = v;
+  }
+  get averagingWindow() {
+    return this._averagingWindow.value;
+  }
+  set averagingWindow(v) {
+    this._averagingWindow.value = v;
+  }
+}
+class ProgressiveLightMap {
+  renderer;
+  res;
+  scene;
+  object;
+  buffer1Active;
+  progressiveLightMap1;
+  progressiveLightMap2;
+  discardMat;
+  targetMat;
+  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 RenderTarget(this.res, this.res, textureParams);
+    this.progressiveLightMap2 = new RenderTarget(this.res, this.res, textureParams);
+    this.discardMat = DiscardMaterial;
+    this.targetMat = new ProgressiveShadowMaterial(this.progressiveLightMap1.texture);
+  }
+  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.targetMat.averagingWindow = blendWindow;
+    const originalMaterial = this.object.material;
+    this.object.material = this.targetMat;
+    const oldFrustumCulled = this.object.frustumCulled;
+    this.object.frustumCulled = false;
+    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.targetMat.previousShadowMap = inactiveMap.texture;
+    this.buffer1Active = !this.buffer1Active;
+    this.renderer.render(this.scene, camera);
+    this.renderer.setRenderTarget(null);
+    this.scene.background = oldBg;
+    this.object.frustumCulled = oldFrustumCulled;
+    this.object.material = originalMaterial;
+  }
+}
+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) => {
+    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 [softShadowMat] = React.useState(() => new SoftShadowMaterialImpl());
+    const [plm] = React.useState(() => new ProgressiveLightMap(gl, scene, resolution));
+    React.useLayoutEffect(() => {
+      plm.configure(gPlane.current);
+    }, [plm]);
+    React.useEffect(() => {
+      softShadowMat.shadowColor = color;
+      softShadowMat.blend = colorBlend;
+      softShadowMat.map = plm.progressiveLightMap2.texture;
+      softShadowMat.toneMapped = toneMapped;
+    }, [softShadowMat, color, colorBlend, plm, toneMapped]);
+    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();
+          softShadowMat.opacity = 0;
+          softShadowMat.alphaTest = 0;
+          api.count = 0;
+        },
+        update: (frames2 = 1) => {
+          if (!api.temporal) {
+            softShadowMat.opacity = opacity;
+            softShadowMat.alphaTest = alphaTest;
+          } else {
+            softShadowMat.opacity = Math.min(opacity, softShadowMat.opacity + opacity / api.blend);
+            softShadowMat.alphaTest = Math.min(alphaTest, softShadowMat.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, softShadowMat]
+    );
+    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("primitive", { object: softShadowMat, attach: "material" })));
+  }
+);
+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 = Math.PI,
+    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] })
+    )));
+  }
+);
 
 function useFBO(width, height, settings) {
   const size = useThree((state) => state.size);
@@ -408,10 +734,10 @@ class CausticsProjectionMaterial extends MeshBasicNodeMaterial {
     this._causticsTextureB.value = v;
   }
   get color() {
-    return this._color.value;
+    return this._color?.value;
   }
   set color(v) {
-    this._color.value = v;
+    if (this._color) this._color.value = v;
   }
   get lightProjMatrix() {
     return this._lightProjMatrix.value;
@@ -824,29 +1150,307 @@ const Caustics = /* @__PURE__ */ React.forwardRef(
   }
 );
 
-const DiscardMaterial = /* @__PURE__ */ new MeshBasicNodeMaterial({
-  colorNode: Discard()
+const EnvironmentBRDF = /* @__PURE__ */ Fn((inputs) => {
+  const { dotNV, specularColor, specularF90, roughness: roughness2 } = inputs;
+  const fab = DFGLUT({ dotNV, roughness: roughness2 });
+  return specularColor.mul(fab.x).add(specularF90.mul(fab.y));
 });
-
-const rand = /* @__PURE__ */ Fn(({ seed, fragCoord }) => {
+const rand = /* @__PURE__ */ Fn((inputs) => {
+  const [seed, fragCoord] = inputs;
   return fract(sin(dot(vec3(fragCoord.xy, seed), vec3(12.9898, 78.233, 45.164))).mul(43758.5453));
 });
-const applyVolumeAttenuation = /* @__PURE__ */ Fn(
-  ({
-    radiance,
-    transmissionDistance,
-    attenuationColor,
-    attenuationDistance
-  }) => {
-    const isInfinite = attenuationDistance.greaterThan(1e10);
-    const safeColor = max(attenuationColor, vec3(1e-4));
-    const attenuationCoefficient = log(safeColor).negate().div(attenuationDistance);
-    const transmittance = exp(attenuationCoefficient.negate().mul(transmissionDistance));
-    return select(isInfinite, radiance, transmittance.mul(radiance));
+const applyVolumeAttenuation = /* @__PURE__ */ Fn((inputs) => {
+  const [radiance, transmissionDistance, attColor, attDistance] = inputs;
+  const isInfinite = attDistance.greaterThan(1e10);
+  const safeColor = max(attColor, vec3(1e-4));
+  const attenuationCoefficient = log(safeColor).negate().div(attDistance);
+  const transmittance = exp(attenuationCoefficient.negate().mul(transmissionDistance));
+  return select(isInfinite, radiance, transmittance.mul(radiance));
+});
+const getVolumeTransmissionRay = /* @__PURE__ */ Fn((inputs) => {
+  const [n, v, thicknessVal, iorVal] = inputs;
+  const refractionVector = refract(v.negate(), normalize(n), float(1).div(iorVal));
+  const refractLen = length(refractionVector);
+  const safeRefractionVector = select(
+    refractLen.greaterThan(1e-3),
+    refractionVector,
+    v.negate()
+    // Fallback: ray goes straight through
+  );
+  const modelScale = vec3(
+    length(modelWorldMatrix[0].xyz),
+    length(modelWorldMatrix[1].xyz),
+    length(modelWorldMatrix[2].xyz)
+  );
+  return normalize(safeRefractionVector).mul(thicknessVal.mul(modelScale));
+});
+const getRefractionUV = /* @__PURE__ */ Fn((inputs) => {
+  const [norm, viewDir, iorVal, thicknessVal, position] = inputs;
+  const transmissionRay = getVolumeTransmissionRay(norm, viewDir, thicknessVal, iorVal);
+  const refractedRayExit = position.add(transmissionRay);
+  const ndcPos = cameraProjectionMatrix.mul(cameraViewMatrix.mul(vec4(refractedRayExit, 1)));
+  const safeW = max(ndcPos.w, float(1e-3));
+  const refractionCoords = vec2$2(ndcPos.xy.div(safeW)).toVar();
+  refractionCoords.addAssign(1);
+  refractionCoords.divAssign(2);
+  refractionCoords.assign(vec2$2(refractionCoords.x, refractionCoords.y.oneMinus()));
+  refractionCoords.assign(refractionCoords.clamp(1e-3, 0.999));
+  return refractionCoords;
+});
+class TransmissionLightingModel extends PhysicalLightingModel {
+  _bufferTex;
+  _chromaticAberration;
+  _anisotropicBlur;
+  _timeUniform;
+  _distortion;
+  _distortionScale;
+  _temporalDistortion;
+  _samples;
+  _debugMode;
+  constructor(options, transmissionUniforms) {
+    super(
+      options.clearcoat ?? false,
+      options.sheen ?? false,
+      options.iridescence ?? false,
+      options.anisotropy ?? false,
+      true,
+      // transmission always true for our material
+      options.dispersion ?? false
+    );
+    this._bufferTex = transmissionUniforms.bufferTex;
+    this._chromaticAberration = transmissionUniforms.chromaticAberration;
+    this._anisotropicBlur = transmissionUniforms.anisotropicBlur;
+    this._timeUniform = transmissionUniforms.timeUniform;
+    this._distortion = transmissionUniforms.distortion;
+    this._distortionScale = transmissionUniforms.distortionScale;
+    this._temporalDistortion = transmissionUniforms.temporalDistortion;
+    this._samples = transmissionUniforms.samples;
+    this._debugMode = transmissionUniforms.debugMode;
+  }
+  start(builder) {
+    if (this.clearcoat === true) {
+      this.clearcoatRadiance = vec3().toVar("clearcoatRadiance");
+      this.clearcoatSpecularDirect = vec3().toVar("clearcoatSpecularDirect");
+      this.clearcoatSpecularIndirect = vec3().toVar("clearcoatSpecularIndirect");
+    }
+    if (this.sheen === true) {
+      this.sheenSpecularDirect = vec3().toVar("sheenSpecularDirect");
+      this.sheenSpecularIndirect = vec3().toVar("sheenSpecularIndirect");
+    }
+    if (this.transmission === true) {
+      const position = positionWorld;
+      const v = normalize(cameraPosition.sub(positionWorld));
+      const n = normalWorld;
+      const context = builder.context;
+      const bufferTex = this._bufferTex;
+      const chromaticAberrationUniform = this._chromaticAberration;
+      const anisotropicBlurUniform = this._anisotropicBlur;
+      const timeUniform = this._timeUniform;
+      const distortionUniform = this._distortion;
+      const distortionScaleUniform = this._distortionScale;
+      const temporalDistortionUniform = this._temporalDistortion;
+      const sampleCount = this._samples;
+      const debugModeUniform = this._debugMode;
+      const getCustomTransmission = Fn(() => {
+        const transmissionAccum = vec3(0).toVar("transmissionAccum");
+        const fragCoord = screenCoordinate.xy;
+        const runningSeed = float(0).toVar("runningSeed");
+        const randomCoords = rand(runningSeed, fragCoord);
+        runningSeed.addAssign(1);
+        const temporalOffset = vec3(timeUniform, timeUniform.negate(), timeUniform.negate()).mul(
+          temporalDistortionUniform
+        );
+        const noiseInput = position.mul(distortionScaleUniform).add(temporalOffset);
+        const distortionNormal = select(
+          distortionUniform.greaterThan(0),
+          mx_fractal_noise_vec3(noiseInput, int(4), float(2), float(0.5)).mul(distortionUniform),
+          vec3(0)
+        );
+        const thicknessSmear = thickness.mul(max(pow(roughness, 0.33), anisotropicBlurUniform));
+        Loop(sampleCount, ({ i }) => {
+          const fi = float(i);
+          const progress = fi.add(randomCoords).div(float(sampleCount));
+          const randX = rand(runningSeed, fragCoord).sub(0.5);
+          runningSeed.addAssign(1);
+          const randY = rand(runningSeed, fragCoord).sub(0.5);
+          runningSeed.addAssign(1);
+          const randZ = rand(runningSeed, fragCoord).sub(0.5);
+          runningSeed.addAssign(1);
+          const randW = rand(runningSeed, fragCoord);
+          runningSeed.addAssign(1);
+          const randomDir = normalize(vec3(randX, randY, randZ)).mul(pow(randW, 0.33));
+          const sampleNorm = normalize(n.add(roughness.mul(roughness).mul(2).mul(randomDir)).add(distortionNormal));
+          const sampleThickness = thickness.add(thicknessSmear.mul(progress));
+          const iorR = ior;
+          const iorG = ior.mul(float(1).add(chromaticAberrationUniform.mul(progress)));
+          const iorB = ior.mul(float(1).add(chromaticAberrationUniform.mul(2).mul(progress)));
+          const uvR = getRefractionUV(sampleNorm, v, iorR, sampleThickness, position);
+          const uvG = getRefractionUV(sampleNorm, v, iorG, sampleThickness, position);
+          const uvB = getRefractionUV(sampleNorm, v, iorB, sampleThickness, position);
+          const sampleR = texture(bufferTex, uvR);
+          const sampleG = texture(bufferTex, uvG);
+          const sampleB = texture(bufferTex, uvB);
+          transmissionAccum.x.addAssign(sampleR.r);
+          transmissionAccum.y.addAssign(sampleG.g);
+          transmissionAccum.z.addAssign(sampleB.b);
+        });
+        const avgTransmission = transmissionAccum.div(float(sampleCount));
+        const debugUV = getRefractionUV(n, v, ior, thickness, position);
+        const debugNdotV = n.dot(v);
+        const isNeg = debugNdotV.lessThan(0);
+        const sampleUVFlipped = vec2$2(screenUV.x, screenUV.y.oneMinus()).clamp(1e-3, 0.999);
+        const directSampleFlipped = texture(bufferTex, sampleUVFlipped);
+        const testRay = getVolumeTransmissionRay(n, v, thickness, ior);
+        const rayLen = length(testRay);
+        const manualUV = screenCoordinate.xy.div(screenSize);
+        const noFlipUV = screenUV.clamp(1e-3, 0.999);
+        const flippedUV = vec2$2(screenUV.x, screenUV.y.oneMinus()).clamp(1e-3, 0.999);
+        const useFlipped = screenUV.x.greaterThan(0.5);
+        const splitSampleUV = select(useFlipped, flippedUV, noFlipUV);
+        const splitSample = texture(bufferTex, splitSampleUV);
+        const directSampleNoFlip = texture(bufferTex, screenUV.clamp(1e-3, 0.999));
+        const centerSample = texture(bufferTex, vec2$2(0.5, 0.5));
+        const transmissionRayDbg = getVolumeTransmissionRay(n, v, thickness, ior);
+        const refractedRayExitDbg = position.add(transmissionRayDbg);
+        const ndcPosDbg = cameraProjectionMatrix.mul(cameraViewMatrix.mul(vec4(refractedRayExitDbg, 1)));
+        const safeWDbg = max(ndcPosDbg.w, float(1e-3));
+        const rawCoordsDbg = vec2$2(ndcPosDbg.xy.div(safeWDbg)).toVar();
+        rawCoordsDbg.addAssign(1);
+        rawCoordsDbg.divAssign(2);
+        rawCoordsDbg.assign(vec2$2(rawCoordsDbg.x, rawCoordsDbg.y.oneMinus()));
+        const outOfRange = rawCoordsDbg.x.lessThan(0).or(rawCoordsDbg.x.greaterThan(1)).or(rawCoordsDbg.y.lessThan(0)).or(rawCoordsDbg.y.greaterThan(1));
+        const clipPosDbg = cameraProjectionMatrix.mul(cameraViewMatrix.mul(vec4(position, 1)));
+        const safeWDbg2 = max(clipPosDbg.w, float(1e-3));
+        const projUVDbg = vec2$2(clipPosDbg.xy.div(safeWDbg2)).toVar();
+        projUVDbg.addAssign(1);
+        projUVDbg.divAssign(2);
+        projUVDbg.assign(vec2$2(projUVDbg.x, projUVDbg.y.oneMinus()));
+        projUVDbg.assign(projUVDbg.clamp(1e-3, 0.999));
+        const projectedSample = texture(bufferTex, projUVDbg);
+        const wNorm = clipPosDbg.w.div(10).add(0.5).clamp(0, 1);
+        const isBehind = clipPosDbg.w.lessThan(0);
+        const rawNdcX = clipPosDbg.x.div(safeWDbg2);
+        const rawNdcY = clipPosDbg.y.div(safeWDbg2);
+        const result = vec4(0, 0, 0, 1).toVar();
+        result.assign(
+          select(
+            debugModeUniform.equal(1),
+            vec4(avgTransmission, float(1)),
+            select(
+              debugModeUniform.equal(2),
+              vec4(debugUV.x, debugUV.y, float(0), float(1)),
+              select(
+                debugModeUniform.equal(3),
+                vec4(
+                  select(isNeg, debugNdotV.abs(), float(0)),
+                  select(isNeg, float(0), debugNdotV),
+                  float(0),
+                  float(1)
+                ),
+                select(
+                  debugModeUniform.equal(4),
+                  vec4(v.mul(0.5).add(0.5), float(1)),
+                  select(
+                    debugModeUniform.equal(5),
+                    vec4(n.mul(0.5).add(0.5), float(1)),
+                    select(
+                      debugModeUniform.equal(6),
+                      vec4(directSampleFlipped.rgb, float(1)),
+                      select(
+                        debugModeUniform.equal(7),
+                        vec4(rayLen, rayLen, rayLen, float(1)),
+                        select(
+                          debugModeUniform.equal(8),
+                          vec4(screenUV.x, screenUV.y, float(0), float(1)),
+                          select(
+                            debugModeUniform.equal(9),
+                            vec4(screenSize.x.div(2e3), screenSize.y.div(2e3), float(0), float(1)),
+                            select(
+                              debugModeUniform.equal(10),
+                              vec4(manualUV.x, manualUV.y, float(0), float(1)),
+                              select(
+                                debugModeUniform.equal(11),
+                                vec4(splitSample.rgb, float(1)),
+                                select(
+                                  debugModeUniform.equal(12),
+                                  vec4(directSampleNoFlip.rgb, float(1)),
+                                  select(
+                                    debugModeUniform.equal(13),
+                                    vec4(
+                                      select(outOfRange, float(1), float(0)),
+                                      rawCoordsDbg.x.clamp(0, 1),
+                                      rawCoordsDbg.y.clamp(0, 1),
+                                      float(1)
+                                    ),
+                                    select(
+                                      debugModeUniform.equal(14),
+                                      vec4(
+                                        select(isBehind, float(1), float(0)),
+                                        wNorm,
+                                        select(isBehind, float(0), float(1)),
+                                        float(1)
+                                      ),
+                                      select(
+                                        debugModeUniform.equal(15),
+                                        vec4(centerSample.rgb, float(1)),
+                                        select(
+                                          debugModeUniform.equal(16),
+                                          vec4(projectedSample.rgb, float(1)),
+                                          select(
+                                            debugModeUniform.equal(17),
+                                            // Raw NDC as color: map [-1,1] to [0,1]
+                                            vec4(rawNdcX.add(1).div(2), rawNdcY.add(1).div(2), float(0.5), float(1)),
+                                            select(
+                                              debugModeUniform.equal(18),
+                                              // Solid magenta - if black here, shader isn't running
+                                              vec4(1, 0, 1, 1),
+                                              select(
+                                                debugModeUniform.equal(19),
+                                                // Tinted FBO sample: mix sample with UV color
+                                                vec4(
+                                                  directSampleFlipped.r.add(screenUV.x.mul(0.3)),
+                                                  directSampleFlipped.g.add(screenUV.y.mul(0.3)),
+                                                  directSampleFlipped.b,
+                                                  float(1)
+                                                ),
+                                                vec4(0, 0, 0, 1)
+                                                // Placeholder for mode 0
+                                              )
+                                            )
+                                          )
+                                        )
+                                      )
+                                    )
+                                  )
+                                )
+                              )
+                            )
+                          )
+                        )
+                      )
+                    )
+                  )
+                )
+              )
+            )
+          )
+        );
+        const attenuated = applyVolumeAttenuation(avgTransmission, thickness, attenuationColor, attenuationDistance);
+        const NdotV = n.dot(v).abs().clamp(1e-3, 1);
+        const glassF0 = vec3(0.04);
+        const brdf = EnvironmentBRDF({ dotNV: NdotV, specularColor: glassF0, specularF90: float(1), roughness });
+        const transmissionResult = brdf.oneMinus().mul(attenuated).mul(diffuseColor.rgb);
+        const normalOutput = vec4(transmissionResult, float(1));
+        return select(debugModeUniform.greaterThan(0), result, normalOutput);
+      });
+      context.backdrop = getCustomTransmission();
+      context.backdropAlpha = transmission;
+      diffuseColor.a.mulAssign(mix(1, context.backdrop.a, transmission));
+    }
   }
-);
+}
 class MeshTransmissionMaterialImpl extends MeshPhysicalNodeMaterial {
-  //* Private Uniform Nodes --
+  // Custom uniforms
   _chromaticAberration;
   _anisotropicBlur;
   _time;
@@ -854,13 +1458,13 @@ class MeshTransmissionMaterialImpl extends MeshPhysicalNodeMaterial {
   _distortionScale;
   _temporalDistortion;
   _buffer;
+  // Texture node
   _transmissionValue;
-  _attenuationDistance;
-  _attenuationColor;
-  _samples;
-  _transmissionSampler;
+  _debugMode;
   /** Type flag for identification */
   isMeshTransmissionMaterial = true;
+  _samples;
+  _transmissionSampler;
   constructor(samples = 6, transmissionSampler = false) {
     super();
     this._samples = samples;
@@ -871,179 +1475,106 @@ class MeshTransmissionMaterialImpl extends MeshPhysicalNodeMaterial {
     this._distortion = uniform(0);
     this._distortionScale = uniform(0.5);
     this._temporalDistortion = uniform(0);
-    this._buffer = uniformTexture(new THREE.Texture());
+    this._debugMode = uniform(0);
+    const placeholderTexture = new THREE.DataTexture(new Uint8Array([255, 255, 255, 255]), 1, 1);
+    placeholderTexture.needsUpdate = true;
+    this._buffer = uniformTexture(placeholderTexture);
     this._transmissionValue = uniform(1);
-    this._attenuationDistance = uniform(Infinity);
-    this._attenuationColor = uniform(new THREE.Color("white"));
-    this.transmission = transmissionSampler ? 1 : 0;
+    this.transmission = transmissionSampler ? 1 : 1e-3;
     this.roughness = 0;
     this.thickness = 0;
-    this.envMapIntensity = 1;
-    if (!transmissionSampler) {
-      this._buildTransmissionShader();
-    }
-  }
-  _buildTransmissionShader() {
-    const chromaticAberrationUniform = this._chromaticAberration;
-    const anisotropicBlurUniform = this._anisotropicBlur;
-    const timeUniform = this._time;
-    const distortionUniform = this._distortion;
-    const distortionScaleUniform = this._distortionScale;
-    const temporalDistortionUniform = this._temporalDistortion;
-    const bufferTex = this._buffer;
-    const transmissionUniform = this._transmissionValue;
-    const attenuationDistanceUniform = this._attenuationDistance;
-    const attenuationColorUniform = this._attenuationColor;
-    const samples = this._samples;
-    const materialRef = this;
-    this.outputNode = Fn(() => {
-      const pos = positionWorld;
-      const fragCoord = screenCoordinate.xy;
-      const v = normalize(cameraPosition.sub(pos));
-      const n = normalWorld;
-      const transmission = vec3(0, 0, 0).toVar();
-      const runningSeed = float(0).toVar();
-      const randomCoords = rand({ seed: runningSeed, fragCoord });
-      runningSeed.addAssign(1);
-      const roughnessFactor = float(materialRef.roughness).toVar();
-      const thicknessVal = float(materialRef.thickness);
-      const iorVal = float(materialRef.ior);
-      const thicknessSmear = thicknessVal.mul(max(pow(roughnessFactor, 0.33), anisotropicBlurUniform));
-      const distortionNormal = vec3(0, 0, 0).toVar();
-      const distortEnabled = distortionUniform.greaterThan(0);
-      const temporalOffset = vec3(timeUniform, timeUniform.negate(), timeUniform.negate()).mul(
-        temporalDistortionUniform
-      );
-      const noiseInput = pos.mul(distortionScaleUniform).add(temporalOffset);
-      const noiseResult = mx_fractal_noise_vec3(noiseInput, int(4), float(2), float(0.5));
-      const computedDistortion = noiseResult.mul(distortionUniform);
-      distortionNormal.assign(select(distortEnabled, computedDistortion, vec3(0)));
-      Loop(samples, ({ i }) => {
-        const fi = float(i);
-        const randX = rand({ seed: runningSeed, fragCoord }).sub(0.5);
-        runningSeed.addAssign(1);
-        const randY = rand({ seed: runningSeed, fragCoord }).sub(0.5);
-        runningSeed.addAssign(1);
-        const randZ = rand({ seed: runningSeed, fragCoord }).sub(0.5);
-        runningSeed.addAssign(1);
-        const randW = rand({ seed: runningSeed, fragCoord });
-        runningSeed.addAssign(1);
-        const randomDir = normalize(vec3(randX, randY, randZ)).mul(pow(randW, 0.33));
-        const sampleNorm = normalize(
-          n.add(roughnessFactor.mul(roughnessFactor).mul(2).mul(randomDir)).add(distortionNormal)
-        );
-        const refractionDir = refract(v.negate(), sampleNorm, float(1).div(iorVal));
-        const sampleThickness = thicknessVal.add(thicknessSmear.mul(fi.add(randomCoords)).div(float(samples)));
-        const refractedExit = pos.add(refractionDir.mul(sampleThickness));
-        const clipPos = cameraProjectionMatrix.mul(cameraViewMatrix.mul(vec4(refractedExit, 1)));
-        const ndcPos = clipPos.xyz.div(clipPos.w);
-        const refractionUV = ndcPos.xy.mul(0.5).add(0.5);
-        const sampledColor = texture(bufferTex, refractionUV);
-        const transmissionR = sampledColor.r;
-        const chromaticOffsetG = chromaticAberrationUniform.mul(fi.add(randomCoords)).div(float(samples));
-        const iorG = iorVal.mul(float(1).add(chromaticOffsetG));
-        const refractionDirG = refract(v.negate(), sampleNorm, float(1).div(iorG));
-        const refractedExitG = pos.add(refractionDirG.mul(sampleThickness));
-        const clipPosG = cameraProjectionMatrix.mul(cameraViewMatrix.mul(vec4(refractedExitG, 1)));
-        const ndcPosG = clipPosG.xyz.div(clipPosG.w);
-        const refractionUVG = ndcPosG.xy.mul(0.5).add(0.5);
-        const transmissionG = texture(bufferTex, refractionUVG).g;
-        const chromaticOffsetB = chromaticAberrationUniform.mul(2).mul(fi.add(randomCoords)).div(float(samples));
-        const iorB = iorVal.mul(float(1).add(chromaticOffsetB));
-        const refractionDirB = refract(v.negate(), sampleNorm, float(1).div(iorB));
-        const refractedExitB = pos.add(refractionDirB.mul(sampleThickness));
-        const clipPosB = cameraProjectionMatrix.mul(cameraViewMatrix.mul(vec4(refractedExitB, 1)));
-        const ndcPosB = clipPosB.xyz.div(clipPosB.w);
-        const refractionUVB = ndcPosB.xy.mul(0.5).add(0.5);
-        const transmissionB = texture(bufferTex, refractionUVB).b;
-        transmission.x.addAssign(transmissionR);
-        transmission.y.addAssign(transmissionG);
-        transmission.z.addAssign(transmissionB);
-      });
-      const avgTransmission = transmission.div(float(samples));
-      const transmissionRayLength = thicknessVal;
-      const attenuatedTransmission = applyVolumeAttenuation({
-        radiance: avgTransmission,
-        transmissionDistance: transmissionRayLength,
-        attenuationColor: attenuationColorUniform,
-        attenuationDistance: attenuationDistanceUniform
-      });
-      const baseDiffuse = diffuseColor.rgb;
-      const finalColor = mix(baseDiffuse, attenuatedTransmission, transmissionUniform);
-      return vec4(finalColor, diffuseColor.a);
-    })();
+    this.ior = 1.5;
+    this.transparent = true;
+  }
+  setupLightingModel() {
+    if (this._transmissionSampler) {
+      return super.setupLightingModel();
+    }
+    return new TransmissionLightingModel(
+      {
+        clearcoat: this.useClearcoat,
+        sheen: this.useSheen,
+        iridescence: this.useIridescence,
+        anisotropy: this.useAnisotropy,
+        dispersion: this.useDispersion
+      },
+      {
+        bufferTex: this._buffer,
+        chromaticAberration: this._chromaticAberration,
+        anisotropicBlur: this._anisotropicBlur,
+        timeUniform: this._time,
+        distortion: this._distortion,
+        distortionScale: this._distortionScale,
+        temporalDistortion: this._temporalDistortion,
+        samples: this._samples,
+        debugMode: this._debugMode
+      }
+    );
+  }
+  //* Property Accessors ==============================
+  get time() {
+    return this._time.value;
+  }
+  set time(v) {
+    this._time.value = v;
+  }
+  get buffer() {
+    return this._buffer.value;
+  }
+  set buffer(v) {
+    this._buffer.value = v;
   }
-  //* Uniform Accessors ==============================
-  /** Chromatic aberration strength, default: 0.05 */
   get chromaticAberration() {
     return this._chromaticAberration.value;
   }
   set chromaticAberration(v) {
     this._chromaticAberration.value = v;
   }
-  /** Anisotropic blur amount, default: 0.1 */
   get anisotropicBlur() {
     return this._anisotropicBlur.value;
   }
   set anisotropicBlur(v) {
     this._anisotropicBlur.value = v;
   }
-  /** Animation time (set from useFrame), default: 0 */
-  get time() {
-    return this._time.value;
-  }
-  set time(v) {
-    this._time.value = v;
-  }
-  /** Noise distortion amount, default: 0 */
   get distortion() {
     return this._distortion.value;
   }
   set distortion(v) {
     this._distortion.value = v;
   }
-  /** Distortion noise scale, default: 0.5 */
   get distortionScale() {
     return this._distortionScale.value;
   }
   set distortionScale(v) {
     this._distortionScale.value = v;
   }
-  /** Temporal distortion speed, default: 0 */
   get temporalDistortion() {
     return this._temporalDistortion.value;
   }
   set temporalDistortion(v) {
     this._temporalDistortion.value = v;
   }
-  /** Scene buffer texture for refraction sampling */
-  get buffer() {
-    return this._buffer.value;
+  get debugMode() {
+    return this._debugMode.value;
   }
-  set buffer(v) {
-    this._buffer.value = v ?? new THREE.Texture();
+  set debugMode(v) {
+    this._debugMode.value = v;
   }
-  /** Internal transmission value (use transmission prop instead) */
+  // Expose _transmission for legacy compatibility
+  // This stores the user's intended transmission value, separate from the base class's transmission
+  // which is kept at 0.001 to enable the transmission code path without triggering Three's internal rendering
   get _transmission() {
+    if (!this._transmissionValue) {
+      this._transmissionValue = uniform(1);
+    }
     return this._transmissionValue.value;
   }
   set _transmission(v) {
+    if (!this._transmissionValue) {
+      this._transmissionValue = uniform(1);
+    }
     this._transmissionValue.value = v;
   }
-  /** Attenuation distance for Beer's law absorption */
-  get attenuationDistance() {
-    return this._attenuationDistance.value;
-  }
-  set attenuationDistance(v) {
-    this._attenuationDistance.value = v;
-  }
-  /** Attenuation color for Beer's law absorption */
-  get attenuationColor() {
-    return this._attenuationColor.value;
-  }
-  set attenuationColor(v) {
-    this._attenuationColor.value = v;
-  }
 }
 const MeshTransmissionMaterial = /* @__PURE__ */ React.forwardRef(
   ({
@@ -1051,8 +1582,8 @@ const MeshTransmissionMaterial = /* @__PURE__ */ React.forwardRef(
     transmissionSampler = false,
     backside = false,
     side = THREE.FrontSide,
-    transmission = 1,
-    thickness = 0,
+    transmission: transmission2 = 1,
+    thickness: thickness2 = 0,
     backsideThickness = 0,
     backsideEnvMapIntensity = 1,
     samples = 10,
@@ -1061,48 +1592,111 @@ const MeshTransmissionMaterial = /* @__PURE__ */ React.forwardRef(
     background,
     anisotropy,
     anisotropicBlur,
+    debugMode = 0,
     ...props
   }, fref) => {
     extend({ MeshTransmissionMaterial: MeshTransmissionMaterialImpl });
     const ref = React.useRef(null);
-    const [discardMaterial] = React.useState(() => DiscardMaterial);
-    const fboBack = useFBO(backsideResolution || resolution);
-    const fboMain = useFBO(resolution);
+    const backsideMaterialRef = React.useRef(null);
+    const { size, viewport } = useThree();
+    const screenWidth = size.width * viewport.dpr;
+    const screenHeight = size.height * viewport.dpr;
+    const fboWidth = resolution || screenWidth;
+    const fboHeight = resolution ? Math.round(resolution / screenWidth * screenHeight) : screenHeight;
+    const fboBack = useFBO(
+      backsideResolution || fboWidth,
+      backsideResolution ? Math.round(backsideResolution / screenWidth * screenHeight) : fboHeight
+    );
+    const fboMain = useFBO(fboWidth, fboHeight);
+    React.useEffect(() => {
+      if (backside && ref.current && !backsideMaterialRef.current) {
+        backsideMaterialRef.current = new MeshTransmissionMaterialImpl(samples, transmissionSampler);
+        backsideMaterialRef.current.buffer = fboBack.texture;
+      }
+      return () => {
+        if (backsideMaterialRef.current) {
+          backsideMaterialRef.current.dispose();
+          backsideMaterialRef.current = null;
+        }
+      };
+    }, [backside, samples, transmissionSampler]);
+    React.useEffect(() => {
+      if (backsideMaterialRef.current) {
+        backsideMaterialRef.current.buffer = fboBack.texture;
+      }
+    }, [fboBack.texture]);
     let oldBg;
     let oldEnvMapIntensity;
     let oldTone;
     let parent;
     useFrame((state) => {
       ref.current.time = state.elapsed;
+      const renderer = state.renderer;
+      if (backsideMaterialRef.current) {
+        backsideMaterialRef.current.time = state.elapsed;
+      }
       if (ref.current.buffer === fboMain.texture && !transmissionSampler) {
         parent = ref.current.__r3f?.parent?.object;
-        if (parent) {
-          oldTone = state.gl.toneMapping;
-          oldBg = state.scene.background;
-          oldEnvMapIntensity = ref.current.envMapIntensity ?? 1;
-          state.gl.toneMapping = THREE.NoToneMapping;
-          if (background) state.scene.background = background;
-          parent.material = discardMaterial;
-          if (backside) {
-            state.gl.setRenderTarget(fboBack);
-            state.gl.render(state.scene, state.camera);
-            parent.material = ref.current;
-            ref.current.buffer = fboBack.texture;
-            ref.current.thickness = backsideThickness;
-            ref.current.side = THREE.BackSide;
-            ref.current.envMapIntensity = backsideEnvMapIntensity;
+        if (!parent) return;
+        oldTone = renderer.toneMapping;
+        oldBg = state.scene.background;
+        oldEnvMapIntensity = ref.current.envMapIntensity;
+        renderer.toneMapping = THREE.NoToneMapping;
+        if (background)
+          state.scene.background = background;
+        parent.material = DiscardMaterial;
+        const camera = state.camera;
+        const isOrtho = camera.isOrthographicCamera;
+        let oldLeft, oldRight, oldTop, oldBottom;
+        if (isOrtho) {
+          oldLeft = camera.left;
+          oldRight = camera.right;
+          oldTop = camera.top;
+          oldBottom = camera.bottom;
+          const fboAspect = fboWidth / fboHeight;
+          const screenAspect = screenWidth / screenHeight;
+          if (Math.abs(fboAspect - screenAspect) > 1e-3) {
+            const viewHeight = oldTop - oldBottom;
+            const newHalfWidth = viewHeight * fboAspect / 2;
+            const centerX = (oldLeft + oldRight) / 2;
+            camera.left = centerX - newHalfWidth;
+            camera.right = centerX + newHalfWidth;
+            camera.updateProjectionMatrix();
           }
-          state.gl.setRenderTarget(fboMain);
-          state.gl.render(state.scene, state.camera);
+        }
+        if (backside && backsideMaterialRef.current) {
+          renderer.setRenderTarget(fboBack);
+          renderer.clear();
+          state.renderer.render(state.scene, state.camera);
+          parent.material = backsideMaterialRef.current;
+          backsideMaterialRef.current.thickness = backsideThickness;
+          backsideMaterialRef.current.side = THREE.BackSide;
+          backsideMaterialRef.current.envMapIntensity = backsideEnvMapIntensity;
+          renderer.setRenderTarget(fboMain);
+          renderer.clear();
+          state.renderer.render(state.scene, state.camera);
           parent.material = ref.current;
-          ref.current.thickness = thickness;
+          ref.current.thickness = thickness2;
           ref.current.side = side;
-          ref.current.buffer = fboMain.texture;
           ref.current.envMapIntensity = oldEnvMapIntensity;
-          state.scene.background = oldBg;
-          state.gl.setRenderTarget(null);
-          state.gl.toneMapping = oldTone;
+        } else {
+          renderer.setRenderTarget(fboMain);
+          renderer.clear();
+          state.renderer.render(state.scene, state.camera);
+          parent.material = ref.current;
+          ref.current.thickness = thickness2;
+          ref.current.side = side;
+        }
+        if (isOrtho && Math.abs(fboWidth / fboHeight - screenWidth / screenHeight) > 1e-3) {
+          camera.left = oldLeft;
+          camera.right = oldRight;
+          camera.top = oldTop;
+          camera.bottom = oldBottom;
+          camera.updateProjectionMatrix();
         }
+        state.scene.background = oldBg;
+        renderer.setRenderTarget(null);
+        renderer.toneMapping = oldTone;
       }
     });
     React.useImperativeHandle(fref, () => ref.current, []);
@@ -1113,11 +1707,11 @@ const MeshTransmissionMaterial = /* @__PURE__ */ React.forwardRef(
         ref,
         ...props,
         buffer: buffer || fboMain.texture,
-        _transmission: transmission,
-        anisotropicBlur: anisotropicBlur ?? anisotropy ?? 0.1,
-        transmission: transmissionSampler ? transmission : 0,
-        thickness,
-        side
+        _transmission: transmission2,
+        anisotropicBlur: anisotropicBlur ?? anisotropy,
+        thickness: thickness2,
+        side,
+        debugMode
       }
     );
   }
@@ -1368,25 +1962,16 @@ const MeshReflectorMaterial = /* @__PURE__ */ React.forwardRef(
   }
 );
 
-const fresnelEffect = /* @__PURE__ */ Fn((inputs) => {
-  const [viewDir, normal, power] = inputs;
+const fresnelEffect = /* @__PURE__ */ Fn(([viewDir, normal, power]) => {
   const NdotV = float(1).add(dot(viewDir, normal));
   return pow(NdotV, power);
 });
-const equirectUv = /* @__PURE__ */ Fn((inputs) => {
-  const [direction] = inputs;
-  const dir = normalize(direction);
-  const u = float(0.5).add(dir.z.atan2(dir.x).div(float(2).mul(Math.PI)));
-  const v = float(0.5).sub(dir.y.asin().div(Math.PI));
-  return vec2$2(u, v);
-});
-const approximateRefraction = /* @__PURE__ */ Fn((inputs) => {
-  const [rayDir, normal, iorValue, bounceCount, thickness] = inputs;
+const approximateRefraction = /* @__PURE__ */ Fn(([rayDir, normal, iorValue, bounceCount]) => {
   const entryDir = refract(rayDir, normal, float(1).div(iorValue)).toVar();
   const entryValid = length(entryDir).greaterThan(0);
   const exitNormal = normal.negate().toVar();
   const currentDir = entryDir.toVar();
-  Loop(int(bounceCount), ({ i }) => {
+  Loop({ start: 0, end: int(bounceCount), type: "int" }, ({ i }) => {
     const fi = float(i).add(1);
     const exitDir = refract(currentDir, exitNormal, iorValue);
     const canExit = length(exitDir).greaterThan(0);
@@ -1405,8 +1990,6 @@ class MeshRefractionMaterialImpl extends MeshPhysicalNodeMaterial {
   _aberrationStrength;
   _color;
   _opacityValue;
-  _resolution;
-  _thickness;
   _fastChroma;
   /** Type flag for identification */
   isMeshRefractionMaterial = true;
@@ -1420,8 +2003,6 @@ class MeshRefractionMaterialImpl extends MeshPhysicalNodeMaterial {
     this._aberrationStrength = uniform(0.01);
     this._color = uniform(new THREE.Color("white"));
     this._opacityValue = uniform(1);
-    this._resolution = uniform(new THREE.Vector2(1, 1));
-    this._thickness = uniform(1);
     this.transparent = true;
     this.side = THREE.FrontSide;
     this._buildRefractionShader();
@@ -1434,20 +2015,13 @@ class MeshRefractionMaterialImpl extends MeshPhysicalNodeMaterial {
     const aberrationUniform = this._aberrationStrength;
     const colorUniform = this._color;
     const opacityUniform = this._opacityValue;
-    const thicknessUniform = this._thickness;
     const fastChroma = this._fastChroma;
     this.outputNode = Fn(() => {
       const worldPos = positionWorld;
       const worldNormal = normalize(normalWorld);
       const viewDir = normalize(worldPos.sub(cameraPosition));
       const baseColor = colorUniform.toVar();
-      const refractedDirG = approximateRefraction(
-        viewDir,
-        worldNormal,
-        max(iorUniform, 1),
-        bouncesUniform,
-        thicknessUniform
-      );
+      const refractedDirG = approximateRefraction(viewDir, worldNormal, max(iorUniform, 1), bouncesUniform);
       const aberration = aberrationUniform;
       const refractedDirR = vec3(0, 0, 0).toVar();
       const refractedDirB = vec3(0, 0, 0).toVar();
@@ -1461,8 +2035,7 @@ class MeshRefractionMaterialImpl extends MeshPhysicalNodeMaterial {
             viewDir,
             worldNormal,
             max(iorUniform.mul(float(1).sub(aberration)), 1),
-            bouncesUniform,
-            thicknessUniform
+            bouncesUniform
           )
         );
         refractedDirB.assign(
@@ -1470,14 +2043,13 @@ class MeshRefractionMaterialImpl extends MeshPhysicalNodeMaterial {
             viewDir,
             worldNormal,
             max(iorUniform.mul(float(1).add(aberration)), 1),
-            bouncesUniform,
-            thicknessUniform
+            bouncesUniform
           )
         );
       }
-      const uvR = equirectUv(refractedDirR);
-      const uvG = equirectUv(refractedDirG);
-      const uvB = equirectUv(refractedDirB);
+      const uvR = equirectUV(refractedDirR);
+      const uvG = equirectUV(refractedDirG);
+      const uvB = equirectUV(refractedDirB);
       const envColorR = texture(envMapTex, uvR).r;
       const envColorG = texture(envMapTex, uvG).g;
       const envColorB = texture(envMapTex, uvB).b;
@@ -1541,20 +2113,6 @@ class MeshRefractionMaterialImpl extends MeshPhysicalNodeMaterial {
   set opacity(v) {
     this._opacityValue.value = v;
   }
-  /** Resolution for screen-space calculations */
-  get resolution() {
-    return this._resolution.value;
-  }
-  set resolution(v) {
-    this._resolution.value = v;
-  }
-  /** Approximate thickness for refraction calculations */
-  get thickness() {
-    return this._thickness.value;
-  }
-  set thickness(v) {
-    this._thickness.value = v;
-  }
 }
 const MeshRefractionMaterial = /* @__PURE__ */ React.forwardRef(
   ({
@@ -1570,12 +2128,6 @@ const MeshRefractionMaterial = /* @__PURE__ */ React.forwardRef(
   }, fref) => {
     extend({ MeshRefractionMaterial: MeshRefractionMaterialImpl });
     const ref = React.useRef(null);
-    const size = useThree((state) => state.size);
-    React.useEffect(() => {
-      if (ref.current) {
-        ref.current.resolution = new THREE.Vector2(size.width, size.height);
-      }
-    }, [size]);
     React.useEffect(() => {
       if (ref.current && envMap) {
         ref.current.envMap = envMap;
@@ -1827,10 +2379,10 @@ class PortalMaterialImpl extends MeshBasicNodeMaterial {
     this._blur.value = v;
   }
   get map() {
-    return this._map.value;
+    return this._map?.value;
   }
   set map(v) {
-    this._map.value = v ?? new THREE.Texture();
+    if (this._map) this._map.value = v ?? new THREE.Texture();
   }
   get sdf() {
     return this._sdf.value;
@@ -2610,11 +3162,11 @@ const RenderCubeTexture = /* @__PURE__ */ React.forwardRef(
         depthBuffer,
         generateMipmaps
       };
-      const fboA2 = new THREE.WebGLCubeRenderTarget(fboSize, settings);
+      const fboA2 = new CubeRenderTarget(fboSize, settings);
       fboA2.texture.isRenderTargetTexture = !flip;
       fboA2.texture.flipY = true;
       fboA2.texture.type = THREE.HalfFloatType;
-      const fboB2 = new THREE.WebGLCubeRenderTarget(fboSize, settings);
+      const fboB2 = new CubeRenderTarget(fboSize, settings);
       fboB2.texture.isRenderTargetTexture = !flip;
       fboB2.texture.flipY = true;
       fboB2.texture.type = THREE.HalfFloatType;
@@ -3064,7 +3616,7 @@ function useCubeCamera({ resolution = 256, near = 0.1, far = 1e3, envMap, fog }
   const gl = useThree(({ gl: gl2 }) => gl2);
   const scene = useThree(({ scene: scene2 }) => scene2);
   const fbo = useMemo(() => {
-    const fbo2 = new WebGLCubeRenderTarget(resolution);
+    const fbo2 = new CubeRenderTarget(resolution);
     fbo2.texture.type = HalfFloatType;
     return fbo2;
   }, [resolution]);
@@ -3363,11 +3915,11 @@ const DeviceOrientationControls = /* @__PURE__ */ React.forwardRef(
 );
 
 const initialModelPosition = /* @__PURE__ */ new THREE.Vector3();
-const mousePosition2D = /* @__PURE__ */ new THREE.Vector2();
 const mousePosition3D = /* @__PURE__ */ new THREE.Vector3();
 const dragOffset = /* @__PURE__ */ new THREE.Vector3();
 const dragPlaneNormal = /* @__PURE__ */ new THREE.Vector3();
 const dragPlane = /* @__PURE__ */ new THREE.Plane();
+const startPointerPos = /* @__PURE__ */ new THREE.Vector3();
 const DragControls = React.forwardRef(
   ({
     autoTransform = true,
@@ -3383,90 +3935,132 @@ const DragControls = React.forwardRef(
     ...props
   }, fRef) => {
     const defaultControls = useThree((state) => state.controls);
-    const { camera, size, raycaster, invalidate } = useThree();
+    const { camera, invalidate } = useThree();
     const ref = React.useRef(null);
-    const bind = useGesture(
-      {
-        onHover: ({ hovering }) => onHover && onHover(hovering ?? false),
-        onDragStart: ({ event }) => {
-          if (defaultControls) defaultControls.enabled = false;
-          const { point } = event;
-          ref.current.matrix.decompose(initialModelPosition, new THREE.Quaternion(), new THREE.Vector3());
-          mousePosition3D.copy(point);
-          dragOffset.copy(mousePosition3D).sub(initialModelPosition);
-          onDragStart && onDragStart(initialModelPosition);
-          invalidate();
-        },
-        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);
-          raycaster.setFromCamera(mousePosition2D, camera);
-          if (!axisLock) {
-            camera.getWorldDirection(dragPlaneNormal).negate();
-          } else {
-            switch (axisLock) {
-              case "x":
-                dragPlaneNormal.set(1, 0, 0);
-                break;
-              case "y":
-                dragPlaneNormal.set(0, 1, 0);
-                break;
-              case "z":
-                dragPlaneNormal.set(0, 0, 1);
-                break;
-            }
-          }
-          dragPlane.setFromNormalAndCoplanarPoint(dragPlaneNormal, mousePosition3D);
-          raycaster.ray.intersectPlane(dragPlane, mousePosition3D);
-          const previousLocalMatrix = ref.current.matrix.clone();
-          const previousWorldMatrix = ref.current.matrixWorld.clone();
-          const intendedNewPosition = new THREE.Vector3(
-            mousePosition3D.x - dragOffset.x,
-            mousePosition3D.y - dragOffset.y,
-            mousePosition3D.z - dragOffset.z
-          );
-          if (dragLimits) {
-            intendedNewPosition.x = dragLimits[0] ? Math.max(Math.min(intendedNewPosition.x, dragLimits[0][1]), dragLimits[0][0]) : intendedNewPosition.x;
-            intendedNewPosition.y = dragLimits[1] ? Math.max(Math.min(intendedNewPosition.y, dragLimits[1][1]), dragLimits[1][0]) : intendedNewPosition.y;
-            intendedNewPosition.z = dragLimits[2] ? Math.max(Math.min(intendedNewPosition.z, dragLimits[2][1]), dragLimits[2][0]) : intendedNewPosition.z;
-          }
-          if (autoTransform) {
-            ref.current.matrix.setPosition(intendedNewPosition);
-            const deltaLocalMatrix = ref.current.matrix.clone().multiply(previousLocalMatrix.invert());
-            const deltaWorldMatrix = ref.current.matrix.clone().multiply(previousWorldMatrix.invert());
-            onDrag && onDrag(ref.current.matrix, deltaLocalMatrix, ref.current.matrixWorld, deltaWorldMatrix);
-          } else {
-            const tempMatrix = new THREE.Matrix4().copy(ref.current.matrix);
-            tempMatrix.setPosition(intendedNewPosition);
-            const deltaLocalMatrix = tempMatrix.clone().multiply(previousLocalMatrix.invert());
-            const deltaWorldMatrix = tempMatrix.clone().multiply(previousWorldMatrix.invert());
-            onDrag && onDrag(tempMatrix, deltaLocalMatrix, ref.current.matrixWorld, deltaWorldMatrix);
+    const dragState = React.useRef({
+      active: false,
+      intentional: false,
+      // Has moved past threshold
+      pointerId: -1
+    });
+    const threshold = dragConfig?.threshold ?? 0;
+    const filterTaps = dragConfig?.filterTaps ?? true;
+    const handlePointerDown = React.useCallback(
+      (event) => {
+        event.stopPropagation();
+        event.target.setPointerCapture(event.pointerId);
+        dragState.current.active = true;
+        dragState.current.intentional = threshold === 0;
+        dragState.current.pointerId = event.pointerId;
+        if (defaultControls) defaultControls.enabled = false;
+        ref.current.matrix.decompose(initialModelPosition, new THREE.Quaternion(), new THREE.Vector3());
+        mousePosition3D.copy(event.point);
+        startPointerPos.copy(event.point);
+        dragOffset.copy(mousePosition3D).sub(initialModelPosition);
+        if (!axisLock) {
+          camera.getWorldDirection(dragPlaneNormal).negate();
+        } else {
+          switch (axisLock) {
+            case "x":
+              dragPlaneNormal.set(1, 0, 0);
+              break;
+            case "y":
+              dragPlaneNormal.set(0, 1, 0);
+              break;
+            case "z":
+              dragPlaneNormal.set(0, 0, 1);
+              break;
           }
-          invalidate();
-        },
-        onDragEnd: () => {
-          if (defaultControls) defaultControls.enabled = true;
-          onDragEnd && onDragEnd();
-          invalidate();
         }
+        dragPlane.setFromNormalAndCoplanarPoint(dragPlaneNormal, mousePosition3D);
+        if (dragState.current.intentional) {
+          onDragStart && onDragStart(initialModelPosition);
+        }
+        invalidate();
       },
-      {
-        drag: {
-          filterTaps: true,
-          threshold: 1,
-          ...typeof dragConfig === "object" ? dragConfig : {}
+      [defaultControls, camera, axisLock, threshold, onDragStart, invalidate]
+    );
+    const handlePointerMove = React.useCallback(
+      (event) => {
+        if (!dragState.current.active || event.pointerId !== dragState.current.pointerId) return;
+        const intersection = event.ray.intersectPlane(dragPlane, mousePosition3D);
+        if (!intersection) return;
+        if (!dragState.current.intentional) {
+          const distance = mousePosition3D.distanceTo(startPointerPos);
+          if (distance < threshold) return;
+          dragState.current.intentional = true;
+          onDragStart && onDragStart(initialModelPosition);
         }
-      }
+        const previousLocalMatrix = ref.current.matrix.clone();
+        const previousWorldMatrix = ref.current.matrixWorld.clone();
+        const intendedNewPosition = new THREE.Vector3(
+          mousePosition3D.x - dragOffset.x,
+          mousePosition3D.y - dragOffset.y,
+          mousePosition3D.z - dragOffset.z
+        );
+        if (dragLimits) {
+          intendedNewPosition.x = dragLimits[0] ? Math.max(Math.min(intendedNewPosition.x, dragLimits[0][1]), dragLimits[0][0]) : intendedNewPosition.x;
+          intendedNewPosition.y = dragLimits[1] ? Math.max(Math.min(intendedNewPosition.y, dragLimits[1][1]), dragLimits[1][0]) : intendedNewPosition.y;
+          intendedNewPosition.z = dragLimits[2] ? Math.max(Math.min(intendedNewPosition.z, dragLimits[2][1]), dragLimits[2][0]) : intendedNewPosition.z;
+        }
+        if (autoTransform) {
+          ref.current.matrix.setPosition(intendedNewPosition);
+          const deltaLocalMatrix = ref.current.matrix.clone().multiply(previousLocalMatrix.invert());
+          const deltaWorldMatrix = ref.current.matrix.clone().multiply(previousWorldMatrix.invert());
+          onDrag && onDrag(ref.current.matrix, deltaLocalMatrix, ref.current.matrixWorld, deltaWorldMatrix);
+        } else {
+          const tempMatrix = new THREE.Matrix4().copy(ref.current.matrix);
+          tempMatrix.setPosition(intendedNewPosition);
+          const deltaLocalMatrix = tempMatrix.clone().multiply(previousLocalMatrix.invert());
+          const deltaWorldMatrix = tempMatrix.clone().multiply(previousWorldMatrix.invert());
+          onDrag && onDrag(tempMatrix, deltaLocalMatrix, ref.current.matrixWorld, deltaWorldMatrix);
+        }
+        invalidate();
+      },
+      [autoTransform, dragLimits, threshold, onDragStart, onDrag, invalidate]
+    );
+    const handlePointerUp = React.useCallback(
+      (event) => {
+        if (!dragState.current.active || event.pointerId !== dragState.current.pointerId) return;
+        event.target.releasePointerCapture(event.pointerId);
+        const wasIntentional = dragState.current.intentional;
+        dragState.current.active = false;
+        dragState.current.intentional = false;
+        dragState.current.pointerId = -1;
+        if (defaultControls) defaultControls.enabled = true;
+        if (wasIntentional || !filterTaps) {
+          onDragEnd && onDragEnd();
+        }
+        invalidate();
+      },
+      [defaultControls, filterTaps, onDragEnd, invalidate]
     );
+    const handlePointerEnter = React.useCallback(() => {
+      onHover && onHover(true);
+    }, [onHover]);
+    const handlePointerLeave = React.useCallback(() => {
+      onHover && onHover(false);
+    }, [onHover]);
     React.useImperativeHandle(fRef, () => ref.current, []);
     React.useLayoutEffect(() => {
       if (!matrix) return;
       ref.current.matrix = matrix;
     }, [matrix]);
-    return /* @__PURE__ */ React.createElement("group", { ref, ...bind(), matrix, matrixAutoUpdate: false, ...props }, children);
+    return /* @__PURE__ */ React.createElement(
+      "group",
+      {
+        ref,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        matrix,
+        matrixAutoUpdate: false,
+        ...props
+      },
+      children
+    );
   }
 );
 
@@ -3584,7 +4178,7 @@ function KeyboardControls({ map, children, onChange, domElement }) {
       source.removeEventListener("keyup", upHandler);
       window.removeEventListener("blur", blurHandler);
     };
-  }, [domElement, key]);
+  }, [domElement, key, onChange]);
   return /* @__PURE__ */ React.createElement(context$8.Provider, { value: api, children });
 }
 function useKeyboardControls(sel) {
@@ -3606,20 +4200,28 @@ const MapControls = /* @__PURE__ */ React.forwardRef((props = { enableDamping: t
   const controls = React.useMemo(() => new MapControls$1(explCamera), [explCamera]);
   React.useEffect(() => {
     controls.connect(explDomElement);
+    return () => void controls.dispose();
+  }, [explDomElement, controls]);
+  React.useEffect(() => {
     const callback = (e) => {
       invalidate();
       if (onChange) onChange(e);
     };
+    const onStartCb = (e) => {
+      if (onStart) onStart(e);
+    };
+    const onEndCb = (e) => {
+      if (onEnd) onEnd(e);
+    };
     controls.addEventListener("change", callback);
-    if (onStart) controls.addEventListener("start", onStart);
-    if (onEnd) controls.addEventListener("end", onEnd);
+    controls.addEventListener("start", onStartCb);
+    controls.addEventListener("end", onEndCb);
     return () => {
-      controls.dispose();
+      controls.removeEventListener("start", onStartCb);
+      controls.removeEventListener("end", onEndCb);
       controls.removeEventListener("change", callback);
-      if (onStart) controls.removeEventListener("start", onStart);
-      if (onEnd) controls.removeEventListener("end", onEnd);
     };
-  }, [onChange, onStart, onEnd, controls, invalidate, explDomElement]);
+  }, [onChange, onStart, onEnd, controls, invalidate]);
   React.useEffect(() => {
     if (makeDefault) {
       const old = get().controls;
@@ -3627,7 +4229,9 @@ const MapControls = /* @__PURE__ */ React.forwardRef((props = { enableDamping: t
       return () => set({ controls: old });
     }
   }, [makeDefault, controls]);
-  useFrame(() => controls.update(), -1);
+  useFrame(() => {
+    if (controls.enabled) controls.update();
+  }, -1);
   return /* @__PURE__ */ React.createElement("primitive", { ref, object: controls, enableDamping: true, ...rest });
 });
 
@@ -3753,20 +4357,16 @@ const OrbitControls = /* @__PURE__ */ React.forwardRef(
     onEnd,
     ...restProps
   }, ref) => {
-    const invalidate = useThree((state) => state.invalidate);
-    const defaultCamera = useThree((state) => state.camera);
-    const gl = useThree((state) => state.gl);
-    const events = useThree((state) => state.events);
-    const setEvents = useThree((state) => state.setEvents);
-    const set = useThree((state) => state.set);
-    const get = useThree((state) => state.get);
-    const performance = useThree((state) => state.performance);
+    const { invalidate, camera: defaultCamera, renderer, events, setEvents, set, get, performance } = useThree();
     const explCamera = camera || defaultCamera;
-    const explDomElement = domElement || events.connected || gl.domElement;
+    const explDomElement = domElement || events.connected || renderer.domElement;
     const controls = React.useMemo(() => new OrbitControls$1(explCamera), [explCamera]);
-    useFrame(() => {
-      if (controls.enabled) controls.update();
-    }, -1);
+    useFrame(
+      () => {
+        if (controls.enabled) controls.update();
+      },
+      { before: "update" }
+    );
     React.useEffect(() => {
       if (keyEvents) {
         controls.connect(keyEvents === true ? explDomElement : keyEvents);
@@ -3880,9 +4480,8 @@ function PresentationControls({
   azimuth = [-Infinity, Infinity],
   damping = 0.25
 }) {
-  const events = useThree((state) => state.events);
-  const gl = useThree((state) => state.gl);
-  const explDomElement = domElement || events.connected || gl.domElement;
+  const { events, renderer, invalidate } = useThree();
+  const explDomElement = domElement || events.connected || renderer.domElement;
   const { size } = useThree();
   const rPolar = React.useMemo(
     () => [rotation[0] + polar[0], rotation[0] + polar[1]],
@@ -3899,18 +4498,20 @@ function PresentationControls({
   React.useEffect(() => {
     if (global && cursor && enabled) {
       explDomElement.style.cursor = "grab";
-      gl.domElement.style.cursor = "";
+      renderer.domElement.style.cursor = "";
       return () => {
         explDomElement.style.cursor = "default";
-        gl.domElement.style.cursor = "default";
+        renderer.domElement.style.cursor = "default";
       };
     }
   }, [global, cursor, explDomElement, enabled]);
   const [animation] = React.useState({ scale: 1, rotation: rInitial, damping });
   const ref = React.useRef(null);
   useFrame((state, delta) => {
-    easing.damp3(ref.current.scale, animation.scale, animation.damping, delta);
-    easing.dampE(ref.current.rotation, animation.rotation, animation.damping, delta);
+    let changed = false;
+    changed ||= easing.damp3(ref.current.scale, animation.scale, animation.damping, delta);
+    changed ||= easing.dampE(ref.current.rotation, animation.rotation, animation.damping, delta);
+    if (changed) state.invalidate();
   });
   const bind = useGesture(
     {
@@ -3918,6 +4519,7 @@ function PresentationControls({
         if (cursor && !global && enabled) explDomElement.style.cursor = last ? "auto" : "grab";
       },
       onDrag: ({ down, delta: [x, y], memo: [oldY, oldX] = animation.rotation || rInitial }) => {
+        invalidate();
         if (!enabled) return [y, x];
         if (cursor) explDomElement.style.cursor = down ? "grabbing" : "grab";
         x = MathUtils.clamp(oldX + x / size.width * Math.PI * speed, ...rAzimuth);
@@ -3926,9 +4528,12 @@ function PresentationControls({
         animation.rotation = snap && !down ? rInitial : [y, x, 0];
         animation.damping = snap && !down && typeof snap !== "boolean" ? snap : damping;
         return [y, x];
+      },
+      onDragEnd: () => {
+        invalidate();
       }
     },
-    { target: global ? explDomElement : void 0 }
+    { target: global ? explDomElement : void 0, enabled }
   );
   return /* @__PURE__ */ React.createElement("group", { ref, ...bind?.() }, children);
 }
@@ -3937,6 +4542,10 @@ function roundToPixelRatio(value) {
   const ratio = window.devicePixelRatio || 1;
   return Math.round(value * ratio) / ratio;
 }
+function getMaxAnisotropy(renderer) {
+  const r = renderer;
+  return r?.getMaxAnisotropy?.() ?? r?.capabilities?.getMaxAnisotropy?.() ?? 1;
+}
 
 const context$7 = /* @__PURE__ */ React.createContext(null);
 const rootCache = /* @__PURE__ */ new WeakMap();
@@ -3963,6 +4572,7 @@ function ScrollControls({
   const [fixed] = React.useState(() => document.createElement("div"));
   const target = gl.domElement.parentNode;
   const scroll = React.useRef(0);
+  const disableScrollUpdate = React.useRef(false);
   const state = React.useMemo(() => {
     const state2 = {
       el,
@@ -4044,16 +4654,20 @@ function ScrollControls({
       const scrollLength = el[horizontal ? "scrollWidth" : "scrollHeight"];
       const scrollThreshold = scrollLength - containerLength;
       let current = 0;
-      let disableScroll = true;
+      let disableScroll = false;
       let firstRun = true;
       const onScroll = () => {
         if (!enabled || firstRun) return;
+        if (disableScrollUpdate.current) {
+          disableScrollUpdate.current = false;
+          return;
+        }
         invalidate();
         current = el[horizontal ? "scrollLeft" : "scrollTop"];
         scroll.current = current / scrollThreshold;
         if (infinite) {
           if (!disableScroll) {
-            if (current >= scrollThreshold) {
+            if (current >= scrollThreshold - 1) {
               const damp = 1 - state.offset;
               el[horizontal ? "scrollLeft" : "scrollTop"] = 1;
               scroll.current = state.offset = -damp;
@@ -4070,11 +4684,34 @@ function ScrollControls({
       };
       el.addEventListener("scroll", onScroll, { passive: true });
       requestAnimationFrame(() => firstRun = false);
-      const onWheel = (e) => el.scrollLeft += e.deltaY / 2;
-      if (horizontal) el.addEventListener("wheel", onWheel, { passive: true });
+      const onResize = () => {
+        if (!el) return;
+        const scrollLength2 = el[horizontal ? "scrollWidth" : "scrollHeight"];
+        const containerLength2 = el[horizontal ? "clientWidth" : "clientHeight"];
+        disableScrollUpdate.current = true;
+        el[horizontal ? "scrollLeft" : "scrollTop"] = state.offset * (scrollLength2 - containerLength2);
+      };
+      const onWheel = (e) => {
+        if (horizontal) {
+          const previous = el.scrollLeft;
+          el.scrollLeft += e.deltaY / 2;
+          if (infinite && previous === el.scrollLeft) {
+            onScroll();
+          }
+        } else if (infinite) {
+          if (el.scrollTop <= 1 && e.deltaY < 0) {
+            onScroll();
+          } else if (el.scrollTop >= el.scrollHeight - el.clientHeight - 1 && e.deltaY > 0) {
+            onScroll();
+          }
+        }
+      };
+      if (horizontal || infinite) el.addEventListener("wheel", onWheel, { passive: true });
+      if (horizontal) window.addEventListener("resize", onResize);
       return () => {
         el.removeEventListener("scroll", onScroll);
-        if (horizontal) el.removeEventListener("wheel", onWheel);
+        if (horizontal || infinite) el.removeEventListener("wheel", onWheel);
+        if (horizontal) window.removeEventListener("resize", onResize);
       };
     }
   }, [el, events, size, infinite, state, invalidate, horizontal, enabled]);
@@ -4491,10 +5128,10 @@ const CloudInstance = /* @__PURE__ */ React.forwardRef(
     return /* @__PURE__ */ React.createElement("group", { ref, ...props });
   }
 );
-const Cloud = /* @__PURE__ */ React.forwardRef((props, fref) => {
+const Cloud = /* @__PURE__ */ React.forwardRef(({ materialFactory, ...props }, fref) => {
   const parent = React.useContext(context$6);
   if (parent) return /* @__PURE__ */ React.createElement(CloudInstance, { ref: fref, ...props });
-  return /* @__PURE__ */ React.createElement(Clouds, null, /* @__PURE__ */ React.createElement(CloudInstance, { ref: fref, ...props }));
+  return /* @__PURE__ */ React.createElement(Clouds, { materialFactory }, /* @__PURE__ */ React.createElement(CloudInstance, { ref: fref, ...props }));
 });
 
 const CatmullRomLine = /* @__PURE__ */ React.forwardRef(function CatmullRomLine2({
@@ -5016,7 +5653,7 @@ const Text3D = /* @__PURE__ */ React.forwardRef(
       return {
         font,
         size,
-        height,
+        depth: height,
         bevelThickness,
         bevelSize,
         bevelEnabled,
@@ -5199,7 +5836,7 @@ const FaceMaterial = ({
     "meshBasicMaterial",
     {
       map: texture,
-      "map-anisotropy": renderer.getMaxAnisotropy() || 1,
+      "map-anisotropy": getMaxAnisotropy(renderer),
       attach: `material-${index}`,
       color: hover ? hoverColor : "white",
       transparent: true,
@@ -5310,7 +5947,7 @@ function AxisHead({
       "spriteMaterial",
       {
         map: texture,
-        "map-anisotropy": renderer.getMaxAnisotropy() || 1,
+        "map-anisotropy": getMaxAnisotropy(renderer),
         alphaTest: 0.3,
         opacity: label ? 1 : 0.75,
         toneMapped: false
@@ -5455,6 +6092,7 @@ const Html = /* @__PURE__ */ React.forwardRef(
   }, ref) => {
     const { gl, camera, scene, size, raycaster, events, viewport } = useThree();
     const forceEven = useThree((state) => state.internal.forceEven);
+    const { frustum } = useThree();
     const [el] = React.useState(() => document.createElement(as));
     const root = React.useRef(null);
     const group = React.useRef(null);
@@ -5484,22 +6122,18 @@ const Html = /* @__PURE__ */ React.forwardRef(
       if (group.current) {
         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 {
-          el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(0,-9999px,0);transform-origin:0 0;`;
+          scene.updateMatrixWorld();
+          if (transform) {
+            el.style.cssText = `position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;`;
+          } else {
+            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 (root.current) {
-            root.current.unmount();
-            root.current = null;
-          }
           if (target && target.contains(el)) {
             target.removeChild(el);
           }
@@ -5633,8 +6267,7 @@ const Html = /* @__PURE__ */ React.forwardRef(
           if (transformOuterRef.current) {
             const el2 = transformOuterRef.current.children[0];
             if (el2?.clientWidth && el2?.clientHeight) {
-              const { isOrthographicCamera } = camera;
-              if (isOrthographicCamera || geometry) {
+              if (geometry) {
                 if (props.scale) {
                   if (!Array.isArray(props.scale)) {
                     occlusionMeshRef.current.scale.setScalar(1 / props.scale);
@@ -5666,64 +6299,7 @@ const Html = /* @__PURE__ */ React.forwardRef(
         }
       }
     });
-    const shaders = React.useMemo(
-      () => ({
-        vertexShader: !transform ? (
-          /* glsl */
-          `
-          /*
-            This shader is from the THREE's SpriteMaterial.
-            We need to turn the backing plane into a Sprite
-            (make it always face the camera) if "transfrom"
-            is false.
-          */
-          #include <common>
-
-          void main() {
-            vec2 center = vec2(0., 1.);
-            float rotation = 0.0;
-
-            // This is somewhat arbitrary, but it seems to work well
-            // Need to figure out how to derive this dynamically if it even matters
-            float size = 0.03;
-
-            vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
-            vec2 scale;
-            scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );
-            scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );
-
-            bool isPerspective = isPerspectiveMatrix( projectionMatrix );
-            if ( isPerspective ) scale *= - mvPosition.z;
-
-            vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;
-            vec2 rotatedPosition;
-            rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;
-            rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;
-            mvPosition.xy += rotatedPosition;
-
-            gl_Position = projectionMatrix * mvPosition;
-          }
-      `
-        ) : void 0,
-        fragmentShader: (
-          /* glsl */
-          `
-        void main() {
-          gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
-        }
-      `
-        )
-      }),
-      [transform]
-    );
-    return /* @__PURE__ */ React.createElement("group", { ...props, ref: group }, occlude && !isRayCastOcclusion && /* @__PURE__ */ React.createElement("mesh", { castShadow, receiveShadow, ref: occlusionMeshRef }, geometry || /* @__PURE__ */ React.createElement("planeGeometry", null), material || /* @__PURE__ */ React.createElement(
-      "shaderMaterial",
-      {
-        side: DoubleSide,
-        vertexShader: shaders.vertexShader,
-        fragmentShader: shaders.fragmentShader
-      }
-    )));
+    return /* @__PURE__ */ React.createElement("group", { ...props, ref: group }, occlude && !isRayCastOcclusion && /* @__PURE__ */ React.createElement("mesh", { castShadow, receiveShadow, ref: occlusionMeshRef }, geometry || /* @__PURE__ */ React.createElement("planeGeometry", null), material));
   }
 );
 
@@ -6576,6 +7152,7 @@ const mW = /* @__PURE__ */ new THREE.Matrix4();
 const mL = /* @__PURE__ */ new THREE.Matrix4();
 const mL0Inv = /* @__PURE__ */ new THREE.Matrix4();
 const mdL = /* @__PURE__ */ new THREE.Matrix4();
+const mdW = /* @__PURE__ */ new THREE.Matrix4();
 const mG = /* @__PURE__ */ new THREE.Matrix4();
 const bb = /* @__PURE__ */ new THREE.Box3();
 const bbObj = /* @__PURE__ */ new THREE.Box3();
@@ -6690,7 +7267,8 @@ const PivotControls = /* @__PURE__ */ React.forwardRef(
           onDragStart && onDragStart(props2);
           invalidate();
         },
-        onDrag: (mdW) => {
+        onDrag: (mdW_) => {
+          mdW.copy(mdW_);
           mP.copy(parentRef.current.matrixWorld);
           mPInv.copy(mP).invert();
           mW.copy(mW0).premultiply(mdW);
@@ -6702,12 +7280,12 @@ const PivotControls = /* @__PURE__ */ React.forwardRef(
           }
           const target = resolveObject(object);
           if (target) target.matrix.copy(mL);
-          onDrag && onDrag(mL, mdL, mW, mdW);
+          onDrag && onDrag({ local: mL, deltaLocal: mdL, world: mW, deltaWorld: mdW });
           invalidate();
         },
         onDragEnd: () => {
           dragState.current = null;
-          if (onDragEnd) onDragEnd();
+          if (onDragEnd) onDragEnd({ local: mL, deltaLocal: mdL, world: mW, deltaWorld: mdW });
           invalidate();
         },
         onHover: (props2) => {
@@ -6818,7 +7396,9 @@ const TransformControls = /* @__PURE__ */ React.forwardRef(
     const group = React.useRef(null);
     React.useLayoutEffect(() => {
       if (object) {
-        controls.attach(object instanceof THREE.Object3D ? object : object.current);
+        controls.attach(
+          object instanceof THREE.Object3D ? object : object.current
+        );
       } else if (group.current instanceof THREE.Object3D) {
         controls.attach(group.current);
       }
@@ -6917,7 +7497,7 @@ const PointMaterial = /* @__PURE__ */ React.forwardRef((props, ref) => {
   return /* @__PURE__ */ React.createElement("primitive", { ...props, object: material, ref, attach: "material" });
 });
 
-const PositionalAudio = /* @__PURE__ */ React.forwardRef(({ url, distance = 1, loop = true, autoplay, ...props }, ref) => {
+const PositionalAudio = /* @__PURE__ */ React.forwardRef(({ url, distance = 1, loop = false, autoplay, ...props }, ref) => {
   const sound = React.useRef(null);
   React.useImperativeHandle(ref, () => sound.current, []);
   const camera = useThree(({ camera: camera2 }) => camera2);
@@ -6929,7 +7509,9 @@ const PositionalAudio = /* @__PURE__ */ React.forwardRef(({ url, distance = 1, l
       _sound.setBuffer(Array.isArray(buffer) ? buffer[0] : buffer);
       _sound.setRefDistance(distance);
       _sound.setLoop(loop);
-      if (autoplay && !_sound.isPlaying) _sound.play();
+      if (autoplay && !_sound.isPlaying) {
+        _sound.play();
+      }
     }
   }, [buffer, camera, distance, loop]);
   React.useEffect(() => {
@@ -6998,7 +7580,6 @@ const tempMatrix = /* @__PURE__ */ new THREE.Matrix4();
 const translation = /* @__PURE__ */ new THREE.Vector3();
 const rotation = /* @__PURE__ */ new THREE.Quaternion();
 const scale = /* @__PURE__ */ new THREE.Vector3();
-const isInstancedBufferAttribute = (attr) => attr.isInstancedBufferAttribute;
 const Instance = /* @__PURE__ */ React.forwardRef(({ context, children, ...props }, ref) => {
   React.useMemo(() => extend({ PositionMesh }), []);
   const group = React.useRef(null);
@@ -7018,24 +7599,20 @@ const Instances = /* @__PURE__ */ React.forwardRef(({ context, children, range,
   const parentRef = React.useRef(null);
   React.useImperativeHandle(ref, () => parentRef.current, []);
   const [instances, setInstances] = React.useState([]);
+  const boundsDirty = React.useRef(true);
   const [[matrices, colors]] = React.useState(() => {
     const mArray = new Float32Array(limit * 16);
     for (let i = 0; i < limit; i++) tempMatrix.identity().toArray(mArray, i * 16);
     return [mArray, new Float32Array([...new Array(limit * 3)].map(() => 1))];
   });
   React.useEffect(() => {
-    parentRef.current.instanceMatrix.needsUpdate = true;
+    if (parentRef.current) parentRef.current.instanceMatrix.needsUpdate = true;
   });
   let iterations = 0;
   let count = 0;
-  const attributes = React.useRef([]);
-  React.useLayoutEffect(() => {
-    attributes.current = Object.entries(parentRef.current.geometry.attributes).filter(
-      ([_name, value]) => isInstancedBufferAttribute(value)
-    );
-  });
   useFrame(() => {
     if (frames === Infinity || iterations < frames) {
+      if (!parentRef.current) return;
       parentRef.current.updateMatrix();
       parentRef.current.updateMatrixWorld();
       parentMatrix.copy(parentRef.current.matrixWorld).invert();
@@ -7056,13 +7633,22 @@ const Instances = /* @__PURE__ */ React.forwardRef(({ context, children, range,
       }
       iterations++;
     }
+    if (boundsDirty.current && (frames === Infinity || iterations === frames)) {
+      boundsDirty.current = false;
+      if (parentRef.current.boundingBox) parentRef.current.computeBoundingBox();
+      if (parentRef.current.boundingSphere) parentRef.current.computeBoundingSphere();
+    }
   });
   const api = React.useMemo(
     () => ({
       getParent: () => parentRef,
       subscribe: (ref2) => {
         setInstances((instances2) => [...instances2, ref2]);
-        return () => setInstances((instances2) => instances2.filter((item) => item.current !== ref2.current));
+        boundsDirty.current = true;
+        return () => {
+          setInstances((instances2) => instances2.filter((item) => item.current !== ref2.current));
+          boundsDirty.current = true;
+        };
       }
     }),
     []
@@ -7087,10 +7673,23 @@ const Merged = /* @__PURE__ */ React.forwardRef(function Merged2({ meshes, child
   if (!isArray) {
     for (const key of Object.keys(meshes)) if (!meshes[key].isMesh) delete meshes[key];
   }
-  const render = (args) => isArray ? children(...args) : children(
-    Object.keys(meshes).filter((key) => meshes[key].isMesh).reduce((acc, key, i) => ({ ...acc, [key]: args[i] }), {})
-  );
-  const components = (isArray ? meshes : Object.values(meshes)).map(({ geometry, material }) => /* @__PURE__ */ React.createElement(Instances, { key: geometry.uuid, geometry, material, ...props }));
+  const render = (args) => {
+    if (isArray) {
+      return children(
+        ...args
+      );
+    }
+    const instanceMap = {};
+    const keys = Object.keys(meshes).filter((key) => meshes[key].isMesh);
+    keys.forEach((key, i) => {
+      instanceMap[key] = args[i];
+    });
+    return children(instanceMap);
+  };
+  const components = (isArray ? meshes : Object.values(meshes)).map((mesh) => {
+    const { geometry, material } = mesh;
+    return /* @__PURE__ */ React.createElement(Instances, { key: geometry.uuid, geometry, material, ...props });
+  });
   return /* @__PURE__ */ React.createElement("group", { ref }, renderRecursive(render, components));
 });
 function renderRecursive(render, components, results = []) {
@@ -8164,12 +8763,13 @@ function Sampler({ children, weight, transform, instances, mesh, count = 16, ...
   return /* @__PURE__ */ React.createElement("group", { ref: group, ...props }, children);
 }
 
+const pathStyle = (path) => path.userData?.style;
 const Svg = /* @__PURE__ */ forwardRef(
   function R3FSvg({ src, skipFill, skipStrokes, fillMaterial, strokeMaterial, fillMeshProps, strokeMeshProps, ...props }, ref) {
     const svg = useLoader(SVGLoader, !src.startsWith("<svg") ? src : `data:image/svg+xml;utf8,${src}`);
     const strokeGeometries = useMemo(
       () => skipStrokes ? [] : svg.paths.map(
-        (path) => path.userData?.style.stroke === void 0 || path.userData.style.stroke === "none" ? null : path.subPaths.map((subPath) => SVGLoader.pointsToStroke(subPath.getPoints(), path.userData.style))
+        (path) => pathStyle(path)?.stroke === void 0 || pathStyle(path).stroke === "none" ? null : path.subPaths.map((subPath) => SVGLoader.pointsToStroke(subPath.getPoints(), pathStyle(path)))
       ),
       [svg, skipStrokes]
     );
@@ -8177,21 +8777,21 @@ const Svg = /* @__PURE__ */ forwardRef(
       return () => strokeGeometries.forEach((group) => group && group.map((g) => g.dispose()));
     }, [strokeGeometries]);
     let renderOrder = 0;
-    return /* @__PURE__ */ React.createElement("object3D", { ref, ...props }, /* @__PURE__ */ React.createElement("object3D", { scale: [1, -1, 1] }, svg.paths.map((path, p) => /* @__PURE__ */ React.createElement(Fragment, { key: p }, !skipFill && path.userData?.style.fill !== void 0 && path.userData.style.fill !== "none" && SVGLoader.createShapes(path).map((shape, s) => /* @__PURE__ */ React.createElement("mesh", { key: s, ...fillMeshProps, renderOrder: renderOrder++ }, /* @__PURE__ */ React.createElement("shapeGeometry", { args: [shape] }), /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("object3D", { ref, ...props }, /* @__PURE__ */ React.createElement("object3D", { scale: [1, -1, 1] }, svg.paths.map((path, p) => /* @__PURE__ */ React.createElement(Fragment, { key: p }, !skipFill && pathStyle(path)?.fill !== void 0 && pathStyle(path).fill !== "none" && SVGLoader.createShapes(path).map((shape, s) => /* @__PURE__ */ React.createElement("mesh", { key: s, ...fillMeshProps, renderOrder: renderOrder++ }, /* @__PURE__ */ React.createElement("shapeGeometry", { args: [shape] }), /* @__PURE__ */ React.createElement(
       "meshBasicMaterial",
       {
-        color: path.userData.style.fill,
-        opacity: path.userData.style.fillOpacity,
+        color: pathStyle(path).fill,
+        opacity: pathStyle(path).fillOpacity,
         transparent: true,
         side: DoubleSide,
         depthWrite: false,
         ...fillMaterial
       }
-    ))), !skipStrokes && path.userData?.style.stroke !== void 0 && path.userData.style.stroke !== "none" && path.subPaths.map((_subPath, s) => /* @__PURE__ */ React.createElement("mesh", { key: s, geometry: strokeGeometries[p][s], ...strokeMeshProps, renderOrder: renderOrder++ }, /* @__PURE__ */ React.createElement(
+    ))), !skipStrokes && pathStyle(path)?.stroke !== void 0 && pathStyle(path).stroke !== "none" && path.subPaths.map((_subPath, s) => /* @__PURE__ */ React.createElement("mesh", { key: s, geometry: strokeGeometries[p][s], ...strokeMeshProps, renderOrder: renderOrder++ }, /* @__PURE__ */ React.createElement(
       "meshBasicMaterial",
       {
-        color: path.userData.style.stroke,
-        opacity: path.userData.style.strokeOpacity,
+        color: pathStyle(path).stroke,
+        opacity: pathStyle(path).strokeOpacity,
         transparent: true,
         side: DoubleSide,
         depthWrite: false,
@@ -8362,7 +8962,7 @@ function Preload({ all, scene, camera }) {
       });
     }
     gl.compile(scene || dScene, camera || dCamera);
-    const cubeRenderTarget = new WebGLCubeRenderTarget(128);
+    const cubeRenderTarget = new CubeRenderTarget(128);
     const cubeCamera = new CubeCamera$1(0.01, 1e5, cubeRenderTarget);
     cubeCamera.update(gl, scene || dScene);
     cubeRenderTarget.dispose();
@@ -8414,8 +9014,8 @@ function useVideoTexture(srcOrSrcObject, {
       });
       if (src && IS_BROWSER && src.endsWith(".m3u8")) {
         const hls = hlsRef.current = await getHls(hlsConfig);
-        if (hls) {
-          hls.on(Events.MEDIA_ATTACHED, () => void hls.loadSource(src));
+        if (hls && _HLSModule) {
+          hls.on(_HLSModule.Events.MEDIA_ATTACHED, () => void hls.loadSource(src));
           hls.attachMedia(video2);
         }
       }
@@ -8635,9 +9235,125 @@ function Fbx({
   return /* @__PURE__ */ React.createElement(Clone, { ...props, object });
 }
 
+const SERVICE_KEY = "__drei_ktx2_service__";
+const DEFAULT_TRANSCODER_PATH = "https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/basis/";
+class KTX2LoaderServiceImpl {
+  loader = null;
+  renderer = null;
+  _isReady = false;
+  transcoderPath = DEFAULT_TRANSCODER_PATH;
+  pendingCallbacks = [];
+  /**
+   * Get or create the singleton KTX2Loader instance.
+   * The loader is created lazily on first access.
+   */
+  getLoader() {
+    if (!this.loader) {
+      this.loader = new KTX2Loader();
+      this.loader.setTranscoderPath(this.transcoderPath);
+    }
+    return this.loader;
+  }
+  /**
+   * Register a renderer and call detectSupport.
+   * Should be called from within React context (useLayoutEffect).
+   * Flushes any queued callbacks.
+   */
+  registerRenderer(renderer) {
+    if (this._isReady && this.renderer === renderer) {
+      return;
+    }
+    this.renderer = renderer;
+    const loader = this.getLoader();
+    loader.detectSupport(renderer);
+    this._isReady = true;
+    this.flushPendingCallbacks();
+  }
+  /**
+   * Check if the service is ready (has renderer registered).
+   */
+  isReady() {
+    return this._isReady;
+  }
+  /**
+   * Get the registered renderer, if any.
+   */
+  getRenderer() {
+    return this.renderer;
+  }
+  /**
+   * Register a callback to run when renderer becomes available.
+   * If renderer is already available, runs immediately.
+   */
+  onReady(callback) {
+    if (this._isReady) {
+      callback();
+    } else {
+      this.pendingCallbacks.push(callback);
+    }
+  }
+  /**
+   * Process all pending callbacks.
+   */
+  flushPendingCallbacks() {
+    const callbacks = this.pendingCallbacks;
+    this.pendingCallbacks = [];
+    for (const callback of callbacks) {
+      try {
+        callback();
+      } catch (error) {
+        console.error("KTX2LoaderService: Error in pending callback:", error);
+      }
+    }
+  }
+  /**
+   * Set the transcoder path for basis/ktx2 decoding.
+   */
+  setTranscoderPath(path) {
+    this.transcoderPath = path;
+    if (this.loader) {
+      this.loader.setTranscoderPath(path);
+    }
+  }
+  /**
+   * Get the current transcoder path.
+   */
+  getTranscoderPath() {
+    return this.transcoderPath;
+  }
+  /**
+   * Dispose of the loader and reset state.
+   * Useful for testing or cleanup.
+   */
+  dispose() {
+    if (this.loader) {
+      this.loader.dispose();
+    }
+    const path = this.transcoderPath;
+    this.loader = null;
+    this.renderer = null;
+    this._isReady = false;
+    this.transcoderPath = path;
+    this.pendingCallbacks = [];
+  }
+}
+const KTX2LoaderService = globalThis[SERVICE_KEY] || (globalThis[SERVICE_KEY] = new KTX2LoaderServiceImpl());
+
 let dracoLoader = null;
 let decoderPath = "https://www.gstatic.com/draco/versioned/decoders/1.5.5/";
-function extensions(useDraco = true, useMeshopt = true, extendLoader) {
+let legacyApiWarned = false;
+function isOptionsObject(arg) {
+  return typeof arg === "object" && arg !== null && !Array.isArray(arg);
+}
+function warnLegacyApi() {
+  if (!legacyApiWarned) {
+    legacyApiWarned = true;
+    console.warn(
+      "useGLTF: Boolean arguments are deprecated. Use options object instead:\n  useGLTF(path, { draco: true, meshopt: true, ktx2: true })"
+    );
+  }
+}
+function extensions(useDraco = true, useMeshopt = true, useKTX2 = false, extendLoader, renderer) {
   return (loader) => {
     if (extendLoader) {
       extendLoader(loader);
@@ -8653,36 +9369,110 @@ function extensions(useDraco = true, useMeshopt = true, extendLoader) {
       const decoder = typeof MeshoptDecoder === "function" ? MeshoptDecoder() : MeshoptDecoder;
       loader.setMeshoptDecoder(decoder);
     }
+    if (useKTX2) {
+      const ktx2Loader = KTX2LoaderService.getLoader();
+      if (typeof useKTX2 === "string") {
+        ktx2Loader.setTranscoderPath(useKTX2);
+      }
+      if (renderer) {
+        ktx2Loader.detectSupport(renderer);
+      }
+      loader.setKTX2Loader(ktx2Loader);
+    }
   };
 }
-const useGLTF = (path, useDraco, useMeshopt, extendLoader) => useLoader(GLTFLoader, path, extensions(useDraco, useMeshopt, extendLoader));
-useGLTF.preload = (path, useDraco, useMeshopt, extendLoader) => useLoader.preload(GLTFLoader, path, extensions(useDraco, useMeshopt, extendLoader));
+function useGLTF(path, optionsOrDraco, useMeshoptArg, useKTX2Arg, extendLoaderArg) {
+  let draco = true;
+  let meshopt = true;
+  let ktx2 = false;
+  let extendLoader;
+  if (isOptionsObject(optionsOrDraco)) {
+    draco = optionsOrDraco.draco ?? true;
+    meshopt = optionsOrDraco.meshopt ?? true;
+    ktx2 = optionsOrDraco.ktx2 ?? false;
+    extendLoader = optionsOrDraco.extendLoader;
+  } else if (optionsOrDraco !== void 0) {
+    warnLegacyApi();
+    draco = optionsOrDraco;
+    meshopt = useMeshoptArg ?? true;
+    ktx2 = useKTX2Arg ?? false;
+    extendLoader = extendLoaderArg;
+  }
+  const renderer = useThree((state) => state.renderer);
+  useLayoutEffect(() => {
+    if (ktx2) {
+      KTX2LoaderService.registerRenderer(renderer);
+    }
+  }, [ktx2, renderer]);
+  return useLoader(GLTFLoader, path, extensions(draco, meshopt, ktx2, extendLoader, ktx2 ? renderer : void 0));
+}
+useGLTF.preload = (path, optionsOrDraco, useMeshoptArg, useKTX2Arg, extendLoaderArg) => {
+  let draco = true;
+  let meshopt = true;
+  let ktx2 = false;
+  let extendLoader;
+  if (isOptionsObject(optionsOrDraco)) {
+    draco = optionsOrDraco.draco ?? true;
+    meshopt = optionsOrDraco.meshopt ?? true;
+    ktx2 = optionsOrDraco.ktx2 ?? false;
+    extendLoader = optionsOrDraco.extendLoader;
+  } else if (optionsOrDraco !== void 0) {
+    warnLegacyApi();
+    draco = optionsOrDraco;
+    meshopt = useMeshoptArg ?? true;
+    ktx2 = useKTX2Arg ?? false;
+    extendLoader = extendLoaderArg;
+  }
+  if (ktx2) {
+    KTX2LoaderService.onReady(() => {
+      const renderer = KTX2LoaderService.getRenderer();
+      useLoader.preload(GLTFLoader, path, extensions(draco, meshopt, ktx2, extendLoader, renderer));
+    });
+  } else {
+    useLoader.preload(GLTFLoader, path, extensions(draco, meshopt, false, extendLoader));
+  }
+};
 useGLTF.clear = (path) => useLoader.clear(GLTFLoader, path);
 useGLTF.setDecoderPath = (path) => {
   decoderPath = path;
 };
+useGLTF.setKTX2TranscoderPath = (path) => {
+  KTX2LoaderService.setTranscoderPath(path);
+};
 const Gltf = /* @__PURE__ */ React.forwardRef(
-  ({ src, useDraco, useMeshOpt, extendLoader, ...props }, ref) => {
-    const { scene } = useGLTF(src, useDraco, useMeshOpt, extendLoader);
+  ({ src, useDraco, useMeshOpt, extendLoader, options, ...props }, ref) => {
+    const opts = options ?? {
+      draco: useDraco,
+      meshopt: useMeshOpt,
+      extendLoader
+    };
+    const { scene } = useGLTF(src, opts);
     return /* @__PURE__ */ React.createElement(Clone, { ref, ...props, object: scene });
   }
 );
 
-let transcoderPath = "https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/basis/";
 function useKTX2(input, basisPath = true, extendLoader) {
   const renderer = useThree((state) => state.renderer);
+  useLayoutEffect(() => {
+    KTX2LoaderService.registerRenderer(renderer);
+  }, [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);
+      const path = typeof basisPath === "string" ? basisPath : KTX2LoaderService.getTranscoderPath();
+      loader.setTranscoderPath(path);
     }
     loader.detectSupport(renderer);
   });
   useEffect(() => {
     const array = Array.isArray(textures) ? textures : [textures];
-    array.forEach((texture) => renderer.initTexture(texture));
+    array.forEach((texture) => {
+      if ("initTexture" in renderer) {
+        renderer.initTexture(texture);
+      }
+    });
   }, [renderer, textures]);
   if (IsObject(input)) {
     const keys = Object.keys(input);
@@ -8693,23 +9483,81 @@ function useKTX2(input, basisPath = true, extendLoader) {
     return textures;
   }
 }
-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.preload = (url, basisPath = true, extendLoader) => {
+  KTX2LoaderService.onReady(() => {
+    const renderer = KTX2LoaderService.getRenderer();
+    useLoader.preload(KTX2Loader, url, (loader) => {
+      if (extendLoader) {
+        extendLoader(loader);
+      }
+      if (basisPath) {
+        const path = typeof basisPath === "string" ? basisPath : KTX2LoaderService.getTranscoderPath();
+        loader.setTranscoderPath(path);
+      }
+      if (renderer) {
+        loader.detectSupport(renderer);
+      }
+    });
+  });
+};
 useKTX2.clear = (input) => useLoader.clear(KTX2Loader, input);
 useKTX2.setTranscoderPath = (path) => {
-  transcoderPath = path;
+  KTX2LoaderService.setTranscoderPath(path);
 };
 const Ktx2 = ({ children, input, basisPath, extendLoader }) => {
   const texture = useKTX2(input, basisPath, extendLoader);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children?.(texture));
 };
 
+const useVariants = (model, inVariant) => {
+  const [activeVariant, setActiveVariant] = useState(null);
+  const [materials, setMaterials] = useState([]);
+  useEffect(() => {
+    model.parser.getDependencies("material").then((materials2) => {
+      setMaterials(materials2);
+    });
+  }, [model]);
+  const variants = useMemo(() => {
+    return model.userData.gltfExtensions?.KHR_materials_variants?.variants;
+  }, [model]);
+  const applyVariant = useCallback(
+    (variantIndex) => {
+      model.scene.traverse(async (object) => {
+        if (!("isMesh" in object) || !object.userData.gltfExtensions) return;
+        const meshObject = object;
+        const meshVariantDef = meshObject.userData.gltfExtensions.KHR_materials_variants;
+        if (!meshVariantDef) return;
+        if (!meshObject.userData.originalMaterial) meshObject.userData.originalMaterial = meshObject.material;
+        const mapping = meshVariantDef.mappings.find((mapping2) => mapping2.variants.includes(variantIndex));
+        if (mapping) {
+          meshObject.material = await model.parser.getDependency("material", mapping.material);
+          model.parser.assignFinalMaterial(meshObject);
+        } else meshObject.material = meshObject.userData.originalMaterial;
+        if (Array.isArray(meshObject.material)) for (const mat of meshObject.material) mat.needsUpdate = true;
+        else meshObject.material.needsUpdate = true;
+      });
+    },
+    [model]
+  );
+  const setVariant = useCallback(
+    (variantName) => {
+      if (!variants) return;
+      const newVariant = variantName && variants.some((v) => v.name === variantName) ? variantName : null;
+      setActiveVariant(newVariant);
+    },
+    [variants]
+  );
+  useEffect(() => {
+    if (!variants) return;
+    const variantIndex = variants.findIndex((v) => v.name === activeVariant);
+    applyVariant(variantIndex > -1 ? variantIndex : 0);
+  }, [variants, activeVariant, applyVariant]);
+  useEffect(() => {
+    setVariant(inVariant ?? null);
+  }, [inVariant, setVariant]);
+  return { variants, activeVariant, setVariant, materials };
+};
+
 const WebcamVideoTexture = /* @__PURE__ */ forwardRef(
   ({
     constraints = {
@@ -8897,6 +9745,7 @@ function useEffectfulState(fn, deps = [], cb) {
 }
 
 function Stats({ showPanel = 0, className, parent }) {
+  React.useEffect(() => void console.warn("drei: <Stats /> is deprecated, use <StatsGl /> instead."), []);
   const stats = useEffectfulState(() => new StatsImpl(), []);
   React.useEffect(() => {
     if (stats) {
@@ -8925,6 +9774,7 @@ const StatsGl = /* @__PURE__ */ React.forwardRef(
       const stats2 = new Stats$1({
         ...props
       });
+      stats2.init(renderer);
       return stats2;
     }, [renderer]);
     React.useImperativeHandle(fref, () => stats.domElement, [stats]);
@@ -8942,7 +9792,7 @@ const StatsGl = /* @__PURE__ */ React.forwardRef(
         return () => {
           if (classNames.length) stats.domElement.classList.remove(...classNames);
           node?.removeChild(stats.domElement);
-          stats.end();
+          stats.dispose();
         };
       }
     }, [parent, stats, className, id, clearStatsGlStyle]);
@@ -8950,7 +9800,7 @@ const StatsGl = /* @__PURE__ */ React.forwardRef(
       () => {
         stats.begin();
       },
-      { before: "render" }
+      { before: "update" }
     );
     useFrame(
       () => {
@@ -9115,8 +9965,9 @@ const TUNNEL_KEY = "__drei_view_tunnel__";
 const tracked = globalThis[TUNNEL_KEY] || (globalThis[TUNNEL_KEY] = tunnel());
 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 canvasRight = canvasSize.left + canvasSize.width;
+  const isOffscreen = trackBottom < canvasSize.top || trackTop > canvasBottom || right < canvasSize.left || trackLeft > canvasRight;
   const rawBottom = canvasBottom - trackBottom;
   const rawLeft = trackLeft - canvasSize.left;
   const rawTop = trackTop - canvasSize.top;
@@ -9676,12 +10527,12 @@ useEnvironment.preload = (preloadOptions) => {
     if (extensions) extensions(loader2);
   });
 };
-const clearDefaultOptins = {
+const clearDefaultOptions = {
   files: defaultFiles,
   preset: void 0
 };
 useEnvironment.clear = (clearOptions) => {
-  const options = { ...clearDefaultOptins, ...clearOptions };
+  const options = { ...clearDefaultOptions, ...clearOptions };
   let { files } = options;
   const { preset } = options;
   if (preset) {
@@ -9804,7 +10655,7 @@ function EnvironmentPortal({
   const camera = React.useRef(null);
   const [virtualScene] = React.useState(() => new Scene());
   const fbo = React.useMemo(() => {
-    const fbo2 = new WebGLCubeRenderTarget(resolution);
+    const fbo2 = new CubeRenderTarget(resolution);
     fbo2.texture.type = HalfFloatType;
     return fbo2;
   }, [resolution]);
@@ -10375,9 +11226,14 @@ function Select({
     const oldControlsEnabled = controls?.enabled;
     let isDown = false;
     function prepareRay(event, vec) {
-      const { offsetX, offsetY } = event;
+      const canvas = gl.domElement;
+      const rect = canvas.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
       const { width, height } = size;
-      vec.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
+      const normalizedX = x / width * 2 - 1;
+      const normalizedY = -(y / height) * 2 + 1;
+      vec.set(normalizedX, normalizedY, -1);
     }
     function onSelectStart(event) {
       if (controls) controls.enabled = false;
@@ -11229,7 +12085,7 @@ const ImageWithUrl = /* @__PURE__ */ React.forwardRef(
     return /* @__PURE__ */ React.createElement(ImageBase, { ...props, texture, ref });
   }
 );
-const ImageWithTexture = /* @__PURE__ */ React.forwardRef(({ url: _url, ...props }, ref) => {
+const ImageWithTexture = /* @__PURE__ */ React.forwardRef(({ ...props }, ref) => {
   return /* @__PURE__ */ React.createElement(ImageBase, { ...props, ref });
 });
 const Image = /* @__PURE__ */ React.forwardRef((props, ref) => {
@@ -11357,6 +12213,24 @@ class SpotLightMaterial extends MeshBasicNodeMaterial {
   }
 }
 
+function createHtmlNodeMaterial(transform) {
+  const mat = transform ? new MeshBasicNodeMaterial() : new SpriteNodeMaterial();
+  mat.side = DoubleSide;
+  mat.transparent = true;
+  mat.depthWrite = true;
+  mat.fragmentNode = vec4(0, 0, 0, 0);
+  return mat;
+}
+const HtmlMaterial = ({ transform }) => {
+  const material = React.useMemo(() => createHtmlNodeMaterial(transform), [transform]);
+  React.useEffect(() => {
+    return () => {
+      material.dispose();
+    };
+  }, [material]);
+  return /* @__PURE__ */ React.createElement("primitive", { object: material, attach: "material" });
+};
+
 class StarfieldMaterial extends SpriteNodeMaterial {
   //* Uniforms ==============================
   _time = uniform(0);
@@ -11433,16 +12307,16 @@ class SparklesMaterial extends SpriteNodeMaterial {
       return pos;
     })();
     this.scaleNode = Fn(() => {
-      const worldPos = modelWorldMatrix.mul(vec4(this.positionNode, 1));
-      const viewPos = cameraViewMatrix.mul(worldPos);
-      const distanceAttenuation = float(1).div(viewPos.z.negate());
-      const size = particleSize.mul(0.5).mul(this._pixelRatio).mul(distanceAttenuation);
+      const pixelSize = particleSize.mul(25).mul(this._pixelRatio);
+      const projY = cameraProjectionMatrix.element(1).y;
+      const viewportH = screenSize.y;
+      const size = pixelSize.mul(2).div(projY.mul(viewportH));
       return vec2$2(size);
     })();
     this.colorNode = Fn(() => {
       const quadUV = uv();
       const distanceToCenter = length(quadUV.sub(vec2$2(0.5)));
-      const strength = float(0.05).div(distanceToCenter).sub(0.1);
+      const strength = clamp(float(0.05).div(distanceToCenter).sub(0.1), 0, 1);
       return vec4(particleColor, strength.mul(particleOpacity));
     })();
   }
@@ -11713,17 +12587,95 @@ const Grid = /* @__PURE__ */ React.forwardRef(
   }
 );
 
-let hasWarned = false;
-function warnOnce(message) {
-  if (!hasWarned) {
-    console.warn(message);
-    hasWarned = true;
+const createPCSSFilter = (size, samples, focus) => {
+  const sampleCount = Math.min(Math.max(samples, 1), 20);
+  return Fn(({ depthTexture, shadowCoord, shadow, depthLayer }) => {
+    const sampleDepth = (uv2) => {
+      const tex = texture(depthTexture, uv2);
+      const depth = depthTexture.isArrayTexture ? tex.depth(depthLayer) : tex;
+      return depth.r;
+    };
+    const mapSize = reference("mapSize", "vec2", shadow).setGroup(renderGroup);
+    const texelSize = vec2$2(1).div(mapSize);
+    const phi = interleavedGradientNoise(screenCoordinate.xy).mul(6.28318530718);
+    const uv = shadowCoord.xy;
+    const zReceiver = shadowCoord.z.add(1).mul(0.5);
+    const blockerSearchRadius = texelSize.x.mul(size).mul(2);
+    const blockerDepthSum = float(focus).toVar("blockerDepthSum");
+    const blockerCount = float(0).toVar("blockerCount");
+    for (let i = 0; i < sampleCount; i++) {
+      const offset = vogelDiskSample(int(i), int(sampleCount), phi).mul(blockerSearchRadius);
+      const sampleUV = uv.add(offset);
+      const sampleDepthVal = sampleDepth(sampleUV);
+      const isBlocker = step(sampleDepthVal, zReceiver).sub(step(zReceiver, sampleDepthVal)).max(0);
+      blockerDepthSum.addAssign(sampleDepthVal.mul(isBlocker));
+      blockerCount.addAssign(isBlocker);
+    }
+    const avgBlockerDepth = blockerDepthSum.div(blockerCount.max(1));
+    const penumbraRatio = zReceiver.sub(avgBlockerDepth).div(avgBlockerDepth.max(1e-4));
+    const filterRadius = texelSize.x.mul(float(1).add(penumbraRatio.mul(1.25).mul(size)));
+    const shadowSum = float(0).toVar("shadowSum");
+    for (let i = 0; i < sampleCount; i++) {
+      const offset = vogelDiskSample(int(i), int(sampleCount), phi).mul(filterRadius);
+      const sampleUV = uv.add(offset);
+      const sampleDepthVal = sampleDepth(sampleUV);
+      shadowSum.addAssign(step(zReceiver, sampleDepthVal));
+    }
+    const shadowResult = shadowSum.div(sampleCount);
+    const hasBlockers = blockerCount.greaterThan(0.5);
+    return hasBlockers.select(shadowResult, float(1));
+  });
+};
+class PCSSShadowNode extends ShadowNode {
+  size;
+  samples;
+  focus;
+  constructor(light, { size = 25, samples = 10, focus = 0 } = {}) {
+    super(light, light.shadow);
+    this.size = size;
+    this.samples = samples;
+    this.focus = focus;
+  }
+  /**
+   * Override to disable hardware depth comparison.
+   * PCSS needs raw depth values for blocker search, so we can't use comparison samplers.
+   */
+  setupRenderTarget(shadow, builder) {
+    const parentMethod = Object.getPrototypeOf(Object.getPrototypeOf(this)).setupRenderTarget;
+    const result = parentMethod.call(this, shadow, builder);
+    if (result.depthTexture) {
+      result.depthTexture.compareFunction = null;
+    }
+    return result;
+  }
+  /**
+   * Override to use our PCSS filter instead of the default filter.
+   */
+  getShadowFilterFn(_type) {
+    return createPCSSFilter(this.size, this.samples, this.focus);
   }
 }
-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."
-  );
+
+function SoftShadows({ size = 25, samples = 10, focus = 0 }) {
+  const scene = useThree((state) => state.scene);
+  React.useLayoutEffect(() => {
+    const originalShadowNodes = /* @__PURE__ */ new Map();
+    scene.traverse((obj) => {
+      const light = obj;
+      if (light.isLight && light.castShadow && light.shadow) {
+        originalShadowNodes.set(light.uuid, light.shadow.shadowNode);
+        light.shadow.shadowNode = new PCSSShadowNode(light, { size, samples, focus });
+      }
+    });
+    return () => {
+      scene.traverse((obj) => {
+        const light = obj;
+        if (originalShadowNodes.has(light.uuid)) {
+          light.shadow.shadowNode = originalShadowNodes.get(light.uuid);
+        }
+      });
+    };
+  }, [scene, size, samples, focus]);
   return null;
 }
 
@@ -11985,4 +12937,4 @@ const Sparkles = /* @__PURE__ */ React.forwardRef(({ noise = 1, count = 100, spe
   );
 });
 
-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 };
+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, HtmlMaterial, 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, PCSSShadowNode, 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, useVariants, useVideoTexture, useWireframeUniforms };