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

package/webgpu/index.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { forwardRef, useImperativeHandle, useMemo, useEffect, useCallback, useRef, useLayoutEffect, useState, Fragment, createContext, useContext } from 'react';
-import { useThree, useFrame, extend, createPortal, applyProps, useInstanceHandle, context as context$a, useLoader, addEffect, addAfterEffect } from '@react-three/fiber';
+import { useThree, useFrame, extend, createPortal, applyProps, useInstanceHandle, context as context$b, useLoader, addEffect, addAfterEffect } from '@react-three/fiber';
 import * as THREE from 'three/webgpu';
 import { MeshBasicNodeMaterial, RenderTarget, MeshPhongNodeMaterial, MeshNormalNodeMaterial, QuadMesh, MeshPhysicalNodeMaterial, Frustum, Matrix4, CubeRenderTarget, Line2NodeMaterial, Vector3, Vector4, Vector2, Color, InstancedInterleavedBuffer, InterleavedBufferAttribute, Object3D, HalfFloatType, CubeCamera as CubeCamera$1, EventDispatcher, Euler, Quaternion, MathUtils, TextureLoader, Texture as Texture$1, MeshLambertMaterial, DynamicDrawUsage, CatmullRomCurve3, CubicBezierCurve3, QuadraticBezierCurve3, Shape as Shape$1, CanvasTexture, PerspectiveCamera as PerspectiveCamera$1, OrthographicCamera as OrthographicCamera$1, REVISION, AudioListener, AudioLoader, AnimationMixer, BufferAttribute, Box3, Sphere as Sphere$1, InstancedBufferAttribute, DoubleSide, DepthTexture, DepthFormat, UnsignedShortType, CubeTextureLoader, DefaultLoadingManager, Ray, Raycaster, Camera, CubeReflectionMapping, EquirectangularReflectionMapping, Scene, RepeatWrapping, SpriteNodeMaterial, AdditiveBlending, ShadowNode, CylinderGeometry } from 'three/webgpu';
 import { ArcballControls as ArcballControls$1 } from 'three/examples/jsm/controls/ArcballControls.js';
@@ -16,7 +16,7 @@ import { useGesture } from '@use-gesture/react';
 import * as ReactDOM from 'react-dom/client';
 import { TrackballControls as TrackballControls$1 } from 'three/examples/jsm/controls/TrackballControls.js';
 import { SimplexNoise } from 'three/examples/jsm/math/SimplexNoise.js';
-import { uniform, Fn, float, vec4, uniformTexture, uv, vec2 as vec2$2, texture, Discard, max, sub, mix, output, positionWorld, mul, add, negate, dot, refract, div, length, cross, select, vec3, normalize, normalWorld, cameraPosition, screenCoordinate, mx_fractal_noise_vec3, int, thickness, pow, roughness, Loop, ior, screenUV, screenSize, cameraProjectionMatrix, cameraViewMatrix, attenuationColor, attenuationDistance, diffuseColor, transmission, fract, sin, modelWorldMatrix, log, exp, DFGLUT, reflector, clamp, equirectUV, reflect, smoothstep, round, distance, positionLocal, mx_noise_vec3, cos, mat3, normalLocal, attribute, modelViewMatrix, varying, min, frontFacing, fwidth, abs, saturate, positionView, positionGeometry, reference, renderGroup, interleavedGradientNoise, vogelDiskSample, step } from 'three/tsl';
+import { uniform, Fn, float, vec4, uniformTexture, uv, vec2 as vec2$2, Discard, materialReference, context as context$a, max, materialAlphaTest, sub, mix, output, positionWorld, mul, add, materialColor, negate, dot, refract, div, length, cross, select, vec3, normalize, normalWorld, cameraPosition, screenCoordinate, mx_fractal_noise_vec3, int, thickness, pow, roughness, Loop, ior, screenUV, screenSize, cameraProjectionMatrix, cameraViewMatrix, attenuationColor, attenuationDistance, diffuseColor, transmission, fract, sin, modelWorldMatrix, log, exp, DFGLUT, reflector, clamp, 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 { 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';
@@ -51,43 +51,150 @@ import { shallow } from 'zustand/shallow';
 import { hashBlur } from 'three/examples/jsm/tsl/display/hashBlur.js';
 import PhysicalLightingModel from 'three/src/nodes/functions/PhysicalLightingModel.js';
 
-class DepthNodeMaterial extends MeshBasicNodeMaterial {
-  _opacity;
+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(() => {
@@ -96,18 +203,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(
   ({
@@ -242,9 +343,13 @@ const discardFragment = /* @__PURE__ */ Fn(() => {
   Discard();
   return vec4(0, 0, 0, 0);
 });
-const DiscardMaterial = /* @__PURE__ */ new MeshBasicNodeMaterial({
-  fragmentNode: discardFragment()
-});
+class DiscardNodeMaterial extends MeshBasicNodeMaterial {
+  constructor() {
+    super();
+    this.fragmentNode = discardFragment();
+  }
+}
+const DiscardMaterial = /* @__PURE__ */ new DiscardNodeMaterial();
 
 function isLight(object) {
   return object.isLight;
@@ -255,105 +360,51 @@ function isGeometry$1(object) {
 const accumulativeContext = /* @__PURE__ */ React.createContext(
   null
 );
-class SoftShadowMaterialImpl extends MeshBasicNodeMaterial {
-  _color;
-  _blend;
-  _alphaTest;
-  _opacity;
-  _map;
+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._color = uniform(new THREE.Color());
-    this._blend = uniform(2);
-    this._alphaTest = uniform(0.75);
-    this._opacity = uniform(0);
-    this._map = uniformTexture(new THREE.Texture());
     this.transparent = true;
     this.depthWrite = false;
+    this.opacity = 0;
+    this.alphaTest = 0.75;
+    this.map = new THREE.Texture();
+    this.alphaTestNode = float(0);
     this._buildShader();
   }
   _buildShader() {
-    const colorUniform = this._color;
-    const blendUniform = this._blend;
-    const alphaTestUniform = this._alphaTest;
-    const opacityUniform = this._opacity;
-    const mapTex = this._map;
+    const { shadowColor, blend } = this.uniforms;
+    const map = materialReference("map", "texture", this);
     this.colorNode = Fn(() => {
-      const texCoord = uv();
-      const sampled = texture(mapTex, texCoord);
-      const rgb = colorUniform.mul(sampled.r).mul(blendUniform);
+      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(alphaTestUniform))).mul(opacityUniform);
+      const alpha = max(float(0), float(1).sub(sum.div(materialAlphaTest)));
       return vec4(rgb, alpha);
     })();
   }
-  get shadowColor() {
-    return this._color.value;
-  }
-  set shadowColor(v) {
-    if (v instanceof THREE.Color) {
-      this._color.value.copy(v);
-    } else {
-      this._color.value.set(v);
-    }
-  }
-  get blend() {
-    return this._blend.value;
-  }
-  set blend(v) {
-    this._blend.value = v;
-  }
-  get alphaTest() {
-    return this._alphaTest.value;
-  }
-  set alphaTest(v) {
-    this._alphaTest.value = v;
-  }
-  get opacity() {
-    return this._opacity.value;
-  }
-  set opacity(v) {
-    if (!this._opacity) this._opacity = uniform(v);
-    else this._opacity.value = v;
-  }
-  get map() {
-    if (!this._map) {
-      this._map = uniformTexture(new THREE.Texture());
-    }
-    return this._map.value;
-  }
-  set map(v) {
-    this._map.value = v;
-  }
 }
-class ProgressiveShadowMaterial extends MeshPhongNodeMaterial {
-  _previousShadowMap;
-  _averagingWindow;
+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 = texture(initialTexture);
-    this._averagingWindow = uniform(100);
+    this.previousShadowMap = initialTexture;
     this.fog = false;
     this._buildShader();
   }
   _buildShader() {
-    const previousMapTex = this._previousShadowMap;
-    const averagingWindowUniform = this._averagingWindow;
+    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(previousMapTex.sample(uv()), output, float(1).div(averagingWindowUniform)));
-  }
-  get previousShadowMap() {
-    return this._previousShadowMap.value;
-  }
-  set previousShadowMap(v) {
-    this._previousShadowMap.value = v;
-  }
-  get averagingWindow() {
-    return this._averagingWindow.value;
-  }
-  set averagingWindow(v) {
-    this._averagingWindow.value = v;
+    this.outputNode = vec4(mix(previousShadowMap.sample(uv()), output, float(1).div(averagingWindow)));
   }
 }
 class ProgressiveLightMap {
@@ -470,7 +521,7 @@ const AccumulativeShadows = /* @__PURE__ */ React.forwardRef(
       plm.configure(gPlane.current);
     }, [plm]);
     React.useEffect(() => {
-      softShadowMat.shadowColor = color;
+      softShadowMat.shadowColor.set(color);
       softShadowMat.blend = colorBlend;
       softShadowMat.map = plm.progressiveLightMap2.texture;
       softShadowMat.toneMapped = toneMapped;
@@ -683,19 +734,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;
@@ -704,100 +754,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) {
-    if (this._color) 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);
@@ -824,7 +842,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);
@@ -836,14 +854,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 });
@@ -882,91 +900,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) {
@@ -977,18 +910,6 @@ class CausticsNormalMaterial extends MeshNormalNodeMaterial {
     })();
   }
 }
-const NORMAL_FBO_PROPS = {
-  depthBuffer: true,
-  minFilter: THREE.LinearFilter,
-  magFilter: THREE.LinearFilter,
-  type: THREE.UnsignedByteType
-};
-const CAUSTIC_FBO_PROPS = {
-  minFilter: THREE.LinearMipmapLinearFilter,
-  magFilter: THREE.LinearFilter,
-  type: THREE.FloatType,
-  generateMipmaps: true
-};
 const Caustics = /* @__PURE__ */ React.forwardRef(
   ({
     debug,
@@ -1012,10 +933,30 @@ const Caustics = /* @__PURE__ */ React.forwardRef(
     const plane = React.useRef(null);
     const gl = useThree((state) => state.gl);
     const helper = useHelper(debug && camera, THREE.CameraHelper);
-    const normalTarget = useFBO(resolution, resolution, NORMAL_FBO_PROPS);
-    const normalTargetB = useFBO(resolution, resolution, NORMAL_FBO_PROPS);
-    const causticsTarget = useFBO(resolution, resolution, CAUSTIC_FBO_PROPS);
-    const causticsTargetB = useFBO(resolution, resolution, CAUSTIC_FBO_PROPS);
+    const normalTarget = useFBO(resolution, resolution, {
+      depthBuffer: true,
+      minFilter: THREE.LinearFilter,
+      magFilter: THREE.LinearFilter,
+      type: THREE.UnsignedByteType
+    });
+    const normalTargetB = useFBO(resolution, resolution, {
+      depthBuffer: true,
+      minFilter: THREE.LinearFilter,
+      magFilter: THREE.LinearFilter,
+      type: THREE.UnsignedByteType
+    });
+    const causticsTarget = useFBO(resolution, resolution, {
+      minFilter: THREE.LinearMipmapLinearFilter,
+      magFilter: THREE.LinearFilter,
+      type: THREE.FloatType,
+      generateMipmaps: true
+    });
+    const causticsTargetB = useFBO(resolution, resolution, {
+      minFilter: THREE.LinearMipmapLinearFilter,
+      magFilter: THREE.LinearFilter,
+      type: THREE.FloatType,
+      generateMipmaps: true
+    });
     const [normalMat] = React.useState(() => new CausticsNormalMaterial(THREE.FrontSide));
     const [normalMatB] = React.useState(() => new CausticsNormalMaterial(THREE.BackSide));
     const [causticsMaterial] = React.useState(() => new CausticsMaterial());
@@ -1287,9 +1228,9 @@ class TransmissionLightingModel extends PhysicalLightingModel {
           const uvR = getRefractionUV(sampleNorm, v, iorR, sampleThickness, position);
           const uvG = getRefractionUV(sampleNorm, v, iorG, sampleThickness, position);
           const uvB = getRefractionUV(sampleNorm, v, iorB, sampleThickness, position);
-          const sampleR = texture(bufferTex, uvR);
-          const sampleG = texture(bufferTex, uvG);
-          const sampleB = texture(bufferTex, uvB);
+          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);
@@ -1299,7 +1240,7 @@ class TransmissionLightingModel extends PhysicalLightingModel {
         const debugNdotV = n.dot(v);
         const isNeg = debugNdotV.lessThan(0);
         const sampleUVFlipped = vec2$2(screenUV.x, screenUV.y.oneMinus()).clamp(1e-3, 0.999);
-        const directSampleFlipped = texture(bufferTex, sampleUVFlipped);
+        const directSampleFlipped = bufferTex.sample(sampleUVFlipped);
         const testRay = getVolumeTransmissionRay(n, v, thickness, ior);
         const rayLen = length(testRay);
         const manualUV = screenCoordinate.xy.div(screenSize);
@@ -1307,9 +1248,9 @@ class TransmissionLightingModel extends PhysicalLightingModel {
         const flippedUV = vec2$2(screenUV.x, screenUV.y.oneMinus()).clamp(1e-3, 0.999);
         const useFlipped = screenUV.x.greaterThan(0.5);
         const splitSampleUV = select(useFlipped, flippedUV, noFlipUV);
-        const splitSample = texture(bufferTex, splitSampleUV);
-        const directSampleNoFlip = texture(bufferTex, screenUV.clamp(1e-3, 0.999));
-        const centerSample = texture(bufferTex, vec2$2(0.5, 0.5));
+        const 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)));
@@ -1326,7 +1267,7 @@ class TransmissionLightingModel extends PhysicalLightingModel {
         projUVDbg.divAssign(2);
         projUVDbg.assign(vec2$2(projUVDbg.x, projUVDbg.y.oneMinus()));
         projUVDbg.assign(projUVDbg.clamp(1e-3, 0.999));
-        const projectedSample = texture(bufferTex, projUVDbg);
+        const 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);
@@ -1449,18 +1390,29 @@ class TransmissionLightingModel extends PhysicalLightingModel {
     }
   }
 }
-class MeshTransmissionMaterialImpl extends MeshPhysicalNodeMaterial {
-  // Custom uniforms
-  _chromaticAberration;
-  _anisotropicBlur;
-  _time;
-  _distortion;
-  _distortionScale;
-  _temporalDistortion;
-  _buffer;
-  // Texture node
-  _transmissionValue;
-  _debugMode;
+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;
@@ -1469,27 +1421,26 @@ class MeshTransmissionMaterialImpl extends MeshPhysicalNodeMaterial {
     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._debugMode = uniform(0);
-    const placeholderTexture = new THREE.DataTexture(new Uint8Array([255, 255, 255, 255]), 1, 1);
-    placeholderTexture.needsUpdate = true;
-    this._buffer = uniformTexture(placeholderTexture);
-    this._transmissionValue = uniform(1);
-    this.transmission = transmissionSampler ? 1 : 1e-3;
+    this.transmission = 1;
     this.roughness = 0;
     this.thickness = 0;
     this.ior = 1.5;
     this.transparent = true;
   }
   setupLightingModel() {
-    if (this._transmissionSampler) {
+    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,
@@ -1499,82 +1450,18 @@ class MeshTransmissionMaterialImpl extends MeshPhysicalNodeMaterial {
         dispersion: this.useDispersion
       },
       {
-        bufferTex: this._buffer,
-        chromaticAberration: this._chromaticAberration,
-        anisotropicBlur: this._anisotropicBlur,
-        timeUniform: this._time,
-        distortion: this._distortion,
-        distortionScale: this._distortionScale,
-        temporalDistortion: this._temporalDistortion,
+        bufferTex: buffer,
+        chromaticAberration,
+        anisotropicBlur,
+        timeUniform: time,
+        distortion,
+        distortionScale,
+        temporalDistortion,
         samples: this._samples,
-        debugMode: this._debugMode
+        debugMode
       }
     );
   }
-  //* Property Accessors ==============================
-  get time() {
-    return this._time.value;
-  }
-  set time(v) {
-    this._time.value = v;
-  }
-  get buffer() {
-    return this._buffer.value;
-  }
-  set buffer(v) {
-    this._buffer.value = v;
-  }
-  get chromaticAberration() {
-    return this._chromaticAberration.value;
-  }
-  set chromaticAberration(v) {
-    this._chromaticAberration.value = v;
-  }
-  get anisotropicBlur() {
-    return this._anisotropicBlur.value;
-  }
-  set anisotropicBlur(v) {
-    this._anisotropicBlur.value = v;
-  }
-  get distortion() {
-    return this._distortion.value;
-  }
-  set distortion(v) {
-    this._distortion.value = v;
-  }
-  get distortionScale() {
-    return this._distortionScale.value;
-  }
-  set distortionScale(v) {
-    this._distortionScale.value = v;
-  }
-  get temporalDistortion() {
-    return this._temporalDistortion.value;
-  }
-  set temporalDistortion(v) {
-    this._temporalDistortion.value = v;
-  }
-  get debugMode() {
-    return this._debugMode.value;
-  }
-  set debugMode(v) {
-    this._debugMode.value = v;
-  }
-  // Expose _transmission for legacy compatibility
-  // This stores the user's intended transmission value, separate from the base class's transmission
-  // which is kept at 0.001 to enable the transmission code path without triggering Three's internal rendering
-  get _transmission() {
-    if (!this._transmissionValue) {
-      this._transmissionValue = uniform(1);
-    }
-    return this._transmissionValue.value;
-  }
-  set _transmission(v) {
-    if (!this._transmissionValue) {
-      this._transmissionValue = uniform(1);
-    }
-    this._transmissionValue.value = v;
-  }
 }
 const MeshTransmissionMaterial = /* @__PURE__ */ React.forwardRef(
   ({
@@ -1707,7 +1594,7 @@ const MeshTransmissionMaterial = /* @__PURE__ */ React.forwardRef(
         ref,
         ...props,
         buffer: buffer || fboMain.texture,
-        _transmission: transmission2,
+        transmission: transmission2,
         anisotropicBlur: anisotropicBlur ?? anisotropy,
         thickness: thickness2,
         side,
@@ -1717,23 +1604,36 @@ const MeshTransmissionMaterial = /* @__PURE__ */ React.forwardRef(
   }
 );
 
-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;
@@ -1757,109 +1657,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(
@@ -1981,138 +1809,64 @@ const approximateRefraction = /* @__PURE__ */ Fn(([rayDir, normal, iorValue, bou
   });
   return select(entryValid, currentDir, reflect(rayDir, normal));
 });
-class MeshRefractionMaterialImpl extends MeshPhysicalNodeMaterial {
-  //* Private Uniform Nodes --
-  _envMap;
-  _bounces;
-  _ior;
-  _fresnel;
-  _aberrationStrength;
-  _color;
-  _opacityValue;
+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.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 { 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);
-      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
-          )
+          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
-          )
+          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;
-  }
 }
 const MeshRefractionMaterial = /* @__PURE__ */ React.forwardRef(
   ({
@@ -2335,175 +2089,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) {
-    if (this._map) 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);
@@ -2515,88 +2182,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, {
@@ -2644,7 +2263,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;
@@ -2686,9 +2305,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(
   ({
@@ -2703,7 +2341,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(() => {
@@ -2714,43 +2352,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) => {
@@ -2855,44 +2519,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());
@@ -2900,17 +2547,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);
@@ -2919,25 +2567,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());
@@ -2956,84 +2592,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({
@@ -4743,7 +4331,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) {
@@ -4771,7 +4359,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;
@@ -10159,7 +9747,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 });
   });
@@ -11321,62 +10909,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(() => {
@@ -11387,136 +10976,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");
@@ -11578,9 +11054,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
       }
     );
   }
@@ -11696,52 +11172,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;
@@ -11751,16 +11249,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(() => {
@@ -11774,17 +11275,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);
     })();
@@ -11792,111 +11292,90 @@ 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;
+    this.uniforms.resolution.value.copy(resolution);
   }
-  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;
+}
+
+class BlurPass {
+  renderTargetA;
+  renderTargetB;
+  convolutionMaterial;
+  /** Fullscreen triangle the convolution material is drawn with */
+  screen;
+  renderToScreen = false;
+  constructor({
+    resolution,
+    width = 500,
+    height = 500,
+    minDepthThreshold = 0,
+    maxDepthThreshold = 1,
+    depthScale = 0,
+    depthToBlurRatioBias = 0.25
+  }) {
+    this.renderTargetA = new THREE.RenderTarget(resolution, resolution, {
+      minFilter: THREE.LinearFilter,
+      magFilter: THREE.LinearFilter,
+      stencilBuffer: false,
+      depthBuffer: false,
+      type: THREE.HalfFloatType
+    });
+    this.renderTargetB = this.renderTargetA.clone();
+    const material = new ConvolutionMaterial();
+    material.setTexelSize(1 / width, 1 / height);
+    material.setResolution(new THREE.Vector2(width, height));
+    material.minDepthThreshold = minDepthThreshold;
+    material.maxDepthThreshold = maxDepthThreshold;
+    material.depthScale = depthScale;
+    material.depthToBlurRatioBias = depthToBlurRatioBias;
+    material.useDepth = depthScale > 0;
+    this.convolutionMaterial = material;
+    this.screen = new QuadMesh(material);
+    this.screen.frustumCulled = false;
   }
-  /** Enable/disable depth-based blur (0 = off, 1 = on) */
-  get useDepth() {
-    return this._useDepth.value > 0.5;
+  /**
+   * Runs the blur.
+   *
+   * Reads `inputBuffer`, ping-pongs through the internal targets, and writes the
+   * final pass into `outputBuffer` (or the canvas when `renderToScreen` is true).
+   * The render target is left bound, matching the legacy pass — restore it with
+   * `renderer.setRenderTarget(null)` when you are done.
+   */
+  render(renderer, inputBuffer, outputBuffer = null) {
+    const material = this.convolutionMaterial;
+    material.depthBuffer = inputBuffer.depthTexture;
+    const kernel = material.kernel;
+    let lastRT = inputBuffer;
+    let i = 0;
+    const last = kernel.length - 1;
+    for (; i < last; ++i) {
+      const destRT = (i & 1) === 0 ? this.renderTargetA : this.renderTargetB;
+      material.kernelValue = kernel[i];
+      material.inputBuffer = lastRT.texture;
+      renderer.setRenderTarget(destRT);
+      this.screen.render(renderer);
+      lastRT = destRT;
+    }
+    material.kernelValue = kernel[i];
+    material.inputBuffer = lastRT.texture;
+    renderer.setRenderTarget(this.renderToScreen ? null : outputBuffer);
+    this.screen.render(renderer);
+  }
+  /** Resize the intermediate targets and recompute the texel size */
+  setSize(width, height) {
+    this.renderTargetA.setSize(width, height);
+    this.renderTargetB.setSize(width, height);
+    this.convolutionMaterial.setTexelSize(1 / width, 1 / height);
+    this.convolutionMaterial.setResolution(new THREE.Vector2(width, height));
   }
-  set useDepth(v) {
-    this._useDepth.value = v ? 1 : 0;
+  dispose() {
+    this.renderTargetA.dispose();
+    this.renderTargetB.dispose();
+    this.convolutionMaterial.dispose();
   }
 }
 
@@ -12094,28 +11573,31 @@ 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;
+const MeshDiscardMaterial = /* @__PURE__ */ React.forwardRef((props, fref) => {
+  const [material] = React.useState(() => new DiscardNodeMaterial());
+  return /* @__PURE__ */ React.createElement("primitive", { object: material, ref: fref, attach: "material", ...props });
+});
+
+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;
@@ -12123,15 +11605,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))),
@@ -12146,71 +11629,16 @@ 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;
-  }
 }
 
 function createHtmlNodeMaterial(transform) {
@@ -12231,12 +11659,15 @@ const HtmlMaterial = ({ transform }) => {
   return /* @__PURE__ */ React.createElement("primitive", { object: material, attach: "material" });
 };
 
-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;
@@ -12250,7 +11681,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);
     })();
@@ -12259,38 +11690,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");
@@ -12301,13 +11722,13 @@ 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 pixelSize = particleSize.mul(25).mul(this._pixelRatio);
+      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));
@@ -12320,82 +11741,67 @@ class SparklesMaterial extends SpriteNodeMaterial {
       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");
@@ -12407,12 +11813,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) => {
@@ -12438,100 +11842,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(
   ({
@@ -12937,4 +12247,181 @@ const Sparkles = /* @__PURE__ */ React.forwardRef(({ noise = 1, count = 100, spe
   );
 });
 
-export { AccumulativeShadows, AdaptiveDpr, AdaptiveEvents, ArcballControls, BBAnchor, Backdrop, BakeShadows, Billboard, Bounds, Box, CameraShake, Capsule, CatmullRomLine, Caustics, CausticsMaterial, CausticsNormalMaterial, CausticsProjectionMaterial, Center, Circle, Clone, Cloud, CloudInstance, Clouds, ComputedAttribute, Cone, ContactShadows, ConvolutionMaterial, CubeCamera, CubeTexture, CubicBezierLine, CurveModifier, CycleRaycast, Cylinder, Decal, Detailed, DetectGPU, DeviceOrientationControls, DiscardMaterial, Dodecahedron, DragControls, Edges, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, Example, Extrude, FakeCloudMaterial, Fbo, Fbx, FirstPersonControls, Fisheye, Float, FlyControls, GizmoHelper, GizmoViewcube, GizmoViewport, Gltf, GradientTexture, GradientType, Grid, Helper, Html, HtmlMaterial, Hud, Icosahedron, Image, Instance, InstancedAttribute, Instances, IsObject, KeyboardControls, Ktx2, Lathe, Lightformer, Line, Loader, MapControls, Mask, MatcapTexture, Merged, MeshDistortMaterial, MeshPortalMaterial, MeshReflectorMaterial, MeshReflectorMaterial$1 as MeshReflectorMaterialImpl, MeshRefractionMaterial, MeshTransmissionMaterial, MeshWobbleMaterial, MotionPathControls, NormalTexture, Octahedron, OrbitControls, OrthographicCamera, Outlines, PCSSShadowNode, PerformanceMonitor, PerspectiveCamera, PivotControls, Plane, Point, PointMaterial, PointMaterialImpl, PointerLockControls, Points, PointsBuffer, Polyhedron, PositionMesh, PositionPoint, PositionalAudio, Preload, PresentationControls, Progress, QuadraticBezierLine, RandomizedLight, RenderCubeTexture, RenderTexture, Resize, Ring, RoundedBox, RoundedBoxGeometry, Sampler, ScreenQuad, ScreenSizer, ScreenSpace, ScreenVideoTexture, Scroll, ScrollControls, Segment, SegmentObject, Segments, Select, Shadow, Shape, Sky, SoftShadows, Sparkles, SparklesMaterial, Sphere, SpotLight, SpotLightMaterial, SpriteAnimator, Stage, StarfieldMaterial, Stars, Stats, StatsGl, Svg, Tetrahedron, Text3D, Texture, Torus, TorusKnot, TrackballControls, Trail, TrailTexture, TransformControls, Tube, VideoTexture, View, WebcamVideoTexture, Wireframe, WireframeMaterial, WireframeMaterialShaders, accumulativeContext, calcPosFromAngles, checkIfFrameIsEmpty, createInstances, getFirstFrame, meshBounds, presetsObj, setBarycentricCoordinates, setWireframeOverride, useAnimations, useAspect, useBounds, useContextBridge, useCubeCamera, useCubeTexture, useCursor, useCustomRaycast, useDepthBuffer, useDetectGPU, useEnvironment, useFBO, useFBX, useFont, useGLTF, useGizmoContext, useHelper, useIntersect, useKTX2, useKeyboardControls, useMask, useMatcapTexture, useMotion, useNormalTexture, usePerformanceMonitor, useProgress, useScroll, useSelect, useSpriteAnimator, useSpriteLoader, useSurfaceSampler, useTexture, useTrail, useTrailTexture, useVariants, useVideoTexture, useWireframeUniforms };
+if (typeof window !== "undefined") {
+  await import('three/examples/jsm/inspector/tabs/Settings.js');
+}
+const InspectorContext = React.createContext(void 0);
+function useInspectorContext() {
+  const inspector = React.useContext(InspectorContext);
+  if (inspector === void 0) throw new Error("useInspectorControls must be used inside <Inspector>.");
+  return inspector;
+}
+function Inspector({ children, hide = false }) {
+  const renderer = useThree((state) => state.renderer);
+  const isLegacy = useThree((state) => state.isLegacy);
+  const frameloop = useThree((state) => state.frameloop);
+  const eventSource = useThree((state) => state.events.connected);
+  const invalidate = useThree((state) => state.invalidate);
+  const [inspector, setInspector] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const session = React.useRef(null);
+  const hidden = React.useRef(hide);
+  hidden.current = hide;
+  React.useEffect(() => {
+    if (isLegacy) {
+      setError(new Error("Inspector requires an R3F v10 WebGPU renderer. Use <Canvas renderer={true}>."));
+      return;
+    }
+    if (frameloop !== "always") {
+      setError(
+        new Error('Inspector currently requires frameloop="always". Demand and manual rendering are not supported.')
+      );
+      return;
+    }
+    const controller = new AbortController();
+    let current;
+    Promise.all([import('./chunks/inspector-runtime.mjs'), renderer.init()]).then(async ([{ attachInspector }]) => {
+      if (controller.signal.aborted) return;
+      current = await attachInspector(renderer, eventSource, controller.signal);
+      if (controller.signal.aborted) {
+        current.release();
+        return;
+      }
+      current.inspector.domElement.style.display = hidden.current ? "none" : "";
+      session.current = current;
+      setInspector(current.inspector);
+      invalidate();
+    }).catch((reason) => {
+      if (!controller.signal.aborted) setError(reason instanceof Error ? reason : new Error(String(reason)));
+    });
+    return () => {
+      controller.abort();
+      session.current = null;
+      setInspector(null);
+      current?.release();
+    };
+  }, [renderer, isLegacy, frameloop, eventSource, invalidate]);
+  React.useEffect(() => {
+    if (inspector) inspector.domElement.style.display = hide ? "none" : "";
+  }, [inspector, hide]);
+  useFrame(() => session.current?.begin(), { phase: "start", priority: Infinity });
+  useFrame(() => session.current?.finish(), { phase: "finish", priority: -Infinity });
+  if (error) throw error;
+  return /* @__PURE__ */ React.createElement(InspectorContext.Provider, { value: inspector }, children);
+}
+
+function isFolder(entry) {
+  return entry.schema !== void 0;
+}
+function isColorControl({ color, value }) {
+  return color === true || value?.isColor === true || typeof value === "string" && /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(value);
+}
+function readValue(control, value = control.value) {
+  if (isColorControl(control) && typeof control.value === "string") {
+    if (typeof value === "number") return "#" + value.toString(16).padStart(6, "0");
+    if (typeof value === "string") {
+      return value.length === 4 ? "#" + [...value.slice(1)].map((c) => c + c).join("") : value.toLowerCase();
+    }
+  }
+  return value?.isColor ? value.clone() : value;
+}
+function buildInitialValues(schema) {
+  return Object.fromEntries(
+    Object.entries(schema).map(([key, entry]) => [
+      key,
+      isFolder(entry) ? buildInitialValues(entry.schema) : readValue(entry)
+    ])
+  );
+}
+function setIn(obj, path, value) {
+  const [head, ...rest] = path;
+  return {
+    ...obj,
+    [head]: rest.length === 0 ? value : setIn(obj[head], rest, value)
+  };
+}
+function useInspectorControls(schema, options = {}) {
+  const inspector = useInspectorContext();
+  const invalidate = useThree((state) => state.invalidate);
+  const { title, collapsed } = options;
+  const schemaRef = useRef(schema);
+  schemaRef.current = schema;
+  const [values, setValues] = useState(() => buildInitialValues(schema));
+  const valuesRef = useRef(values);
+  const rootRef = useRef(null);
+  useEffect(() => {
+    if (!inspector) return;
+    const parameters = inspector.parameters;
+    const root = parameters.createGroup(title ?? "Controls");
+    rootRef.current = root;
+    const editors = [];
+    let active = true;
+    function populate(group, currentSchema, currentValues, path) {
+      for (const key of Object.keys(currentSchema)) {
+        const entry = currentSchema[key];
+        if (isFolder(entry)) {
+          const folder = group.addFolder(entry.label ?? key);
+          populate(folder, entry.schema, currentValues[key], [...path, key]);
+          if (entry.collapsed) folder.close();
+          continue;
+        }
+        const control = { ...entry, value: currentValues[key] };
+        const backing = { [key]: readValue(control) };
+        let editor;
+        if (control.options !== void 0) {
+          editor = group.add(backing, key, control.options);
+        } else if (isColorControl(control)) {
+          editor = group.addColor(backing, key);
+        } else if (typeof control.value === "number") {
+          if (control.min !== void 0 && control.max !== void 0) {
+            editor = group.add(backing, key, control.min, control.max, control.step);
+          } else {
+            const number = group.addNumber(backing, key, control.min, control.max);
+            if (control.step !== void 0) number.input.step = String(control.step);
+            editor = number;
+          }
+        } else {
+          editor = group.add(backing, key);
+        }
+        editor.name(control.label ?? key);
+        editors.push(editor);
+        const fullPath = [...path, key];
+        editor.onChange((value) => {
+          if (!active) return;
+          const next = readValue(entry, value);
+          valuesRef.current = setIn(valuesRef.current, fullPath, next);
+          setValues(valuesRef.current);
+          invalidate();
+          let node = schemaRef.current;
+          for (let i = 0; i < fullPath.length - 1 && node; i++) {
+            node = node[fullPath[i]]?.schema;
+          }
+          node?.[key]?.onChange?.(next);
+        });
+      }
+    }
+    populate(root, schemaRef.current, valuesRef.current, []);
+    if (collapsed) root.close();
+    parameters.show();
+    return () => {
+      active = false;
+      rootRef.current = null;
+      for (const editor of editors) editor.onChange(() => {
+      });
+      parameters.paramList.remove(root.paramList);
+      const index = parameters.groups.indexOf(root);
+      if (index !== -1) parameters.groups.splice(index, 1);
+    };
+  }, [inspector, invalidate]);
+  useEffect(() => {
+    rootRef.current?.name(title ?? "Controls");
+  }, [title, inspector]);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (collapsed) root?.close();
+    else if (root && !root.paramList.isOpen) root.paramList.toggle();
+  }, [collapsed, inspector]);
+  return values;
+}
+
+export { AccumulativeShadows, AdaptiveDpr, AdaptiveEvents, ArcballControls, BBAnchor, Backdrop, BakeShadows, Billboard, BlurPass, Bounds, Box, CameraShake, Capsule, CatmullRomLine, Caustics, CausticsMaterial, CausticsNormalMaterial, CausticsProjectionMaterial, Center, Circle, Clone, Cloud, CloudInstance, Clouds, ComputedAttribute, Cone, ContactShadows, ConvolutionMaterial, CubeCamera, CubeTexture, CubicBezierLine, CurveModifier, CycleRaycast, Cylinder, Decal, Detailed, DetectGPU, DeviceOrientationControls, DiscardMaterial, DiscardNodeMaterial, Dodecahedron, DragControls, Edges, Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal, Example, Extrude, FakeCloudMaterial, Fbo, Fbx, FirstPersonControls, Fisheye, Float, FlyControls, GizmoHelper, GizmoViewcube, GizmoViewport, Gltf, GradientTexture, GradientType, Grid, Helper, Html, HtmlMaterial, Hud, Icosahedron, Image, Inspector, Instance, InstancedAttribute, Instances, IsObject, KeyboardControls, Ktx2, Lathe, Lightformer, Line, Loader, MapControls, Mask, MatcapTexture, Merged, MeshDiscardMaterial, MeshDistortMaterial, MeshPortalMaterial, MeshReflectorMaterial, MeshReflectorMaterial$1 as MeshReflectorMaterialImpl, MeshRefractionMaterial, MeshTransmissionMaterial, MeshWobbleMaterial, MotionPathControls, NormalTexture, Octahedron, OrbitControls, OrthographicCamera, Outlines, PCSSShadowNode, PerformanceMonitor, PerspectiveCamera, PivotControls, Plane, Point, PointMaterial, PointMaterialImpl, PointerLockControls, Points, PointsBuffer, Polyhedron, PositionMesh, PositionPoint, PositionalAudio, Preload, PresentationControls, Progress, QuadraticBezierLine, RandomizedLight, RenderCubeTexture, RenderTexture, Resize, Ring, RoundedBox, RoundedBoxGeometry, Sampler, ScreenQuad, ScreenSizer, ScreenSpace, ScreenVideoTexture, Scroll, ScrollControls, Segment, SegmentObject, Segments, Select, Shadow, Shape, Sky, SoftShadows, Sparkles, SparklesMaterial, Sphere, SpotLight, SpotLightMaterial, SpriteAnimator, Stage, StarfieldMaterial, Stars, Stats, StatsGl, Svg, Tetrahedron, Text3D, Texture, Torus, TorusKnot, TrackballControls, Trail, TrailTexture, TransformControls, Tube, VideoTexture, View, WebcamVideoTexture, Wireframe, WireframeMaterial, WireframeMaterialImpl, WireframeMaterialShaders, accumulativeContext, calcPosFromAngles, checkIfFrameIsEmpty, createInstances, getFirstFrame, meshBounds, presetsObj, setBarycentricCoordinates, setWireframeOverride, useAnimations, useAspect, useBounds, useContextBridge, useCubeCamera, useCubeTexture, useCursor, useCustomRaycast, useDepthBuffer, useDetectGPU, useEnvironment, useFBO, useFBX, useFont, useGLTF, useGizmoContext, useHelper, useInspectorControls, useIntersect, useKTX2, useKeyboardControls, useMask, useMatcapTexture, useMotion, useNormalTexture, usePerformanceMonitor, useProgress, useScroll, useSelect, useSpriteAnimator, useSpriteLoader, useSurfaceSampler, useTexture, useTrail, useTrailTexture, useVariants, useVideoTexture, useWireframeUniforms, withUniforms };