@react-three/drei 9.88.11 → 9.88.12

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

package/core/Cloud.js

@@ -1,6 +1,6 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { Quaternion, Vector3, DynamicDrawUsage, MeshLambertMaterial, Matrix4, Color } from 'three';
+import { REVISION, Quaternion, Vector3, DynamicDrawUsage, MeshLambertMaterial, Matrix4, Color } from 'three';
 import { extend, useFrame, applyProps } from '@react-three/fiber';
 import { useTexture } from './useTexture.js';
 import { v4 } from 'uuid';
@@ -26,6 +26,7 @@ const Clouds = /* @__PURE__ */React.forwardRef(({
     return class extends material {
       constructor() {
         super();
+        const opaque_fragment = parseInt(REVISION.replace(/\D+/g, '')) >= 154 ? 'opaque_fragment' : 'output_fragment';
         this.onBeforeCompile = shader => {
           shader.vertexShader = `attribute float opacity;
                varying float vOpacity;
@@ -33,7 +34,7 @@ const Clouds = /* @__PURE__ */React.forwardRef(({
                  vOpacity = opacity;
                 `);
           shader.fragmentShader = `varying float vOpacity;
-              ` + shader.fragmentShader.replace('#include <output_fragment>', `#include <output_fragment>
+              ` + shader.fragmentShader.replace(`#include <${opaque_fragment}>`, `#include <${opaque_fragment}>
                  gl_FragColor = vec4(outgoingLight, diffuseColor.a * vOpacity);
                 `);
         };