@react-three/drei 9.74.16 → 9.76.0

package/README.md

@@ -157,7 +157,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#view">View</a></li>
           <li><a href="#rendertexture">RenderTexture</a></li>
           <li><a href="#mask">Mask</a></li>
-          <li><a href="#portal">Portal</a></li>
+          <li><a href="#meshportalmaterial">MeshPortalMaterial</a></li>
         </ul>
         <li><a href="#modifiers">Modifiers</a></li>
         <ul>
@@ -609,7 +609,7 @@ The camera follows your face.
   <a href="https://codesandbox.io/s/zhjbhy"><img width="20%" src="https://github-production-user-asset-6210df.s3.amazonaws.com/76580/244052845-5cc535d7-3c97-46e3-a267-52e707c2d9b2.png" alt="demo"/></a>
 </p>
 
-Pre-requisite: wrap into a `FaceLandmarker` provider
+Pre-requisite: wrap into a [`FaceLandmarker`](#facelandmarker) provider
 
 ```tsx
 <FaceLandmarker>...</FaceLandmarker>
@@ -675,7 +675,73 @@ type FaceControlsApi = THREE.EventDispatcher & {
 }
 ```
 
-> **Note** <br>`FaceControls` uses [`requestVideoFrameCallback`](https://caniuse.com/mdn-api_htmlvideoelement_requestvideoframecallback), you may need [a polyfill](https://github.com/ThaUnknown/rvfc-polyfill) (for Firefox).
+##### FaceControls events
+
+Two `THREE.Event`s are dispatched on FaceControls ref object:
+
+- `{ type: "stream", stream: MediaStream }` -- when webcam's `.getUserMedia()` stream begins
+- `{ type: "videoFrame", texture: THREE.VideoTexture, time: number }` -- each time a new video frame is sent to the compositor (thanks to rVFC)
+
+> **Note** <br>rVFC
+>
+> Internally, `FaceControls` uses [`requestVideoFrameCallback`](https://caniuse.com/mdn-api_htmlvideoelement_requestvideoframecallback), you may need [a polyfill](https://github.com/ThaUnknown/rvfc-polyfill) (for Firefox).
+
+##### FaceControls[manualDetect]
+
+By default, `detect` is called on each `"videoFrame"`. You can disable this by `manualDetect` and call `detect` yourself.
+
+For example:
+
+```jsx
+const controls = useThree((state) => state.controls)
+
+const onVideoFrame = useCallback((event) => {
+  controls.detect(event.texture.source.data, event.time)
+}, [controls])
+
+<FaceControls makeDefault
+  manualDetect
+  onVideoFrame={onVideoFrame}
+/>
+```
+
+##### FaceControls[manualUpdate]
+
+By default, `update` is called each rAF `useFrame` frame, with damping. You can disable this by `manualUpdate` and update the camera yourself.
+
+For example:
+
+```jsx
+const controls = useThree((state) => state.controls)
+
+const [current] = useState(() => new THREE.Object3D())
+
+useFrame((_, delta) => {
+  const target = controls?.computeTarget()
+
+  if (target) {
+    //
+    // A. Define your own damping
+    //
+
+    const eps = 1e-9
+    easing.damp3(current.position, target.position, .25, delta, undefined, undefined, eps)
+    easing.dampE(current.rotation, target.rotation, .25, delta, undefined, undefined, eps)
+    camera.position.copy(current.position)
+    camera.rotation.copy(current.rotation)
+
+    //
+    // B. Or maybe with no damping at all?
+    //
+
+    // controls.update(delta, target)
+    // camera.position.copy(target.position)
+    // camera.rotation.copy(target.rotation)
+  }
+})
+
+<FaceControls makeDefault manualUpdate />
+```
 
 # Gizmos
 
@@ -2544,6 +2610,46 @@ const buffer = useSurfaceSampler(
 
 A @mediapipe/tasks-vision [`FaceLandmarker`](https://developers.google.com/mediapipe/api/solutions/js/tasks-vision.facelandmarker) provider, as well as a `useFaceLandmarker` hook.
 
+```tsx
+<FaceLandmarker>{/* ... */}</FaceLandmarker>
+```
+
+It will instanciate a FaceLandmarker object with the following defaults:
+
+```tsx
+{
+  basePath: "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@x.y.z/wasm", // x.y.z will value the @mediapipe/tasks-vision version, eg: 0.10.2
+  options: {
+    baseOptions: {
+      modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task",
+      delegate: "GPU",
+    },
+    runningMode: "VIDEO",
+    outputFaceBlendshapes: true,
+    outputFacialTransformationMatrixes: true,
+  }
+}
+```
+
+You can override defaults, like for example self-host tasks-vision's `wasm/` and `face_landmarker.task` model in you `public/` directory:
+
+```sh
+$ ln -s ../node_modules/@mediapipe/tasks-vision/wasm/ public/tasks-vision-wasm
+$ curl https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task -o public/face_landmarker.task
+```
+
+```tsx
+import { FaceLandmarkerDefaults } from '@react-three/drei'
+
+const visionBasePath = new URL("/tasks-vision-wasm", import.meta.url).toString()
+const modelAssetPath = new URL("/face_landmarker.task", import.meta.url).toString()
+
+const faceLandmarkerOptions = { ...FaceLandmarkerDefaults.options };
+faceLandmarkerOptions.baseOptions.modelAssetPath = modelAssetPath;
+
+<FaceLandmarker basePath={visionBasePath} options={faceLandmarkerOptions}>
+```
+
 # Loading
 
 #### Loader
@@ -2624,12 +2730,19 @@ useGLTF.preload(url)
 > You can accomplish this by adding two `<link>` tags to your `<head>` tag, as below. The version in those URLs must exactly match what [useGLTF](src/core/useGLTF.tsx#L18) uses for this to work. If you're using create-react-app, `public/index.html` file contains the `<head>` tag.
 >
 > ```html
-> <link rel="prefetch" crossorigin="anonymous" href="https://www.gstatic.com/draco/versioned/decoders/1.5.5/draco_wasm_wrapper.js">
-> <link rel="prefetch" crossorigin="anonymous" href="https://www.gstatic.com/draco/versioned/decoders/1.5.5/draco_decoder.wasm">
+> <link
+>   rel="prefetch"
+>   crossorigin="anonymous"
+>   href="https://www.gstatic.com/draco/versioned/decoders/1.5.5/draco_wasm_wrapper.js"
+> />
+> <link
+>   rel="prefetch"
+>   crossorigin="anonymous"
+>   href="https://www.gstatic.com/draco/versioned/decoders/1.5.5/draco_decoder.wasm"
+> />
 > ```
 >
 > It is recommended that you check your browser's network tab to confirm that the correct URLs are being used, and that the files do get loaded from the prefetch cache on subsequent requests.
- 
 
 #### useFBX
 
@@ -3338,14 +3451,19 @@ Invert masks individually by providing a 2nd boolean argument to the `useMask` h
 const stencil = useMask(1, true)
 ```
 
-#### Portal
+#### MeshPortalMaterial
 
 <p>
+  <a href="https://codesandbox.io/s/9m4tpc"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/9m4tpc/screenshot.png" alt="Demo"/></a>
+  <a href="https://codesandbox.io/s/drc6qg"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/drc6qg/screenshot.png" alt="Demo"/></a>
   <a href="https://codesandbox.io/s/ik11ln"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/ik11ln/screenshot.png" alt="Demo"/></a>
 </p>
 
 ```tsx
-export type PortalProps = JSX.IntrinsicElements['portalMaterialImpl'] & {
+export type PortalProps = JSX.IntrinsicElements['shaderMaterial'] & {
+  /** Mix the portals own scene with the world scene, 0 = world scene render,
+   *  0.5 = both scenes render, 1 = portal scene renders, defaults to 0 */
+  blend?: number
   /** Edge fade blur, 0 = no blur (default) */
   blur?: number
   /** SDF resolution, the smaller the faster is the start-up time (default: 512) */
@@ -3356,6 +3474,8 @@ export type PortalProps = JSX.IntrinsicElements['portalMaterialImpl'] & {
   eventPriority?: number
   /** Optional render priority, defaults to 0 */
   renderPriority?: number
+  /** Optionally diable events inside the portal, defaults to false */
+  events?: boolean
 }
 ```
 
@@ -3378,6 +3498,12 @@ You can optionally fade or blur the edges of the portal by providing a `blur` pr
 <MeshPortalMaterial transparent blur={0.5}>
 ```
 
+It is also possible to _enter_ the portal. If blend is 0 your scene will render as usual, if blend is higher it will start to blend the root scene and the portal scene, if blend is 1 it will only render the portal scene. If you put a ref on the material you can transition entering the portal, for instance lerping blend if the camera is close, or on click.
+
+```jsx
+<MeshPortalMaterial blend={1}>
+```
+
 # Staging
 
 #### Center
@@ -3961,7 +4087,7 @@ Treat the output of the shader like an alpha map where `1` is opaque and `0` is
 
 ```glsl
 gl_FragColor = vec4(vec3(1.), 1.); // Opaque
-gl_FragColor = vec4(vec3(0.), 1.); // Transparnet
+gl_FragColor = vec4(vec3(0.), 1.); // Transparent
 ```
 
 #### Environment

package/core/CameraControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("camera-controls");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=s(e),c=a(t),i=a(r),d=s(o);const l=r.forwardRef(((e,t)=>{r.useMemo((()=>{d.default.install({THREE:c}),n.extend({CameraControlsImpl:d.default})}),[]);const{camera:o,domElement:s,makeDefault:a,onStart:l,onEnd:f,onChange:v,regress:m,...E}=e,p=n.useThree((e=>e.camera)),b=n.useThree((e=>e.gl)),h=n.useThree((e=>e.invalidate)),L=n.useThree((e=>e.events)),T=n.useThree((e=>e.setEvents)),g=n.useThree((e=>e.set)),j=n.useThree((e=>e.get)),O=n.useThree((e=>e.performance)),q=o||p,w=s||L.connected||b.domElement,y=r.useMemo((()=>new d.default(q)),[q]);return n.useFrame(((e,t)=>{y.enabled&&y.update(t)}),-1),r.useEffect((()=>(y.connect(w),()=>{y.disconnect()})),[w,y]),i.useEffect((()=>{const e=e=>{h(),m&&O.regress(),v&&v(e)},t=e=>{l&&l(e)},r=e=>{f&&f(e)};return y.addEventListener("update",e),y.addEventListener("controlstart",t),y.addEventListener("controlend",r),y.addEventListener("control",e),y.addEventListener("transitionstart",e),y.addEventListener("wake",e),()=>{y.removeEventListener("update",e),y.removeEventListener("controlstart",t),y.removeEventListener("controlend",r),y.removeEventListener("control",e),y.removeEventListener("transitionstart",e),y.removeEventListener("wake",e)}}),[y,l,f,h,T,m,v]),r.useEffect((()=>{if(a){const e=j().controls;return g({controls:y}),()=>g({controls:e})}}),[a,y]),i.createElement("primitive",u.default({ref:t,object:y},E))}));exports.CameraControls=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("camera-controls");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=a(e),u=s(r),i=a(o);const l=r.forwardRef(((e,o)=>{r.useMemo((()=>{const e={Box3:t.Box3,MathUtils:{clamp:t.MathUtils.clamp},Matrix4:t.Matrix4,Quaternion:t.Quaternion,Raycaster:t.Raycaster,Sphere:t.Sphere,Spherical:t.Spherical,Vector2:t.Vector2,Vector3:t.Vector3,Vector4:t.Vector4};i.default.install({THREE:e}),n.extend({CameraControlsImpl:i.default})}),[]);const{camera:a,domElement:s,makeDefault:l,onStart:d,onEnd:f,onChange:m,regress:v,...E}=e,p=n.useThree((e=>e.camera)),h=n.useThree((e=>e.gl)),b=n.useThree((e=>e.invalidate)),L=n.useThree((e=>e.events)),T=n.useThree((e=>e.setEvents)),g=n.useThree((e=>e.set)),j=n.useThree((e=>e.get)),x=n.useThree((e=>e.performance)),M=a||p,y=s||L.connected||h.domElement,O=r.useMemo((()=>new i.default(M)),[M]);return n.useFrame(((e,t)=>{O.enabled&&O.update(t)}),-1),r.useEffect((()=>(O.connect(y),()=>{O.disconnect()})),[y,O]),r.useEffect((()=>{const e=e=>{b(),v&&x.regress(),m&&m(e)},t=e=>{d&&d(e)},r=e=>{f&&f(e)};return O.addEventListener("update",e),O.addEventListener("controlstart",t),O.addEventListener("controlend",r),O.addEventListener("control",e),O.addEventListener("transitionstart",e),O.addEventListener("wake",e),()=>{O.removeEventListener("update",e),O.removeEventListener("controlstart",t),O.removeEventListener("controlend",r),O.removeEventListener("control",e),O.removeEventListener("transitionstart",e),O.removeEventListener("wake",e)}}),[O,d,f,b,T,v,m]),r.useEffect((()=>{if(l){const e=j().controls;return g({controls:O}),()=>g({controls:e})}}),[l,O]),u.createElement("primitive",c.default({ref:o,object:O},E))}));exports.CameraControls=l;

package/core/CameraControls.d.ts

@@ -1,4 +1,4 @@
-import type { PerspectiveCamera, OrthographicCamera } from 'three';
+import { OrthographicCamera, PerspectiveCamera } from 'three';
 import * as React from 'react';
 import { ReactThreeFiber } from '@react-three/fiber';
 import CameraControlsImpl from 'camera-controls';

package/core/CameraControls.js

@@ -1,14 +1,31 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
-import * as THREE from 'three';
+import { Box3, MathUtils, Matrix4, Quaternion, Raycaster, Sphere, Spherical, Vector2, Vector3, Vector4 } from 'three';
 import * as React from 'react';
 import { forwardRef, useMemo, useEffect } from 'react';
 import { extend, useThree, useFrame } from '@react-three/fiber';
 import CameraControlsImpl from 'camera-controls';
 
 const CameraControls = /*#__PURE__*/forwardRef((props, ref) => {
+  // useMemo is used here instead of useEffect, otherwise the useMemo below runs first and throws
   useMemo(() => {
+    // to allow for tree shaking, we only import the subset of THREE that is used by camera-controls
+    // see https://github.com/yomotsu/camera-controls#important
+    const subsetOfTHREE = {
+      Box3,
+      MathUtils: {
+        clamp: MathUtils.clamp
+      },
+      Matrix4,
+      Quaternion,
+      Raycaster,
+      Sphere,
+      Spherical,
+      Vector2,
+      Vector3,
+      Vector4
+    };
     CameraControlsImpl.install({
-      THREE
+      THREE: subsetOfTHREE
     });
     extend({
       CameraControlsImpl
@@ -42,7 +59,7 @@ const CameraControls = /*#__PURE__*/forwardRef((props, ref) => {
     controls.connect(explDomElement);
     return () => void controls.disconnect();
   }, [explDomElement, controls]);
-  React.useEffect(() => {
+  useEffect(() => {
     const callback = e => {
       invalidate();
       if (regress) performance.regress();

package/core/CubeCamera.d.ts

@@ -1,7 +1,7 @@
 import { Texture } from 'three';
 import * as React from 'react';
 import { CubeCameraOptions } from './useCubeCamera';
-declare type Props = JSX.IntrinsicElements['group'] & {
+declare type Props = Omit<JSX.IntrinsicElements['group'], 'children'> & {
     children: (tex: Texture) => React.ReactNode;
     frames?: number;
 } & CubeCameraOptions;

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("./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 c=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   }"),f=d.forwardRef((({children:e,blur:r=0,eventPriority:t,renderPriority:l,worldUnits:o=!1,resolution:u=512,...s},f)=>{n.extend({PortalMaterialImpl:c});const p=d.useRef(null),{gl:F,size:h,events:y,viewport:w}=n.useThree(),M=a.useFBO(u,u);return d.useLayoutEffect((()=>{var e;let t=null==(e=p.current)?void 0:e.__r3f.parent;if(t&&r&&null===p.current.sdf){const e=new m.Mesh(t.geometry,new m.MeshBasicMaterial),r=(new m.Box3).setFromBufferAttribute(e.geometry.attributes.position),n=new m.OrthographicCamera(r.min.x*(1+2/u),r.max.x*(1+2/u),r.max.y*(1+2/u),r.min.y*(1+2/u),.1,1e3);n.position.set(0,0,1),n.lookAt(0,0,0),F.setRenderTarget(M),F.render(e,n);const a=g(u,u,F)(M.texture),i=new Float32Array(u*u);F.readRenderTargetPixels(a,0,0,u,u,i);let l=1/0;for(let e=0;e<i.length;e++)i[e]<l&&(l=i[e]);l=-l,p.current.size=l,p.current.sdf=a.texture,F.setRenderTarget(null)}}),[u,r]),d.useImperativeHandle(f,(()=>p.current)),d.createElement("portalMaterialImpl",v.default({ref:p,blur:r,resolution:[h.width*w.dpr,h.height*w.dpr],toneMapped:!1,attach:"material"},s),d.createElement(i.RenderTexture,{attach:"map",eventPriority:t,renderPriority:l,compute:y.compute},e,d.createElement(x,{material:p,worldUnits:o})))}));function x({material:e,worldUnits:r}){const t=n.useThree((e=>e.scene));return d.useLayoutEffect((()=>{t.matrixAutoUpdate=!1}),[]),n.useFrame((()=>{var n;let a=null==e||null==(n=e.current)?void 0:n.__r3f.parent;a&&(r?t.matrixWorld.identity():t.matrixWorld.copy(a.matrixWorld))})),d.createElement(d.Fragment,null)}const g=(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        }"})),c=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        }"})),f=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        }`})),x=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        }"})),g=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 p=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,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),x.material.uniforms.tex.value=y.texture,x.render(t),c.material.uniforms.tex.value=o,t.setRenderTarget(i),c.render(t),h=i;for(let e=0;e<F;e++){const r=Math.pow(2,F-e-1);y=h===i?u: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),x.material.uniforms.tex.value=y.texture,x.render(t),t.setRenderTarget(p),g.material.uniforms.tex.value=o,g.render(t),t.setRenderTarget(null),p}};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("./useIntersect.cjs.js"),i=require("./useFBO.cjs.js"),l=require("./RenderTexture.cjs.js"),o=require("./shaderMaterial.cjs.js"),u=require("three-stdlib");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function v(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=s(e),d=v(r),m=v(t);const f=o.shaderMaterial({blur:0,map:null,sdf:null,blend:0,size:0,resolution:new d.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   }"),g=m.forwardRef((({children:e,events:r,blur:t=0,eventPriority:o=0,renderPriority:u=0,worldUnits:s=!1,resolution:v=512,...g},F)=>{n.extend({PortalMaterialImpl:f});const h=m.useRef(null),{scene:y,gl:b,size:w,viewport:M,setEvents:U}=n.useThree(),T=i.useFBO(v,v),[R,S]=m.useState(0);n.useFrame((()=>{const e=h.current.blend>0?Math.max(1,u):0;R!==e&&S(e)})),m.useEffect((()=>{void 0!==r&&U({enabled:!r})}),[r]);const[_,D]=m.useState(!0),j=a.useIntersect(D);m.useLayoutEffect((()=>{var e;j.current=null==(e=h.current)?void 0:e.__r3f.parent}),[]),m.useLayoutEffect((()=>{if(j.current&&t&&null===h.current.sdf){const e=new d.Mesh(j.current.geometry,new d.MeshBasicMaterial),r=(new d.Box3).setFromBufferAttribute(e.geometry.attributes.position),t=new d.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=p(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]),m.useImperativeHandle(F,(()=>h.current));const P=m.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 m.createElement("portalMaterialImpl",c.default({ref:h,blur:t,blend:0,resolution:[w.width*M.dpr,w.height*M.dpr],toneMapped:!1,attach:"material"},g),m.createElement(l.RenderTexture,{attach:"map",frames:_?1/0:0,eventPriority:o,renderPriority:u,compute:P},e,m.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)),s=n.useThree((e=>e.setEvents)),v=i.useFBO(),c=i.useFBO();m.useLayoutEffect((()=>{o.matrixAutoUpdate=!1}),[]),m.useEffect((()=>{void 0!==e&&s({enabled:e})}),[e]);const[f,g]=m.useMemo((()=>{const e={value:0};return[new u.FullScreenQuad(new d.ShaderMaterial({uniforms:{a:{value:v.texture},b:{value:c.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 <encodings_fragment>\n          }"})),e]}),[]);return n.useFrame((e=>{var n;let i=null==t||null==(n=t.current)?void 0:n.__r3f.parent;var u,s,d;i&&(l?o.matrixWorld.identity():o.matrixWorld.copy(i.matrixWorld),a&&((null==(u=t.current)?void 0:u.blend)>0&&(null==(s=t.current)?void 0:s.blend)<1&&i?(g.value=t.current.blend,e.gl.setRenderTarget(v),e.gl.render(o,e.camera),e.gl.setRenderTarget(c),e.gl.render(r,e.camera),e.gl.setRenderTarget(null),f.render(e.gl)):1===(null==(d=t.current)?void 0:d.blend)&&e.gl.render(o,e.camera)))}),a),m.createElement(m.Fragment,null)}const p=(e,r,t)=>{let n=new d.WebGLRenderTarget(e,r,{minFilter:d.LinearMipmapLinearFilter,magFilter:d.LinearFilter,type:d.FloatType,format:d.RedFormat,generateMipmaps:!0}),a=new d.WebGLRenderTarget(e,r,{minFilter:d.NearestFilter,magFilter:d.NearestFilter}),i=new d.WebGLRenderTarget(e,r,{minFilter:d.NearestFilter,magFilter:d.NearestFilter}),l=new d.WebGLRenderTarget(e,r,{minFilter:d.NearestFilter,magFilter:d.NearestFilter}),o=new d.WebGLRenderTarget(e,r,{minFilter:d.NearestFilter,magFilter:d.NearestFilter}),s=new d.WebGLRenderTarget(e,r,{minFilter:d.NearestFilter,magFilter:d.NearestFilter,type:d.FloatType,format:d.RedFormat}),v=new d.WebGLRenderTarget(e,r,{minFilter:d.NearestFilter,magFilter:d.NearestFilter,type:d.FloatType,format:d.RedFormat});const c=new u.FullScreenQuad(new d.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        }"})),m=new u.FullScreenQuad(new d.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 d.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 d.ShaderMaterial({uniforms:{tex:{value:null},size:{value:new d.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 u.FullScreenQuad(new d.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 p=n;u.minFilter=d.NearestFilter,u.magFilter=d.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),m.material.uniforms.tex.value=u,t.setRenderTarget(i),m.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(p),x.material.uniforms.tex.value=u,x.render(t),t.setRenderTarget(null),p}};exports.MeshPortalMaterial=g;

package/core/MeshPortalMaterial.d.ts

@@ -4,6 +4,7 @@ import { ReactThreeFiber } from '@react-three/fiber';
 export declare type PortalMaterialType = {
     resolution: ReactThreeFiber.Vector2;
     blur: number;
+    blend: number;
     size?: number;
     sdf?: THREE.Texture;
     map?: THREE.Texture;
@@ -16,16 +17,20 @@ declare global {
     }
 }
 export declare type PortalProps = JSX.IntrinsicElements['shaderMaterial'] & {
+    blend?: number;
     blur?: number;
     resolution?: number;
     worldUnits?: boolean;
     eventPriority?: number;
     renderPriority?: number;
+    events?: boolean;
 };
 export declare const MeshPortalMaterial: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<THREE.ShaderMaterial>, ReactThreeFiber.NodeProps<THREE.ShaderMaterial, [THREE.ShaderMaterialParameters]>>> & {
+    blend?: number | undefined;
     blur?: number | undefined;
     resolution?: number | undefined;
     worldUnits?: boolean | undefined;
     eventPriority?: number | undefined;
     renderPriority?: number | undefined;
-}, "attach" | "args" | "children" | "key" | "onUpdate" | keyof THREE.ShaderMaterial | "blur" | "resolution" | "worldUnits" | "renderPriority" | "eventPriority"> & React.RefAttributes<PortalMaterialType>>;
+    events?: boolean | undefined;
+}, "attach" | "args" | "children" | "key" | "onUpdate" | "events" | keyof THREE.ShaderMaterial | "blur" | "resolution" | "worldUnits" | "renderPriority" | "blend" | "eventPriority"> & React.RefAttributes<PortalMaterialType>>;

package/core/MeshPortalMaterial.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, useThree, useFrame } from '@react-three/fiber';
+import { useIntersect } from './useIntersect.js';
 import { useFBO } from './useFBO.js';
 import { RenderTexture } from './RenderTexture.js';
 import { shaderMaterial } from './shaderMaterial.js';
@@ -11,6 +12,7 @@ const PortalMaterialImpl = shaderMaterial({
   blur: 0,
   map: null,
   sdf: null,
+  blend: 0,
   size: 0,
   resolution: new THREE.Vector2()
 }, `varying vec2 vUv;
@@ -37,9 +39,10 @@ const PortalMaterialImpl = shaderMaterial({
    }`);
 const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
   children,
+  events = undefined,
   blur = 0,
-  eventPriority,
-  renderPriority,
+  eventPriority = 0,
+  renderPriority = 0,
   worldUnits = false,
   resolution = 512,
   ...props
@@ -49,20 +52,39 @@ const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
   });
   const ref = React.useRef(null);
   const {
+    scene,
     gl,
     size,
-    events,
-    viewport
+    viewport,
+    setEvents
   } = useThree();
   const maskRenderTarget = useFBO(resolution, resolution);
+  const [priority, setPriority] = React.useState(0);
+  useFrame(() => {
+    // If blend is > 0 then the portal is being entered, the render-priority must change
+    const p = ref.current.blend > 0 ? Math.max(1, renderPriority) : 0;
+    if (priority !== p) setPriority(p);
+  });
+  React.useEffect(() => {
+    if (events !== undefined) setEvents({
+      enabled: !events
+    });
+  }, [events]);
+  const [visible, setVisible] = React.useState(true); // See if the parent mesh is in the camera frustum
+
+  const parent = useIntersect(setVisible);
   React.useLayoutEffect(() => {
     var _ref$current;
 
-    let mask = (_ref$current = ref.current) == null ? void 0 : _ref$current.__r3f.parent;
-    if (!mask) return; // Apply the SDF mask only once
+    // 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 ? void 0 : _ref$current.__r3f.parent;
+  }, []);
+  React.useLayoutEffect(() => {
+    if (!parent.current) return; // Apply the SDF mask only once
 
     if (blur && ref.current.sdf === null) {
-      const tempMesh = new THREE.Mesh(mask.geometry, new THREE.MeshBasicMaterial());
+      const tempMesh = new THREE.Mesh(parent.current.geometry, new THREE.MeshBasicMaterial());
       const boundingBox = new THREE.Box3().setFromBufferAttribute(tempMesh.geometry.attributes.position);
       const orthoCam = new THREE.OrthographicCamera(boundingBox.min.x * (1 + 2 / resolution), boundingBox.max.x * (1 + 2 / resolution), boundingBox.max.y * (1 + 2 / resolution), boundingBox.min.y * (1 + 2 / resolution), 0.1, 1000);
       orthoCam.position.set(0, 0, 1);
@@ -87,40 +109,130 @@ const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
     }
   }, [resolution, blur]);
   React.useImperativeHandle(fref, () => ref.current);
+  const compute = React.useCallback((event, state, previous) => {
+    var _ref$current2;
+
+    if (!parent.current) return false;
+    state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+    state.raycaster.setFromCamera(state.pointer, state.camera);
+
+    if (((_ref$current2 = ref.current) == null ? void 0 : _ref$current2.blend) === 0) {
+      // We run a quick check against the parent, if it isn't hit there's no need to raycast at all
+      const [intersection] = state.raycaster.intersectObject(parent.current);
+
+      if (!intersection) {
+        // Cancel out the raycast camera if the parent mesh isn't hit
+        state.raycaster.camera = undefined;
+        return false;
+      }
+    }
+  }, []);
   return /*#__PURE__*/React.createElement("portalMaterialImpl", _extends({
     ref: ref,
     blur: blur,
+    blend: 0,
     resolution: [size.width * viewport.dpr, size.height * viewport.dpr],
     toneMapped: false,
     attach: "material"
   }, props), /*#__PURE__*/React.createElement(RenderTexture, {
     attach: "map",
+    frames: visible ? Infinity : 0,
     eventPriority: eventPriority,
     renderPriority: renderPriority,
-    compute: events.compute
+    compute: compute
   }, children, /*#__PURE__*/React.createElement(CopyMatrix, {
+    events: events,
+    rootScene: scene,
+    priority: priority,
     material: ref,
     worldUnits: worldUnits
   })));
 });
 
 function CopyMatrix({
+  events = undefined,
+  rootScene,
   material,
+  priority,
   worldUnits
 }) {
   const scene = useThree(state => state.scene);
+  const setEvents = useThree(state => state.setEvents);
+  const buffer1 = useFBO();
+  const buffer2 = useFBO();
   React.useLayoutEffect(() => {
     scene.matrixAutoUpdate = false;
   }, []);
-  useFrame(() => {
+  React.useEffect(() => {
+    if (events !== undefined) setEvents({
+      enabled: events
+    });
+  }, [events]);
+  const [quad, blend] = React.useMemo(() => {
+    // This fullscree-quad is used to blend the two textures
+    const blend = {
+      value: 0
+    };
+    const quad = new FullScreenQuad(new THREE.ShaderMaterial({
+      uniforms: {
+        a: {
+          value: buffer1.texture
+        },
+        b: {
+          value: buffer2.texture
+        },
+        blend
+      },
+      vertexShader:
+      /*glsl*/
+      `
+          varying vec2 vUv;
+          void main() {
+            vUv = uv;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+          }`,
+      fragmentShader:
+      /*glsl*/
+      `
+          uniform sampler2D a;
+          uniform sampler2D b;
+          uniform float blend;
+          varying vec2 vUv;
+          #include <packing>
+          void main() {
+            vec4 ta = texture2D(a, vUv);
+            vec4 tb = texture2D(b, vUv);
+            gl_FragColor = mix(tb, ta, blend);
+            #include <encodings_fragment>
+          }`
+    }));
+    return [quad, blend];
+  }, []);
+  useFrame(state => {
     var _material$current;
 
     let parent = material == null ? void 0 : (_material$current = material.current) == null ? void 0 : _material$current.__r3f.parent;
 
     if (parent) {
       if (!worldUnits) scene.matrixWorld.copy(parent.matrixWorld);else scene.matrixWorld.identity();
+
+      if (priority) {
+        var _material$current2, _material$current3, _material$current4;
+
+        if (((_material$current2 = material.current) == null ? void 0 : _material$current2.blend) > 0 && ((_material$current3 = material.current) == null ? void 0 : _material$current3.blend) < 1 && parent) {
+          blend.value = material.current.blend;
+          state.gl.setRenderTarget(buffer1);
+          state.gl.render(scene, state.camera);
+          state.gl.setRenderTarget(buffer2);
+          state.gl.render(rootScene, state.camera);
+          state.gl.setRenderTarget(null);
+          quad.render(state.gl);
+        } else if (((_material$current4 = material.current) == null ? void 0 : _material$current4.blend) === 1) {
+          state.gl.render(scene, state.camera);
+        }
+      }
     }
-  });
+  }, priority);
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 }