@react-three/drei 9.74.1 → 9.74.2

package/README.md

@@ -3333,7 +3333,7 @@ export type PortalProps = JSX.IntrinsicElements['mesh'] & { blur?: number }
 
 A material that creates a portal into another scene. It is drawn onto the geometry of the mesh that it is applied to.
 
-````jsx
+```jsx
 <mesh {...props}>
   <planeGeometry />
   <MeshPortalMaterial>
@@ -3344,6 +3344,12 @@ A material that creates a portal into another scene. It is drawn onto the geomet
 </mesh>
 ```
 
+You can optionally fade or blur the edges of the portal by providing a `blur` prop, do not forget to make the material transparent in that case.
+
+```jsx
+<MeshPortalMaterial transparent blur={0.5}>
+```
+
 # Staging
 
 #### Center
@@ -3378,7 +3384,7 @@ export type Props = JSX.IntrinsicElements['group'] & {
   /** Callback, fires in the useLayoutEffect phase, after measurement */
   onCentered?: (props: OnCenterCallbackProps) => void
 }
-````
+```
 
 ```tsx
 type OnCenterCallbackProps = {

package/core/Hud.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber");function n(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 a=n(e),u=n(r);function c({defaultScene:e,defaultCamera:r,renderPriority:n=1}){const{gl:a,scene:c,camera:l}=t.useThree();let o;return t.useFrame((()=>{o=a.autoClear,1===n&&(a.autoClear=!0,a.render(e,r)),a.autoClear=!1,a.clearDepth(),a.render(c,l),a.autoClear=o}),n),u.createElement(u.Fragment,null)}exports.Hud=function({children:e,renderPriority:r=1}){const{scene:n,camera:l}=t.useThree(),[o]=u.useState((()=>new a.Scene));return u.createElement(u.Fragment,null,t.createPortal(u.createElement(u.Fragment,null,e,u.createElement(c,{defaultScene:n,defaultCamera:l,renderPriority:r})),o,{events:{priority:r+1}}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber");function n(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 a=n(e),u=n(r);function c({defaultScene:e,defaultCamera:r,renderPriority:n=1}){const{gl:a,scene:c,camera:l}=t.useThree();let o;return t.useFrame((()=>{o=a.autoClear,1===n&&(a.autoClear=!0,a.render(e,r)),a.autoClear=!1,a.clearDepth(),a.render(c,l),a.autoClear=o}),n),u.createElement("group",{onPointerOver:()=>null})}exports.Hud=function({children:e,renderPriority:r=1}){const{scene:n,camera:l}=t.useThree(),[o]=u.useState((()=>new a.Scene));return u.createElement(u.Fragment,null,t.createPortal(u.createElement(u.Fragment,null,e,u.createElement(c,{defaultScene:n,defaultCamera:l,renderPriority:r})),o,{events:{priority:r+1}}))};

package/core/Hud.js

@@ -28,8 +28,11 @@ function RenderHud({
     gl.render(scene, camera); // Restore default
 
     gl.autoClear = oldCLear;
-  }, renderPriority);
-  return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }, renderPriority); // Without an element that receives pointer events state.pointer will always be 0/0
+
+  return /*#__PURE__*/React.createElement("group", {
+    onPointerOver: () => null
+  });
 }
 
 function Hud({

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("./RenderTexture.cjs.js"),u=require("./shaderMaterial.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(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("./useFBO.cjs.js");var l=i(e),c=o(r),s=o(t);const d=u.shaderMaterial({map:null,resolution:new c.Vector2},"void main() {\n     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n   }","uniform sampler2D map;\n   uniform vec2 resolution;\n   void main() {\n     vec2 uv = gl_FragCoord.xy / resolution.xy;\n     vec4 t = texture2D(map, uv);\n     gl_FragColor = texture2D(map, uv);\n     #include <tonemapping_fragment>\n     #include <encodings_fragment>\n   }"),p=s.forwardRef((({children:e,...r},t)=>{n.extend({PortalMaterial:d});const u=s.useRef(null),i=s.useRef(null),{size:o,events:c,viewport:p}=n.useThree();return n.useFrame((()=>{var e;let r=null==(e=u.current)?void 0:e.__r3f.parent;r&&i.current.matrix.copy(r.matrixWorld)})),s.useImperativeHandle(t,(()=>u.current)),s.createElement("portalMaterial",l.default({ref:u,resolution:[o.width*p.dpr,o.height*p.dpr],toneMapped:!1},r),s.createElement(a.RenderTexture,{attach:"map",compute:c.compute},s.createElement("group",{onPointerOver:()=>null,matrixAutoUpdate:!1,ref:i},e)))}));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("./useFBO.cjs.js"),i=require("./RenderTexture.cjs.js"),l=require("./shaderMaterial.cjs.js"),o=require("three-stdlib");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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 v=u(e),m=s(r),d=s(t);const f=l.shaderMaterial({blur:0,map:null,sdf:null,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 <encodings_fragment>\n   }"),c=d.forwardRef((({children:e,resolution:r=512,...t},l)=>{n.extend({PortalMaterialImpl:f});const o=d.useRef(null),u=d.useRef(null),{gl:s,size:c,events:x,viewport:g}=n.useThree(),F=a.useFBO(r,r),[h]=d.useState((()=>new m.MeshBasicMaterial));return d.useLayoutEffect((()=>{var e;let t=null==(e=o.current)?void 0:e.__r3f.parent;if(!t)return;const n=(new m.Box3).setFromBufferAttribute(t.geometry.attributes.position),a=new m.OrthographicCamera(n.min.x*(1+2/r),n.max.x*(1+2/r),n.max.y*(1+2/r),n.min.y*(1+2/r),.1,1e3);a.position.set(0,0,1),a.lookAt(0,0,0);const i=t.material;t.material=h,s.setRenderTarget(F),s.render(t,a);const l=p(r,r,s)(F.texture),u=new Float32Array(r*r);s.readRenderTargetPixels(l,0,0,r,r,u);let v=1/0;for(let e=0;e<u.length;e++)u[e]<v&&(v=u[e]);v=-v,o.current.size=v,o.current.sdf=l.texture,t.material=i,s.setRenderTarget(null)}),[r]),n.useFrame((()=>{var e;let r=null==(e=o.current)?void 0:e.__r3f.parent;r&&u.current.matrix.copy(r.matrixWorld)})),d.useImperativeHandle(l,(()=>o.current)),d.createElement("portalMaterialImpl",v.default({ref:o,resolution:[c.width*g.dpr,c.height*g.dpr],toneMapped:!1},t),d.createElement(i.RenderTexture,{attach:"map",compute:x.compute},d.createElement("group",{matrixAutoUpdate:!1,ref:u},e)))})),p=(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}),u=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 d=new o.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        }"})),f=new o.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        }"})),c=new o.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        }`})),p=new o.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        }"})),x=new o.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 o=>{let g=n;o.minFilter=m.NearestFilter,o.magFilter=m.NearestFilter,d.material.uniforms.tex.value=o,t.setRenderTarget(a),d.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,c.material.uniforms.level.value=e,c.material.uniforms.maxSteps.value=F,c.material.uniforms.offset.value=r,c.material.uniforms.tex.value=h.texture,t.setRenderTarget(y),c.render(t),h=y}t.setRenderTarget(s),p.material.uniforms.tex.value=y.texture,p.render(t),f.material.uniforms.tex.value=o,t.setRenderTarget(i),f.render(t),h=i;for(let e=0;e<F;e++){const r=Math.pow(2,F-e-1);y=h===i?u:i,c.material.uniforms.level.value=e,c.material.uniforms.maxSteps.value=F,c.material.uniforms.offset.value=r,c.material.uniforms.tex.value=h.texture,t.setRenderTarget(y),c.render(t),h=y}return t.setRenderTarget(v),p.material.uniforms.tex.value=y.texture,p.render(t),t.setRenderTarget(g),x.material.uniforms.tex.value=o,x.render(t),t.setRenderTarget(null),g}};exports.MeshPortalMaterial=c;

package/core/MeshPortalMaterial.d.ts

@@ -1,34 +1,31 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import { ReactThreeFiber } from '@react-three/fiber';
+export declare type PortalMaterialType = ReactThreeFiber.ShaderMaterialProps & {
+    resolution: ReactThreeFiber.Vector2;
+    blur: number;
+    size: number;
+    sdf: THREE.Texture;
+    map: THREE.Texture;
+};
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            portalMaterial: ReactThreeFiber.ShaderMaterialProps & {
-                resolution: ReactThreeFiber.Vector2;
-            };
+            portalMaterialImpl: PortalMaterialType;
         }
     }
 }
-export declare type PortalProps = JSX.IntrinsicElements['mesh'];
-export declare const MeshPortalMaterial: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>, ReactThreeFiber.NodeProps<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>, typeof THREE.Mesh>>>, ReactThreeFiber.NonFunctionKeys<{
-    position?: ReactThreeFiber.Vector3 | undefined;
-    up?: ReactThreeFiber.Vector3 | undefined;
-    scale?: ReactThreeFiber.Vector3 | undefined;
-    rotation?: ReactThreeFiber.Euler | undefined;
-    matrix?: ReactThreeFiber.Matrix4 | undefined;
-    quaternion?: ReactThreeFiber.Quaternion | undefined;
-    layers?: ReactThreeFiber.Layers | undefined;
-    dispose?: (() => void) | null | undefined;
-}>> & {
-    position?: ReactThreeFiber.Vector3 | undefined;
-    up?: ReactThreeFiber.Vector3 | undefined;
-    scale?: ReactThreeFiber.Vector3 | undefined;
-    rotation?: ReactThreeFiber.Euler | undefined;
-    matrix?: ReactThreeFiber.Matrix4 | undefined;
-    quaternion?: ReactThreeFiber.Quaternion | undefined;
-    layers?: ReactThreeFiber.Layers | undefined;
-    dispose?: (() => void) | null | undefined;
-} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getObjectsByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "getVertexPosition"> & React.RefAttributes<typeof THREE.ShaderMaterial & {
-    key: string;
-}>>;
+export declare type PortalProps = JSX.IntrinsicElements['portalMaterialImpl'] & {
+    blur?: number;
+    resolution?: number;
+};
+export declare const MeshPortalMaterial: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<THREE.ShaderMaterial>, ReactThreeFiber.NodeProps<THREE.ShaderMaterial, [THREE.ShaderMaterialParameters]>>> & {
+    resolution: ReactThreeFiber.Vector2;
+    blur: number;
+    size: number;
+    sdf: THREE.Texture;
+    map: THREE.Texture;
+} & {
+    blur?: number | undefined;
+    resolution?: number | undefined;
+}, "attach" | "args" | "children" | "key" | "onUpdate" | "size" | "map" | keyof THREE.ShaderMaterial | "blur" | "resolution" | "sdf"> & React.RefAttributes<PortalMaterialType>>;

package/core/MeshPortalMaterial.js

@@ -2,49 +2,98 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import * as THREE from 'three';
 import * as React from 'react';
 import { extend, useThree, useFrame } from '@react-three/fiber';
+import { useFBO } from './useFBO.js';
 import { RenderTexture } from './RenderTexture.js';
 import { shaderMaterial } from './shaderMaterial.js';
+import { FullScreenQuad } from 'three-stdlib';
 
-const PortalMaterial = shaderMaterial({
+const PortalMaterialImpl = shaderMaterial({
+  blur: 0,
   map: null,
+  sdf: null,
+  size: 0,
   resolution: new THREE.Vector2()
-}, `void main() {
+}, `varying vec2 vUv;
+   void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-   }`, `uniform sampler2D map;
+     vUv = uv;
+   }`, `uniform sampler2D sdf;
+   uniform sampler2D map;
+   uniform float blur;
+   uniform float size;
+   uniform float time;
    uniform vec2 resolution;
+   varying vec2 vUv;
+   #include <packing>
    void main() {
      vec2 uv = gl_FragCoord.xy / resolution.xy;
      vec4 t = texture2D(map, uv);
-     gl_FragColor = texture2D(map, uv);
+     float k = blur;
+     float d = texture2D(sdf, vUv).r/size;
+     float alpha = 1.0 - smoothstep(0.0, 1.0, clamp(d/k + 1.0, 0.0, 1.0));
+     gl_FragColor = vec4(t.rgb, blur == 0.0 ? t.a : t.a * alpha);
      #include <tonemapping_fragment>
      #include <encodings_fragment>
    }`);
 const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
   children,
+  resolution = 512,
   ...props
 }, fref) => {
   extend({
-    PortalMaterial
+    PortalMaterialImpl
   });
   const ref = React.useRef(null);
   const group = React.useRef(null);
   const {
+    gl,
     size,
     events,
     viewport
   } = useThree();
-  useFrame(() => {
+  const maskRenderTarget = useFBO(resolution, resolution);
+  const [imageMaterial] = React.useState(() => new THREE.MeshBasicMaterial());
+  React.useLayoutEffect(() => {
     var _ref$current;
 
-    let parent = (_ref$current = ref.current) == null ? void 0 : _ref$current.__r3f.parent;
+    let mask = (_ref$current = ref.current) == null ? void 0 : _ref$current.__r3f.parent;
+    if (!mask) return;
+    const boundingBox = new THREE.Box3().setFromBufferAttribute(mask.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, 1000);
+    orthoCam.position.set(0, 0, 1);
+    orthoCam.lookAt(0, 0, 0);
+    const oldMaterial = mask.material;
+    mask.material = imageMaterial;
+    gl.setRenderTarget(maskRenderTarget);
+    gl.render(mask, 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); // Get smallest value in sdf
+
+    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;
+    mask.material = oldMaterial;
+    gl.setRenderTarget(null);
+  }, [resolution]);
+  useFrame(() => {
+    var _ref$current2;
+
+    let parent = (_ref$current2 = ref.current) == null ? void 0 : _ref$current2.__r3f.parent;
 
     if (parent) {
       group.current.matrix.copy(parent.matrixWorld);
     }
   });
   React.useImperativeHandle(fref, () => ref.current);
-  return /*#__PURE__*/React.createElement("portalMaterial", _extends({
-    // @ts-ignore
+  return /*#__PURE__*/React.createElement("portalMaterialImpl", _extends({
     ref: ref,
     resolution: [size.width * viewport.dpr, size.height * viewport.dpr],
     toneMapped: false
@@ -52,10 +101,263 @@ const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
     attach: "map",
     compute: events.compute
   }, /*#__PURE__*/React.createElement("group", {
-    onPointerOver: () => null,
     matrixAutoUpdate: false,
     ref: group
   }, children)));
 });
 
+const makeSDFGenerator = (clientWidth, clientHeight, renderer) => {
+  let finalTarget = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+    minFilter: THREE.LinearMipmapLinearFilter,
+    magFilter: THREE.LinearFilter,
+    type: THREE.FloatType,
+    format: THREE.RedFormat,
+    generateMipmaps: true
+  });
+  let outsideRenderTarget = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+    minFilter: THREE.NearestFilter,
+    magFilter: THREE.NearestFilter
+  });
+  let insideRenderTarget = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+    minFilter: THREE.NearestFilter,
+    magFilter: THREE.NearestFilter
+  });
+  let outsideRenderTarget2 = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+    minFilter: THREE.NearestFilter,
+    magFilter: THREE.NearestFilter
+  });
+  let insideRenderTarget2 = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+    minFilter: THREE.NearestFilter,
+    magFilter: THREE.NearestFilter
+  });
+  let outsideRenderTargetFinal = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+    minFilter: THREE.NearestFilter,
+    magFilter: THREE.NearestFilter,
+    type: THREE.FloatType,
+    format: THREE.RedFormat
+  });
+  let insideRenderTargetFinal = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+    minFilter: THREE.NearestFilter,
+    magFilter: THREE.NearestFilter,
+    type: THREE.FloatType,
+    format: THREE.RedFormat
+  });
+  const uvRender = new FullScreenQuad(new THREE.ShaderMaterial({
+    uniforms: {
+      tex: {
+        value: null
+      }
+    },
+    vertexShader:
+    /*glsl*/
+    `
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }`,
+    fragmentShader:
+    /*glsl*/
+    `
+        uniform sampler2D tex;
+        varying vec2 vUv;
+        #include <packing>
+        void main() {
+          gl_FragColor = pack2HalfToRGBA(vUv * (round(texture2D(tex, vUv).x)));
+        }`
+  }));
+  const uvRenderInside = new FullScreenQuad(new THREE.ShaderMaterial({
+    uniforms: {
+      tex: {
+        value: null
+      }
+    },
+    vertexShader:
+    /*glsl*/
+    `
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }`,
+    fragmentShader:
+    /*glsl*/
+    `
+        uniform sampler2D tex;
+        varying vec2 vUv;
+        #include <packing>
+        void main() {
+          gl_FragColor = pack2HalfToRGBA(vUv * (1.0 - round(texture2D(tex, vUv).x)));
+        }`
+  }));
+  const jumpFloodRender = new FullScreenQuad(new THREE.ShaderMaterial({
+    uniforms: {
+      tex: {
+        value: null
+      },
+      offset: {
+        value: 0.0
+      },
+      level: {
+        value: 0.0
+      },
+      maxSteps: {
+        value: 0.0
+      }
+    },
+    vertexShader:
+    /*glsl*/
+    `
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }`,
+    fragmentShader:
+    /*glsl*/
+    `
+        varying vec2 vUv;
+        uniform sampler2D tex;
+        uniform float offset;
+        uniform float level;
+        uniform float maxSteps;
+        #include <packing>
+        void main() {
+          float closestDist = 9999999.9;
+          vec2 closestPos = vec2(0.0);
+          for (float x = -1.0; x <= 1.0; x += 1.0) {
+            for (float y = -1.0; y <= 1.0; y += 1.0) {
+              vec2 voffset = vUv;
+              voffset += vec2(x, y) * vec2(${1 / clientWidth}, ${1 / clientHeight}) * offset;
+              vec2 pos = unpackRGBATo2Half(texture2D(tex, voffset));
+              float dist = distance(pos.xy, vUv);
+              if(pos.x != 0.0 && pos.y != 0.0 && dist < closestDist) {
+                closestDist = dist;
+                closestPos = pos;
+              }
+            }
+          }
+          gl_FragColor = pack2HalfToRGBA(closestPos);
+        }`
+  }));
+  const distanceFieldRender = new FullScreenQuad(new THREE.ShaderMaterial({
+    uniforms: {
+      tex: {
+        value: null
+      },
+      size: {
+        value: new THREE.Vector2(clientWidth, clientHeight)
+      }
+    },
+    vertexShader:
+    /*glsl*/
+    `
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }`,
+    fragmentShader:
+    /*glsl*/
+    `
+        varying vec2 vUv;
+        uniform sampler2D tex;
+        uniform vec2 size;
+        #include <packing>
+        void main() {
+          gl_FragColor = vec4(distance(size * unpackRGBATo2Half(texture2D(tex, vUv)), size * vUv), 0.0, 0.0, 0.0);
+        }`
+  }));
+  const compositeRender = new FullScreenQuad(new THREE.ShaderMaterial({
+    uniforms: {
+      inside: {
+        value: insideRenderTargetFinal.texture
+      },
+      outside: {
+        value: outsideRenderTargetFinal.texture
+      },
+      tex: {
+        value: null
+      }
+    },
+    vertexShader:
+    /*glsl*/
+    `
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }`,
+    fragmentShader:
+    /*glsl*/
+    `
+        varying vec2 vUv;
+        uniform sampler2D inside;
+        uniform sampler2D outside;
+        uniform sampler2D tex;
+        #include <packing>
+        void main() {
+          float i = texture2D(inside, vUv).x;
+          float o =texture2D(outside, vUv).x;
+          if (texture2D(tex, vUv).x == 0.0) {
+            gl_FragColor = vec4(o, 0.0, 0.0, 0.0);
+          } else {
+            gl_FragColor = vec4(-i, 0.0, 0.0, 0.0);
+          }
+        }`
+  }));
+  return image => {
+    let ft = finalTarget;
+    image.minFilter = THREE.NearestFilter;
+    image.magFilter = THREE.NearestFilter;
+    uvRender.material.uniforms.tex.value = image;
+    renderer.setRenderTarget(outsideRenderTarget);
+    uvRender.render(renderer);
+    const passes = Math.ceil(Math.log(Math.max(clientWidth, clientHeight)) / Math.log(2.0));
+    let lastTarget = outsideRenderTarget;
+    let target = null;
+
+    for (let i = 0; i < passes; i++) {
+      const offset = Math.pow(2, passes - i - 1);
+      target = lastTarget === outsideRenderTarget ? outsideRenderTarget2 : outsideRenderTarget;
+      jumpFloodRender.material.uniforms.level.value = i;
+      jumpFloodRender.material.uniforms.maxSteps.value = passes;
+      jumpFloodRender.material.uniforms.offset.value = offset;
+      jumpFloodRender.material.uniforms.tex.value = lastTarget.texture;
+      renderer.setRenderTarget(target);
+      jumpFloodRender.render(renderer);
+      lastTarget = target;
+    }
+
+    renderer.setRenderTarget(outsideRenderTargetFinal);
+    distanceFieldRender.material.uniforms.tex.value = target.texture;
+    distanceFieldRender.render(renderer);
+    uvRenderInside.material.uniforms.tex.value = image;
+    renderer.setRenderTarget(insideRenderTarget);
+    uvRenderInside.render(renderer);
+    lastTarget = insideRenderTarget;
+
+    for (let i = 0; i < passes; i++) {
+      const offset = Math.pow(2, passes - i - 1);
+      target = lastTarget === insideRenderTarget ? insideRenderTarget2 : insideRenderTarget;
+      jumpFloodRender.material.uniforms.level.value = i;
+      jumpFloodRender.material.uniforms.maxSteps.value = passes;
+      jumpFloodRender.material.uniforms.offset.value = offset;
+      jumpFloodRender.material.uniforms.tex.value = lastTarget.texture;
+      renderer.setRenderTarget(target);
+      jumpFloodRender.render(renderer);
+      lastTarget = target;
+    }
+
+    renderer.setRenderTarget(insideRenderTargetFinal);
+    distanceFieldRender.material.uniforms.tex.value = target.texture;
+    distanceFieldRender.render(renderer);
+    renderer.setRenderTarget(ft);
+    compositeRender.material.uniforms.tex.value = image;
+    compositeRender.render(renderer);
+    renderer.setRenderTarget(null);
+    return ft;
+  };
+};
+
 export { MeshPortalMaterial };

package/core/RenderTexture.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("./useFBO.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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 c=u(e),s=i(r),o=i(t);const l=o.forwardRef((({children:e,compute:r,width:t,height:u,samples:i=8,renderPriority:l=0,eventPriority:d=0,frames:p=1/0,stencilBuffer:m=!1,depthBuffer:b=!0,generateMipmaps:v=!1,...g},h)=>{const{size:y,viewport:j}=n.useThree(),O=a.useFBO((t||y.width)*j.dpr,(u||y.height)*j.dpr,{samples:i,stencilBuffer:m,depthBuffer:b,generateMipmaps:v}),[x]=o.useState((()=>new s.Scene)),P=o.useCallback(((e,r,t)=>{var n,a;let u=null==(n=O.texture)?void 0:n.__r3f.parent;for(;u&&!(u instanceof s.Object3D);)u=u.__r3f.parent;if(!u)return!1;t.raycaster.camera||t.events.compute(e,t,null==(a=t.previousRoot)?void 0:a.getState());const[i]=t.raycaster.intersectObject(u);if(!i)return!1;const c=i.uv;if(!c)return!1;r.raycaster.setFromCamera(r.pointer.set(2*c.x-1,2*c.y-1),r.camera)}),[]);return o.useImperativeHandle(h,(()=>O.texture),[O]),o.createElement(o.Fragment,null,n.createPortal(o.createElement(f,{renderPriority:l,frames:p,fbo:O},e),x,{events:{compute:r||P,priority:d}}),o.createElement("primitive",c.default({object:O.texture},g)))}));function f({frames:e,renderPriority:r,children:t,fbo:a}){let u=0;return n.useFrame((r=>{(e===1/0||u<e)&&(r.gl.setRenderTarget(a),r.gl.render(r.scene,r.camera),r.gl.setRenderTarget(null),u++)}),r),o.createElement(o.Fragment,null,t)}exports.RenderTexture=l;
+"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("./useFBO.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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 c=u(e),s=i(r),o=i(t);const l=o.forwardRef((({children:e,compute:r,width:t,height:u,samples:i=8,renderPriority:l=0,eventPriority:p=0,frames:d=1/0,stencilBuffer:m=!1,depthBuffer:b=!0,generateMipmaps:v=!1,...g},h)=>{const{size:y,viewport:j}=n.useThree(),O=a.useFBO((t||y.width)*j.dpr,(u||y.height)*j.dpr,{samples:i,stencilBuffer:m,depthBuffer:b,generateMipmaps:v}),[P]=o.useState((()=>new s.Scene)),x=o.useCallback(((e,r,t)=>{var n,a;let u=null==(n=O.texture)?void 0:n.__r3f.parent;for(;u&&!(u instanceof s.Object3D);)u=u.__r3f.parent;if(!u)return!1;t.raycaster.camera||t.events.compute(e,t,null==(a=t.previousRoot)?void 0:a.getState());const[i]=t.raycaster.intersectObject(u);if(!i)return!1;const c=i.uv;if(!c)return!1;r.raycaster.setFromCamera(r.pointer.set(2*c.x-1,2*c.y-1),r.camera)}),[]);return o.useImperativeHandle(h,(()=>O.texture),[O]),o.createElement(o.Fragment,null,n.createPortal(o.createElement(f,{renderPriority:l,frames:d,fbo:O},e,o.createElement("group",{onPointerOver:()=>null})),P,{events:{compute:r||x,priority:p}}),o.createElement("primitive",c.default({object:O.texture},g)))}));function f({frames:e,renderPriority:r,children:t,fbo:a}){let u=0;return n.useFrame((r=>{(e===1/0||u<e)&&(r.gl.setRenderTarget(a),r.gl.render(r.scene,r.camera),r.gl.setRenderTarget(null),u++)}),r),o.createElement(o.Fragment,null,t)}exports.RenderTexture=l;

package/core/RenderTexture.js

@@ -57,7 +57,9 @@ const RenderTexture = /*#__PURE__*/React.forwardRef(({
     renderPriority: renderPriority,
     frames: frames,
     fbo: fbo
-  }, children), vScene, {
+  }, children, /*#__PURE__*/React.createElement("group", {
+    onPointerOver: () => null
+  })), vScene, {
     events: {
       compute: compute || uvCompute,
       priority: eventPriority