@react-three/drei 7.27.0 → 7.27.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -5
- package/core/MeshReflectorMaterial.cjs.js +1 -1
- package/core/MeshReflectorMaterial.d.ts +2 -1
- package/core/MeshReflectorMaterial.js +9 -5
- package/core/OrthographicCamera.cjs.js +1 -1
- package/core/OrthographicCamera.js +1 -2
- package/core/PerspectiveCamera.cjs.js +1 -1
- package/core/PerspectiveCamera.js +1 -2
- package/core/Reflector.cjs.js +1 -1
- package/core/Reflector.d.ts +2 -1
- package/core/Reflector.js +5 -3
- package/index.cjs.js +1 -1
- package/materials/MeshReflectorMaterial.cjs.js +1 -1
- package/materials/MeshReflectorMaterial.d.ts +4 -0
- package/materials/MeshReflectorMaterial.js +20 -2
- package/package.json +1 -1
- package/web/PresentationControls.cjs.js +1 -1
- package/web/PresentationControls.js +1 -1
package/README.md
CHANGED
|
@@ -616,15 +616,16 @@ Easily add reflections and/or blur to any mesh. It takes surface roughness into
|
|
|
616
616
|
<planeGeometry />
|
|
617
617
|
<MeshReflectorMaterial
|
|
618
618
|
blur={[0, 0]} // Blur ground reflections (width, heigt), 0 skips blur
|
|
619
|
-
mixBlur={
|
|
620
|
-
mixStrength={
|
|
619
|
+
mixBlur={0} // How much blur mixes with surface roughness (default = 1)
|
|
620
|
+
mixStrength={1} // Strength of the reflections
|
|
621
|
+
mixContrast={1} // Contrast of the reflections
|
|
621
622
|
resolution={256} // Off-buffer resolution, lower=faster, higher=better quality, slower
|
|
622
|
-
mirror={0
|
|
623
|
-
depthScale={
|
|
623
|
+
mirror={0} // Mirror environment, 0 = texture colors, 1 = pick up env colors
|
|
624
|
+
depthScale={0} // Scale the depth factor (0 = no depth, default = 0)
|
|
624
625
|
minDepthThreshold={0.9} // Lower edge for the depthTexture interpolation (default = 0)
|
|
625
626
|
maxDepthThreshold={1} // Upper edge for the depthTexture interpolation (default = 0)
|
|
626
627
|
depthToBlurRatioBias={0.25} // Adds a bias factor to the depthTexture before calculating the blur amount [blurFactor = blurTexture * (depthTexture + bias)]. It accepts values between 0 and 1, default is 0.25. An amount > 0 of bias makes sure that the blurTexture is not too sharp because of the multiplication with the depthTexture
|
|
627
|
-
distortion={
|
|
628
|
+
distortion={1} // Amount of distortion based on the distortionMap texture
|
|
628
629
|
distortionMap={distortionTexture} // The red channel of this texture is used as the distortion map. Default is null
|
|
629
630
|
debug={0} /* Depending on the assigned value, one of the following channels is shown:
|
|
630
631
|
0 = no debug
|
|
@@ -1 +1 @@
|
|
|
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("react-merge-refs"),
|
|
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("react-merge-refs"),i=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 l(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");var u=s(e),d=l(t),c=s(n);a.extend({MeshReflectorMaterialImpl:o.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=1,resolution:n=256,blur:o=[0,0],minDepthThreshold:s=.9,maxDepthThreshold:l=1,depthScale:p=0,depthToBlurRatioBias:m=.25,mirror:h=0,debug:f=0,distortion:x=1,mixContrast:M=1,distortionMap:T,...S},b)=>{const y=a.useThree((({gl:e})=>e)),w=a.useThree((({camera:e})=>e)),g=a.useThree((({scene:e})=>e)),R=(o=Array.isArray(o)?o:[o,o])[0]+o[1]>0,v=d.useRef(null),[j]=d.useState((()=>new r.Plane)),[B]=d.useState((()=>new r.Vector3)),[D]=d.useState((()=>new r.Vector3)),[_]=d.useState((()=>new r.Vector3)),[P]=d.useState((()=>new r.Matrix4)),[U]=d.useState((()=>new r.Vector3(0,0,-1))),[E]=d.useState((()=>new r.Vector4)),[O]=d.useState((()=>new r.Vector3)),[F]=d.useState((()=>new r.Vector3)),[V]=d.useState((()=>new r.Vector4)),[W]=d.useState((()=>new r.Matrix4)),[q]=d.useState((()=>new r.PerspectiveCamera)),I=d.useCallback((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;if(D.setFromMatrixPosition(t.matrixWorld),_.setFromMatrixPosition(w.matrixWorld),P.extractRotation(t.matrixWorld),B.set(0,0,1),B.applyMatrix4(P),O.subVectors(D,_),O.dot(B)>0)return;O.reflect(B).negate(),O.add(D),P.extractRotation(w.matrixWorld),U.set(0,0,-1),U.applyMatrix4(P),U.add(_),F.subVectors(D,U),F.reflect(B).negate(),F.add(D),q.position.copy(O),q.up.set(0,1,0),q.up.applyMatrix4(P),q.up.reflect(B),q.lookAt(F),q.far=w.far,q.updateMatrixWorld(),q.projectionMatrix.copy(w.projectionMatrix),W.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),W.multiply(q.projectionMatrix),W.multiply(q.matrixWorldInverse),W.multiply(t.matrixWorld),j.setFromNormalAndCoplanarPoint(B,D),j.applyMatrix4(q.matrixWorldInverse),E.set(j.normal.x,j.normal.y,j.normal.z,j.constant);const r=q.projectionMatrix;V.x=(Math.sign(E.x)+r.elements[8])/r.elements[0],V.y=(Math.sign(E.y)+r.elements[9])/r.elements[5],V.z=-1,V.w=(1+r.elements[10])/r.elements[14],E.multiplyScalar(2/E.dot(V)),r.elements[2]=E.x,r.elements[6]=E.y,r.elements[10]=E.z+1,r.elements[14]=E.w}),[]),[C,k,L,z]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,format:r.RGBFormat,encoding:y.outputEncoding},u=new r.WebGLRenderTarget(n,n,a);u.depthBuffer=!0,u.depthTexture=new r.DepthTexture(n,n),u.depthTexture.format=r.DepthFormat,u.depthTexture.type=r.UnsignedShortType;const d=new r.WebGLRenderTarget(n,n,a);return[u,d,new i.BlurPass({gl:y,resolution:n,width:o[0],height:o[1],minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m}),{mirror:h,textureMatrix:W,mixBlur:e,tDiffuse:u.texture,tDepth:u.depthTexture,tDiffuseBlur:d.texture,hasBlur:R,mixStrength:t,minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m,transparent:!0,debug:f,distortion:x,distortionMap:T,mixContrast:M,"defines-USE_BLUR":R?"":void 0,"defines-USE_DEPTH":p>0?"":void 0,"defines-USE_DISTORTION":T?"":void 0}]}),[y,o,W,n,h,R,e,t,s,l,p,m,f,x,T,M]);return a.useFrame((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;t.visible=!1;const r=y.xr.enabled,a=y.shadowMap.autoUpdate;I(),y.xr.enabled=!1,y.shadowMap.autoUpdate=!1,y.setRenderTarget(C),y.state.buffers.depth.setMask(!0),y.autoClear||y.clear(),y.render(g,q),R&&L.render(y,C,k),y.xr.enabled=r,y.shadowMap.autoUpdate=a,t.visible=!0,y.setRenderTarget(null)})),d.createElement("meshReflectorMaterialImpl",u.default({attach:"material",key:"key"+z["defines-USE_BLUR"]+z["defines-USE_DEPTH"]+z["defines-USE_DISTORTION"],ref:c.default([v,b])},z,S))}));exports.MeshReflectorMaterial=p;
|
|
@@ -14,6 +14,7 @@ export declare type Props = JSX.IntrinsicElements['meshStandardMaterial'] & {
|
|
|
14
14
|
debug?: number;
|
|
15
15
|
distortionMap?: Texture;
|
|
16
16
|
distortion?: number;
|
|
17
|
+
mixContrast?: number;
|
|
17
18
|
};
|
|
18
19
|
declare global {
|
|
19
20
|
namespace JSX {
|
|
@@ -22,4 +23,4 @@ declare global {
|
|
|
22
23
|
}
|
|
23
24
|
}
|
|
24
25
|
}
|
|
25
|
-
export declare const MeshReflectorMaterial: React.ForwardRefExoticComponent<Pick<Props, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "dispose" | "type" | "id" | "uuid" | "name" | "userData" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | "map" | "transparent" | "fog" | "blur" | "opacity" | "precision" | "alphaTest" | "alphaToCoverage" | "blendDst" | "blendDstAlpha" | "blendEquation" | "blendEquationAlpha" | "blending" | "blendSrc" | "blendSrcAlpha" | "clipIntersection" | "clippingPlanes" | "clipShadows" | "colorWrite" | "defines" | "depthFunc" | "depthTest" | "depthWrite" | "stencilWrite" | "stencilFunc" | "stencilRef" | "stencilWriteMask" | "stencilFuncMask" | "stencilFail" | "stencilZFail" | "stencilZPass" | "isMaterial" | "needsUpdate" | "polygonOffset" | "polygonOffsetFactor" | "polygonOffsetUnits" | "premultipliedAlpha" | "dithering" | "side" | "shadowSide" | "toneMapped" | "vertexColors" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "setValues" | "resolution" | "wireframe" | "wireframeLinewidth" | "skinning" | "morphTargets" | "morphNormals" | "emissive" | "emissiveIntensity" | "emissiveMap" | "lightMap" | "lightMapIntensity" | "aoMap" | "aoMapIntensity" | "alphaMap" | "envMap" | "refractionRatio" | "wireframeLinecap" | "wireframeLinejoin" | "roughness" | "metalness" | "bumpMap" | "bumpScale" | "normalMap" | "normalMapType" | "normalScale" | "displacementMap" | "displacementScale" | "displacementBias" | "roughnessMap" | "metalnessMap" | "envMapIntensity" | "vertexTangents" | "flatShading" | "isMeshStandardMaterial" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "debug" | "distortion" | "distortionMap"> & React.RefAttributes<MeshReflectorMaterialImpl>>;
|
|
26
|
+
export declare const MeshReflectorMaterial: React.ForwardRefExoticComponent<Pick<Props, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "dispose" | "type" | "id" | "uuid" | "name" | "userData" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | "map" | "transparent" | "fog" | "blur" | "opacity" | "precision" | "alphaTest" | "alphaToCoverage" | "blendDst" | "blendDstAlpha" | "blendEquation" | "blendEquationAlpha" | "blending" | "blendSrc" | "blendSrcAlpha" | "clipIntersection" | "clippingPlanes" | "clipShadows" | "colorWrite" | "defines" | "depthFunc" | "depthTest" | "depthWrite" | "stencilWrite" | "stencilFunc" | "stencilRef" | "stencilWriteMask" | "stencilFuncMask" | "stencilFail" | "stencilZFail" | "stencilZPass" | "isMaterial" | "needsUpdate" | "polygonOffset" | "polygonOffsetFactor" | "polygonOffsetUnits" | "premultipliedAlpha" | "dithering" | "side" | "shadowSide" | "toneMapped" | "vertexColors" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "setValues" | "resolution" | "wireframe" | "wireframeLinewidth" | "skinning" | "morphTargets" | "morphNormals" | "emissive" | "emissiveIntensity" | "emissiveMap" | "lightMap" | "lightMapIntensity" | "aoMap" | "aoMapIntensity" | "alphaMap" | "envMap" | "refractionRatio" | "wireframeLinecap" | "wireframeLinejoin" | "roughness" | "metalness" | "bumpMap" | "bumpScale" | "normalMap" | "normalMapType" | "normalScale" | "displacementMap" | "displacementScale" | "displacementBias" | "roughnessMap" | "metalnessMap" | "envMapIntensity" | "vertexTangents" | "flatShading" | "isMeshStandardMaterial" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "debug" | "distortion" | "mixContrast" | "distortionMap"> & React.RefAttributes<MeshReflectorMaterialImpl>>;
|
|
@@ -10,17 +10,18 @@ extend({
|
|
|
10
10
|
MeshReflectorMaterialImpl: MeshReflectorMaterial$1
|
|
11
11
|
});
|
|
12
12
|
const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
|
|
13
|
-
mixBlur = 0
|
|
14
|
-
mixStrength =
|
|
13
|
+
mixBlur = 0,
|
|
14
|
+
mixStrength = 1,
|
|
15
15
|
resolution = 256,
|
|
16
16
|
blur = [0, 0],
|
|
17
17
|
minDepthThreshold = 0.9,
|
|
18
18
|
maxDepthThreshold = 1,
|
|
19
19
|
depthScale = 0,
|
|
20
20
|
depthToBlurRatioBias = 0.25,
|
|
21
|
-
mirror,
|
|
21
|
+
mirror = 0,
|
|
22
22
|
debug = 0,
|
|
23
23
|
distortion = 1,
|
|
24
|
+
mixContrast = 1,
|
|
24
25
|
distortionMap,
|
|
25
26
|
...props
|
|
26
27
|
}, ref) => {
|
|
@@ -143,12 +144,13 @@ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
|
|
|
143
144
|
debug,
|
|
144
145
|
distortion,
|
|
145
146
|
distortionMap,
|
|
147
|
+
mixContrast,
|
|
146
148
|
'defines-USE_BLUR': hasBlur ? '' : undefined,
|
|
147
149
|
'defines-USE_DEPTH': depthScale > 0 ? '' : undefined,
|
|
148
150
|
'defines-USE_DISTORTION': distortionMap ? '' : undefined
|
|
149
151
|
};
|
|
150
152
|
return [fbo1, fbo2, blurpass, reflectorProps];
|
|
151
|
-
}, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, debug, distortion, distortionMap]);
|
|
153
|
+
}, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, debug, distortion, distortionMap, mixContrast]);
|
|
152
154
|
useFrame(() => {
|
|
153
155
|
var _materialRef$current2;
|
|
154
156
|
|
|
@@ -172,7 +174,9 @@ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
|
|
|
172
174
|
gl.setRenderTarget(null);
|
|
173
175
|
});
|
|
174
176
|
return /*#__PURE__*/React.createElement("meshReflectorMaterialImpl", _extends({
|
|
175
|
-
attach: "material",
|
|
177
|
+
attach: "material" // Defines can't be updated dynamically, so we need to recreate the material
|
|
178
|
+
,
|
|
179
|
+
key: 'key' + reflectorProps['defines-USE_BLUR'] + reflectorProps['defines-USE_DEPTH'] + reflectorProps['defines-USE_DISTORTION'],
|
|
176
180
|
ref: mergeRefs([materialRef, ref])
|
|
177
181
|
}, reflectorProps, props));
|
|
178
182
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),u=require("react-merge-refs");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=a(e),f=c(r),o=a(u);const i=f.forwardRef((({makeDefault:e
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),u=require("react-merge-refs");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=a(e),f=c(r),o=a(u);const i=f.forwardRef((({makeDefault:e,...r},u)=>{const a=t.useThree((({set:e})=>e)),c=t.useThree((({camera:e})=>e)),i=t.useThree((({size:e})=>e)),s=f.useRef();return f.useLayoutEffect((()=>{s.current&&!r.manual&&s.current.updateProjectionMatrix()}),[i,r]),f.useLayoutEffect((()=>{if(e&&s.current){const e=c;return a((()=>({camera:s.current}))),()=>a((()=>({camera:e})))}}),[c,s,e,a]),f.createElement("orthographicCamera",n.default({left:i.width/-2,right:i.width/2,top:i.height/2,bottom:i.height/-2,ref:o.default([s,u])},r))}));exports.OrthographicCamera=i;
|
|
@@ -5,7 +5,6 @@ import mergeRefs from 'react-merge-refs';
|
|
|
5
5
|
|
|
6
6
|
const OrthographicCamera = /*#__PURE__*/React.forwardRef(({
|
|
7
7
|
makeDefault,
|
|
8
|
-
manual,
|
|
9
8
|
...props
|
|
10
9
|
}, ref) => {
|
|
11
10
|
const set = useThree(({
|
|
@@ -19,7 +18,7 @@ const OrthographicCamera = /*#__PURE__*/React.forwardRef(({
|
|
|
19
18
|
}) => size);
|
|
20
19
|
const cameraRef = React.useRef();
|
|
21
20
|
React.useLayoutEffect(() => {
|
|
22
|
-
if (cameraRef.current && !manual) {
|
|
21
|
+
if (cameraRef.current && !props.manual) {
|
|
23
22
|
cameraRef.current.updateProjectionMatrix();
|
|
24
23
|
}
|
|
25
24
|
}, [size, props]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),u=require("react-merge-refs");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=a(e),f=c(r),s=a(u);const i=f.forwardRef((({makeDefault:e
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),u=require("react-merge-refs");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=a(e),f=c(r),s=a(u);const i=f.forwardRef((({makeDefault:e,...r},u)=>{const a=t.useThree((({set:e})=>e)),c=t.useThree((({camera:e})=>e)),i=t.useThree((({size:e})=>e)),o=f.useRef();return f.useLayoutEffect((()=>{const{current:e}=o;e&&!r.manual&&(e.aspect=i.width/i.height,e.updateProjectionMatrix())}),[i,r]),f.useLayoutEffect((()=>{if(e&&o.current){const e=c;return a((()=>({camera:o.current}))),()=>a((()=>({camera:e})))}}),[c,o,e,a]),f.createElement("perspectiveCamera",n.default({ref:s.default([o,u])},r))}));exports.PerspectiveCamera=i;
|
|
@@ -5,7 +5,6 @@ import mergeRefs from 'react-merge-refs';
|
|
|
5
5
|
|
|
6
6
|
const PerspectiveCamera = /*#__PURE__*/React.forwardRef(({
|
|
7
7
|
makeDefault,
|
|
8
|
-
manual,
|
|
9
8
|
...props
|
|
10
9
|
}, ref) => {
|
|
11
10
|
const set = useThree(({
|
|
@@ -23,7 +22,7 @@ const PerspectiveCamera = /*#__PURE__*/React.forwardRef(({
|
|
|
23
22
|
current: cam
|
|
24
23
|
} = cameraRef;
|
|
25
24
|
|
|
26
|
-
if (cam && !manual) {
|
|
25
|
+
if (cam && !props.manual) {
|
|
27
26
|
cam.aspect = size.width / size.height;
|
|
28
27
|
cam.updateProjectionMatrix();
|
|
29
28
|
}
|
package/core/Reflector.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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("react-merge-refs"),o=require("../materials/BlurPass.cjs.js"),i=require("../materials/MeshReflectorMaterial.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(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");var u=s(e),d=l(t),c=s(n);a.extend({MeshReflectorMaterial:i.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=.5,resolution:n=256,blur:i=[0,0],args:s=[1,1],minDepthThreshold:l=.9,maxDepthThreshold:p=1,depthScale:m=0,depthToBlurRatioBias:h=.25,mirror:f,children:x,debug:M=0,distortion:b=1,distortionMap:
|
|
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("react-merge-refs"),o=require("../materials/BlurPass.cjs.js"),i=require("../materials/MeshReflectorMaterial.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(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");var u=s(e),d=l(t),c=s(n);a.extend({MeshReflectorMaterial:i.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=.5,resolution:n=256,blur:i=[0,0],args:s=[1,1],minDepthThreshold:l=.9,maxDepthThreshold:p=1,depthScale:m=0,depthToBlurRatioBias:h=.25,mirror:f=0,children:x,debug:M=0,distortion:b=1,mixContrast:w=1,distortionMap:g,...T},y)=>{d.useEffect((()=>{console.warn("Reflector has been deprecated and will be removed next major. Replace it with <MeshReflectorMaterial />!")}),[]);const R=a.useThree((({gl:e})=>e)),S=a.useThree((({camera:e})=>e)),j=a.useThree((({scene:e})=>e)),B=(i=Array.isArray(i)?i:[i,i])[0]+i[1]>0,v=d.useRef(null),[D]=d.useState((()=>new r.Plane)),[P]=d.useState((()=>new r.Vector3)),[E]=d.useState((()=>new r.Vector3)),[F]=d.useState((()=>new r.Vector3)),[V]=d.useState((()=>new r.Matrix4)),[W]=d.useState((()=>new r.Vector3(0,0,-1))),[O]=d.useState((()=>new r.Vector4)),[q]=d.useState((()=>new r.Vector3)),[U]=d.useState((()=>new r.Vector3)),[C]=d.useState((()=>new r.Vector4)),[_]=d.useState((()=>new r.Matrix4)),[L]=d.useState((()=>new r.PerspectiveCamera)),k=d.useCallback((()=>{if(E.setFromMatrixPosition(v.current.matrixWorld),F.setFromMatrixPosition(S.matrixWorld),V.extractRotation(v.current.matrixWorld),P.set(0,0,1),P.applyMatrix4(V),q.subVectors(E,F),q.dot(P)>0)return;q.reflect(P).negate(),q.add(E),V.extractRotation(S.matrixWorld),W.set(0,0,-1),W.applyMatrix4(V),W.add(F),U.subVectors(E,W),U.reflect(P).negate(),U.add(E),L.position.copy(q),L.up.set(0,1,0),L.up.applyMatrix4(V),L.up.reflect(P),L.lookAt(U),L.far=S.far,L.updateMatrixWorld(),L.projectionMatrix.copy(S.projectionMatrix),_.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),_.multiply(L.projectionMatrix),_.multiply(L.matrixWorldInverse),_.multiply(v.current.matrixWorld),D.setFromNormalAndCoplanarPoint(P,E),D.applyMatrix4(L.matrixWorldInverse),O.set(D.normal.x,D.normal.y,D.normal.z,D.constant);const e=L.projectionMatrix;C.x=(Math.sign(O.x)+e.elements[8])/e.elements[0],C.y=(Math.sign(O.y)+e.elements[9])/e.elements[5],C.z=-1,C.w=(1+e.elements[10])/e.elements[14],O.multiplyScalar(2/O.dot(C)),e.elements[2]=O.x,e.elements[6]=O.y,e.elements[10]=O.z+1,e.elements[14]=O.w}),[]),[z,A,G,I]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,format:r.RGBFormat,encoding:R.outputEncoding},s=new r.WebGLRenderTarget(n,n,a);s.depthBuffer=!0,s.depthTexture=new r.DepthTexture(n,n),s.depthTexture.format=r.DepthFormat,s.depthTexture.type=r.UnsignedShortType;const u=new r.WebGLRenderTarget(n,n,a);return[s,u,new o.BlurPass({gl:R,resolution:n,width:i[0],height:i[1],minDepthThreshold:l,maxDepthThreshold:p,depthScale:m,depthToBlurRatioBias:h}),{mirror:f,textureMatrix:_,mixBlur:e,tDiffuse:s.texture,tDepth:s.depthTexture,tDiffuseBlur:u.texture,hasBlur:B,mixStrength:t,minDepthThreshold:l,maxDepthThreshold:p,depthScale:m,depthToBlurRatioBias:h,transparent:!0,debug:M,distortion:b,distortionMap:g,mixContrast:w,"defines-USE_BLUR":B?"":void 0,"defines-USE_DEPTH":m>0?"":void 0,"defines-USE_DISTORTION":g?"":void 0}]}),[R,i,_,n,f,B,e,t,l,p,m,h,M,b,g,w]);return a.useFrame((()=>{if(null==v||!v.current)return;v.current.visible=!1;const e=R.xr.enabled,t=R.shadowMap.autoUpdate;k(),R.xr.enabled=!1,R.shadowMap.autoUpdate=!1,R.setRenderTarget(z),R.state.buffers.depth.setMask(!0),R.autoClear||R.clear(),R.render(j,L),B&&G.render(R,z,A),R.xr.enabled=e,R.shadowMap.autoUpdate=t,v.current.visible=!0,R.setRenderTarget(null)})),d.createElement("mesh",u.default({ref:c.default([v,y])},T),d.createElement("planeBufferGeometry",{args:s}),x?x("meshReflectorMaterial",I):d.createElement("meshReflectorMaterial",I))}));exports.Reflector=p;
|
package/core/Reflector.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ export declare type ReflectorProps = Omit<JSX.IntrinsicElements['mesh'], 'args'
|
|
|
14
14
|
debug?: number;
|
|
15
15
|
distortionMap?: Texture;
|
|
16
16
|
distortion?: number;
|
|
17
|
+
mixContrast?: number;
|
|
17
18
|
children?: {
|
|
18
19
|
(Component: React.ElementType<JSX.IntrinsicElements['meshReflectorMaterial']>, ComponentProps: MeshReflectorMaterialProps): JSX.Element | null;
|
|
19
20
|
};
|
|
@@ -25,4 +26,4 @@ declare global {
|
|
|
25
26
|
}
|
|
26
27
|
}
|
|
27
28
|
}
|
|
28
|
-
export declare const Reflector: React.ForwardRefExoticComponent<Pick<ReflectorProps, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "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" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "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" | "blur" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "resolution" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "debug" | "distortion" | "distortionMap"> & React.RefAttributes<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>>;
|
|
29
|
+
export declare const Reflector: React.ForwardRefExoticComponent<Pick<ReflectorProps, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "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" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "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" | "blur" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "resolution" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "debug" | "distortion" | "mixContrast" | "distortionMap"> & React.RefAttributes<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>>;
|
package/core/Reflector.js
CHANGED
|
@@ -10,7 +10,7 @@ extend({
|
|
|
10
10
|
MeshReflectorMaterial
|
|
11
11
|
});
|
|
12
12
|
const Reflector = /*#__PURE__*/React.forwardRef(({
|
|
13
|
-
mixBlur = 0
|
|
13
|
+
mixBlur = 0,
|
|
14
14
|
mixStrength = 0.5,
|
|
15
15
|
resolution = 256,
|
|
16
16
|
blur = [0, 0],
|
|
@@ -19,10 +19,11 @@ const Reflector = /*#__PURE__*/React.forwardRef(({
|
|
|
19
19
|
maxDepthThreshold = 1,
|
|
20
20
|
depthScale = 0,
|
|
21
21
|
depthToBlurRatioBias = 0.25,
|
|
22
|
-
mirror,
|
|
22
|
+
mirror = 0,
|
|
23
23
|
children,
|
|
24
24
|
debug = 0,
|
|
25
25
|
distortion = 1,
|
|
26
|
+
mixContrast = 1,
|
|
26
27
|
distortionMap,
|
|
27
28
|
...props
|
|
28
29
|
}, ref) => {
|
|
@@ -143,12 +144,13 @@ const Reflector = /*#__PURE__*/React.forwardRef(({
|
|
|
143
144
|
debug,
|
|
144
145
|
distortion,
|
|
145
146
|
distortionMap,
|
|
147
|
+
mixContrast,
|
|
146
148
|
'defines-USE_BLUR': hasBlur ? '' : undefined,
|
|
147
149
|
'defines-USE_DEPTH': depthScale > 0 ? '' : undefined,
|
|
148
150
|
'defines-USE_DISTORTION': distortionMap ? '' : undefined
|
|
149
151
|
};
|
|
150
152
|
return [fbo1, fbo2, blurpass, reflectorProps];
|
|
151
|
-
}, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, debug, distortion, distortionMap]);
|
|
153
|
+
}, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, debug, distortion, distortionMap, mixContrast]);
|
|
152
154
|
useFrame(() => {
|
|
153
155
|
if (!(meshRef != null && meshRef.current)) return;
|
|
154
156
|
meshRef.current.visible = false;
|