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

package/native/index.mjs

@@ -1,14 +1,14 @@
+import * as THREE from 'three/webgpu';
+import { MeshBasicNodeMaterial, RenderTarget, MeshPhongNodeMaterial, MeshNormalNodeMaterial, MeshPhysicalNodeMaterial, Frustum, Matrix4, QuadMesh, 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, AdditiveBlending, SpriteNodeMaterial, ShadowNode, CylinderGeometry } from 'three/webgpu';
+import { Fn, float, vec4, uv, vec2 as vec2$2, uniform, uniformTexture, Discard, materialReference, context as context$a, max, materialAlphaTest, sub, mix, output, mul, negate, add, dot, refract, div, length, cross, select, vec3, normalize, normalWorld, positionWorld, materialColor, 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, materialIOR, equirectUV, materialOpacity, reflect, smoothstep, round, distance, positionLocal, mx_noise_vec3, cos, mat3, normalLocal, attribute, modelViewMatrix, varying, min, frontFacing, fwidth, texture, abs, saturate, positionView, positionGeometry, reference, renderGroup, interleavedGradientNoise, vogelDiskSample, step } from 'three/tsl';
 import * as React from 'react';
 import { forwardRef, useImperativeHandle, useRef, useMemo, useEffect, useCallback, 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, MeshPhysicalNodeMaterial, Frustum, Matrix4, QuadMesh, 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 { useThree, useFrame, extend, createPortal, applyProps, useInstanceHandle, context as context$b, useLoader, addEffect, addAfterEffect } from '@react-three/fiber';
 import { SimplexNoise } from 'three/examples/jsm/math/SimplexNoise.js';
 import { Line2 } from 'three/examples/jsm/lines/webgpu/Line2.js';
 import { LineSegments2 } from 'three/examples/jsm/lines/webgpu/LineSegments2.js';
 import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js';
 import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js';
-import { uniform, Fn, float, vec4, uniformTexture, uv, vec2 as vec2$2, texture, mul, negate, add, dot, refract, div, sub, length, cross, select, max, vec3, normalize, normalWorld, positionWorld, 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 * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils.js';
 import { Flow } from 'three/examples/jsm/modifiers/CurveModifier.js';
 import { DecalGeometry } from 'three/examples/jsm/geometries/DecalGeometry.js';
@@ -28,11 +28,11 @@ import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
 import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';
 import { create as create$1 } from 'zustand';
 import { hashBlur } from 'three/examples/jsm/tsl/display/hashBlur.js';
+import PhysicalLightingModel from 'three/src/nodes/functions/PhysicalLightingModel.js';
 import { misc, easing } from 'maath';
 import * as ReactDOM from 'react-dom/client';
 import { useGesture } from '@use-gesture/react';
 import { MeshSurfaceSampler } from 'three/examples/jsm/math/MeshSurfaceSampler.js';
-import { Events } from 'hls.js';
 import { SelectionBox } from 'three/examples/jsm/interactive/SelectionBox.js';
 import { shallow } from 'zustand/shallow';
 import { Sky as Sky$1 } from 'three/examples/jsm/objects/Sky.js';
@@ -44,43 +44,150 @@ import { TransformControls as TransformControls$1 } from 'three/examples/jsm/con
 import tunnel from 'tunnel-rat';
 import 'zustand/middleware';
 
-class DepthNodeMaterial extends MeshBasicNodeMaterial {
-  _opacity;
+function assignUniform(node, factory, v) {
+  const current = node.value;
+  if (v === null || v === void 0) {
+    if (current && current.isTexture) node.value = factory().value;
+    else node.value = v;
+    return;
+  }
+  if (typeof current === "number") {
+    node.value = typeof v === "boolean" ? v ? 1 : 0 : v;
+    return;
+  }
+  if (typeof current === "boolean") {
+    node.value = !!v;
+    return;
+  }
+  if (current && typeof current === "object") {
+    if (typeof v === "object" && !Array.isArray(v)) {
+      node.value = v;
+      return;
+    }
+    if (Array.isArray(v) && typeof current.fromArray === "function") {
+      current.fromArray(v);
+      return;
+    }
+    if (current.isColor) {
+      current.set(v);
+      return;
+    }
+    if (typeof v === "number" && typeof current.setScalar === "function") {
+      current.setScalar(v);
+      return;
+    }
+  }
+  node.value = v;
+}
+function withUniforms(Base, table) {
+  const keys = Object.keys(table);
+  const factories = table;
+  let installed = false;
+  const install = (instance) => {
+    for (const key of keys) {
+      if (key.startsWith("_") || key in instance) {
+        throw new Error(
+          `withUniforms: "${key}" is reserved on ${Base.name}. Read three's own node for it (materialOpacity, materialColor, materialReference(...)) instead of declaring a uniform named "${key}".`
+        );
+      }
+    }
+    for (const key of keys) {
+      Object.defineProperty(Wrapped.prototype, key, {
+        get() {
+          return this._uniforms?.[key]?.value;
+        },
+        set(v) {
+          const node = this._uniforms?.[key];
+          if (node) assignUniform(node, factories[key], v);
+        },
+        enumerable: false,
+        configurable: true
+      });
+    }
+    installed = true;
+  };
+  const splitParameters = (args) => {
+    const params = args[0];
+    if (!params || typeof params !== "object" || Array.isArray(params)) return { args, own: null };
+    const own = {};
+    const rest = {};
+    let hasOwn = false;
+    for (const k in params) {
+      if (Object.prototype.hasOwnProperty.call(factories, k)) {
+        own[k] = params[k];
+        hasOwn = true;
+      } else rest[k] = params[k];
+    }
+    return hasOwn ? { args: [rest, ...args.slice(1)], own } : { args, own: null };
+  };
+  class Wrapped extends Base {
+    constructor(...args) {
+      const { args: baseArgs, own } = splitParameters(args);
+      super(...baseArgs);
+      if (!installed) install(this);
+      const nodes = {};
+      for (const key of keys) nodes[key] = factories[key]();
+      Object.defineProperty(this, "_uniforms", { value: nodes, enumerable: false, writable: false });
+      if (own) for (const key in own) this[key] = own[key];
+    }
+    get uniforms() {
+      return this._uniforms;
+    }
+    /** Copies values for inherited accessors that NodeMaterial.copy does not visit. */
+    copy(source) {
+      super.copy(source);
+      const from = source._uniforms;
+      if (!from) return this;
+      for (const key of keys) {
+        const value = from[key]?.value;
+        const node = this._uniforms[key];
+        const own = node.value;
+        if (value && value.isTexture) node.value = value;
+        else if (own && typeof own.copy === "function") own.copy(value);
+        else node.value = value;
+      }
+      return this;
+    }
+  }
+  return Wrapped;
+}
+
+class DepthNodeMaterial extends withUniforms(MeshBasicNodeMaterial, {
+  /** Shadow strength, 1 = full darkening, 0 = none */
+  shadowOpacity: () => uniform(1)
+}) {
   constructor(opacity = 1) {
     super();
-    this._opacity = uniform(opacity);
+    this.shadowOpacity = opacity;
     this.depthTest = false;
     this.depthWrite = false;
     this._buildShader();
   }
   _buildShader() {
-    const opacityUniform = this._opacity;
+    const { shadowOpacity } = this.uniforms;
     this.colorNode = Fn(() => {
-      const shadowStrength = opacityUniform.mul(0.7);
+      const shadowStrength = shadowOpacity.mul(0.7);
       const gray = float(1).sub(shadowStrength);
       return vec4(gray, gray, gray, 1);
     })();
   }
-  set shadowOpacity(value) {
-    this._opacity.value = value;
-  }
 }
-class BlurNodeMaterial extends MeshBasicNodeMaterial {
-  _inputTexture;
-  _blurAmount;
+class BlurNodeMaterial extends withUniforms(MeshBasicNodeMaterial, {
+  /** Texture to blur */
+  inputTexture: () => uniformTexture(new THREE.Texture()),
+  /** Per-tap UV offset */
+  blurAmount: () => uniform(0)
+}) {
   _direction;
   constructor(direction = "horizontal") {
     super();
-    this._inputTexture = uniformTexture(new THREE.Texture());
-    this._blurAmount = uniform(0);
     this._direction = direction;
     this.depthTest = false;
     this.depthWrite = false;
     this._buildShader();
   }
   _buildShader() {
-    const inputTex = this._inputTexture;
-    const blurAmountUniform = this._blurAmount;
+    const { inputTexture: inputTex, blurAmount: blurAmountUniform } = this.uniforms;
     const isHorizontal = this._direction === "horizontal";
     const weights = [0.051, 0.0918, 0.12245, 0.1531, 0.1633, 0.1531, 0.12245, 0.0918, 0.051];
     this.colorNode = Fn(() => {
@@ -89,18 +196,12 @@ class BlurNodeMaterial extends MeshBasicNodeMaterial {
       for (let i = 0; i < 9; i++) {
         const offset = float(i - 4).mul(blurAmountUniform);
         const sampleUV = isHorizontal ? texCoord.add(vec2$2(offset, 0)) : texCoord.add(vec2$2(0, offset));
-        const sampledColor = texture(inputTex, sampleUV);
+        const sampledColor = inputTex.sample(sampleUV);
         result.addAssign(sampledColor.mul(weights[i]));
       }
       return result;
     })();
   }
-  set inputTexture(value) {
-    this._inputTexture.value = value;
-  }
-  set blurAmount(value) {
-    this._blurAmount.value = value;
-  }
 }
 const ContactShadows = /* @__PURE__ */ React.forwardRef(
   ({
@@ -231,28 +332,304 @@ const ContactShadows = /* @__PURE__ */ React.forwardRef(
   }
 );
 
+const discardFragment = /* @__PURE__ */ Fn(() => {
+  Discard();
+  return vec4(0, 0, 0, 0);
+});
+class DiscardNodeMaterial extends MeshBasicNodeMaterial {
+  constructor() {
+    super();
+    this.fragmentNode = discardFragment();
+  }
+}
+const DiscardMaterial = /* @__PURE__ */ new DiscardNodeMaterial();
+
+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 withUniforms(MeshBasicNodeMaterial, {
+  /** Shadow color, black */
+  shadowColor: () => uniform(new THREE.Color()),
+  /** Colorblend, how much colors turn to black, 0 is black */
+  blend: () => uniform(2)
+}) {
+  constructor() {
+    super();
+    this.transparent = true;
+    this.depthWrite = false;
+    this.opacity = 0;
+    this.alphaTest = 0.75;
+    this.map = new THREE.Texture();
+    this.alphaTestNode = float(0);
+    this._buildShader();
+  }
+  _buildShader() {
+    const { shadowColor, blend } = this.uniforms;
+    const map = materialReference("map", "texture", this);
+    this.colorNode = Fn(() => {
+      const sampled = context$a(map, { getUV: () => uv() });
+      const rgb = shadowColor.mul(sampled.r).mul(blend);
+      const sum = sampled.r.add(sampled.g).add(sampled.b);
+      const alpha = max(float(0), float(1).sub(sum.div(materialAlphaTest)));
+      return vec4(rgb, alpha);
+    })();
   }
 }
-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 withUniforms(MeshPhongNodeMaterial, {
+  /** Accumulation buffer from the previous frame, blended with the current shading */
+  previousShadowMap: () => uniformTexture(new THREE.Texture()),
+  /** Mix 1/averagingWindow of the new shading into the accumulated frames */
+  averagingWindow: () => uniform(100)
+}) {
+  constructor(initialTexture) {
+    super();
+    this.previousShadowMap = initialTexture;
+    this.fog = false;
+    this._buildShader();
+  }
+  _buildShader() {
+    const { previousShadowMap, averagingWindow } = this.uniforms;
+    const uvNode = uv();
+    this.vertexNode = vec4(sub(uvNode, vec2$2(0.5)).mul(2), 1, 1);
+    this.outputNode = vec4(mix(previousShadowMap.sample(uv()), output, float(1).div(averagingWindow)));
+  }
+}
+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.set(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);
@@ -350,19 +727,18 @@ const Edges = /* @__PURE__ */ React.forwardRef(
   }
 );
 
-class CausticsProjectionMaterial extends MeshBasicNodeMaterial {
-  _causticsTexture;
-  _causticsTextureB;
-  _color;
-  _lightProjMatrix;
-  _lightViewMatrix;
+class CausticsProjectionMaterial extends withUniforms(MeshBasicNodeMaterial, {
+  /** Front-face caustics, rendered by CausticsMaterial */
+  causticsTexture: () => uniformTexture(new THREE.Texture()),
+  /** Back-face caustics, rendered by CausticsMaterial when `backside` is enabled */
+  causticsTextureB: () => uniformTexture(new THREE.Texture()),
+  /** Projection matrix of the light camera */
+  lightProjMatrix: () => uniform(new THREE.Matrix4()),
+  /** View matrix (matrixWorldInverse) of the light camera */
+  lightViewMatrix: () => uniform(new THREE.Matrix4())
+}) {
   constructor() {
     super();
-    this._causticsTexture = uniformTexture(new THREE.Texture());
-    this._causticsTextureB = uniformTexture(new THREE.Texture());
-    this._color = uniform(new THREE.Color(1, 1, 1));
-    this._lightProjMatrix = uniform(new THREE.Matrix4());
-    this._lightViewMatrix = uniform(new THREE.Matrix4());
     this.transparent = true;
     this.blending = THREE.CustomBlending;
     this.blendSrc = THREE.OneFactor;
@@ -371,100 +747,68 @@ class CausticsProjectionMaterial extends MeshBasicNodeMaterial {
     this._buildShader();
   }
   _buildShader() {
-    const causticsTexture = this._causticsTexture;
-    const causticsTextureB = this._causticsTextureB;
-    const colorUniform = this._color;
-    const lightProjMatrix = this._lightProjMatrix;
-    const lightViewMatrix = this._lightViewMatrix;
+    const { causticsTexture, causticsTextureB, lightProjMatrix, lightViewMatrix } = this.uniforms;
     this.colorNode = Fn(() => {
       const worldPos = positionWorld;
       const worldPos4 = vec4(worldPos, 1);
       const lightSpacePos = mul(lightProjMatrix, mul(lightViewMatrix, worldPos4)).toVar();
       const xyz = lightSpacePos.xyz.div(lightSpacePos.w);
       const lightUv = xyz.mul(0.5).add(0.5).xy;
-      const front = texture(causticsTexture, lightUv).rgb;
-      const back = texture(causticsTextureB, lightUv).rgb;
-      return vec4(add(front, back).mul(colorUniform), 1);
+      const front = causticsTexture.sample(lightUv).rgb;
+      const back = causticsTextureB.sample(lightUv).rgb;
+      return vec4(add(front, back).mul(materialColor), 1);
     })();
   }
-  //* Uniform Accessors ==============================
-  get causticsTexture() {
-    return this._causticsTexture.value;
-  }
-  set causticsTexture(v) {
-    this._causticsTexture.value = v;
-  }
-  get causticsTextureB() {
-    return this._causticsTextureB.value;
-  }
-  set causticsTextureB(v) {
-    this._causticsTextureB.value = v;
-  }
-  get color() {
-    return this._color.value;
-  }
-  set color(v) {
-    this._color.value = v;
-  }
-  get lightProjMatrix() {
-    return this._lightProjMatrix.value;
-  }
-  set lightProjMatrix(v) {
-    this._lightProjMatrix.value = v;
-  }
-  get lightViewMatrix() {
-    return this._lightViewMatrix.value;
-  }
-  set lightViewMatrix(v) {
-    this._lightViewMatrix.value = v;
-  }
 }
-class CausticsMaterial extends MeshBasicNodeMaterial {
-  _cameraMatrixWorld;
-  _cameraProjectionMatrixInv;
-  _normalTexture;
-  _depthTexture;
-  _lightDir;
-  _lightPlaneNormal;
-  _lightPlaneConstant;
-  _near;
-  _far;
-  _worldRadius;
-  _ior;
-  _resolution;
-  _size;
-  _intensity;
+class CausticsMaterial extends withUniforms(MeshBasicNodeMaterial, {
+  /** World matrix of the light camera */
+  cameraMatrixWorld: () => uniform(new THREE.Matrix4()),
+  /** Inverse projection matrix of the light camera, for depth reconstruction */
+  cameraProjectionMatrixInv: () => uniform(new THREE.Matrix4()),
+  /** World-space normals of the refractive geometry, rendered by CausticsNormalMaterial */
+  normalTexture: () => uniformTexture(new THREE.Texture()),
+  /** Depth of the refractive geometry, from the same render target as `normalTexture` */
+  depthTexture: () => uniformTexture(new THREE.Texture()),
+  /** Direction light travels in (inverse of the light position direction) */
+  lightDir: () => uniform(new THREE.Vector3(0, 1, 0)),
+  /** Normal of the receiving plane in light space */
+  lightPlaneNormal: () => uniform(new THREE.Vector3(0, 1, 0)),
+  /** Plane constant of the receiving plane */
+  lightPlaneConstant: () => uniform(0),
+  /** Light camera near plane */
+  near: () => uniform(0.1),
+  /** Light camera far plane */
+  far: () => uniform(100),
+  /** The texel size in world units */
+  worldRadius: () => uniform(1 / 40),
+  /** Refraction index of the surface */
+  ior: () => uniform(1.1),
+  /** Buffer resolution in pixels */
+  resolution: () => uniform(1024),
+  /** Half-extent of the light camera frustum */
+  size: () => uniform(10),
+  /** Intensity of the projected caustics */
+  intensity: () => uniform(0.5)
+}) {
   constructor() {
     super();
-    this._cameraMatrixWorld = uniform(new THREE.Matrix4());
-    this._cameraProjectionMatrixInv = uniform(new THREE.Matrix4());
-    this._normalTexture = uniformTexture(new THREE.Texture());
-    this._depthTexture = uniformTexture(new THREE.Texture());
-    this._lightDir = uniform(new THREE.Vector3(0, 1, 0));
-    this._lightPlaneNormal = uniform(new THREE.Vector3(0, 1, 0));
-    this._lightPlaneConstant = uniform(0);
-    this._near = uniform(0.1);
-    this._far = uniform(100);
-    this._worldRadius = uniform(1 / 40);
-    this._ior = uniform(1.1);
-    this._resolution = uniform(1024);
-    this._size = uniform(10);
-    this._intensity = uniform(0.5);
     this._buildShader();
   }
   _buildShader() {
-    const cameraMatrixWorld = this._cameraMatrixWorld;
-    const cameraProjectionMatrixInv = this._cameraProjectionMatrixInv;
-    const normalTexture = this._normalTexture;
-    const depthTexture = this._depthTexture;
-    const lightDir = this._lightDir;
-    const lightPlaneNormal = this._lightPlaneNormal;
-    const lightPlaneConstant = this._lightPlaneConstant;
-    const worldRadius = this._worldRadius;
-    const ior = this._ior;
-    const resolution = this._resolution;
-    const size = this._size;
-    const intensity = this._intensity;
+    const {
+      cameraMatrixWorld,
+      cameraProjectionMatrixInv,
+      normalTexture,
+      depthTexture,
+      lightDir,
+      lightPlaneNormal,
+      lightPlaneConstant,
+      worldRadius,
+      ior,
+      resolution,
+      size,
+      intensity
+    } = this.uniforms;
     const worldPosFromDepth = Fn(({ depth, coord }) => {
       const z = depth.mul(2).sub(1);
       const clipSpacePos = vec4(coord.mul(2).sub(1), z, 1);
@@ -491,7 +835,7 @@ class CausticsMaterial extends MeshBasicNodeMaterial {
     );
     this.colorNode = Fn(() => {
       const baseUv = uv();
-      const centerDepth = texture(depthTexture, baseUv).x;
+      const centerDepth = depthTexture.sample(baseUv).x;
       const causticTexelSize = div(float(1), resolution).mul(size).mul(2);
       const texelsNeeded = div(worldRadius, causticTexelSize);
       const sampleRadius = div(texelsNeeded, resolution);
@@ -503,14 +847,14 @@ class CausticsMaterial extends MeshBasicNodeMaterial {
       const uv2 = add(baseUv, mul(offset2, sampleRadius));
       const uv3 = add(baseUv, mul(offset3, sampleRadius));
       const uv4 = add(baseUv, mul(offset4, sampleRadius));
-      const normal1 = sub(mul(texture(normalTexture, uv1).rgb, 2), 1);
-      const normal2 = sub(mul(texture(normalTexture, uv2).rgb, 2), 1);
-      const normal3 = sub(mul(texture(normalTexture, uv3).rgb, 2), 1);
-      const normal4 = sub(mul(texture(normalTexture, uv4).rgb, 2), 1);
-      const depth1 = texture(depthTexture, uv1).x;
-      const depth2 = texture(depthTexture, uv2).x;
-      const depth3 = texture(depthTexture, uv3).x;
-      const depth4 = texture(depthTexture, uv4).x;
+      const normal1 = sub(mul(normalTexture.sample(uv1).rgb, 2), 1);
+      const normal2 = sub(mul(normalTexture.sample(uv2).rgb, 2), 1);
+      const normal3 = sub(mul(normalTexture.sample(uv3).rgb, 2), 1);
+      const normal4 = sub(mul(normalTexture.sample(uv4).rgb, 2), 1);
+      const depth1 = depthTexture.sample(uv1).x;
+      const depth2 = depthTexture.sample(uv2).x;
+      const depth3 = depthTexture.sample(uv3).x;
+      const depth4 = depthTexture.sample(uv4).x;
       const pos1 = worldPosFromDepth({ depth: depth1, coord: uv1 });
       const pos2 = worldPosFromDepth({ depth: depth2, coord: uv2 });
       const pos3 = worldPosFromDepth({ depth: depth3, coord: uv3 });
@@ -549,91 +893,6 @@ class CausticsMaterial extends MeshBasicNodeMaterial {
       return vec4(vec3(finalCaustic), 1);
     })();
   }
-  //* Uniform Accessors ==============================
-  get cameraMatrixWorld() {
-    return this._cameraMatrixWorld.value;
-  }
-  set cameraMatrixWorld(v) {
-    this._cameraMatrixWorld.value = v;
-  }
-  get cameraProjectionMatrixInv() {
-    return this._cameraProjectionMatrixInv.value;
-  }
-  set cameraProjectionMatrixInv(v) {
-    this._cameraProjectionMatrixInv.value = v;
-  }
-  get normalTexture() {
-    return this._normalTexture.value;
-  }
-  set normalTexture(v) {
-    this._normalTexture.value = v ?? new THREE.Texture();
-  }
-  get depthTexture() {
-    return this._depthTexture.value;
-  }
-  set depthTexture(v) {
-    this._depthTexture.value = v ?? new THREE.Texture();
-  }
-  get lightDir() {
-    return this._lightDir.value;
-  }
-  set lightDir(v) {
-    this._lightDir.value = v;
-  }
-  get lightPlaneNormal() {
-    return this._lightPlaneNormal.value;
-  }
-  set lightPlaneNormal(v) {
-    this._lightPlaneNormal.value = v;
-  }
-  get lightPlaneConstant() {
-    return this._lightPlaneConstant.value;
-  }
-  set lightPlaneConstant(v) {
-    this._lightPlaneConstant.value = v;
-  }
-  get near() {
-    return this._near.value;
-  }
-  set near(v) {
-    this._near.value = v;
-  }
-  get far() {
-    return this._far.value;
-  }
-  set far(v) {
-    this._far.value = v;
-  }
-  get worldRadius() {
-    return this._worldRadius.value;
-  }
-  set worldRadius(v) {
-    this._worldRadius.value = v;
-  }
-  get ior() {
-    return this._ior.value;
-  }
-  set ior(v) {
-    this._ior.value = v;
-  }
-  get resolution() {
-    return this._resolution.value;
-  }
-  set resolution(v) {
-    this._resolution.value = v;
-  }
-  get size() {
-    return this._size.value;
-  }
-  set size(v) {
-    this._size.value = v;
-  }
-  get intensity() {
-    return this._intensity.value;
-  }
-  set intensity(v) {
-    this._intensity.value = v;
-  }
 }
 class CausticsNormalMaterial extends MeshNormalNodeMaterial {
   constructor(side = THREE.FrontSide) {
@@ -645,225 +904,376 @@ class CausticsNormalMaterial extends MeshNormalNodeMaterial {
   }
 }
 
-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));
-  }
-);
-class MeshTransmissionMaterialImpl extends MeshPhysicalNodeMaterial {
-  //* Private Uniform Nodes --
+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;
-  _time;
+  _timeUniform;
   _distortion;
   _distortionScale;
   _temporalDistortion;
-  _buffer;
-  _transmissionValue;
-  _attenuationDistance;
-  _attenuationColor;
   _samples;
-  _transmissionSampler;
+  _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 = bufferTex.sample(uvR);
+          const sampleG = bufferTex.sample(uvG);
+          const sampleB = bufferTex.sample(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 = bufferTex.sample(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 = bufferTex.sample(splitSampleUV);
+        const directSampleNoFlip = bufferTex.sample(screenUV.clamp(1e-3, 0.999));
+        const centerSample = bufferTex.sample(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 = bufferTex.sample(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));
+    }
+  }
+}
+function createPlaceholderTexture() {
+  const placeholder = new THREE.DataTexture(new Uint8Array([255, 255, 255, 255]), 1, 1);
+  placeholder.needsUpdate = true;
+  return placeholder;
+}
+class MeshTransmissionMaterialImpl extends withUniforms(MeshPhysicalNodeMaterial, {
+  /** Chromatic aberration, default: 0.05 */
+  chromaticAberration: () => uniform(0.05),
+  /** Anisotropic blur, default: 0.1 */
+  anisotropicBlur: () => uniform(0.1),
+  /** Elapsed time, drives the temporal distortion */
+  time: () => uniform(0),
+  /** Distortion, default: 0 */
+  distortion: () => uniform(0),
+  /** Distortion scale, default: 0.5 */
+  distortionScale: () => uniform(0.5),
+  /** Temporal distortion (speed of movement), default: 0 */
+  temporalDistortion: () => uniform(0),
+  /** The scene rendered into a texture (use it to share a texture between materials) */
+  buffer: () => uniformTexture(createPlaceholderTexture()),
+  /** Debug mode for development (0 = normal, 1-19 = various debug outputs), default: 0 */
+  debugMode: () => uniform(0)
+}) {
   /** Type flag for identification */
   isMeshTransmissionMaterial = true;
+  _samples;
+  _transmissionSampler;
   constructor(samples = 6, transmissionSampler = false) {
     super();
     this._samples = samples;
     this._transmissionSampler = transmissionSampler;
-    this._chromaticAberration = uniform(0.05);
-    this._anisotropicBlur = uniform(0.1);
-    this._time = uniform(0);
-    this._distortion = uniform(0);
-    this._distortionScale = uniform(0.5);
-    this._temporalDistortion = uniform(0);
-    this._buffer = uniformTexture(new THREE.Texture());
-    this._transmissionValue = uniform(1);
-    this._attenuationDistance = uniform(Infinity);
-    this._attenuationColor = uniform(new THREE.Color("white"));
-    this.transmission = transmissionSampler ? 1 : 0;
+    this.transmission = 1;
     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);
-    })();
-  }
-  //* 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;
-  }
-  set buffer(v) {
-    this._buffer.value = v ?? new THREE.Texture();
-  }
-  /** Internal transmission value (use transmission prop instead) */
-  get _transmission() {
-    return this._transmissionValue.value;
-  }
-  set _transmission(v) {
-    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;
+    this.ior = 1.5;
+    this.transparent = true;
   }
-  set attenuationColor(v) {
-    this._attenuationColor.value = v;
+  setupLightingModel() {
+    if (this._transmissionSampler || !this.useTransmission) {
+      return super.setupLightingModel();
+    }
+    const {
+      buffer,
+      chromaticAberration,
+      anisotropicBlur,
+      time,
+      distortion,
+      distortionScale,
+      temporalDistortion,
+      debugMode
+    } = this.uniforms;
+    return new TransmissionLightingModel(
+      {
+        clearcoat: this.useClearcoat,
+        sheen: this.useSheen,
+        iridescence: this.useIridescence,
+        anisotropy: this.useAnisotropy,
+        dispersion: this.useDispersion
+      },
+      {
+        bufferTex: buffer,
+        chromaticAberration,
+        anisotropicBlur,
+        timeUniform: time,
+        distortion,
+        distortionScale,
+        temporalDistortion,
+        samples: this._samples,
+        debugMode
+      }
+    );
   }
 }
 const MeshTransmissionMaterial = /* @__PURE__ */ React.forwardRef(
@@ -872,8 +1282,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,
@@ -882,48 +1292,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, []);
@@ -934,33 +1407,46 @@ 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
       }
     );
   }
 );
 
-let MeshReflectorMaterial$1 = class MeshReflectorMaterial extends THREE.MeshStandardNodeMaterial {
+let MeshReflectorMaterial$1 = class MeshReflectorMaterial extends withUniforms(THREE.MeshStandardNodeMaterial, {
+  /** Mirror strength, 0 = base material only, 1 = pure reflection */
+  mirror: () => uniform(0),
+  /** Positive values enable the blurred reflection sample */
+  mixBlur: () => uniform(0),
+  /** Strength of the reflection added on top of the base colour */
+  mixStrength: () => uniform(1),
+  /** Lower depth threshold for depth-based blur */
+  minDepthThreshold: () => uniform(0.9),
+  /** Upper depth threshold for depth-based blur */
+  maxDepthThreshold: () => uniform(1),
+  /** Depth scale for depth-based blur, 0 = disabled */
+  depthScale: () => uniform(0),
+  /** Bias added to the depth-to-blur ratio */
+  depthToBlurRatioBias: () => uniform(0.25),
+  /** Distortion strength */
+  distortion: () => uniform(1),
+  /** Contrast applied to the (clamped) reflection colour */
+  mixContrast: () => uniform(1),
+  /** Blur radius in the 0-1 range, scaled to 0.01-0.15 in the shader */
+  blurRadius: () => uniform(0.1)
+}) {
   //* Reflector Node ----------------------------------------
   reflection;
-  //* Uniforms ----------------------------------------
-  mirrorUniform;
-  mixBlurUniform;
-  mixStrengthUniform;
-  minDepthThresholdUniform;
-  maxDepthThresholdUniform;
-  depthScaleUniform;
-  depthToBlurRatioBiasUniform;
-  distortionUniform;
-  mixContrastUniform;
-  blurRadiusUniform;
-  // Feature flags
-  hasBlurUniform;
-  hasDepthUniform;
+  /**
+   * Add this target to the scene and align it with the reflective surface.
+   */
+  get reflectorTarget() {
+    return this.reflection?.target;
+  }
   constructor(options = {}, parameters = {}) {
     super();
     const { distortionMap, ...validParams } = parameters;
@@ -984,109 +1470,37 @@ let MeshReflectorMaterial$1 = class MeshReflectorMaterial extends THREE.MeshStan
       resolutionScale,
       generateMipmaps: true
     });
-    this.mirrorUniform = uniform(mirror);
-    this.mixBlurUniform = uniform(mixBlur);
-    this.mixStrengthUniform = uniform(mixStrength);
-    this.minDepthThresholdUniform = uniform(minDepthThreshold);
-    this.maxDepthThresholdUniform = uniform(maxDepthThreshold);
-    this.depthScaleUniform = uniform(depthScale);
-    this.depthToBlurRatioBiasUniform = uniform(depthToBlurRatioBias);
-    this.distortionUniform = uniform(distortion);
-    this.mixContrastUniform = uniform(mixContrast);
-    this.blurRadiusUniform = uniform(0.1);
-    this.hasBlurUniform = uniform(mixBlur > 0 ? 1 : 0);
-    this.hasDepthUniform = uniform(depthScale > 0 ? 1 : 0);
+    this.mirror = mirror;
+    this.mixBlur = mixBlur;
+    this.mixStrength = mixStrength;
+    this.minDepthThreshold = minDepthThreshold;
+    this.maxDepthThreshold = maxDepthThreshold;
+    this.depthScale = depthScale;
+    this.depthToBlurRatioBias = depthToBlurRatioBias;
+    this.distortion = distortion;
+    this.mixContrast = mixContrast;
     this.setupNodes();
   }
   setupNodes() {
+    const { mirror, mixBlur, mixStrength, mixContrast, blurRadius } = this.uniforms;
     this.colorNode = Fn(() => {
       const reflectionSample = this.reflection.sample(this.reflection.uvNode);
-      const blurRadius = mix(float(0.01), float(0.15), this.blurRadiusUniform);
-      const reflectionBlurred = hashBlur(this.reflection, blurRadius, {
+      const radius = mix(float(0.01), float(0.15), blurRadius);
+      const reflectionBlurred = hashBlur(this.reflection, radius, {
         repeats: float(20),
         premultipliedAlpha: false
       });
-      const reflectionColor = mix(reflectionSample.rgb, reflectionBlurred.rgb, clamp(this.hasBlurUniform, 0, 1));
+      const reflectionColor = select(mixBlur.greaterThan(0), reflectionBlurred.rgb, reflectionSample.rgb);
       const reflectionClamped = clamp(reflectionColor, 0, 1);
       const contrastAdjusted = vec3(
-        reflectionClamped.x.sub(0.5).mul(this.mixContrastUniform).add(0.5),
-        reflectionClamped.y.sub(0.5).mul(this.mixContrastUniform).add(0.5),
-        reflectionClamped.z.sub(0.5).mul(this.mixContrastUniform).add(0.5)
+        reflectionClamped.x.sub(0.5).mul(mixContrast).add(0.5),
+        reflectionClamped.y.sub(0.5).mul(mixContrast).add(0.5),
+        reflectionClamped.z.sub(0.5).mul(mixContrast).add(0.5)
       );
-      const mirrorClamped = clamp(this.mirrorUniform, 0, 1);
-      return vec4(vec3(1).sub(vec3(mirrorClamped)).add(contrastAdjusted.mul(this.mixStrengthUniform)), 1);
+      const mirrorClamped = clamp(mirror, 0, 1);
+      return vec4(vec3(1).sub(vec3(mirrorClamped)).add(contrastAdjusted.mul(mixStrength)), 1);
     })();
   }
-  //* Getters and Setters ----------------------------------------
-  get mirror() {
-    return this.mirrorUniform.value;
-  }
-  set mirror(v) {
-    this.mirrorUniform.value = v;
-  }
-  get mixBlur() {
-    return this.mixBlurUniform.value;
-  }
-  set mixBlur(v) {
-    this.mixBlurUniform.value = v;
-    this.hasBlurUniform.value = v > 0 ? 1 : 0;
-  }
-  get mixStrength() {
-    return this.mixStrengthUniform.value;
-  }
-  set mixStrength(v) {
-    this.mixStrengthUniform.value = v;
-  }
-  get minDepthThreshold() {
-    return this.minDepthThresholdUniform.value;
-  }
-  set minDepthThreshold(v) {
-    this.minDepthThresholdUniform.value = v;
-  }
-  get maxDepthThreshold() {
-    return this.maxDepthThresholdUniform.value;
-  }
-  set maxDepthThreshold(v) {
-    this.maxDepthThresholdUniform.value = v;
-  }
-  get depthScale() {
-    return this.depthScaleUniform.value;
-  }
-  set depthScale(v) {
-    this.depthScaleUniform.value = v;
-    this.hasDepthUniform.value = v > 0 ? 1 : 0;
-  }
-  get depthToBlurRatioBias() {
-    return this.depthToBlurRatioBiasUniform.value;
-  }
-  set depthToBlurRatioBias(v) {
-    this.depthToBlurRatioBiasUniform.value = v;
-  }
-  get distortion() {
-    return this.distortionUniform.value;
-  }
-  set distortion(v) {
-    this.distortionUniform.value = v;
-  }
-  get mixContrast() {
-    return this.mixContrastUniform.value;
-  }
-  set mixContrast(v) {
-    this.mixContrastUniform.value = v;
-  }
-  get blurRadius() {
-    return this.blurRadiusUniform.value;
-  }
-  set blurRadius(v) {
-    this.blurRadiusUniform.value = v;
-  }
-  /**
-   * Get the reflector target mesh that needs to be added to the scene.
-   * The target should be positioned and rotated to match the reflective surface.
-   */
-  get reflectorTarget() {
-    return this.reflection.target;
-  }
 };
 
 const MeshReflectorMaterial = /* @__PURE__ */ React.forwardRef(
@@ -1189,25 +1603,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);
@@ -1217,165 +1622,64 @@ const approximateRefraction = /* @__PURE__ */ Fn((inputs) => {
   });
   return select(entryValid, currentDir, reflect(rayDir, normal));
 });
-class MeshRefractionMaterialImpl extends MeshPhysicalNodeMaterial {
-  //* Private Uniform Nodes --
-  _envMap;
-  _bounces;
-  _ior;
-  _fresnel;
-  _aberrationStrength;
-  _color;
-  _opacityValue;
-  _resolution;
-  _thickness;
+class MeshRefractionMaterialImpl extends withUniforms(MeshPhysicalNodeMaterial, {
+  /** Number of internal bounces, default: 3 */
+  bounces: () => uniform(3),
+  /** Fresnel intensity, default: 0 */
+  fresnel: () => uniform(0),
+  /** Chromatic aberration strength, default: 0.01 */
+  aberrationStrength: () => uniform(0.01),
+  /** Tint applied to the refracted environment, default: white */
+  tintColor: () => uniform(new THREE.Color("white"))
+}) {
   _fastChroma;
   /** Type flag for identification */
   isMeshRefractionMaterial = true;
   constructor(fastChroma = true) {
     super();
     this._fastChroma = fastChroma;
-    this._envMap = uniformTexture(new THREE.Texture());
-    this._bounces = uniform(3);
-    this._ior = uniform(2.4);
-    this._fresnel = uniform(0);
-    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.ior = 2.4;
+    this.envMap = new THREE.Texture();
+    this.lights = false;
     this.transparent = true;
     this.side = THREE.FrontSide;
     this._buildRefractionShader();
   }
   _buildRefractionShader() {
-    const envMapTex = this._envMap;
-    const bouncesUniform = this._bounces;
-    const iorUniform = this._ior;
-    const fresnelUniform = this._fresnel;
-    const aberrationUniform = this._aberrationStrength;
-    const colorUniform = this._color;
-    const opacityUniform = this._opacityValue;
-    const thicknessUniform = this._thickness;
+    const { bounces, fresnel, aberrationStrength, tintColor } = this.uniforms;
     const fastChroma = this._fastChroma;
+    const envSample = (uvNode) => context$a(materialReference("envMap", "texture", this), { getUV: () => uvNode });
     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 aberration = aberrationUniform;
+      const baseColor = tintColor.toVar();
+      const iorValue = max(materialIOR, 1);
+      const refractedDirG = approximateRefraction(viewDir, worldNormal, iorValue, bounces);
+      const aberration = aberrationStrength;
       const refractedDirR = vec3(0, 0, 0).toVar();
       const refractedDirB = vec3(0, 0, 0).toVar();
-      const useFastChroma = fastChroma;
-      if (useFastChroma) {
+      if (fastChroma) {
         refractedDirR.assign(normalize(refractedDirG.add(vec3(aberration.mul(0.5)))));
         refractedDirB.assign(normalize(refractedDirG.sub(vec3(aberration.mul(0.5)))));
       } else {
         refractedDirR.assign(
-          approximateRefraction(
-            viewDir,
-            worldNormal,
-            max(iorUniform.mul(float(1).sub(aberration)), 1),
-            bouncesUniform,
-            thicknessUniform
-          )
+          approximateRefraction(viewDir, worldNormal, max(materialIOR.mul(float(1).sub(aberration)), 1), bounces)
         );
         refractedDirB.assign(
-          approximateRefraction(
-            viewDir,
-            worldNormal,
-            max(iorUniform.mul(float(1).add(aberration)), 1),
-            bouncesUniform,
-            thicknessUniform
-          )
+          approximateRefraction(viewDir, worldNormal, max(materialIOR.mul(float(1).add(aberration)), 1), bounces)
         );
       }
-      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;
+      const envColorR = envSample(equirectUV(refractedDirR)).r;
+      const envColorG = envSample(equirectUV(refractedDirG)).g;
+      const envColorB = envSample(equirectUV(refractedDirB)).b;
       const envColor = vec3(envColorR, envColorG, envColorB);
       const tintedColor = envColor.mul(baseColor);
-      const fresnelValue = fresnelEffect(viewDir, worldNormal, float(10)).mul(fresnelUniform);
+      const fresnelValue = fresnelEffect(viewDir, worldNormal, float(10)).mul(fresnel);
       const finalColor = mix(tintedColor, vec3(1), fresnelValue);
-      return vec4(finalColor, opacityUniform);
+      return vec4(finalColor, materialOpacity);
     })();
   }
-  //* Uniform Accessors ==============================
-  /** Environment map texture */
-  get envMap() {
-    return this._envMap.value;
-  }
-  set envMap(v) {
-    if (v) {
-      this._envMap.value = v;
-    }
-  }
-  /** Number of internal bounces, default: 3 */
-  get bounces() {
-    return this._bounces.value;
-  }
-  set bounces(v) {
-    this._bounces.value = v;
-  }
-  /** Index of refraction, default: 2.4 (diamond) */
-  get ior() {
-    return this._ior.value;
-  }
-  set ior(v) {
-    this._ior.value = v;
-  }
-  /** Fresnel intensity, default: 0 */
-  get fresnel() {
-    return this._fresnel.value;
-  }
-  set fresnel(v) {
-    this._fresnel.value = v;
-  }
-  /** Chromatic aberration strength, default: 0.01 */
-  get aberrationStrength() {
-    return this._aberrationStrength.value;
-  }
-  set aberrationStrength(v) {
-    this._aberrationStrength.value = v;
-  }
-  /** Tint color - use tintColor to avoid base class conflict */
-  get tintColor() {
-    return this._color.value;
-  }
-  set tintColor(v) {
-    if (v instanceof THREE.Color) this._color.value = v;
-    else this._color.value = new THREE.Color(v);
-  }
-  /** Opacity, default: 1 */
-  get opacity() {
-    return this._opacityValue.value;
-  }
-  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(
   ({
@@ -1391,12 +1695,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;
@@ -1604,175 +1902,88 @@ function Container$2({
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 }
 
-class PortalMaterialImpl extends MeshBasicNodeMaterial {
-  _blur;
-  _map;
-  _sdf;
-  _blend;
-  _size;
-  _resolution;
+class PortalMaterialImpl extends withUniforms(MeshBasicNodeMaterial, {
+  /** Edge fade blur, 0 = no blur */
+  blur: () => uniform(0),
+  /** Signed distance field of the parent geometry, generated on demand */
+  sdf: () => uniformTexture(new THREE.Texture()),
+  /** 0 = world scene, 0.5 = both, 1 = portal scene */
+  blend: () => uniform(0),
+  /** Largest SDF distance, used to normalise the field */
+  size: () => uniform(0),
+  /** Drawing-buffer size in pixels */
+  resolution: () => uniform(new THREE.Vector2())
+}) {
   constructor() {
     super();
-    this._blur = uniform(0);
-    this._map = uniformTexture(new THREE.Texture());
-    this._sdf = uniformTexture(new THREE.Texture());
-    this._blend = uniform(0);
-    this._size = uniform(0);
-    this._resolution = uniform(new THREE.Vector2());
+    this.map = new THREE.Texture();
     this._buildShader();
   }
   _buildShader() {
-    const blurUniform = this._blur;
-    const mapTex = this._map;
-    const sdfTex = this._sdf;
-    const sizeUniform = this._size;
-    const resolutionUniform = this._resolution;
+    const { blur, sdf, size, resolution } = this.uniforms;
+    const map = materialReference("map", "texture", this);
     this.colorNode = Fn(() => {
-      const screenUv = screenCoordinate.xy.div(resolutionUniform);
-      const t = texture(mapTex, screenUv);
-      const meshUv = uv();
-      const d = texture(sdfTex, meshUv).r.div(sizeUniform);
-      const k = blurUniform;
-      const edgeFactor = clamp(d.div(k).add(1), 0, 1);
+      const screenUv = screenCoordinate.xy.div(resolution);
+      const t = context$a(map, { getUV: () => screenUv });
+      const d = sdf.sample(uv()).r.div(size);
+      const edgeFactor = clamp(d.div(blur).add(1), 0, 1);
       const alpha = float(1).sub(smoothstep(float(0), float(1), edgeFactor));
-      const isBlurZero = k.equal(0);
-      const finalAlpha = select(isBlurZero, t.a, t.a.mul(alpha));
+      const finalAlpha = select(blur.equal(0), t.a, t.a.mul(alpha));
       return vec4(t.rgb, finalAlpha);
     })();
   }
-  //* Uniform Accessors --
-  get blur() {
-    return this._blur.value;
-  }
-  set blur(v) {
-    this._blur.value = v;
-  }
-  get map() {
-    return this._map.value;
-  }
-  set map(v) {
-    this._map.value = v ?? new THREE.Texture();
-  }
-  get sdf() {
-    return this._sdf.value;
-  }
-  set sdf(v) {
-    if (v) this._sdf.value = v;
-  }
-  get blend() {
-    return this._blend.value;
-  }
-  set blend(v) {
-    this._blend.value = v;
-  }
-  get size() {
-    return this._size.value;
-  }
-  set size(v) {
-    this._size.value = v;
-  }
-  get resolution() {
-    return this._resolution.value;
-  }
-  set resolution(v) {
-    if (Array.isArray(v)) this._resolution.value.set(v[0], v[1]);
-    else this._resolution.value.copy(v);
-  }
 }
-class BlendMaterial extends MeshBasicNodeMaterial {
-  _textureA;
-  _textureB;
-  _blend;
+class BlendMaterial extends withUniforms(MeshBasicNodeMaterial, {
+  textureA: () => uniformTexture(new THREE.Texture()),
+  textureB: () => uniformTexture(new THREE.Texture()),
+  blend: () => uniform(0)
+}) {
   constructor() {
     super();
-    this._textureA = uniformTexture(new THREE.Texture());
-    this._textureB = uniformTexture(new THREE.Texture());
-    this._blend = uniform(0);
-    this._buildShader();
-  }
-  _buildShader() {
-    const texA = this._textureA;
-    const texB = this._textureB;
-    const blendUniform = this._blend;
+    const { textureA, textureB, blend } = this.uniforms;
     this.colorNode = Fn(() => {
       const uvCoord = uv();
-      const ta = texture(texA, uvCoord);
-      const tb = texture(texB, uvCoord);
-      return mix(tb, ta, blendUniform);
+      return mix(textureB.sample(uvCoord), textureA.sample(uvCoord), blend);
     })();
   }
-  get textureA() {
-    return this._textureA.value;
-  }
-  set textureA(v) {
-    this._textureA.value = v;
-  }
-  get textureB() {
-    return this._textureB.value;
-  }
-  set textureB(v) {
-    this._textureB.value = v;
-  }
-  get blend() {
-    return this._blend.value;
-  }
-  set blend(v) {
-    this._blend.value = v;
-  }
 }
-class UVRenderMaterial extends MeshBasicNodeMaterial {
-  _tex;
-  _inside;
+class UVRenderMaterial extends withUniforms(MeshBasicNodeMaterial, {
+  tex: () => uniformTexture(new THREE.Texture()),
+  /** 1 = pack the inside of the mask, 0 = the outside */
+  inside: () => uniform(0)
+}) {
   constructor(inside = false) {
-    super();
-    this._tex = uniformTexture(new THREE.Texture());
-    this._inside = uniform(inside ? 1 : 0);
-    this._buildShader();
-  }
-  _buildShader() {
-    const tex = this._tex;
-    const insideUniform = this._inside;
-    this.colorNode = Fn(() => {
+    super({ toneMapped: false });
+    this.inside = inside ? 1 : 0;
+    const { tex, inside: insideUniform } = this.uniforms;
+    this.fragmentNode = Fn(() => {
       const uvCoord = uv();
-      const mask = texture(tex, uvCoord).x;
-      const roundedMask = round(mask);
+      const roundedMask = round(tex.sample(uvCoord).x);
       const isInside = insideUniform.greaterThan(0.5);
       const factor = select(isInside, float(1).sub(roundedMask), roundedMask);
       const packedUv = uvCoord.mul(factor);
       return vec4(packedUv.x, packedUv.y, 0, 1);
     })();
   }
-  get tex() {
-    return this._tex.value;
-  }
-  set tex(v) {
-    this._tex.value = v;
-  }
 }
-class JumpFloodMaterial extends MeshBasicNodeMaterial {
-  _tex;
-  _offset;
-  _texelSize;
+class JumpFloodMaterial extends withUniforms(MeshBasicNodeMaterial, {
+  tex: () => uniformTexture(new THREE.Texture()),
+  offset: () => uniform(0),
+  texelSize: () => uniform(new THREE.Vector2(1, 1))
+}) {
   constructor(clientWidth, clientHeight) {
-    super();
-    this._tex = uniformTexture(new THREE.Texture());
-    this._offset = uniform(0);
-    this._texelSize = uniform(new THREE.Vector2(1 / clientWidth, 1 / clientHeight));
-    this._buildShader();
-  }
-  _buildShader() {
-    const tex = this._tex;
-    const offsetUniform = this._offset;
-    const texelSizeUniform = this._texelSize;
-    this.colorNode = Fn(() => {
+    super({ toneMapped: false });
+    this.uniforms.texelSize.value.set(1 / clientWidth, 1 / clientHeight);
+    const { tex, offset, texelSize } = this.uniforms;
+    this.fragmentNode = Fn(() => {
       const uvCoord = uv();
       const closestDist = float(99999999e-1).toVar();
       const closestPos = vec2$2(0, 0).toVar();
       Loop({ start: int(-1), end: int(2), type: "int", condition: "<" }, ({ i: x }) => {
         Loop({ start: int(-1), end: int(2), type: "int", condition: "<" }, ({ i: y }) => {
-          const sampleOffset = vec2$2(float(x), float(y)).mul(texelSizeUniform).mul(offsetUniform);
+          const sampleOffset = vec2$2(float(x), float(y)).mul(texelSize).mul(offset);
           const sampleUv = uvCoord.add(sampleOffset);
-          const pos = texture(tex, sampleUv).xy;
+          const pos = tex.sample(sampleUv).xy;
           const dist = distance(pos, uvCoord);
           const isValid = pos.x.notEqual(0).and(pos.y.notEqual(0));
           const isCloser = dist.lessThan(closestDist);
@@ -1784,88 +1995,40 @@ class JumpFloodMaterial extends MeshBasicNodeMaterial {
       return vec4(closestPos, 0, 1);
     })();
   }
-  get tex() {
-    return this._tex.value;
-  }
-  set tex(v) {
-    this._tex.value = v;
-  }
-  get offset() {
-    return this._offset.value;
-  }
-  set offset(v) {
-    this._offset.value = v;
-  }
 }
-class DistanceFieldMaterial extends MeshBasicNodeMaterial {
-  _tex;
-  _size;
+class DistanceFieldMaterial extends withUniforms(MeshBasicNodeMaterial, {
+  tex: () => uniformTexture(new THREE.Texture()),
+  size: () => uniform(new THREE.Vector2(1, 1))
+}) {
   constructor(clientWidth, clientHeight) {
-    super();
-    this._tex = uniformTexture(new THREE.Texture());
-    this._size = uniform(new THREE.Vector2(clientWidth, clientHeight));
-    this._buildShader();
-  }
-  _buildShader() {
-    const tex = this._tex;
-    const sizeUniform = this._size;
-    this.colorNode = Fn(() => {
+    super({ toneMapped: false });
+    this.uniforms.size.value.set(clientWidth, clientHeight);
+    const { tex, size } = this.uniforms;
+    this.fragmentNode = Fn(() => {
       const uvCoord = uv();
-      const pos = texture(tex, uvCoord).xy;
-      const dist = distance(sizeUniform.mul(pos), sizeUniform.mul(uvCoord));
+      const pos = tex.sample(uvCoord).xy;
+      const dist = distance(size.mul(pos), size.mul(uvCoord));
       return vec4(dist, 0, 0, 1);
     })();
   }
-  get tex() {
-    return this._tex.value;
-  }
-  set tex(v) {
-    this._tex.value = v;
-  }
 }
-class CompositeMaterial extends MeshBasicNodeMaterial {
-  _inside;
-  _outside;
-  _mask;
+class CompositeMaterial extends withUniforms(MeshBasicNodeMaterial, {
+  inside: () => uniformTexture(new THREE.Texture()),
+  outside: () => uniformTexture(new THREE.Texture()),
+  mask: () => uniformTexture(new THREE.Texture())
+}) {
   constructor() {
-    super();
-    this._inside = uniformTexture(new THREE.Texture());
-    this._outside = uniformTexture(new THREE.Texture());
-    this._mask = uniformTexture(new THREE.Texture());
-    this._buildShader();
-  }
-  _buildShader() {
-    const insideTex = this._inside;
-    const outsideTex = this._outside;
-    const maskTex = this._mask;
-    this.colorNode = Fn(() => {
+    super({ toneMapped: false });
+    const { inside, outside, mask } = this.uniforms;
+    this.fragmentNode = Fn(() => {
       const uvCoord = uv();
-      const i = texture(insideTex, uvCoord).x;
-      const o = texture(outsideTex, uvCoord).x;
-      const maskVal = texture(maskTex, uvCoord).x;
-      const isOutside = maskVal.equal(0);
-      const result = select(isOutside, o, i.negate());
+      const i = inside.sample(uvCoord).x;
+      const o = outside.sample(uvCoord).x;
+      const maskVal = mask.sample(uvCoord).x;
+      const result = select(maskVal.equal(0), o, i.negate());
       return vec4(result, 0, 0, 1);
     })();
   }
-  get inside() {
-    return this._inside.value;
-  }
-  set inside(v) {
-    this._inside.value = v;
-  }
-  get outside() {
-    return this._outside.value;
-  }
-  set outside(v) {
-    this._outside.value = v;
-  }
-  get mask() {
-    return this._mask.value;
-  }
-  set mask(v) {
-    this._mask.value = v;
-  }
 }
 const makeSDFGenerator = (clientWidth, clientHeight, renderer) => {
   const finalTarget = new RenderTarget(clientWidth, clientHeight, {
@@ -1913,7 +2076,7 @@ const makeSDFGenerator = (clientWidth, clientHeight, renderer) => {
   const jumpFloodQuad = new QuadMesh(jumpFloodMat);
   const distanceFieldQuad = new QuadMesh(distanceFieldMat);
   const compositeQuad = new QuadMesh(compositeMat);
-  return (image) => {
+  const generate = (image) => {
     image.minFilter = THREE.NearestFilter;
     image.magFilter = THREE.NearestFilter;
     uvRenderMat.tex = image;
@@ -1955,9 +2118,28 @@ const makeSDFGenerator = (clientWidth, clientHeight, renderer) => {
     compositeMat.outside = outsideRenderTargetFinal.texture;
     compositeMat.mask = image;
     compositeQuad.render(renderer);
-    renderer.setRenderTarget(null);
     return finalTarget;
   };
+  return {
+    generate,
+    dispose() {
+      for (const resource of [
+        finalTarget,
+        outsideRenderTarget,
+        insideRenderTarget,
+        outsideRenderTarget2,
+        insideRenderTarget2,
+        outsideRenderTargetFinal,
+        insideRenderTargetFinal,
+        uvRenderMat,
+        uvRenderInsideMat,
+        jumpFloodMat,
+        distanceFieldMat,
+        compositeMat
+      ])
+        resource.dispose();
+    }
+  };
 };
 const MeshPortalMaterial = /* @__PURE__ */ React.forwardRef(
   ({
@@ -1972,7 +2154,7 @@ const MeshPortalMaterial = /* @__PURE__ */ React.forwardRef(
   }, fref) => {
     extend({ PortalMaterialImpl });
     const ref = React.useRef(null);
-    const { scene, gl, size, viewport, setEvents } = useThree();
+    const { scene, renderer, size, viewport, setEvents, invalidate } = useThree();
     const maskRenderTarget = useFBO(resolution, resolution);
     const [priority, setPriority] = React.useState(0);
     useFrame(() => {
@@ -1983,43 +2165,69 @@ const MeshPortalMaterial = /* @__PURE__ */ React.forwardRef(
       if (events !== void 0) setEvents({ enabled: !events });
     }, [events]);
     const [visible, setVisible] = React.useState(true);
+    const needsSdf = blur !== 0;
     const parent = useIntersect(setVisible);
     React.useLayoutEffect(() => {
       parent.current = ref.current?.__r3f?.parent?.object;
     }, []);
     React.useLayoutEffect(() => {
-      if (!parent.current) return;
-      if (blur && ref.current.sdf === null) {
-        const tempMesh = new THREE.Mesh(parent.current.geometry, new THREE.MeshBasicMaterial());
-        const boundingBox = new THREE.Box3().setFromBufferAttribute(
-          tempMesh.geometry.attributes.position
-        );
-        const orthoCam = new THREE.OrthographicCamera(
-          boundingBox.min.x * (1 + 2 / resolution),
-          boundingBox.max.x * (1 + 2 / resolution),
-          boundingBox.max.y * (1 + 2 / resolution),
-          boundingBox.min.y * (1 + 2 / resolution),
-          0.1,
-          1e3
-        );
-        orthoCam.position.set(0, 0, 1);
-        orthoCam.lookAt(0, 0, 0);
-        gl.setRenderTarget(maskRenderTarget);
-        gl.render(tempMesh, orthoCam);
-        const sg = makeSDFGenerator(resolution, resolution, gl);
-        const sdf = sg(maskRenderTarget.texture);
-        const readSdf = new Float32Array(resolution * resolution);
-        gl.readRenderTargetPixels(sdf, 0, 0, resolution, resolution, readSdf);
+      if (!parent.current || !needsSdf) return;
+      const material = ref.current;
+      const previousSdf = material.sdf;
+      const previousSize = material.size;
+      const gpuRenderer = renderer;
+      const tempMesh = new THREE.Mesh(parent.current.geometry, new THREE.MeshBasicMaterial());
+      const boundingBox = new THREE.Box3().setFromBufferAttribute(
+        tempMesh.geometry.attributes.position
+      );
+      const orthoCam = new THREE.OrthographicCamera(
+        boundingBox.min.x * (1 + 2 / resolution),
+        boundingBox.max.x * (1 + 2 / resolution),
+        boundingBox.max.y * (1 + 2 / resolution),
+        boundingBox.min.y * (1 + 2 / resolution),
+        0.1,
+        1e3
+      );
+      orthoCam.position.set(0, 0, 1);
+      orthoCam.lookAt(0, 0, 0);
+      const sg = makeSDFGenerator(resolution, resolution, gpuRenderer);
+      const previousTarget = gpuRenderer.getRenderTarget();
+      const previousClearColor = gpuRenderer.getClearColor(new THREE.Color());
+      const previousClearAlpha = gpuRenderer.getClearAlpha();
+      let sdf;
+      try {
+        gpuRenderer.setClearColor(0, 0);
+        gpuRenderer.setRenderTarget(maskRenderTarget);
+        gpuRenderer.render(tempMesh, orthoCam);
+        sdf = sg.generate(maskRenderTarget.texture);
+      } catch (error) {
+        sg.dispose();
+        throw error;
+      } finally {
+        gpuRenderer.setRenderTarget(previousTarget);
+        gpuRenderer.setClearColor(previousClearColor, previousClearAlpha);
+        tempMesh.material.dispose();
+      }
+      let cancelled = false;
+      gpuRenderer.readRenderTargetPixelsAsync(sdf, 0, 0, resolution, resolution).then((readSdf) => {
+        if (cancelled) return;
         let min = Infinity;
         for (let i = 0; i < readSdf.length; i++) {
           if (readSdf[i] < min) min = readSdf[i];
         }
-        min = -min;
-        ref.current.size = min;
-        ref.current.sdf = sdf.texture;
-        gl.setRenderTarget(null);
-      }
-    }, [resolution, blur]);
+        material.size = -min;
+        material.sdf = sdf.texture;
+        invalidate();
+      }).catch((error) => {
+        if (!cancelled) console.error("MeshPortalMaterial: SDF readback failed.", error);
+      });
+      return () => {
+        cancelled = true;
+        material.sdf = previousSdf;
+        material.size = previousSize;
+        sg.dispose();
+      };
+    }, [resolution, needsSdf, renderer, maskRenderTarget, invalidate]);
     React.useImperativeHandle(fref, () => ref.current);
     const compute = React.useCallback(
       (event, state, _previous) => {
@@ -2124,44 +2332,27 @@ function ManagePortalScene({
   return /* @__PURE__ */ React.createElement(React.Fragment, null);
 }
 
-class DistortMaterialImplWebGPU extends THREE.MeshPhysicalNodeMaterial {
-  timeUniform;
-  distortUniform;
-  radiusUniform;
+class DistortMaterialImplWebGPU extends withUniforms(THREE.MeshPhysicalNodeMaterial, {
+  /** Animation time, advanced by the component each frame */
+  time: () => uniform(0),
+  /** Distortion intensity */
+  distort: () => uniform(0.4),
+  /** Base scale the distortion is added to */
+  radius: () => uniform(1)
+}) {
   constructor(parameters = {}) {
     super(parameters);
-    this.setValues(parameters);
-    this.timeUniform = uniform(0);
-    this.distortUniform = uniform(0.4);
-    this.radiusUniform = uniform(1);
+    const { time, distort, radius } = this.uniforms;
     this.positionNode = Fn(() => {
       const pos = positionLocal.toVar();
-      const updateTime = this.timeUniform.div(50);
+      const updateTime = time.div(50);
       const noiseInput = pos.div(2).add(updateTime.mul(5));
       const noiseVec = mx_noise_vec3(noiseInput);
       const noise = noiseVec.x;
-      const distortFactor = noise.mul(pow(this.distortUniform, float(2))).add(this.radiusUniform);
+      const distortFactor = noise.mul(pow(distort, float(2))).add(radius);
       return pos.mul(distortFactor);
     })();
   }
-  get time() {
-    return this.timeUniform.value;
-  }
-  set time(v) {
-    this.timeUniform.value = v;
-  }
-  get distort() {
-    return this.distortUniform.value;
-  }
-  set distort(v) {
-    this.distortUniform.value = v;
-  }
-  get radius() {
-    return this.radiusUniform.value;
-  }
-  set radius(v) {
-    this.radiusUniform.value = v;
-  }
 }
 const MeshDistortMaterial = /* @__PURE__ */ React.forwardRef(({ speed = 1, ...props }, ref) => {
   const [material] = React.useState(() => new DistortMaterialImplWebGPU());
@@ -2169,17 +2360,18 @@ const MeshDistortMaterial = /* @__PURE__ */ React.forwardRef(({ speed = 1, ...pr
   return /* @__PURE__ */ React.createElement("primitive", { object: material, ref, attach: "material", ...props });
 });
 
-class WobbleMaterialImpl extends THREE.MeshStandardNodeMaterial {
-  timeUniform;
-  factorUniform;
+class WobbleMaterialImpl extends withUniforms(THREE.MeshStandardNodeMaterial, {
+  /** Animation time, advanced by the component each frame */
+  time: () => uniform(0),
+  /** Wobble strength */
+  factor: () => uniform(1)
+}) {
   constructor(parameters = {}) {
     super(parameters);
-    this.setValues(parameters);
-    this.timeUniform = uniform(0);
-    this.factorUniform = uniform(1);
+    const { time, factor } = this.uniforms;
     this.positionNode = Fn(() => {
       const pos = positionLocal.toVar();
-      const theta = sin(this.timeUniform.add(pos.y)).div(2).mul(this.factorUniform);
+      const theta = sin(time.add(pos.y)).div(2).mul(factor);
       const c = cos(theta);
       const s = sin(theta);
       const rotMatrix = mat3(c, float(0), s, float(0), float(1), float(0), s.negate(), float(0), c);
@@ -2188,25 +2380,13 @@ class WobbleMaterialImpl extends THREE.MeshStandardNodeMaterial {
     this.normalNode = Fn(() => {
       const pos = positionLocal.toVar();
       const norm = normalLocal.toVar();
-      const theta = sin(this.timeUniform.add(pos.y)).div(2).mul(this.factorUniform);
+      const theta = sin(time.add(pos.y)).div(2).mul(factor);
       const c = cos(theta);
       const s = sin(theta);
       const rotMatrix = mat3(c, float(0), s, float(0), float(1), float(0), s.negate(), float(0), c);
       return norm.mul(rotMatrix);
     })();
   }
-  get time() {
-    return this.timeUniform.value;
-  }
-  set time(v) {
-    this.timeUniform.value = v;
-  }
-  get factor() {
-    return this.factorUniform.value;
-  }
-  set factor(v) {
-    this.factorUniform.value = v;
-  }
 }
 const MeshWobbleMaterial = /* @__PURE__ */ React.forwardRef(({ speed = 1, ...props }, ref) => {
   const [material] = React.useState(() => new WobbleMaterialImpl());
@@ -2225,84 +2405,36 @@ function FakeCloudMaterial(BaseMaterial) {
   return mat;
 }
 
-class OutlinesMaterial extends MeshBasicNodeMaterial {
-  //* Private Uniform Nodes --
-  _screenspace;
-  // Using number as bool (0/1)
-  _color;
-  _opacityValue;
-  _thickness;
-  _size;
+class OutlinesMaterial extends withUniforms(MeshBasicNodeMaterial, {
+  /** Whether thickness is constant in screen pixels */
+  screenspace: () => uniform(false),
+  /** Outline thickness */
+  thickness: () => uniform(0.05),
+  /** Drawing-buffer size, for screenspace thickness */
+  size: () => uniform(new THREE.Vector2(1, 1))
+}) {
   /** Type flag for identification */
   isOutlinesMaterial = true;
   constructor() {
     super();
-    this._screenspace = uniform(0);
-    this._color = uniform(new THREE.Color("black"));
-    this._opacityValue = uniform(1);
-    this._thickness = uniform(0.05);
-    this._size = uniform(new THREE.Vector2(1, 1));
+    this.color.set("black");
     this.side = THREE.BackSide;
     this.transparent = false;
     this._buildOutlineShader();
   }
   _buildOutlineShader() {
-    const screenspaceUniform = this._screenspace;
-    const colorUniform = this._color;
-    const opacityUniform = this._opacityValue;
-    const thicknessUniform = this._thickness;
-    const sizeUniform = this._size;
+    const { screenspace, thickness, size } = this.uniforms;
     this.positionNode = Fn(() => {
       const position = positionLocal.toVar();
       const normal = normalLocal.toVar();
-      const isScreenspace = screenspaceUniform.greaterThan(0.5);
-      const screenspacePos = position.add(normal.mul(thicknessUniform));
+      const screenspacePos = position.add(normal.mul(thickness));
       const clipPos = cameraProjectionMatrix.mul(modelViewMatrix.mul(vec4(position, 1)));
       const clipNormal = cameraProjectionMatrix.mul(modelViewMatrix.mul(vec4(normal, 0)));
-      normalize(clipNormal.xy).mul(thicknessUniform).div(sizeUniform).mul(clipPos.w).mul(2);
-      const worldOffset = normal.mul(thicknessUniform);
-      return select(isScreenspace, screenspacePos, position.add(worldOffset));
-    })();
-    this.outputNode = Fn(() => {
-      return vec4(colorUniform, opacityUniform);
+      normalize(clipNormal.xy).mul(thickness).div(size).mul(clipPos.w).mul(2);
+      const worldOffset = normal.mul(thickness);
+      return select(screenspace, screenspacePos, position.add(worldOffset));
     })();
-  }
-  //* Uniform Accessors ==============================
-  /** Whether to use screenspace thickness */
-  get screenspace() {
-    return this._screenspace.value > 0.5;
-  }
-  set screenspace(v) {
-    this._screenspace.value = v ? 1 : 0;
-  }
-  /** Outline color */
-  get color() {
-    return this._color.value;
-  }
-  set color(v) {
-    if (v instanceof THREE.Color) this._color.value = v;
-    else this._color.value = new THREE.Color(v);
-  }
-  /** Outline opacity */
-  get opacity() {
-    return this._opacityValue.value;
-  }
-  set opacity(v) {
-    this._opacityValue.value = v;
-  }
-  /** Outline thickness */
-  get thickness() {
-    return this._thickness.value;
-  }
-  set thickness(v) {
-    this._thickness.value = v;
-  }
-  /** Screen size for screenspace calculations */
-  get size() {
-    return this._size.value;
-  }
-  set size(v) {
-    this._size.value = v;
+    this.outputNode = Fn(() => vec4(materialColor, materialOpacity))();
   }
 }
 function Outlines({
@@ -2431,11 +2563,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;
@@ -2885,7 +3017,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]);
@@ -3268,9 +3400,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]],
@@ -3287,18 +3418,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(
     {
@@ -3306,6 +3439,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);
@@ -3314,9 +3448,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);
 }
@@ -3325,6 +3462,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();
@@ -3350,7 +3491,7 @@ const ScrollHtml = React.forwardRef(
     const group = React.useRef(null);
     React.useImperativeHandle(ref, () => group.current, []);
     const { width, height } = useThree((state2) => state2.size);
-    const fiberState = React.useContext(context$a);
+    const fiberState = React.useContext(context$b);
     const root = React.useMemo(() => {
       let root2 = rootCache.get(state.fixed);
       if (!root2) {
@@ -3378,7 +3519,7 @@ const ScrollHtml = React.forwardRef(
           style: { ...style, position: "absolute", top: 0, left: 0, willChange: "transform" },
           ...props
         },
-        /* @__PURE__ */ React.createElement(context$7.Provider, { value: state }, /* @__PURE__ */ React.createElement(context$a.Provider, { value: fiberState }, children))
+        /* @__PURE__ */ React.createElement(context$7.Provider, { value: state }, /* @__PURE__ */ React.createElement(context$b.Provider, { value: fiberState }, children))
       )
     );
     return null;
@@ -3690,10 +3831,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({
@@ -4215,7 +4356,7 @@ const Text3D = /* @__PURE__ */ React.forwardRef(
       return {
         font,
         size,
-        height,
+        depth: height,
         bevelThickness,
         bevelSize,
         bevelEnabled,
@@ -4398,7 +4539,7 @@ const FaceMaterial = ({
     "meshBasicMaterial",
     {
       map: texture,
-      "map-anisotropy": renderer.getMaxAnisotropy() || 1,
+      "map-anisotropy": getMaxAnisotropy(renderer),
       attach: `material-${index}`,
       color: hover ? hoverColor : "white",
       transparent: true,
@@ -4509,7 +4650,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
@@ -4654,6 +4795,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);
@@ -4683,22 +4825,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);
           }
@@ -4832,8 +4970,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);
@@ -4865,64 +5002,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));
   }
 );
 
@@ -5775,6 +5855,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();
@@ -5889,7 +5970,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);
@@ -5901,12 +5983,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) => {
@@ -6017,7 +6099,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);
       }
@@ -6116,7 +6200,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);
@@ -6128,7 +6212,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(() => {
@@ -6197,7 +6283,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);
@@ -6217,24 +6302,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();
@@ -6255,13 +6336,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;
+        };
       }
     }),
     []
@@ -6286,10 +6376,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 = []) {
@@ -7363,12 +7466,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]
     );
@@ -7376,21 +7480,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,
@@ -7561,7 +7665,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();
@@ -7613,8 +7717,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);
         }
       }
@@ -7834,9 +7938,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);
@@ -7852,36 +8072,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);
@@ -7892,17 +8186,26 @@ 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);
@@ -8096,6 +8399,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) {
@@ -8124,6 +8428,7 @@ const StatsGl = /* @__PURE__ */ React.forwardRef(
       const stats2 = new Stats$1({
         ...props
       });
+      stats2.init(renderer);
       return stats2;
     }, [renderer]);
     React.useImperativeHandle(fref, () => stats.domElement, [stats]);
@@ -8141,7 +8446,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]);
@@ -8149,7 +8454,7 @@ const StatsGl = /* @__PURE__ */ React.forwardRef(
       () => {
         stats.begin();
       },
-      { before: "render" }
+      { before: "update" }
     );
     useFrame(
       () => {
@@ -8314,8 +8619,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;
@@ -8507,7 +8813,7 @@ const HtmlView = /* @__PURE__ */ React.forwardRef(
 );
 const View = /* @__PURE__ */ (() => {
   const _View = React.forwardRef((props, fref) => {
-    const store = React.useContext(context$a);
+    const store = React.useContext(context$b);
     if (!store) return /* @__PURE__ */ React.createElement(HtmlView, { ref: fref, ...props });
     else return /* @__PURE__ */ React.createElement(CanvasView, { ref: fref, ...props });
   });
@@ -8875,12 +9181,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) {
@@ -9003,7 +9309,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]);
@@ -9574,9 +9880,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;
@@ -9664,62 +9975,63 @@ const remap = /* @__PURE__ */ Fn((inputs) => {
   const [value, min1, max1, min2, max2] = inputs;
   return min2.add(value.sub(min1).mul(max2.sub(min2)).div(max1.sub(min1)));
 });
-class WireframeMaterialImpl extends MeshBasicNodeMaterial {
-  //* Private Uniform Nodes --
-  _strokeOpacity;
-  _fillOpacity;
-  _fillMix;
-  _thickness;
-  _colorBackfaces;
-  // Using number as bool (0/1)
-  _dashInvert;
-  _dash;
-  _dashRepeats;
-  _dashLength;
-  _squeeze;
-  _squeezeMin;
-  _squeezeMax;
-  _stroke;
-  _backfaceStroke;
-  _fill;
+class WireframeMaterialImpl extends withUniforms(MeshBasicNodeMaterial, {
+  /** Stroke (edge) opacity, default: 1 */
+  strokeOpacity: () => uniform(1),
+  /** Fill opacity (background), default: 0.25 */
+  fillOpacity: () => uniform(0.25),
+  /** Mix factor between material color and fill color, default: 0 */
+  fillMix: () => uniform(0),
+  /** Edge thickness 0-1, default: 0.05 */
+  thickness: () => uniform(0.05),
+  /** Use different color for backfaces, default: false */
+  colorBackfaces: () => uniform(false),
+  /** Invert dash pattern, default: true */
+  dashInvert: () => uniform(true),
+  /** Enable dashed lines, default: false */
+  dash: () => uniform(false),
+  /** Number of dash repeats, default: 4 */
+  dashRepeats: () => uniform(4),
+  /** Dash length 0-1, default: 0.5 */
+  dashLength: () => uniform(0.5),
+  /** Squeeze thickness toward line center, default: false */
+  squeeze: () => uniform(false),
+  /** Minimum squeeze factor, default: 0.2 */
+  squeezeMin: () => uniform(0.2),
+  /** Maximum squeeze factor, default: 1 */
+  squeezeMax: () => uniform(1),
+  /** Stroke (edge) color */
+  stroke: () => uniform(new THREE.Color("#ff0000")),
+  /** Backface stroke color */
+  backfaceStroke: () => uniform(new THREE.Color("#0000ff")),
+  /** Fill (background) color */
+  fill: () => uniform(new THREE.Color("#00ff00"))
+}) {
   /** Type flag for identification */
   isWireframeMaterial = true;
   constructor() {
     super();
-    this._strokeOpacity = uniform(1);
-    this._fillOpacity = uniform(0.25);
-    this._fillMix = uniform(0);
-    this._thickness = uniform(0.05);
-    this._colorBackfaces = uniform(0);
-    this._dashInvert = uniform(1);
-    this._dash = uniform(0);
-    this._dashRepeats = uniform(4);
-    this._dashLength = uniform(0.5);
-    this._squeeze = uniform(0);
-    this._squeezeMin = uniform(0.2);
-    this._squeezeMax = uniform(1);
-    this._stroke = uniform(new THREE.Color("#ff0000"));
-    this._backfaceStroke = uniform(new THREE.Color("#0000ff"));
-    this._fill = uniform(new THREE.Color("#00ff00"));
     this.transparent = true;
     this.side = THREE.DoubleSide;
     this._buildWireframeShader();
   }
   _buildWireframeShader() {
-    const strokeOpacityUniform = this._strokeOpacity;
-    const fillOpacityUniform = this._fillOpacity;
-    const thicknessUniform = this._thickness;
-    const colorBackfacesUniform = this._colorBackfaces;
-    const dashInvertUniform = this._dashInvert;
-    const dashUniform = this._dash;
-    const dashRepeatsUniform = this._dashRepeats;
-    const dashLengthUniform = this._dashLength;
-    const squeezeUniform = this._squeeze;
-    const squeezeMinUniform = this._squeezeMin;
-    const squeezeMaxUniform = this._squeezeMax;
-    const strokeUniform = this._stroke;
-    const backfaceStrokeUniform = this._backfaceStroke;
-    const fillUniform = this._fill;
+    const {
+      strokeOpacity: strokeOpacityUniform,
+      fillOpacity: fillOpacityUniform,
+      thickness: thicknessUniform,
+      colorBackfaces: colorBackfacesUniform,
+      dashInvert: dashInvertUniform,
+      dash: dashUniform,
+      dashRepeats: dashRepeatsUniform,
+      dashLength: dashLengthUniform,
+      squeeze: squeezeUniform,
+      squeezeMin: squeezeMinUniform,
+      squeezeMax: squeezeMaxUniform,
+      stroke: strokeUniform,
+      backfaceStroke: backfaceStrokeUniform,
+      fill: fillUniform
+    } = this.uniforms;
     const barycentricAttr = attribute("barycentric", "vec3");
     const vBarycentric = varying(barycentricAttr, "v_barycentric");
     this.outputNode = Fn(() => {
@@ -9730,136 +10042,23 @@ class WireframeMaterialImpl extends MeshBasicNodeMaterial {
       const isYSmallest = barycentric.y.lessThan(barycentric.x).and(barycentric.y.lessThan(barycentric.z));
       positionAlong.assign(select(isYSmallest, float(1).sub(maxXY), maxXY));
       const computedThickness = remap(thicknessUniform, float(0), float(1), float(0), float(0.34)).toVar();
-      const squeezeEnabled = squeezeUniform.greaterThan(0.5);
       const squeezeFactor = mix(squeezeMinUniform, squeezeMaxUniform, float(1).sub(sin(positionAlong.mul(Math.PI))));
-      computedThickness.assign(select(squeezeEnabled, computedThickness.mul(squeezeFactor), computedThickness));
-      const dashEnabled = dashUniform.greaterThan(0.5);
-      const dashInverted = dashInvertUniform.greaterThan(0.5);
+      computedThickness.assign(select(squeezeUniform, computedThickness.mul(squeezeFactor), computedThickness));
       const baseOffset = float(1).div(dashRepeatsUniform).mul(dashLengthUniform).mul(0.5);
       const additionalOffset = float(1).div(dashRepeatsUniform).mul(0.5);
-      const dashOffset = select(dashInverted, baseOffset, baseOffset.add(additionalOffset));
+      const dashOffset = select(dashInvertUniform, baseOffset, baseOffset.add(additionalOffset));
       const pattern = fract(positionAlong.add(dashOffset).mul(dashRepeatsUniform));
       const dashMask = float(1).sub(aastep(dashLengthUniform, pattern));
-      computedThickness.assign(select(dashEnabled, computedThickness.mul(dashMask), computedThickness));
+      computedThickness.assign(select(dashUniform, computedThickness.mul(dashMask), computedThickness));
       const edge = float(1).sub(aastep(computedThickness, d));
-      const useBackfaceColor = colorBackfacesUniform.greaterThan(0.5);
       const isFrontFace = frontFacing;
-      const currentStroke = select(useBackfaceColor.and(isFrontFace.not()), backfaceStrokeUniform, strokeUniform);
+      const currentStroke = select(colorBackfacesUniform.and(isFrontFace.not()), backfaceStrokeUniform, strokeUniform);
       const colorStroke = vec4(currentStroke, edge);
       const colorFill = vec4(fillUniform, fillOpacityUniform);
       const outColor = mix(colorFill, colorStroke, edge.mul(strokeOpacityUniform));
       return outColor;
     })();
   }
-  //* Uniform Accessors ==============================
-  /** Stroke (edge) opacity, default: 1 */
-  get strokeOpacity() {
-    return this._strokeOpacity.value;
-  }
-  set strokeOpacity(v) {
-    this._strokeOpacity.value = v;
-  }
-  /** Fill opacity (background), default: 0.25 */
-  get fillOpacity() {
-    return this._fillOpacity.value;
-  }
-  set fillOpacity(v) {
-    this._fillOpacity.value = v;
-  }
-  /** Mix factor between material color and fill color, default: 0 */
-  get fillMix() {
-    return this._fillMix.value;
-  }
-  set fillMix(v) {
-    this._fillMix.value = v;
-  }
-  /** Edge thickness 0-1, default: 0.05 */
-  get thickness() {
-    return this._thickness.value;
-  }
-  set thickness(v) {
-    this._thickness.value = v;
-  }
-  /** Use different color for backfaces */
-  get colorBackfaces() {
-    return this._colorBackfaces.value > 0.5;
-  }
-  set colorBackfaces(v) {
-    this._colorBackfaces.value = v ? 1 : 0;
-  }
-  /** Invert dash pattern */
-  get dashInvert() {
-    return this._dashInvert.value > 0.5;
-  }
-  set dashInvert(v) {
-    this._dashInvert.value = v ? 1 : 0;
-  }
-  /** Enable dashed lines */
-  get dash() {
-    return this._dash.value > 0.5;
-  }
-  set dash(v) {
-    this._dash.value = v ? 1 : 0;
-  }
-  /** Number of dash repeats, default: 4 */
-  get dashRepeats() {
-    return this._dashRepeats.value;
-  }
-  set dashRepeats(v) {
-    this._dashRepeats.value = v;
-  }
-  /** Dash length 0-1, default: 0.5 */
-  get dashLength() {
-    return this._dashLength.value;
-  }
-  set dashLength(v) {
-    this._dashLength.value = v;
-  }
-  /** Squeeze thickness toward line center */
-  get squeeze() {
-    return this._squeeze.value > 0.5;
-  }
-  set squeeze(v) {
-    this._squeeze.value = v ? 1 : 0;
-  }
-  /** Minimum squeeze factor, default: 0.2 */
-  get squeezeMin() {
-    return this._squeezeMin.value;
-  }
-  set squeezeMin(v) {
-    this._squeezeMin.value = v;
-  }
-  /** Maximum squeeze factor, default: 1 */
-  get squeezeMax() {
-    return this._squeezeMax.value;
-  }
-  set squeezeMax(v) {
-    this._squeezeMax.value = v;
-  }
-  /** Stroke (edge) color */
-  get stroke() {
-    return this._stroke.value;
-  }
-  set stroke(v) {
-    if (v instanceof THREE.Color) this._stroke.value = v;
-    else this._stroke.value = new THREE.Color(v);
-  }
-  /** Backface stroke color */
-  get backfaceStroke() {
-    return this._backfaceStroke.value;
-  }
-  set backfaceStroke(v) {
-    if (v instanceof THREE.Color) this._backfaceStroke.value = v;
-    else this._backfaceStroke.value = new THREE.Color(v);
-  }
-  /** Fill (background) color */
-  get fill() {
-    return this._fill.value;
-  }
-  set fill(v) {
-    if (v instanceof THREE.Color) this._fill.value = v;
-    else this._fill.value = new THREE.Color(v);
-  }
 }
 function setBarycentricCoordinates(geometry) {
   const position = geometry.getAttribute("position");
@@ -9921,9 +10120,9 @@ const WireframeMaterial = /* @__PURE__ */ React.forwardRef(
         squeeze,
         squeezeMin,
         squeezeMax,
-        stroke: stroke instanceof THREE.Color ? stroke : new THREE.Color(stroke),
-        backfaceStroke: backfaceStroke instanceof THREE.Color ? backfaceStroke : new THREE.Color(backfaceStroke),
-        fill: fill instanceof THREE.Color ? fill : new THREE.Color(fill)
+        stroke,
+        backfaceStroke,
+        fill
       }
     );
   }
@@ -10039,52 +10238,74 @@ function Wireframe({ geometry: customGeometry, ...props }) {
   return /* @__PURE__ */ React.createElement(WireframeWithoutCustomGeo, { ...props });
 }
 
+function isShadowCastingLight(object) {
+  const light = object;
+  return light.isLight === true && light.castShadow === true && light.shadow != null;
+}
 function BakeShadows() {
-  const gl = useThree((state) => state.gl);
-  useEffect(() => {
-    gl.shadowMap.autoUpdate = false;
-    gl.shadowMap.needsUpdate = true;
+  const scene = useThree((state) => state.scene);
+  const priorRef = React.useRef(/* @__PURE__ */ new WeakMap());
+  useFrame(() => {
+    const prior = priorRef.current;
+    scene.traverse((object) => {
+      if (!isShadowCastingLight(object)) return;
+      const shadow = object.shadow;
+      if (prior.has(shadow)) return;
+      prior.set(shadow, { autoUpdate: shadow.autoUpdate, needsUpdate: shadow.needsUpdate });
+      shadow.autoUpdate = false;
+      shadow.needsUpdate = true;
+    });
+  });
+  React.useEffect(() => {
+    const prior = priorRef.current;
     return () => {
-      gl.shadowMap.autoUpdate = gl.shadowMap.needsUpdate = true;
+      scene.traverse((object) => {
+        if (!isShadowCastingLight(object)) return;
+        const previous = prior.get(object.shadow);
+        if (previous === void 0) return;
+        object.shadow.autoUpdate = previous.autoUpdate;
+        object.shadow.needsUpdate = previous.needsUpdate;
+        prior.delete(object.shadow);
+      });
     };
-  }, [gl.shadowMap]);
+  }, [scene]);
   return null;
 }
 
-class ConvolutionMaterial extends MeshBasicNodeMaterial {
-  //* Private Uniform Nodes --
-  _inputBuffer;
-  _depthBuffer;
-  _resolution;
-  _texelSize;
-  _halfTexelSize;
-  _kernel;
-  _scale;
-  _cameraNear;
-  _cameraFar;
-  _minDepthThreshold;
-  _maxDepthThreshold;
-  _depthScale;
-  _depthToBlurRatioBias;
-  _useDepth;
+class ConvolutionMaterial extends withUniforms(MeshBasicNodeMaterial, {
+  /** Input color buffer to blur */
+  inputBuffer: () => uniformTexture(new THREE.Texture()),
+  /** Depth buffer for depth-aware blur */
+  depthBuffer: () => uniformTexture(new THREE.Texture()),
+  /** Render resolution */
+  resolution: () => uniform(new THREE.Vector2()),
+  /** Texel size (1/resolution) */
+  texelSize: () => uniform(new THREE.Vector2()),
+  /** Half texel size for offset calculations */
+  halfTexelSize: () => uniform(new THREE.Vector2()),
+  /** Kernel offset multiplier (changes per blur pass) */
+  kernelValue: () => uniform(0),
+  /** Scale factor for blur spread */
+  scale: () => uniform(1),
+  /** Camera near plane for depth calculations */
+  cameraNear: () => uniform(0),
+  /** Camera far plane for depth calculations */
+  cameraFar: () => uniform(1),
+  /** Minimum depth threshold for blur (objects closer than this get less blur) */
+  minDepthThreshold: () => uniform(0),
+  /** Maximum depth threshold for blur (objects farther than this get full blur) */
+  maxDepthThreshold: () => uniform(1),
+  /** Scale factor for depth-based blur adjustment */
+  depthScale: () => uniform(0),
+  /** Bias added to depth-to-blur ratio */
+  depthToBlurRatioBias: () => uniform(0.25),
+  /** Enable depth-based blur */
+  useDepth: () => uniform(false)
+}) {
   /** Kernel weights for multi-pass blur */
   kernel;
   constructor(texelSize = new THREE.Vector2()) {
     super();
-    this._inputBuffer = uniformTexture(new THREE.Texture());
-    this._depthBuffer = uniformTexture(new THREE.Texture());
-    this._resolution = uniform(new THREE.Vector2());
-    this._texelSize = uniform(new THREE.Vector2());
-    this._halfTexelSize = uniform(new THREE.Vector2());
-    this._kernel = uniform(0);
-    this._scale = uniform(1);
-    this._cameraNear = uniform(0);
-    this._cameraFar = uniform(1);
-    this._minDepthThreshold = uniform(0);
-    this._maxDepthThreshold = uniform(1);
-    this._depthScale = uniform(0);
-    this._depthToBlurRatioBias = uniform(0.25);
-    this._useDepth = uniform(0);
     this.blending = THREE.NoBlending;
     this.depthWrite = false;
     this.depthTest = false;
@@ -10094,16 +10315,19 @@ class ConvolutionMaterial extends MeshBasicNodeMaterial {
     this._buildShader();
   }
   _buildShader() {
-    const inputBufferTex = this._inputBuffer;
-    const depthBufferTex = this._depthBuffer;
-    const texelSizeUniform = this._texelSize;
-    const halfTexelSizeUniform = this._halfTexelSize;
-    const kernelUniform = this._kernel;
-    const scaleUniform = this._scale;
-    const minDepthThresholdUniform = this._minDepthThreshold;
-    const maxDepthThresholdUniform = this._maxDepthThreshold;
-    const depthScaleUniform = this._depthScale;
-    const useDepthUniform = this._useDepth;
+    const {
+      inputBuffer: inputBufferTex,
+      depthBuffer: depthBufferTex,
+      texelSize: texelSizeUniform,
+      halfTexelSize: halfTexelSizeUniform,
+      kernelValue: kernelUniform,
+      scale: scaleUniform,
+      minDepthThreshold: minDepthThresholdUniform,
+      maxDepthThreshold: maxDepthThresholdUniform,
+      depthScale: depthScaleUniform,
+      depthToBlurRatioBias: depthToBlurRatioBiasUniform,
+      useDepth: useDepthUniform
+    } = this.uniforms;
     const baseUv = varying(uv(), "vUv");
     const dUv = varying(
       Fn(() => {
@@ -10117,17 +10341,16 @@ class ConvolutionMaterial extends MeshBasicNodeMaterial {
     const vUv3 = varying(Fn(() => vec2$2(baseUv.x.sub(dUv.x), baseUv.y.sub(dUv.y)))(), "vUv3");
     this.colorNode = Fn(() => {
       const depthFactor = float(0).toVar();
-      const isUsingDepth = useDepthUniform.greaterThan(0.5);
-      const depthSample = texture(depthBufferTex, baseUv);
+      const depthSample = depthBufferTex.sample(baseUv);
       const rawDepth = float(1).sub(depthSample.r.mul(depthSample.a));
       const smoothedDepth = smoothstep(minDepthThresholdUniform, maxDepthThresholdUniform, rawDepth);
       const scaledDepth = smoothedDepth.mul(depthScaleUniform);
-      const clampedDepth = max(float(0), min(float(1), scaledDepth.add(0.25)));
-      depthFactor.assign(select(isUsingDepth, clampedDepth, float(0)));
-      const sample0 = texture(inputBufferTex, mix(vUv0, baseUv, depthFactor));
-      const sample1 = texture(inputBufferTex, mix(vUv1, baseUv, depthFactor));
-      const sample2 = texture(inputBufferTex, mix(vUv2, baseUv, depthFactor));
-      const sample3 = texture(inputBufferTex, mix(vUv3, baseUv, depthFactor));
+      const clampedDepth = max(float(0), min(float(1), scaledDepth.add(depthToBlurRatioBiasUniform)));
+      depthFactor.assign(select(useDepthUniform, clampedDepth, float(0)));
+      const sample0 = inputBufferTex.sample(mix(vUv0, baseUv, depthFactor));
+      const sample1 = inputBufferTex.sample(mix(vUv1, baseUv, depthFactor));
+      const sample2 = inputBufferTex.sample(mix(vUv2, baseUv, depthFactor));
+      const sample3 = inputBufferTex.sample(mix(vUv3, baseUv, depthFactor));
       const sum = sample0.add(sample1).add(sample2).add(sample3);
       return sum.mul(0.25);
     })();
@@ -10135,111 +10358,12 @@ class ConvolutionMaterial extends MeshBasicNodeMaterial {
   //* Utility Methods ==============================
   /** Set texel size for blur calculations */
   setTexelSize(x, y) {
-    this._texelSize.value.set(x, y);
-    this._halfTexelSize.value.set(x * 0.5, y * 0.5);
+    this.uniforms.texelSize.value.set(x, y);
+    this.uniforms.halfTexelSize.value.set(x * 0.5, y * 0.5);
   }
   /** Set render resolution */
   setResolution(resolution) {
-    this._resolution.value.copy(resolution);
-  }
-  //* Uniform Accessors ==============================
-  /** Input color buffer to blur */
-  get inputBuffer() {
-    return this._inputBuffer.value;
-  }
-  set inputBuffer(v) {
-    this._inputBuffer.value = v ?? new THREE.Texture();
-  }
-  /** Depth buffer for depth-aware blur */
-  get depthBuffer() {
-    return this._depthBuffer.value;
-  }
-  set depthBuffer(v) {
-    this._depthBuffer.value = v ?? new THREE.Texture();
-  }
-  /** Render resolution */
-  get resolution() {
-    return this._resolution.value;
-  }
-  set resolution(v) {
-    this._resolution.value = v;
-  }
-  /** Texel size (1/resolution) */
-  get texelSize() {
-    return this._texelSize.value;
-  }
-  set texelSize(v) {
-    this._texelSize.value = v;
-  }
-  /** Half texel size for offset calculations */
-  get halfTexelSize() {
-    return this._halfTexelSize.value;
-  }
-  set halfTexelSize(v) {
-    this._halfTexelSize.value = v;
-  }
-  /** Kernel offset multiplier (changes per blur pass) */
-  get kernelValue() {
-    return this._kernel.value;
-  }
-  set kernelValue(v) {
-    this._kernel.value = v;
-  }
-  /** Scale factor for blur spread */
-  get scale() {
-    return this._scale.value;
-  }
-  set scale(v) {
-    this._scale.value = v;
-  }
-  /** Camera near plane for depth calculations */
-  get cameraNear() {
-    return this._cameraNear.value;
-  }
-  set cameraNear(v) {
-    this._cameraNear.value = v;
-  }
-  /** Camera far plane for depth calculations */
-  get cameraFar() {
-    return this._cameraFar.value;
-  }
-  set cameraFar(v) {
-    this._cameraFar.value = v;
-  }
-  /** Minimum depth threshold for blur (objects closer than this get less blur) */
-  get minDepthThreshold() {
-    return this._minDepthThreshold.value;
-  }
-  set minDepthThreshold(v) {
-    this._minDepthThreshold.value = v;
-  }
-  /** Maximum depth threshold for blur (objects farther than this get full blur) */
-  get maxDepthThreshold() {
-    return this._maxDepthThreshold.value;
-  }
-  set maxDepthThreshold(v) {
-    this._maxDepthThreshold.value = v;
-  }
-  /** Scale factor for depth-based blur adjustment */
-  get depthScale() {
-    return this._depthScale.value;
-  }
-  set depthScale(v) {
-    this._depthScale.value = v;
-  }
-  /** Bias added to depth-to-blur ratio */
-  get depthToBlurRatioBias() {
-    return this._depthToBlurRatioBias.value;
-  }
-  set depthToBlurRatioBias(v) {
-    this._depthToBlurRatioBias.value = v;
-  }
-  /** Enable/disable depth-based blur (0 = off, 1 = on) */
-  get useDepth() {
-    return this._useDepth.value > 0.5;
-  }
-  set useDepth(v) {
-    this._useDepth.value = v ? 1 : 0;
+    this.uniforms.resolution.value.copy(resolution);
   }
 }
 
@@ -10428,7 +10552,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) => {
@@ -10437,28 +10561,26 @@ const Image = /* @__PURE__ */ React.forwardRef((props, ref) => {
   else throw new Error("<Image /> requires a url or texture");
 });
 
-class SpotLightMaterial extends MeshBasicNodeMaterial {
-  //* Private Uniform Nodes --
-  _depth;
-  _opacity;
-  _attenuation;
-  _anglePower;
-  _spotPosition;
-  _lightColor;
-  _cameraNear;
-  _cameraFar;
-  _resolution;
+class SpotLightMaterial extends withUniforms(MeshBasicNodeMaterial, {
+  /** Scene depth (in the R channel) for soft intersection with scene geometry */
+  depth: () => uniformTexture(new THREE.Texture()),
+  /** Distance attenuation factor, default: 5 */
+  attenuation: () => uniform(5),
+  /** Angle falloff power - higher = sharper edges, default: 5 */
+  anglePower: () => uniform(5),
+  /** World position of the cone tip */
+  spotPosition: () => uniform(new THREE.Vector3(0, 0, 0)),
+  /** Light color, default: white */
+  lightColor: () => uniform(new THREE.Color("white")),
+  /** Camera near plane, for depth reconstruction */
+  cameraNear: () => uniform(0.1),
+  /** Camera far plane, for depth reconstruction */
+  cameraFar: () => uniform(100),
+  /** Drawing-buffer size in pixels. Zero disables depth-based soft edges. */
+  resolution: () => uniform(new THREE.Vector2(0, 0))
+}) {
   constructor() {
     super();
-    this._depth = uniformTexture(new THREE.Texture());
-    this._opacity = uniform(1);
-    this._attenuation = uniform(5);
-    this._anglePower = uniform(5);
-    this._spotPosition = uniform(new THREE.Vector3(0, 0, 0));
-    this._lightColor = uniform(new THREE.Color("white"));
-    this._cameraNear = uniform(0.1);
-    this._cameraFar = uniform(100);
-    this._resolution = uniform(new THREE.Vector2(0, 0));
     this.transparent = true;
     this.depthWrite = false;
     this.side = THREE.DoubleSide;
@@ -10466,15 +10588,16 @@ class SpotLightMaterial extends MeshBasicNodeMaterial {
   }
   //* Build TSL Shader ==============================
   _buildShader() {
-    const depthTex = this._depth;
-    const opacityUniform = this._opacity;
-    const attenuationUniform = this._attenuation;
-    const anglePowerUniform = this._anglePower;
-    const spotPositionUniform = this._spotPosition;
-    const lightColorUniform = this._lightColor;
-    const cameraNearUniform = this._cameraNear;
-    const cameraFarUniform = this._cameraFar;
-    const resolutionUniform = this._resolution;
+    const {
+      depth: depthTex,
+      attenuation: attenuationUniform,
+      anglePower: anglePowerUniform,
+      spotPosition: spotPositionUniform,
+      lightColor: lightColorUniform,
+      cameraNear: cameraNearUniform,
+      cameraFar: cameraFarUniform,
+      resolution: resolutionUniform
+    } = this.uniforms;
     const vNormal = varying(normalize(modelViewMatrix.transformDirection(normalLocal)), "vNormal");
     const vIntensity = varying(
       saturate(float(1).sub(distance(positionWorld, spotPositionUniform).div(attenuationUniform))),
@@ -10489,79 +10612,27 @@ class SpotLightMaterial extends MeshBasicNodeMaterial {
         screenCoordinate.x.div(resolutionUniform.x),
         float(1).sub(screenCoordinate.y.div(resolutionUniform.y))
       );
-      const sampledDepth = texture(depthTex, screenUV).r;
+      const sampledDepth = depthTex.sample(screenUV).r;
       const near = cameraNearUniform;
       const far = cameraFarUniform;
       const sceneViewZ = near.mul(far).div(far.sub(near).mul(sampledDepth).sub(far));
       const depthDiff = vViewZ.sub(sceneViewZ);
       const softFactor = smoothstep(float(0), float(1), depthDiff);
       intensity.assign(select(hasDepth, intensity.mul(softFactor), intensity));
-      return vec4(lightColorUniform, intensity.mul(opacityUniform));
+      return vec4(lightColorUniform, intensity.mul(materialOpacity));
     })();
   }
-  //* Uniform Accessors ==============================
-  get depth() {
-    return this._depth?.value;
-  }
-  set depth(v) {
-    if (this._depth) this._depth.value = v ?? new THREE.Texture();
-  }
-  get opacity() {
-    return this._opacity?.value;
-  }
-  set opacity(v) {
-    if (this._opacity) this._opacity.value = v;
-  }
-  get attenuation() {
-    return this._attenuation?.value;
-  }
-  set attenuation(v) {
-    if (this._attenuation) this._attenuation.value = v;
-  }
-  get anglePower() {
-    return this._anglePower?.value;
-  }
-  set anglePower(v) {
-    if (this._anglePower) this._anglePower.value = v;
-  }
-  get spotPosition() {
-    return this._spotPosition?.value;
-  }
-  set spotPosition(v) {
-    if (this._spotPosition) this._spotPosition.value = v;
-  }
-  get lightColor() {
-    return this._lightColor?.value;
-  }
-  set lightColor(v) {
-    if (this._lightColor) this._lightColor.value = v;
-  }
-  get cameraNear() {
-    return this._cameraNear?.value;
-  }
-  set cameraNear(v) {
-    if (this._cameraNear) this._cameraNear.value = v;
-  }
-  get cameraFar() {
-    return this._cameraFar?.value;
-  }
-  set cameraFar(v) {
-    if (this._cameraFar) this._cameraFar.value = v;
-  }
-  get resolution() {
-    return this._resolution?.value;
-  }
-  set resolution(v) {
-    if (this._resolution) this._resolution.value = v;
-  }
 }
 
-class StarfieldMaterial extends SpriteNodeMaterial {
-  //* Uniforms ==============================
-  _time = uniform(0);
-  _fade = uniform(1);
+class StarfieldMaterial extends withUniforms(SpriteNodeMaterial, {
+  /** Animation time, advanced by the component each frame */
+  time: () => uniform(0),
+  /** 1 = soft circular fade, 0 = hard-edged circle */
+  fade: () => uniform(1)
+}) {
   constructor() {
     super();
+    const { time, fade } = this.uniforms;
     this.transparent = true;
     this.depthWrite = false;
     this.blending = AdditiveBlending;
@@ -10575,7 +10646,7 @@ class StarfieldMaterial extends SpriteNodeMaterial {
       const worldPos = modelWorldMatrix.mul(vec4(this.positionNode, 1));
       const viewPos = cameraViewMatrix.mul(worldPos);
       const distanceAttenuation = float(30).div(viewPos.z.negate());
-      const timeScale = float(3.5).add(sin(this._time.add(100)).mul(0.3));
+      const timeScale = float(3.5).add(sin(time.add(100)).mul(0.3));
       const size = particleSize.mul(distanceAttenuation).mul(timeScale).mul(0.04);
       return vec2$2(size);
     })();
@@ -10584,38 +10655,28 @@ class StarfieldMaterial extends SpriteNodeMaterial {
       const d = length(quadUV.sub(vec2$2(0.5)));
       const softFade = float(1).div(float(1).add(exp(float(16).mul(d.sub(0.25)))));
       const hardMask = float(1).sub(d.smoothstep(0.3, 0.5));
-      const circularOpacity = select(this._fade.equal(1), softFade, hardMask);
+      const circularOpacity = select(fade.equal(1), softFade, hardMask);
       const opacity = circularOpacity.mul(0.7);
       return vec4(particleColor, opacity);
     })();
   }
-  //* Uniform Accessors ==============================
   setTime(time) {
-    this._time.value = time;
+    this.time = time;
   }
   setFade(fade) {
-    this._fade.value = fade;
-  }
-  get time() {
-    return this._time.value;
-  }
-  set time(value) {
-    this._time.value = value;
-  }
-  get fade() {
-    return this._fade.value;
-  }
-  set fade(value) {
-    this._fade.value = value;
+    this.fade = fade;
   }
 }
 
-class SparklesMaterial extends SpriteNodeMaterial {
-  // Uniforms exposed for external updates
-  _time = uniform(0);
-  _pixelRatio = uniform(1);
+class SparklesMaterial extends withUniforms(SpriteNodeMaterial, {
+  /** Animation time, advanced by the component each frame */
+  time: () => uniform(0),
+  /** Device pixel ratio, scales the point size */
+  pixelRatio: () => uniform(1)
+}) {
   constructor() {
     super();
+    const { time, pixelRatio } = this.uniforms;
     this.transparent = true;
     this.depthWrite = false;
     const particlePosition = attribute("particlePosition", "vec3");
@@ -10626,101 +10687,86 @@ class SparklesMaterial extends SpriteNodeMaterial {
     const particleColor = attribute("color", "vec3");
     this.positionNode = Fn(() => {
       const pos = particlePosition.toVar();
-      pos.y.addAssign(sin(this._time.mul(particleSpeed).add(pos.x.mul(particleNoise.x).mul(100))).mul(0.2));
-      pos.z.addAssign(cos(this._time.mul(particleSpeed).add(pos.x.mul(particleNoise.y).mul(100))).mul(0.2));
-      pos.x.addAssign(cos(this._time.mul(particleSpeed).add(pos.x.mul(particleNoise.z).mul(100))).mul(0.2));
+      pos.y.addAssign(sin(time.mul(particleSpeed).add(pos.x.mul(particleNoise.x).mul(100))).mul(0.2));
+      pos.z.addAssign(cos(time.mul(particleSpeed).add(pos.x.mul(particleNoise.y).mul(100))).mul(0.2));
+      pos.x.addAssign(cos(time.mul(particleSpeed).add(pos.x.mul(particleNoise.z).mul(100))).mul(0.2));
       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(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));
     })();
   }
-  //* Uniform Accessors --------------------------------
-  get time() {
-    return this._time.value;
-  }
-  set time(value) {
-    this._time.value = value;
-  }
-  get pixelRatio() {
-    return this._pixelRatio.value;
-  }
-  set pixelRatio(value) {
-    this._pixelRatio.value = value;
-  }
-}
-
-class GridMaterialImpl extends MeshBasicNodeMaterial {
-  //* Private Uniform Nodes --
-  _cellSize;
-  _sectionSize;
-  _fadeDistance;
-  _fadeStrength;
-  _fadeFrom;
-  _cellThickness;
-  _sectionThickness;
-  _cellColor;
-  _sectionColor;
-  _infiniteGrid;
-  // bool as 0/1
-  _followCamera;
-  // bool as 0/1
-  _worldCamProjPosition;
-  _worldPlanePosition;
+}
+
+class GridMaterialImpl extends withUniforms(MeshBasicNodeMaterial, {
+  /** Cell size, default: 0.5 */
+  cellSize: () => uniform(0.5),
+  /** Section size, default: 1 */
+  sectionSize: () => uniform(1),
+  /** Fade distance, default: 100 */
+  fadeDistance: () => uniform(100),
+  /** Fade strength, default: 1 */
+  fadeStrength: () => uniform(1),
+  /** Fade from camera (1) or origin (0), default: 1 */
+  fadeFrom: () => uniform(1),
+  /** Cell thickness, default: 0.5 */
+  cellThickness: () => uniform(0.5),
+  /** Section thickness, default: 1 */
+  sectionThickness: () => uniform(1),
+  /** Cell color, default: black */
+  cellColor: () => uniform(new THREE.Color("#000000")),
+  /** Section color, default: #2080ff */
+  sectionColor: () => uniform(new THREE.Color("#2080ff")),
+  /** Display the grid infinitely */
+  infiniteGrid: () => uniform(false),
+  /** Follow camera position */
+  followCamera: () => uniform(false),
+  /** Camera projection position on plane (set by component) */
+  worldCamProjPosition: () => uniform(new THREE.Vector3()),
+  /** Plane world position (set by component) */
+  worldPlanePosition: () => uniform(new THREE.Vector3())
+}) {
   /** Type flag for identification */
   isGridMaterial = true;
   constructor() {
     super();
-    this._cellSize = uniform(0.5);
-    this._sectionSize = uniform(1);
-    this._fadeDistance = uniform(100);
-    this._fadeStrength = uniform(1);
-    this._fadeFrom = uniform(1);
-    this._cellThickness = uniform(0.5);
-    this._sectionThickness = uniform(1);
-    this._cellColor = uniform(new THREE.Color("#000000"));
-    this._sectionColor = uniform(new THREE.Color("#2080ff"));
-    this._infiniteGrid = uniform(0);
-    this._followCamera = uniform(0);
-    this._worldCamProjPosition = uniform(new THREE.Vector3());
-    this._worldPlanePosition = uniform(new THREE.Vector3());
     this.transparent = true;
     this.side = THREE.BackSide;
     this._buildGridShader();
   }
   _buildGridShader() {
-    const cellSizeUniform = this._cellSize;
-    const sectionSizeUniform = this._sectionSize;
-    const fadeDistanceUniform = this._fadeDistance;
-    const fadeStrengthUniform = this._fadeStrength;
-    const fadeFromUniform = this._fadeFrom;
-    const cellThicknessUniform = this._cellThickness;
-    const sectionThicknessUniform = this._sectionThickness;
-    const cellColorUniform = this._cellColor;
-    const sectionColorUniform = this._sectionColor;
-    const infiniteGridUniform = this._infiniteGrid;
-    const followCameraUniform = this._followCamera;
-    const worldCamProjPositionUniform = this._worldCamProjPosition;
-    const worldPlanePositionUniform = this._worldPlanePosition;
+    const {
+      cellSize: cellSizeUniform,
+      sectionSize: sectionSizeUniform,
+      fadeDistance: fadeDistanceUniform,
+      fadeStrength: fadeStrengthUniform,
+      fadeFrom: fadeFromUniform,
+      cellThickness: cellThicknessUniform,
+      sectionThickness: sectionThicknessUniform,
+      cellColor: cellColorUniform,
+      sectionColor: sectionColorUniform,
+      infiniteGrid: infiniteGridUniform,
+      followCamera: followCameraUniform,
+      worldCamProjPosition: worldCamProjPositionUniform,
+      worldPlanePosition: worldPlanePositionUniform
+    } = this.uniforms;
     const computeLocalPosition = Fn(() => {
       const pos = positionGeometry;
       let localPos = vec3(pos.x, pos.z, pos.y).toVar();
-      const isInfinite = infiniteGridUniform.greaterThan(0.5);
       const scaleFactor = float(1).add(fadeDistanceUniform);
-      localPos.assign(select(isInfinite, localPos.mul(scaleFactor), localPos));
-      const isFollowCamera = followCameraUniform.greaterThan(0.5);
+      localPos.assign(select(infiniteGridUniform, localPos.mul(scaleFactor), localPos));
       const cameraOffset = worldCamProjPositionUniform.sub(worldPlanePositionUniform);
-      localPos.assign(select(isFollowCamera, localPos.add(cameraOffset), localPos));
+      localPos.assign(select(followCameraUniform, localPos.add(cameraOffset), localPos));
       return localPos;
     });
     const vLocalPosition = varying(computeLocalPosition(), "vLocalPosition");
@@ -10732,12 +10778,10 @@ class GridMaterialImpl extends MeshBasicNodeMaterial {
     this.positionNode = Fn(() => {
       const pos = positionGeometry;
       let localPos = vec3(pos.x, pos.z, pos.y).toVar();
-      const isInfinite = infiniteGridUniform.greaterThan(0.5);
       const scaleFactor = float(1).add(fadeDistanceUniform);
-      localPos.assign(select(isInfinite, localPos.mul(scaleFactor), localPos));
-      const isFollowCamera = followCameraUniform.greaterThan(0.5);
+      localPos.assign(select(infiniteGridUniform, localPos.mul(scaleFactor), localPos));
       const cameraOffset = worldCamProjPositionUniform.sub(worldPlanePositionUniform);
-      localPos.assign(select(isFollowCamera, localPos.add(cameraOffset), localPos));
+      localPos.assign(select(followCameraUniform, localPos.add(cameraOffset), localPos));
       return localPos;
     })();
     const getGrid = Fn((inputs) => {
@@ -10763,100 +10807,6 @@ class GridMaterialImpl extends MeshBasicNodeMaterial {
       return vec4(gridColor, finalAlpha);
     })();
   }
-  //* Uniform Accessors ==============================
-  /** Cell size, default: 0.5 */
-  get cellSize() {
-    return this._cellSize.value;
-  }
-  set cellSize(v) {
-    this._cellSize.value = v;
-  }
-  /** Section size, default: 1 */
-  get sectionSize() {
-    return this._sectionSize.value;
-  }
-  set sectionSize(v) {
-    this._sectionSize.value = v;
-  }
-  /** Fade distance, default: 100 */
-  get fadeDistance() {
-    return this._fadeDistance.value;
-  }
-  set fadeDistance(v) {
-    this._fadeDistance.value = v;
-  }
-  /** Fade strength, default: 1 */
-  get fadeStrength() {
-    return this._fadeStrength.value;
-  }
-  set fadeStrength(v) {
-    this._fadeStrength.value = v;
-  }
-  /** Fade from camera (1) or origin (0), default: 1 */
-  get fadeFrom() {
-    return this._fadeFrom.value;
-  }
-  set fadeFrom(v) {
-    this._fadeFrom.value = v;
-  }
-  /** Cell thickness, default: 0.5 */
-  get cellThickness() {
-    return this._cellThickness.value;
-  }
-  set cellThickness(v) {
-    this._cellThickness.value = v;
-  }
-  /** Section thickness, default: 1 */
-  get sectionThickness() {
-    return this._sectionThickness.value;
-  }
-  set sectionThickness(v) {
-    this._sectionThickness.value = v;
-  }
-  /** Cell color */
-  get cellColor() {
-    return this._cellColor.value;
-  }
-  set cellColor(v) {
-    if (v instanceof THREE.Color) this._cellColor.value = v;
-    else this._cellColor.value = new THREE.Color(v);
-  }
-  /** Section color */
-  get sectionColor() {
-    return this._sectionColor.value;
-  }
-  set sectionColor(v) {
-    if (v instanceof THREE.Color) this._sectionColor.value = v;
-    else this._sectionColor.value = new THREE.Color(v);
-  }
-  /** Display the grid infinitely */
-  get infiniteGrid() {
-    return this._infiniteGrid.value > 0.5;
-  }
-  set infiniteGrid(v) {
-    this._infiniteGrid.value = v ? 1 : 0;
-  }
-  /** Follow camera position */
-  get followCamera() {
-    return this._followCamera.value > 0.5;
-  }
-  set followCamera(v) {
-    this._followCamera.value = v ? 1 : 0;
-  }
-  /** Camera projection position on plane (set by component) */
-  get worldCamProjPosition() {
-    return this._worldCamProjPosition.value;
-  }
-  set worldCamProjPosition(v) {
-    this._worldCamProjPosition.value = v;
-  }
-  /** Plane world position (set by component) */
-  get worldPlanePosition() {
-    return this._worldPlanePosition.value;
-  }
-  set worldPlanePosition(v) {
-    this._worldPlanePosition.value = v;
-  }
 }
 const Grid = /* @__PURE__ */ React.forwardRef(
   ({
@@ -10912,17 +10862,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;
 }