@react-three/drei 9.84.2 → 9.85.0

package/README.md

@@ -4476,16 +4476,49 @@ attribute vec3 color;
 
 Particle based cloud.
 
-👉 Note: `<Cloud />` component is not meant to be used in production environments as it relies on third-party CDN.
+```tsx
+type CloudsProps = JSX.IntrinsicElements['group'] & {
+  /** Optional cloud texture, points to a default hosted on rawcdn.githack */
+  texture?: string
+  /** Maximum number of segments, default: 200 (make this tight to save memory!) */
+  limit?: number
+  /** How many segments it renders, default: undefined (all) */
+  range?: number
+  /** Which material it will override, default: MeshLambertMaterial */
+  material?: typeof Material
+}
+
+type CloudProps = JSX.IntrinsicElements['group'] & {
+  /** A seeded random will show the same cloud consistently, default: Math.random() */
+  seed?: number
+  /** How many segments or particles the cloud will have, default: 20 */
+  segments?: number
+  /** The box3 bounds of the cloud, default: [5, 1, 1] */
+  bounds?: ReactThreeFiber.Vector3
+  /** The general scale of the segments */
+  scale?: ReactThreeFiber.Vector3
+  /** The volume/thickness of the segments, default: 6 */
+  volume?: number
+  /** Growth factor for animated clouds (speed > 0), default: 4 */
+  growth?: number
+  /** Animation factor, default: 0.1 */
+  speed?: number
+  /** Camera distance until the segments will fade, default: 10 */
+  fade?: number
+  /** Opacity, default: 0.8 */
+  opacity?: number
+  /** Color, default: white */
+  color?: ReactThreeFiber.Color
+}
+```
+
+Use the `<Clouds>` provider to glob all clouds into a single, instanced draw call.
 
 ```jsx
-<Cloud
-  opacity={0.5}
-  speed={0.4} // Rotation speed
-  width={10} // Width of the full cloud
-  depth={1.5} // Z-dir depth
-  segments={20} // Number of particles
-/>
+<Clouds material={THREE.MeshBasicMaterial}>
+  <Cloud segments={40} bounds={[10, 2, 2]} volume={10} color="orange" />
+  <Cloud seed={1} scale={2} volume={5} color="hotpink" fade={100} />
+</Clouds>
 ```
 
 #### useEnvironment

package/core/AccumulativeShadows.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"),a=require("@react-three/fiber"),i=require("./shaderMaterial.cjs.js"),s=require("../materials/DiscardMaterial.cjs.js");function n(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 l=n(e),h=o(t),c=o(r);const u=c.createContext(null),d=i.shaderMaterial({color:new h.Color,blend:2,alphaTest:.75,opacity:0,map:null},"varying vec2 vUv;\n   void main() {\n     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n     vUv = uv;\n   }",`varying vec2 vUv;\n   uniform sampler2D map;\n   uniform vec3 color;\n   uniform float opacity;\n   uniform float alphaTest;\n   uniform float blend;\n   void main() {\n     vec4 sampledDiffuseColor = texture2D(map, vUv);\n     gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);\n     #include <tonemapping_fragment>\n     #include <${parseInt(h.REVISION.replace(/\D+/g,""))>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`),p=c.forwardRef((({children:e,temporal:t,frames:r=40,limit:i=1/0,blend:s=20,scale:n=10,opacity:o=1,alphaTest:l=.75,color:h="black",colorBlend:p=2,resolution:g=1024,toneMapped:m=!0,...v},M)=>{a.extend({SoftShadowMaterial:d});const b=a.useThree((e=>e.gl)),w=a.useThree((e=>e.scene)),y=a.useThree((e=>e.camera)),S=a.useThree((e=>e.invalidate)),x=c.useRef(null),C=c.useRef(null),[j]=c.useState((()=>new f(b,w,g)));c.useLayoutEffect((()=>{j.configure(x.current)}),[]);const E=c.useMemo((()=>({lights:new Map,temporal:!!t,frames:Math.max(2,r),blend:Math.max(2,r===1/0?s:r),count:0,getMesh:()=>x.current,reset:()=>{j.clear();const e=x.current.material;e.opacity=0,e.alphaTest=0,E.count=0},update:(e=1)=>{const t=x.current.material;E.temporal?(t.opacity=Math.min(o,t.opacity+o/E.blend),t.alphaTest=Math.min(l,t.alphaTest+l/E.blend)):(t.opacity=o,t.alphaTest=l),C.current.visible=!0,j.prepare();for(let t=0;t<e;t++)E.lights.forEach((e=>e.update())),j.update(y,E.blend);C.current.visible=!1,j.finish()}})),[j,y,w,t,r,s,o,l]);return c.useLayoutEffect((()=>{E.reset(),E.temporal||E.frames===1/0||E.update(E.blend)})),c.useImperativeHandle(M,(()=>E),[E]),a.useFrame((()=>{(E.temporal||E.frames===1/0)&&E.count<E.frames&&E.count<i&&(S(),E.update(),E.count++)})),c.createElement("group",v,c.createElement("group",{traverse:()=>null,ref:C},c.createElement(u.Provider,{value:E},e)),c.createElement("mesh",{receiveShadow:!0,ref:x,scale:n,rotation:[-Math.PI/2,0,0]},c.createElement("planeGeometry",null),c.createElement("softShadowMaterial",{transparent:!0,depthWrite:!1,toneMapped:m,color:h,blend:p,map:j.progressiveLightMap2.texture})))})),g=c.forwardRef((({castShadow:e=!0,bias:t=.001,mapSize:r=512,size:a=5,near:i=.5,far:s=500,frames:n=1,position:o=[0,0,0],radius:d=1,amount:p=8,intensity:g=(parseInt(h.REVISION.replace(/\D+/g,""))>=155?Math.PI:1),ambient:f=.5,...m},v)=>{const M=c.useRef(null),b=new h.Vector3(...o).length(),w=c.useContext(u),y=c.useCallback((()=>{let e;if(M.current)for(let t=0;t<M.current.children.length;t++)if(e=M.current.children[t],Math.random()>f)e.position.set(o[0]+h.MathUtils.randFloatSpread(d),o[1]+h.MathUtils.randFloatSpread(d),o[2]+h.MathUtils.randFloatSpread(d));else{let t=Math.acos(2*Math.random()-1)-Math.PI/2,r=2*Math.PI*Math.random();e.position.set(Math.cos(t)*Math.cos(r)*b,Math.abs(Math.cos(t)*Math.sin(r)*b),Math.sin(t)*b)}}),[d,f,b,...o]),S=c.useMemo((()=>({update:y})),[y]);return c.useImperativeHandle(v,(()=>S),[S]),c.useLayoutEffect((()=>{const e=M.current;return w&&w.lights.set(e.uuid,S),()=>{w.lights.delete(e.uuid)}}),[w,S]),c.createElement("group",l.default({ref:M},m),Array.from({length:p},((n,o)=>c.createElement("directionalLight",{key:o,castShadow:e,"shadow-bias":t,"shadow-mapSize":[r,r],intensity:g/p},c.createElement("orthographicCamera",{attach:"shadow-camera",args:[-a,a,a,-a,i,s]})))))}));class f{constructor(e,t,r=1024){this.renderer=e,this.res=r,this.scene=t,this.buffer1Active=!1,this.lights=[],this.meshes=[],this.object=null,this.clearColor=new h.Color,this.clearAlpha=0;const a={type:h.HalfFloatType,magFilter:h.NearestFilter,minFilter:h.NearestFilter};this.progressiveLightMap1=new h.WebGLRenderTarget(this.res,this.res,a),this.progressiveLightMap2=new h.WebGLRenderTarget(this.res,this.res,a),this.discardMat=new s.DiscardMaterial,this.targetMat=new h.MeshLambertMaterial({fog:!1}),this.previousShadowMap={value:this.progressiveLightMap1.texture},this.averagingWindow={value:100},this.targetMat.onBeforeCompile=e=>{e.vertexShader="varying vec2 vUv;\n"+e.vertexShader.slice(0,-1)+"vUv = uv; gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }";const t=e.fragmentShader.indexOf("void main() {");e.fragmentShader="varying vec2 vUv;\n"+e.fragmentShader.slice(0,t)+"uniform sampler2D previousShadowMap;\n\tuniform float averagingWindow;\n"+e.fragmentShader.slice(t-1,-1)+"\nvec3 texelOld = texture2D(previousShadowMap, vUv).rgb;\n        gl_FragColor.rgb = mix(texelOld, gl_FragColor.rgb, 1.0/ averagingWindow);\n      }",e.uniforms.previousShadowMap=this.previousShadowMap,e.uniforms.averagingWindow=this.averagingWindow}}clear(){this.renderer.getClearColor(this.clearColor),this.clearAlpha=this.renderer.getClearAlpha(),this.renderer.setClearColor("black",1),this.renderer.setRenderTarget(this.progressiveLightMap1),this.renderer.clear(),this.renderer.setRenderTarget(this.progressiveLightMap2),this.renderer.clear(),this.renderer.setRenderTarget(null),this.renderer.setClearColor(this.clearColor,this.clearAlpha),this.lights=[],this.meshes=[],this.scene.traverse((e=>{!function(e){return!!e.geometry}(e)?function(e){return e.isLight}(e)&&this.lights.push({object:e,intensity:e.intensity}):this.meshes.push({object:e,material:e.material})}))}prepare(){this.lights.forEach((e=>e.object.intensity=0)),this.meshes.forEach((e=>e.object.material=this.discardMat))}finish(){this.lights.forEach((e=>e.object.intensity=e.intensity)),this.meshes.forEach((e=>e.object.material=e.material))}configure(e){this.object=e}update(e,t=100){if(!this.object)return;this.averagingWindow.value=t,this.object.material=this.targetMat;const r=this.buffer1Active?this.progressiveLightMap1:this.progressiveLightMap2,a=this.buffer1Active?this.progressiveLightMap2:this.progressiveLightMap1,i=this.scene.background;this.scene.background=null,this.renderer.setRenderTarget(r),this.previousShadowMap.value=a.texture,this.buffer1Active=!this.buffer1Active,this.renderer.render(this.scene,e),this.renderer.setRenderTarget(null),this.scene.background=i}}exports.AccumulativeShadows=p,exports.RandomizedLight=g,exports.accumulativeContext=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),a=require("@react-three/fiber"),i=require("./shaderMaterial.cjs.js"),s=require("../materials/DiscardMaterial.cjs.js"),n=require("../helpers/constants.cjs.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var h=o(e),c=l(t),u=l(r);const d=u.createContext(null),p=i.shaderMaterial({color:new c.Color,blend:2,alphaTest:.75,opacity:0,map:null},"varying vec2 vUv;\n   void main() {\n     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n     vUv = uv;\n   }",`varying vec2 vUv;\n   uniform sampler2D map;\n   uniform vec3 color;\n   uniform float opacity;\n   uniform float alphaTest;\n   uniform float blend;\n   void main() {\n     vec4 sampledDiffuseColor = texture2D(map, vUv);\n     gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);\n     #include <tonemapping_fragment>\n     #include <${n.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`),f=u.forwardRef((({children:e,temporal:t,frames:r=40,limit:i=1/0,blend:s=20,scale:n=10,opacity:o=1,alphaTest:l=.75,color:h="black",colorBlend:c=2,resolution:f=1024,toneMapped:g=!0,...v},M)=>{a.extend({SoftShadowMaterial:p});const b=a.useThree((e=>e.gl)),w=a.useThree((e=>e.scene)),y=a.useThree((e=>e.camera)),x=a.useThree((e=>e.invalidate)),C=u.useRef(null),S=u.useRef(null),[j]=u.useState((()=>new m(b,w,f)));u.useLayoutEffect((()=>{j.configure(C.current)}),[]);const T=u.useMemo((()=>({lights:new Map,temporal:!!t,frames:Math.max(2,r),blend:Math.max(2,r===1/0?s:r),count:0,getMesh:()=>C.current,reset:()=>{j.clear();const e=C.current.material;e.opacity=0,e.alphaTest=0,T.count=0},update:(e=1)=>{const t=C.current.material;T.temporal?(t.opacity=Math.min(o,t.opacity+o/T.blend),t.alphaTest=Math.min(l,t.alphaTest+l/T.blend)):(t.opacity=o,t.alphaTest=l),S.current.visible=!0,j.prepare();for(let t=0;t<e;t++)T.lights.forEach((e=>e.update())),j.update(y,T.blend);S.current.visible=!1,j.finish()}})),[j,y,w,t,r,s,o,l]);return u.useLayoutEffect((()=>{T.reset(),T.temporal||T.frames===1/0||T.update(T.blend)})),u.useImperativeHandle(M,(()=>T),[T]),a.useFrame((()=>{(T.temporal||T.frames===1/0)&&T.count<T.frames&&T.count<i&&(x(),T.update(),T.count++)})),u.createElement("group",v,u.createElement("group",{traverse:()=>null,ref:S},u.createElement(d.Provider,{value:T},e)),u.createElement("mesh",{receiveShadow:!0,ref:C,scale:n,rotation:[-Math.PI/2,0,0]},u.createElement("planeGeometry",null),u.createElement("softShadowMaterial",{transparent:!0,depthWrite:!1,toneMapped:g,color:h,blend:c,map:j.progressiveLightMap2.texture})))})),g=u.forwardRef((({castShadow:e=!0,bias:t=.001,mapSize:r=512,size:a=5,near:i=.5,far:s=500,frames:o=1,position:l=[0,0,0],radius:p=1,amount:f=8,intensity:g=(n.version>=155?Math.PI:1),ambient:m=.5,...v},M)=>{const b=u.useRef(null),w=new c.Vector3(...l).length(),y=u.useContext(d),x=u.useCallback((()=>{let e;if(b.current)for(let t=0;t<b.current.children.length;t++)if(e=b.current.children[t],Math.random()>m)e.position.set(l[0]+c.MathUtils.randFloatSpread(p),l[1]+c.MathUtils.randFloatSpread(p),l[2]+c.MathUtils.randFloatSpread(p));else{let t=Math.acos(2*Math.random()-1)-Math.PI/2,r=2*Math.PI*Math.random();e.position.set(Math.cos(t)*Math.cos(r)*w,Math.abs(Math.cos(t)*Math.sin(r)*w),Math.sin(t)*w)}}),[p,m,w,...l]),C=u.useMemo((()=>({update:x})),[x]);return u.useImperativeHandle(M,(()=>C),[C]),u.useLayoutEffect((()=>{const e=b.current;return y&&y.lights.set(e.uuid,C),()=>{y.lights.delete(e.uuid)}}),[y,C]),u.createElement("group",h.default({ref:b},v),Array.from({length:f},((n,o)=>u.createElement("directionalLight",{key:o,castShadow:e,"shadow-bias":t,"shadow-mapSize":[r,r],intensity:g/f},u.createElement("orthographicCamera",{attach:"shadow-camera",args:[-a,a,a,-a,i,s]})))))}));class m{constructor(e,t,r=1024){this.renderer=e,this.res=r,this.scene=t,this.buffer1Active=!1,this.lights=[],this.meshes=[],this.object=null,this.clearColor=new c.Color,this.clearAlpha=0;const a={type:c.HalfFloatType,magFilter:c.NearestFilter,minFilter:c.NearestFilter};this.progressiveLightMap1=new c.WebGLRenderTarget(this.res,this.res,a),this.progressiveLightMap2=new c.WebGLRenderTarget(this.res,this.res,a),this.discardMat=new s.DiscardMaterial,this.targetMat=new c.MeshLambertMaterial({fog:!1}),this.previousShadowMap={value:this.progressiveLightMap1.texture},this.averagingWindow={value:100},this.targetMat.onBeforeCompile=e=>{e.vertexShader="varying vec2 vUv;\n"+e.vertexShader.slice(0,-1)+"vUv = uv; gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }";const t=e.fragmentShader.indexOf("void main() {");e.fragmentShader="varying vec2 vUv;\n"+e.fragmentShader.slice(0,t)+"uniform sampler2D previousShadowMap;\n\tuniform float averagingWindow;\n"+e.fragmentShader.slice(t-1,-1)+"\nvec3 texelOld = texture2D(previousShadowMap, vUv).rgb;\n        gl_FragColor.rgb = mix(texelOld, gl_FragColor.rgb, 1.0/ averagingWindow);\n      }",e.uniforms.previousShadowMap=this.previousShadowMap,e.uniforms.averagingWindow=this.averagingWindow}}clear(){this.renderer.getClearColor(this.clearColor),this.clearAlpha=this.renderer.getClearAlpha(),this.renderer.setClearColor("black",1),this.renderer.setRenderTarget(this.progressiveLightMap1),this.renderer.clear(),this.renderer.setRenderTarget(this.progressiveLightMap2),this.renderer.clear(),this.renderer.setRenderTarget(null),this.renderer.setClearColor(this.clearColor,this.clearAlpha),this.lights=[],this.meshes=[],this.scene.traverse((e=>{!function(e){return!!e.geometry}(e)?function(e){return e.isLight}(e)&&this.lights.push({object:e,intensity:e.intensity}):this.meshes.push({object:e,material:e.material})}))}prepare(){this.lights.forEach((e=>e.object.intensity=0)),this.meshes.forEach((e=>e.object.material=this.discardMat))}finish(){this.lights.forEach((e=>e.object.intensity=e.intensity)),this.meshes.forEach((e=>e.object.material=e.material))}configure(e){this.object=e}update(e,t=100){if(!this.object)return;this.averagingWindow.value=t,this.object.material=this.targetMat;const r=this.buffer1Active?this.progressiveLightMap1:this.progressiveLightMap2,a=this.buffer1Active?this.progressiveLightMap2:this.progressiveLightMap1,i=this.scene.background;this.scene.background=null,this.renderer.setRenderTarget(r),this.previousShadowMap.value=a.texture,this.buffer1Active=!this.buffer1Active,this.renderer.render(this.scene,e),this.renderer.setRenderTarget(null),this.scene.background=i}}exports.AccumulativeShadows=f,exports.RandomizedLight=g,exports.accumulativeContext=d;

package/core/AccumulativeShadows.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { extend, useThree, useFrame } from '@react-three/fiber';
 import { shaderMaterial } from './shaderMaterial.js';
 import { DiscardMaterial } from '../materials/DiscardMaterial.js';
+import { version } from '../helpers/constants.js';
 
 function isLight(object) {
   return object.isLight;
@@ -11,9 +12,9 @@ function isLight(object) {
 function isGeometry(object) {
   return !!object.geometry;
 }
-const accumulativeContext = /*#__PURE__*/React.createContext(null);
-const SoftShadowMaterial = shaderMaterial({
-  color: new THREE.Color(),
+const accumulativeContext = /*@__PURE__*/React.createContext(null);
+const SoftShadowMaterial = /*@__PURE__*/shaderMaterial({
+  color: /*@__PURE__*/new THREE.Color(),
   blend: 2.0,
   alphaTest: 0.75,
   opacity: 0,
@@ -32,9 +33,9 @@ const SoftShadowMaterial = shaderMaterial({
      vec4 sampledDiffuseColor = texture2D(map, vUv);
      gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);
      #include <tonemapping_fragment>
-     #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+     #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
    }`);
-const AccumulativeShadows = /*#__PURE__*/React.forwardRef(({
+const AccumulativeShadows = /*@__PURE__*/React.forwardRef(({
   children,
   temporal,
   frames = 40,
@@ -139,7 +140,7 @@ const AccumulativeShadows = /*#__PURE__*/React.forwardRef(({
     map: plm.progressiveLightMap2.texture
   })));
 });
-const RandomizedLight = /*#__PURE__*/React.forwardRef(({
+const RandomizedLight = /*@__PURE__*/React.forwardRef(({
   castShadow = true,
   bias = 0.001,
   mapSize = 512,
@@ -150,7 +151,7 @@ const RandomizedLight = /*#__PURE__*/React.forwardRef(({
   position = [0, 0, 0],
   radius = 1,
   amount = 8,
-  intensity = parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 155 ? Math.PI : 1,
+  intensity = version >= 155 ? Math.PI : 1,
   ambient = 0.5,
   ...props
 }, forwardRef) => {

package/core/ArcballControls.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { forwardRef, useMemo, useEffect } from 'react';
 import { ArcballControls as ArcballControls$1 } from 'three-stdlib';
 
-const ArcballControls = /*#__PURE__*/forwardRef(({
+const ArcballControls = /*@__PURE__*/forwardRef(({
   camera,
   makeDefault,
   regress,

package/core/BBAnchor.js

@@ -3,8 +3,8 @@ import * as React from 'react';
 import * as THREE from 'three';
 import { useFrame } from '@react-three/fiber';
 
-const boundingBox = new THREE.Box3();
-const boundingBoxSize = new THREE.Vector3();
+const boundingBox = /*@__PURE__*/new THREE.Box3();
+const boundingBoxSize = /*@__PURE__*/new THREE.Vector3();
 const BBAnchor = ({
   anchor,
   ...props

package/core/Billboard.js

@@ -12,7 +12,7 @@ import mergeRefs from 'react-merge-refs';
  * </Billboard>
  * ```
  */
-const Billboard = /*#__PURE__*/React.forwardRef(function Billboard({
+const Billboard = /*@__PURE__*/React.forwardRef(function Billboard({
   follow = true,
   lockX = false,
   lockY = false,

package/core/Bounds.js

@@ -4,7 +4,7 @@ import { useThree, useFrame } from '@react-three/fiber';
 
 const isOrthographic = def => def && def.isOrthographicCamera;
 const isBox3 = def => def && def.isBox3;
-const context = /*#__PURE__*/React.createContext(null);
+const context = /*@__PURE__*/React.createContext(null);
 function Bounds({
   children,
   damping = 6,

package/core/CameraControls.js

@@ -5,7 +5,7 @@ import { forwardRef, useMemo, useEffect } from 'react';
 import { extend, useThree, useFrame } from '@react-three/fiber';
 import CameraControlsImpl from 'camera-controls';
 
-const CameraControls = /*#__PURE__*/forwardRef((props, ref) => {
+const CameraControls = /*@__PURE__*/forwardRef((props, ref) => {
   // useMemo is used here instead of useEffect, otherwise the useMemo below runs first and throws
   useMemo(() => {
     // to allow for tree shaking, we only import the subset of THREE that is used by camera-controls

package/core/CameraShake.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useThree, useFrame } from '@react-three/fiber';
 import { SimplexNoise } from 'three-stdlib';
 
-const CameraShake = /*#__PURE__*/React.forwardRef(({
+const CameraShake = /*@__PURE__*/React.forwardRef(({
   intensity = 1,
   decay,
   decayRate = 0.65,

package/core/CatmullRomLine.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Vector3, CatmullRomCurve3, Color } from 'three';
 import { Line } from './Line.js';
 
-const CatmullRomLine = /*#__PURE__*/React.forwardRef(function CatmullRomLine({
+const CatmullRomLine = /*@__PURE__*/React.forwardRef(function CatmullRomLine({
   points,
   closed = false,
   curveType = 'centripetal',

package/core/Caustics.cjs.js

@@ -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"),o=require("./useFBO.cjs.js"),i=require("./useHelper.cjs.js"),a=require("./shaderMaterial.cjs.js"),l=require("./Edges.cjs.js"),c=require("three-stdlib");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(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 d=s(e),m=u(r),p=u(t);function v(e=m.FrontSide){const r={value:new m.Matrix4};return Object.assign(new m.MeshNormalMaterial({side:e}),{viewMatrix:r,onBeforeCompile:e=>{e.uniforms.viewMatrix=r,e.fragmentShader="vec3 inverseTransformDirection( in vec3 dir, in mat4 matrix ) {\n           return normalize( ( vec4( dir, 0.0 ) * matrix ).xyz );\n         }\n"+e.fragmentShader.replace("#include <normal_fragment_maps>","#include <normal_fragment_maps>\n           normal = inverseTransformDirection( normal, viewMatrix );\n")}})}const f=a.shaderMaterial({causticsTexture:null,causticsTextureB:null,color:new m.Color,lightProjMatrix:new m.Matrix4,lightViewMatrix:new m.Matrix4},"varying vec3 vWorldPosition;   \n   void main() {\n     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n     vec4 worldPosition = modelMatrix * vec4(position, 1.);\n     vWorldPosition = worldPosition.xyz;\n   }",`varying vec3 vWorldPosition;\n  uniform vec3 color;\n  uniform sampler2D causticsTexture; \n  uniform sampler2D causticsTextureB; \n  uniform mat4 lightProjMatrix;\n  uniform mat4 lightViewMatrix;\n   void main() {\n    // Apply caustics  \n    vec4 lightSpacePos = lightProjMatrix * lightViewMatrix * vec4(vWorldPosition, 1.0);\n    lightSpacePos.xyz /= lightSpacePos.w;\n    lightSpacePos.xyz = lightSpacePos.xyz * 0.5 + 0.5; \n    vec3 front = texture2D(causticsTexture, lightSpacePos.xy).rgb;\n    vec3 back = texture2D(causticsTextureB, lightSpacePos.xy).rgb;\n    gl_FragColor = vec4((front + back) * color, 1.0);\n    #include <tonemapping_fragment>\n    #include <${parseInt(m.REVISION.replace(/\D+/g,""))>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`),x=a.shaderMaterial({cameraMatrixWorld:new m.Matrix4,cameraProjectionMatrixInv:new m.Matrix4,normalTexture:null,depthTexture:null,lightDir:new m.Vector3(0,1,0),lightPlaneNormal:new m.Vector3(0,1,0),lightPlaneConstant:0,near:.1,far:100,modelMatrix:new m.Matrix4,worldRadius:1/40,ior:1.1,bounces:0,resolution:1024,size:10,intensity:.5},"\n  varying vec2 vUv;\n  void main() {\n      vUv = uv;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n  }","  \n  uniform mat4 cameraMatrixWorld;\n  uniform mat4 cameraProjectionMatrixInv;\n  uniform vec3 lightDir;\n  uniform vec3 lightPlaneNormal;\n  uniform float lightPlaneConstant;\n  uniform float near;\n  uniform float far;\n  uniform float time;\n  uniform float worldRadius;\n  uniform float resolution;\n  uniform float size;\n  uniform float intensity;\n  uniform float ior;\n  precision highp isampler2D;\n  precision highp usampler2D;\n  uniform sampler2D normalTexture;\n  uniform sampler2D depthTexture;\n  uniform float bounces;\n  varying vec2 vUv;\n  vec3 WorldPosFromDepth(float depth, vec2 coord) {\n    float z = depth * 2.0 - 1.0;\n    vec4 clipSpacePosition = vec4(coord * 2.0 - 1.0, z, 1.0);\n    vec4 viewSpacePosition = cameraProjectionMatrixInv * clipSpacePosition;\n    // Perspective division\n    viewSpacePosition /= viewSpacePosition.w;\n    vec4 worldSpacePosition = cameraMatrixWorld * viewSpacePosition;\n    return worldSpacePosition.xyz;\n  }                  \n  float sdPlane( vec3 p, vec3 n, float h ) {\n    // n must be normalized\n    return dot(p,n) + h;\n  }\n  float planeIntersect( vec3 ro, vec3 rd, vec4 p ) {\n    return -(dot(ro,p.xyz)+p.w)/dot(rd,p.xyz);\n  }\n  vec3 totalInternalReflection(vec3 ro, vec3 rd, vec3 pos, vec3 normal, float ior, out vec3 rayOrigin, out vec3 rayDirection) {\n    rayOrigin = ro;\n    rayDirection = rd;\n    rayDirection = refract(rayDirection, normal, 1.0 / ior);\n    rayOrigin = pos + rayDirection * 0.1;\n    return rayDirection;\n  }\n  void main() {\n    // Each sample consists of random offset in the x and y direction\n    float caustic = 0.0;\n    float causticTexelSize = (1.0 / resolution) * size * 2.0;\n    float texelsNeeded = worldRadius / causticTexelSize;\n    float sampleRadius = texelsNeeded / resolution;\n    float sum = 0.0;\n    if (texture2D(depthTexture, vUv).x == 1.0) {\n      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n      return;\n    }\n    vec2 offset1 = vec2(-0.5, -0.5);//vec2(rand() - 0.5, rand() - 0.5);\n    vec2 offset2 = vec2(-0.5, 0.5);//vec2(rand() - 0.5, rand() - 0.5);\n    vec2 offset3 = vec2(0.5, 0.5);//vec2(rand() - 0.5, rand() - 0.5);\n    vec2 offset4 = vec2(0.5, -0.5);//vec2(rand() - 0.5, rand() - 0.5);\n    vec2 uv1 = vUv + offset1 * sampleRadius;\n    vec2 uv2 = vUv + offset2 * sampleRadius;\n    vec2 uv3 = vUv + offset3 * sampleRadius;\n    vec2 uv4 = vUv + offset4 * sampleRadius;\n    vec3 normal1 = texture2D(normalTexture, uv1, -10.0).rgb * 2.0 - 1.0;\n    vec3 normal2 = texture2D(normalTexture, uv2, -10.0).rgb * 2.0 - 1.0;\n    vec3 normal3 = texture2D(normalTexture, uv3, -10.0).rgb * 2.0 - 1.0;\n    vec3 normal4 = texture2D(normalTexture, uv4, -10.0).rgb * 2.0 - 1.0;\n    float depth1 = texture2D(depthTexture, uv1, -10.0).x;\n    float depth2 = texture2D(depthTexture, uv2, -10.0).x;\n    float depth3 = texture2D(depthTexture, uv3, -10.0).x;\n    float depth4 = texture2D(depthTexture, uv4, -10.0).x;\n    // Sanity check the depths\n    if (depth1 == 1.0 || depth2 == 1.0 || depth3 == 1.0 || depth4 == 1.0) {\n      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n      return;\n    }\n    vec3 pos1 = WorldPosFromDepth(depth1, uv1);\n    vec3 pos2 = WorldPosFromDepth(depth2, uv2);\n    vec3 pos3 = WorldPosFromDepth(depth3, uv3);\n    vec3 pos4 = WorldPosFromDepth(depth4, uv4);\n    vec3 originPos1 = WorldPosFromDepth(0.0, uv1);\n    vec3 originPos2 = WorldPosFromDepth(0.0, uv2);\n    vec3 originPos3 = WorldPosFromDepth(0.0, uv3);\n    vec3 originPos4 = WorldPosFromDepth(0.0, uv4);\n    vec3 endPos1, endPos2, endPos3, endPos4;\n    vec3 endDir1, endDir2, endDir3, endDir4;\n    totalInternalReflection(originPos1, lightDir, pos1, normal1, ior, endPos1, endDir1);\n    totalInternalReflection(originPos2, lightDir, pos2, normal2, ior, endPos2, endDir2);\n    totalInternalReflection(originPos3, lightDir, pos3, normal3, ior, endPos3, endDir3);\n    totalInternalReflection(originPos4, lightDir, pos4, normal4, ior, endPos4, endDir4);\n    float lightPosArea = length(cross(originPos2 - originPos1, originPos3 - originPos1)) + length(cross(originPos3 - originPos1, originPos4 - originPos1));\n    float t1 = planeIntersect(endPos1, endDir1, vec4(lightPlaneNormal, lightPlaneConstant));\n    float t2 = planeIntersect(endPos2, endDir2, vec4(lightPlaneNormal, lightPlaneConstant));\n    float t3 = planeIntersect(endPos3, endDir3, vec4(lightPlaneNormal, lightPlaneConstant));\n    float t4 = planeIntersect(endPos4, endDir4, vec4(lightPlaneNormal, lightPlaneConstant));\n    vec3 finalPos1 = endPos1 + endDir1 * t1;\n    vec3 finalPos2 = endPos2 + endDir2 * t2;\n    vec3 finalPos3 = endPos3 + endDir3 * t3;\n    vec3 finalPos4 = endPos4 + endDir4 * t4;\n    float finalArea = length(cross(finalPos2 - finalPos1, finalPos3 - finalPos1)) + length(cross(finalPos3 - finalPos1, finalPos4 - finalPos1));\n    caustic += intensity * (lightPosArea / finalArea);\n    // Calculate the area of the triangle in light spaces\n    gl_FragColor = vec4(vec3(max(caustic, 0.0)), 1.0);\n  }"),h={depth:!0,minFilter:m.LinearFilter,magFilter:m.LinearFilter,type:m.UnsignedByteType},g={minFilter:m.LinearMipmapLinearFilter,magFilter:m.LinearFilter,type:m.FloatType,generateMipmaps:!0},P=p.forwardRef((({debug:e,children:r,frames:t=1,ior:a=1.1,color:s="white",causticsOnly:u=!1,backside:P=!1,backsideIOR:y=1.1,worldRadius:M=.3125,intensity:D=.05,resolution:w=2024,lightSource:T=[5,5,5],...S},b)=>{n.extend({CausticsProjectionMaterial:f});const j=p.useRef(null),F=p.useRef(null),z=p.useRef(null),R=p.useRef(null),W=n.useThree((e=>e.gl)),I=i.useHelper(e&&F,m.CameraHelper),O=o.useFBO(w,w,h),C=o.useFBO(w,w,h),V=o.useFBO(w,w,g),_=o.useFBO(w,w,g),[B]=p.useState((()=>v())),[E]=p.useState((()=>v(m.BackSide))),[A]=p.useState((()=>new x)),[N]=p.useState((()=>new c.FullScreenQuad(A)));p.useLayoutEffect((()=>{j.current.updateWorldMatrix(!1,!0)}));let k=0;const q=new m.Vector3,U=new m.Frustum,L=new m.Matrix4,H=new m.Plane,G=new m.Vector3,Q=new m.Vector3,$=new m.Box3,J=new m.Vector3,K=[],X=[],Y=[],Z=[],ee=new m.Vector3;for(let e=0;e<8;e++)K.push(new m.Vector3),X.push(new m.Vector3),Y.push(new m.Vector3),Z.push(new m.Vector3);return n.useFrame((()=>{if(t===1/0||k++<t){var r,n;Array.isArray(T)?G.fromArray(T).normalize():G.copy(j.current.worldToLocal(T.current.getWorldPosition(q)).normalize()),Q.copy(G).multiplyScalar(-1),null==(r=z.current.parent)||r.matrixWorld.identity(),$.setFromObject(z.current,!0),K[0].set($.min.x,$.min.y,$.min.z),K[1].set($.min.x,$.min.y,$.max.z),K[2].set($.min.x,$.max.y,$.min.z),K[3].set($.min.x,$.max.y,$.max.z),K[4].set($.max.x,$.min.y,$.min.z),K[5].set($.max.x,$.min.y,$.max.z),K[6].set($.max.x,$.max.y,$.min.z),K[7].set($.max.x,$.max.y,$.max.z);for(let e=0;e<8;e++)X[e].copy(K[e]);$.getCenter(J),K.map((e=>e.sub(J)));const t=H.set(Q,0);K.map(((e,r)=>t.projectPoint(e,Y[r])));const o=Y.reduce(((e,r)=>e.add(r)),q.set(0,0,0)).divideScalar(Y.length),i=Y.map((e=>e.distanceTo(o))).reduce(((e,r)=>Math.max(e,r))),l=K.map((e=>e.dot(G))).reduce(((e,r)=>Math.max(e,r)));F.current.position.copy(ee.copy(G).multiplyScalar(l).add(J)),F.current.lookAt(z.current.localToWorld(J));const c=L.lookAt(F.current.position,J,q.set(0,1,0));F.current.left=-i,F.current.right=i,F.current.top=i,F.current.bottom=-i;const s=q.set(0,i,0).applyMatrix4(c),d=(F.current.position.y+s.y)/G.y;F.current.near=.1,F.current.far=d,F.current.updateProjectionMatrix(),F.current.updateMatrixWorld();const m=X.map(((e,r)=>e.add(Z[r].copy(G).multiplyScalar(-e.y/G.y)))),p=m.reduce(((e,r)=>e.add(r)),q.set(0,0,0)).divideScalar(m.length),v=2*m.map((e=>Math.hypot(e.x-p.x,e.z-p.z))).reduce(((e,r)=>Math.max(e,r)));R.current.scale.setScalar(v),R.current.position.copy(p),e&&(null==(n=I.current)||n.update()),E.viewMatrix.value=B.viewMatrix.value=F.current.matrixWorldInverse;const f=U.setFromProjectionMatrix(L.multiplyMatrices(F.current.projectionMatrix,F.current.matrixWorldInverse)).planes[4];A.cameraMatrixWorld=F.current.matrixWorld,A.cameraProjectionMatrixInv=F.current.projectionMatrixInverse,A.lightDir=Q,A.lightPlaneNormal=f.normal,A.lightPlaneConstant=f.constant,A.near=F.current.near,A.far=F.current.far,A.resolution=w,A.size=i,A.intensity=D,A.worldRadius=M,z.current.visible=!0,W.setRenderTarget(O),W.clear(),z.current.overrideMaterial=B,W.render(z.current,F.current),W.setRenderTarget(C),W.clear(),P&&(z.current.overrideMaterial=E,W.render(z.current,F.current)),z.current.overrideMaterial=null,A.ior=a,R.current.material.lightProjMatrix=F.current.projectionMatrix,R.current.material.lightViewMatrix=F.current.matrixWorldInverse,A.normalTexture=O.texture,A.depthTexture=O.depthTexture,W.setRenderTarget(V),W.clear(),N.render(W),A.ior=y,A.normalTexture=C.texture,A.depthTexture=C.depthTexture,W.setRenderTarget(_),W.clear(),P&&N.render(W),W.setRenderTarget(null),u&&(z.current.visible=!1)}})),p.useImperativeHandle(b,(()=>j.current),[]),p.createElement("group",d.default({ref:j},S),p.createElement("scene",{ref:z},p.createElement("orthographicCamera",{ref:F,up:[0,1,0]}),r),p.createElement("mesh",{renderOrder:2,ref:R,"rotation-x":-Math.PI/2},p.createElement("planeGeometry",null),p.createElement("causticsProjectionMaterial",{transparent:!0,color:s,causticsTexture:V.texture,causticsTextureB:_.texture,blending:m.CustomBlending,blendSrc:m.OneFactor,blendDst:m.SrcAlphaFactor,depthWrite:!1}),e&&p.createElement(l.Edges,null,p.createElement("lineBasicMaterial",{color:"#ffff00",toneMapped:!1}))))}));exports.Caustics=P;
+"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"),o=require("./useFBO.cjs.js"),i=require("./useHelper.cjs.js"),a=require("./shaderMaterial.cjs.js"),l=require("./Edges.cjs.js"),c=require("three-stdlib"),s=require("../helpers/constants.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function d(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 m=u(e),p=d(r),v=d(t);function f(e=p.FrontSide){const r={value:new p.Matrix4};return Object.assign(new p.MeshNormalMaterial({side:e}),{viewMatrix:r,onBeforeCompile:e=>{e.uniforms.viewMatrix=r,e.fragmentShader="vec3 inverseTransformDirection( in vec3 dir, in mat4 matrix ) {\n           return normalize( ( vec4( dir, 0.0 ) * matrix ).xyz );\n         }\n"+e.fragmentShader.replace("#include <normal_fragment_maps>","#include <normal_fragment_maps>\n           normal = inverseTransformDirection( normal, viewMatrix );\n")}})}const x=a.shaderMaterial({causticsTexture:null,causticsTextureB:null,color:new p.Color,lightProjMatrix:new p.Matrix4,lightViewMatrix:new p.Matrix4},"varying vec3 vWorldPosition;   \n   void main() {\n     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n     vec4 worldPosition = modelMatrix * vec4(position, 1.);\n     vWorldPosition = worldPosition.xyz;\n   }",`varying vec3 vWorldPosition;\n  uniform vec3 color;\n  uniform sampler2D causticsTexture; \n  uniform sampler2D causticsTextureB; \n  uniform mat4 lightProjMatrix;\n  uniform mat4 lightViewMatrix;\n   void main() {\n    // Apply caustics  \n    vec4 lightSpacePos = lightProjMatrix * lightViewMatrix * vec4(vWorldPosition, 1.0);\n    lightSpacePos.xyz /= lightSpacePos.w;\n    lightSpacePos.xyz = lightSpacePos.xyz * 0.5 + 0.5; \n    vec3 front = texture2D(causticsTexture, lightSpacePos.xy).rgb;\n    vec3 back = texture2D(causticsTextureB, lightSpacePos.xy).rgb;\n    gl_FragColor = vec4((front + back) * color, 1.0);\n    #include <tonemapping_fragment>\n    #include <${s.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`),h=a.shaderMaterial({cameraMatrixWorld:new p.Matrix4,cameraProjectionMatrixInv:new p.Matrix4,normalTexture:null,depthTexture:null,lightDir:new p.Vector3(0,1,0),lightPlaneNormal:new p.Vector3(0,1,0),lightPlaneConstant:0,near:.1,far:100,modelMatrix:new p.Matrix4,worldRadius:1/40,ior:1.1,bounces:0,resolution:1024,size:10,intensity:.5},"\n  varying vec2 vUv;\n  void main() {\n      vUv = uv;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n  }","  \n  uniform mat4 cameraMatrixWorld;\n  uniform mat4 cameraProjectionMatrixInv;\n  uniform vec3 lightDir;\n  uniform vec3 lightPlaneNormal;\n  uniform float lightPlaneConstant;\n  uniform float near;\n  uniform float far;\n  uniform float time;\n  uniform float worldRadius;\n  uniform float resolution;\n  uniform float size;\n  uniform float intensity;\n  uniform float ior;\n  precision highp isampler2D;\n  precision highp usampler2D;\n  uniform sampler2D normalTexture;\n  uniform sampler2D depthTexture;\n  uniform float bounces;\n  varying vec2 vUv;\n  vec3 WorldPosFromDepth(float depth, vec2 coord) {\n    float z = depth * 2.0 - 1.0;\n    vec4 clipSpacePosition = vec4(coord * 2.0 - 1.0, z, 1.0);\n    vec4 viewSpacePosition = cameraProjectionMatrixInv * clipSpacePosition;\n    // Perspective division\n    viewSpacePosition /= viewSpacePosition.w;\n    vec4 worldSpacePosition = cameraMatrixWorld * viewSpacePosition;\n    return worldSpacePosition.xyz;\n  }                  \n  float sdPlane( vec3 p, vec3 n, float h ) {\n    // n must be normalized\n    return dot(p,n) + h;\n  }\n  float planeIntersect( vec3 ro, vec3 rd, vec4 p ) {\n    return -(dot(ro,p.xyz)+p.w)/dot(rd,p.xyz);\n  }\n  vec3 totalInternalReflection(vec3 ro, vec3 rd, vec3 pos, vec3 normal, float ior, out vec3 rayOrigin, out vec3 rayDirection) {\n    rayOrigin = ro;\n    rayDirection = rd;\n    rayDirection = refract(rayDirection, normal, 1.0 / ior);\n    rayOrigin = pos + rayDirection * 0.1;\n    return rayDirection;\n  }\n  void main() {\n    // Each sample consists of random offset in the x and y direction\n    float caustic = 0.0;\n    float causticTexelSize = (1.0 / resolution) * size * 2.0;\n    float texelsNeeded = worldRadius / causticTexelSize;\n    float sampleRadius = texelsNeeded / resolution;\n    float sum = 0.0;\n    if (texture2D(depthTexture, vUv).x == 1.0) {\n      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n      return;\n    }\n    vec2 offset1 = vec2(-0.5, -0.5);//vec2(rand() - 0.5, rand() - 0.5);\n    vec2 offset2 = vec2(-0.5, 0.5);//vec2(rand() - 0.5, rand() - 0.5);\n    vec2 offset3 = vec2(0.5, 0.5);//vec2(rand() - 0.5, rand() - 0.5);\n    vec2 offset4 = vec2(0.5, -0.5);//vec2(rand() - 0.5, rand() - 0.5);\n    vec2 uv1 = vUv + offset1 * sampleRadius;\n    vec2 uv2 = vUv + offset2 * sampleRadius;\n    vec2 uv3 = vUv + offset3 * sampleRadius;\n    vec2 uv4 = vUv + offset4 * sampleRadius;\n    vec3 normal1 = texture2D(normalTexture, uv1, -10.0).rgb * 2.0 - 1.0;\n    vec3 normal2 = texture2D(normalTexture, uv2, -10.0).rgb * 2.0 - 1.0;\n    vec3 normal3 = texture2D(normalTexture, uv3, -10.0).rgb * 2.0 - 1.0;\n    vec3 normal4 = texture2D(normalTexture, uv4, -10.0).rgb * 2.0 - 1.0;\n    float depth1 = texture2D(depthTexture, uv1, -10.0).x;\n    float depth2 = texture2D(depthTexture, uv2, -10.0).x;\n    float depth3 = texture2D(depthTexture, uv3, -10.0).x;\n    float depth4 = texture2D(depthTexture, uv4, -10.0).x;\n    // Sanity check the depths\n    if (depth1 == 1.0 || depth2 == 1.0 || depth3 == 1.0 || depth4 == 1.0) {\n      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n      return;\n    }\n    vec3 pos1 = WorldPosFromDepth(depth1, uv1);\n    vec3 pos2 = WorldPosFromDepth(depth2, uv2);\n    vec3 pos3 = WorldPosFromDepth(depth3, uv3);\n    vec3 pos4 = WorldPosFromDepth(depth4, uv4);\n    vec3 originPos1 = WorldPosFromDepth(0.0, uv1);\n    vec3 originPos2 = WorldPosFromDepth(0.0, uv2);\n    vec3 originPos3 = WorldPosFromDepth(0.0, uv3);\n    vec3 originPos4 = WorldPosFromDepth(0.0, uv4);\n    vec3 endPos1, endPos2, endPos3, endPos4;\n    vec3 endDir1, endDir2, endDir3, endDir4;\n    totalInternalReflection(originPos1, lightDir, pos1, normal1, ior, endPos1, endDir1);\n    totalInternalReflection(originPos2, lightDir, pos2, normal2, ior, endPos2, endDir2);\n    totalInternalReflection(originPos3, lightDir, pos3, normal3, ior, endPos3, endDir3);\n    totalInternalReflection(originPos4, lightDir, pos4, normal4, ior, endPos4, endDir4);\n    float lightPosArea = length(cross(originPos2 - originPos1, originPos3 - originPos1)) + length(cross(originPos3 - originPos1, originPos4 - originPos1));\n    float t1 = planeIntersect(endPos1, endDir1, vec4(lightPlaneNormal, lightPlaneConstant));\n    float t2 = planeIntersect(endPos2, endDir2, vec4(lightPlaneNormal, lightPlaneConstant));\n    float t3 = planeIntersect(endPos3, endDir3, vec4(lightPlaneNormal, lightPlaneConstant));\n    float t4 = planeIntersect(endPos4, endDir4, vec4(lightPlaneNormal, lightPlaneConstant));\n    vec3 finalPos1 = endPos1 + endDir1 * t1;\n    vec3 finalPos2 = endPos2 + endDir2 * t2;\n    vec3 finalPos3 = endPos3 + endDir3 * t3;\n    vec3 finalPos4 = endPos4 + endDir4 * t4;\n    float finalArea = length(cross(finalPos2 - finalPos1, finalPos3 - finalPos1)) + length(cross(finalPos3 - finalPos1, finalPos4 - finalPos1));\n    caustic += intensity * (lightPosArea / finalArea);\n    // Calculate the area of the triangle in light spaces\n    gl_FragColor = vec4(vec3(max(caustic, 0.0)), 1.0);\n  }"),g={depth:!0,minFilter:p.LinearFilter,magFilter:p.LinearFilter,type:p.UnsignedByteType},P={minFilter:p.LinearMipmapLinearFilter,magFilter:p.LinearFilter,type:p.FloatType,generateMipmaps:!0},y=v.forwardRef((({debug:e,children:r,frames:t=1,ior:a=1.1,color:s="white",causticsOnly:u=!1,backside:d=!1,backsideIOR:y=1.1,worldRadius:M=.3125,intensity:D=.05,resolution:w=2024,lightSource:T=[5,5,5],...j},S)=>{n.extend({CausticsProjectionMaterial:x});const b=v.useRef(null),F=v.useRef(null),z=v.useRef(null),W=v.useRef(null),R=n.useThree((e=>e.gl)),I=i.useHelper(e&&F,p.CameraHelper),O=o.useFBO(w,w,g),C=o.useFBO(w,w,g),_=o.useFBO(w,w,P),V=o.useFBO(w,w,P),[B]=v.useState((()=>f())),[E]=v.useState((()=>f(p.BackSide))),[A]=v.useState((()=>new h)),[q]=v.useState((()=>new c.FullScreenQuad(A)));v.useLayoutEffect((()=>{b.current.updateWorldMatrix(!1,!0)}));let N=0;const k=new p.Vector3,U=new p.Frustum,L=new p.Matrix4,H=new p.Plane,G=new p.Vector3,Q=new p.Vector3,$=new p.Box3,J=new p.Vector3,K=[],X=[],Y=[],Z=[],ee=new p.Vector3;for(let e=0;e<8;e++)K.push(new p.Vector3),X.push(new p.Vector3),Y.push(new p.Vector3),Z.push(new p.Vector3);return n.useFrame((()=>{if(t===1/0||N++<t){var r,n;Array.isArray(T)?G.fromArray(T).normalize():G.copy(b.current.worldToLocal(T.current.getWorldPosition(k)).normalize()),Q.copy(G).multiplyScalar(-1),null==(r=z.current.parent)||r.matrixWorld.identity(),$.setFromObject(z.current,!0),K[0].set($.min.x,$.min.y,$.min.z),K[1].set($.min.x,$.min.y,$.max.z),K[2].set($.min.x,$.max.y,$.min.z),K[3].set($.min.x,$.max.y,$.max.z),K[4].set($.max.x,$.min.y,$.min.z),K[5].set($.max.x,$.min.y,$.max.z),K[6].set($.max.x,$.max.y,$.min.z),K[7].set($.max.x,$.max.y,$.max.z);for(let e=0;e<8;e++)X[e].copy(K[e]);$.getCenter(J),K.map((e=>e.sub(J)));const t=H.set(Q,0);K.map(((e,r)=>t.projectPoint(e,Y[r])));const o=Y.reduce(((e,r)=>e.add(r)),k.set(0,0,0)).divideScalar(Y.length),i=Y.map((e=>e.distanceTo(o))).reduce(((e,r)=>Math.max(e,r))),l=K.map((e=>e.dot(G))).reduce(((e,r)=>Math.max(e,r)));F.current.position.copy(ee.copy(G).multiplyScalar(l).add(J)),F.current.lookAt(z.current.localToWorld(J));const c=L.lookAt(F.current.position,J,k.set(0,1,0));F.current.left=-i,F.current.right=i,F.current.top=i,F.current.bottom=-i;const s=k.set(0,i,0).applyMatrix4(c),m=(F.current.position.y+s.y)/G.y;F.current.near=.1,F.current.far=m,F.current.updateProjectionMatrix(),F.current.updateMatrixWorld();const p=X.map(((e,r)=>e.add(Z[r].copy(G).multiplyScalar(-e.y/G.y)))),v=p.reduce(((e,r)=>e.add(r)),k.set(0,0,0)).divideScalar(p.length),f=2*p.map((e=>Math.hypot(e.x-v.x,e.z-v.z))).reduce(((e,r)=>Math.max(e,r)));W.current.scale.setScalar(f),W.current.position.copy(v),e&&(null==(n=I.current)||n.update()),E.viewMatrix.value=B.viewMatrix.value=F.current.matrixWorldInverse;const x=U.setFromProjectionMatrix(L.multiplyMatrices(F.current.projectionMatrix,F.current.matrixWorldInverse)).planes[4];A.cameraMatrixWorld=F.current.matrixWorld,A.cameraProjectionMatrixInv=F.current.projectionMatrixInverse,A.lightDir=Q,A.lightPlaneNormal=x.normal,A.lightPlaneConstant=x.constant,A.near=F.current.near,A.far=F.current.far,A.resolution=w,A.size=i,A.intensity=D,A.worldRadius=M,z.current.visible=!0,R.setRenderTarget(O),R.clear(),z.current.overrideMaterial=B,R.render(z.current,F.current),R.setRenderTarget(C),R.clear(),d&&(z.current.overrideMaterial=E,R.render(z.current,F.current)),z.current.overrideMaterial=null,A.ior=a,W.current.material.lightProjMatrix=F.current.projectionMatrix,W.current.material.lightViewMatrix=F.current.matrixWorldInverse,A.normalTexture=O.texture,A.depthTexture=O.depthTexture,R.setRenderTarget(_),R.clear(),q.render(R),A.ior=y,A.normalTexture=C.texture,A.depthTexture=C.depthTexture,R.setRenderTarget(V),R.clear(),d&&q.render(R),R.setRenderTarget(null),u&&(z.current.visible=!1)}})),v.useImperativeHandle(S,(()=>b.current),[]),v.createElement("group",m.default({ref:b},j),v.createElement("scene",{ref:z},v.createElement("orthographicCamera",{ref:F,up:[0,1,0]}),r),v.createElement("mesh",{renderOrder:2,ref:W,"rotation-x":-Math.PI/2},v.createElement("planeGeometry",null),v.createElement("causticsProjectionMaterial",{transparent:!0,color:s,causticsTexture:_.texture,causticsTextureB:V.texture,blending:p.CustomBlending,blendSrc:p.OneFactor,blendDst:p.SrcAlphaFactor,depthWrite:!1}),e&&v.createElement(l.Edges,null,v.createElement("lineBasicMaterial",{color:"#ffff00",toneMapped:!1}))))}));exports.Caustics=y;

package/core/Caustics.js

@@ -7,6 +7,7 @@ import { useHelper } from './useHelper.js';
 import { shaderMaterial } from './shaderMaterial.js';
 import { Edges } from './Edges.js';
 import { FullScreenQuad } from 'three-stdlib';
+import { version } from '../helpers/constants.js';
 
 function createNormalMaterial(side = THREE.FrontSide) {
   const viewMatrix = {
@@ -25,12 +26,12 @@ function createNormalMaterial(side = THREE.FrontSide) {
     }
   });
 }
-const CausticsProjectionMaterial = shaderMaterial({
+const CausticsProjectionMaterial = /*@__PURE__*/shaderMaterial({
   causticsTexture: null,
   causticsTextureB: null,
-  color: new THREE.Color(),
-  lightProjMatrix: new THREE.Matrix4(),
-  lightViewMatrix: new THREE.Matrix4()
+  color: /*@__PURE__*/new THREE.Color(),
+  lightProjMatrix: /*@__PURE__*/new THREE.Matrix4(),
+  lightViewMatrix: /*@__PURE__*/new THREE.Matrix4()
 }, `varying vec3 vWorldPosition;   
    void main() {
      gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);
@@ -51,19 +52,19 @@ const CausticsProjectionMaterial = shaderMaterial({
     vec3 back = texture2D(causticsTextureB, lightSpacePos.xy).rgb;
     gl_FragColor = vec4((front + back) * color, 1.0);
     #include <tonemapping_fragment>
-    #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+    #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
    }`);
-const CausticsMaterial = shaderMaterial({
-  cameraMatrixWorld: new THREE.Matrix4(),
-  cameraProjectionMatrixInv: new THREE.Matrix4(),
+const CausticsMaterial = /*@__PURE__*/shaderMaterial({
+  cameraMatrixWorld: /*@__PURE__*/new THREE.Matrix4(),
+  cameraProjectionMatrixInv: /*@__PURE__*/new THREE.Matrix4(),
   normalTexture: null,
   depthTexture: null,
-  lightDir: new THREE.Vector3(0, 1, 0),
-  lightPlaneNormal: new THREE.Vector3(0, 1, 0),
+  lightDir: /*@__PURE__*/new THREE.Vector3(0, 1, 0),
+  lightPlaneNormal: /*@__PURE__*/new THREE.Vector3(0, 1, 0),
   lightPlaneConstant: 0,
   near: 0.1,
   far: 100,
-  modelMatrix: new THREE.Matrix4(),
+  modelMatrix: /*@__PURE__*/new THREE.Matrix4(),
   worldRadius: 1 / 40,
   ior: 1.1,
   bounces: 0,
@@ -190,7 +191,7 @@ const CAUSTICPROPS = {
   type: THREE.FloatType,
   generateMipmaps: true
 };
-const Caustics = /*#__PURE__*/React.forwardRef(({
+const Caustics = /*@__PURE__*/React.forwardRef(({
   debug,
   children,
   frames = 1,

package/core/Center.js

@@ -2,7 +2,7 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import { Box3, Vector3, Sphere } from 'three';
 import * as React from 'react';
 
-const Center = /*#__PURE__*/React.forwardRef(function Center({
+const Center = /*@__PURE__*/React.forwardRef(function Center({
   children,
   disable,
   disableX,

package/core/Clone.js

@@ -34,7 +34,7 @@ function createSpread(child, {
   }
   return spread;
 }
-const Clone = /*#__PURE__*/React.forwardRef(({
+const Clone = /*@__PURE__*/React.forwardRef(({
   isChild = false,
   object,
   children,

package/core/Cloud.cjs.js

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

package/core/Cloud.d.ts

@@ -1,12 +1,32 @@
 import * as React from 'react';
-export declare function Cloud({ opacity, speed, width, depth, segments, texture, color, depthTest, ...props }: {
-    [x: string]: any;
-    opacity?: number | undefined;
-    speed?: number | undefined;
-    width?: number | undefined;
-    depth?: number | undefined;
-    segments?: number | undefined;
-    texture?: string | undefined;
-    color?: string | undefined;
-    depthTest?: boolean | undefined;
-}): React.JSX.Element;
+import { Group, Material, MeshLambertMaterial } from 'three';
+import { MaterialNode, ReactThreeFiber } from '@react-three/fiber';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            cloudMaterial: MaterialNode<MeshLambertMaterial, typeof MeshLambertMaterial>;
+        }
+    }
+}
+type CloudsProps = JSX.IntrinsicElements['group'] & {
+    texture?: string;
+    limit?: number;
+    range?: number;
+    material?: typeof Material;
+};
+type CloudProps = JSX.IntrinsicElements['group'] & {
+    seed?: number;
+    segments?: number;
+    bounds?: ReactThreeFiber.Vector3;
+    scale?: ReactThreeFiber.Vector3;
+    volume?: number;
+    growth?: number;
+    speed?: number;
+    fade?: number;
+    opacity?: number;
+    color?: ReactThreeFiber.Color;
+};
+export declare const Clouds: React.ForwardRefExoticComponent<Omit<CloudsProps, "ref"> & React.RefAttributes<Group>>;
+export declare const CloudInstance: React.ForwardRefExoticComponent<Omit<CloudProps, "ref"> & React.RefAttributes<Group>>;
+export declare const Cloud: React.ForwardRefExoticComponent<Omit<CloudProps, "ref"> & React.RefAttributes<Group>>;
+export {};