@react-three/drei 9.74.3 → 9.74.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
CHANGED
|
@@ -3328,7 +3328,14 @@ const stencil = useMask(1, true)
|
|
|
3328
3328
|
#### Portal
|
|
3329
3329
|
|
|
3330
3330
|
```tsx
|
|
3331
|
-
export type PortalProps = JSX.IntrinsicElements['
|
|
3331
|
+
export type PortalProps = JSX.IntrinsicElements['portalMaterialImpl'] & {
|
|
3332
|
+
/** Edge fade blur, 0 = no blur (default) */
|
|
3333
|
+
blur?: number
|
|
3334
|
+
/** SDF resolution, the smaller the faster is the start-up time (default: 512) */
|
|
3335
|
+
resolution?: number
|
|
3336
|
+
/** By default portals use relative coordinates, contents are affects by the local matrix transform */
|
|
3337
|
+
worldUnits?: boolean
|
|
3338
|
+
}
|
|
3332
3339
|
```
|
|
3333
3340
|
|
|
3334
3341
|
A material that creates a portal into another scene. It is drawn onto the geometry of the mesh that it is applied to.
|
|
@@ -1 +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 f=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 }"),c=d.forwardRef((({children:e,resolution:
|
|
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 f=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 }"),c=d.forwardRef((({children:e,worldUnits:r=!1,resolution:t=512,...l},o)=>{n.extend({PortalMaterialImpl:f});const u=d.useRef(null),s=d.useRef(null),{gl:c,size:x,events:g,viewport:F}=n.useThree(),h=a.useFBO(t,t);return d.useLayoutEffect((()=>{var e;let r=null==(e=u.current)?void 0:e.__r3f.parent;if(!r)return;const n=new m.Mesh(r.geometry,new m.MeshBasicMaterial),a=(new m.Box3).setFromBufferAttribute(n.geometry.attributes.position),i=new m.OrthographicCamera(a.min.x*(1+2/t),a.max.x*(1+2/t),a.max.y*(1+2/t),a.min.y*(1+2/t),.1,1e3);i.position.set(0,0,1),i.lookAt(0,0,0),c.setRenderTarget(h),c.render(n,i);const l=p(t,t,c)(h.texture),o=new Float32Array(t*t);c.readRenderTargetPixels(l,0,0,t,t,o);let s=1/0;for(let e=0;e<o.length;e++)o[e]<s&&(s=o[e]);s=-s,u.current.size=s,u.current.sdf=l.texture,c.setRenderTarget(null)}),[t]),n.useFrame((()=>{var e;let t=null==(e=u.current)?void 0:e.__r3f.parent;t&&(r?s.current.matrix.identity():s.current.matrix.copy(t.matrixWorld))})),d.useImperativeHandle(o,(()=>u.current)),d.createElement("portalMaterialImpl",v.default({ref:u,resolution:[x.width*F.dpr,x.height*F.dpr],toneMapped:!1},l),d.createElement(i.RenderTexture,{attach:"map",compute:g.compute},d.createElement("group",{matrixAutoUpdate:!1,ref:s},e)))})),p=(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 }"})),f=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 }"})),c=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 }`})),p=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 }"})),x=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 g=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,c.material.uniforms.level.value=e,c.material.uniforms.maxSteps.value=F,c.material.uniforms.offset.value=r,c.material.uniforms.tex.value=h.texture,t.setRenderTarget(y),c.render(t),h=y}t.setRenderTarget(s),p.material.uniforms.tex.value=y.texture,p.render(t),f.material.uniforms.tex.value=o,t.setRenderTarget(i),f.render(t),h=i;for(let e=0;e<F;e++){const r=Math.pow(2,F-e-1);y=h===i?u:i,c.material.uniforms.level.value=e,c.material.uniforms.maxSteps.value=F,c.material.uniforms.offset.value=r,c.material.uniforms.tex.value=h.texture,t.setRenderTarget(y),c.render(t),h=y}return t.setRenderTarget(v),p.material.uniforms.tex.value=y.texture,p.render(t),t.setRenderTarget(g),x.material.uniforms.tex.value=o,x.render(t),t.setRenderTarget(null),g}};exports.MeshPortalMaterial=c;
|
|
@@ -18,6 +18,7 @@ declare global {
|
|
|
18
18
|
export declare type PortalProps = JSX.IntrinsicElements['portalMaterialImpl'] & {
|
|
19
19
|
blur?: number;
|
|
20
20
|
resolution?: number;
|
|
21
|
+
worldUnits?: boolean;
|
|
21
22
|
};
|
|
22
23
|
export declare const MeshPortalMaterial: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<THREE.ShaderMaterial>, ReactThreeFiber.NodeProps<THREE.ShaderMaterial, [THREE.ShaderMaterialParameters]>>> & {
|
|
23
24
|
resolution: ReactThreeFiber.Vector2;
|
|
@@ -28,4 +29,5 @@ export declare const MeshPortalMaterial: React.ForwardRefExoticComponent<Pick<Re
|
|
|
28
29
|
} & {
|
|
29
30
|
blur?: number | undefined;
|
|
30
31
|
resolution?: number | undefined;
|
|
31
|
-
|
|
32
|
+
worldUnits?: boolean | undefined;
|
|
33
|
+
}, "attach" | "args" | "children" | "key" | "onUpdate" | "size" | "map" | keyof THREE.ShaderMaterial | "blur" | "resolution" | "worldUnits" | "sdf"> & React.RefAttributes<PortalMaterialType>>;
|
|
@@ -37,6 +37,7 @@ const PortalMaterialImpl = shaderMaterial({
|
|
|
37
37
|
}`);
|
|
38
38
|
const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
|
|
39
39
|
children,
|
|
40
|
+
worldUnits = false,
|
|
40
41
|
resolution = 512,
|
|
41
42
|
...props
|
|
42
43
|
}, fref) => {
|
|
@@ -52,20 +53,18 @@ const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
|
|
|
52
53
|
viewport
|
|
53
54
|
} = useThree();
|
|
54
55
|
const maskRenderTarget = useFBO(resolution, resolution);
|
|
55
|
-
const [imageMaterial] = React.useState(() => new THREE.MeshBasicMaterial());
|
|
56
56
|
React.useLayoutEffect(() => {
|
|
57
57
|
var _ref$current;
|
|
58
58
|
|
|
59
59
|
let mask = (_ref$current = ref.current) == null ? void 0 : _ref$current.__r3f.parent;
|
|
60
60
|
if (!mask) return;
|
|
61
|
-
const
|
|
61
|
+
const tempMesh = new THREE.Mesh(mask.geometry, new THREE.MeshBasicMaterial());
|
|
62
|
+
const boundingBox = new THREE.Box3().setFromBufferAttribute(tempMesh.geometry.attributes.position);
|
|
62
63
|
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);
|
|
63
64
|
orthoCam.position.set(0, 0, 1);
|
|
64
65
|
orthoCam.lookAt(0, 0, 0);
|
|
65
|
-
const oldMaterial = mask.material;
|
|
66
|
-
mask.material = imageMaterial;
|
|
67
66
|
gl.setRenderTarget(maskRenderTarget);
|
|
68
|
-
gl.render(
|
|
67
|
+
gl.render(tempMesh, orthoCam);
|
|
69
68
|
const sg = makeSDFGenerator(resolution, resolution, gl);
|
|
70
69
|
const sdf = sg(maskRenderTarget.texture);
|
|
71
70
|
const readSdf = new Float32Array(resolution * resolution);
|
|
@@ -80,7 +79,6 @@ const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
|
|
|
80
79
|
min = -min;
|
|
81
80
|
ref.current.size = min;
|
|
82
81
|
ref.current.sdf = sdf.texture;
|
|
83
|
-
mask.material = oldMaterial;
|
|
84
82
|
gl.setRenderTarget(null);
|
|
85
83
|
}, [resolution]);
|
|
86
84
|
useFrame(() => {
|
|
@@ -89,7 +87,7 @@ const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
|
|
|
89
87
|
let parent = (_ref$current2 = ref.current) == null ? void 0 : _ref$current2.__r3f.parent;
|
|
90
88
|
|
|
91
89
|
if (parent) {
|
|
92
|
-
group.current.matrix.copy(parent.matrixWorld);
|
|
90
|
+
if (!worldUnits) group.current.matrix.copy(parent.matrixWorld);else group.current.matrix.identity();
|
|
93
91
|
}
|
|
94
92
|
});
|
|
95
93
|
React.useImperativeHandle(fref, () => ref.current);
|