@react-three/drei 9.73.2 → 9.73.3

package/README.md

@@ -3233,12 +3233,6 @@ 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"),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;
+"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,shader:r="drei_PortalMaterial",...t},u)=>{n.extend({drei_PortalMaterial:d});const i=s.useRef(null),o=s.useRef(null),{size:c,events:p,viewport:f}=n.useThree();return n.useFrame((()=>{var e;let r=null==(e=i.current)?void 0:e.__r3f.parent;r&&o.current.matrix.copy(r.matrixWorld)})),s.useImperativeHandle(u,(()=>i.current)),s.createElement(r,l.default({ref:i,resolution:[c.width*f.dpr,c.height*f.dpr],toneMapped:!1},t),s.createElement(a.RenderTexture,{attach:"map",compute:p.compute},s.createElement("group",{onPointerOver:()=>null,matrixAutoUpdate:!1,ref:o},e)))}));exports.MeshPortalMaterial=p;

package/core/MeshPortalMaterial.d.ts

@@ -4,15 +4,14 @@ import { ReactThreeFiber } from '@react-three/fiber';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            portalMaterial: ReactThreeFiber.ShaderMaterialProps & {
+            drei_PortalMaterial: ReactThreeFiber.ShaderMaterialProps & {
                 resolution: ReactThreeFiber.Vector2;
-                blur: number;
             };
         }
     }
 }
 export declare type PortalProps = JSX.IntrinsicElements['mesh'] & {
-    blur?: number;
+    shader?: string | any;
 };
 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;
@@ -33,7 +32,7 @@ export declare const MeshPortalMaterial: React.ForwardRefExoticComponent<Pick<Om
     layers?: ReactThreeFiber.Layers | undefined;
     dispose?: (() => void) | null | undefined;
 } & 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 & {
+    shader?: string | any;
+}, "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" | "shader"> & React.RefAttributes<typeof THREE.ShaderMaterial & {
     key: string;
 }>>;

package/core/MeshPortalMaterial.js

@@ -6,36 +6,26 @@ import { RenderTexture } from './RenderTexture.js';
 import { shaderMaterial } from './shaderMaterial.js';
 
 const PortalMaterial = shaderMaterial({
-  blur: 0.0,
   map: null,
   resolution: new THREE.Vector2()
-}, `varying vec2 vUv;
-   void main() {
+}, `void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-     vUv = uv;
-   }`, `varying vec2 vUv;
-   uniform float blur;
-   uniform sampler2D map;
+   }`, `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;
      vec4 t = texture2D(map, uv);
-     float strength = blurCircle(vec2(0.5), vUv, blur);
-     gl_FragColor = vec4(t.rgb, t.a * strength);
+     gl_FragColor = texture2D(map, uv);
      #include <tonemapping_fragment>
      #include <encodings_fragment>
    }`);
 const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
   children,
+  shader: Shader = 'drei_PortalMaterial',
   ...props
 }, fref) => {
   extend({
-    PortalMaterial
+    drei_PortalMaterial: PortalMaterial
   });
   const ref = React.useRef(null);
   const group = React.useRef(null);
@@ -54,8 +44,8 @@ const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
     }
   });
   React.useImperativeHandle(fref, () => ref.current);
-  return /*#__PURE__*/React.createElement("portalMaterial", _extends({
-    // @ts-ignore
+  return /*#__PURE__*/React.createElement(Shader // @ts-ignore
+  , _extends({
     ref: ref,
     resolution: [size.width * viewport.dpr, size.height * viewport.dpr],
     toneMapped: false