npm - @react-three/drei - Versions diffs - 9.89.2 → 9.90.0 - Mend

@react-three/drei 9.89.2 → 9.90.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/README.md +33 -5
package/core/Splat.cjs.js +1 -0
package/core/Splat.d.ts +58 -0
package/core/Splat.js +505 -0
package/core/index.cjs.js +1 -1
package/core/index.d.ts +1 -0
package/core/index.js +1 -0
package/core/useVideoTexture.cjs.js +1 -1
package/core/useVideoTexture.js +6 -1
package/index.cjs.js +1 -1
package/index.js +1 -0
package/materials/SpotLightMaterial.cjs.js +1 -1
package/materials/SpotLightMaterial.js +69 -61
package/native/index.cjs.js +1 -1
package/native/index.js +1 -0
package/package.json +1 -1
package/react-three-drei-0.0.0-semantic-release.tgz +0 -0
package/web/index.cjs.js +1 -1
package/web/index.js +1 -0

package/README.md CHANGED Viewed

@@ -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,33 @@ 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" />
+```
 # Shaders
 #### MeshReflectorMaterial
@@ -2371,13 +2399,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/Splat.cjs.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 {};

package/core/Splat.js ADDED Viewed

@@ -0,0 +1,505 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { extend, useThree, useLoader, useFrame } from '@react-three/fiber';
+import { shaderMaterial } from './shaderMaterial.js';
+const SplatMaterial = /* @__PURE__ */shaderMaterial({
+  alphaTest: 0,
+  viewport: /* @__PURE__ */new THREE.Vector2(1980, 1080),
+  focal: 1000.0,
+  centerAndScaleTexture: null,
+  covAndColorTexture: null
+}, /*glsl*/`
+    precision highp sampler2D;
+    precision highp usampler2D;
+    out vec4 vColor;
+    out vec3 vPosition;
+    uniform vec2 resolution;
+    uniform vec2 viewport;
+    uniform float focal;
+    attribute uint splatIndex;
+    uniform sampler2D centerAndScaleTexture;
+    uniform usampler2D covAndColorTexture;
+    vec2 unpackInt16(in uint value) {
+      int v = int(value);
+      int v0 = v >> 16;
+      int v1 = (v & 0xFFFF);
+      if((v & 0x8000) != 0)
+        v1 |= 0xFFFF0000;
+      return vec2(float(v1), float(v0));
+    }
+    void main () {
+      ivec2 texSize = textureSize(centerAndScaleTexture, 0);
+      ivec2 texPos = ivec2(splatIndex%uint(texSize.x), splatIndex/uint(texSize.x));
+      vec4 centerAndScaleData = texelFetch(centerAndScaleTexture, texPos, 0);
+      vec4 center = vec4(centerAndScaleData.xyz, 1);
+      vec4 camspace = modelViewMatrix * center;
+      vec4 pos2d = projectionMatrix * camspace;
+      float bounds = 1.2 * pos2d.w;
+      if (pos2d.z < -pos2d.w || pos2d.x < -bounds || pos2d.x > bounds
+        || pos2d.y < -bounds || pos2d.y > bounds) {
+        gl_Position = vec4(0.0, 0.0, 2.0, 1.0);
+        return;
+      }
+      uvec4 covAndColorData = texelFetch(covAndColorTexture, texPos, 0);
+      vec2 cov3D_M11_M12 = unpackInt16(covAndColorData.x) * centerAndScaleData.w;
+      vec2 cov3D_M13_M22 = unpackInt16(covAndColorData.y) * centerAndScaleData.w;
+      vec2 cov3D_M23_M33 = unpackInt16(covAndColorData.z) * centerAndScaleData.w;
+      mat3 Vrk = mat3(
+        cov3D_M11_M12.x, cov3D_M11_M12.y, cov3D_M13_M22.x,
+        cov3D_M11_M12.y, cov3D_M13_M22.y, cov3D_M23_M33.x,
+        cov3D_M13_M22.x, cov3D_M23_M33.x, cov3D_M23_M33.y
+      );
+      mat3 J = mat3(
+        focal / camspace.z, 0., -(focal * camspace.x) / (camspace.z * camspace.z),
+        0., focal / camspace.z, -(focal * camspace.y) / (camspace.z * camspace.z),
+        0., 0., 0.
+      );
+      mat3 W = transpose(mat3(modelViewMatrix));
+      mat3 T = W * J;
+      mat3 cov = transpose(T) * Vrk * T;
+      vec2 vCenter = vec2(pos2d) / pos2d.w;
+      float diagonal1 = cov[0][0] + 0.3;
+      float offDiagonal = cov[0][1];
+      float diagonal2 = cov[1][1] + 0.3;
+      float mid = 0.5 * (diagonal1 + diagonal2);
+      float radius = length(vec2((diagonal1 - diagonal2) / 2.0, offDiagonal));
+      float lambda1 = mid + radius;
+      float lambda2 = max(mid - radius, 0.1);
+      vec2 diagonalVector = normalize(vec2(offDiagonal, lambda1 - diagonal1));
+      vec2 v1 = min(sqrt(2.0 * lambda1), 1024.0) * diagonalVector;
+      vec2 v2 = min(sqrt(2.0 * lambda2), 1024.0) * vec2(diagonalVector.y, -diagonalVector.x);
+      uint colorUint = covAndColorData.w;
+      vColor = vec4(
+        float(colorUint & uint(0xFF)) / 255.0,
+        float((colorUint >> uint(8)) & uint(0xFF)) / 255.0,
+        float((colorUint >> uint(16)) & uint(0xFF)) / 255.0,
+        float(colorUint >> uint(24)) / 255.0
+      );
+      vPosition = position;
+      gl_Position = vec4(
+        vCenter
+          + position.x * v2 / viewport * 2.0
+          + position.y * v1 / viewport * 2.0, pos2d.z / pos2d.w, 1.0);
+    }
+    `, /*glsl*/`
+    #include <alphatest_pars_fragment>
+    #include <alphahash_pars_fragment>
+    in vec4 vColor;
+    in vec3 vPosition;
+    void main () {
+      float A = -dot(vPosition.xy, vPosition.xy);
+      if (A < -4.0) discard;
+      float B = exp(A) * vColor.a;
+      vec4 diffuseColor = vec4(vColor.rgb, B);
+      #include <alphatest_fragment>
+      #include <alphahash_fragment>
+      gl_FragColor = diffuseColor;
+      #include <tonemapping_fragment>
+      #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+    }
+  `);
+function createWorker(self) {
+  let matrices = null;
+  let offset = 0;
+  function sortSplats(view, hashed = false) {
+    const vertexCount = matrices.length / 16;
+    const threshold = -0.0001;
+    let maxDepth = -Infinity;
+    let minDepth = Infinity;
+    const depthList = new Float32Array(vertexCount);
+    const sizeList = new Int32Array(depthList.buffer);
+    const validIndexList = new Int32Array(vertexCount);
+    let validCount = 0;
+    for (let i = 0; i < vertexCount; i++) {
+      // Sign of depth is reversed
+      const depth = view[0] * matrices[i * 16 + 12] + view[1] * matrices[i * 16 + 13] + view[2] * matrices[i * 16 + 14] + view[3];
+      // Skip behind of camera and small, transparent splat
+      if (hashed || depth < 0 && matrices[i * 16 + 15] > threshold * depth) {
+        depthList[validCount] = depth;
+        validIndexList[validCount] = i;
+        validCount++;
+        if (depth > maxDepth) maxDepth = depth;
+        if (depth < minDepth) minDepth = depth;
+      }
+    }
+    // This is a 16 bit single-pass counting sort
+    const depthInv = (256 * 256 - 1) / (maxDepth - minDepth);
+    const counts0 = new Uint32Array(256 * 256);
+    for (let i = 0; i < validCount; i++) {
+      sizeList[i] = (depthList[i] - minDepth) * depthInv | 0;
+      counts0[sizeList[i]]++;
+    }
+    const starts0 = new Uint32Array(256 * 256);
+    for (let i = 1; i < 256 * 256; i++) starts0[i] = starts0[i - 1] + counts0[i - 1];
+    const depthIndex = new Uint32Array(validCount);
+    for (let i = 0; i < validCount; i++) depthIndex[starts0[sizeList[i]]++] = validIndexList[i];
+    return depthIndex;
+  }
+  self.onmessage = e => {
+    if (e.data.method == 'push') {
+      if (offset === 0) matrices = new Float32Array(e.data.length);
+      const new_matrices = new Float32Array(e.data.matrices);
+      matrices.set(new_matrices, offset);
+      offset += new_matrices.length;
+    } else if (e.data.method == 'sort') {
+      if (matrices !== null) {
+        const indices = sortSplats(new Float32Array(e.data.view), e.data.hashed);
+        // @ts-ignore
+        self.postMessage({
+          indices,
+          key: e.data.key
+        }, [indices.buffer]);
+      }
+    }
+  };
+}
+class SplatLoader extends THREE.Loader {
+  constructor(...args) {
+    super(...args);
+    // WebGLRenderer, needs to be filled out!
+    this.gl = null;
+    // Default chunk size for lazy loading
+    this.chunkSize = 25000;
+  }
+  load(url, onLoad, onProgress, onError) {
+    const shared = {
+      gl: this.gl,
+      url: this.manager.resolveURL(url),
+      worker: new Worker(URL.createObjectURL(new Blob(['(', createWorker.toString(), ')(self)'], {
+        type: 'application/javascript'
+      }))),
+      manager: this.manager,
+      update: (target, camera, hashed) => update(camera, shared, target, hashed),
+      connect: target => connect(shared, target),
+      loading: false,
+      loaded: false,
+      loadedVertexCount: 0,
+      chunkSize: this.chunkSize,
+      totalDownloadBytes: 0,
+      numVertices: 0,
+      rowLength: 3 * 4 + 3 * 4 + 4 + 4,
+      maxVertexes: 0,
+      bufferTextureWidth: 0,
+      bufferTextureHeight: 0,
+      stream: null,
+      centerAndScaleData: null,
+      covAndColorData: null,
+      covAndColorTexture: null,
+      centerAndScaleTexture: null,
+      onProgress
+    };
+    load(shared).then(onLoad).catch(e => {
+      onError == null || onError(e);
+      shared.manager.itemError(shared.url);
+    });
+  }
+}
+async function load(shared) {
+  shared.manager.itemStart(shared.url);
+  const data = await fetch(shared.url);
+  if (data.body === null) throw 'Failed to fetch file';
+  let _totalDownloadBytes = data.headers.get('Content-Length');
+  const totalDownloadBytes = _totalDownloadBytes ? parseInt(_totalDownloadBytes) : undefined;
+  if (totalDownloadBytes == undefined) throw 'Failed to get content length';
+  shared.stream = data.body.getReader();
+  shared.totalDownloadBytes = totalDownloadBytes;
+  shared.numVertices = Math.floor(shared.totalDownloadBytes / shared.rowLength);
+  const context = shared.gl.getContext();
+  let maxTextureSize = context.getParameter(context.MAX_TEXTURE_SIZE);
+  shared.maxVertexes = maxTextureSize * maxTextureSize;
+  if (shared.numVertices > shared.maxVertexes) shared.numVertices = shared.maxVertexes;
+  shared.bufferTextureWidth = maxTextureSize;
+  shared.bufferTextureHeight = Math.floor((shared.numVertices - 1) / maxTextureSize) + 1;
+  shared.centerAndScaleData = new Float32Array(shared.bufferTextureWidth * shared.bufferTextureHeight * 4);
+  shared.covAndColorData = new Uint32Array(shared.bufferTextureWidth * shared.bufferTextureHeight * 4);
+  shared.centerAndScaleTexture = new THREE.DataTexture(shared.centerAndScaleData, shared.bufferTextureWidth, shared.bufferTextureHeight, THREE.RGBAFormat, THREE.FloatType);
+  shared.centerAndScaleTexture.needsUpdate = true;
+  shared.covAndColorTexture = new THREE.DataTexture(shared.covAndColorData, shared.bufferTextureWidth, shared.bufferTextureHeight, THREE.RGBAIntegerFormat, THREE.UnsignedIntType);
+  shared.covAndColorTexture.internalFormat = 'RGBA32UI';
+  shared.covAndColorTexture.needsUpdate = true;
+  return shared;
+}
+async function lazyLoad(shared) {
+  shared.loading = true;
+  let bytesDownloaded = 0;
+  let bytesProcessed = 0;
+  const chunks = [];
+  let lastReportedProgress = 0;
+  const lengthComputable = shared.totalDownloadBytes !== 0;
+  while (true) {
+    try {
+      const {
+        value,
+        done
+      } = await shared.stream.read();
+      if (done) break;
+      bytesDownloaded += value.length;
+      if (shared.totalDownloadBytes != undefined) {
+        const percent = bytesDownloaded / shared.totalDownloadBytes * 100;
+        if (shared.onProgress && percent - lastReportedProgress > 1) {
+          const event = new ProgressEvent('progress', {
+            lengthComputable,
+            loaded: bytesDownloaded,
+            total: shared.totalDownloadBytes
+          });
+          shared.onProgress(event);
+          lastReportedProgress = percent;
+        }
+      }
+      chunks.push(value);
+      const bytesRemains = bytesDownloaded - bytesProcessed;
+      if (shared.totalDownloadBytes != undefined && bytesRemains > shared.rowLength * shared.chunkSize) {
+        let vertexCount = Math.floor(bytesRemains / shared.rowLength);
+        const concatenatedChunksbuffer = new Uint8Array(bytesRemains);
+        let offset = 0;
+        for (const chunk of chunks) {
+          concatenatedChunksbuffer.set(chunk, offset);
+          offset += chunk.length;
+        }
+        chunks.length = 0;
+        if (bytesRemains > vertexCount * shared.rowLength) {
+          const extra_data = new Uint8Array(bytesRemains - vertexCount * shared.rowLength);
+          extra_data.set(concatenatedChunksbuffer.subarray(bytesRemains - extra_data.length, bytesRemains), 0);
+          chunks.push(extra_data);
+        }
+        const buffer = new Uint8Array(vertexCount * shared.rowLength);
+        buffer.set(concatenatedChunksbuffer.subarray(0, buffer.byteLength), 0);
+        const matrices = pushDataBuffer(shared, buffer.buffer, vertexCount);
+        shared.worker.postMessage({
+          method: 'push',
+          src: shared.url,
+          length: shared.numVertices * 16,
+          matrices: matrices.buffer
+        }, [matrices.buffer]);
+        bytesProcessed += vertexCount * shared.rowLength;
+        if (shared.onProgress) {
+          const event = new ProgressEvent('progress', {
+            lengthComputable,
+            loaded: shared.totalDownloadBytes,
+            total: shared.totalDownloadBytes
+          });
+          shared.onProgress(event);
+        }
+      }
+    } catch (error) {
+      console.error(error);
+      break;
+    }
+  }
+  if (bytesDownloaded - bytesProcessed > 0) {
+    // Concatenate the chunks into a single Uint8Array
+    let concatenatedChunks = new Uint8Array(chunks.reduce((acc, chunk) => acc + chunk.length, 0));
+    let offset = 0;
+    for (const chunk of chunks) {
+      concatenatedChunks.set(chunk, offset);
+      offset += chunk.length;
+    }
+    let numVertices = Math.floor(concatenatedChunks.byteLength / shared.rowLength);
+    const matrices = pushDataBuffer(shared, concatenatedChunks.buffer, numVertices);
+    shared.worker.postMessage({
+      method: 'push',
+      src: shared.url,
+      length: numVertices * 16,
+      matrices: matrices.buffer
+    }, [matrices.buffer]);
+  }
+  shared.loaded = true;
+  shared.manager.itemEnd(shared.url);
+}
+function update(camera, shared, target, hashed) {
+  camera.updateMatrixWorld();
+  shared.gl.getCurrentViewport(target.viewport);
+  // @ts-ignore
+  target.material.viewport.x = target.viewport.z;
+  // @ts-ignore
+  target.material.viewport.y = target.viewport.w;
+  target.material.focal = target.viewport.w / 2.0 * Math.abs(camera.projectionMatrix.elements[5]);
+  if (target.ready) {
+    if (hashed && target.sorted) return;
+    target.ready = false;
+    const view = new Float32Array([target.modelViewMatrix.elements[2], -target.modelViewMatrix.elements[6], target.modelViewMatrix.elements[10], target.modelViewMatrix.elements[14]]);
+    shared.worker.postMessage({
+      method: 'sort',
+      src: shared.url,
+      key: target.uuid,
+      view: view.buffer,
+      hashed
+    }, [view.buffer]);
+    if (hashed && shared.loaded) target.sorted = true;
+  }
+}
+function connect(shared, target) {
+  if (!shared.loading) lazyLoad(shared);
+  target.ready = false;
+  target.pm = new THREE.Matrix4();
+  target.vm1 = new THREE.Matrix4();
+  target.vm2 = new THREE.Matrix4();
+  target.viewport = new THREE.Vector4();
+  let splatIndexArray = new Uint32Array(shared.bufferTextureWidth * shared.bufferTextureHeight);
+  const splatIndexes = new THREE.InstancedBufferAttribute(splatIndexArray, 1, false);
+  splatIndexes.setUsage(THREE.DynamicDrawUsage);
+  const geometry = target.geometry = new THREE.InstancedBufferGeometry();
+  const positionsArray = new Float32Array(6 * 3);
+  const positions = new THREE.BufferAttribute(positionsArray, 3);
+  geometry.setAttribute('position', positions);
+  positions.setXYZ(2, -2.0, 2.0, 0.0);
+  positions.setXYZ(1, 2.0, 2.0, 0.0);
+  positions.setXYZ(0, -2.0, -2.0, 0.0);
+  positions.setXYZ(5, -2.0, -2.0, 0.0);
+  positions.setXYZ(4, 2.0, 2.0, 0.0);
+  positions.setXYZ(3, 2.0, -2.0, 0.0);
+  positions.needsUpdate = true;
+  geometry.setAttribute('splatIndex', splatIndexes);
+  geometry.instanceCount = 1;
+  function listener(e) {
+    if (target && e.data.key === target.uuid) {
+      let indexes = new Uint32Array(e.data.indices);
+      // @ts-ignore
+      geometry.attributes.splatIndex.set(indexes);
+      geometry.attributes.splatIndex.needsUpdate = true;
+      geometry.instanceCount = indexes.length;
+      target.ready = true;
+    }
+  }
+  shared.worker.addEventListener('message', listener);
+  async function wait() {
+    while (true) {
+      const centerAndScaleTextureProperties = shared.gl.properties.get(shared.centerAndScaleTexture);
+      const covAndColorTextureProperties = shared.gl.properties.get(shared.covAndColorTexture);
+      if (centerAndScaleTextureProperties != null && centerAndScaleTextureProperties.__webglTexture && covAndColorTextureProperties != null && covAndColorTextureProperties.__webglTexture && shared.loadedVertexCount > 0) break;
+      await new Promise(resolve => setTimeout(resolve, 10));
+    }
+    target.ready = true;
+  }
+  wait();
+  return () => shared.worker.removeEventListener('message', listener);
+}
+function pushDataBuffer(shared, buffer, vertexCount) {
+  const context = shared.gl.getContext();
+  if (shared.loadedVertexCount + vertexCount > shared.maxVertexes) vertexCount = shared.maxVertexes - shared.loadedVertexCount;
+  if (vertexCount <= 0) throw 'Failed to parse file';
+  const u_buffer = new Uint8Array(buffer);
+  const f_buffer = new Float32Array(buffer);
+  const matrices = new Float32Array(vertexCount * 16);
+  const covAndColorData_uint8 = new Uint8Array(shared.covAndColorData.buffer);
+  const covAndColorData_int16 = new Int16Array(shared.covAndColorData.buffer);
+  for (let i = 0; i < vertexCount; i++) {
+    const quat = new THREE.Quaternion(-(u_buffer[32 * i + 28 + 1] - 128) / 128.0, (u_buffer[32 * i + 28 + 2] - 128) / 128.0, (u_buffer[32 * i + 28 + 3] - 128) / 128.0, -(u_buffer[32 * i + 28 + 0] - 128) / 128.0);
+    quat.invert();
+    const center = new THREE.Vector3(f_buffer[8 * i + 0], f_buffer[8 * i + 1], -f_buffer[8 * i + 2]);
+    const scale = new THREE.Vector3(f_buffer[8 * i + 3 + 0], f_buffer[8 * i + 3 + 1], f_buffer[8 * i + 3 + 2]);
+    const mtx = new THREE.Matrix4();
+    mtx.makeRotationFromQuaternion(quat);
+    mtx.transpose();
+    mtx.scale(scale);
+    const mtx_t = mtx.clone();
+    mtx.transpose();
+    mtx.premultiply(mtx_t);
+    mtx.setPosition(center);
+    const cov_indexes = [0, 1, 2, 5, 6, 10];
+    let max_value = 0.0;
+    for (let j = 0; j < cov_indexes.length; j++) if (Math.abs(mtx.elements[cov_indexes[j]]) > max_value) max_value = Math.abs(mtx.elements[cov_indexes[j]]);
+    let destOffset = shared.loadedVertexCount * 4 + i * 4;
+    shared.centerAndScaleData[destOffset + 0] = center.x;
+    shared.centerAndScaleData[destOffset + 1] = -center.y;
+    shared.centerAndScaleData[destOffset + 2] = center.z;
+    shared.centerAndScaleData[destOffset + 3] = max_value / 32767.0;
+    destOffset = shared.loadedVertexCount * 8 + i * 4 * 2;
+    for (let j = 0; j < cov_indexes.length; j++) covAndColorData_int16[destOffset + j] = mtx.elements[cov_indexes[j]] * 32767.0 / max_value;
+    // RGBA
+    destOffset = shared.loadedVertexCount * 16 + (i * 4 + 3) * 4;
+    const col = new THREE.Color(u_buffer[32 * i + 24 + 0] / 255, u_buffer[32 * i + 24 + 1] / 255, u_buffer[32 * i + 24 + 2] / 255);
+    col.convertSRGBToLinear();
+    covAndColorData_uint8[destOffset + 0] = col.r * 255;
+    covAndColorData_uint8[destOffset + 1] = col.g * 255;
+    covAndColorData_uint8[destOffset + 2] = col.b * 255;
+    covAndColorData_uint8[destOffset + 3] = u_buffer[32 * i + 24 + 3];
+    // Store scale and transparent to remove splat in sorting process
+    mtx.elements[15] = Math.max(scale.x, scale.y, scale.z) * u_buffer[32 * i + 24 + 3] / 255.0;
+    for (let j = 0; j < 16; j++) matrices[i * 16 + j] = mtx.elements[j];
+  }
+  while (vertexCount > 0) {
+    let width = 0;
+    let height = 0;
+    const xoffset = shared.loadedVertexCount % shared.bufferTextureWidth;
+    const yoffset = Math.floor(shared.loadedVertexCount / shared.bufferTextureWidth);
+    if (shared.loadedVertexCount % shared.bufferTextureWidth != 0) {
+      width = Math.min(shared.bufferTextureWidth, xoffset + vertexCount) - xoffset;
+      height = 1;
+    } else if (Math.floor(vertexCount / shared.bufferTextureWidth) > 0) {
+      width = shared.bufferTextureWidth;
+      height = Math.floor(vertexCount / shared.bufferTextureWidth);
+    } else {
+      width = vertexCount % shared.bufferTextureWidth;
+      height = 1;
+    }
+    const centerAndScaleTextureProperties = shared.gl.properties.get(shared.centerAndScaleTexture);
+    context.bindTexture(context.TEXTURE_2D, centerAndScaleTextureProperties.__webglTexture);
+    context.texSubImage2D(context.TEXTURE_2D, 0, xoffset, yoffset, width, height, context.RGBA, context.FLOAT, shared.centerAndScaleData, shared.loadedVertexCount * 4);
+    const covAndColorTextureProperties = shared.gl.properties.get(shared.covAndColorTexture);
+    context.bindTexture(context.TEXTURE_2D, covAndColorTextureProperties.__webglTexture);
+    context.texSubImage2D(context.TEXTURE_2D, 0, xoffset, yoffset, width, height,
+    // @ts-ignore
+    context.RGBA_INTEGER, context.UNSIGNED_INT, shared.covAndColorData, shared.loadedVertexCount * 4);
+    shared.gl.resetState();
+    shared.loadedVertexCount += width * height;
+    vertexCount -= width * height;
+  }
+  return matrices;
+}
+function Splat({
+  src,
+  toneMapped = false,
+  alphaTest = 0,
+  alphaHash = false,
+  chunkSize = 25000,
+  ...props
+}) {
+  extend({
+    SplatMaterial
+  });
+  const ref = React.useRef(null);
+  const gl = useThree(state => state.gl);
+  const camera = useThree(state => state.camera);
+  // Shared state, globally memoized, the same url re-uses the same daza
+  const shared = useLoader(SplatLoader, src, loader => {
+    loader.gl = gl;
+    loader.chunkSize = chunkSize;
+  });
+  // Listen to worker results, apply them to the target mesh
+  React.useLayoutEffect(() => shared.connect(ref.current), [src]);
+  // Update the worker
+  useFrame(() => shared.update(ref.current, camera, alphaHash));
+  return /*#__PURE__*/React.createElement("mesh", _extends({
+    ref: ref,
+    frustumCulled: false
+  }, props), /*#__PURE__*/React.createElement("splatMaterial", {
+    key: `${src}/${alphaTest}/${alphaHash}${SplatMaterial.key}`,
+    transparent: !alphaHash,
+    depthTest: true,
+    alphaTest: alphaHash ? 0 : alphaTest,
+    centerAndScaleTexture: shared.centerAndScaleTexture,
+    covAndColorTexture: shared.covAndColorTexture,
+    depthWrite: alphaHash ? true : alphaTest > 0,
+    blending: alphaHash ? THREE.NormalBlending : THREE.CustomBlending,
+    blendSrcAlpha: THREE.OneFactor,
+    alphaHash: !!alphaHash,
+    toneMapped: toneMapped
+  }));
+}
+export { Splat };