@react-three/drei 9.56.17 → 9.56.18

package/README.md

@@ -3590,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/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