@react-three/drei 9.121.6-rc.1 → 9.122.0

package/core/Instances.js

@@ -2,6 +2,7 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import * as THREE from 'three';
 import * as React from 'react';
 import { extend, useFrame } from '@react-three/fiber';
+import Composer from 'react-composer';
 import { setUpdateRange } from '../helpers/deprecated.js';
 
 function isFunctionChild(value) {
@@ -73,7 +74,7 @@ const Instance = /* @__PURE__ */React.forwardRef(({
   React.useMemo(() => extend({
     PositionMesh
   }), []);
-  const group = React.useRef(null);
+  const group = React.useRef();
   React.useImperativeHandle(ref, () => group.current, []);
   const {
     subscribe,
@@ -134,11 +135,11 @@ const Instances = /* @__PURE__ */React.forwardRef(({
       count = Math.min(limit, range !== undefined ? range : limit, instances.length);
       parentRef.current.count = count;
       setUpdateRange(parentRef.current.instanceMatrix, {
-        start: 0,
+        offset: 0,
         count: count * 16
       });
       setUpdateRange(parentRef.current.instanceColor, {
-        start: 0,
+        offset: 0,
         count: count * 3
       });
       for (let i = 0; i < instances.length; i++) {
@@ -174,11 +175,15 @@ const Instances = /* @__PURE__ */React.forwardRef(({
     raycast: () => null
   }, props), /*#__PURE__*/React.createElement("instancedBufferAttribute", {
     attach: "instanceMatrix",
-    args: [matrices, 16],
+    count: matrices.length / 16,
+    array: matrices,
+    itemSize: 16,
     usage: THREE.DynamicDrawUsage
   }), /*#__PURE__*/React.createElement("instancedBufferAttribute", {
     attach: "instanceColor",
-    args: [colors, 3],
+    count: colors.length / 3,
+    array: colors,
+    itemSize: 3,
     usage: THREE.DynamicDrawUsage
   }), isFunctionChild(children) ? /*#__PURE__*/React.createElement(localContext.Provider, {
     value: api
@@ -188,37 +193,29 @@ const Instances = /* @__PURE__ */React.forwardRef(({
     value: api
   }, children));
 });
-const Merged = /*#__PURE__*/React.forwardRef(function Merged({
+const Merged = /* @__PURE__ */React.forwardRef(function Merged({
   meshes,
   children,
-  ...rest
+  ...props
 }, ref) {
-  const instances = [];
-  if (Array.isArray(meshes)) {
-    for (const mesh of meshes) {
-      if (mesh != null && mesh.isMesh) {
-        instances.push(props => /*#__PURE__*/React.createElement(Instances, _extends({
-          key: mesh.geometry.uuid,
-          geometry: mesh.geometry,
-          material: mesh.material
-        }, rest, props)));
-      }
-    }
-  } else if (meshes != null && typeof meshes === 'object') {
-    for (const key in meshes) {
-      const mesh = meshes[key];
-      if (mesh != null && mesh.isMesh) {
-        instances.push(props => /*#__PURE__*/React.createElement(Instances, _extends({
-          key: mesh.geometry.uuid,
-          geometry: mesh.geometry,
-          material: mesh.material
-        }, rest, props)));
-      }
-    }
-  }
+  const isArray = Array.isArray(meshes);
+  // Filter out meshes from collections, which may contain non-meshes
+  if (!isArray) for (const key of Object.keys(meshes)) if (!meshes[key].isMesh) delete meshes[key];
   return /*#__PURE__*/React.createElement("group", {
     ref: ref
-  }, children(instances));
+  }, /*#__PURE__*/React.createElement(Composer, {
+    components: (isArray ? meshes : Object.values(meshes)).map(({
+      geometry,
+      material
+    }) => /*#__PURE__*/React.createElement(Instances, _extends({
+      key: geometry.uuid,
+      geometry: geometry,
+      material: material
+    }, props)))
+  }, args => isArray ? children(...args) : children(Object.keys(meshes).filter(key => meshes[key].isMesh).reduce((acc, key, i) => ({
+    ...acc,
+    [key]: args[i]
+  }), {}))));
 });
 
 /** Idea and implementation for global instances and instanced attributes by
@@ -244,7 +241,7 @@ const InstancedAttribute = /*#__PURE__*/React.forwardRef(({
   const ref = React.useRef(null);
   React.useImperativeHandle(fref, () => ref.current, []);
   React.useLayoutEffect(() => {
-    const parent = ref.current.__r3f.parent.object;
+    const parent = ref.current.__r3f.parent;
     parent.geometry.attributes[name] = ref.current;
     const value = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
     const array = Array.from({
@@ -252,7 +249,6 @@ const InstancedAttribute = /*#__PURE__*/React.forwardRef(({
     }, () => value).flat();
     ref.current.array = new Float32Array(array);
     ref.current.itemSize = value.length;
-    // @ts-expect-error
     ref.current.count = array.length / ref.current.itemSize;
     return () => {
       delete parent.geometry.attributes[name];
@@ -260,7 +256,7 @@ const InstancedAttribute = /*#__PURE__*/React.forwardRef(({
   }, [name]);
   let iterations = 0;
   useFrame(() => {
-    const parent = ref.current.__r3f.parent.object;
+    const parent = ref.current.__r3f.parent;
     if (parent.userData.frames === Infinity || iterations < parent.userData.frames) {
       for (let i = 0; i < parent.userData.instances.length; i++) {
         const instance = parent.userData.instances[i].current;
@@ -273,7 +269,6 @@ const InstancedAttribute = /*#__PURE__*/React.forwardRef(({
       iterations++;
     }
   });
-  // @ts-expect-error we're abusing three API here by mutating immutable args
   return /*#__PURE__*/React.createElement("instancedBufferAttribute", {
     ref: ref,
     usage: usage,

package/core/Ktx2.d.ts

@@ -4,7 +4,7 @@ export declare function useKTX2<Url extends string[] | string | Record<string, s
     [key in keyof Url]: Texture;
 } : Texture;
 export declare namespace useKTX2 {
-    var preload: (url: string extends any[] ? string[] : string, basisPath?: string) => void;
+    var preload: (url: string extends any[] ? string[] : string, basisPath?: string) => undefined;
     var clear: (input: string | string[]) => void;
 }
 export declare const Ktx2: ({ children, input, basisPath, }: {

package/core/Lightformer.d.ts

@@ -1,7 +1,7 @@
-import { ReactThreeFiber, ThreeElements } from '@react-three/fiber';
+import { ReactThreeFiber } from '@react-three/fiber';
 import * as THREE from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type LightProps = Omit<ThreeElements['mesh'], 'ref'> & {
+export type LightProps = JSX.IntrinsicElements['mesh'] & {
     args?: any[];
     map?: THREE.Texture;
     toneMapped?: boolean;
@@ -10,6 +10,6 @@ export type LightProps = Omit<ThreeElements['mesh'], 'ref'> & {
     scale?: number | [number, number, number] | [number, number];
     intensity?: number;
     target?: boolean | [number, number, number] | THREE.Vector3;
-    light?: Partial<ThreeElements['pointLight']>;
+    light?: Partial<JSX.IntrinsicElements['pointLight']>;
 };
 export declare const Lightformer: ForwardRefComponent<LightProps, THREE.Mesh>;

package/core/Line.d.ts

@@ -1,13 +1,13 @@
 import { Color, ColorRepresentation } from 'three';
-import { Vector2 as FiberVector2, Vector3 as FiberVector3, ThreeElement } from '@react-three/fiber';
+import { ReactThreeFiber, Vector2 as FiberVector2, Vector3 as FiberVector3 } from '@react-three/fiber';
 import { LineMaterial, LineMaterialParameters, Line2, LineSegments2 } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type LineProps = Omit<{
+export type LineProps = {
     points: ReadonlyArray<FiberVector2 | FiberVector3>;
     vertexColors?: ReadonlyArray<Color | [number, number, number] | [number, number, number, number]>;
     lineWidth?: number;
     segments?: boolean;
-} & Omit<LineMaterialParameters, 'vertexColors' | 'color'> & Omit<ThreeElement<typeof Line2>, 'ref' | 'args'> & Omit<ThreeElement<typeof LineMaterial>, 'ref' | 'color' | 'vertexColors' | 'args'> & {
+} & Omit<LineMaterialParameters, 'vertexColors' | 'color'> & Omit<ReactThreeFiber.Object3DNode<Line2, typeof Line2>, 'args'> & Omit<ReactThreeFiber.Object3DNode<LineMaterial, [LineMaterialParameters]>, 'color' | 'vertexColors' | 'args'> & {
     color?: ColorRepresentation;
-}, 'ref'>;
+};
 export declare const Line: ForwardRefComponent<LineProps, Line2 | LineSegments2>;

package/core/MapControls.d.ts

@@ -1,8 +1,8 @@
-import { ReactThreeFiber, ThreeElement } from '@react-three/fiber';
+import { ReactThreeFiber } from '@react-three/fiber';
 import * as THREE from 'three';
 import { MapControls as MapControlsImpl } from 'three-stdlib';
-import { ForwardRefComponent, Overwrite } from '../helpers/ts-utils';
-export type MapControlsProps = Omit<Overwrite<ThreeElement<typeof MapControlsImpl>, {
+import { ForwardRefComponent } from '../helpers/ts-utils';
+export type MapControlsProps = ReactThreeFiber.Overwrite<ReactThreeFiber.Object3DNode<MapControlsImpl, typeof MapControlsImpl>, {
     target?: ReactThreeFiber.Vector3;
     camera?: THREE.Camera;
     makeDefault?: boolean;
@@ -10,5 +10,5 @@ export type MapControlsProps = Omit<Overwrite<ThreeElement<typeof MapControlsImp
     onStart?: (e?: THREE.Event) => void;
     onEnd?: (e?: THREE.Event) => void;
     domElement?: HTMLElement;
-}>, 'ref' | 'args'>;
+}>;
 export declare const MapControls: ForwardRefComponent<MapControlsProps, MapControlsImpl>;

package/core/MarchingCubes.d.ts

@@ -1,24 +1,24 @@
 import * as THREE from 'three';
 import { Color } from 'three';
 import { MarchingCubes as MarchingCubesImpl } from 'three-stdlib';
-import { ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
 export type MarchingCubesProps = {
     resolution?: number;
     maxPolyCount?: number;
     enableUvs?: boolean;
     enableColors?: boolean;
-} & Omit<ThreeElements['group'], 'ref'>;
+} & JSX.IntrinsicElements['group'];
 export declare const MarchingCubes: ForwardRefComponent<MarchingCubesProps, MarchingCubesImpl>;
-export type MarchingCubeProps = {
+type MarchingCubeProps = {
     strength?: number;
     subtract?: number;
     color?: Color;
-} & ThreeElements['group'];
+} & JSX.IntrinsicElements['group'];
 export declare const MarchingCube: ForwardRefComponent<MarchingCubeProps, THREE.Group>;
-export type MarchingPlaneProps = {
+type MarchingPlaneProps = {
     planeType?: 'x' | 'y' | 'z';
     strength?: number;
     subtract?: number;
-} & ThreeElements['group'];
+} & JSX.IntrinsicElements['group'];
 export declare const MarchingPlane: ForwardRefComponent<MarchingPlaneProps, THREE.Group>;
+export {};

package/core/Mask.d.ts

@@ -1,12 +1,11 @@
 import * as THREE from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-import { ThreeElements } from '@react-three/fiber';
-export type MaskProps = Omit<ThreeElements['mesh'], 'ref' | 'id'> & {
+type Props = Omit<JSX.IntrinsicElements['mesh'], 'id'> & {
     id: number;
     colorWrite?: boolean;
     depthWrite?: boolean;
 };
-export declare const Mask: ForwardRefComponent<MaskProps, THREE.Mesh>;
+export declare const Mask: ForwardRefComponent<Props, THREE.Mesh>;
 export declare function useMask(id: number, inverse?: boolean): {
     stencilWrite: boolean;
     stencilRef: number;
@@ -15,3 +14,4 @@ export declare function useMask(id: number, inverse?: boolean): {
     stencilZFail: 7680;
     stencilZPass: 7680;
 };
+export {};

package/core/MeshDiscardMaterial.d.ts

@@ -1,10 +1,11 @@
 import { ShaderMaterial } from 'three';
-import { ThreeElements } from '@react-three/fiber';
+import { ReactThreeFiber } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-declare module '@react-three/fiber' {
-    interface ThreeElements {
-        discardMaterialImpl: ThreeElements['shaderMaterial'];
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            discardMaterialImpl: ReactThreeFiber.ShaderMaterialProps;
+        }
     }
 }
-export type MeshDiscardMaterialProps = Omit<ThreeElements['shaderMaterial'], 'ref'>;
-export declare const MeshDiscardMaterial: ForwardRefComponent<MeshDiscardMaterialProps, ShaderMaterial>;
+export declare const MeshDiscardMaterial: ForwardRefComponent<JSX.IntrinsicElements['shaderMaterial'], ShaderMaterial>;

package/core/MeshDistortMaterial.d.ts

@@ -1,6 +1,21 @@
 import { IUniform, MeshPhysicalMaterial, MeshPhysicalMaterialParameters } from 'three';
-import { ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
+type DistortMaterialType = JSX.IntrinsicElements['meshPhysicalMaterial'] & {
+    time?: number;
+    distort?: number;
+    radius?: number;
+};
+type Props = DistortMaterialType & {
+    speed?: number;
+    factor?: number;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            distortMaterialImpl: DistortMaterialType;
+        }
+    }
+}
 interface Uniform<T> {
     value: T;
 }
@@ -22,18 +37,5 @@ declare class DistortMaterialImpl extends MeshPhysicalMaterial {
     get radius(): number;
     set radius(v: number);
 }
-declare module '@react-three/fiber' {
-    interface ThreeElements {
-        distortMaterialImpl: ThreeElements['meshPhysicalMaterial'] & {
-            time?: number;
-            distort?: number;
-            radius?: number;
-        };
-    }
-}
-export type MeshDistortMaterialProps = Omit<ThreeElements['distortMaterialImpl'], 'ref'> & {
-    speed?: number;
-    factor?: number;
-};
-export declare const MeshDistortMaterial: ForwardRefComponent<MeshDistortMaterialProps, DistortMaterialImpl>;
+export declare const MeshDistortMaterial: ForwardRefComponent<Props, DistortMaterialImpl>;
 export {};

package/core/MeshPortalMaterial.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),n=require("@react-three/fiber"),a=require("./useIntersect.cjs.js"),i=require("./Fbo.cjs.js"),l=require("./RenderTexture.cjs.js"),o=require("./shaderMaterial.cjs.js"),u=require("three-stdlib"),s=require("../helpers/constants.cjs.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var d=v(e),m=c(r),f=c(t);const g=o.shaderMaterial({blur:0,map:null,sdf:null,blend:0,size:0,resolution:new m.Vector2},"varying vec2 vUv;\n   void main() {\n     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n     vUv = uv;\n   }",`uniform sampler2D sdf;\n   uniform sampler2D map;\n   uniform float blur;\n   uniform float size;\n   uniform float time;\n   uniform vec2 resolution;\n   varying vec2 vUv;\n   #include <packing>\n   void main() {\n     vec2 uv = gl_FragCoord.xy / resolution.xy;\n     vec4 t = texture2D(map, uv);\n     float k = blur;\n     float d = texture2D(sdf, vUv).r/size;\n     float alpha = 1.0 - smoothstep(0.0, 1.0, clamp(d/k + 1.0, 0.0, 1.0));\n     gl_FragColor = vec4(t.rgb, blur == 0.0 ? t.a : t.a * alpha);\n     #include <tonemapping_fragment>\n     #include <${s.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`),p=f.forwardRef((({children:e,events:r,blur:t=0,eventPriority:o=0,renderPriority:u=0,worldUnits:s=!1,resolution:v=512,...c},p)=>{n.extend({PortalMaterialImpl:g});const h=f.useRef(null),{scene:b,gl:y,size:w,viewport:M,setEvents:U}=n.useThree(),T=i.useFBO(v,v),[R,S]=f.useState(0);n.useFrame((()=>{const e=h.current.blend>0?Math.max(1,u):0;R!==e&&S(e)})),f.useEffect((()=>{void 0!==r&&U({enabled:!r})}),[r]);const[_,j]=f.useState(!0),D=a.useIntersect(j);f.useLayoutEffect((()=>{var e;D.current=null==(e=h.current)||null==(e=e.__r3f.parent)?void 0:e.object}),[]),f.useLayoutEffect((()=>{if(D.current&&t&&null===h.current.sdf){const e=new m.Mesh(D.current.geometry,new m.MeshBasicMaterial),r=(new m.Box3).setFromBufferAttribute(e.geometry.attributes.position),t=new m.OrthographicCamera(r.min.x*(1+2/v),r.max.x*(1+2/v),r.max.y*(1+2/v),r.min.y*(1+2/v),.1,1e3);t.position.set(0,0,1),t.lookAt(0,0,0),y.setRenderTarget(T),y.render(e,t);const n=F(v,v,y)(T.texture),a=new Float32Array(v*v);y.readRenderTargetPixels(n,0,0,v,v,a);let i=1/0;for(let e=0;e<a.length;e++)a[e]<i&&(i=a[e]);i=-i,h.current.size=i,h.current.sdf=n.texture,y.setRenderTarget(null)}}),[v,t]),f.useImperativeHandle(p,(()=>h.current));const P=f.useCallback(((e,r,t)=>{var n;if(!D.current)return!1;if(r.pointer.set(e.offsetX/r.size.width*2-1,-e.offsetY/r.size.height*2+1),r.raycaster.setFromCamera(r.pointer,r.camera),0===(null==(n=h.current)?void 0:n.blend)){const[e]=r.raycaster.intersectObject(D.current);if(!e)return r.raycaster.camera=void 0,!1}}),[]);return f.createElement("portalMaterialImpl",d.default({ref:h,blur:t,blend:0,resolution:[w.width*M.dpr,w.height*M.dpr],attach:"material"},c),f.createElement(l.RenderTexture,{attach:"map",frames:_?1/0:0,eventPriority:o,renderPriority:u,compute:P},e,f.createElement(x,{events:r,rootScene:b,priority:R,material:h,worldUnits:s})))}));function x({events:e,rootScene:r,material:t,priority:a,worldUnits:l}){const o=n.useThree((e=>e.scene)),v=n.useThree((e=>e.setEvents)),c=i.useFBO(),d=i.useFBO();f.useLayoutEffect((()=>{o.matrixAutoUpdate=!1}),[]),f.useEffect((()=>{void 0!==e&&v({enabled:e})}),[e]);const[g,p]=f.useMemo((()=>{const e={value:0};return[new u.FullScreenQuad(new m.ShaderMaterial({uniforms:{a:{value:c.texture},b:{value:d.texture},blend:e},vertexShader:"\n          varying vec2 vUv;\n          void main() {\n            vUv = uv;\n            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n          }",fragmentShader:`\n          uniform sampler2D a;\n          uniform sampler2D b;\n          uniform float blend;\n          varying vec2 vUv;\n          #include <packing>\n          void main() {\n            vec4 ta = texture2D(a, vUv);\n            vec4 tb = texture2D(b, vUv);\n            gl_FragColor = mix(tb, ta, blend);\n            #include <tonemapping_fragment>\n            #include <${s.version>=154?"colorspace_fragment":"encodings_fragment"}>\n          }`})),e]}),[]);return n.useFrame((e=>{var n;let i=null==t||null==(n=t.current)||null==(n=n.__r3f.parent)?void 0:n.object;if(i){var u,s,v,m;if(l)o.matrixWorld.identity();else a&&1===(null==(u=t.current)?void 0:u.blend)&&i.updateWorldMatrix(!0,!1),o.matrixWorld.copy(i.matrixWorld);if(a)(null==(s=t.current)?void 0:s.blend)>0&&(null==(v=t.current)?void 0:v.blend)<1?(p.value=t.current.blend,e.gl.setRenderTarget(c),e.gl.render(o,e.camera),e.gl.setRenderTarget(d),e.gl.render(r,e.camera),e.gl.setRenderTarget(null),g.render(e.gl)):1===(null==(m=t.current)?void 0:m.blend)&&e.gl.render(o,e.camera)}}),a),f.createElement(f.Fragment,null)}const F=(e,r,t)=>{let n=new m.WebGLRenderTarget(e,r,{minFilter:m.LinearMipmapLinearFilter,magFilter:m.LinearFilter,type:m.FloatType,format:m.RedFormat,generateMipmaps:!0}),a=new m.WebGLRenderTarget(e,r,{minFilter:m.NearestFilter,magFilter:m.NearestFilter}),i=new m.WebGLRenderTarget(e,r,{minFilter:m.NearestFilter,magFilter:m.NearestFilter}),l=new m.WebGLRenderTarget(e,r,{minFilter:m.NearestFilter,magFilter:m.NearestFilter}),o=new m.WebGLRenderTarget(e,r,{minFilter:m.NearestFilter,magFilter:m.NearestFilter}),s=new m.WebGLRenderTarget(e,r,{minFilter:m.NearestFilter,magFilter:m.NearestFilter,type:m.FloatType,format:m.RedFormat}),v=new m.WebGLRenderTarget(e,r,{minFilter:m.NearestFilter,magFilter:m.NearestFilter,type:m.FloatType,format:m.RedFormat});const c=new u.FullScreenQuad(new m.ShaderMaterial({uniforms:{tex:{value:null}},vertexShader:"\n        varying vec2 vUv;\n        void main() {\n          vUv = uv;\n          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n        }",fragmentShader:"\n        uniform sampler2D tex;\n        varying vec2 vUv;\n        #include <packing>\n        void main() {\n          gl_FragColor = pack2HalfToRGBA(vUv * (round(texture2D(tex, vUv).x)));\n        }"})),d=new u.FullScreenQuad(new m.ShaderMaterial({uniforms:{tex:{value:null}},vertexShader:"\n        varying vec2 vUv;\n        void main() {\n          vUv = uv;\n          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n        }",fragmentShader:"\n        uniform sampler2D tex;\n        varying vec2 vUv;\n        #include <packing>\n        void main() {\n          gl_FragColor = pack2HalfToRGBA(vUv * (1.0 - round(texture2D(tex, vUv).x)));\n        }"})),f=new u.FullScreenQuad(new m.ShaderMaterial({uniforms:{tex:{value:null},offset:{value:0},level:{value:0},maxSteps:{value:0}},vertexShader:"\n        varying vec2 vUv;\n        void main() {\n          vUv = uv;\n          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n        }",fragmentShader:`\n        varying vec2 vUv;\n        uniform sampler2D tex;\n        uniform float offset;\n        uniform float level;\n        uniform float maxSteps;\n        #include <packing>\n        void main() {\n          float closestDist = 9999999.9;\n          vec2 closestPos = vec2(0.0);\n          for (float x = -1.0; x <= 1.0; x += 1.0) {\n            for (float y = -1.0; y <= 1.0; y += 1.0) {\n              vec2 voffset = vUv;\n              voffset += vec2(x, y) * vec2(${1/e}, ${1/r}) * offset;\n              vec2 pos = unpackRGBATo2Half(texture2D(tex, voffset));\n              float dist = distance(pos.xy, vUv);\n              if(pos.x != 0.0 && pos.y != 0.0 && dist < closestDist) {\n                closestDist = dist;\n                closestPos = pos;\n              }\n            }\n          }\n          gl_FragColor = pack2HalfToRGBA(closestPos);\n        }`})),g=new u.FullScreenQuad(new m.ShaderMaterial({uniforms:{tex:{value:null},size:{value:new m.Vector2(e,r)}},vertexShader:"\n        varying vec2 vUv;\n        void main() {\n          vUv = uv;\n          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n        }",fragmentShader:"\n        varying vec2 vUv;\n        uniform sampler2D tex;\n        uniform vec2 size;\n        #include <packing>\n        void main() {\n          gl_FragColor = vec4(distance(size * unpackRGBATo2Half(texture2D(tex, vUv)), size * vUv), 0.0, 0.0, 0.0);\n        }"})),p=new u.FullScreenQuad(new m.ShaderMaterial({uniforms:{inside:{value:v.texture},outside:{value:s.texture},tex:{value:null}},vertexShader:"\n        varying vec2 vUv;\n        void main() {\n          vUv = uv;\n          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n        }",fragmentShader:"\n        varying vec2 vUv;\n        uniform sampler2D inside;\n        uniform sampler2D outside;\n        uniform sampler2D tex;\n        #include <packing>\n        void main() {\n          float i = texture2D(inside, vUv).x;\n          float o =texture2D(outside, vUv).x;\n          if (texture2D(tex, vUv).x == 0.0) {\n            gl_FragColor = vec4(o, 0.0, 0.0, 0.0);\n          } else {\n            gl_FragColor = vec4(-i, 0.0, 0.0, 0.0);\n          }\n        }"}));return u=>{let x=n;u.minFilter=m.NearestFilter,u.magFilter=m.NearestFilter,c.material.uniforms.tex.value=u,t.setRenderTarget(a),c.render(t);const F=Math.ceil(Math.log(Math.max(e,r))/Math.log(2));let h=a,b=null;for(let e=0;e<F;e++){const r=Math.pow(2,F-e-1);b=h===a?l:a,f.material.uniforms.level.value=e,f.material.uniforms.maxSteps.value=F,f.material.uniforms.offset.value=r,f.material.uniforms.tex.value=h.texture,t.setRenderTarget(b),f.render(t),h=b}t.setRenderTarget(s),g.material.uniforms.tex.value=b.texture,g.render(t),d.material.uniforms.tex.value=u,t.setRenderTarget(i),d.render(t),h=i;for(let e=0;e<F;e++){const r=Math.pow(2,F-e-1);b=h===i?o:i,f.material.uniforms.level.value=e,f.material.uniforms.maxSteps.value=F,f.material.uniforms.offset.value=r,f.material.uniforms.tex.value=h.texture,t.setRenderTarget(b),f.render(t),h=b}return t.setRenderTarget(v),g.material.uniforms.tex.value=b.texture,g.render(t),t.setRenderTarget(x),p.material.uniforms.tex.value=u,p.render(t),t.setRenderTarget(null),x}};exports.MeshPortalMaterial=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),n=require("@react-three/fiber"),a=require("./useIntersect.cjs.js"),i=require("./Fbo.cjs.js"),l=require("./RenderTexture.cjs.js"),o=require("./shaderMaterial.cjs.js"),u=require("three-stdlib"),s=require("../helpers/constants.cjs.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var d=v(e),m=c(r),f=c(t);const g=o.shaderMaterial({blur:0,map:null,sdf:null,blend:0,size:0,resolution:new m.Vector2},"varying vec2 vUv;\n   void main() {\n     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n     vUv = uv;\n   }",`uniform sampler2D sdf;\n   uniform sampler2D map;\n   uniform float blur;\n   uniform float size;\n   uniform float time;\n   uniform vec2 resolution;\n   varying vec2 vUv;\n   #include <packing>\n   void main() {\n     vec2 uv = gl_FragCoord.xy / resolution.xy;\n     vec4 t = texture2D(map, uv);\n     float k = blur;\n     float d = texture2D(sdf, vUv).r/size;\n     float alpha = 1.0 - smoothstep(0.0, 1.0, clamp(d/k + 1.0, 0.0, 1.0));\n     gl_FragColor = vec4(t.rgb, blur == 0.0 ? t.a : t.a * alpha);\n     #include <tonemapping_fragment>\n     #include <${s.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`),p=f.forwardRef((({children:e,events:r,blur:t=0,eventPriority:o=0,renderPriority:u=0,worldUnits:s=!1,resolution:v=512,...c},p)=>{n.extend({PortalMaterialImpl:g});const h=f.useRef(null),{scene:y,gl:b,size:w,viewport:M,setEvents:U}=n.useThree(),T=i.useFBO(v,v),[R,S]=f.useState(0);n.useFrame((()=>{const e=h.current.blend>0?Math.max(1,u):0;R!==e&&S(e)})),f.useEffect((()=>{void 0!==r&&U({enabled:!r})}),[r]);const[_,D]=f.useState(!0),j=a.useIntersect(D);f.useLayoutEffect((()=>{var e;j.current=null==(e=h.current)?void 0:e.__r3f.parent}),[]),f.useLayoutEffect((()=>{if(j.current&&t&&null===h.current.sdf){const e=new m.Mesh(j.current.geometry,new m.MeshBasicMaterial),r=(new m.Box3).setFromBufferAttribute(e.geometry.attributes.position),t=new m.OrthographicCamera(r.min.x*(1+2/v),r.max.x*(1+2/v),r.max.y*(1+2/v),r.min.y*(1+2/v),.1,1e3);t.position.set(0,0,1),t.lookAt(0,0,0),b.setRenderTarget(T),b.render(e,t);const n=F(v,v,b)(T.texture),a=new Float32Array(v*v);b.readRenderTargetPixels(n,0,0,v,v,a);let i=1/0;for(let e=0;e<a.length;e++)a[e]<i&&(i=a[e]);i=-i,h.current.size=i,h.current.sdf=n.texture,b.setRenderTarget(null)}}),[v,t]),f.useImperativeHandle(p,(()=>h.current));const P=f.useCallback(((e,r,t)=>{var n;if(!j.current)return!1;if(r.pointer.set(e.offsetX/r.size.width*2-1,-e.offsetY/r.size.height*2+1),r.raycaster.setFromCamera(r.pointer,r.camera),0===(null==(n=h.current)?void 0:n.blend)){const[e]=r.raycaster.intersectObject(j.current);if(!e)return r.raycaster.camera=void 0,!1}}),[]);return f.createElement("portalMaterialImpl",d.default({ref:h,blur:t,blend:0,resolution:[w.width*M.dpr,w.height*M.dpr],attach:"material"},c),f.createElement(l.RenderTexture,{attach:"map",frames:_?1/0:0,eventPriority:o,renderPriority:u,compute:P},e,f.createElement(x,{events:r,rootScene:y,priority:R,material:h,worldUnits:s})))}));function x({events:e,rootScene:r,material:t,priority:a,worldUnits:l}){const o=n.useThree((e=>e.scene)),v=n.useThree((e=>e.setEvents)),c=i.useFBO(),d=i.useFBO();f.useLayoutEffect((()=>{o.matrixAutoUpdate=!1}),[]),f.useEffect((()=>{void 0!==e&&v({enabled:e})}),[e]);const[g,p]=f.useMemo((()=>{const e={value:0};return[new u.FullScreenQuad(new m.ShaderMaterial({uniforms:{a:{value:c.texture},b:{value:d.texture},blend:e},vertexShader:"\n          varying vec2 vUv;\n          void main() {\n            vUv = uv;\n            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n          }",fragmentShader:`\n          uniform sampler2D a;\n          uniform sampler2D b;\n          uniform float blend;\n          varying vec2 vUv;\n          #include <packing>\n          void main() {\n            vec4 ta = texture2D(a, vUv);\n            vec4 tb = texture2D(b, vUv);\n            gl_FragColor = mix(tb, ta, blend);\n            #include <tonemapping_fragment>\n            #include <${s.version>=154?"colorspace_fragment":"encodings_fragment"}>\n          }`})),e]}),[]);return n.useFrame((e=>{var n;let i=null==t||null==(n=t.current)?void 0:n.__r3f.parent;if(i){var u,s,v,m;if(l)o.matrixWorld.identity();else a&&1===(null==(u=t.current)?void 0:u.blend)&&i.updateWorldMatrix(!0,!1),o.matrixWorld.copy(i.matrixWorld);if(a)(null==(s=t.current)?void 0:s.blend)>0&&(null==(v=t.current)?void 0:v.blend)<1?(p.value=t.current.blend,e.gl.setRenderTarget(c),e.gl.render(o,e.camera),e.gl.setRenderTarget(d),e.gl.render(r,e.camera),e.gl.setRenderTarget(null),g.render(e.gl)):1===(null==(m=t.current)?void 0:m.blend)&&e.gl.render(o,e.camera)}}),a),f.createElement(f.Fragment,null)}const F=(e,r,t)=>{let n=new m.WebGLRenderTarget(e,r,{minFilter:m.LinearMipmapLinearFilter,magFilter:m.LinearFilter,type:m.FloatType,format:m.RedFormat,generateMipmaps:!0}),a=new m.WebGLRenderTarget(e,r,{minFilter:m.NearestFilter,magFilter:m.NearestFilter}),i=new m.WebGLRenderTarget(e,r,{minFilter:m.NearestFilter,magFilter:m.NearestFilter}),l=new m.WebGLRenderTarget(e,r,{minFilter:m.NearestFilter,magFilter:m.NearestFilter}),o=new m.WebGLRenderTarget(e,r,{minFilter:m.NearestFilter,magFilter:m.NearestFilter}),s=new m.WebGLRenderTarget(e,r,{minFilter:m.NearestFilter,magFilter:m.NearestFilter,type:m.FloatType,format:m.RedFormat}),v=new m.WebGLRenderTarget(e,r,{minFilter:m.NearestFilter,magFilter:m.NearestFilter,type:m.FloatType,format:m.RedFormat});const c=new u.FullScreenQuad(new m.ShaderMaterial({uniforms:{tex:{value:null}},vertexShader:"\n        varying vec2 vUv;\n        void main() {\n          vUv = uv;\n          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n        }",fragmentShader:"\n        uniform sampler2D tex;\n        varying vec2 vUv;\n        #include <packing>\n        void main() {\n          gl_FragColor = pack2HalfToRGBA(vUv * (round(texture2D(tex, vUv).x)));\n        }"})),d=new u.FullScreenQuad(new m.ShaderMaterial({uniforms:{tex:{value:null}},vertexShader:"\n        varying vec2 vUv;\n        void main() {\n          vUv = uv;\n          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n        }",fragmentShader:"\n        uniform sampler2D tex;\n        varying vec2 vUv;\n        #include <packing>\n        void main() {\n          gl_FragColor = pack2HalfToRGBA(vUv * (1.0 - round(texture2D(tex, vUv).x)));\n        }"})),f=new u.FullScreenQuad(new m.ShaderMaterial({uniforms:{tex:{value:null},offset:{value:0},level:{value:0},maxSteps:{value:0}},vertexShader:"\n        varying vec2 vUv;\n        void main() {\n          vUv = uv;\n          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n        }",fragmentShader:`\n        varying vec2 vUv;\n        uniform sampler2D tex;\n        uniform float offset;\n        uniform float level;\n        uniform float maxSteps;\n        #include <packing>\n        void main() {\n          float closestDist = 9999999.9;\n          vec2 closestPos = vec2(0.0);\n          for (float x = -1.0; x <= 1.0; x += 1.0) {\n            for (float y = -1.0; y <= 1.0; y += 1.0) {\n              vec2 voffset = vUv;\n              voffset += vec2(x, y) * vec2(${1/e}, ${1/r}) * offset;\n              vec2 pos = unpackRGBATo2Half(texture2D(tex, voffset));\n              float dist = distance(pos.xy, vUv);\n              if(pos.x != 0.0 && pos.y != 0.0 && dist < closestDist) {\n                closestDist = dist;\n                closestPos = pos;\n              }\n            }\n          }\n          gl_FragColor = pack2HalfToRGBA(closestPos);\n        }`})),g=new u.FullScreenQuad(new m.ShaderMaterial({uniforms:{tex:{value:null},size:{value:new m.Vector2(e,r)}},vertexShader:"\n        varying vec2 vUv;\n        void main() {\n          vUv = uv;\n          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n        }",fragmentShader:"\n        varying vec2 vUv;\n        uniform sampler2D tex;\n        uniform vec2 size;\n        #include <packing>\n        void main() {\n          gl_FragColor = vec4(distance(size * unpackRGBATo2Half(texture2D(tex, vUv)), size * vUv), 0.0, 0.0, 0.0);\n        }"})),p=new u.FullScreenQuad(new m.ShaderMaterial({uniforms:{inside:{value:v.texture},outside:{value:s.texture},tex:{value:null}},vertexShader:"\n        varying vec2 vUv;\n        void main() {\n          vUv = uv;\n          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n        }",fragmentShader:"\n        varying vec2 vUv;\n        uniform sampler2D inside;\n        uniform sampler2D outside;\n        uniform sampler2D tex;\n        #include <packing>\n        void main() {\n          float i = texture2D(inside, vUv).x;\n          float o =texture2D(outside, vUv).x;\n          if (texture2D(tex, vUv).x == 0.0) {\n            gl_FragColor = vec4(o, 0.0, 0.0, 0.0);\n          } else {\n            gl_FragColor = vec4(-i, 0.0, 0.0, 0.0);\n          }\n        }"}));return u=>{let x=n;u.minFilter=m.NearestFilter,u.magFilter=m.NearestFilter,c.material.uniforms.tex.value=u,t.setRenderTarget(a),c.render(t);const F=Math.ceil(Math.log(Math.max(e,r))/Math.log(2));let h=a,y=null;for(let e=0;e<F;e++){const r=Math.pow(2,F-e-1);y=h===a?l:a,f.material.uniforms.level.value=e,f.material.uniforms.maxSteps.value=F,f.material.uniforms.offset.value=r,f.material.uniforms.tex.value=h.texture,t.setRenderTarget(y),f.render(t),h=y}t.setRenderTarget(s),g.material.uniforms.tex.value=y.texture,g.render(t),d.material.uniforms.tex.value=u,t.setRenderTarget(i),d.render(t),h=i;for(let e=0;e<F;e++){const r=Math.pow(2,F-e-1);y=h===i?o:i,f.material.uniforms.level.value=e,f.material.uniforms.maxSteps.value=F,f.material.uniforms.offset.value=r,f.material.uniforms.tex.value=h.texture,t.setRenderTarget(y),f.render(t),h=y}return t.setRenderTarget(v),g.material.uniforms.tex.value=y.texture,g.render(t),t.setRenderTarget(x),p.material.uniforms.tex.value=u,p.render(t),t.setRenderTarget(null),x}};exports.MeshPortalMaterial=p;

package/core/MeshPortalMaterial.d.ts

@@ -1,19 +1,22 @@
 import * as THREE from 'three';
-import { ReactThreeFiber, ThreeElements } from '@react-three/fiber';
-import { ForwardRefComponent } from '../helpers/ts-utils';
-declare module '@react-three/fiber' {
-    interface ThreeElements {
-        portalMaterialImpl: ThreeElements['shaderMaterial'] & {
-            resolution: ReactThreeFiber.Vector2;
-            blur: number;
-            blend: number;
-            size?: number;
-            sdf?: THREE.Texture;
-            map?: THREE.Texture;
-        };
+import * as React from 'react';
+import { ReactThreeFiber } from '@react-three/fiber';
+export type PortalMaterialType = {
+    resolution: ReactThreeFiber.Vector2;
+    blur: number;
+    blend: number;
+    size?: number;
+    sdf?: THREE.Texture;
+    map?: THREE.Texture;
+} & JSX.IntrinsicElements['shaderMaterial'];
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            portalMaterialImpl: PortalMaterialType;
+        }
     }
 }
-export type PortalProps = Omit<ThreeElements['portalMaterialImpl'], 'ref' | 'blend'> & {
+export type PortalProps = JSX.IntrinsicElements['shaderMaterial'] & {
     blend?: number;
     blur?: number;
     resolution?: number;
@@ -22,4 +25,4 @@ export type PortalProps = Omit<ThreeElements['portalMaterialImpl'], 'ref' | 'ble
     renderPriority?: number;
     events?: boolean;
 };
-export declare const MeshPortalMaterial: ForwardRefComponent<PortalProps, ThreeElements['portalMaterialImpl']>;
+export declare const MeshPortalMaterial: React.ForwardRefExoticComponent<Omit<PortalProps, "ref"> & React.RefAttributes<PortalMaterialType>>;

package/core/MeshPortalMaterial.js

@@ -78,7 +78,7 @@ const MeshPortalMaterial = /* @__PURE__ */React.forwardRef(({
     var _ref$current;
     // Since the ref above is not tied to a mesh directly (we're inside a material),
     // it has to be tied to the parent mesh here
-    parent.current = (_ref$current = ref.current) == null || (_ref$current = _ref$current.__r3f.parent) == null ? void 0 : _ref$current.object;
+    parent.current = (_ref$current = ref.current) == null ? void 0 : _ref$current.__r3f.parent;
   }, []);
   React.useLayoutEffect(() => {
     if (!parent.current) return;
@@ -201,7 +201,7 @@ function ManagePortalScene({
   }, []);
   useFrame(state => {
     var _material$current;
-    let parent = material == null || (_material$current = material.current) == null || (_material$current = _material$current.__r3f.parent) == null ? void 0 : _material$current.object;
+    let parent = material == null || (_material$current = material.current) == null ? void 0 : _material$current.__r3f.parent;
     if (parent) {
       // Move portal contents along with the parent if worldUnits is true
       if (!worldUnits) {

package/core/MeshReflectorMaterial.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("../materials/BlurPass.cjs.js"),o=require("../materials/MeshReflectorMaterial.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("../materials/ConvolutionMaterial.cjs.js"),require("../helpers/constants.cjs.js");var l=s(e),u=i(t);const d=u.forwardRef((({mixBlur:e=0,mixStrength:t=1,resolution:s=256,blur:i=[0,0],minDepthThreshold:d=.9,maxDepthThreshold:c=1,depthScale:p=0,depthToBlurRatioBias:m=.25,mirror:h=0,distortion:f=1,mixContrast:x=1,distortionMap:M,reflectorOffset:T=0,...S},y)=>{a.extend({MeshReflectorMaterialImpl:o.MeshReflectorMaterial});const b=a.useThree((({gl:e})=>e)),w=a.useThree((({camera:e})=>e)),j=a.useThree((({scene:e})=>e)),R=(i=Array.isArray(i)?i:[i,i])[0]+i[1]>0,v=u.useRef(null);u.useImperativeHandle(y,(()=>v.current),[]);const[g]=u.useState((()=>new r.Plane)),[D]=u.useState((()=>new r.Vector3)),[B]=u.useState((()=>new r.Vector3)),[_]=u.useState((()=>new r.Vector3)),[O]=u.useState((()=>new r.Matrix4)),[P]=u.useState((()=>new r.Vector3(0,0,-1))),[U]=u.useState((()=>new r.Vector4)),[V]=u.useState((()=>new r.Vector3)),[E]=u.useState((()=>new r.Vector3)),[F]=u.useState((()=>new r.Vector4)),[W]=u.useState((()=>new r.Matrix4)),[I]=u.useState((()=>new r.PerspectiveCamera)),q=u.useCallback((()=>{var e;const t=v.current.parent||(null==(e=v.current)||null==(e=e.__r3f.parent)?void 0:e.object);if(!t)return;if(B.setFromMatrixPosition(t.matrixWorld),_.setFromMatrixPosition(w.matrixWorld),O.extractRotation(t.matrixWorld),D.set(0,0,1),D.applyMatrix4(O),B.addScaledVector(D,T),V.subVectors(B,_),V.dot(D)>0)return;V.reflect(D).negate(),V.add(B),O.extractRotation(w.matrixWorld),P.set(0,0,-1),P.applyMatrix4(O),P.add(_),E.subVectors(B,P),E.reflect(D).negate(),E.add(B),I.position.copy(V),I.up.set(0,1,0),I.up.applyMatrix4(O),I.up.reflect(D),I.lookAt(E),I.far=w.far,I.updateMatrixWorld(),I.projectionMatrix.copy(w.projectionMatrix),W.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),W.multiply(I.projectionMatrix),W.multiply(I.matrixWorldInverse),W.multiply(t.matrixWorld),g.setFromNormalAndCoplanarPoint(D,B),g.applyMatrix4(I.matrixWorldInverse),U.set(g.normal.x,g.normal.y,g.normal.z,g.constant);const r=I.projectionMatrix;F.x=(Math.sign(U.x)+r.elements[8])/r.elements[0],F.y=(Math.sign(U.y)+r.elements[9])/r.elements[5],F.z=-1,F.w=(1+r.elements[10])/r.elements[14],U.multiplyScalar(2/U.dot(F)),r.elements[2]=U.x,r.elements[6]=U.y,r.elements[10]=U.z+1,r.elements[14]=U.w}),[w,T]),[C,k,L,z]=u.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,type:r.HalfFloatType},o=new r.WebGLRenderTarget(s,s,a);o.depthBuffer=!0,o.depthTexture=new r.DepthTexture(s,s),o.depthTexture.format=r.DepthFormat,o.depthTexture.type=r.UnsignedShortType;const l=new r.WebGLRenderTarget(s,s,a);return[o,l,new n.BlurPass({gl:b,resolution:s,width:i[0],height:i[1],minDepthThreshold:d,maxDepthThreshold:c,depthScale:p,depthToBlurRatioBias:m}),{mirror:h,textureMatrix:W,mixBlur:e,tDiffuse:o.texture,tDepth:o.depthTexture,tDiffuseBlur:l.texture,hasBlur:R,mixStrength:t,minDepthThreshold:d,maxDepthThreshold:c,depthScale:p,depthToBlurRatioBias:m,distortion:f,distortionMap:M,mixContrast:x,"defines-USE_BLUR":R?"":void 0,"defines-USE_DEPTH":p>0?"":void 0,"defines-USE_DISTORTION":M?"":void 0}]}),[b,i,W,s,h,R,e,t,d,c,p,m,f,M,x]);return a.useFrame((()=>{var e;const t=v.current.parent||(null==(e=v.current)||null==(e=e.__r3f.parent)?void 0:e.object);if(!t)return;t.visible=!1;const r=b.xr.enabled,a=b.shadowMap.autoUpdate;q(),b.xr.enabled=!1,b.shadowMap.autoUpdate=!1,b.setRenderTarget(C),b.state.buffers.depth.setMask(!0),b.autoClear||b.clear(),b.render(j,I),R&&L.render(b,C,k),b.xr.enabled=r,b.shadowMap.autoUpdate=a,t.visible=!0,b.setRenderTarget(null)})),u.createElement("meshReflectorMaterialImpl",l.default({attach:"material",key:"key"+z["defines-USE_BLUR"]+z["defines-USE_DEPTH"]+z["defines-USE_DISTORTION"],ref:v},z,S))}));exports.MeshReflectorMaterial=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("../materials/BlurPass.cjs.js"),s=require("../materials/MeshReflectorMaterial.cjs.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("../materials/ConvolutionMaterial.cjs.js"),require("../helpers/constants.cjs.js");var l=o(e),u=i(t);const d=u.forwardRef((({mixBlur:e=0,mixStrength:t=1,resolution:o=256,blur:i=[0,0],minDepthThreshold:d=.9,maxDepthThreshold:c=1,depthScale:p=0,depthToBlurRatioBias:m=.25,mirror:h=0,distortion:f=1,mixContrast:x=1,distortionMap:M,reflectorOffset:T=0,...S},y)=>{a.extend({MeshReflectorMaterialImpl:s.MeshReflectorMaterial});const w=a.useThree((({gl:e})=>e)),b=a.useThree((({camera:e})=>e)),R=a.useThree((({scene:e})=>e)),j=(i=Array.isArray(i)?i:[i,i])[0]+i[1]>0,v=u.useRef(null);u.useImperativeHandle(y,(()=>v.current),[]);const[g]=u.useState((()=>new r.Plane)),[D]=u.useState((()=>new r.Vector3)),[B]=u.useState((()=>new r.Vector3)),[_]=u.useState((()=>new r.Vector3)),[O]=u.useState((()=>new r.Matrix4)),[P]=u.useState((()=>new r.Vector3(0,0,-1))),[U]=u.useState((()=>new r.Vector4)),[V]=u.useState((()=>new r.Vector3)),[E]=u.useState((()=>new r.Vector3)),[F]=u.useState((()=>new r.Vector4)),[W]=u.useState((()=>new r.Matrix4)),[I]=u.useState((()=>new r.PerspectiveCamera)),q=u.useCallback((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;if(B.setFromMatrixPosition(t.matrixWorld),_.setFromMatrixPosition(b.matrixWorld),O.extractRotation(t.matrixWorld),D.set(0,0,1),D.applyMatrix4(O),B.addScaledVector(D,T),V.subVectors(B,_),V.dot(D)>0)return;V.reflect(D).negate(),V.add(B),O.extractRotation(b.matrixWorld),P.set(0,0,-1),P.applyMatrix4(O),P.add(_),E.subVectors(B,P),E.reflect(D).negate(),E.add(B),I.position.copy(V),I.up.set(0,1,0),I.up.applyMatrix4(O),I.up.reflect(D),I.lookAt(E),I.far=b.far,I.updateMatrixWorld(),I.projectionMatrix.copy(b.projectionMatrix),W.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),W.multiply(I.projectionMatrix),W.multiply(I.matrixWorldInverse),W.multiply(t.matrixWorld),g.setFromNormalAndCoplanarPoint(D,B),g.applyMatrix4(I.matrixWorldInverse),U.set(g.normal.x,g.normal.y,g.normal.z,g.constant);const r=I.projectionMatrix;F.x=(Math.sign(U.x)+r.elements[8])/r.elements[0],F.y=(Math.sign(U.y)+r.elements[9])/r.elements[5],F.z=-1,F.w=(1+r.elements[10])/r.elements[14],U.multiplyScalar(2/U.dot(F)),r.elements[2]=U.x,r.elements[6]=U.y,r.elements[10]=U.z+1,r.elements[14]=U.w}),[b,T]),[C,k,L,z]=u.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,type:r.HalfFloatType},s=new r.WebGLRenderTarget(o,o,a);s.depthBuffer=!0,s.depthTexture=new r.DepthTexture(o,o),s.depthTexture.format=r.DepthFormat,s.depthTexture.type=r.UnsignedShortType;const l=new r.WebGLRenderTarget(o,o,a);return[s,l,new n.BlurPass({gl:w,resolution:o,width:i[0],height:i[1],minDepthThreshold:d,maxDepthThreshold:c,depthScale:p,depthToBlurRatioBias:m}),{mirror:h,textureMatrix:W,mixBlur:e,tDiffuse:s.texture,tDepth:s.depthTexture,tDiffuseBlur:l.texture,hasBlur:j,mixStrength:t,minDepthThreshold:d,maxDepthThreshold:c,depthScale:p,depthToBlurRatioBias:m,distortion:f,distortionMap:M,mixContrast:x,"defines-USE_BLUR":j?"":void 0,"defines-USE_DEPTH":p>0?"":void 0,"defines-USE_DISTORTION":M?"":void 0}]}),[w,i,W,o,h,j,e,t,d,c,p,m,f,M,x]);return a.useFrame((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;t.visible=!1;const r=w.xr.enabled,a=w.shadowMap.autoUpdate;q(),w.xr.enabled=!1,w.shadowMap.autoUpdate=!1,w.setRenderTarget(C),w.state.buffers.depth.setMask(!0),w.autoClear||w.clear(),w.render(R,I),j&&L.render(w,C,k),w.xr.enabled=r,w.shadowMap.autoUpdate=a,t.visible=!0,w.setRenderTarget(null)})),u.createElement("meshReflectorMaterialImpl",l.default({attach:"material",key:"key"+z["defines-USE_BLUR"]+z["defines-USE_DEPTH"]+z["defines-USE_DISTORTION"],ref:v},z,S))}));exports.MeshReflectorMaterial=d;

package/core/MeshReflectorMaterial.d.ts

@@ -1,14 +1,27 @@
-import { ThreeElements, ThreeElement } from '@react-three/fiber';
-import { MeshReflectorMaterial as MeshReflectorMaterialImpl } from '../materials/MeshReflectorMaterial';
+import { Texture } from 'three';
+import { MeshReflectorMaterialProps, MeshReflectorMaterial as MeshReflectorMaterialImpl } from '../materials/MeshReflectorMaterial';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-declare module '@react-three/fiber' {
-    interface ThreeElements {
-        meshReflectorMaterialImpl: ThreeElement<typeof MeshReflectorMaterialImpl>;
-    }
-}
-export type MeshReflectorMaterialProps = ThreeElements['meshReflectorMaterialImpl'] & {
+type Props = JSX.IntrinsicElements['meshStandardMaterial'] & {
     resolution?: number;
+    mixBlur?: number;
+    mixStrength?: number;
     blur?: [number, number] | number;
+    mirror: number;
+    minDepthThreshold?: number;
+    maxDepthThreshold?: number;
+    depthScale?: number;
+    depthToBlurRatioBias?: number;
+    distortionMap?: Texture;
+    distortion?: number;
+    mixContrast?: number;
     reflectorOffset?: number;
 };
-export declare const MeshReflectorMaterial: ForwardRefComponent<MeshReflectorMaterialProps, MeshReflectorMaterialImpl>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            meshReflectorMaterialImpl: MeshReflectorMaterialProps;
+        }
+    }
+}
+export declare const MeshReflectorMaterial: ForwardRefComponent<Props, MeshReflectorMaterialImpl>;
+export {};

package/core/MeshReflectorMaterial.js

@@ -51,7 +51,8 @@ const MeshReflectorMaterial = /* @__PURE__ */React.forwardRef(({
   const [virtualCamera] = React.useState(() => new PerspectiveCamera());
   const beforeRender = React.useCallback(() => {
     var _materialRef$current;
-    const parent = materialRef.current.parent || ((_materialRef$current = materialRef.current) == null || (_materialRef$current = _materialRef$current.__r3f.parent) == null ? void 0 : _materialRef$current.object);
+    // TODO: As of R3f 7-8 this should be __r3f.parent
+    const parent = materialRef.current.parent || ((_materialRef$current = materialRef.current) == null ? void 0 : _materialRef$current.__r3f.parent);
     if (!parent) return;
     reflectorWorldPosition.setFromMatrixPosition(parent.matrixWorld);
     cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
@@ -148,7 +149,8 @@ const MeshReflectorMaterial = /* @__PURE__ */React.forwardRef(({
   }, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, distortion, distortionMap, mixContrast]);
   useFrame(() => {
     var _materialRef$current2;
-    const parent = materialRef.current.parent || ((_materialRef$current2 = materialRef.current) == null || (_materialRef$current2 = _materialRef$current2.__r3f.parent) == null ? void 0 : _materialRef$current2.object);
+    // TODO: As of R3f 7-8 this should be __r3f.parent
+    const parent = materialRef.current.parent || ((_materialRef$current2 = materialRef.current) == null ? void 0 : _materialRef$current2.__r3f.parent);
     if (!parent) return;
     parent.visible = false;
     const currentXrEnabled = gl.xr.enabled;

package/core/MeshRefractionMaterial.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),n=require("three-mesh-bvh"),a=require("../materials/MeshRefractionMaterial.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three"),require("./shaderMaterial.cjs.js"),require("../helpers/constants.cjs.js");var o=i(e),s=u(r);exports.MeshRefractionMaterial=function({aberrationStrength:e=0,fastChroma:i=!0,envMap:u,...c}){t.extend({MeshRefractionMaterial:a.MeshRefractionMaterial});const l=r.useRef(null),{size:f}=t.useThree(),h=r.useMemo((()=>{var r,t;const n={},a=(o=u)&&o.isCubeTexture;var o;const s=(null!==(r=a?null==(t=u.image[0])?void 0:t.width:u.image.width)&&void 0!==r?r:1024)/4,c=Math.floor(Math.log2(s)),l=Math.pow(2,c),f=3*Math.max(l,112),h=4*l;return a&&(n.ENVMAP_TYPE_CUBEM=""),n.CUBEUV_TEXEL_WIDTH=""+1/f,n.CUBEUV_TEXEL_HEIGHT=""+1/h,n.CUBEUV_MAX_MIP=`${c}.0`,e>0&&(n.CHROMATIC_ABERRATIONS=""),i&&(n.FAST_CHROMA=""),n}),[e,i]);return r.useLayoutEffect((()=>{var e;const r=null==(e=l.current)||null==(e=e.__r3f)||null==(e=e.parent)||null==(e=e.object)?void 0:e.geometry;r&&(l.current.bvh=new n.MeshBVHUniformStruct,l.current.bvh.updateFrom(new n.MeshBVH(r.clone().toNonIndexed(),{strategy:n.SAH})))}),[]),t.useFrame((({camera:e})=>{l.current.viewMatrixInverse=e.matrixWorld,l.current.projectionMatrixInverse=e.projectionMatrixInverse})),s.createElement("meshRefractionMaterial",o.default({key:JSON.stringify(h),defines:h,ref:l,resolution:[f.width,f.height],aberrationStrength:e,envMap:u},c))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),n=require("three-mesh-bvh"),a=require("../materials/MeshRefractionMaterial.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three"),require("./shaderMaterial.cjs.js"),require("../helpers/constants.cjs.js");var o=i(e),s=u(r);exports.MeshRefractionMaterial=function({aberrationStrength:e=0,fastChroma:i=!0,envMap:u,...c}){t.extend({MeshRefractionMaterial:a.MeshRefractionMaterial});const l=r.useRef(),{size:f}=t.useThree(),h=r.useMemo((()=>{var r,t;const n={},a=(o=u)&&o.isCubeTexture;var o;const s=(null!==(r=a?null==(t=u.image[0])?void 0:t.width:u.image.width)&&void 0!==r?r:1024)/4,c=Math.floor(Math.log2(s)),l=Math.pow(2,c),f=3*Math.max(l,112),h=4*l;return a&&(n.ENVMAP_TYPE_CUBEM=""),n.CUBEUV_TEXEL_WIDTH=""+1/f,n.CUBEUV_TEXEL_HEIGHT=""+1/h,n.CUBEUV_MAX_MIP=`${c}.0`,e>0&&(n.CHROMATIC_ABERRATIONS=""),i&&(n.FAST_CHROMA=""),n}),[e,i]);return r.useLayoutEffect((()=>{var e;const r=null==(e=l.current)||null==(e=e.__r3f)||null==(e=e.parent)?void 0:e.geometry;r&&(l.current.bvh=new n.MeshBVHUniformStruct,l.current.bvh.updateFrom(new n.MeshBVH(r.clone().toNonIndexed(),{strategy:n.SAH})))}),[]),t.useFrame((({camera:e})=>{l.current.viewMatrixInverse=e.matrixWorld,l.current.projectionMatrixInverse=e.projectionMatrixInverse})),s.createElement("meshRefractionMaterial",o.default({key:JSON.stringify(h),defines:h,ref:l,resolution:[f.width,f.height],aberrationStrength:e,envMap:u},c))};

package/core/MeshRefractionMaterial.d.ts

@@ -1,13 +1,15 @@
 import * as THREE from 'three';
 import * as React from 'react';
-import { ReactThreeFiber, ThreeElements } from '@react-three/fiber';
+import { ReactThreeFiber } from '@react-three/fiber';
 import { MeshRefractionMaterial as MeshRefractionMaterial_ } from '../materials/MeshRefractionMaterial';
-declare module '@react-three/fiber' {
-    interface ThreeElements {
-        meshRefractionMaterial: typeof MeshRefractionMaterial_;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            meshRefractionMaterial: typeof MeshRefractionMaterial_;
+        }
     }
 }
-export type MeshRefractionMaterialProps = ThreeElements['shaderMaterial'] & {
+type MeshRefractionMaterialProps = JSX.IntrinsicElements['shaderMaterial'] & {
     envMap: THREE.CubeTexture | THREE.Texture;
     bounces?: number;
     ior?: number;
@@ -17,3 +19,4 @@ export type MeshRefractionMaterialProps = ThreeElements['shaderMaterial'] & {
     fastChroma?: boolean;
 };
 export declare function MeshRefractionMaterial({ aberrationStrength, fastChroma, envMap, ...props }: MeshRefractionMaterialProps): React.JSX.Element;
+export {};

package/core/MeshRefractionMaterial.js

@@ -15,7 +15,7 @@ function MeshRefractionMaterial({
   extend({
     MeshRefractionMaterial: MeshRefractionMaterial$1
   });
-  const material = useRef(null);
+  const material = useRef();
   const {
     size
   } = useThree();
@@ -42,7 +42,7 @@ function MeshRefractionMaterial({
   useLayoutEffect(() => {
     var _material$current;
     // Get the geometry of this materials parent
-    const geometry = (_material$current = material.current) == null || (_material$current = _material$current.__r3f) == null || (_material$current = _material$current.parent) == null || (_material$current = _material$current.object) == null ? void 0 : _material$current.geometry;
+    const geometry = (_material$current = material.current) == null || (_material$current = _material$current.__r3f) == null || (_material$current = _material$current.parent) == null ? void 0 : _material$current.geometry;
     // Update the BVH
     if (geometry) {
       material.current.bvh = new MeshBVHUniformStruct();