@react-three/drei 9.74.3 → 9.74.5
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 +14 -3
- package/core/MeshPortalMaterial.cjs.js +1 -1
- package/core/MeshPortalMaterial.d.ts +7 -1
- package/core/MeshPortalMaterial.js +9 -7
- package/index.cjs.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3328,10 +3328,21 @@ 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
|
+
/** Optional event priority, defaults to 0 */
|
|
3339
|
+
eventPriority?: number
|
|
3340
|
+
/** Optional render priority, defaults to 0 */
|
|
3341
|
+
renderPriority?: number
|
|
3342
|
+
}
|
|
3332
3343
|
```
|
|
3333
3344
|
|
|
3334
|
-
A material that creates a portal into another scene. It is drawn onto the geometry of the mesh that it is applied to.
|
|
3345
|
+
A material that creates a portal into another scene. It is drawn onto the geometry of the mesh that it is applied to. It uses RenderTexture internally, but counteracts the perspective shift of the texture surface, the portals contents are thereby masked by it but otherwise in the same position as if they were in the original scene.
|
|
3335
3346
|
|
|
3336
3347
|
```jsx
|
|
3337
3348
|
<mesh {...props}>
|
|
@@ -3344,7 +3355,7 @@ A material that creates a portal into another scene. It is drawn onto the geomet
|
|
|
3344
3355
|
</mesh>
|
|
3345
3356
|
```
|
|
3346
3357
|
|
|
3347
|
-
You can optionally fade or blur the edges of the portal by providing a `blur` prop, do not forget to make the material transparent in that case.
|
|
3358
|
+
You can optionally fade or blur the edges of the portal by providing a `blur` prop, do not forget to make the material transparent in that case. It uses SDF flood-fill to determine the shape, you can thereby blur any geometry.
|
|
3348
3359
|
|
|
3349
3360
|
```jsx
|
|
3350
3361
|
<MeshPortalMaterial transparent blur={0.5}>
|
|
@@ -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,eventPriority:r,renderPriority:t,worldUnits:l=!1,resolution:o=512,...u},s)=>{n.extend({PortalMaterialImpl:f});const c=d.useRef(null),x=d.useRef(null),{gl:g,size:F,events:h,viewport:y}=n.useThree(),w=a.useFBO(o,o);return d.useLayoutEffect((()=>{var e;let r=null==(e=c.current)?void 0:e.__r3f.parent;if(!r)return;const t=new m.Mesh(r.geometry,new m.MeshBasicMaterial),n=(new m.Box3).setFromBufferAttribute(t.geometry.attributes.position),a=new m.OrthographicCamera(n.min.x*(1+2/o),n.max.x*(1+2/o),n.max.y*(1+2/o),n.min.y*(1+2/o),.1,1e3);a.position.set(0,0,1),a.lookAt(0,0,0),g.setRenderTarget(w),g.render(t,a);const i=p(o,o,g)(w.texture),l=new Float32Array(o*o);g.readRenderTargetPixels(i,0,0,o,o,l);let u=1/0;for(let e=0;e<l.length;e++)l[e]<u&&(u=l[e]);u=-u,c.current.size=u,c.current.sdf=i.texture,g.setRenderTarget(null)}),[o]),n.useFrame((()=>{var e;let r=null==(e=c.current)?void 0:e.__r3f.parent;r&&(l?x.current.matrix.identity():x.current.matrix.copy(r.matrixWorld))})),d.useImperativeHandle(s,(()=>c.current)),d.createElement("portalMaterialImpl",v.default({ref:c,resolution:[F.width*y.dpr,F.height*y.dpr],toneMapped:!1},u),d.createElement(i.RenderTexture,{attach:"map",eventPriority:r,renderPriority:t,compute:h.compute},d.createElement("group",{matrixAutoUpdate:!1,ref:x},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,9 @@ declare global {
|
|
|
18
18
|
export declare type PortalProps = JSX.IntrinsicElements['portalMaterialImpl'] & {
|
|
19
19
|
blur?: number;
|
|
20
20
|
resolution?: number;
|
|
21
|
+
worldUnits?: boolean;
|
|
22
|
+
eventPriority?: number;
|
|
23
|
+
renderPriority?: number;
|
|
21
24
|
};
|
|
22
25
|
export declare const MeshPortalMaterial: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<THREE.ShaderMaterial>, ReactThreeFiber.NodeProps<THREE.ShaderMaterial, [THREE.ShaderMaterialParameters]>>> & {
|
|
23
26
|
resolution: ReactThreeFiber.Vector2;
|
|
@@ -28,4 +31,7 @@ export declare const MeshPortalMaterial: React.ForwardRefExoticComponent<Pick<Re
|
|
|
28
31
|
} & {
|
|
29
32
|
blur?: number | undefined;
|
|
30
33
|
resolution?: number | undefined;
|
|
31
|
-
|
|
34
|
+
worldUnits?: boolean | undefined;
|
|
35
|
+
eventPriority?: number | undefined;
|
|
36
|
+
renderPriority?: number | undefined;
|
|
37
|
+
}, "attach" | "args" | "children" | "key" | "onUpdate" | "size" | "map" | keyof THREE.ShaderMaterial | "blur" | "resolution" | "worldUnits" | "renderPriority" | "eventPriority" | "sdf"> & React.RefAttributes<PortalMaterialType>>;
|
|
@@ -37,6 +37,9 @@ const PortalMaterialImpl = shaderMaterial({
|
|
|
37
37
|
}`);
|
|
38
38
|
const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
|
|
39
39
|
children,
|
|
40
|
+
eventPriority,
|
|
41
|
+
renderPriority,
|
|
42
|
+
worldUnits = false,
|
|
40
43
|
resolution = 512,
|
|
41
44
|
...props
|
|
42
45
|
}, fref) => {
|
|
@@ -52,20 +55,18 @@ const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
|
|
|
52
55
|
viewport
|
|
53
56
|
} = useThree();
|
|
54
57
|
const maskRenderTarget = useFBO(resolution, resolution);
|
|
55
|
-
const [imageMaterial] = React.useState(() => new THREE.MeshBasicMaterial());
|
|
56
58
|
React.useLayoutEffect(() => {
|
|
57
59
|
var _ref$current;
|
|
58
60
|
|
|
59
61
|
let mask = (_ref$current = ref.current) == null ? void 0 : _ref$current.__r3f.parent;
|
|
60
62
|
if (!mask) return;
|
|
61
|
-
const
|
|
63
|
+
const tempMesh = new THREE.Mesh(mask.geometry, new THREE.MeshBasicMaterial());
|
|
64
|
+
const boundingBox = new THREE.Box3().setFromBufferAttribute(tempMesh.geometry.attributes.position);
|
|
62
65
|
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
66
|
orthoCam.position.set(0, 0, 1);
|
|
64
67
|
orthoCam.lookAt(0, 0, 0);
|
|
65
|
-
const oldMaterial = mask.material;
|
|
66
|
-
mask.material = imageMaterial;
|
|
67
68
|
gl.setRenderTarget(maskRenderTarget);
|
|
68
|
-
gl.render(
|
|
69
|
+
gl.render(tempMesh, orthoCam);
|
|
69
70
|
const sg = makeSDFGenerator(resolution, resolution, gl);
|
|
70
71
|
const sdf = sg(maskRenderTarget.texture);
|
|
71
72
|
const readSdf = new Float32Array(resolution * resolution);
|
|
@@ -80,7 +81,6 @@ const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
|
|
|
80
81
|
min = -min;
|
|
81
82
|
ref.current.size = min;
|
|
82
83
|
ref.current.sdf = sdf.texture;
|
|
83
|
-
mask.material = oldMaterial;
|
|
84
84
|
gl.setRenderTarget(null);
|
|
85
85
|
}, [resolution]);
|
|
86
86
|
useFrame(() => {
|
|
@@ -89,7 +89,7 @@ const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
|
|
|
89
89
|
let parent = (_ref$current2 = ref.current) == null ? void 0 : _ref$current2.__r3f.parent;
|
|
90
90
|
|
|
91
91
|
if (parent) {
|
|
92
|
-
group.current.matrix.copy(parent.matrixWorld);
|
|
92
|
+
if (!worldUnits) group.current.matrix.copy(parent.matrixWorld);else group.current.matrix.identity();
|
|
93
93
|
}
|
|
94
94
|
});
|
|
95
95
|
React.useImperativeHandle(fref, () => ref.current);
|
|
@@ -99,6 +99,8 @@ const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
|
|
|
99
99
|
toneMapped: false
|
|
100
100
|
}, props), /*#__PURE__*/React.createElement(RenderTexture, {
|
|
101
101
|
attach: "map",
|
|
102
|
+
eventPriority: eventPriority,
|
|
103
|
+
renderPriority: renderPriority,
|
|
102
104
|
compute: events.compute
|
|
103
105
|
}, /*#__PURE__*/React.createElement("group", {
|
|
104
106
|
matrixAutoUpdate: false,
|