@react-three/drei 9.73.0 → 9.73.2

package/README.md

@@ -3216,6 +3216,10 @@ const stencil = useMask(1, true)
 
 #### Portal
 
+```tsx
+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
@@ -3229,6 +3233,12 @@ A material that creates a portal into another scene. It is drawn onto the geomet
 </mesh>
 ```
 
+By using the `blur` prop you can optionally blur the edges
+
+```jsx
+<MeshPortalMaterial transparent blur={1} />
+```
+
 # Staging
 
 #### Center

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     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("./RenderTexture.cjs.js"),o=require("./shaderMaterial.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)}require("./useFBO.cjs.js");var l=u(e),c=i(r),s=i(t);const v=o.shaderMaterial({blur:0,map:null,resolution:new c.Vector2},"varying vec2 vUv;\n   void main() {\n     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n     vUv = uv;\n   }","varying vec2 vUv;\n   uniform float blur;\n   uniform sampler2D map;\n   uniform vec2 resolution;\n   float blurCircle(vec2 center, vec2 uv, float k) {\n     float sdf = distance(uv, center) - 0.5;\n     float norm = sdf / 0.5;\n     return 1.0 - smoothstep(0.0, 1.0, clamp((1.0/k)*norm + 1.0, 0.0, 1.0));\n   }\n   void main() {\n     vec2 uv = gl_FragCoord.xy / resolution.xy;\n     vec4 t = texture2D(map, uv);\n     float strength = blurCircle(vec2(0.5), vUv, blur);\n     gl_FragColor = vec4(t.rgb, t.a * strength);\n     #include <tonemapping_fragment>\n     #include <encodings_fragment>\n   }"),f=s.forwardRef((({children:e,...r},t)=>{n.extend({PortalMaterial:v});const o=s.useRef(null),u=s.useRef(null),{size:i,events:c,viewport:f}=n.useThree();return n.useFrame((()=>{var e;let r=null==(e=o.current)?void 0:e.__r3f.parent;r&&u.current.matrix.copy(r.matrixWorld)})),s.useImperativeHandle(t,(()=>o.current)),s.createElement("portalMaterial",l.default({ref:o,resolution:[i.width*f.dpr,i.height*f.dpr],toneMapped:!1},r),s.createElement(a.RenderTexture,{attach:"map",compute:c.compute},s.createElement("group",{onPointerOver:()=>null,matrixAutoUpdate:!1,ref:u},e)))}));exports.MeshPortalMaterial=f;

package/core/MeshPortalMaterial.d.ts

@@ -6,11 +6,14 @@ declare global {
         interface IntrinsicElements {
             portalMaterial: ReactThreeFiber.ShaderMaterialProps & {
                 resolution: ReactThreeFiber.Vector2;
+                blur: number;
             };
         }
     }
 }
-export declare type PortalProps = JSX.IntrinsicElements['mesh'];
+export declare type PortalProps = JSX.IntrinsicElements['mesh'] & {
+    blur?: number;
+};
 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;
@@ -29,6 +32,8 @@ export declare const MeshPortalMaterial: React.ForwardRefExoticComponent<Pick<Om
     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 & {
+} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
+    blur?: number | undefined;
+}, "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" | "blur"> & React.RefAttributes<typeof THREE.ShaderMaterial & {
     key: string;
 }>>;

package/core/MeshPortalMaterial.js

@@ -6,15 +6,27 @@ import { RenderTexture } from './RenderTexture.js';
 import { shaderMaterial } from './shaderMaterial.js';
 
 const PortalMaterial = shaderMaterial({
+  blur: 0.0,
   map: null,
   resolution: new THREE.Vector2()
-}, `void main() {
+}, `varying vec2 vUv;
+   void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-   }`, `uniform sampler2D map;
+     vUv = uv;
+   }`, `varying vec2 vUv;
+   uniform float blur;
+   uniform sampler2D map;
    uniform vec2 resolution;
+   float blurCircle(vec2 center, vec2 uv, float k) {
+     float sdf = distance(uv, center) - 0.5;
+     float norm = sdf / 0.5;
+     return 1.0 - smoothstep(0.0, 1.0, clamp((1.0/k)*norm + 1.0, 0.0, 1.0));
+   }
    void main() {
      vec2 uv = gl_FragCoord.xy / resolution.xy;
-     gl_FragColor = texture2D(map, uv);
+     vec4 t = texture2D(map, uv);
+     float strength = blurCircle(vec2(0.5), vUv, blur);
+     gl_FragColor = vec4(t.rgb, t.a * strength);
      #include <tonemapping_fragment>
      #include <encodings_fragment>
    }`);