@react-three/drei 9.56.16 → 9.56.18

package/README.md

@@ -2793,11 +2793,19 @@ return (
 This component allows you to render a live scene into a texture which you can then apply to a material. The contents of it run inside a portal and are separate from the rest of the canvas, therefore you can have events in there, environment maps, etc.
 
 ```tsx
-<RenderTexture
+type Props = JSX.IntrinsicElements['texture'] & {
   /** Optional width of the texture, defaults to viewport bounds */
   width?: number
   /** Optional height of the texture, defaults to viewport bounds */
   height?: number
+  /** Optional fbo samples */
+  samples?: number
+  /** Optional stencil buffer, defaults to false */
+  stencilBuffer?: boolean
+  /** Optional depth buffer, defaults to true */
+  depthBuffer?: boolean
+  /** Optional generate mipmaps, defaults to false */
+  generateMipmaps?: boolean
   /** Optional render priority, defaults to 0 */
   renderPriority?: number
   /** Optional event priority, defaults to 0 */
@@ -2808,7 +2816,7 @@ This component allows you to render a live scene into a texture which you can th
   compute?: (event: any, state: any, previous: any) => false | undefined
   /** Children will be rendered into a portal */
   children: React.ReactNode
-/>
+}
 ```
 
 ```jsx
@@ -3582,6 +3590,20 @@ Floating, glowing particles.
 />
 ```
 
+Custom shaders are allowed. Sparkles will use the following attributes and uniforms:
+
+```glsl
+attribute float size;
+attribute float speed;
+attribute float opacity;
+attribute vec3 noise;
+attribute vec3 color;
+```
+
+```json
+{ "time": 0, "pixelRatio": 1 }
+```
+
 #### Cloud
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-cloud--cloud-st) ![](https://img.shields.io/badge/-suspense-brightgreen)

package/core/PointMaterial.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");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=a(e),l=n(t),i=n(r);class u extends l.PointsMaterial{constructor(e){super(e),this.onBeforeCompile=(e,t)=>{const{isWebGL2:r}=t.capabilities;e.fragmentShader=e.fragmentShader.replace("#include <output_fragment>",`\n        ${r?"#include <output_fragment>":"#extension GL_OES_standard_derivatives : enable\n#include <output_fragment>"}\n      vec2 cxy = 2.0 * gl_PointCoord - 1.0;\n      float r = dot(cxy, cxy);\n      float delta = fwidth(r);     \n      float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);\n      gl_FragColor = vec4(gl_FragColor.rgb, mask * gl_FragColor.a );\n      `)}}}const c=i.forwardRef(((e,t)=>{const[r]=i.useState((()=>new u(null)));return i.createElement("primitive",o.default({},e,{object:r,ref:t,attach:"material"}))}));exports.PointMaterial=c,exports.PointMaterialImpl=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=n(e),l=a(t),i=a(r);class u extends l.PointsMaterial{constructor(e){super(e),this.onBeforeCompile=(e,t)=>{const{isWebGL2:r}=t.capabilities;e.fragmentShader=e.fragmentShader.replace("#include <output_fragment>",`\n        ${r?"#include <output_fragment>":"#extension GL_OES_standard_derivatives : enable\n#include <output_fragment>"}\n      vec2 cxy = 2.0 * gl_PointCoord - 1.0;\n      float r = dot(cxy, cxy);\n      float delta = fwidth(r);     \n      float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);\n      gl_FragColor = vec4(gl_FragColor.rgb, mask * gl_FragColor.a );\n      #include <tonemapping_fragment>\n      #include <encodings_fragment>\n      `)}}}const c=i.forwardRef(((e,t)=>{const[r]=i.useState((()=>new u(null)));return i.createElement("primitive",o.default({},e,{object:r,ref:t,attach:"material"}))}));exports.PointMaterial=c,exports.PointMaterialImpl=u;

package/core/PointMaterial.js

@@ -17,6 +17,8 @@ class PointMaterialImpl extends THREE.PointsMaterial {
       float delta = fwidth(r);     
       float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
       gl_FragColor = vec4(gl_FragColor.rgb, mask * gl_FragColor.a );
+      #include <tonemapping_fragment>
+      #include <encodings_fragment>
       `);
     };
   }

package/core/RenderTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),n=require("@react-three/fiber"),a=require("./useFBO.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var c=u(e),s=i(r),o=i(t);const l=o.forwardRef((({children:e,compute:r,width:t,height:u,samples:i=8,renderPriority:l=0,eventPriority:d=0,frames:m=1/0,...p},b)=>{const{size:v,viewport:y}=n.useThree(),g=a.useFBO((t||v.width)*y.dpr,(u||v.height)*y.dpr,{samples:i}),[h]=o.useState((()=>new s.Scene)),j=o.useCallback(((e,r,t)=>{var n,a;let u=null==(n=g.texture)?void 0:n.__r3f.parent;for(;u&&!(u instanceof s.Object3D);)u=u.__r3f.parent;if(!u)return!1;t.raycaster.camera||t.events.compute(e,t,null==(a=t.previousRoot)?void 0:a.getState());const[i]=t.raycaster.intersectObject(u);if(!i)return!1;const c=i.uv;if(!c)return!1;r.raycaster.setFromCamera(r.pointer.set(2*c.x-1,2*c.y-1),r.camera)}),[]);return o.useImperativeHandle(b,(()=>g.texture),[g]),o.createElement(o.Fragment,null,n.createPortal(o.createElement(f,{renderPriority:l,frames:m,fbo:g},e),h,{events:{compute:r||j,priority:d}}),o.createElement("primitive",c.default({object:g.texture},p)))}));function f({frames:e,renderPriority:r,children:t,fbo:a}){let u=0;return n.useFrame((r=>{(e===1/0||u<e)&&(r.gl.setRenderTarget(a),r.gl.render(r.scene,r.camera),r.gl.setRenderTarget(null),u++)}),r),o.createElement(o.Fragment,null,t)}exports.RenderTexture=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),n=require("@react-three/fiber"),a=require("./useFBO.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var c=u(e),s=i(r),o=i(t);const l=o.forwardRef((({children:e,compute:r,width:t,height:u,samples:i=8,renderPriority:l=0,eventPriority:d=0,frames:p=1/0,stencilBuffer:m=!1,depthBuffer:b=!0,generateMipmaps:v=!1,...g},h)=>{const{size:y,viewport:j}=n.useThree(),O=a.useFBO((t||y.width)*j.dpr,(u||y.height)*j.dpr,{samples:i,stencilBuffer:m,depthBuffer:b,generateMipmaps:v}),[x]=o.useState((()=>new s.Scene)),P=o.useCallback(((e,r,t)=>{var n,a;let u=null==(n=O.texture)?void 0:n.__r3f.parent;for(;u&&!(u instanceof s.Object3D);)u=u.__r3f.parent;if(!u)return!1;t.raycaster.camera||t.events.compute(e,t,null==(a=t.previousRoot)?void 0:a.getState());const[i]=t.raycaster.intersectObject(u);if(!i)return!1;const c=i.uv;if(!c)return!1;r.raycaster.setFromCamera(r.pointer.set(2*c.x-1,2*c.y-1),r.camera)}),[]);return o.useImperativeHandle(h,(()=>O.texture),[O]),o.createElement(o.Fragment,null,n.createPortal(o.createElement(f,{renderPriority:l,frames:p,fbo:O},e),x,{events:{compute:r||P,priority:d}}),o.createElement("primitive",c.default({object:O.texture},g)))}));function f({frames:e,renderPriority:r,children:t,fbo:a}){let u=0;return n.useFrame((r=>{(e===1/0||u<e)&&(r.gl.setRenderTarget(a),r.gl.render(r.scene,r.camera),r.gl.setRenderTarget(null),u++)}),r),o.createElement(o.Fragment,null,t)}exports.RenderTexture=l;

package/core/RenderTexture.d.ts

@@ -4,9 +4,12 @@ export declare const RenderTexture: React.ForwardRefExoticComponent<Pick<import(
     width?: number | undefined;
     height?: number | undefined;
     samples?: number | undefined;
+    stencilBuffer?: boolean | undefined;
+    depthBuffer?: boolean | undefined;
+    generateMipmaps?: boolean | undefined;
     renderPriority?: number | undefined;
     eventPriority?: number | undefined;
     frames?: number | undefined;
     compute?: ((event: any, state: any, previous: any) => false | undefined) | undefined;
     children: React.ReactNode;
-}, "attach" | "args" | "children" | "key" | "onUpdate" | "rotation" | "matrix" | "dispose" | "type" | "id" | "uuid" | "name" | "matrixAutoUpdate" | "userData" | "updateMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "center" | "source" | "repeat" | "image" | "needsUpdate" | "version" | "offset" | "width" | "height" | "sourceFile" | "mipmaps" | "mapping" | "wrapS" | "wrapT" | "magFilter" | "minFilter" | "anisotropy" | "format" | "internalFormat" | "generateMipmaps" | "premultiplyAlpha" | "flipY" | "unpackAlignment" | "encoding" | "isRenderTargetTexture" | "needsPMREMUpdate" | "isTexture" | "transformUv" | "compute" | "samples" | "frames" | "renderPriority" | "eventPriority"> & React.RefAttributes<unknown>>;
+}, "attach" | "args" | "children" | "key" | "onUpdate" | "rotation" | "matrix" | "dispose" | "type" | "id" | "uuid" | "name" | "matrixAutoUpdate" | "userData" | "updateMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "center" | "source" | "repeat" | "image" | "needsUpdate" | "version" | "offset" | "width" | "height" | "sourceFile" | "mipmaps" | "mapping" | "wrapS" | "wrapT" | "magFilter" | "minFilter" | "anisotropy" | "format" | "internalFormat" | "generateMipmaps" | "premultiplyAlpha" | "flipY" | "unpackAlignment" | "encoding" | "isRenderTargetTexture" | "needsPMREMUpdate" | "isTexture" | "transformUv" | "compute" | "depthBuffer" | "stencilBuffer" | "samples" | "frames" | "renderPriority" | "eventPriority"> & React.RefAttributes<unknown>>;

package/core/RenderTexture.js

@@ -13,6 +13,9 @@ const RenderTexture = /*#__PURE__*/React.forwardRef(({
   renderPriority = 0,
   eventPriority = 0,
   frames = Infinity,
+  stencilBuffer = false,
+  depthBuffer = true,
+  generateMipmaps = false,
   ...props
 }, forwardRef) => {
   const {
@@ -20,7 +23,10 @@ const RenderTexture = /*#__PURE__*/React.forwardRef(({
     viewport
   } = useThree();
   const fbo = useFBO((width || size.width) * viewport.dpr, (height || size.height) * viewport.dpr, {
-    samples
+    samples,
+    stencilBuffer,
+    depthBuffer,
+    generateMipmaps
   });
   const [vScene] = React.useState(() => new THREE.Scene());
   const uvCompute = React.useCallback((event, state, previous) => {

package/core/Sparkles.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"),o=require("@react-three/fiber"),i=require("./shaderMaterial.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=a(e),l=n(t),c=n(r);const u=i.shaderMaterial({time:0,pixelRatio:1},"#define GLSLIFY 1\nuniform float pixelRatio;uniform float time;attribute float size;attribute float speed;attribute float opacity;attribute vec3 noise;attribute vec3 color;varying vec3 vColor;varying float vOpacity;void main(){vec4 modelPosition=modelMatrix*vec4(position,1.0);modelPosition.y+=sin(time*speed+modelPosition.x*noise.x*100.0)*0.2;modelPosition.z+=cos(time*speed+modelPosition.x*noise.y*100.0)*0.2;modelPosition.x+=cos(time*speed+modelPosition.x*noise.z*100.0)*0.2;vec4 viewPosition=viewMatrix*modelPosition;vec4 projectionPostion=projectionMatrix*viewPosition;gl_Position=projectionPostion;gl_PointSize=size*25.*pixelRatio;gl_PointSize*=(1.0/-viewPosition.z);vColor=color;vOpacity=opacity;}","#define GLSLIFY 1\nvarying vec3 vColor;varying float vOpacity;void main(){float distanceToCenter=distance(gl_PointCoord,vec2(0.5));float strength=0.05/distanceToCenter-0.1;gl_FragColor=vec4(vColor,strength*vOpacity);}"),f=e=>e&&e.constructor===Float32Array,m=e=>e instanceof c.Vector2||e instanceof c.Vector3||e instanceof c.Vector4,d=e=>Array.isArray(e)?e:m(e)?e.toArray():[e,e,e];function p(e,t,r){return l.useMemo((()=>{if(void 0!==t){if(f(t))return t;if(t instanceof c.Color){const r=Array.from({length:3*e},(()=>{return[(e=t).r,e.g,e.b];var e})).flat();return Float32Array.from(r)}if(m(t)||Array.isArray(t)){const r=Array.from({length:3*e},(()=>d(t))).flat();return Float32Array.from(r)}return Float32Array.from({length:e},(()=>t))}return Float32Array.from({length:e},r)}),[t])}const v=l.forwardRef((({noise:e=1,count:t=100,speed:r=1,opacity:i=1,scale:a=1,size:n,color:m,...v},b)=>{l.useMemo((()=>o.extend({SparklesMaterial:u})),[]);const y=l.useRef(),g=o.useThree((e=>e.viewport.dpr)),h=l.useMemo((()=>Float32Array.from(Array.from({length:t},(()=>d(a).map(c.MathUtils.randFloatSpread))).flat())),[t,a]),A=p(t,n,Math.random),P=p(t,i),x=p(t,r),M=p(3*t,e),j=p(void 0===m?3*t:t,f(m)?m:new c.Color(m),(()=>1));return o.useFrame((e=>y.current.uniforms.time.value=e.clock.elapsedTime)),l.createElement("points",s.default({key:`particle-${t}-${JSON.stringify(a)}`},v,{ref:b}),l.createElement("bufferGeometry",null,l.createElement("bufferAttribute",{attach:"attributes-position",args:[h,3]}),l.createElement("bufferAttribute",{attach:"attributes-size",args:[A,1]}),l.createElement("bufferAttribute",{attach:"attributes-opacity",args:[P,1]}),l.createElement("bufferAttribute",{attach:"attributes-speed",args:[x,1]}),l.createElement("bufferAttribute",{attach:"attributes-color",args:[j,3]}),l.createElement("bufferAttribute",{attach:"attributes-noise",args:[M,3]})),l.createElement("sparklesMaterial",{ref:y,transparent:!0,pixelRatio:g,depthWrite:!1}))}));exports.Sparkles=v;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),o=require("@react-three/fiber"),i=require("./shaderMaterial.cjs.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var l=n(e),s=a(t),c=a(r);const u=i.shaderMaterial({time:0,pixelRatio:1}," uniform float pixelRatio;\n    uniform float time;\n    attribute float size;  \n    attribute float speed;  \n    attribute float opacity;\n    attribute vec3 noise;\n    attribute vec3 color;\n    varying vec3 vColor;\n    varying float vOpacity;\n    void main() {\n      vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n      modelPosition.y += sin(time * speed + modelPosition.x * noise.x * 100.0) * 0.2;\n      modelPosition.z += cos(time * speed + modelPosition.x * noise.y * 100.0) * 0.2;\n      modelPosition.x += cos(time * speed + modelPosition.x * noise.z * 100.0) * 0.2;\n      vec4 viewPosition = viewMatrix * modelPosition;\n      vec4 projectionPostion = projectionMatrix * viewPosition;\n      gl_Position = projectionPostion;\n      gl_PointSize = size * 25. * pixelRatio;\n      gl_PointSize *= (1.0 / - viewPosition.z);\n      vColor = color;\n      vOpacity = opacity;\n    }"," varying vec3 vColor;\n    varying float vOpacity;\n    void main() {\n      float distanceToCenter = distance(gl_PointCoord, vec2(0.5));\n      float strength = 0.05 / distanceToCenter - 0.1;\n      gl_FragColor = vec4(vColor, strength * vOpacity);\n      #include <tonemapping_fragment>\n      #include <encodings_fragment>\n    }"),f=e=>e&&e.constructor===Float32Array,m=e=>e instanceof c.Vector2||e instanceof c.Vector3||e instanceof c.Vector4,d=e=>Array.isArray(e)?e:m(e)?e.toArray():[e,e,e];function p(e,t,r){return s.useMemo((()=>{if(void 0!==t){if(f(t))return t;if(t instanceof c.Color){const r=Array.from({length:3*e},(()=>{return[(e=t).r,e.g,e.b];var e})).flat();return Float32Array.from(r)}if(m(t)||Array.isArray(t)){const r=Array.from({length:3*e},(()=>d(t))).flat();return Float32Array.from(r)}return Float32Array.from({length:e},(()=>t))}return Float32Array.from({length:e},r)}),[t])}const v=s.forwardRef((({noise:e=1,count:t=100,speed:r=1,opacity:i=1,scale:n=1,size:a,color:m,children:v,...b},y)=>{s.useMemo((()=>o.extend({SparklesImplMaterial:u})),[]);const g=s.useRef(null),h=o.useThree((e=>e.viewport.dpr)),A=s.useMemo((()=>Float32Array.from(Array.from({length:t},(()=>d(n).map(c.MathUtils.randFloatSpread))).flat())),[t,n]),P=p(t,a,Math.random),x=p(t,i),M=p(t,r),j=p(3*t,e),O=p(void 0===m?3*t:t,f(m)?m:new c.Color(m),(()=>1));return console.log(O),o.useFrame((e=>{g.current&&g.current.material&&(g.current.material.time=e.clock.elapsedTime)})),s.useImperativeHandle(y,(()=>g.current),[]),s.createElement("points",l.default({key:`particle-${t}-${JSON.stringify(n)}`},b,{ref:g}),s.createElement("bufferGeometry",null,s.createElement("bufferAttribute",{attach:"attributes-position",args:[A,3]}),s.createElement("bufferAttribute",{attach:"attributes-size",args:[P,1]}),s.createElement("bufferAttribute",{attach:"attributes-opacity",args:[x,1]}),s.createElement("bufferAttribute",{attach:"attributes-speed",args:[M,1]}),s.createElement("bufferAttribute",{attach:"attributes-color",args:[O,3]}),s.createElement("bufferAttribute",{attach:"attributes-noise",args:[j,3]})),v||s.createElement("sparklesImplMaterial",{transparent:!0,pixelRatio:h,depthWrite:!1}))}));exports.Sparkles=v;

package/core/Sparkles.d.ts

@@ -13,7 +13,7 @@ interface Props {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            sparklesMaterial: Node<any, any>;
+            sparklesImplMaterial: Node<any, any>;
         }
     }
 }

package/core/Sparkles.js

@@ -3,13 +3,40 @@ import * as React from 'react';
 import * as THREE from 'three';
 import { extend, useThree, useFrame } from '@react-three/fiber';
 import { shaderMaterial } from './shaderMaterial.js';
-import fragShader from '../helpers/glsl/Sparkles.frag.glsl.js';
-import vertShader from '../helpers/glsl/Sparkles.vert.glsl.js';
 
-const SparklesMaterial = shaderMaterial({
+const SparklesImplMaterial = shaderMaterial({
   time: 0,
   pixelRatio: 1
-}, vertShader, fragShader);
+}, ` uniform float pixelRatio;
+    uniform float time;
+    attribute float size;  
+    attribute float speed;  
+    attribute float opacity;
+    attribute vec3 noise;
+    attribute vec3 color;
+    varying vec3 vColor;
+    varying float vOpacity;
+    void main() {
+      vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+      modelPosition.y += sin(time * speed + modelPosition.x * noise.x * 100.0) * 0.2;
+      modelPosition.z += cos(time * speed + modelPosition.x * noise.y * 100.0) * 0.2;
+      modelPosition.x += cos(time * speed + modelPosition.x * noise.z * 100.0) * 0.2;
+      vec4 viewPosition = viewMatrix * modelPosition;
+      vec4 projectionPostion = projectionMatrix * viewPosition;
+      gl_Position = projectionPostion;
+      gl_PointSize = size * 25. * pixelRatio;
+      gl_PointSize *= (1.0 / - viewPosition.z);
+      vColor = color;
+      vOpacity = opacity;
+    }`, ` varying vec3 vColor;
+    varying float vOpacity;
+    void main() {
+      float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
+      float strength = 0.05 / distanceToCenter - 0.1;
+      gl_FragColor = vec4(vColor, strength * vOpacity);
+      #include <tonemapping_fragment>
+      #include <encodings_fragment>
+    }`);
 
 const isFloat32Array = def => def && def.constructor === Float32Array;
 
@@ -60,12 +87,13 @@ const Sparkles = /*#__PURE__*/React.forwardRef(({
   scale = 1,
   size,
   color,
+  children,
   ...props
 }, forwardRef) => {
   React.useMemo(() => extend({
-    SparklesMaterial
+    SparklesImplMaterial
   }), []);
-  const matRef = React.useRef();
+  const ref = React.useRef(null);
   const dpr = useThree(state => state.viewport.dpr);
   const positions = React.useMemo(() => Float32Array.from(Array.from({
     length: count
@@ -75,11 +103,15 @@ const Sparkles = /*#__PURE__*/React.forwardRef(({
   const speeds = usePropAsIsOrAsAttribute(count, speed);
   const noises = usePropAsIsOrAsAttribute(count * 3, noise);
   const colors = usePropAsIsOrAsAttribute(color === undefined ? count * 3 : count, !isFloat32Array(color) ? new THREE.Color(color) : color, () => 1);
-  useFrame(state => matRef.current.uniforms.time.value = state.clock.elapsedTime);
+  console.log(colors);
+  useFrame(state => {
+    if (ref.current && ref.current.material) ref.current.material.time = state.clock.elapsedTime;
+  });
+  React.useImperativeHandle(forwardRef, () => ref.current, []);
   return /*#__PURE__*/React.createElement("points", _extends({
     key: `particle-${count}-${JSON.stringify(scale)}`
   }, props, {
-    ref: forwardRef
+    ref: ref
   }), /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
     attach: "attributes-position",
     args: [positions, 3]
@@ -98,8 +130,7 @@ const Sparkles = /*#__PURE__*/React.forwardRef(({
   }), /*#__PURE__*/React.createElement("bufferAttribute", {
     attach: "attributes-noise",
     args: [noises, 3]
-  })), /*#__PURE__*/React.createElement("sparklesMaterial", {
-    ref: matRef,
+  })), children ? children : /*#__PURE__*/React.createElement("sparklesImplMaterial", {
     transparent: true,
     pixelRatio: dpr,
     depthWrite: false