@react-three/drei 9.74.4 → 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
CHANGED
|
@@ -3335,10 +3335,14 @@ export type PortalProps = JSX.IntrinsicElements['portalMaterialImpl'] & {
|
|
|
3335
3335
|
resolution?: number
|
|
3336
3336
|
/** By default portals use relative coordinates, contents are affects by the local matrix transform */
|
|
3337
3337
|
worldUnits?: boolean
|
|
3338
|
+
/** Optional event priority, defaults to 0 */
|
|
3339
|
+
eventPriority?: number
|
|
3340
|
+
/** Optional render priority, defaults to 0 */
|
|
3341
|
+
renderPriority?: number
|
|
3338
3342
|
}
|
|
3339
3343
|
```
|
|
3340
3344
|
|
|
3341
|
-
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.
|
|
3342
3346
|
|
|
3343
3347
|
```jsx
|
|
3344
3348
|
<mesh {...props}>
|
|
@@ -3351,7 +3355,7 @@ A material that creates a portal into another scene. It is drawn onto the geomet
|
|
|
3351
3355
|
</mesh>
|
|
3352
3356
|
```
|
|
3353
3357
|
|
|
3354
|
-
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.
|
|
3355
3359
|
|
|
3356
3360
|
```jsx
|
|
3357
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,worldUnits:
|
|
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;
|
|
@@ -19,6 +19,8 @@ export declare type PortalProps = JSX.IntrinsicElements['portalMaterialImpl'] &
|
|
|
19
19
|
blur?: number;
|
|
20
20
|
resolution?: number;
|
|
21
21
|
worldUnits?: boolean;
|
|
22
|
+
eventPriority?: number;
|
|
23
|
+
renderPriority?: number;
|
|
22
24
|
};
|
|
23
25
|
export declare const MeshPortalMaterial: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<THREE.ShaderMaterial>, ReactThreeFiber.NodeProps<THREE.ShaderMaterial, [THREE.ShaderMaterialParameters]>>> & {
|
|
24
26
|
resolution: ReactThreeFiber.Vector2;
|
|
@@ -30,4 +32,6 @@ export declare const MeshPortalMaterial: React.ForwardRefExoticComponent<Pick<Re
|
|
|
30
32
|
blur?: number | undefined;
|
|
31
33
|
resolution?: number | undefined;
|
|
32
34
|
worldUnits?: boolean | undefined;
|
|
33
|
-
|
|
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,8 @@ const PortalMaterialImpl = shaderMaterial({
|
|
|
37
37
|
}`);
|
|
38
38
|
const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
|
|
39
39
|
children,
|
|
40
|
+
eventPriority,
|
|
41
|
+
renderPriority,
|
|
40
42
|
worldUnits = false,
|
|
41
43
|
resolution = 512,
|
|
42
44
|
...props
|
|
@@ -97,6 +99,8 @@ const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
|
|
|
97
99
|
toneMapped: false
|
|
98
100
|
}, props), /*#__PURE__*/React.createElement(RenderTexture, {
|
|
99
101
|
attach: "map",
|
|
102
|
+
eventPriority: eventPriority,
|
|
103
|
+
renderPriority: renderPriority,
|
|
100
104
|
compute: events.compute
|
|
101
105
|
}, /*#__PURE__*/React.createElement("group", {
|
|
102
106
|
matrixAutoUpdate: false,
|