@react-three/drei 9.89.3 → 9.90.1

package/README.md

@@ -77,7 +77,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#outlines">Outlines</a></li>
           <li><a href="#trail">Trail</a></li>
           <li><a href="#sampler">Sampler</a></li>
-          <li><a href="#computedattribute">Computed Attribute</a></li>
+          <li><a href="#computedattribute">ComputedAttribute</a></li>
           <li><a href="#clone">Clone</a></li>
           <li><a href="#useanimations">useAnimations</a></li>
           <li><a href="#marchingcubes">MarchingCubes</a></li>
@@ -85,6 +85,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#svg">Svg</a></li>
           <li><a href="#gltf">Gltf</a></li>
           <li><a href="#asciirenderer">AsciiRenderer</a></li>
+          <li><a href="#splat">Splat</a></li>
         </ul>
         <li><a href="#shaders">Shaders</a></li>
         <ul>
@@ -1770,8 +1771,8 @@ The decal box has to intersect the surface, otherwise it will not be visible. if
     rotation={[0, 0, 0]} // Rotation of the decal (can be a vector or a degree in radians)
     scale={1} // Scale of the decal
   >
-    <meshBasicMaterial 
-      map={texture} 
+    <meshBasicMaterial
+      map={texture}
       polygonOffset
       polygonOffsetFactor={-1} // The material should take precedence over the original
     />
@@ -1849,6 +1850,46 @@ type AsciiRendererProps = {
   <AsciiRenderer />
 ```
 
+#### Splat
+
+<p>
+  <a href="https://codesandbox.io/s/qp4jmf"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/qp4jmf/screenshot.png" alt="Demo"/></a>
+</p>
+
+A declarative abstraction around [antimatter15/splat](https://github.com/antimatter15/splat). It supports re-use, multiple splats with correct depth sorting, splats can move and behave as a regular object3d's, supports alphahash & alphatest, and stream-loading.
+
+```tsx
+type SplatProps = {
+  /** Url towards a *.splat file, no support for *.ply */
+  src: string
+  /** Whether to use tone mapping, default: false */
+  toneMapped?: boolean
+  /** Alpha test value, , default: 0 */
+  alphaTest?: number
+  /** Whether to use alpha hashing, default: false */
+  alphaHash?: boolean
+  /** Chunk size for lazy loading, prevents chokings the worker, default: 25000 (25kb) */
+  chunkSize?: number
+} & JSX.IntrinsicElements['mesh']
+```
+
+```jsx
+<Splat src="https://huggingface.co/cakewalk/splat-data/resolve/main/nike.splat" />
+```
+
+In order to depth sort multiple splats correectly you can either use alphaTest, for instance with a low value. But keep in mind that this can show a slight outline under some viewing conditions.
+
+```jsx
+<Splat alphaTest={0.1} src="foo.splat" />
+<Splat alphaTest={0.1} src="bar.splat" />
+```
+
+You can also use alphaHash, but this can be slower and create some noise, you would typically get rid of the noise in postprocessing with a TAA pass. You don't have to use alphaHash on all splats.
+
+```jsx
+<Splat alphaHash src="foo.splat" />
+```
+
 # Shaders
 
 #### MeshReflectorMaterial
@@ -2371,13 +2412,13 @@ Enable shadows using the `castShadow` and `recieveShadow` prop.
 
 > Note: Html 'blending' mode only correctly occludes rectangular HTML elements by default. Use the `geometry` prop to swap the backing geometry to a custom one if your Html has a different shape.
 
-If transform mode is enabled, the dimensions of the rendered html will depend on the position relative to the camera, the camera fov and the distanceFactor. For example, an Html component placed at (0,0,0) and with a distanceFactor of 10, rendered inside a scene with a perspective camera positioned at (0,0,2.45) and a FOV of 75, will have the same dimensions as a "plain" html element like in [this example](https://codesandbox.io/s/drei-html-magic-number-6mzt6m). 
+If transform mode is enabled, the dimensions of the rendered html will depend on the position relative to the camera, the camera fov and the distanceFactor. For example, an Html component placed at (0,0,0) and with a distanceFactor of 10, rendered inside a scene with a perspective camera positioned at (0,0,2.45) and a FOV of 75, will have the same dimensions as a "plain" html element like in [this example](https://codesandbox.io/s/drei-html-magic-number-6mzt6m).
 
 A caveat of transform mode is that on some devices and browsers, the rendered html may appear blurry, as discussed in [#859](https://github.com/pmndrs/drei/issues/859). The issue can be at least mitigated by scaling down the Html parent and scaling up the html children:
 
 ```jsx
 <Html transform scale={0.5}>
-  <div style={{ transform: "scale(2)" }}>Some text</div>
+  <div style={{ transform: 'scale(2)' }}>Some text</div>
 </Html>
 ```
 

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

package/core/Cloud.js

@@ -4,6 +4,7 @@ import { REVISION, Quaternion, Vector3, DynamicDrawUsage, MeshLambertMaterial, M
 import { extend, useFrame, applyProps } from '@react-three/fiber';
 import { useTexture } from './useTexture.js';
 import { v4 } from 'uuid';
+import { setUpdateRange } from '../helpers/deprecated.js';
 
 const CLOUD_URL = 'https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png';
 const parentMatrix = /* @__PURE__ */new Matrix4();
@@ -88,11 +89,22 @@ const Clouds = /* @__PURE__ */React.forwardRef(({
     if (instance.current.instanceColor) instance.current.instanceColor.needsUpdate = true;
   });
   React.useLayoutEffect(() => {
-    const updateRange = Math.min(limit, range !== undefined ? range : limit, clouds.current.length);
-    instance.current.count = updateRange;
-    instance.current.instanceMatrix.updateRange.count = updateRange * 16;
-    if (instance.current.instanceColor) instance.current.instanceColor.updateRange.count = updateRange * 3;
-    instance.current.geometry.attributes.opacity.updateRange.count = updateRange;
+    const count = Math.min(limit, range !== undefined ? range : limit, clouds.current.length);
+    instance.current.count = count;
+    setUpdateRange(instance.current.instanceMatrix, {
+      offset: 0,
+      count: count * 16
+    });
+    if (instance.current.instanceColor) {
+      setUpdateRange(instance.current.instanceColor, {
+        offset: 0,
+        count: count * 3
+      });
+    }
+    setUpdateRange(instance.current.geometry.attributes.opacity, {
+      offset: 0,
+      count: count
+    });
   });
   let imageBounds = [(_image$width = cloudTexture.image.width) !== null && _image$width !== void 0 ? _image$width : 1, (_image$height = cloudTexture.image.height) !== null && _image$height !== void 0 ? _image$height : 1];
   let max = Math.max(imageBounds[0], imageBounds[1]);

package/core/Instances.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"),a=require("react-merge-refs"),c=require("react-composer");function i(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 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=i(e),u=s(t),l=s(r),f=i(a),d=i(c);const m=new u.Matrix4,y=new u.Matrix4,p=[],h=new u.Mesh;class x extends u.Group{constructor(){super(),this.color=new u.Color("white"),this.instance={current:void 0},this.instanceKey={current:void 0}}get geometry(){var e;return null==(e=this.instance.current)?void 0:e.geometry}raycast(e,t){const r=this.instance.current;if(!r)return;if(!r.geometry||!r.material)return;h.geometry=r.geometry;const n=r.matrixWorld,a=r.userData.instances.indexOf(this.instanceKey);if(!(-1===a||a>r.count)){r.getMatrixAt(a,m),y.multiplyMatrices(n,m),h.matrixWorld=y,r.material instanceof u.Material?h.material.side=r.material.side:h.material.side=r.material[0].side,h.raycast(e,p);for(let e=0,r=p.length;e<r;e++){const r=p[e];r.instanceId=a,r.object=this,t.push(r)}p.length=0}}}const g=l.createContext(null),M=new u.Matrix4,b=new u.Matrix4,w=new u.Matrix4,v=new u.Vector3,E=new u.Quaternion,A=new u.Vector3,j=l.forwardRef((({context:e,children:t,...r},a)=>{l.useMemo((()=>n.extend({PositionMesh:x})),[]);const c=l.useRef(),{subscribe:i,getParent:s}=l.useContext(e||g);return l.useLayoutEffect((()=>i(c)),[]),l.createElement("positionMesh",o.default({instance:s(),instanceKey:c,ref:f.default([a,c])},r),t)})),O=l.forwardRef((({children:e,range:t,limit:r=1e3,frames:a=1/0,...c},i)=>{const[{context:s,instance:d}]=l.useState((()=>{const e=l.createContext(null);return{context:e,instance:l.forwardRef(((t,r)=>l.createElement(j,o.default({context:e},t,{ref:r}))))}})),m=l.useRef(null),[y,p]=l.useState([]),[[h,x]]=l.useState((()=>{const e=new Float32Array(16*r);for(let t=0;t<r;t++)w.identity().toArray(e,16*t);return[e,new Float32Array([...new Array(3*r)].map((()=>1)))]}));l.useEffect((()=>{m.current.instanceMatrix.needsUpdate=!0}));let O=0,P=0;n.useFrame((()=>{if(a===1/0||O<a){m.current.updateMatrix(),m.current.updateMatrixWorld(),M.copy(m.current.matrixWorld).invert(),P=Math.min(r,void 0!==t?t:r,y.length),m.current.count=P,m.current.instanceMatrix.updateRange.count=16*P,m.current.instanceColor.updateRange.count=3*P;for(let e=0;e<y.length;e++){const t=y[e].current;t.matrixWorld.decompose(v,E,A),b.compose(v,E,A).premultiply(M),b.toArray(h,16*e),m.current.instanceMatrix.needsUpdate=!0,t.color.toArray(x,3*e),m.current.instanceColor.needsUpdate=!0}O++}}));const R=l.useMemo((()=>({getParent:()=>m,subscribe:e=>(p((t=>[...t,e])),()=>p((t=>t.filter((t=>t.current!==e.current)))))})),[]);return l.createElement("instancedMesh",o.default({userData:{instances:y},matrixAutoUpdate:!1,ref:f.default([i,m]),args:[null,null,0],raycast:()=>null},c),l.createElement("instancedBufferAttribute",{attach:"instanceMatrix",count:h.length/16,array:h,itemSize:16,usage:u.DynamicDrawUsage}),l.createElement("instancedBufferAttribute",{attach:"instanceColor",count:x.length/3,array:x,itemSize:3,usage:u.DynamicDrawUsage}),"function"==typeof e?l.createElement(s.Provider,{value:R},e(d)):l.createElement(g.Provider,{value:R},e))})),P=l.forwardRef((function({meshes:e,children:t,...r},n){const a=Array.isArray(e);if(!a)for(const t of Object.keys(e))e[t].isMesh||delete e[t];return l.createElement("group",{ref:n},l.createElement(d.default,{components:(a?e:Object.values(e)).map((({geometry:e,material:t})=>l.createElement(O,o.default({key:e.uuid,geometry:e,material:t},r))))},(r=>a?t(...r):t(Object.keys(e).filter((t=>e[t].isMesh)).reduce(((e,t,n)=>({...e,[t]:r[n]})),{})))))}));exports.Instance=j,exports.Instances=O,exports.Merged=P;
+"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"),a=require("react-merge-refs"),c=require("react-composer"),i=require("../helpers/deprecated.cjs.js");function s(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 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 u=s(e),l=o(t),f=o(r),d=s(a),m=s(c);const y=new l.Matrix4,p=new l.Matrix4,h=[],x=new l.Mesh;class g extends l.Group{constructor(){super(),this.color=new l.Color("white"),this.instance={current:void 0},this.instanceKey={current:void 0}}get geometry(){var e;return null==(e=this.instance.current)?void 0:e.geometry}raycast(e,t){const r=this.instance.current;if(!r)return;if(!r.geometry||!r.material)return;x.geometry=r.geometry;const n=r.matrixWorld,a=r.userData.instances.indexOf(this.instanceKey);if(!(-1===a||a>r.count)){r.getMatrixAt(a,y),p.multiplyMatrices(n,y),x.matrixWorld=p,r.material instanceof l.Material?x.material.side=r.material.side:x.material.side=r.material[0].side,x.raycast(e,h);for(let e=0,r=h.length;e<r;e++){const r=h[e];r.instanceId=a,r.object=this,t.push(r)}h.length=0}}}const M=f.createContext(null),b=new l.Matrix4,w=new l.Matrix4,v=new l.Matrix4,j=new l.Vector3,E=new l.Quaternion,A=new l.Vector3,O=f.forwardRef((({context:e,children:t,...r},a)=>{f.useMemo((()=>n.extend({PositionMesh:g})),[]);const c=f.useRef(),{subscribe:i,getParent:s}=f.useContext(e||M);return f.useLayoutEffect((()=>i(c)),[]),f.createElement("positionMesh",u.default({instance:s(),instanceKey:c,ref:d.default([a,c])},r),t)})),P=f.forwardRef((({children:e,range:t,limit:r=1e3,frames:a=1/0,...c},s)=>{const[{context:o,instance:m}]=f.useState((()=>{const e=f.createContext(null);return{context:e,instance:f.forwardRef(((t,r)=>f.createElement(O,u.default({context:e},t,{ref:r}))))}})),y=f.useRef(null),[p,h]=f.useState([]),[[x,g]]=f.useState((()=>{const e=new Float32Array(16*r);for(let t=0;t<r;t++)v.identity().toArray(e,16*t);return[e,new Float32Array([...new Array(3*r)].map((()=>1)))]}));f.useEffect((()=>{y.current.instanceMatrix.needsUpdate=!0}));let P=0,R=0;n.useFrame((()=>{if(a===1/0||P<a){y.current.updateMatrix(),y.current.updateMatrixWorld(),b.copy(y.current.matrixWorld).invert(),R=Math.min(r,void 0!==t?t:r,p.length),y.current.count=R,i.setUpdateRange(y.current.instanceMatrix,{offset:0,count:16*R}),i.setUpdateRange(y.current.instanceColor,{offset:0,count:3*R});for(let e=0;e<p.length;e++){const t=p[e].current;t.matrixWorld.decompose(j,E,A),w.compose(j,E,A).premultiply(b),w.toArray(x,16*e),y.current.instanceMatrix.needsUpdate=!0,t.color.toArray(g,3*e),y.current.instanceColor.needsUpdate=!0}P++}}));const U=f.useMemo((()=>({getParent:()=>y,subscribe:e=>(h((t=>[...t,e])),()=>h((t=>t.filter((t=>t.current!==e.current)))))})),[]);return f.createElement("instancedMesh",u.default({userData:{instances:p},matrixAutoUpdate:!1,ref:d.default([s,y]),args:[null,null,0],raycast:()=>null},c),f.createElement("instancedBufferAttribute",{attach:"instanceMatrix",count:x.length/16,array:x,itemSize:16,usage:l.DynamicDrawUsage}),f.createElement("instancedBufferAttribute",{attach:"instanceColor",count:g.length/3,array:g,itemSize:3,usage:l.DynamicDrawUsage}),"function"==typeof e?f.createElement(o.Provider,{value:U},e(m)):f.createElement(M.Provider,{value:U},e))})),R=f.forwardRef((function({meshes:e,children:t,...r},n){const a=Array.isArray(e);if(!a)for(const t of Object.keys(e))e[t].isMesh||delete e[t];return f.createElement("group",{ref:n},f.createElement(m.default,{components:(a?e:Object.values(e)).map((({geometry:e,material:t})=>f.createElement(P,u.default({key:e.uuid,geometry:e,material:t},r))))},(r=>a?t(...r):t(Object.keys(e).filter((t=>e[t].isMesh)).reduce(((e,t,n)=>({...e,[t]:r[n]})),{})))))}));exports.Instance=O,exports.Instances=P,exports.Merged=R;

package/core/Instances.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { extend, useFrame } from '@react-three/fiber';
 import mergeRefs from 'react-merge-refs';
 import Composer from 'react-composer';
+import { setUpdateRange } from '../helpers/deprecated.js';
 
 const _instanceLocalMatrix = /* @__PURE__ */new THREE.Matrix4();
 const _instanceWorldMatrix = /* @__PURE__ */new THREE.Matrix4();
@@ -114,17 +115,23 @@ const Instances = /* @__PURE__ */React.forwardRef(({
     // We might be a frame too late? 🤷‍♂️
     parentRef.current.instanceMatrix.needsUpdate = true;
   });
+  let iterations = 0;
   let count = 0;
-  let updateRange = 0;
   useFrame(() => {
-    if (frames === Infinity || count < frames) {
+    if (frames === Infinity || iterations < frames) {
       parentRef.current.updateMatrix();
       parentRef.current.updateMatrixWorld();
       parentMatrix.copy(parentRef.current.matrixWorld).invert();
-      updateRange = Math.min(limit, range !== undefined ? range : limit, instances.length);
-      parentRef.current.count = updateRange;
-      parentRef.current.instanceMatrix.updateRange.count = updateRange * 16;
-      parentRef.current.instanceColor.updateRange.count = updateRange * 3;
+      count = Math.min(limit, range !== undefined ? range : limit, instances.length);
+      parentRef.current.count = count;
+      setUpdateRange(parentRef.current.instanceMatrix, {
+        offset: 0,
+        count: count * 16
+      });
+      setUpdateRange(parentRef.current.instanceColor, {
+        offset: 0,
+        count: count * 3
+      });
       for (let i = 0; i < instances.length; i++) {
         const instance = instances[i].current;
         // Multiply the inverse of the InstancedMesh world matrix or else
@@ -136,7 +143,7 @@ const Instances = /* @__PURE__ */React.forwardRef(({
         instance.color.toArray(colors, i * 3);
         parentRef.current.instanceColor.needsUpdate = true;
       }
-      count++;
+      iterations++;
     }
   });
   const api = React.useMemo(() => ({

package/core/Splat.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),n=require("react"),r=require("@react-three/fiber"),o=require("./shaderMaterial.cjs.js");function a(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(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var c=a(e),s=l(t),i=l(n);const u=o.shaderMaterial({alphaTest:0,viewport:new s.Vector2(1980,1080),focal:1e3,centerAndScaleTexture:null,covAndColorTexture:null},"\n    precision highp sampler2D;\n    precision highp usampler2D;\n    out vec4 vColor;\n    out vec3 vPosition;\n    uniform vec2 resolution;\n    uniform vec2 viewport;\n    uniform float focal;\n    attribute uint splatIndex;\n    uniform sampler2D centerAndScaleTexture;\n    uniform usampler2D covAndColorTexture;    \n\n    vec2 unpackInt16(in uint value) {\n      int v = int(value);\n      int v0 = v >> 16;\n      int v1 = (v & 0xFFFF);\n      if((v & 0x8000) != 0)\n        v1 |= 0xFFFF0000;\n      return vec2(float(v1), float(v0));\n    }\n\n    void main () {\n      ivec2 texSize = textureSize(centerAndScaleTexture, 0);\n      ivec2 texPos = ivec2(splatIndex%uint(texSize.x), splatIndex/uint(texSize.x));\n      vec4 centerAndScaleData = texelFetch(centerAndScaleTexture, texPos, 0);\n      vec4 center = vec4(centerAndScaleData.xyz, 1);\n      vec4 camspace = modelViewMatrix * center;\n      vec4 pos2d = projectionMatrix * camspace;\n\n      float bounds = 1.2 * pos2d.w;\n      if (pos2d.z < -pos2d.w || pos2d.x < -bounds || pos2d.x > bounds\n        || pos2d.y < -bounds || pos2d.y > bounds) {\n        gl_Position = vec4(0.0, 0.0, 2.0, 1.0);\n        return;\n      }\n\n      uvec4 covAndColorData = texelFetch(covAndColorTexture, texPos, 0);\n      vec2 cov3D_M11_M12 = unpackInt16(covAndColorData.x) * centerAndScaleData.w;\n      vec2 cov3D_M13_M22 = unpackInt16(covAndColorData.y) * centerAndScaleData.w;\n      vec2 cov3D_M23_M33 = unpackInt16(covAndColorData.z) * centerAndScaleData.w;\n      mat3 Vrk = mat3(\n        cov3D_M11_M12.x, cov3D_M11_M12.y, cov3D_M13_M22.x,\n        cov3D_M11_M12.y, cov3D_M13_M22.y, cov3D_M23_M33.x,\n        cov3D_M13_M22.x, cov3D_M23_M33.x, cov3D_M23_M33.y\n      );\n\n      mat3 J = mat3(\n        focal / camspace.z, 0., -(focal * camspace.x) / (camspace.z * camspace.z),\n        0., focal / camspace.z, -(focal * camspace.y) / (camspace.z * camspace.z),\n        0., 0., 0.\n      );\n\n      mat3 W = transpose(mat3(modelViewMatrix));\n      mat3 T = W * J;\n      mat3 cov = transpose(T) * Vrk * T;\n      vec2 vCenter = vec2(pos2d) / pos2d.w;\n      float diagonal1 = cov[0][0] + 0.3;\n      float offDiagonal = cov[0][1];\n      float diagonal2 = cov[1][1] + 0.3;\n      float mid = 0.5 * (diagonal1 + diagonal2);\n      float radius = length(vec2((diagonal1 - diagonal2) / 2.0, offDiagonal));\n      float lambda1 = mid + radius;\n      float lambda2 = max(mid - radius, 0.1);\n      vec2 diagonalVector = normalize(vec2(offDiagonal, lambda1 - diagonal1));\n      vec2 v1 = min(sqrt(2.0 * lambda1), 1024.0) * diagonalVector;\n      vec2 v2 = min(sqrt(2.0 * lambda2), 1024.0) * vec2(diagonalVector.y, -diagonalVector.x);\n      uint colorUint = covAndColorData.w;\n      vColor = vec4(\n        float(colorUint & uint(0xFF)) / 255.0,\n        float((colorUint >> uint(8)) & uint(0xFF)) / 255.0,\n        float((colorUint >> uint(16)) & uint(0xFF)) / 255.0,\n        float(colorUint >> uint(24)) / 255.0\n      );\n      vPosition = position;\n\n      gl_Position = vec4(\n        vCenter \n          + position.x * v2 / viewport * 2.0 \n          + position.y * v1 / viewport * 2.0, pos2d.z / pos2d.w, 1.0);\n    }\n    ",`\n    #include <alphatest_pars_fragment>\n    #include <alphahash_pars_fragment>\n    in vec4 vColor;\n    in vec3 vPosition;\n    void main () {\n      float A = -dot(vPosition.xy, vPosition.xy);\n      if (A < -4.0) discard;\n      float B = exp(A) * vColor.a;\n      vec4 diffuseColor = vec4(vColor.rgb, B);\n      #include <alphatest_fragment>\n      #include <alphahash_fragment>\n      gl_FragColor = diffuseColor;\n      #include <tonemapping_fragment>\n      #include <${parseInt(s.REVISION.replace(/\D+/g,""))>=154?"colorspace_fragment":"encodings_fragment"}>\n    }\n  `);function d(e){let t=null,n=0;e.onmessage=r=>{if("push"==r.data.method){0===n&&(t=new Float32Array(r.data.length));const e=new Float32Array(r.data.matrices);t.set(e,n),n+=e.length}else if("sort"==r.data.method&&null!==t){const n=function(e,n=!1){const r=t.length/16;let o=-1/0,a=1/0;const l=new Float32Array(r),c=new Int32Array(l.buffer),s=new Int32Array(r);let i=0;for(let c=0;c<r;c++){const r=e[0]*t[16*c+12]+e[1]*t[16*c+13]+e[2]*t[16*c+14]+e[3];(n||r<0&&t[16*c+15]>-1e-4*r)&&(l[i]=r,s[i]=c,i++,r>o&&(o=r),r<a&&(a=r))}const u=65535/(o-a),d=new Uint32Array(65536);for(let e=0;e<i;e++)c[e]=(l[e]-a)*u|0,d[c[e]]++;const f=new Uint32Array(65536);for(let e=1;e<65536;e++)f[e]=f[e-1]+d[e-1];const x=new Uint32Array(i);for(let e=0;e<i;e++)x[f[c[e]]++]=s[e];return x}(new Float32Array(r.data.view),r.data.hashed);e.postMessage({indices:n,key:r.data.key},[n.buffer])}}}class f extends s.Loader{constructor(...e){super(...e),this.gl=null,this.chunkSize=25e3}load(e,t,n,r){const o={gl:this.gl,url:this.manager.resolveURL(e),worker:new Worker(URL.createObjectURL(new Blob(["(",d.toString(),")(self)"],{type:"application/javascript"}))),manager:this.manager,update:(e,t,n)=>function(e,t,n,r){if(e.updateMatrixWorld(),t.gl.getCurrentViewport(n.viewport),n.material.viewport.x=n.viewport.z,n.material.viewport.y=n.viewport.w,n.material.focal=n.viewport.w/2*Math.abs(e.projectionMatrix.elements[5]),n.ready){if(r&&n.sorted)return;n.ready=!1;const e=new Float32Array([n.modelViewMatrix.elements[2],-n.modelViewMatrix.elements[6],n.modelViewMatrix.elements[10],n.modelViewMatrix.elements[14]]);t.worker.postMessage({method:"sort",src:t.url,key:n.uuid,view:e.buffer,hashed:r},[e.buffer]),r&&t.loaded&&(n.sorted=!0)}}(t,o,e,n),connect:e=>function(e,t){e.loading||async function(e){e.loading=!0;let t=0,n=0;const r=[];let o=0;const a=0!==e.totalDownloadBytes;for(;;)try{const{value:l,done:c}=await e.stream.read();if(c)break;if(t+=l.length,null!=e.totalDownloadBytes){const n=t/e.totalDownloadBytes*100;if(e.onProgress&&n-o>1){const r=new ProgressEvent("progress",{lengthComputable:a,loaded:t,total:e.totalDownloadBytes});e.onProgress(r),o=n}}r.push(l);const s=t-n;if(null!=e.totalDownloadBytes&&s>e.rowLength*e.chunkSize){let t=Math.floor(s/e.rowLength);const o=new Uint8Array(s);let l=0;for(const e of r)o.set(e,l),l+=e.length;if(r.length=0,s>t*e.rowLength){const n=new Uint8Array(s-t*e.rowLength);n.set(o.subarray(s-n.length,s),0),r.push(n)}const c=new Uint8Array(t*e.rowLength);c.set(o.subarray(0,c.byteLength),0);const i=x(e,c.buffer,t);if(e.worker.postMessage({method:"push",src:e.url,length:16*e.numVertices,matrices:i.buffer},[i.buffer]),n+=t*e.rowLength,e.onProgress){const t=new ProgressEvent("progress",{lengthComputable:a,loaded:e.totalDownloadBytes,total:e.totalDownloadBytes});e.onProgress(t)}}}catch(e){console.error(e);break}if(t-n>0){let t=new Uint8Array(r.reduce(((e,t)=>e+t.length),0)),n=0;for(const e of r)t.set(e,n),n+=e.length;let o=Math.floor(t.byteLength/e.rowLength);const a=x(e,t.buffer,o);e.worker.postMessage({method:"push",src:e.url,length:16*o,matrices:a.buffer},[a.buffer])}e.loaded=!0,e.manager.itemEnd(e.url)}(e);t.ready=!1,t.pm=new s.Matrix4,t.vm1=new s.Matrix4,t.vm2=new s.Matrix4,t.viewport=new s.Vector4;let n=new Uint32Array(e.bufferTextureWidth*e.bufferTextureHeight);const r=new s.InstancedBufferAttribute(n,1,!1);r.setUsage(s.DynamicDrawUsage);const o=t.geometry=new s.InstancedBufferGeometry,a=new Float32Array(18),l=new s.BufferAttribute(a,3);function c(e){if(t&&e.data.key===t.uuid){let n=new Uint32Array(e.data.indices);o.attributes.splatIndex.set(n),o.attributes.splatIndex.needsUpdate=!0,o.instanceCount=n.length,t.ready=!0}}async function i(){for(;;){const t=e.gl.properties.get(e.centerAndScaleTexture),n=e.gl.properties.get(e.covAndColorTexture);if(null!=t&&t.__webglTexture&&null!=n&&n.__webglTexture&&e.loadedVertexCount>0)break;await new Promise((e=>setTimeout(e,10)))}t.ready=!0}return o.setAttribute("position",l),l.setXYZ(2,-2,2,0),l.setXYZ(1,2,2,0),l.setXYZ(0,-2,-2,0),l.setXYZ(5,-2,-2,0),l.setXYZ(4,2,2,0),l.setXYZ(3,2,-2,0),l.needsUpdate=!0,o.setAttribute("splatIndex",r),o.instanceCount=1,e.worker.addEventListener("message",c),i(),()=>e.worker.removeEventListener("message",c)}(o,e),loading:!1,loaded:!1,loadedVertexCount:0,chunkSize:this.chunkSize,totalDownloadBytes:0,numVertices:0,rowLength:32,maxVertexes:0,bufferTextureWidth:0,bufferTextureHeight:0,stream:null,centerAndScaleData:null,covAndColorData:null,covAndColorTexture:null,centerAndScaleTexture:null,onProgress:n};(async function(e){e.manager.itemStart(e.url);const t=await fetch(e.url);if(null===t.body)throw"Failed to fetch file";let n=t.headers.get("Content-Length");const r=n?parseInt(n):void 0;if(null==r)throw"Failed to get content length";e.stream=t.body.getReader(),e.totalDownloadBytes=r,e.numVertices=Math.floor(e.totalDownloadBytes/e.rowLength);const o=e.gl.getContext();let a=o.getParameter(o.MAX_TEXTURE_SIZE);e.maxVertexes=a*a,e.numVertices>e.maxVertexes&&(e.numVertices=e.maxVertexes);return e.bufferTextureWidth=a,e.bufferTextureHeight=Math.floor((e.numVertices-1)/a)+1,e.centerAndScaleData=new Float32Array(e.bufferTextureWidth*e.bufferTextureHeight*4),e.covAndColorData=new Uint32Array(e.bufferTextureWidth*e.bufferTextureHeight*4),e.centerAndScaleTexture=new s.DataTexture(e.centerAndScaleData,e.bufferTextureWidth,e.bufferTextureHeight,s.RGBAFormat,s.FloatType),e.centerAndScaleTexture.needsUpdate=!0,e.covAndColorTexture=new s.DataTexture(e.covAndColorData,e.bufferTextureWidth,e.bufferTextureHeight,s.RGBAIntegerFormat,s.UnsignedIntType),e.covAndColorTexture.internalFormat="RGBA32UI",e.covAndColorTexture.needsUpdate=!0,e})(o).then(t).catch((e=>{null==r||r(e),o.manager.itemError(o.url)}))}}function x(e,t,n){const r=e.gl.getContext();if(e.loadedVertexCount+n>e.maxVertexes&&(n=e.maxVertexes-e.loadedVertexCount),n<=0)throw"Failed to parse file";const o=new Uint8Array(t),a=new Float32Array(t),l=new Float32Array(16*n),c=new Uint8Array(e.covAndColorData.buffer),i=new Int16Array(e.covAndColorData.buffer);for(let t=0;t<n;t++){const n=new s.Quaternion(-(o[32*t+28+1]-128)/128,(o[32*t+28+2]-128)/128,(o[32*t+28+3]-128)/128,-(o[32*t+28+0]-128)/128);n.invert();const r=new s.Vector3(a[8*t+0],a[8*t+1],-a[8*t+2]),u=new s.Vector3(a[8*t+3+0],a[8*t+3+1],a[8*t+3+2]),d=new s.Matrix4;d.makeRotationFromQuaternion(n),d.transpose(),d.scale(u);const f=d.clone();d.transpose(),d.premultiply(f),d.setPosition(r);const x=[0,1,2,5,6,10];let p=0;for(let e=0;e<x.length;e++)Math.abs(d.elements[x[e]])>p&&(p=Math.abs(d.elements[x[e]]));let g=4*e.loadedVertexCount+4*t;e.centerAndScaleData[g+0]=r.x,e.centerAndScaleData[g+1]=-r.y,e.centerAndScaleData[g+2]=r.z,e.centerAndScaleData[g+3]=p/32767,g=8*e.loadedVertexCount+4*t*2;for(let e=0;e<x.length;e++)i[g+e]=32767*d.elements[x[e]]/p;g=16*e.loadedVertexCount+4*(4*t+3);const m=new s.Color(o[32*t+24+0]/255,o[32*t+24+1]/255,o[32*t+24+2]/255);m.convertSRGBToLinear(),c[g+0]=255*m.r,c[g+1]=255*m.g,c[g+2]=255*m.b,c[g+3]=o[32*t+24+3],d.elements[15]=Math.max(u.x,u.y,u.z)*o[32*t+24+3]/255;for(let e=0;e<16;e++)l[16*t+e]=d.elements[e]}for(;n>0;){let t=0,o=0;const a=e.loadedVertexCount%e.bufferTextureWidth,l=Math.floor(e.loadedVertexCount/e.bufferTextureWidth);e.loadedVertexCount%e.bufferTextureWidth!=0?(t=Math.min(e.bufferTextureWidth,a+n)-a,o=1):Math.floor(n/e.bufferTextureWidth)>0?(t=e.bufferTextureWidth,o=Math.floor(n/e.bufferTextureWidth)):(t=n%e.bufferTextureWidth,o=1);const c=e.gl.properties.get(e.centerAndScaleTexture);r.bindTexture(r.TEXTURE_2D,c.__webglTexture),r.texSubImage2D(r.TEXTURE_2D,0,a,l,t,o,r.RGBA,r.FLOAT,e.centerAndScaleData,4*e.loadedVertexCount);const s=e.gl.properties.get(e.covAndColorTexture);r.bindTexture(r.TEXTURE_2D,s.__webglTexture),r.texSubImage2D(r.TEXTURE_2D,0,a,l,t,o,r.RGBA_INTEGER,r.UNSIGNED_INT,e.covAndColorData,4*e.loadedVertexCount),e.gl.resetState(),e.loadedVertexCount+=t*o,n-=t*o}return l}exports.Splat=function({src:e,toneMapped:t=!1,alphaTest:n=0,alphaHash:o=!1,chunkSize:a=25e3,...l}){r.extend({SplatMaterial:u});const d=i.useRef(null),x=r.useThree((e=>e.gl)),p=r.useThree((e=>e.camera)),g=r.useLoader(f,e,(e=>{e.gl=x,e.chunkSize=a}));return i.useLayoutEffect((()=>g.connect(d.current)),[e]),r.useFrame((()=>g.update(d.current,p,o))),i.createElement("mesh",c.default({ref:d,frustumCulled:!1},l),i.createElement("splatMaterial",{key:`${e}/${n}/${o}${u.key}`,transparent:!o,depthTest:!0,alphaTest:o?0:n,centerAndScaleTexture:g.centerAndScaleTexture,covAndColorTexture:g.covAndColorTexture,depthWrite:!!o||n>0,blending:o?s.NormalBlending:s.CustomBlending,blendSrcAlpha:s.OneFactor,alphaHash:!!o,toneMapped:t}))};

package/core/Splat.d.ts

@@ -0,0 +1,58 @@
+import * as THREE from 'three';
+import * as React from 'react';
+export type SplatMaterialType = {
+    alphaTest?: number;
+    alphaHash?: boolean;
+    centerAndScaleTexture?: THREE.DataTexture;
+    covAndColorTexture?: THREE.DataTexture;
+    viewport?: THREE.Vector2;
+    focal?: number;
+};
+export type TargetMesh = THREE.Mesh<THREE.InstancedBufferGeometry, THREE.ShaderMaterial & SplatMaterialType> & {
+    ready: boolean;
+    sorted: boolean;
+    pm: THREE.Matrix4;
+    vm1: THREE.Matrix4;
+    vm2: THREE.Matrix4;
+    viewport: THREE.Vector4;
+};
+export type SharedState = {
+    url: string;
+    gl: THREE.WebGLRenderer;
+    worker: Worker;
+    manager: THREE.LoadingManager;
+    stream: ReadableStreamDefaultReader<Uint8Array>;
+    loading: boolean;
+    loaded: boolean;
+    loadedVertexCount: number;
+    rowLength: number;
+    maxVertexes: number;
+    chunkSize: number;
+    totalDownloadBytes: number;
+    numVertices: number;
+    bufferTextureWidth: number;
+    bufferTextureHeight: number;
+    centerAndScaleData: Float32Array;
+    covAndColorData: Uint32Array;
+    covAndColorTexture: THREE.DataTexture;
+    centerAndScaleTexture: THREE.DataTexture;
+    connect(target: TargetMesh): () => void;
+    update(target: TargetMesh, camera: THREE.Camera, hashed: boolean): void;
+    onProgress?: (event: ProgressEvent) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            splatMaterial: SplatMaterialType & JSX.IntrinsicElements['shaderMaterial'];
+        }
+    }
+}
+type SplatProps = {
+    src: string;
+    toneMapped?: boolean;
+    alphaTest?: number;
+    alphaHash?: boolean;
+    chunkSize?: number;
+} & JSX.IntrinsicElements['mesh'];
+export declare function Splat({ src, toneMapped, alphaTest, alphaHash, chunkSize, ...props }: SplatProps): React.JSX.Element;
+export {};