@react-three/drei 10.0.0-rc.2 → 10.0.0

package/core/Billboard.js

@@ -3,14 +3,14 @@ import * as React from 'react';
 import { Quaternion } from 'three';
 import { useFrame } from '@react-three/fiber';
 
-/**
- * Wraps children in a billboarded group. Sample usage:
- *
- * ```js
- * <Billboard>
- *   <Text>hi</Text>
- * </Billboard>
- * ```
+/**
+ * Wraps children in a billboarded group. Sample usage:
+ *
+ * ```js
+ * <Billboard>
+ *   <Text>hi</Text>
+ * </Billboard>
+ * ```
  */
 const Billboard = /* @__PURE__ */React.forwardRef(function Billboard({
   children,

package/core/Bounds.js

@@ -124,8 +124,8 @@ function Bounds({
         t.current = 0;
         return this;
       },
-      /**
-       * @deprecated Use moveTo and lookAt instead
+      /**
+       * @deprecated Use moveTo and lookAt instead
        */
       to({
         position,

package/core/Bvh.js

@@ -6,8 +6,8 @@ import { SAH, acceleratedRaycast, computeBoundsTree, disposeBoundsTree } from 't
 
 const isMesh = child => child.isMesh;
 
-/**
- * @deprecated Use the Bvh component instead
+/**
+ * @deprecated Use the Bvh component instead
  */
 function useBVH(mesh, options) {
   options = {

package/core/Cloud.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),a=require("./Texture.cjs.js"),o=require("../helpers/deprecated.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var l=u(e),i=c(t);const s=new r.Matrix4,d=new r.Vector3,f=new r.Quaternion,m=new r.Vector3,p=new r.Quaternion,g=new r.Vector3,h=i.createContext(null),y=i.forwardRef((({children:e,material:t=r.MeshLambertMaterial,texture:u="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",range:c,limit:y=200,frustumCulled:x,...v},b)=>{var M,w;const C=i.useMemo((()=>class extends t{constructor(){super();const e=parseInt(r.REVISION.replace(/\D+/g,""))>=154?"opaque_fragment":"output_fragment";this.onBeforeCompile=t=>{t.vertexShader="attribute float cloudOpacity;\n               varying float vOpacity;\n              "+t.vertexShader.replace("#include <fog_vertex>","#include <fog_vertex>\n                 vOpacity = cloudOpacity;\n                "),t.fragmentShader="varying float vOpacity;\n              "+t.fragmentShader.replace(`#include <${e}>`,`#include <${e}>\n                 gl_FragColor = vec4(outgoingLight, diffuseColor.a * vOpacity);\n                `)}}}),[t]);n.extend({CloudMaterial:C});const E=i.useRef(null),O=i.useRef([]),A=i.useMemo((()=>new Float32Array(Array.from({length:y},(()=>1)))),[y]),j=i.useMemo((()=>new Float32Array(Array.from({length:y},(()=>[1,1,1])).flat())),[y]),R=a.useTexture(u);let U,V=0,_=0;const q=new r.Quaternion,F=new r.Vector3(0,0,1),I=new r.Vector3;n.useFrame(((e,t)=>{for(V=e.clock.getElapsedTime(),s.copy(E.current.matrixWorld).invert(),e.camera.matrixWorld.decompose(m,p,g),_=0;_<O.current.length;_++)U=O.current[_],U.ref.current.matrixWorld.decompose(d,f,g),d.add(I.copy(U.position).applyQuaternion(f).multiply(g)),f.copy(p).multiply(q.setFromAxisAngle(F,U.rotation+=t*U.rotationFactor)),g.multiplyScalar(U.volume+(1+Math.sin(V*U.density*U.speed))/2*U.growth),U.matrix.compose(d,f,g).premultiply(s),U.dist=d.distanceTo(m);for(O.current.sort(((e,t)=>t.dist-e.dist)),_=0;_<O.current.length;_++)U=O.current[_],A[_]=U.opacity*(U.dist<U.fade-1?U.dist/U.fade:1),E.current.setMatrixAt(_,U.matrix),E.current.setColorAt(_,U.color);E.current.geometry.attributes.cloudOpacity.needsUpdate=!0,E.current.instanceMatrix.needsUpdate=!0,E.current.instanceColor&&(E.current.instanceColor.needsUpdate=!0)})),i.useLayoutEffect((()=>{const e=Math.min(y,void 0!==c?c:y,O.current.length);E.current.count=e,o.setUpdateRange(E.current.instanceMatrix,{start:0,count:16*e}),E.current.instanceColor&&o.setUpdateRange(E.current.instanceColor,{start:0,count:3*e}),o.setUpdateRange(E.current.geometry.attributes.cloudOpacity,{start:0,count:e})}));let D=[null!==(M=R.image.width)&&void 0!==M?M:1,null!==(w=R.image.height)&&void 0!==w?w:1];const P=Math.max(D[0],D[1]);return D=[D[0]/P,D[1]/P],i.createElement("group",l.default({ref:b},v),i.createElement(h.Provider,{value:O},e,i.createElement("instancedMesh",{matrixAutoUpdate:!1,ref:E,args:[null,null,y],frustumCulled:x},i.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"instanceColor",args:[j,3]}),i.createElement("planeGeometry",{args:[...D]},i.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"attributes-cloudOpacity",args:[A,1]})),i.createElement("cloudMaterial",{key:t.name,map:R,transparent:!0,depthWrite:!1}))))})),x=i.forwardRef((({opacity:e=1,speed:t=0,bounds:a=[5,1,1],segments:o=20,color:u="#ffffff",fade:c=10,volume:s=6,smallestVolume:d=.25,distribute:f=null,growth:m=4,concentrate:p="inside",seed:g=Math.random(),...y},x)=>{function v(){const e=1e4*Math.sin(g++);return e-Math.floor(e)}const b=i.useContext(h),M=i.useRef(null),w=i.useId(),C=i.useMemo((()=>[...new Array(o)].map(((e,t)=>({segments:o,bounds:new r.Vector3(1,1,1),position:new r.Vector3,uuid:w,index:t,ref:M,dist:0,matrix:new r.Matrix4,color:new r.Color,rotation:t*(Math.PI/o)})))),[o,w]);return i.useLayoutEffect((()=>{C.forEach(((r,l)=>{n.applyProps(r,{volume:s,color:u,speed:t,growth:m,opacity:e,fade:c,bounds:a,density:Math.max(.5,v()),rotationFactor:Math.max(.2,.5*v())*t});const i=null==f?void 0:f(r,l);var g;(i||o>1)&&r.position.copy(r.bounds).multiply(null!==(g=null==i?void 0:i.point)&&void 0!==g?g:{x:2*v()-1,y:2*v()-1,z:2*v()-1});const h=Math.abs(r.position.x),y=Math.abs(r.position.y),x=Math.abs(r.position.z),b=Math.max(h,y,x);r.length=1,h===b&&(r.length-=h/r.bounds.x),y===b&&(r.length-=y/r.bounds.y),x===b&&(r.length-=x/r.bounds.z),r.volume=(void 0!==(null==i?void 0:i.volume)?i.volume:Math.max(Math.max(0,d),"random"===p?v():"inside"===p?r.length:1-r.length))*s}))}),[p,a,c,u,e,m,s,g,o,t]),i.useLayoutEffect((()=>{const e=C;return b.current=[...b.current,...e],()=>{b.current=b.current.filter((e=>e.uuid!==w))}}),[C]),i.useImperativeHandle(x,(()=>M.current),[]),i.createElement("group",l.default({ref:M},y))})),v=i.forwardRef(((e,t)=>i.useContext(h)?i.createElement(x,l.default({ref:t},e)):i.createElement(y,null,i.createElement(x,l.default({ref:t},e)))));exports.Cloud=v,exports.CloudInstance=x,exports.Clouds=y;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),a=require("./Texture.cjs.js"),o=require("../helpers/deprecated.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var l=u(e),i=c(t);const s=new r.Matrix4,d=new r.Vector3,f=new r.Quaternion,m=new r.Vector3,p=new r.Quaternion,g=new r.Vector3,h=i.createContext(null),y=i.forwardRef((({children:e,material:t=r.MeshLambertMaterial,texture:u="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",range:c,limit:y=200,frustumCulled:x,...v},b)=>{var M,w;const C=i.useMemo((()=>class extends t{constructor(){super();const e=parseInt(r.REVISION.replace(/\D+/g,""))>=154?"opaque_fragment":"output_fragment";this.onBeforeCompile=t=>{t.vertexShader="attribute float cloudOpacity;\n               varying float vOpacity;\n              "+t.vertexShader.replace("#include <fog_vertex>","#include <fog_vertex>\n                 vOpacity = cloudOpacity;\n                "),t.fragmentShader="varying float vOpacity;\n              "+t.fragmentShader.replace(`#include <${e}>`,`#include <${e}>\n                 gl_FragColor = vec4(outgoingLight, diffuseColor.a * vOpacity);\n                `)}}}),[t]);n.extend({CloudMaterial:C});const E=i.useRef(null),O=i.useRef([]),A=i.useMemo((()=>new Float32Array(Array.from({length:y},(()=>1)))),[y]),j=i.useMemo((()=>new Float32Array(Array.from({length:y},(()=>[1,1,1])).flat())),[y]),R=a.useTexture(u);let U,V=0,_=0;const q=new r.Quaternion,F=new r.Vector3(0,0,1),I=new r.Vector3;n.useFrame(((e,t)=>{for(V=e.clock.elapsedTime,s.copy(E.current.matrixWorld).invert(),e.camera.matrixWorld.decompose(m,p,g),_=0;_<O.current.length;_++)U=O.current[_],U.ref.current.matrixWorld.decompose(d,f,g),d.add(I.copy(U.position).applyQuaternion(f).multiply(g)),f.copy(p).multiply(q.setFromAxisAngle(F,U.rotation+=t*U.rotationFactor)),g.multiplyScalar(U.volume+(1+Math.sin(V*U.density*U.speed))/2*U.growth),U.matrix.compose(d,f,g).premultiply(s),U.dist=d.distanceTo(m);for(O.current.sort(((e,t)=>t.dist-e.dist)),_=0;_<O.current.length;_++)U=O.current[_],A[_]=U.opacity*(U.dist<U.fade-1?U.dist/U.fade:1),E.current.setMatrixAt(_,U.matrix),E.current.setColorAt(_,U.color);E.current.geometry.attributes.cloudOpacity.needsUpdate=!0,E.current.instanceMatrix.needsUpdate=!0,E.current.instanceColor&&(E.current.instanceColor.needsUpdate=!0)})),i.useLayoutEffect((()=>{const e=Math.min(y,void 0!==c?c:y,O.current.length);E.current.count=e,o.setUpdateRange(E.current.instanceMatrix,{start:0,count:16*e}),E.current.instanceColor&&o.setUpdateRange(E.current.instanceColor,{start:0,count:3*e}),o.setUpdateRange(E.current.geometry.attributes.cloudOpacity,{start:0,count:e})}));let D=[null!==(M=R.image.width)&&void 0!==M?M:1,null!==(w=R.image.height)&&void 0!==w?w:1];const P=Math.max(D[0],D[1]);return D=[D[0]/P,D[1]/P],i.createElement("group",l.default({ref:b},v),i.createElement(h.Provider,{value:O},e,i.createElement("instancedMesh",{matrixAutoUpdate:!1,ref:E,args:[null,null,y],frustumCulled:x},i.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"instanceColor",args:[j,3]}),i.createElement("planeGeometry",{args:[...D]},i.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"attributes-cloudOpacity",args:[A,1]})),i.createElement("cloudMaterial",{key:t.name,map:R,transparent:!0,depthWrite:!1}))))})),x=i.forwardRef((({opacity:e=1,speed:t=0,bounds:a=[5,1,1],segments:o=20,color:u="#ffffff",fade:c=10,volume:s=6,smallestVolume:d=.25,distribute:f=null,growth:m=4,concentrate:p="inside",seed:g=Math.random(),...y},x)=>{function v(){const e=1e4*Math.sin(g++);return e-Math.floor(e)}const b=i.useContext(h),M=i.useRef(null),w=i.useId(),C=i.useMemo((()=>[...new Array(o)].map(((e,t)=>({segments:o,bounds:new r.Vector3(1,1,1),position:new r.Vector3,uuid:w,index:t,ref:M,dist:0,matrix:new r.Matrix4,color:new r.Color,rotation:t*(Math.PI/o)})))),[o,w]);return i.useLayoutEffect((()=>{C.forEach(((r,l)=>{n.applyProps(r,{volume:s,color:u,speed:t,growth:m,opacity:e,fade:c,bounds:a,density:Math.max(.5,v()),rotationFactor:Math.max(.2,.5*v())*t});const i=null==f?void 0:f(r,l);var g;(i||o>1)&&r.position.copy(r.bounds).multiply(null!==(g=null==i?void 0:i.point)&&void 0!==g?g:{x:2*v()-1,y:2*v()-1,z:2*v()-1});const h=Math.abs(r.position.x),y=Math.abs(r.position.y),x=Math.abs(r.position.z),b=Math.max(h,y,x);r.length=1,h===b&&(r.length-=h/r.bounds.x),y===b&&(r.length-=y/r.bounds.y),x===b&&(r.length-=x/r.bounds.z),r.volume=(void 0!==(null==i?void 0:i.volume)?i.volume:Math.max(Math.max(0,d),"random"===p?v():"inside"===p?r.length:1-r.length))*s}))}),[p,a,c,u,e,m,s,g,o,t]),i.useLayoutEffect((()=>{const e=C;return b.current=[...b.current,...e],()=>{b.current=b.current.filter((e=>e.uuid!==w))}}),[C]),i.useImperativeHandle(x,(()=>M.current),[]),i.createElement("group",l.default({ref:M},y))})),v=i.forwardRef(((e,t)=>i.useContext(h)?i.createElement(x,l.default({ref:t},e)):i.createElement(y,null,i.createElement(x,l.default({ref:t},e)))));exports.Cloud=v,exports.CloudInstance=x,exports.Clouds=y;

package/core/Cloud.js

@@ -61,7 +61,7 @@ const Clouds = /* @__PURE__ */React.forwardRef(({
   const dir = new Vector3(0, 0, 1);
   const pos = new Vector3();
   useFrame((state, delta) => {
-    t = state.clock.getElapsedTime();
+    t = state.clock.elapsedTime;
     parentMatrix.copy(instance.current.matrixWorld).invert();
     state.camera.matrixWorld.decompose(cpos, cquat, scale);
     for (index = 0; index < clouds.current.length; index++) {

package/core/ComputedAttribute.js

@@ -2,10 +2,10 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import { BufferAttribute } from 'three';
 
-/**
- * Used exclusively as a child of a BufferGeometry.
- * Computes the BufferAttribute by calling the `compute` function
- * and attaches the attribute to the geometry.
+/**
+ * Used exclusively as a child of a BufferGeometry.
+ * Computes the BufferAttribute by calling the `compute` function
+ * and attaches the attribute to the geometry.
  */
 const ComputedAttribute = ({
   compute,

package/core/Example.js

@@ -3,8 +3,8 @@ import { Text3D } from './Text3D.js';
 import { Center } from './Center.js';
 
 /* eslint react-hooks/exhaustive-deps: 1 */
-/**
- * A simple counter example component. Click to increment, meta-click to decrement.
+/**
+ * A simple counter example component. Click to increment, meta-click to decrement.
  */
 const Example = /* @__PURE__ */React.forwardRef(({
   font,

package/core/Float.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("three");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=n(e),o=n(r);const i=a.forwardRef((({children:e,enabled:r=!0,speed:n=1,rotationIntensity:i=1,floatIntensity:u=1,floatingRange:c=[-.1,.1],autoInvalidate:l=!1,...s},d)=>{const f=a.useRef(null);a.useImperativeHandle(d,(()=>f.current),[]);const p=a.useRef(1e4*Math.random());return t.useFrame((e=>{var t,a;if(!r||0===n)return;l&&e.invalidate();const s=p.current+e.clock.getElapsedTime();f.current.rotation.x=Math.cos(s/4*n)/8*i,f.current.rotation.y=Math.sin(s/4*n)/8*i,f.current.rotation.z=Math.sin(s/4*n)/20*i;let d=Math.sin(s/4*n)/10;d=o.MathUtils.mapLinear(d,-.1,.1,null!==(t=null==c?void 0:c[0])&&void 0!==t?t:-.1,null!==(a=null==c?void 0:c[1])&&void 0!==a?a:.1),f.current.position.y=d*u,f.current.updateMatrix()})),a.createElement("group",s,a.createElement("group",{ref:f,matrixAutoUpdate:!1},e))}));exports.Float=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("three");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=n(e),o=n(r);const i=a.forwardRef((({children:e,enabled:r=!0,speed:n=1,rotationIntensity:i=1,floatIntensity:u=1,floatingRange:c=[-.1,.1],autoInvalidate:l=!1,...s},d)=>{const f=a.useRef(null);a.useImperativeHandle(d,(()=>f.current),[]);const p=a.useRef(1e4*Math.random());return t.useFrame((e=>{var t,a;if(!r||0===n)return;l&&e.invalidate();const s=p.current+e.clock.elapsedTime;f.current.rotation.x=Math.cos(s/4*n)/8*i,f.current.rotation.y=Math.sin(s/4*n)/8*i,f.current.rotation.z=Math.sin(s/4*n)/20*i;let d=Math.sin(s/4*n)/10;d=o.MathUtils.mapLinear(d,-.1,.1,null!==(t=null==c?void 0:c[0])&&void 0!==t?t:-.1,null!==(a=null==c?void 0:c[1])&&void 0!==a?a:.1),f.current.position.y=d*u,f.current.updateMatrix()})),a.createElement("group",s,a.createElement("group",{ref:f,matrixAutoUpdate:!1},e))}));exports.Float=i;

package/core/Float.js

@@ -19,7 +19,7 @@ const Float = /* @__PURE__ */React.forwardRef(({
     var _floatingRange$, _floatingRange$2;
     if (!enabled || speed === 0) return;
     if (autoInvalidate) state.invalidate();
-    const t = offset.current + state.clock.getElapsedTime();
+    const t = offset.current + state.clock.elapsedTime;
     ref.current.rotation.x = Math.cos(t / 4 * speed) / 8 * rotationIntensity;
     ref.current.rotation.y = Math.sin(t / 4 * speed) / 8 * rotationIntensity;
     ref.current.rotation.z = Math.sin(t / 4 * speed) / 20 * rotationIntensity;

package/core/Instances.js

@@ -221,9 +221,9 @@ const Merged = /*#__PURE__*/React.forwardRef(function Merged({
   }, children(instances));
 });
 
-/** Idea and implementation for global instances and instanced attributes by
-/*  Matias Gonzalez Fernandez https://x.com/matiNotFound
-/*  and Paul Henschel https://x.com/0xca0a
+/** Idea and implementation for global instances and instanced attributes by
+/*  Matias Gonzalez Fernandez https://x.com/matiNotFound
+/*  and Paul Henschel https://x.com/0xca0a
 */
 function createInstances() {
   const context = /*#__PURE__*/React.createContext(null);

package/core/MeshDistortMaterial.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),i=require("@react-three/fiber");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=o(e),v=s(t);class n extends r.MeshPhysicalMaterial{constructor(e={}){super(e),this.setValues(e),this._time={value:0},this._distort={value:.4},this._radius={value:1}}onBeforeCompile(e){e.uniforms.time=this._time,e.uniforms.radius=this._radius,e.uniforms.distort=this._distort,e.vertexShader=`\n      uniform float time;\n      uniform float radius;\n      uniform float distort;\n      #define GLSLIFY 1\nvec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}float snoise(vec3 v){const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;i=mod289(i);vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;vec4 sh=-step(h,vec4(0.0));vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));}\n      ${e.vertexShader}\n    `,e.vertexShader=e.vertexShader.replace("#include <begin_vertex>","\n        float updateTime = time / 50.0;\n        float noise = snoise(vec3(position / 2.0 + updateTime * 5.0));\n        vec3 transformed = vec3(position * (noise * pow(distort, 2.0) + radius));\n        ")}get time(){return this._time.value}set time(e){this._time.value=e}get distort(){return this._distort.value}set distort(e){this._distort.value=e}get radius(){return this._radius.value}set radius(e){this._radius.value=e}}const x=v.forwardRef((({speed:e=1,...t},r)=>{const[o]=v.useState((()=>new n));return i.useFrame((t=>o&&(o.time=t.clock.getElapsedTime()*e))),v.createElement("primitive",c.default({object:o,ref:r,attach:"material"},t))}));exports.MeshDistortMaterial=x;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),i=require("@react-three/fiber");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=o(e),v=s(t);class n extends r.MeshPhysicalMaterial{constructor(e={}){super(e),this.setValues(e),this._time={value:0},this._distort={value:.4},this._radius={value:1}}onBeforeCompile(e){e.uniforms.time=this._time,e.uniforms.radius=this._radius,e.uniforms.distort=this._distort,e.vertexShader=`\n      uniform float time;\n      uniform float radius;\n      uniform float distort;\n      #define GLSLIFY 1\nvec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}float snoise(vec3 v){const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;i=mod289(i);vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;vec4 sh=-step(h,vec4(0.0));vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));}\n      ${e.vertexShader}\n    `,e.vertexShader=e.vertexShader.replace("#include <begin_vertex>","\n        float updateTime = time / 50.0;\n        float noise = snoise(vec3(position / 2.0 + updateTime * 5.0));\n        vec3 transformed = vec3(position * (noise * pow(distort, 2.0) + radius));\n        ")}get time(){return this._time.value}set time(e){this._time.value=e}get distort(){return this._distort.value}set distort(e){this._distort.value=e}get radius(){return this._radius.value}set radius(e){this._radius.value=e}}const x=v.forwardRef((({speed:e=1,...t},r)=>{const[o]=v.useState((()=>new n));return i.useFrame((t=>o&&(o.time=t.clock.elapsedTime*e))),v.createElement("primitive",c.default({object:o,ref:r,attach:"material"},t))}));exports.MeshDistortMaterial=x;

package/core/MeshDistortMaterial.js

@@ -61,7 +61,7 @@ const MeshDistortMaterial = /* @__PURE__ */React.forwardRef(({
   ...props
 }, ref) => {
   const [material] = React.useState(() => new DistortMaterialImpl());
-  useFrame(state => material && (material.time = state.clock.getElapsedTime() * speed));
+  useFrame(state => material && (material.time = state.clock.elapsedTime * speed));
   return /*#__PURE__*/React.createElement("primitive", _extends({
     object: material,
     ref: ref,

package/core/MeshTransmissionMaterial.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("@babel/runtime/helpers/extends"),e=require("three"),t=require("react"),a=require("@react-three/fiber"),r=require("./Fbo.cjs.js"),o=require("../materials/DiscardMaterial.cjs.js");function i(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}function s(n){if(n&&n.__esModule)return n;var e=Object.create(null);return n&&Object.keys(n).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:function(){return n[t]}})}})),e.default=n,Object.freeze(e)}require("./shaderMaterial.cjs.js");var l=i(n),c=s(e),m=s(t);class u extends c.MeshPhysicalMaterial{constructor(n=6,e=!1){super(),this.uniforms={chromaticAberration:{value:.05},transmission:{value:0},_transmission:{value:1},transmissionMap:{value:null},roughness:{value:0},thickness:{value:0},thicknessMap:{value:null},attenuationDistance:{value:1/0},attenuationColor:{value:new c.Color("white")},anisotropicBlur:{value:.1},time:{value:0},distortion:{value:0},distortionScale:{value:.5},temporalDistortion:{value:0},buffer:{value:null}},this.onBeforeCompile=t=>{t.uniforms={...t.uniforms,...this.uniforms},this.anisotropy>0&&(t.defines.USE_ANISOTROPY=""),e?t.defines.USE_SAMPLER="":t.defines.USE_TRANSMISSION="",t.fragmentShader="\n      uniform float chromaticAberration;         \n      uniform float anisotropicBlur;      \n      uniform float time;\n      uniform float distortion;\n      uniform float distortionScale;\n      uniform float temporalDistortion;\n      uniform sampler2D buffer;\n\n      vec3 random3(vec3 c) {\n        float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));\n        vec3 r;\n        r.z = fract(512.0*j);\n        j *= .125;\n        r.x = fract(512.0*j);\n        j *= .125;\n        r.y = fract(512.0*j);\n        return r-0.5;\n      }\n\n      uint hash( uint x ) {\n        x += ( x << 10u );\n        x ^= ( x >>  6u );\n        x += ( x <<  3u );\n        x ^= ( x >> 11u );\n        x += ( x << 15u );\n        return x;\n      }\n\n      // Compound versions of the hashing algorithm I whipped together.\n      uint hash( uvec2 v ) { return hash( v.x ^ hash(v.y)                         ); }\n      uint hash( uvec3 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z)             ); }\n      uint hash( uvec4 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z) ^ hash(v.w) ); }\n\n      // Construct a float with half-open range [0:1] using low 23 bits.\n      // All zeroes yields 0.0, all ones yields the next smallest representable value below 1.0.\n      float floatConstruct( uint m ) {\n        const uint ieeeMantissa = 0x007FFFFFu; // binary32 mantissa bitmask\n        const uint ieeeOne      = 0x3F800000u; // 1.0 in IEEE binary32\n        m &= ieeeMantissa;                     // Keep only mantissa bits (fractional part)\n        m |= ieeeOne;                          // Add fractional part to 1.0\n        float  f = uintBitsToFloat( m );       // Range [1:2]\n        return f - 1.0;                        // Range [0:1]\n      }\n\n      // Pseudo-random value in half-open range [0:1].\n      float randomBase( float x ) { return floatConstruct(hash(floatBitsToUint(x))); }\n      float randomBase( vec2  v ) { return floatConstruct(hash(floatBitsToUint(v))); }\n      float randomBase( vec3  v ) { return floatConstruct(hash(floatBitsToUint(v))); }\n      float randomBase( vec4  v ) { return floatConstruct(hash(floatBitsToUint(v))); }\n      float rand(float seed) {\n        float result = randomBase(vec3(gl_FragCoord.xy, seed));\n        return result;\n      }\n\n      const float F3 =  0.3333333;\n      const float G3 =  0.1666667;\n\n      float snoise(vec3 p) {\n        vec3 s = floor(p + dot(p, vec3(F3)));\n        vec3 x = p - s + dot(s, vec3(G3));\n        vec3 e = step(vec3(0.0), x - x.yzx);\n        vec3 i1 = e*(1.0 - e.zxy);\n        vec3 i2 = 1.0 - e.zxy*(1.0 - e);\n        vec3 x1 = x - i1 + G3;\n        vec3 x2 = x - i2 + 2.0*G3;\n        vec3 x3 = x - 1.0 + 3.0*G3;\n        vec4 w, d;\n        w.x = dot(x, x);\n        w.y = dot(x1, x1);\n        w.z = dot(x2, x2);\n        w.w = dot(x3, x3);\n        w = max(0.6 - w, 0.0);\n        d.x = dot(random3(s), x);\n        d.y = dot(random3(s + i1), x1);\n        d.z = dot(random3(s + i2), x2);\n        d.w = dot(random3(s + 1.0), x3);\n        w *= w;\n        w *= w;\n        d *= w;\n        return dot(d, vec4(52.0));\n      }\n\n      float snoiseFractal(vec3 m) {\n        return 0.5333333* snoise(m)\n              +0.2666667* snoise(2.0*m)\n              +0.1333333* snoise(4.0*m)\n              +0.0666667* snoise(8.0*m);\n      }\n"+t.fragmentShader,t.fragmentShader=t.fragmentShader.replace("#include <transmission_pars_fragment>","\n        #ifdef USE_TRANSMISSION\n          // Transmission code is based on glTF-Sampler-Viewer\n          // https://github.com/KhronosGroup/glTF-Sample-Viewer\n          uniform float _transmission;\n          uniform float thickness;\n          uniform float attenuationDistance;\n          uniform vec3 attenuationColor;\n          #ifdef USE_TRANSMISSIONMAP\n            uniform sampler2D transmissionMap;\n          #endif\n          #ifdef USE_THICKNESSMAP\n            uniform sampler2D thicknessMap;\n          #endif\n          uniform vec2 transmissionSamplerSize;\n          uniform sampler2D transmissionSamplerMap;\n          uniform mat4 modelMatrix;\n          uniform mat4 projectionMatrix;\n          varying vec3 vWorldPosition;\n          vec3 getVolumeTransmissionRay( const in vec3 n, const in vec3 v, const in float thickness, const in float ior, const in mat4 modelMatrix ) {\n            // Direction of refracted light.\n            vec3 refractionVector = refract( - v, normalize( n ), 1.0 / ior );\n            // Compute rotation-independant scaling of the model matrix.\n            vec3 modelScale;\n            modelScale.x = length( vec3( modelMatrix[ 0 ].xyz ) );\n            modelScale.y = length( vec3( modelMatrix[ 1 ].xyz ) );\n            modelScale.z = length( vec3( modelMatrix[ 2 ].xyz ) );\n            // The thickness is specified in local space.\n            return normalize( refractionVector ) * thickness * modelScale;\n          }\n          float applyIorToRoughness( const in float roughness, const in float ior ) {\n            // Scale roughness with IOR so that an IOR of 1.0 results in no microfacet refraction and\n            // an IOR of 1.5 results in the default amount of microfacet refraction.\n            return roughness * clamp( ior * 2.0 - 2.0, 0.0, 1.0 );\n          }\n          vec4 getTransmissionSample( const in vec2 fragCoord, const in float roughness, const in float ior ) {\n            float framebufferLod = log2( transmissionSamplerSize.x ) * applyIorToRoughness( roughness, ior );            \n            #ifdef USE_SAMPLER\n              #ifdef texture2DLodEXT\n                return texture2DLodEXT(transmissionSamplerMap, fragCoord.xy, framebufferLod);\n              #else\n                return texture2D(transmissionSamplerMap, fragCoord.xy, framebufferLod);\n              #endif\n            #else\n              return texture2D(buffer, fragCoord.xy);\n            #endif\n          }\n          vec3 applyVolumeAttenuation( const in vec3 radiance, const in float transmissionDistance, const in vec3 attenuationColor, const in float attenuationDistance ) {\n            if ( isinf( attenuationDistance ) ) {\n              // Attenuation distance is +∞, i.e. the transmitted color is not attenuated at all.\n              return radiance;\n            } else {\n              // Compute light attenuation using Beer's law.\n              vec3 attenuationCoefficient = -log( attenuationColor ) / attenuationDistance;\n              vec3 transmittance = exp( - attenuationCoefficient * transmissionDistance ); // Beer's law\n              return transmittance * radiance;\n            }\n          }\n          vec4 getIBLVolumeRefraction( const in vec3 n, const in vec3 v, const in float roughness, const in vec3 diffuseColor,\n            const in vec3 specularColor, const in float specularF90, const in vec3 position, const in mat4 modelMatrix,\n            const in mat4 viewMatrix, const in mat4 projMatrix, const in float ior, const in float thickness,\n            const in vec3 attenuationColor, const in float attenuationDistance ) {\n            vec3 transmissionRay = getVolumeTransmissionRay( n, v, thickness, ior, modelMatrix );\n            vec3 refractedRayExit = position + transmissionRay;\n            // Project refracted vector on the framebuffer, while mapping to normalized device coordinates.\n            vec4 ndcPos = projMatrix * viewMatrix * vec4( refractedRayExit, 1.0 );\n            vec2 refractionCoords = ndcPos.xy / ndcPos.w;\n            refractionCoords += 1.0;\n            refractionCoords /= 2.0;\n            // Sample framebuffer to get pixel the refracted ray hits.\n            vec4 transmittedLight = getTransmissionSample( refractionCoords, roughness, ior );\n            vec3 attenuatedColor = applyVolumeAttenuation( transmittedLight.rgb, length( transmissionRay ), attenuationColor, attenuationDistance );\n            // Get the specular component.\n            vec3 F = EnvironmentBRDF( n, v, specularColor, specularF90, roughness );\n            return vec4( ( 1.0 - F ) * attenuatedColor * diffuseColor, transmittedLight.a );\n          }\n        #endif\n"),t.fragmentShader=t.fragmentShader.replace("#include <transmission_fragment>",`  \n        // Improve the refraction to use the world pos\n        material.transmission = _transmission;\n        material.transmissionAlpha = 1.0;\n        material.thickness = thickness;\n        material.attenuationDistance = attenuationDistance;\n        material.attenuationColor = attenuationColor;\n        #ifdef USE_TRANSMISSIONMAP\n          material.transmission *= texture2D( transmissionMap, vUv ).r;\n        #endif\n        #ifdef USE_THICKNESSMAP\n          material.thickness *= texture2D( thicknessMap, vUv ).g;\n        #endif\n        \n        vec3 pos = vWorldPosition;\n        float runningSeed = 0.0;\n        vec3 v = normalize( cameraPosition - pos );\n        vec3 n = inverseTransformDirection( normal, viewMatrix );\n        vec3 transmission = vec3(0.0);\n        float transmissionR, transmissionB, transmissionG;\n        float randomCoords = rand(runningSeed++);\n        float thickness_smear = thickness * max(pow(roughnessFactor, 0.33), anisotropicBlur);\n        vec3 distortionNormal = vec3(0.0);\n        vec3 temporalOffset = vec3(time, -time, -time) * temporalDistortion;\n        if (distortion > 0.0) {\n          distortionNormal = distortion * vec3(snoiseFractal(vec3((pos * distortionScale + temporalOffset))), snoiseFractal(vec3(pos.zxy * distortionScale - temporalOffset)), snoiseFractal(vec3(pos.yxz * distortionScale + temporalOffset)));\n        }\n        for (float i = 0.0; i < ${n}.0; i ++) {\n          vec3 sampleNorm = normalize(n + roughnessFactor * roughnessFactor * 2.0 * normalize(vec3(rand(runningSeed++) - 0.5, rand(runningSeed++) - 0.5, rand(runningSeed++) - 0.5)) * pow(rand(runningSeed++), 0.33) + distortionNormal);\n          transmissionR = getIBLVolumeRefraction(\n            sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,\n            pos, modelMatrix, viewMatrix, projectionMatrix, material.ior, material.thickness  + thickness_smear * (i + randomCoords) / float(${n}),\n            material.attenuationColor, material.attenuationDistance\n          ).r;\n          transmissionG = getIBLVolumeRefraction(\n            sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,\n            pos, modelMatrix, viewMatrix, projectionMatrix, material.ior  * (1.0 + chromaticAberration * (i + randomCoords) / float(${n})) , material.thickness + thickness_smear * (i + randomCoords) / float(${n}),\n            material.attenuationColor, material.attenuationDistance\n          ).g;\n          transmissionB = getIBLVolumeRefraction(\n            sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,\n            pos, modelMatrix, viewMatrix, projectionMatrix, material.ior * (1.0 + 2.0 * chromaticAberration * (i + randomCoords) / float(${n})), material.thickness + thickness_smear * (i + randomCoords) / float(${n}),\n            material.attenuationColor, material.attenuationDistance\n          ).b;\n          transmission.r += transmissionR;\n          transmission.g += transmissionG;\n          transmission.b += transmissionB;\n        }\n        transmission /= ${n}.0;\n        totalDiffuse = mix( totalDiffuse, transmission.rgb, material.transmission );\n`)},Object.keys(this.uniforms).forEach((n=>Object.defineProperty(this,n,{get:()=>this.uniforms[n].value,set:e=>this.uniforms[n].value=e})))}}const f=m.forwardRef((({buffer:n,transmissionSampler:e=!1,backside:t=!1,side:i=c.FrontSide,transmission:s=1,thickness:f=0,backsideThickness:d=0,backsideEnvMapIntensity:v=1,samples:h=10,resolution:p,backsideResolution:x,background:g,anisotropy:S,anisotropicBlur:M,...b},C)=>{a.extend({MeshTransmissionMaterial:u});const y=m.useRef(null),[w]=m.useState((()=>new o.DiscardMaterial)),k=r.useFBO(x||p),D=r.useFBO(p);let R,T,F,j;return a.useFrame((n=>{var a;(y.current.time=n.clock.getElapsedTime(),y.current.buffer!==D.texture||e)||(j=null==(a=y.current.__r3f.parent)?void 0:a.object,j&&(F=n.gl.toneMapping,R=n.scene.background,T=y.current.envMapIntensity,n.gl.toneMapping=c.NoToneMapping,g&&(n.scene.background=g),j.material=w,t&&(n.gl.setRenderTarget(k),n.gl.render(n.scene,n.camera),j.material=y.current,j.material.buffer=k.texture,j.material.thickness=d,j.material.side=c.BackSide,j.material.envMapIntensity=v),n.gl.setRenderTarget(D),n.gl.render(n.scene,n.camera),j.material=y.current,j.material.thickness=f,j.material.side=i,j.material.buffer=D.texture,j.material.envMapIntensity=T,n.scene.background=R,n.gl.setRenderTarget(null),n.gl.toneMapping=F))})),m.useImperativeHandle(C,(()=>y.current),[]),m.createElement("meshTransmissionMaterial",l.default({args:[h,e],ref:y},b,{buffer:n||D.texture,_transmission:s,anisotropicBlur:null!=M?M:S,transmission:e?s:0,thickness:f,side:i}))}));exports.MeshTransmissionMaterial=f;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("@babel/runtime/helpers/extends"),e=require("three"),t=require("react"),a=require("@react-three/fiber"),r=require("./Fbo.cjs.js"),o=require("../materials/DiscardMaterial.cjs.js");function i(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}function s(n){if(n&&n.__esModule)return n;var e=Object.create(null);return n&&Object.keys(n).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:function(){return n[t]}})}})),e.default=n,Object.freeze(e)}require("./shaderMaterial.cjs.js");var l=i(n),c=s(e),m=s(t);class u extends c.MeshPhysicalMaterial{constructor(n=6,e=!1){super(),this.uniforms={chromaticAberration:{value:.05},transmission:{value:0},_transmission:{value:1},transmissionMap:{value:null},roughness:{value:0},thickness:{value:0},thicknessMap:{value:null},attenuationDistance:{value:1/0},attenuationColor:{value:new c.Color("white")},anisotropicBlur:{value:.1},time:{value:0},distortion:{value:0},distortionScale:{value:.5},temporalDistortion:{value:0},buffer:{value:null}},this.onBeforeCompile=t=>{t.uniforms={...t.uniforms,...this.uniforms},this.anisotropy>0&&(t.defines.USE_ANISOTROPY=""),e?t.defines.USE_SAMPLER="":t.defines.USE_TRANSMISSION="",t.fragmentShader="\n      uniform float chromaticAberration;         \n      uniform float anisotropicBlur;      \n      uniform float time;\n      uniform float distortion;\n      uniform float distortionScale;\n      uniform float temporalDistortion;\n      uniform sampler2D buffer;\n\n      vec3 random3(vec3 c) {\n        float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));\n        vec3 r;\n        r.z = fract(512.0*j);\n        j *= .125;\n        r.x = fract(512.0*j);\n        j *= .125;\n        r.y = fract(512.0*j);\n        return r-0.5;\n      }\n\n      uint hash( uint x ) {\n        x += ( x << 10u );\n        x ^= ( x >>  6u );\n        x += ( x <<  3u );\n        x ^= ( x >> 11u );\n        x += ( x << 15u );\n        return x;\n      }\n\n      // Compound versions of the hashing algorithm I whipped together.\n      uint hash( uvec2 v ) { return hash( v.x ^ hash(v.y)                         ); }\n      uint hash( uvec3 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z)             ); }\n      uint hash( uvec4 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z) ^ hash(v.w) ); }\n\n      // Construct a float with half-open range [0:1] using low 23 bits.\n      // All zeroes yields 0.0, all ones yields the next smallest representable value below 1.0.\n      float floatConstruct( uint m ) {\n        const uint ieeeMantissa = 0x007FFFFFu; // binary32 mantissa bitmask\n        const uint ieeeOne      = 0x3F800000u; // 1.0 in IEEE binary32\n        m &= ieeeMantissa;                     // Keep only mantissa bits (fractional part)\n        m |= ieeeOne;                          // Add fractional part to 1.0\n        float  f = uintBitsToFloat( m );       // Range [1:2]\n        return f - 1.0;                        // Range [0:1]\n      }\n\n      // Pseudo-random value in half-open range [0:1].\n      float randomBase( float x ) { return floatConstruct(hash(floatBitsToUint(x))); }\n      float randomBase( vec2  v ) { return floatConstruct(hash(floatBitsToUint(v))); }\n      float randomBase( vec3  v ) { return floatConstruct(hash(floatBitsToUint(v))); }\n      float randomBase( vec4  v ) { return floatConstruct(hash(floatBitsToUint(v))); }\n      float rand(float seed) {\n        float result = randomBase(vec3(gl_FragCoord.xy, seed));\n        return result;\n      }\n\n      const float F3 =  0.3333333;\n      const float G3 =  0.1666667;\n\n      float snoise(vec3 p) {\n        vec3 s = floor(p + dot(p, vec3(F3)));\n        vec3 x = p - s + dot(s, vec3(G3));\n        vec3 e = step(vec3(0.0), x - x.yzx);\n        vec3 i1 = e*(1.0 - e.zxy);\n        vec3 i2 = 1.0 - e.zxy*(1.0 - e);\n        vec3 x1 = x - i1 + G3;\n        vec3 x2 = x - i2 + 2.0*G3;\n        vec3 x3 = x - 1.0 + 3.0*G3;\n        vec4 w, d;\n        w.x = dot(x, x);\n        w.y = dot(x1, x1);\n        w.z = dot(x2, x2);\n        w.w = dot(x3, x3);\n        w = max(0.6 - w, 0.0);\n        d.x = dot(random3(s), x);\n        d.y = dot(random3(s + i1), x1);\n        d.z = dot(random3(s + i2), x2);\n        d.w = dot(random3(s + 1.0), x3);\n        w *= w;\n        w *= w;\n        d *= w;\n        return dot(d, vec4(52.0));\n      }\n\n      float snoiseFractal(vec3 m) {\n        return 0.5333333* snoise(m)\n              +0.2666667* snoise(2.0*m)\n              +0.1333333* snoise(4.0*m)\n              +0.0666667* snoise(8.0*m);\n      }\n"+t.fragmentShader,t.fragmentShader=t.fragmentShader.replace("#include <transmission_pars_fragment>","\n        #ifdef USE_TRANSMISSION\n          // Transmission code is based on glTF-Sampler-Viewer\n          // https://github.com/KhronosGroup/glTF-Sample-Viewer\n          uniform float _transmission;\n          uniform float thickness;\n          uniform float attenuationDistance;\n          uniform vec3 attenuationColor;\n          #ifdef USE_TRANSMISSIONMAP\n            uniform sampler2D transmissionMap;\n          #endif\n          #ifdef USE_THICKNESSMAP\n            uniform sampler2D thicknessMap;\n          #endif\n          uniform vec2 transmissionSamplerSize;\n          uniform sampler2D transmissionSamplerMap;\n          uniform mat4 modelMatrix;\n          uniform mat4 projectionMatrix;\n          varying vec3 vWorldPosition;\n          vec3 getVolumeTransmissionRay( const in vec3 n, const in vec3 v, const in float thickness, const in float ior, const in mat4 modelMatrix ) {\n            // Direction of refracted light.\n            vec3 refractionVector = refract( - v, normalize( n ), 1.0 / ior );\n            // Compute rotation-independant scaling of the model matrix.\n            vec3 modelScale;\n            modelScale.x = length( vec3( modelMatrix[ 0 ].xyz ) );\n            modelScale.y = length( vec3( modelMatrix[ 1 ].xyz ) );\n            modelScale.z = length( vec3( modelMatrix[ 2 ].xyz ) );\n            // The thickness is specified in local space.\n            return normalize( refractionVector ) * thickness * modelScale;\n          }\n          float applyIorToRoughness( const in float roughness, const in float ior ) {\n            // Scale roughness with IOR so that an IOR of 1.0 results in no microfacet refraction and\n            // an IOR of 1.5 results in the default amount of microfacet refraction.\n            return roughness * clamp( ior * 2.0 - 2.0, 0.0, 1.0 );\n          }\n          vec4 getTransmissionSample( const in vec2 fragCoord, const in float roughness, const in float ior ) {\n            float framebufferLod = log2( transmissionSamplerSize.x ) * applyIorToRoughness( roughness, ior );            \n            #ifdef USE_SAMPLER\n              #ifdef texture2DLodEXT\n                return texture2DLodEXT(transmissionSamplerMap, fragCoord.xy, framebufferLod);\n              #else\n                return texture2D(transmissionSamplerMap, fragCoord.xy, framebufferLod);\n              #endif\n            #else\n              return texture2D(buffer, fragCoord.xy);\n            #endif\n          }\n          vec3 applyVolumeAttenuation( const in vec3 radiance, const in float transmissionDistance, const in vec3 attenuationColor, const in float attenuationDistance ) {\n            if ( isinf( attenuationDistance ) ) {\n              // Attenuation distance is +∞, i.e. the transmitted color is not attenuated at all.\n              return radiance;\n            } else {\n              // Compute light attenuation using Beer's law.\n              vec3 attenuationCoefficient = -log( attenuationColor ) / attenuationDistance;\n              vec3 transmittance = exp( - attenuationCoefficient * transmissionDistance ); // Beer's law\n              return transmittance * radiance;\n            }\n          }\n          vec4 getIBLVolumeRefraction( const in vec3 n, const in vec3 v, const in float roughness, const in vec3 diffuseColor,\n            const in vec3 specularColor, const in float specularF90, const in vec3 position, const in mat4 modelMatrix,\n            const in mat4 viewMatrix, const in mat4 projMatrix, const in float ior, const in float thickness,\n            const in vec3 attenuationColor, const in float attenuationDistance ) {\n            vec3 transmissionRay = getVolumeTransmissionRay( n, v, thickness, ior, modelMatrix );\n            vec3 refractedRayExit = position + transmissionRay;\n            // Project refracted vector on the framebuffer, while mapping to normalized device coordinates.\n            vec4 ndcPos = projMatrix * viewMatrix * vec4( refractedRayExit, 1.0 );\n            vec2 refractionCoords = ndcPos.xy / ndcPos.w;\n            refractionCoords += 1.0;\n            refractionCoords /= 2.0;\n            // Sample framebuffer to get pixel the refracted ray hits.\n            vec4 transmittedLight = getTransmissionSample( refractionCoords, roughness, ior );\n            vec3 attenuatedColor = applyVolumeAttenuation( transmittedLight.rgb, length( transmissionRay ), attenuationColor, attenuationDistance );\n            // Get the specular component.\n            vec3 F = EnvironmentBRDF( n, v, specularColor, specularF90, roughness );\n            return vec4( ( 1.0 - F ) * attenuatedColor * diffuseColor, transmittedLight.a );\n          }\n        #endif\n"),t.fragmentShader=t.fragmentShader.replace("#include <transmission_fragment>",`  \n        // Improve the refraction to use the world pos\n        material.transmission = _transmission;\n        material.transmissionAlpha = 1.0;\n        material.thickness = thickness;\n        material.attenuationDistance = attenuationDistance;\n        material.attenuationColor = attenuationColor;\n        #ifdef USE_TRANSMISSIONMAP\n          material.transmission *= texture2D( transmissionMap, vUv ).r;\n        #endif\n        #ifdef USE_THICKNESSMAP\n          material.thickness *= texture2D( thicknessMap, vUv ).g;\n        #endif\n        \n        vec3 pos = vWorldPosition;\n        float runningSeed = 0.0;\n        vec3 v = normalize( cameraPosition - pos );\n        vec3 n = inverseTransformDirection( normal, viewMatrix );\n        vec3 transmission = vec3(0.0);\n        float transmissionR, transmissionB, transmissionG;\n        float randomCoords = rand(runningSeed++);\n        float thickness_smear = thickness * max(pow(roughnessFactor, 0.33), anisotropicBlur);\n        vec3 distortionNormal = vec3(0.0);\n        vec3 temporalOffset = vec3(time, -time, -time) * temporalDistortion;\n        if (distortion > 0.0) {\n          distortionNormal = distortion * vec3(snoiseFractal(vec3((pos * distortionScale + temporalOffset))), snoiseFractal(vec3(pos.zxy * distortionScale - temporalOffset)), snoiseFractal(vec3(pos.yxz * distortionScale + temporalOffset)));\n        }\n        for (float i = 0.0; i < ${n}.0; i ++) {\n          vec3 sampleNorm = normalize(n + roughnessFactor * roughnessFactor * 2.0 * normalize(vec3(rand(runningSeed++) - 0.5, rand(runningSeed++) - 0.5, rand(runningSeed++) - 0.5)) * pow(rand(runningSeed++), 0.33) + distortionNormal);\n          transmissionR = getIBLVolumeRefraction(\n            sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,\n            pos, modelMatrix, viewMatrix, projectionMatrix, material.ior, material.thickness  + thickness_smear * (i + randomCoords) / float(${n}),\n            material.attenuationColor, material.attenuationDistance\n          ).r;\n          transmissionG = getIBLVolumeRefraction(\n            sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,\n            pos, modelMatrix, viewMatrix, projectionMatrix, material.ior  * (1.0 + chromaticAberration * (i + randomCoords) / float(${n})) , material.thickness + thickness_smear * (i + randomCoords) / float(${n}),\n            material.attenuationColor, material.attenuationDistance\n          ).g;\n          transmissionB = getIBLVolumeRefraction(\n            sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,\n            pos, modelMatrix, viewMatrix, projectionMatrix, material.ior * (1.0 + 2.0 * chromaticAberration * (i + randomCoords) / float(${n})), material.thickness + thickness_smear * (i + randomCoords) / float(${n}),\n            material.attenuationColor, material.attenuationDistance\n          ).b;\n          transmission.r += transmissionR;\n          transmission.g += transmissionG;\n          transmission.b += transmissionB;\n        }\n        transmission /= ${n}.0;\n        totalDiffuse = mix( totalDiffuse, transmission.rgb, material.transmission );\n`)},Object.keys(this.uniforms).forEach((n=>Object.defineProperty(this,n,{get:()=>this.uniforms[n].value,set:e=>this.uniforms[n].value=e})))}}const f=m.forwardRef((({buffer:n,transmissionSampler:e=!1,backside:t=!1,side:i=c.FrontSide,transmission:s=1,thickness:f=0,backsideThickness:d=0,backsideEnvMapIntensity:v=1,samples:h=10,resolution:p,backsideResolution:x,background:g,anisotropy:S,anisotropicBlur:M,...b},C)=>{a.extend({MeshTransmissionMaterial:u});const y=m.useRef(null),[w]=m.useState((()=>new o.DiscardMaterial)),k=r.useFBO(x||p),D=r.useFBO(p);let R,T,F,j;return a.useFrame((n=>{var a;(y.current.time=n.clock.elapsedTime,y.current.buffer!==D.texture||e)||(j=null==(a=y.current.__r3f.parent)?void 0:a.object,j&&(F=n.gl.toneMapping,R=n.scene.background,T=y.current.envMapIntensity,n.gl.toneMapping=c.NoToneMapping,g&&(n.scene.background=g),j.material=w,t&&(n.gl.setRenderTarget(k),n.gl.render(n.scene,n.camera),j.material=y.current,j.material.buffer=k.texture,j.material.thickness=d,j.material.side=c.BackSide,j.material.envMapIntensity=v),n.gl.setRenderTarget(D),n.gl.render(n.scene,n.camera),j.material=y.current,j.material.thickness=f,j.material.side=i,j.material.buffer=D.texture,j.material.envMapIntensity=T,n.scene.background=R,n.gl.setRenderTarget(null),n.gl.toneMapping=F))})),m.useImperativeHandle(C,(()=>y.current),[]),m.createElement("meshTransmissionMaterial",l.default({args:[h,e],ref:y},b,{buffer:n||D.texture,_transmission:s,anisotropicBlur:null!=M?M:S,transmission:e?s:0,thickness:f,side:i}))}));exports.MeshTransmissionMaterial=f;

package/core/MeshTransmissionMaterial.js

@@ -331,7 +331,7 @@ const MeshTransmissionMaterial = /* @__PURE__ */React.forwardRef(({
   let oldTone;
   let parent;
   useFrame(state => {
-    ref.current.time = state.clock.getElapsedTime();
+    ref.current.time = state.clock.elapsedTime;
     // Render only if the buffer matches the built-in and no transmission sampler is set
     if (ref.current.buffer === fboMain.texture && !transmissionSampler) {
       var _r3f$parent;

package/core/MeshWobbleMaterial.cjs.js

@@ -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");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(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)}var n=i(e),s=o(t);class c extends r.MeshStandardMaterial{constructor(e={}){super(e),this.setValues(e),this._time={value:0},this._factor={value:1}}onBeforeCompile(e){e.uniforms.time=this._time,e.uniforms.factor=this._factor,e.vertexShader=`\n      uniform float time;\n      uniform float factor;\n      ${e.vertexShader}\n    `,e.vertexShader=e.vertexShader.replace("#include <begin_vertex>","float theta = sin( time + position.y ) / 2.0 * factor;\n        float c = cos( theta );\n        float s = sin( theta );\n        mat3 m = mat3( c, 0, s, 0, 1, 0, -s, 0, c );\n        vec3 transformed = vec3( position ) * m;\n        vNormal = vNormal * m;")}get time(){return this._time.value}set time(e){this._time.value=e}get factor(){return this._factor.value}set factor(e){this._factor.value=e}}const u=s.forwardRef((({speed:e=1,...t},r)=>{const[i]=s.useState((()=>new c));return a.useFrame((t=>i&&(i.time=t.clock.getElapsedTime()*e))),s.createElement("primitive",n.default({object:i,ref:r,attach:"material"},t))}));exports.MeshWobbleMaterial=u;
+"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");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(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)}var n=i(e),s=o(t);class c extends r.MeshStandardMaterial{constructor(e={}){super(e),this.setValues(e),this._time={value:0},this._factor={value:1}}onBeforeCompile(e){e.uniforms.time=this._time,e.uniforms.factor=this._factor,e.vertexShader=`\n      uniform float time;\n      uniform float factor;\n      ${e.vertexShader}\n    `,e.vertexShader=e.vertexShader.replace("#include <begin_vertex>","float theta = sin( time + position.y ) / 2.0 * factor;\n        float c = cos( theta );\n        float s = sin( theta );\n        mat3 m = mat3( c, 0, s, 0, 1, 0, -s, 0, c );\n        vec3 transformed = vec3( position ) * m;\n        vNormal = vNormal * m;")}get time(){return this._time.value}set time(e){this._time.value=e}get factor(){return this._factor.value}set factor(e){this._factor.value=e}}const u=s.forwardRef((({speed:e=1,...t},r)=>{const[i]=s.useState((()=>new c));return a.useFrame((t=>i&&(i.time=t.clock.elapsedTime*e))),s.createElement("primitive",n.default({object:i,ref:r,attach:"material"},t))}));exports.MeshWobbleMaterial=u;

package/core/MeshWobbleMaterial.js

@@ -49,7 +49,7 @@ const MeshWobbleMaterial = /* @__PURE__ */React.forwardRef(({
   ...props
 }, ref) => {
   const [material] = React.useState(() => new WobbleMaterialImpl());
-  useFrame(state => material && (material.time = state.clock.getElapsedTime() * speed));
+  useFrame(state => material && (material.time = state.clock.elapsedTime * speed));
   return /*#__PURE__*/React.createElement("primitive", _extends({
     object: material,
     ref: ref,

package/core/MotionPathControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("maath");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=u(e),a=c(t),i=c(r);const f=i.createContext(null);function l(){return i.useContext(f)}function p({points:e=50}){const{path:t}=l(),[r,n]=i.useState([]),[o]=i.useState((()=>new a.MeshBasicMaterial({color:"black"}))),[u]=i.useState((()=>new a.SphereGeometry(.025,16,16))),c=i.useRef([]);return i.useEffect((()=>{t.curves!==c.current&&(n(t.getPoints(e)),c.current=t.curves)})),i.createElement(i.Fragment,null,r.map(((e,t)=>i.createElement("mesh",{key:t,material:o,geometry:u,position:[e.x,e.y,e.z]}))))}const m=i.forwardRef((({children:e,curves:t=[],object:r,debug:u=!1,smooth:c=!1,focus:l,offset:m,eps:d=1e-5,damping:g=.1,focusDamping:v=.1,maxSpeed:h=1/0,...b},j)=>{const{camera:y}=n.useThree(),P=i.useRef(null),[w]=i.useState((()=>new a.CurvePath)),x=i.useRef(null!=m?m:0),O=i.useMemo((()=>({focus:l,object:(null==r?void 0:r.current)instanceof a.Object3D?r:{current:y},path:w,current:x.current,offset:x.current,point:new a.Vector3,tangent:new a.Vector3,next:new a.Vector3})),[l,r]);i.useLayoutEffect((()=>{w.curves=[];const e=t.length>0?t:P.current.__r3f.children.map((e=>e.object));for(var r=0;r<e.length;r++)w.add(e[r]);if(c){const e=w.getPoints("number"==typeof c?c:1),t=new a.CatmullRomCurve3(e);w.curves=[t]}w.updateArcLengths()})),i.useImperativeHandle(j,(()=>P.current),[]),i.useLayoutEffect((()=>{x.current=o.misc.repeat(x.current,1)}),[m]);let E=0;const[C]=i.useState((()=>new a.Vector3));return n.useFrame(((e,t)=>{if(E=O.offset,o.easing.damp(x,"current",void 0!==m?m:O.current,g,t,h,void 0,d),O.offset=o.misc.repeat(x.current,1),w.getCurveLengths().length>0){w.getPointAt(O.offset,O.point),w.getTangentAt(O.offset,O.tangent).normalize(),w.getPointAt(o.misc.repeat(x.current-(E-O.offset),1),O.next);const e=(null==r?void 0:r.current)instanceof a.Object3D?r.current:y;e.position.copy(O.point),l&&o.easing.dampLookAt(e,(e=>(null==e?void 0:e.current)instanceof a.Object3D)(l)?l.current.getWorldPosition(C):l,v,t,h,void 0,d)}})),i.createElement("group",s.default({ref:P},b),i.createElement(f.Provider,{value:O},e,u&&i.createElement(p,null)))}));exports.MotionPathControls=m,exports.useMotion=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("maath");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=c(e),a=u(t),i=u(r);const f=i.createContext(null);function l(){const e=i.useContext(f);if(!e)throw new Error("useMotion hook must be used in a MotionPathControls component.");return e}function m({points:e=50,color:t="black"}){const{path:r}=l(),[n,o]=i.useState([]),c=i.useMemo((()=>new a.MeshBasicMaterial({color:t})),[t]),u=i.useMemo((()=>new a.SphereGeometry(.025,16,16)),[]),s=i.useRef([]);return i.useEffect((()=>{r.curves!==s.current&&(o(r.getPoints(e)),s.current=r.curves)})),n.map(((e,t)=>i.createElement("mesh",{key:t,material:c,geometry:u,position:[e.x,e.y,e.z]})))}const p=i.forwardRef((({children:e,curves:t=[],debug:r=!1,debugColor:c="black",object:u,focus:l,loop:p=!0,offset:d,smooth:g=!1,eps:b=1e-5,damping:h=.1,focusDamping:v=.1,maxSpeed:j=1/0,...y},M)=>{const{camera:w}=n.useThree(),P=i.useRef(null),O=i.useRef(null!=d?d:0),x=i.useMemo((()=>new a.CurvePath),[]),C=i.useMemo((()=>({focus:l,object:(null==u?void 0:u.current)instanceof a.Object3D?u:{current:w},path:x,current:O.current,offset:O.current,point:new a.Vector3,tangent:new a.Vector3,next:new a.Vector3})),[l,u]),E=n.useInstanceHandle(P);i.useLayoutEffect((()=>{const e=E.current;x.curves=[];const r=t.length>0?t:e.children.map((e=>e.object));for(let e=0;e<r.length;e++)x.add(r[e]);if(g){const e=x.getPoints("number"==typeof g?g:1),t=new a.CatmullRomCurve3(e);x.curves=[t]}x.updateArcLengths()})),i.useImperativeHandle(M,(()=>Object.assign(P.current,{motion:C})),[C]),i.useLayoutEffect((()=>{O.current=o.misc.repeat(O.current,1)}),[d]);const k=i.useMemo((()=>new a.Vector3),[]);return n.useFrame(((e,t)=>{const r=C.offset;if(o.easing.damp(O,"current",void 0!==d?d:C.current,h,t,j,void 0,b),C.offset=p?o.misc.repeat(O.current,1):o.misc.clamp(O.current,0,1),x.getCurveLengths().length>0){x.getPointAt(C.offset,C.point),x.getTangentAt(C.offset,C.tangent).normalize(),x.getPointAt(o.misc.repeat(O.current-(r-C.offset),1),C.next);const e=(null==u?void 0:u.current)instanceof a.Object3D?u.current:w;e.position.copy(C.point),l&&o.easing.dampLookAt(e,(e=>(null==e?void 0:e.current)instanceof a.Object3D)(l)?l.current.getWorldPosition(k):l,v,t,j,void 0,b)}})),i.createElement("group",s.default({ref:P},y),i.createElement(f.Provider,{value:C},e,r&&i.createElement(m,{color:c})))}));exports.MotionPathControls=p,exports.useMotion=l;

package/core/MotionPathControls.d.ts

@@ -1,11 +1,13 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import { ThreeElements } from '@react-three/fiber';
-export type MotionPathProps = Omit<ThreeElements['group'], 'ref'> & {
+export type MotionPathProps = ThreeElements['group'] & {
     curves?: THREE.Curve<THREE.Vector3>[];
     debug?: boolean;
+    debugColor?: THREE.ColorRepresentation;
     object?: React.RefObject<THREE.Object3D>;
     focus?: [x: number, y: number, z: number] | React.RefObject<THREE.Object3D>;
+    loop?: boolean;
     offset?: number;
     smooth?: boolean | number;
     eps?: number;
@@ -23,17 +25,9 @@ type MotionState = {
     tangent: THREE.Vector3;
     next: THREE.Vector3;
 };
+export type MotionPathRef = THREE.Group & {
+    motion: MotionState;
+};
 export declare function useMotion(): MotionState;
-export declare const MotionPathControls: React.ForwardRefExoticComponent<Omit<import("@react-three/fiber/dist/declarations/src/core/utils").Mutable<import("@react-three/fiber/dist/declarations/src/core/utils").Overwrite<Partial<import("@react-three/fiber/dist/declarations/src/core/utils").Overwrite<THREE.Group<THREE.Object3DEventMap>, import("@react-three/fiber").MathProps<THREE.Group<THREE.Object3DEventMap>> & import("@react-three/fiber").ReactProps<THREE.Group<THREE.Object3DEventMap>> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<THREE.Group<THREE.Object3DEventMap>, typeof THREE.Group>, "object">>>, "ref"> & {
-    curves?: THREE.Curve<THREE.Vector3>[];
-    debug?: boolean;
-    object?: React.RefObject<THREE.Object3D>;
-    focus?: [x: number, y: number, z: number] | React.RefObject<THREE.Object3D>;
-    offset?: number;
-    smooth?: boolean | number;
-    eps?: number;
-    damping?: number;
-    focusDamping?: number;
-    maxSpeed?: number;
-} & React.RefAttributes<THREE.Group<THREE.Object3DEventMap>>>;
+export declare const MotionPathControls: React.ForwardRefExoticComponent<Omit<MotionPathProps, "ref"> & React.RefAttributes<MotionPathRef>>;
 export {};

package/core/MotionPathControls.js

@@ -1,25 +1,28 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as THREE from 'three';
 import * as React from 'react';
-import { useThree, useFrame } from '@react-three/fiber';
+import { useThree, useInstanceHandle, useFrame } from '@react-three/fiber';
 import { misc, easing } from 'maath';
 
 const isObject3DRef = ref => (ref == null ? void 0 : ref.current) instanceof THREE.Object3D;
-const context = /* @__PURE__ */React.createContext(null);
+const MotionContext = /* @__PURE__ */React.createContext(null);
 function useMotion() {
-  return React.useContext(context);
+  const context = React.useContext(MotionContext);
+  if (!context) throw new Error('useMotion hook must be used in a MotionPathControls component.');
+  return context;
 }
 function Debug({
-  points = 50
+  points = 50,
+  color = 'black'
 }) {
   const {
     path
   } = useMotion();
   const [dots, setDots] = React.useState([]);
-  const [material] = React.useState(() => new THREE.MeshBasicMaterial({
-    color: 'black'
-  }));
-  const [geometry] = React.useState(() => new THREE.SphereGeometry(0.025, 16, 16));
+  const material = React.useMemo(() => new THREE.MeshBasicMaterial({
+    color: color
+  }), [color]);
+  const geometry = React.useMemo(() => new THREE.SphereGeometry(0.025, 16, 16), []);
   const last = React.useRef([]);
   React.useEffect(() => {
     if (path.curves !== last.current) {
@@ -27,21 +30,23 @@ function Debug({
       last.current = path.curves;
     }
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, dots.map((item, index) => /*#__PURE__*/React.createElement("mesh", {
+  return dots.map((item, index) => /*#__PURE__*/React.createElement("mesh", {
     key: index,
     material: material,
     geometry: geometry,
     position: [item.x, item.y, item.z]
-  })));
+  }));
 }
 const MotionPathControls = /* @__PURE__ */React.forwardRef(({
   children,
   curves = [],
-  object,
   debug = false,
-  smooth = false,
+  debugColor = 'black',
+  object,
   focus,
+  loop = true,
   offset = undefined,
+  smooth = false,
   eps = 0.00001,
   damping = 0.1,
   focusDamping = 0.1,
@@ -52,8 +57,8 @@ const MotionPathControls = /* @__PURE__ */React.forwardRef(({
     camera
   } = useThree();
   const ref = React.useRef(null);
-  const [path] = React.useState(() => new THREE.CurvePath());
   const pos = React.useRef(offset !== null && offset !== void 0 ? offset : 0);
+  const path = React.useMemo(() => new THREE.CurvePath(), []);
   const state = React.useMemo(() => ({
     focus,
     object: (object == null ? void 0 : object.current) instanceof THREE.Object3D ? object : {
@@ -66,12 +71,14 @@ const MotionPathControls = /* @__PURE__ */React.forwardRef(({
     tangent: new THREE.Vector3(),
     next: new THREE.Vector3()
   }), [focus, object]);
+  const instanceRef = useInstanceHandle(ref);
   React.useLayoutEffect(() => {
+    const instance = instanceRef.current;
     path.curves = [];
-    const _curves = curves.length > 0 ? curves : ref.current.__r3f.children.map(instance => instance.object);
-    for (var i = 0; i < _curves.length; i++) path.add(_curves[i]);
+    const _curves = curves.length > 0 ? curves : instance.children.map(instance => instance.object);
+    for (let i = 0; i < _curves.length; i++) path.add(_curves[i]);
 
-    //Smoothen curve
+    // Smoothen curve
     if (smooth) {
       const points = path.getPoints(typeof smooth === 'number' ? smooth : 1);
       const catmull = new THREE.CatmullRomCurve3(points);
@@ -79,24 +86,24 @@ const MotionPathControls = /* @__PURE__ */React.forwardRef(({
     }
     path.updateArcLengths();
   });
-  React.useImperativeHandle(fref, () => ref.current, []);
+  React.useImperativeHandle(fref, () => Object.assign(ref.current, {
+    motion: state
+  }), [state]);
   React.useLayoutEffect(() => {
     // When offset changes, normalise pos to avoid overshoot spinning
     pos.current = misc.repeat(pos.current, 1);
   }, [offset]);
-  let last = 0;
-  const [vec] = React.useState(() => new THREE.Vector3());
+  const vec = React.useMemo(() => new THREE.Vector3(), []);
   useFrame((_state, delta) => {
-    last = state.offset;
+    const lastOffset = state.offset;
     easing.damp(pos, 'current', offset !== undefined ? offset : state.current, damping, delta, maxSpeed, undefined, eps);
-    state.offset = misc.repeat(pos.current, 1);
+    state.offset = loop ? misc.repeat(pos.current, 1) : misc.clamp(pos.current, 0, 1);
     if (path.getCurveLengths().length > 0) {
       path.getPointAt(state.offset, state.point);
       path.getTangentAt(state.offset, state.tangent).normalize();
-      path.getPointAt(misc.repeat(pos.current - (last - state.offset), 1), state.next);
+      path.getPointAt(misc.repeat(pos.current - (lastOffset - state.offset), 1), state.next);
       const target = (object == null ? void 0 : object.current) instanceof THREE.Object3D ? object.current : camera;
       target.position.copy(state.point);
-      //@ts-ignore
       if (focus) {
         easing.dampLookAt(target, isObject3DRef(focus) ? focus.current.getWorldPosition(vec) : focus, focusDamping, delta, maxSpeed, undefined, eps);
       }
@@ -104,9 +111,11 @@ const MotionPathControls = /* @__PURE__ */React.forwardRef(({
   });
   return /*#__PURE__*/React.createElement("group", _extends({
     ref: ref
-  }, props), /*#__PURE__*/React.createElement(context.Provider, {
+  }, props), /*#__PURE__*/React.createElement(MotionContext.Provider, {
     value: state
-  }, children, debug && /*#__PURE__*/React.createElement(Debug, null)));
+  }, children, debug && /*#__PURE__*/React.createElement(Debug, {
+    color: debugColor
+  })));
 });
 
 export { MotionPathControls, useMotion };

package/core/Points.js

@@ -62,8 +62,8 @@ const context = /* @__PURE__ */React.createContext(null);
 const parentMatrix = /* @__PURE__ */new THREE.Matrix4();
 const position = /* @__PURE__ */new THREE.Vector3();
 
-/**
- * Instance implementation, relies on react + context to update the attributes based on the children of this component
+/**
+ * Instance implementation, relies on react + context to update the attributes based on the children of this component
  */
 const PointsInstances = /* @__PURE__ */React.forwardRef(({
   children,
@@ -151,8 +151,8 @@ const Point = /* @__PURE__ */React.forwardRef(({
   }, props), children);
 });
 
-/**
- * Buffer implementation, relies on complete buffers of the correct number, leaves it to the user to update them
+/**
+ * Buffer implementation, relies on complete buffers of the correct number, leaves it to the user to update them
  */
 
 const PointsBuffer = /* @__PURE__ */React.forwardRef(({

package/core/ScreenSizer.js

@@ -6,18 +6,18 @@ import { Vector3 } from 'three';
 import { calculateScaleFactor } from './calculateScaleFactor.js';
 
 const worldPos = /* @__PURE__ */new Vector3();
-/**
- * Wraps children in an `Object3D` and attempts to scale from
- * world units to screen units * scale factor.
- *
- * For example, this will render a box of roughly 1x1 pixel size,
- * independently of how far the camera is.
- *
- * ```jsx
- * <ScreenSizer>
- *   <Box />
- * </ScreenSizer>
- * ```
+/**
+ * Wraps children in an `Object3D` and attempts to scale from
+ * world units to screen units * scale factor.
+ *
+ * For example, this will render a box of roughly 1x1 pixel size,
+ * independently of how far the camera is.
+ *
+ * ```jsx
+ * <ScreenSizer>
+ *   <Box />
+ * </ScreenSizer>
+ * ```
  */
 const ScreenSizer = /* @__PURE__ */forwardRef(({
   scale = 1,

package/core/ShadowAlpha.js

@@ -2,14 +2,14 @@ import { useFrame } from '@react-three/fiber';
 import * as React from 'react';
 import * as THREE from 'three';
 
-/**
- * Integration and compilation: Faraz Shaikh (https://twitter.com/CantBeFaraz)
- *
- * Based on:
- *  - https://gkjohnson.github.io/threejs-sandbox/screendoor-transparency/ by Garrett Johnson (https://github.com/gkjohnson)
- *
- * Note:
- *  - Must depreciate in favor of https://github.com/mrdoob/three.js/issues/10600 when it's ready.
+/**
+ * Integration and compilation: Faraz Shaikh (https://twitter.com/CantBeFaraz)
+ *
+ * Based on:
+ *  - https://gkjohnson.github.io/threejs-sandbox/screendoor-transparency/ by Garrett Johnson (https://github.com/gkjohnson)
+ *
+ * Note:
+ *  - Must depreciate in favor of https://github.com/mrdoob/three.js/issues/10600 when it's ready.
  */
 function ShadowAlpha({
   opacity,

package/core/Stars.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("three"),n=require("../helpers/constants.cjs.js");function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=a(e);class i extends r.ShaderMaterial{constructor(){super({uniforms:{time:{value:0},fade:{value:1}},vertexShader:"\n      uniform float time;\n      attribute float size;\n      varying vec3 vColor;\n      void main() {\n        vColor = color;\n        vec4 mvPosition = modelViewMatrix * vec4(position, 0.5);\n        gl_PointSize = size * (30.0 / -mvPosition.z) * (3.0 + sin(time + 100.0));\n        gl_Position = projectionMatrix * mvPosition;\n      }",fragmentShader:`\n      uniform sampler2D pointTexture;\n      uniform float fade;\n      varying vec3 vColor;\n      void main() {\n        float opacity = 1.0;\n        if (fade == 1.0) {\n          float d = distance(gl_PointCoord, vec2(0.5, 0.5));\n          opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));\n        }\n        gl_FragColor = vec4(vColor, opacity);\n\n        #include <tonemapping_fragment>\n\t      #include <${n.version>=154?"colorspace_fragment":"encodings_fragment"}>\n      }`})}}const c=e=>(new r.Vector3).setFromSpherical(new r.Spherical(e,Math.acos(1-2*Math.random()),2*Math.random()*Math.PI)),s=o.forwardRef((({radius:e=100,depth:n=50,count:a=5e3,saturation:s=0,factor:l=4,fade:u=!1,speed:f=1},m)=>{const d=o.useRef(null),[p,v,g]=o.useMemo((()=>{const t=[],o=[],i=Array.from({length:a},(()=>(.5+.5*Math.random())*l)),u=new r.Color;let f=e+n;const m=n/a;for(let e=0;e<a;e++)f-=m*Math.random(),t.push(...c(f).toArray()),u.setHSL(e/a,s,.9),o.push(u.r,u.g,u.b);return[new Float32Array(t),new Float32Array(o),new Float32Array(i)]}),[a,n,l,e,s]);t.useFrame((e=>d.current&&(d.current.uniforms.time.value=e.clock.getElapsedTime()*f)));const[h]=o.useState((()=>new i));return o.createElement("points",{ref:m},o.createElement("bufferGeometry",null,o.createElement("bufferAttribute",{attach:"attributes-position",args:[p,3]}),o.createElement("bufferAttribute",{attach:"attributes-color",args:[v,3]}),o.createElement("bufferAttribute",{attach:"attributes-size",args:[g,1]})),o.createElement("primitive",{ref:d,object:h,attach:"material",blending:r.AdditiveBlending,"uniforms-fade-value":u,depthWrite:!1,transparent:!0,vertexColors:!0}))}));exports.Stars=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("three"),n=require("../helpers/constants.cjs.js");function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=a(e);class i extends r.ShaderMaterial{constructor(){super({uniforms:{time:{value:0},fade:{value:1}},vertexShader:"\n      uniform float time;\n      attribute float size;\n      varying vec3 vColor;\n      void main() {\n        vColor = color;\n        vec4 mvPosition = modelViewMatrix * vec4(position, 0.5);\n        gl_PointSize = size * (30.0 / -mvPosition.z) * (3.0 + sin(time + 100.0));\n        gl_Position = projectionMatrix * mvPosition;\n      }",fragmentShader:`\n      uniform sampler2D pointTexture;\n      uniform float fade;\n      varying vec3 vColor;\n      void main() {\n        float opacity = 1.0;\n        if (fade == 1.0) {\n          float d = distance(gl_PointCoord, vec2(0.5, 0.5));\n          opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));\n        }\n        gl_FragColor = vec4(vColor, opacity);\n\n        #include <tonemapping_fragment>\n\t      #include <${n.version>=154?"colorspace_fragment":"encodings_fragment"}>\n      }`})}}const c=e=>(new r.Vector3).setFromSpherical(new r.Spherical(e,Math.acos(1-2*Math.random()),2*Math.random()*Math.PI)),s=o.forwardRef((({radius:e=100,depth:n=50,count:a=5e3,saturation:s=0,factor:l=4,fade:u=!1,speed:f=1},m)=>{const d=o.useRef(null),[p,v,h]=o.useMemo((()=>{const t=[],o=[],i=Array.from({length:a},(()=>(.5+.5*Math.random())*l)),u=new r.Color;let f=e+n;const m=n/a;for(let e=0;e<a;e++)f-=m*Math.random(),t.push(...c(f).toArray()),u.setHSL(e/a,s,.9),o.push(u.r,u.g,u.b);return[new Float32Array(t),new Float32Array(o),new Float32Array(i)]}),[a,n,l,e,s]);t.useFrame((e=>d.current&&(d.current.uniforms.time.value=e.clock.elapsedTime*f)));const[g]=o.useState((()=>new i));return o.createElement("points",{ref:m},o.createElement("bufferGeometry",null,o.createElement("bufferAttribute",{attach:"attributes-position",args:[p,3]}),o.createElement("bufferAttribute",{attach:"attributes-color",args:[v,3]}),o.createElement("bufferAttribute",{attach:"attributes-size",args:[h,1]})),o.createElement("primitive",{ref:d,object:g,attach:"material",blending:r.AdditiveBlending,"uniforms-fade-value":u,depthWrite:!1,transparent:!0,vertexColors:!0}))}));exports.Stars=s;

package/core/Stars.js

@@ -72,7 +72,7 @@ const Stars = /* @__PURE__ */React.forwardRef(({
     }
     return [new Float32Array(positions), new Float32Array(colors), new Float32Array(sizes)];
   }, [count, depth, factor, radius, saturation]);
-  useFrame(state => material.current && (material.current.uniforms.time.value = state.clock.getElapsedTime() * speed));
+  useFrame(state => material.current && (material.current.uniforms.time.value = state.clock.elapsedTime * speed));
   const [starfieldMaterial] = React.useState(() => new StarfieldMaterial());
   return /*#__PURE__*/React.createElement("points", {
     ref: ref

package/core/Text3D.js

@@ -51,9 +51,9 @@ const Text3D = /* @__PURE__ */React.forwardRef(({
     };
   }, [font, size, height, bevelThickness, bevelSize, bevelEnabled, bevelSegments, bevelOffset, curveSegments, letterSpacing, lineHeight]);
 
-  /**
-   * We need the `children` in the deps because we
-   * need to be able to do `<Text3d>{state}</Text3d>`.
+  /**
+   * We need the `children` in the deps because we
+   * need to be able to do `<Text3d>{state}</Text3d>`.
    */
   const [label, ...rest] = useMemo(() => getTextFromChildren(children), [children]);
   const args = React.useMemo(() => [label, opts], [label, opts]);