@ohos-ports/react-three-drei 10.7.7-beta.0

package/core/MeshPortalMaterial.js

@@ -0,0 +1,467 @@
+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 './Fbo.js';
+import { RenderTexture } from './RenderTexture.js';
+import { shaderMaterial } from './shaderMaterial.js';
+import { FullScreenQuad } from 'three-stdlib';
+import { version } from '../helpers/constants.js';
+
+const PortalMaterialImpl = /* @__PURE__ */shaderMaterial({
+  blur: 0,
+  map: null,
+  sdf: null,
+  blend: 0,
+  size: 0,
+  resolution: /* @__PURE__ */new THREE.Vector2()
+}, `varying vec2 vUv;
+   void main() {
+     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+     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);
+     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 <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+   }`);
+const MeshPortalMaterial = /* @__PURE__ */React.forwardRef(({
+  children,
+  events = undefined,
+  blur = 0,
+  eventPriority = 0,
+  renderPriority = 0,
+  worldUnits = false,
+  resolution = 512,
+  ...props
+}, fref) => {
+  extend({
+    PortalMaterialImpl
+  });
+  const ref = React.useRef(null);
+  const {
+    scene,
+    gl,
+    size,
+    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;
+    // Since the ref above is not tied to a mesh directly (we're inside a material),
+    // it has to be tied to the parent mesh here
+    parent.current = (_ref$current = ref.current) == null || (_ref$current = _ref$current.__r3f.parent) == null ? void 0 : _ref$current.object;
+  }, []);
+  React.useLayoutEffect(() => {
+    if (!parent.current) return;
+
+    // Apply the SDF mask only once
+    if (blur && ref.current.sdf === null) {
+      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);
+      orthoCam.lookAt(0, 0, 0);
+      gl.setRenderTarget(maskRenderTarget);
+      gl.render(tempMesh, 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;
+      gl.setRenderTarget(null);
+    }
+  }, [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],
+    attach: "material"
+  }, props), /*#__PURE__*/React.createElement(RenderTexture, {
+    attach: "map",
+    frames: visible ? Infinity : 0,
+    eventPriority: eventPriority,
+    renderPriority: renderPriority,
+    compute: compute
+  }, children, /*#__PURE__*/React.createElement(ManagePortalScene, {
+    events: events,
+    rootScene: scene,
+    priority: priority,
+    material: ref,
+    worldUnits: worldUnits
+  })));
+});
+function ManagePortalScene({
+  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;
+  }, []);
+  React.useEffect(() => {
+    if (events !== undefined) setEvents({
+      enabled: events
+    });
+  }, [events]);
+  const [quad, blend] = React.useMemo(() => {
+    // This fullscreen-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 <tonemapping_fragment>
+            #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+          }`
+    }));
+    return [quad, blend];
+  }, []);
+  useFrame(state => {
+    var _material$current;
+    let parent = material == null || (_material$current = material.current) == null || (_material$current = _material$current.__r3f.parent) == null ? void 0 : _material$current.object;
+    if (parent) {
+      // Move portal contents along with the parent if worldUnits is true
+      if (!worldUnits) {
+        var _material$current2;
+        // If the portal renders exclusively the original scene needs to be updated
+        if (priority && ((_material$current2 = material.current) == null ? void 0 : _material$current2.blend) === 1) parent.updateWorldMatrix(true, false);
+        scene.matrixWorld.copy(parent.matrixWorld);
+      } else scene.matrixWorld.identity();
+
+      // This bit is only necessary if the portal is blended, now it has a render-priority
+      // and will take over the render loop
+      if (priority) {
+        var _material$current3, _material$current4, _material$current5;
+        if (((_material$current3 = material.current) == null ? void 0 : _material$current3.blend) > 0 && ((_material$current4 = material.current) == null ? void 0 : _material$current4.blend) < 1) {
+          // If blend is ongoing (> 0 and < 1) then we need to render both the root scene
+          // and the portal scene, both will then be mixed in the quad from above
+          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$current5 = material.current) == null ? void 0 : _material$current5.blend) === 1) {
+          // However if blend is 1 we only need to render the portal scene
+          state.gl.render(scene, state.camera);
+        }
+      }
+    }
+  }, priority);
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+}
+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/MeshReflectorMaterial.cjs.js

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

package/core/MeshReflectorMaterial.d.ts

@@ -0,0 +1,14 @@
+import { ThreeElements, ThreeElement } from '@react-three/fiber';
+import { MeshReflectorMaterial as MeshReflectorMaterialImpl } from '../materials/MeshReflectorMaterial';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        meshReflectorMaterialImpl: ThreeElement<typeof MeshReflectorMaterialImpl>;
+    }
+}
+export type MeshReflectorMaterialProps = ThreeElements['meshReflectorMaterialImpl'] & {
+    resolution?: number;
+    blur?: [number, number] | number;
+    reflectorOffset?: number;
+};
+export declare const MeshReflectorMaterial: ForwardRefComponent<MeshReflectorMaterialProps, MeshReflectorMaterialImpl>;

package/core/MeshReflectorMaterial.js

@@ -0,0 +1,180 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType, LinearFilter, HalfFloatType } from 'three';
+import { extend, useThree, useFrame } from '@react-three/fiber';
+import { BlurPass } from '../materials/BlurPass.js';
+import { MeshReflectorMaterial as MeshReflectorMaterial$1 } from '../materials/MeshReflectorMaterial.js';
+
+const MeshReflectorMaterial = /* @__PURE__ */React.forwardRef(({
+  mixBlur = 0,
+  mixStrength = 1,
+  resolution = 256,
+  blur = [0, 0],
+  minDepthThreshold = 0.9,
+  maxDepthThreshold = 1,
+  depthScale = 0,
+  depthToBlurRatioBias = 0.25,
+  mirror = 0,
+  distortion = 1,
+  mixContrast = 1,
+  distortionMap,
+  reflectorOffset = 0,
+  ...props
+}, ref) => {
+  extend({
+    MeshReflectorMaterialImpl: MeshReflectorMaterial$1
+  });
+  const gl = useThree(({
+    gl
+  }) => gl);
+  const camera = useThree(({
+    camera
+  }) => camera);
+  const scene = useThree(({
+    scene
+  }) => scene);
+  blur = Array.isArray(blur) ? blur : [blur, blur];
+  const hasBlur = blur[0] + blur[1] > 0;
+  const blurX = blur[0];
+  const blurY = blur[1];
+  const materialRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => materialRef.current, []);
+  const [reflectorPlane] = React.useState(() => new Plane());
+  const [normal] = React.useState(() => new Vector3());
+  const [reflectorWorldPosition] = React.useState(() => new Vector3());
+  const [cameraWorldPosition] = React.useState(() => new Vector3());
+  const [rotationMatrix] = React.useState(() => new Matrix4());
+  const [lookAtPosition] = React.useState(() => new Vector3(0, 0, -1));
+  const [clipPlane] = React.useState(() => new Vector4());
+  const [view] = React.useState(() => new Vector3());
+  const [target] = React.useState(() => new Vector3());
+  const [q] = React.useState(() => new Vector4());
+  const [textureMatrix] = React.useState(() => new Matrix4());
+  const [virtualCamera] = React.useState(() => new PerspectiveCamera());
+  const beforeRender = React.useCallback(() => {
+    var _materialRef$current;
+    const parent = materialRef.current.parent || ((_materialRef$current = materialRef.current) == null || (_materialRef$current = _materialRef$current.__r3f.parent) == null ? void 0 : _materialRef$current.object);
+    if (!parent) return;
+    reflectorWorldPosition.setFromMatrixPosition(parent.matrixWorld);
+    cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
+    rotationMatrix.extractRotation(parent.matrixWorld);
+    normal.set(0, 0, 1);
+    normal.applyMatrix4(rotationMatrix);
+    reflectorWorldPosition.addScaledVector(normal, reflectorOffset);
+    view.subVectors(reflectorWorldPosition, cameraWorldPosition);
+    // Avoid rendering when reflector is facing away
+    if (view.dot(normal) > 0) return;
+    view.reflect(normal).negate();
+    view.add(reflectorWorldPosition);
+    rotationMatrix.extractRotation(camera.matrixWorld);
+    lookAtPosition.set(0, 0, -1);
+    lookAtPosition.applyMatrix4(rotationMatrix);
+    lookAtPosition.add(cameraWorldPosition);
+    target.subVectors(reflectorWorldPosition, lookAtPosition);
+    target.reflect(normal).negate();
+    target.add(reflectorWorldPosition);
+    virtualCamera.position.copy(view);
+    virtualCamera.up.set(0, 1, 0);
+    virtualCamera.up.applyMatrix4(rotationMatrix);
+    virtualCamera.up.reflect(normal);
+    virtualCamera.lookAt(target);
+    virtualCamera.far = camera.far; // Used in WebGLBackground
+    virtualCamera.updateMatrixWorld();
+    virtualCamera.projectionMatrix.copy(camera.projectionMatrix);
+    // Update the texture matrix
+    textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
+    textureMatrix.multiply(virtualCamera.projectionMatrix);
+    textureMatrix.multiply(virtualCamera.matrixWorldInverse);
+    textureMatrix.multiply(parent.matrixWorld);
+    // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
+    // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
+    reflectorPlane.setFromNormalAndCoplanarPoint(normal, reflectorWorldPosition);
+    reflectorPlane.applyMatrix4(virtualCamera.matrixWorldInverse);
+    clipPlane.set(reflectorPlane.normal.x, reflectorPlane.normal.y, reflectorPlane.normal.z, reflectorPlane.constant);
+    const projectionMatrix = virtualCamera.projectionMatrix;
+    q.x = (Math.sign(clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
+    q.y = (Math.sign(clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
+    q.z = -1.0;
+    q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
+    // Calculate the scaled plane vector
+    clipPlane.multiplyScalar(2.0 / clipPlane.dot(q));
+    // Replacing the third row of the projection matrix
+    projectionMatrix.elements[2] = clipPlane.x;
+    projectionMatrix.elements[6] = clipPlane.y;
+    projectionMatrix.elements[10] = clipPlane.z + 1.0;
+    projectionMatrix.elements[14] = clipPlane.w;
+  }, [camera, reflectorOffset]);
+  const [fbo1, fbo2, blurpass, reflectorProps] = React.useMemo(() => {
+    const parameters = {
+      minFilter: LinearFilter,
+      magFilter: LinearFilter,
+      type: HalfFloatType
+    };
+    const fbo1 = new WebGLRenderTarget(resolution, resolution, parameters);
+    fbo1.depthBuffer = true;
+    fbo1.depthTexture = new DepthTexture(resolution, resolution);
+    fbo1.depthTexture.format = DepthFormat;
+    fbo1.depthTexture.type = UnsignedShortType;
+    const fbo2 = new WebGLRenderTarget(resolution, resolution, parameters);
+    const blurpass = new BlurPass({
+      gl,
+      resolution,
+      width: blurX,
+      height: blurY,
+      minDepthThreshold,
+      maxDepthThreshold,
+      depthScale,
+      depthToBlurRatioBias
+    });
+    const reflectorProps = {
+      mirror,
+      textureMatrix,
+      mixBlur,
+      tDiffuse: fbo1.texture,
+      tDepth: fbo1.depthTexture,
+      tDiffuseBlur: fbo2.texture,
+      hasBlur,
+      mixStrength,
+      minDepthThreshold,
+      maxDepthThreshold,
+      depthScale,
+      depthToBlurRatioBias,
+      distortion,
+      distortionMap,
+      mixContrast,
+      'defines-USE_BLUR': hasBlur ? '' : undefined,
+      'defines-USE_DEPTH': depthScale > 0 ? '' : undefined,
+      'defines-USE_DISTORTION': distortionMap ? '' : undefined
+    };
+    return [fbo1, fbo2, blurpass, reflectorProps];
+  }, [gl, blurX, blurY, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, distortion, distortionMap, mixContrast]);
+  useFrame(() => {
+    var _materialRef$current2;
+    const parent = materialRef.current.parent || ((_materialRef$current2 = materialRef.current) == null || (_materialRef$current2 = _materialRef$current2.__r3f.parent) == null ? void 0 : _materialRef$current2.object);
+    if (!parent) return;
+    parent.visible = false;
+    const currentXrEnabled = gl.xr.enabled;
+    const currentShadowAutoUpdate = gl.shadowMap.autoUpdate;
+    beforeRender();
+    gl.xr.enabled = false;
+    gl.shadowMap.autoUpdate = false;
+    gl.setRenderTarget(fbo1);
+    gl.state.buffers.depth.setMask(true);
+    if (!gl.autoClear) gl.clear();
+    gl.render(scene, virtualCamera);
+    if (hasBlur) blurpass.render(gl, fbo1, fbo2);
+    gl.xr.enabled = currentXrEnabled;
+    gl.shadowMap.autoUpdate = currentShadowAutoUpdate;
+    parent.visible = true;
+    gl.setRenderTarget(null);
+  });
+  return /*#__PURE__*/React.createElement("meshReflectorMaterialImpl", _extends({
+    attach: "material"
+    // Defines can't be updated dynamically, so we need to recreate the material
+    ,
+    key: 'key' + reflectorProps['defines-USE_BLUR'] + reflectorProps['defines-USE_DEPTH'] + reflectorProps['defines-USE_DISTORTION'],
+    ref: materialRef
+  }, reflectorProps, props));
+});
+
+export { MeshReflectorMaterial };

package/core/MeshRefractionMaterial.cjs.js

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