{"_id":"three-vfx","_rev":"216-0937c1fd851e800e88eb19911e3bdc85","name":"three-vfx","dist-tags":{"latest":"0.2.1","dev":"0.0.0-dev-20220619124552","canary":"0.2.0"},"versions":{"0.0.13":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.13","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.0"},"peerDependencies":{"@react-three/fiber":">=8.0.0","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"licenseText":"Copyright (c) 2022 Hendrik Mans\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","_id":"three-vfx@0.0.13","dist":{"shasum":"22c23dff734e5c14783089f0f727e0cdaaa72913","integrity":"sha512-EZgfwlkd+gBi5p7RqjOd17s4QSSjMyVSrFbCXyAeTHamAo0D9hbGG4B9bNRDKOXeqYqrLt58kuWxTZRiotJ5tw==","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.13.tgz","fileCount":25,"unpackedSize":60989,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICS78aJdDwHZ/cBosKsFjJf1RaOBMOKZps9OyVkXGCKFAiAcZcgPsiZXZikgl4YDVzn7nMSXcdSGaRBPlvy3663/2A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipa91ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0/Q//UnZyJaE9PxJNSzS0WNVKZqMhrgUQdnB9uuezbW9A9geZ4rOi\r\ns8T6wxqJyXgidvfF/UvHlH4mNF9+NGnkKPyjaKwnpn5XUkvbrwWJU07FViZ4\r\nDw9gR03XkYTHlURk9+WC51aBN0/HDuXU/+qGnvmL1YfDuxzGBeCtUXX8wEPW\r\nV0wTaAbDXJHd7sTxrNFpP6xTIE45uwwrRNQelwYBW/1zOVvvuMWPb7vXON9Y\r\nQwhO4vko2g6p+xPbmyyxq7TehrZv1RXEUMevqgUmKPdvO3pn9O10JCKVOdNh\r\n/F6Sd50SNYOe/k4JTLK+vmUVPTseyr0C9zWF4b/VWFhIZDlPiq6nNwGky8bR\r\n1dT1mmFJkNKR51JeiwbKz6awfYVfiv1lfUhC48qOJsx7bA8AY+0j0s6XhkUP\r\np6+YKG4M5YbDmcM/BhY4QE7tWYGbR/MPt5pmdra2Rn6l/jNXJpDhU3rMsASL\r\nrYG8dp39IEncoY1nNG8iJsYF0zuIC8p22hdA2XfVz63+Y9Y+U5ZscybNskQ8\r\nz/p/MsNvlr71koS5TD5Xb0LWEegW9hwaJ+g5cCGuDihaPlc4VcIWKg9foGr4\r\nNtAV8tbD5YC4hPX5DiIINA4BHSZcHinyoKtd8kv2dOJ8uRfk0SHFdJEeISj8\r\nV4uMGTkILa1FEX7E0wyYjBNK2qUXl2AdOkw=\r\n=Xb71\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.13_1655025525519_0.8840498202410223"},"_hasShrinkwrap":false},"0.1.0":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.1.0","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.2"},"peerDependencies":{"@react-three/fiber":">=8.0.0","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"_id":"three-vfx@0.1.0","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-vgwsYNfzUAMzcmGqTJoW5tZnIev8nh1izqv3l63b+sZYfDAFXXOiDXvAI+D35bMCm6QQv/SJyTNOhyQgs5e0vw==","shasum":"e9cb22eb7f8412934efcb1c3ded8559f8254fdfb","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.1.0.tgz","fileCount":20,"unpackedSize":61777,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHuLbUF89Qc/OYYD8xRnJgrB1KspQHfpqrNMc049eiSQIga/X1gdsC0TS7eU1xZ59o0Rz1FqftgVyFozXjOCqJ5a8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiq2xgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq06xAAnAtzjuYJY7ghoygRLwtCNDzL0dkv8fn6NAPkEspBWyuA7Djq\r\n5eILCPqd6l7Rhp4JuJ1SAUiKE7oPzl4+6HHRjmBYW8C6bB+gxBtU2jredMDA\r\nj8n3kasOc2UckpBcnJ/J1TX1TO7F44kxp4xDbbwgqJ66uFNZkaEMmI/03J0I\r\naf8/rATsNOF3h2g8fSfsJ/ciCfkeITQxIehWOJ0Ic8axnOgh+mEQYbYPxGmU\r\nbDnghhl7X8jXvrbGu55kZ9zZwyaa0UEY0tTtsh1OqiIAyQmTCmKtvOxB+ysv\r\nSw8YK1SpekjRpa1zfG/zbOeKRassdv7Rfint0IlZ1E0PUWWo2qzpZPl9CMSl\r\nsAO5xon7T91k5KCZzBoBGiCWXuw0OxxDnfsPUfWOOfzUkRhcmlpQLRCg0hDf\r\nr5IYj7oA9JhQl0Uq3akVj8i0Y57Qpdl6vlmfRpfnvWe+/x2p3ghGnBo3R3FA\r\nGrn9j+58q4juTTqUK/AhhXAc9CzIc0Lym9YWlTs7Na2tK3raXV7E+v7OqcyR\r\nJBM9/ZJhvwwEoCR1M87bfZnzrV+/YlQ7WJcp9CJomWfaUgcBtBRxzfy98BWI\r\nIYo6fcKeSrBZf3STXOGnB4u61Y1ozODgYNcxbQrIj1GevoZf+GcyC+gX87JD\r\n3+EM1xEyYUHwdZkEKuhCK91pXrIBFAmLNxU=\r\n=7iC0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.1.0_1655401568572_0.2423713794443123"},"_hasShrinkwrap":false},"0.0.0-dev-20220619123114":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-dev-20220619123114","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.0","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","gitHead":"146c0eba9a8785b11d350cb38e5df8b8ae8f5496","_id":"three-vfx@0.0.0-dev-20220619123114","_nodeVersion":"18.3.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-MKvfyw53Rop74EyMEI4kjEakOgpAejqu3sbUZavpBcNWJ2pMglLN4tX9xMsFgk+q1+HHjjUhAvK4WAnBSzHVng==","shasum":"847d314ad857aec446c3c5ef301f9271d9f55845","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-dev-20220619123114.tgz","fileCount":5,"unpackedSize":8852,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDXKSy7DRg/1bzXVYd48MI7Pbiz1a2v06DysPbbEsWO8AiEAttqNJTghy3EhB/8i+kQ/yK6P2CX70vaV79TX8/AlRzs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirxcaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrs0g//Sf52MNnW1lI/2c0JwQmLVUNHtxrXmgxN67xGFcoadyZKn374\r\nWgxeOMxfbwfm0tBmYrkszYeuzbYMmRJoxl60lS4lzJsqesLdqK66ltUU79Oh\r\nn44CMTPLD2i3i+VJMRFN3Z6nFi2NHcMIHX6KpxWm7piBDuQW+GqjssCM6XV4\r\nUZV+hvvYGqGKp8sZvUlnL8u1Cwal1DIfaTcLp1USwyntPjyFuuLPZ7pJHgjW\r\nm+jMUpYlpGJWkqudtnmVcFDEMzG7xQAw8KzlTY4QE0he2Eg8iqSk+loLclTQ\r\nVDW3OKyvHjg3usmM91zC3N07lamBYi6bJfK8m5Ho5QBtXJv1bdFLhSYsxhOE\r\n5F5OcIq9wHVkAb5N1d+TdR4uZhBxHU3wMmvy+sXxr4MoMJLeSdR1XyMq53/i\r\nzoQc8p/uRuqUbcnk65yQNyDbxh1A0wiN55LcrZLtZTiJ9cTFq8yDbVOD7mFm\r\nM6+q8bpKoyorBiOIKO3MYYrhz0qNymgbsOkf+qeyCYJr0/w8mHGD03jHpAfG\r\nrnvK7PITJQioqrPV0VwSJH1zN1Ea8rXzkQp40Y+wQO7PJCka2zd5bazm7EpN\r\n3rXMtOcYY0YiWtLcocd7i/zxrwl2xEf12DVFAeIqs9z3gJ7doxXmKbPVOd3j\r\nF3WfEUNL4oEPKJXWr/mbNuXBu3avUMTBjvI=\r\n=8rs3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-dev-20220619123114_1655641882251_0.38748191820263655"},"_hasShrinkwrap":false},"0.0.0-dev-20220619123738":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-dev-20220619123738","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.0","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","gitHead":"03399d0445011e2adce8e2c6fa7d295a8f111288","_id":"three-vfx@0.0.0-dev-20220619123738","_nodeVersion":"18.3.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-f8QRjifF0IhQgJQ7IrISYRe88Yl1dY/gNpu3J5ubS4MJAigMh15fZ3erCwwJ1y27ru4H8HiR+htC8Yzgzymegg==","shasum":"ac627e712de76ecdd9763d741b899f2faf9ff7e0","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-dev-20220619123738.tgz","fileCount":21,"unpackedSize":91671,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID8wXGjEttm/VZu0k1YWsHYgiFOjJR3aiIGDUozg2H3qAiA1E8EWnqzOUW4NgXX6AL6BN/ODgIXXMWQ4ywzOYACJtQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirxicACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFXA//e0B0xs8tca3o0tSzOtSYmLmV9n/7O097JSX+qSuK24EYaufm\r\n3amYrmHAqZ5QDU5vYHgi1qUK0lZJzWKGEdUZmDNO2sq057oNW+tUwf+ebuMX\r\nHyCpRvIyWe3BYTHJGzb+W/Km1RPrilsgp82ZbqCZ3E37/rq4p3k0KZnlwMrX\r\no7kqEIV9PnYnWbJXJY67SrCUyR4TalOFSy8w12IYTElb4nc9KJpxlXBEcrVP\r\nRBsCdZ2W4xlWcGF8XPFNrglzfJwfu5AxVyxqnGATUpZQ1fQJI2gYFegnW9Oe\r\nC17XB3ehMRkrcBLaKz/Njmu2f04YbTQXOn1WtaLhvzasO8iJ1x/05pPY1xtV\r\nmOfp7NtgLFz8xjE7WKogxhxMMettZ9IeW5qYms9YD5pHzurVAPAo6fuJMcY5\r\nUlUeabGQH33VBKvd64GpcXC+7ZNJzVcv6Mt8PjQUxqYU8yjOv2HcyrP2Wu/t\r\nTfYyLdzS2FhZYgk5q4OtoaU5wN+L3qZzY3DHpMlNKrITcKbmCMr+AG4Efg1w\r\n7FG8y+NLMNCoXiur5EhZqL/d4OXcp9gs37QQ0ZvxxlU+wBg5sdV1bVidLkD9\r\nQa4lXo0nb9ZJwwhJzIlSNMP+Nojs/rg6Lr469fIJgOGvLTzuaHtIjfdD2Xnk\r\nyD1kBg3Wi6VptyYPK/2AKF5JM7xwDFM0+vE=\r\n=wtnh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-dev-20220619123738_1655642268400_0.15406320097763038"},"_hasShrinkwrap":false},"0.0.0-dev-20220619124552":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-dev-20220619124552","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.0","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-dev-20220619124552","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-KoZ0mT82fNm32+T/PuqEw1mKGLxFBIjGU5n4Ne1+H51skkrDrGxqkbBpfl1zIIw1qMOUMhNNYqb13xXiT3OZ9A==","shasum":"1899698470682282cca38dbf1049e367d84895ab","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-dev-20220619124552.tgz","fileCount":22,"unpackedSize":94460,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFMVpNM0OttwwEvEz5i+dkYFeoKNOpwaz6duPRpnAaKzAiAp0AOBmk3aU9Vywmi9H0IfZYB3mwYCWd3BoNwqyMtklQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirxqNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpC3A//UxSP5y/b3v0YmyFCua0+fuRmfI1gfD615E6iQv2MDF65oYzb\r\nV6AsGsidJc60XzH2eg9SPUupSfsjW+j9XOtla+QdQoIjNe46Rt0xCvJChlFC\r\n1l93KVyIPShHuMt/ZZYwDOnCPlVex2gVYKZqvIjk23MKQWPBVzpz57Y5YD5L\r\ndCikB9lQ9ETFg6UxoIrRVS/3rjDrFUhH+95o28uo1ELES9VdgoYEpqXXOrwF\r\nk16t0Tp0vMo34rldhMSHzb+3fmgnE5YY5/YXWm7fbAK8t0nsxjrfIs/JCvcU\r\nxip1QcFnu/OEXjT8FFtIyquRd2KG86vSRaRRS9U1BCKsfpACwWioCUigggsa\r\nJ3NN4Dx8gd2804ps78+evMKPuh+9KGGsYyGpVFpioepVOFvGCvOqGGY/h2Vy\r\nvopEzmtNysIqkLAEEatytMhq9azq1EsQCp0GxLJrmujUNEoZDP1yPVQ+6hp2\r\nRDYLeFcsvonkv7I9LW5uV9le50LSDjzebj4hqMBuYeJum/wkZ4uFOsNsvpGb\r\ngP/Zs+nd6yoZFDAphCowMmUZ4UhVAzvDRACRfRKe1R0chQnGDpedV7aHIOxY\r\nPX4CgY2cBd1/O/ZXNrLuQyJBg74X0foccGgmAZgPbAKjEK9kMOHlruMoQ3uY\r\ntlsJqYRYVA4FYkI0DXqnLj2Dd7qkRqPfLxM=\r\n=TTqi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-dev-20220619124552_1655642764987_0.34461564652778853"},"_hasShrinkwrap":false},"0.0.0-canary-20220619124850":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220619124850","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.0","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220619124850","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-dVGytGGpOueAfTBvQkI1KV4PXp1KjCl1tkz9ojrLoSHdCW+xYnr60he+GNzKVX8as9fjXtp5CFpR/QZ81dihAg==","shasum":"c4734c61536b542af6c4a98066b55a25b75430ba","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220619124850.tgz","fileCount":22,"unpackedSize":94466,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH0YRNKd202fNbCSTegVm+bYx9UYhvvI7uf5rA/iE1GwAiEA2B6hXcA3gXsNlHaDKiwOaKPk+SUZu3FZopo5J28hEj4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirxs9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqehA//U714vFM462751+woKViNgzj7Ao8umMIeGX9zB85ojEwLXEXk\r\n9rxZbrBPSvpYWelyJDp2xzkm5nBg4mkrdM24rXi5m4XHlcSSa/6Y2DP+ZQHJ\r\nEAGYm41iYop53CogA4dSCpHRJKIy1iy8NPNJ59s8/hXmob6BuAUhKbrTDrW3\r\n2dY74Wf2wUS0+Zvxlxt+zVVSuTBkspcKjiihEuvrsdeNz1JDzeaNwaDRuZPV\r\ntaMRrl+SJBHsTYZVfK/PtiAa40ewzZ7lmTVkFUvc7re0kG6etoF0VdPD8+rn\r\nwzICS/cAP16zD23LeKzQ9MbPL+LwxnQa2vmMYK2lAiuc1wiSZxpf73ZhYSHr\r\nILq3cDc2L+GGDX9jTnQ4Sjv4D0SF6Cv/222xEncISlQf9KpcHe0TtFASUgW5\r\nQdGOZ4ywDFvN1A8Fp49gZ7mGcAZPS+EeAYZPUILQZnhTy9ZIejGW1z7q4Epl\r\nkTN/vJzLqBq5FfsabFaPXaVRH0c7nfAo0GKQyCzifF0aeweoYo8OIjFnRhxH\r\nYH63TmLv04ND9PBSJPo+f2kslrZXLEvX9cfGanoMDKH5RAMLuCAs72y66qXn\r\n4is0gqhiipuzR7sn3JLvY0HaSQ2+CvvdJmZCDU3bVAKo4C4tSRlrb+A6Q3Y3\r\nxZ43zALcwdKnwhwnxQ38iPldB3tQF0xdiao=\r\n=volv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220619124850_1655642941628_0.8669305561871554"},"_hasShrinkwrap":false},"0.0.0-canary-20220619125732":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220619125732","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.0","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220619125732","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-pvOEAnj0+2QQb3y2jT2amJvp6ttSqbNXZqXKxqSjkRL1i6/ir7g+T6Lk28BZUm0y5SNWjTCSqha8XJX7Mj4XDA==","shasum":"9948edd95a47b8eacd52fe0c2d8fb00701045134","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220619125732.tgz","fileCount":23,"unpackedSize":94503,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmNV+zBaVRL3VypEL6uveVujBamGEfxQjHUgEFXcbumwIgNd6JNLkVSOw3Uh4XCKlECoZbpWtnS+xyQV7V26LGhs0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirx1IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkaxAAi0lTcW3QItGzU36GmJiLIm3w55CCPUl9As9KxlbWhBv0tAGT\r\ntNbikI6wab0DT9iteCRJsUtJeJU0D6xb934GNmAcJ5tz1Wk0lOSkejPiaNqf\r\n7jYWDYWPfNJww9NSHxp/50ePHvZ+fRQM/RPZvEBqQoudiFaRMVrTBw+25GHp\r\nR7Le+aPHhxpW+Jga/ASJ1eU6uE9j/W9+0WZvNcDKRghfWi36EnzalDiXl9cV\r\nRIq9iHo9jBhuevtC0Bta2yYQeUzBaCeggIgDePi2BweYrbjYBTURtdMqHlKR\r\nsm5z/G3aI/RDVVH1XBYdWiuRJPApUI1w4BdkvxBSRZJ6ari3A7Yju5aW+D7f\r\noqd33Xwa5TTW6zDgOo3CHTy7bmWhkU9zfhu2163FL36isUlfVlMCtAHCJLXA\r\nVc0FbFcJ5UtC1SEP4E4QOM9MaUIETWRw8q45a2J5y0JhwDwxs9knD845gj/x\r\nfzNWA+9mWgv2MNXEz2kuAjylgKDZC9Ena6sqih7g8XLgAhtsgMOlMEdW43JR\r\neHNT07wrfpRVoIDswvQfZQtQPW4EkAxbs6nOjruKo+P+6aK8Y0OjVX1VMTwI\r\n1FKKgsIbHpWJvbfAu/dW7foIKMth2WtGrnMSfeQFKWQ10Fm4lfem5peOCZQG\r\nOo3Brm4ILCwgApB/04BkdzRTjyBXbcX6bz0=\r\n=EztQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220619125732_1655643464643_0.7380935162771975"},"_hasShrinkwrap":false},"0.0.0-canary-20220619130627":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220619130627","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.0","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220619130627","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-qRMW7RU66gaEmMHRPp24fqkTfXiZ0gKiPHZl3KesHNXnu870wyfESVYDZpADE+R7Z9u3JO+z9UjEuBnuG+vsQQ==","shasum":"de5e640013b9cca5541faf6b442c5c50abb6ed3c","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220619130627.tgz","fileCount":23,"unpackedSize":94503,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMT7fOrxcBcXdGAVl6IyuVsASSxNK2wudU9ucJmULWVAiAf3N2u96U2iJK3Or8qH/qxNFNUJHKfS1NnGHC1KSmpUg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirx9cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmDw/8CRJzik0nqE/AzY6EFd9pl9yh/59ObsEuQBAEJNDHRUPdqFgd\r\nzSWHHT/J3KnW34rD9eZ0nS0G5hq0wlEn4r9oq6USbeQmptRbir7HzsTufPEr\r\ncqQzyejICjnMaBiIymQW5funw7a7ErQLUFSnWQ7ehFY/LuRS8qOgdS7QCVjp\r\nLyEWMO9uwHkNBVCwiKVurScmSQTIRPWYjFEFMKlqZM9Ek39iRrfxvpr9bgpK\r\nVjzszZCDEihkoDZf3Ap6jQpQwSXGbdb0+r8NymgMK9v6nMDDve3NcxwlWZ6y\r\nGdvZjNJ43M+SpHClYPmIUIN3Ij1sgLikMRkGYAoDhZRIwErGFc579YBSrZxh\r\nVq2PAex27HCGXlEImXY6x7a0U8FH+55eS2yf9owHunvuPchTMuTshbCTQ1xr\r\n2CYHTtFhk5LMS9Lwr4FKa1OxhI1TEkHinLvo0zDBw2/DwVw8QfeUe5TDD117\r\niUwTSZ/NSbBKIpJn2SzZ+wbKhO8Tz76EJiK6cLoZp0X7pbOK5g4yWhDUEXx1\r\nNeaKiyMsUxv/374etm5rHxjlsO9+9cqjFZUWygQdiH1QjVXUkvlHIgBizbey\r\nbAR+Bkh7jeRz3Wp5Z2pkBeYMSXiKicpV7Bm+lGD8AluC6wjVNJ7rnvMsqtKB\r\nG+JJsSkP6VW5G67VPhSSAzMOIuNak6PffRQ=\r\n=nwvS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220619130627_1655643996556_0.8683658310393225"},"_hasShrinkwrap":false},"0.0.0-canary-20220619131032":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220619131032","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.0","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220619131032","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-2xqDLtzn4kKXOy/3sgSB3GMj2guyc3TCpShgag3wGMj4pbMir+glj9mPvVwYs4QJ5qFzDnMw0ul/+bOMUavCJQ==","shasum":"d233650b8e2c6001f5f65b336c6bea4d5caaf295","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220619131032.tgz","fileCount":23,"unpackedSize":94503,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRKz9iBFframLAOqpvE+Ih8zmTjG91Znm2ZZ91unshiwIhAPE1RCJv30v3aecy+zK6o7XLakd257XEouC7PLxQTjJP"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiryBTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrT+w//VJsXD9PZIcDPwjg6PiPuWDCE+kNG1cWSwR2D8XKCIpZ+iZFf\r\n/28LxIKY2/rnioGIdEEmmiBQiwTZBXO2e5dVQJHFBmOi7/O+/vU3bWwENrkt\r\nx/EJMJDG13cuDKJHgfvtwACGTSMIov9Xs24Xe4/P2OTIj8kWY8Z2YkJ+32UB\r\nn8uO9WYblCxpNBuraK62fJSOfIxKJwrjwmcGSoP56+7aDQqSqpOrg8k+ysN8\r\nxL0ZGJpcXL6tbZLT+jeL393FZFvpQgOlAjEBLxHSFoSprEBOYrPV7dm+DFFR\r\nzS8d8GGW9DATG2XqUsSah15yy38/KhNdRjd6wnx3i2YaYE8TTjl9jzr8YVlA\r\nvixvYmAemmN4updUs4hMj6ZMZYTpA3yLB3So9HRIBooSSb4D/7Zva7uWcbZr\r\nibud0JPkv7J/6135qr+2mqMyt1JgTWYm2Jp6SkycWRlzXWzymefwrP6vm23v\r\nMMvto57B7fSQTj2fIaTpkDK1ZXHozh+v+4cUlwGQUHvGc2VGNJyHBQ188DmL\r\nRcvC+1Ab/P93RFpCsO2zLw8BiaKvW/zdxl37uI/Qvaw6Epzd3aR/H1cws88d\r\nNMrK3VN4fpDKg9eJVsps/mor+aSUDzBAMF/CJuXFOLLmMXIYPng3PBvBXBLr\r\nB0Wg3Terh1cdX3qnI/X5ACbIRnkXSWRySRc=\r\n=b31Y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220619131032_1655644242826_0.03114024498084622"},"_hasShrinkwrap":false},"0.0.0-canary-20220619131722":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220619131722","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.0","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220619131722","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-NdCFZN8ERjDRxeRbv1lK5rIhRgBQ0IU/I5+zHiXHjQYt+wJiv/gHnyof68WrLdjjOhZQfTcIGqnhDVk2Aak/Zw==","shasum":"8eb6f6dae331f564d0f271e34151a3709281d17c","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220619131722.tgz","fileCount":23,"unpackedSize":94587,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUcnA44JfopRG2FXULUUaTULhaI0IkP1uXxGFHte1pQgIhAP3p6LzJ3TtQCgiMo1DmFcFizQfYncTzf+ZevJSQdyTS"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiryHvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoakg//edDJ885s4/fEz9UWJeqBYZE3mx182/3LEUMGxnqSXfyAujfL\r\nwumtn74zslir3yW9YsTcvFJ5D0NCRaWGfxwgWDYNdbi2tbtvyxGJujiYPqYR\r\nrTKKAzcpSPvYysRS6mc0QLq2C14nErlje//D5aHIHF9JEwsnwyS8m72QM0Yh\r\n5XxUhic1/TTc13+DjwcLNDQKTHgbOCl/L4ObloWWd4pVE5/yq6ydru40lmKW\r\n/4JiGa69F0CaDz4FVlBhuJ/8lMjyLd2hEOzIWL6Qewx+CFFESD8POFNqJxTX\r\naxB3BKL/RQBC6V3fmyy5ZvYFaCkjRKXkIYqsY/DIxrwTxlR5To2x9kjkUvPK\r\n1Ot8+20t5C2K/N8WLVlzrjs2iFzqEJvb2KH8vd2huRJnLbnpksFcNfOdplHS\r\nzuyaf+oQCx+bjkGUgfDMmO7ZZrXecclaggCAF3K7NLQ8micyoZ/m5DXpVCNa\r\n1M85vIObQS+Ty00dsTemK1Eeo35Se9f3OpCVIGEk8+xHQZ58Qj30eS82f2By\r\nyWW3+MBN/2eAezLXbnN7lw72I3Ax2isy0wXN3MUHrEuaLK0hTVUFoegpg7OK\r\nhnAf1y5Y0yHQftXvZqS2ToGcKu08SfIznj9LL7XPrYCRDzG4ilo9xN43Rf/q\r\nR7WviDRPSWwQwliez/J5JUSZPI6YMtluwME=\r\n=E29h\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220619131722_1655644655075_0.01778311016368672"},"_hasShrinkwrap":false},"0.0.0-canary-20220619132136":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220619132136","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.0","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220619132136","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-qZJdecTRZuIAnVhisd2sqGVNqRMzeORyomiPJPPGGA3Ney4Ct3zK0iyPE8D29dfWUp4Dabbydmb1YnRgOXGBpw==","shasum":"ed08b052dbe6c6772b1c74691cb87bf93766eb3f","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220619132136.tgz","fileCount":23,"unpackedSize":94736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHrZXhryZZUAJXXR1yEpp7QIMawzTUbXGune/Hlon0M3AiB05eAjXzqC+zV4Pw9Avfx/S/7nCnSSnCsuId23qTxJYg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiryLtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0rhAAjNCTOoLy64srln6fq1sppiaDTkp+v/7ncQGTR3Fn2lwv2gtV\r\nJ0uSSTsQG1/XDoTyqfPoxgfSM3YvarQLLG0wDyX42t47o3II2ZBTouz+OuMF\r\ngvag4LTFm+UBX2ZfY8aR3GoifcI/wPbuL2Vl15P2JkwocIMZYPtlxtoZgWJa\r\nYCfDTSt5+Clcb+Qg9ficA0fqJTFlU+gVT/V4TN2LUoot0wkLKZYrIu9zOIaY\r\noJJIboDBIlzYsLzU27WmR7fwtz7htORO/Cqpp1Quj10OCTtR+1ykRGJndmX1\r\nr/MlejKe2t9J3Xvjm9xYHOql1klqaI3l8w48JrebZttMDxEBKvnVGRK6zp43\r\nVNP9BxrO53EzY315t9l48wQivff8bL3fcrss0CIJl376hFaAH5Q2s4gF8CcH\r\nzOatcMmCLMGq/Tgdb1vD3x1OoKsVuvLhyaR25nW0Wp8yaEZH/ETZUszHXh7E\r\nD/yPzjgnt/Wws/K+shufRhD8DmJDFCEcFfylcu/pLev3pS48TxWVCUwtMXkb\r\ny28eRzN5coljc2OFpx7h3gXPRyiCd9M7ds55vOfqiXfFKgXKlK3yZ4/qFNjX\r\nmZzjkhFS4EPpQX6cR3V1LtD+W3Xf5U2HA6nUocgrpZT/NqUZKOrbctB5oyAR\r\nwDG6JmprrSoTC6c9rml15u+83OG2/2TopPQ=\r\n=to4W\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220619132136_1655644909030_0.322886410107428"},"_hasShrinkwrap":false},"0.0.0-canary-20220619160353":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220619160353","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.0","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220619160353","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-P7tAoIoPs5boeqPN41v3HCDxfAoFl2nY8EqR1lmVx1N2tXKWjWFjLvNUnEkB9etZiiTNI+QxNITa5ZlAILKp5Q==","shasum":"1899f9386c98693b4d3f3a49300005d455893219","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220619160353.tgz","fileCount":23,"unpackedSize":94736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFjR3KFR+qDXqVyoms0mKNQ4fJivKdHJJrQTy8PtOJi5AiEA5En7308qa0Iqh2UN2SGpkK+k3/gTu3q7Pvd2pJd1UKI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJir0jzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqq6g/9H9uPg5WUPDhshkADXzLIUzWrYdLVy0+K1/D2H+Jjx6k3YAon\r\n39ed64v+yuzZi/wpGiT4Fw4wnkj2ZuknXJsNiXOMtCRlkqQQMj4YFXQnAbMF\r\nwF5l/f0t/ZYfV1ze74diPimcoD4FTVu5zC0sX+NHqj4gtkz9MdXEFpzcIErs\r\n0eBed6uwkl8b8+VNlyVPrdzwjGmwsEcaCkv2+C63IBnRPeShqsk8zeLd/jQp\r\nVOAvbgyItsbYi37MHnhGmiChnOhay9TikM6GRgCNZBSAolawUYE3iJTlucD+\r\nYd06bETbF83iR/b8MNi7PBof4pQAqU4gg27NWMFwrIVZCIWMB8Bdm8uWUacC\r\nShoo/XJ0EuWS1iBYieVRZ7WKouD5KR4TXV/plRBZwEnmHJImabWRHOAqeHEi\r\nKt8VvJzI9proHrC0QQfpBc6zGR89ERwdrKP7EDkCtFvTkePQBajT526dJA6V\r\nHay5WYgq2lau8WnsCpS6mptyMKF3cwstj3rGfClFHwufQbIn1WWnO6HV5eqP\r\nKMg+tqcZoF1ib4ZBQPrJsILQF0scCB+p57KXPKwWdww2O7SkX8E2nPGDZNIc\r\nBsyf8gwTxn9oB94NP196aVtkk5ZxQs2tMdJ40tXdrD8lVY2agddqLo+ilrh3\r\nOhXPNpc1S96M6WnJwa/HP5PjSrWCrb0KVpI=\r\n=4w83\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220619160353_1655654643361_0.1662357603709279"},"_hasShrinkwrap":false},"0.0.0-canary-20220619161006":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220619161006","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.0","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220619161006","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-vnPNv1f/qHC0eHPZsb+9z504xajGZe8sGwXRUpfPdGPu3Zb8HcQGWFFtQMupjvnAqSUYpsdwMbUffrtp2SjXzw==","shasum":"dc35f9b9ecacd115402cfb5723c68b179b482c64","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220619161006.tgz","fileCount":22,"unpackedSize":94127,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3dTWHaAID5eQbO4HQRkojwCltSTPVZwCJoxZEnSipqwIgGuIO1TQIy4m3gDasWElf7hU+uHfqw5HCXiWGjbBD6Ac="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJir0poACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoy7A/+Mt8vcDe+mN8b9yIL52/AlOueGkCdqvtRe3ZVUpa6oSQldlJp\r\nZUMs5PIF6eIpp9btTqqSjEW5RZglpYUz+gyJNL4rCTZg7XFHEnXeeA5yGvEc\r\nuOyG3FSK0hBE8ogNkJyV/OvyutAgcXICoZ1vDWqnq53SRrv+URjkEShV6UKt\r\nbqsNQKPUaCXPdyl5s/DYXvVMz3QWReWKRCSu1QvV6w95uIvdUWv5hi7FxI6D\r\n1tpk3QAYZJu3+r6ziVU9Ek/JfuR9+aTd622GFwFAfGunTzM0LIguIfK8MvIx\r\n/7yW4nBluGZ6KTFu6qlxytJVunJdCEgVp5gi1xUJp49EW1IPSI1N8lgeTeH2\r\nFJ/QBZaAh7RsThJa7l8pyX8H0HwqjFaXmGU3JrJAkA5Ab5UTXEJgRf1rdrfl\r\nLs/0RFD6tVVLJAojDD+FbWolO6nnhKEELUUXIXVjb5bF8QaNAEZIXbBz+wo1\r\n/q/PygK6Cm0jJ/9YbR0wKrroFDc0LmKkx4cv9nc20otetKpcq/KO2WVp+9EG\r\n/wwirefIMH7xjjiwlMIMNh5tvt+XaHcMpcGpwspcZXRQ1/g++y7XBNFysV2z\r\nlFvRyHqR2/RyYem3y/jbiZFUSyen5+SdXtbtOi9ewNXMYLPmfSzbyUn4AkpP\r\nlxXCGWgz6bwJzTLX/1yQHxh3ytxersMPWd8=\r\n=A/2e\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220619161006_1655655016505_0.97920316874196"},"_hasShrinkwrap":false},"0.0.0-canary-20220619162816":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220619162816","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.0","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220619162816","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-rW1pl9+hf9CHjMMo9wYHl3tXFTij/BYYKOo2SmZ/5BUZdXSfjIU7Lg3LqfAVwlLGGQ3tAgUXesqf6oV77Fm2Aw==","shasum":"e922800fc50f8b0622f852a49b90947f3a7ac709","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220619162816.tgz","fileCount":22,"unpackedSize":97126,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlLTF886XByZuCE3RL6qQyFU82wEiz4sEd/U3ioCp+NQIhAKUWd79DDxivshO++P1jctdBRr4NqYqbvVVxr484chhT"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJir06qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2Sw/+O4CSwUEzrEnV5O2c5Aq2O6voj8ebxiBG2JdjnTDvbvUvIoyv\r\nh1cexZVspZFpxqjwHKpZPpA/wqBlif0IqFDK6wVtD5AVBbnjX+vCisJKT7cs\r\ntbCk46lTZw8vKHHqdp6KIW7q08MQiN/JhETYDydBrYHxBJov8mlgGs5faA8l\r\nB+QVVDXz1uvrbbR1neh//Wv4Q0JLLogPztg0UoPHcspPlVIq9xH7ZWpCBbv/\r\nYjlblB13PjR03jQ8khRmyhW4eeZWgsW9xdU2Ar0fXxeR8KbpOtcsh+g+/R+q\r\nmjZDl8qJRMUCyMpEW2wa9bDprzt/WbryB/JkvazWDhsogRSsTxlChO//my8j\r\n7jg+zVJRmDP1zHNaWuB39D2E9lPzmFPhXThiNC1qdBQnBKI6OLHcOrRJ+9Zs\r\nrtwcdYrYvNhyDPgZcmb+H4argN6zyohXxhMOx2Bu1N0Pxp9HG18XDvELADy1\r\n2dpurYf6AhBYm2O6NDe7iao/iRP0emIK07IQ7vF9hq+WZbiXfPsvjZhxQQQe\r\nJO9/gdUfQrJLEQVIDNCrR8UwvRJLkr6qAOe23PpaCJGTJN6ushjCtwf6hth+\r\narnWPuQN+lt2ABdOFhpJhIFeehM3FqB3Ya1veKP5WHEFW35mCkM0irivu9cO\r\n/1F0HKmmKrSwUP225IXX+jD4xf9a7Ay0pLE=\r\n=pFQA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220619162816_1655656106616_0.015727497743999397"},"_hasShrinkwrap":false},"0.0.0-canary-20220620081248":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620081248","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620081248","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-s4IG7dTmdxbOh5+jbsCNaMIaHX+nDa65XIDNsU6pGIEX7J8gg7+KunW2PiTNG6PykI9M/nq3oTyu6ZyFnI/AvA==","shasum":"cbd49bcca86dd8cec1fb01a7fb7efd317fd778b8","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620081248.tgz","fileCount":22,"unpackedSize":97127,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCw437/spabcPhnDRgi0tPKfW+acrUn74m5Lnv51IRbgQIhAORqf6tU4oko26Yfw+KBOPYrOn1FuvPraeHCEctbuQra"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisCwNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrl9A//RuR4YryJRCAERsvYLO04+tztwByQd+eqf/8CiiPVlOzcJyi5\r\nz6f0Znhtujewo/s2GHcMYvVSQJ1kTrIma4rQWhx+oNi1y0ues10+W/K21NvS\r\nFfpBjnshSAMcCOkhcFgqpxhBPYpxYDoBNaKc/A2jVh09Vm6QSBCfWxS9Ydbg\r\n37KFEUER3lWaD8EO9xm0kU3eeXP8OSXCLgvW9vduBL12Wr5NLoJiMjhSshPx\r\nVZwUUANttf9M3s3aCj2rjyPYcyl+PbDXkUb6m3Pgo+Wrj5STxCpJmj3dzoDo\r\nHT4V13qncKtAw77DnAuz49AI3KhQGGlLP2XEr/TA//IuqVi+4hRY8MBNuqy7\r\nf4FB2FYqLbpOUaEBZGtJnJ39QKY2Jl5nZk5h45rEq/80T40+VygbGWQyNsDT\r\nBLAzUqrNeVH/9TJinCt+GFCWwveN62cY40jMCz9EmdsFW3jbbEtHPukuNaVg\r\n5lBq2oMXMTG4rhyHjJKILTGy0W3JXssyPcdoMcMxYx44QDKaeI3xwVSghihI\r\nkzS+uagR/fkM9jj7SzMJxfiE7N7XCQhq3OzFOYXBnE4rPFpIphE0wHkIbdfS\r\nypnzhN6GKOGg3eAuE62UwV7L4+7tVFS2QUAWpktm+KR1cn+1dzYFzv4aQmhe\r\nSdIevnhV6IaYLrgB3L7vn1BmQyvktMLr6og=\r\n=BFId\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620081248_1655712781487_0.9726805428751621"},"_hasShrinkwrap":false},"0.0.0-canary-20220620095345":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620095345","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620095345","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-32Jyo6Re6or84BlfDOqkSRDAIz6QUKvzDTg/PW8YjRbONG9KkTgMn6J5vRdNHRrDsVVJQ6Q40aWp/jAh7atCFQ==","shasum":"7a529e0d91cedb719f5d74c0aa1d385fb89e6fc6","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620095345.tgz","fileCount":22,"unpackedSize":97599,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGI8F6qeci/pZmsi0b+65W9HEboFXkogGvIFQkANocXCAiBoe6I1S7hCyv50fqnMzGeeTzS2uJqVEQI2NGFjFOUOcg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisEO2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmosjg/9EqdeFz+Oo+dNO2n0BAwxPJa5SaTuKjYa+TgxzamFi142B9fW\r\nk2K5vkvH5E552bZiswVIHtmSWCSjsVrYZaFTRBN6QVkKVn1sQJ1cIr/CsOmt\r\n++nYY/lNWQbiUUL4GEBGNGABj9x+sBePTO2rrucYJ1cNvAFaLnIiZ4dWSoal\r\nds8RGsA1qXVhs+sz9P/IW1F04HC4Iu299cQunsn+G9pihGOVkZnIerMhn9C/\r\nXCuzQkXA0T/brWwu8S+jaL6sPx52g/isP/21bGc+zoq84SCW41n6ESQyo9de\r\nsK8e6Wo5VvSdT1tIBoOO70ELZ8MvW38TrFNCtePw7OKqma4fFDa80X0nPRhz\r\n/b3QOwbyPVyiTXPKZQqnYJ2RToImEVJNfgNKmqOm1/gM7kcJfa2prEaar8jn\r\n9pzpf/jQ2V7cFIuY5Fokfsxzmz6CwbQmo/Yy1/V82HR3OV6iNl3AIax4lYbf\r\nZq/7x+XaZpbixhV5RX2yu4btoBJyIx8UYJW66CZB4iCI5q0AW9CaUg099pO/\r\n+/Zb6NuSyoz7tDAMBMu01r/sqVMi+moEsLKGm1h9dIgjp2eA/KxP3bY9D1TU\r\n5lfuGsf6neeCNaG/fGskXbvoP8hIZUXO529mZUNb32dzaQKeJq+wYWLHpX/O\r\nn3osJrfT8yzutMjzzJXiCfX5jLTz0VNGSm4=\r\n=XRNN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620095345_1655718838339_0.12496111764655926"},"_hasShrinkwrap":false},"0.0.0-canary-20220620100818":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620100818","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620100818","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-v5MwVrRbBYucDhObUY6Wi/GJZxv42F6T8OqjEc6UHunYssc+GuRVSif5NMAobberHV0DcA6I1m9BIV3zi5StUg==","shasum":"7e4101610ded1345632b9180af4a47b72f7e35d7","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620100818.tgz","fileCount":22,"unpackedSize":97599,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE8b2hyTu5Xw3KPSj4Mr+dMdRbSB829AXUFUdQduylIUAiEAgRs0U44YeTL9fCqAizYUBUEmtdSLwld+WK587C2a3Fc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisEccACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWVQ//VkiJT9vrqcr6odaaDP/LxRKkcDSDll6UaI/ZR6+bvyvnDduI\r\nFTWVbMLb1DVkBLSxRRgRoUSZPXl43skFlrD7D1SRsFNrphZZjHJfWdOYRrvp\r\nQ7QEkpoyvnved9p11ctfhM0DpV8aiKvlRXXOzuCJ2siRSUuvzlDsN+9x568e\r\nI7FBPsEHTrGjZuMkmanAMz2+gCwLIk6A22tjSD7Bl5qJTjbXzjpR6h2/z43a\r\nabufM8poQLAJ/rvVLch+7DFUcEIJGB0CzQauTrziZAI8j9VCYBGTqBKwowZV\r\nyVavNwNFyw3olASvtChUK6fK/NOHpnfoKn7YAhM1TdS3ZPTkjiPnrpwf97Dk\r\nCwuxdMntZ5gmHXYOtrzpAN+QZ/7mso7mzdNLxmIOnnGOv/wz8ZYhASe/VIV3\r\ns5k1zl56FdVz2FzbHWTeI58+qc5UmM6Xatp88aDpSwJv2l4mX85/goYDSzCa\r\nQS6/6U8auEf3dDGSPulI5VXlNJo5R7Ddt3wFl3U8YdP7mMWMZemfETCkgrxI\r\nzRs2zz7302D7TzGoqGAcV+wYja4SM+ck6uI6/iaRxKegmpq/4NaGyomc0byz\r\n5razUVI35SeHoWRNeukfzE/kubuKqHxa67Eihe3VfL0jEpZVjyumf5qYnobf\r\nWsT6uXJTGUKPJBKkxyiFJjl1DU1lAm4tNd8=\r\n=JqEw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620100818_1655719708412_0.7826798564530424"},"_hasShrinkwrap":false},"0.0.0-canary-20220620111223":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620111223","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620111223","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-fMUdguMFanudYFuldqsDlcqg+wzhGrYaE/NDmGojUYFLVIBzJxBIgS47Cuv79TKcxATklvpiQf+XaXgTW2JD8A==","shasum":"e3239700fb6f29c63d9ddca1682503c54b8c558e","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620111223.tgz","fileCount":22,"unpackedSize":97821,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOuAA/RkfyV8XDj4HVt4UZyJQBZ1drPRq/MiF7qkITCgIgOcIkOiDto6FBNzUEoXZTjsPztjzykPo4zwoQw9iPnqA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisFYkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqasg/+I+yPC01bQEP7pOSs8k6hgZyUTEcWip5DHlgQdXxqpEFu+BdK\r\nszXLHPqrFBKqTHd8NN2Nh93JgVEsGuJJg0XWWCjTiVhyk7U0eb4zZYau26+p\r\naAwiTcFqer1t6A9vo+qJs6lC9r0Yv+vCZMd5Ww3z3wOWAfSL65lyJZCuhW6s\r\nGajXs/oBVCtLa2FlYPJ11SxEOWEW7ptez0QuITTrD1PjDKTI8vGqWmJIkqip\r\nDG5UOs1FoCvzdIrMqo8lD6wseHPioey1nsZMhgC4FYxzKUbCMLXhBuVeTC5R\r\nfvFiumsTHc78E2lGva9lGLpd4xWZqH74i99qbYIqzWAEkzBRDC0qiNCwbBVZ\r\nChjaCpauect3gRqyZrokCw2mZsEOlWee8kOnyO9zNsFg5DJt+rxKjIau3wNX\r\n6ARrQ3AX76TaeBogze1dKaRc+IT7N/xJ+do3/ou6sszjRUT+fIe7YEhosu1E\r\nzr4rf1hYN6KT5ueMowiFGd8bNGuqa5krCahw4IOzoSStE1TYVCKocwUnQpEn\r\nL2ZyuZ0UplOTE22WvjQFoiHBk9aa93Wmk9IUJ60Y6+VGFz7NjPzhPUx99TPH\r\nGo7/VuGLV6TnyqCnqBoJZJwI0MJkKRK9EWkyI/KKpJlotxMKcdDMp2cM/MwR\r\neQ1YNmDU65VHjPM0vvvB5jetJy3+KTO8t1o=\r\n=5fv1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620111223_1655723556469_0.9988022314264542"},"_hasShrinkwrap":false},"0.0.0-canary-20220620113551":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620113551","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620113551","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-IQ6ediu2ar9q9lbVHz9NtdHwnxFKuQ2V69h1JycbswbimbO/n5zzLRdqVNEU7UunggJoMjkNgHJktwNASzjYfA==","shasum":"ac26749aca867f9439576b56a0aa91b812d79c2f","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620113551.tgz","fileCount":31,"unpackedSize":100403,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDwwbddU+6vW5R1wXTEJi/Jr2Rl6MAyES3b7znWrWHC0AiEAntLiMqipudYu0Yj/o6T/dnoKNGSF6KtmNX9DMxlAHPw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisFuhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobCA/8Dk+3iHanTM0RkF/GAjpe2J3feC5iPD/4P3tU/2wrq4rK0FIv\r\nkD+K5bFiZ6i8qJ6Audo5o7qWf91VXhVbtA/Ij5Ne/eAp4AEf3PcXQ34MwT3A\r\ngA7cPOOo/Ezh0x9BKKm3qB1Rks+s3/I/dtZ2PBldJynQ+A4GpUgJAh5jcR/U\r\nyQg8balhwS6EAB0GBSUaCyRnyqeRrcTRWbfHk2WpSX0FoVZzrnTf6SQzOuUz\r\n4M0T1dSFyth/k7TFZoKPBNHiQnx9p8XEp1YjsVk3HnwBlO0KUdrY1TOTJRHl\r\ngpYwdiyVQoSl/YFGX0btgsOww/CRoQv6tE6aIUZIQMLU6r8qImwWsGt7DvE0\r\nmh5HJh35eKZiAiSZ0kG1hFyp56+5X49iVrouyGMhGeK29TDkzaI2gtDPR7eg\r\nJjnaMwYZqPfdcMZLxGk8Cbm1GRjyf0ZVDoUFPjMIASklxAYcXfvXFsfovsQD\r\ne/OOJ4bh6zo/IYksWK75bhBsPXw5Z3KpyoFexJdtY1oH4L/aXh+COOj9bApi\r\n4WhN5Xr6XzFCWWHpwNzlH18t5Jbxd62CE7w9i35OpWoYT0sNIw9ncyWxLpgw\r\nvtqo6pyn7AQmu4DbUNRyvrZ9sgu2rG9Pz8S/woMEQgbF+V+e1bh3Lb5RSgtZ\r\nMnLK+nCenIlrXmKWx8HFl5zcZpCP2uZRn0g=\r\n=OFZm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620113551_1655724961426_0.771753452816698"},"_hasShrinkwrap":false},"0.0.0-canary-20220620113815":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620113815","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620113815","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-tfzfV8zPwvM1OrhyM3wIEx/FgYGd3/2JR89lL5Go1PIYAfxb/Rr291x8+rxbrJAIikym7pAOfMuasylFMCH5lQ==","shasum":"01af8d8ab0708287f44bc5bd0e42178cb39b2cfe","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620113815.tgz","fileCount":30,"unpackedSize":97760,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB07osvGPG8gITceV6Y1OiuV+3oZNIlImvNwJDutozQhAiBredTX9A/SMUpEmr7YwcrgO53NjRDwj/jWo31VL1n7DA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisFw2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruRxAAjEwmgF62DBEO4VaXpinQUkJMeOlU6B3T6fAo2lzmzMG8q7+h\r\nisR7A6lmJVvGymcEzHinDbnabynnMWD3OB9+IkqY5j957IY5N9QkrcfB1n92\r\nNZUaig1oNp4Tuowbay9EOlHl8MBT2sqvBPuyEHAoP0QUom42TM4PGHaQxe1w\r\nG35dqCLX98qs4KOR3HtDXN7DA9YOCTNwY30r4BxhnC48UWQECdMlhvsxMnud\r\nwGJ2CKRixZpx3h1SzUT44zc1bHCrT764Cpov7c/7HT/Nr0CoUFFXdIM8NJqK\r\nJDGYwhdaoNGuf02aaM742osnX+MBZjukcp/S6zIz1kHoloGaFCljsdhuy4gt\r\n3QnEf/pqLabx+MpyNdsc3wY/RnbQ4GuIMNxpO8DiRwpBJs/xi7DfTp/6NUk0\r\nSUTS+2Yik7V5UbATf7sYzSJteKeqUxiineK0jg1G6QdF3j8vmAegVm4dVe53\r\nNk1QUESdPKI7oUdVEZnWCuLODJKt9eeM0lfWeegzvZ3nbvMthDyCTplV+MhS\r\n+/mi4yQVIfy5aCvW8ikHijT3tvd5YRxs6mQbNB02zDGwRhIwOL1kRTYKLvq5\r\n4iLiKlIkb6uO4KjGgcH1dFH/AVCqYBb9kOqKtUkE68u+C6xgkZwloKA/fkJA\r\nX8axoeLX7BOAsFtnbpHU+LQ0aggDgKgcfRk=\r\n=ULm5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620113815_1655725110553_0.9339479647331903"},"_hasShrinkwrap":false},"0.0.0-canary-20220620114034":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620114034","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620114034","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-O0UMu6faslaWYjVpti0lLSPsOqGP3Cey6SFnJH8k349xp9jSyMTZUSii7VOruSIyJNz1pqHgVVpqHVvP5GOrpg==","shasum":"0e37a1a8cf012f006b4d003b6a157a9380b2ecb5","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620114034.tgz","fileCount":30,"unpackedSize":97760,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMiFq22RunzCe8rcWNEXRbGcN2wLlXCgwV37Vgtok+1gIhANr9yXLubWNCNZFGrSFmFSPMY0gS+nijuPJedYzBvnux"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisFy+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxxRAAhx0q+S0+J1NCnDk8eSwHjTfR+Oe6dxJyhYM34wSf55aaDSfE\r\n9F1C7XbK1YWfzAqfeGg9HfiBY3nvSvwPDqPExyu8s4/nWE8gqEBBcgoBWmJd\r\nP8Mb4nTt7kZnicmI22BnyInPDgX4mCvzFR9GPPy8R2U8tmsZ563eOGdHMFRp\r\nOZ53D09UcG/iM89Pb6tHP/3IdHjhPhoVAVaLWvIggXkDu1vH3sODFdLssH8o\r\npE0SPZoFyKlQgsqXJW4wFn5YWVCRzy00OiD++PuWJ95KzHzLV/pM0KszNUpV\r\n2PW9aEnkYbDScRIujJbZ7wvNoYyXazgj+0WqeV3kvbMl08WOAI1oDKQO62Z+\r\n/RbBqeKEQ82D0lAsiwMqgNIXSEnMgUFug2+BWrwVRbyG5g09OfYxVmvjaOQY\r\nboln+r4Wt9sUhT1cDxQgIELsSCOBmGPO9vTZprwgMEvIp4ECRRgl8P4EvDfl\r\ni2+Wn1kTBG0ekciO2Y8NaKf5KRHkKhHoi/I4azajIU7yVh2L17nTjcBeODOX\r\nkJtQBSglddiXckIj1D+VtpgQeQgBGod8Jx0I536USgpL8rjHhah5DtdTnAdb\r\nzxsMU5OvueDXRSXNcmEbFLehvcCpwke4O/1FUy9yqxD3j1gGy8813L7+bWRp\r\n2eY6A/rchxLnoJmrEeQJ4ZhbukROk+yLLeE=\r\n=uVQQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620114034_1655725246341_0.5350301001740285"},"_hasShrinkwrap":false},"0.0.0-canary-20220620121515":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620121515","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620121515","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-kC5OGuuDcFhPTGr0vYxdwuEW7CFXFe7hTUSmdLoEorYfhjQ0uhIJff4egfa9FI7kOAhTexSbdyRYbVwh6MuTPA==","shasum":"108d883be43cf38dea5d00aabb134d6b00eac34b","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620121515.tgz","fileCount":30,"unpackedSize":97918,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA55/aGqYa2y2KreIRptLFUEKjSRK+GfMyHbOxdaEd1UAiEAoMaOyadXX6gPS4Usru1nMsqikdDCSshNEW1Ii9s4MbY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisGTeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmphkg/+NLOIERs1BveX+mVu0Z2sT2iFz7UVNQzvH1lJOaQAW3UL7RQ4\r\nbw5fsz9c6zF6T5LJhikoIggHVIRF5rpgvfHxec1PlQiIy9Fk6GNx3WL8kejk\r\nE+V5S7m6KQQHR3HycbGC/irrqwtEMgCRVMDSOZT/aLMKezauAZ4bZMFY+RAS\r\nx9x8Gwzmy2F1hYaMTPNTsXKqjxW1e+5HzWeTsAYrgiYx3JeznmXFaO8AWOeE\r\niGWYabBX+4W6StTriBbYYqDs4O1SMu30BFP4q2oxu9GGPA2xZosUFQf7gMru\r\nKs9Hd0YbAntvwptzPNLShX2yu8Tpei0QduR/pG+QyOohb4YjXDknK3J+ikxn\r\n0/fsFQSqVDD7USZXGZ1exWYZL/wqIqJVprf+3GWqwv9Ka8y/bQ6KdVgcUn2s\r\nOKYwz0ZmDbrNuPzQGnQ5ogW3eLVb5uTiT8auFgis9WJpcsl4mD/5tCcRR9J1\r\nQ20kt6h9rtPEZ0ddr6hiTuvZPqpYtVGLx5WsaEuiSG32EKvvTDuOOor6Mp6B\r\nfCvRf7H2qN71FxazGzVqzRHoQOw/bLLcfFHzxTiOFhYoLQb9lj3NTV3bw9vF\r\nHYq4aAxFwWAuVOyIZDirJkQPXbayx7lFs7vqFIOuOqXLtZC52sPHkVfljN78\r\nWnzExttk0UUmlLNixZZ5VSPzamqgHHvJIOE=\r\n=YAer\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620121515_1655727325905_0.4046905061131274"},"_hasShrinkwrap":false},"0.0.0-canary-20220620121919":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620121919","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620121919","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-FYs0Fq6kcdeI2F9xyWzknOKPmkhfMm/t329OghpVyhu96neanG3RrsgZQsPI4YgrwCTHB20O9L+u6W6Fs+sUkQ==","shasum":"7dbb23db35256f65a73c044b2535b3a115976172","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620121919.tgz","fileCount":31,"unpackedSize":98917,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0h2zIULn+3FMLNw7oNjB1ci8w0e9kZckBhYuPREMatQIge6dsOaDCx1FXlS2QCEylsaGGtRxuCA27NFTqO+5Y3BY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisGXWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsbBAAiHYed7rqPosuSBt+b6nnhWh2fbDaqEelpYzOrbNNOcalGXBa\r\nF2vhNNj/usJEYq18Dv8jVCqftp5rp/6FUlMIDfky0OFXbV2VMeuBrke5zUsY\r\ntKA214zj36lPU9Eew1r/bj8r/bbz1cKsbqXDHERenQPywGUVaYwXtnOTA4L7\r\neI2qpn4ZkJtimH/adiMR4LUTE/niSYcuc/OsmKWQHQJU25LC92bINrgnxSll\r\nmzelyV4Awf+4SazxCmBJa3LPm2CQp7/5wYv8taPwK2L4/m17WWKRvPTq+ZqS\r\n1tywtzOQ8tI0LDs2egiGW5HyzX/3baa6Gx+4epxKpwSRSePKvqNJzi1ngXF/\r\ns3qGzKnlzAzmecewo7nzQDkMW8cgTZw/JaK2zwcCc3j5zOBzq6o7lQh2qxmx\r\nKwQsr5s+sLcc3qLny8QcT7FjXcTm1jTtBMuYJFrXtxTbmUQFJrjyrDEiTUGn\r\nq8qTAOxkERgD9D34MXAf4x55nVn73K/RmRBAiaObIolYLVglxFbU93EcbjgI\r\nit5ofm2T0ci8F8wutjKlx8j8lEkbUxnI8w9uRHLlbfgJjJk4oMhU7DYUhohk\r\nWDk9DqlkHUqz7+XGUspx9ARjK1Y5Uy3ErUN12tosr74SOTAC2Ov60j8K5YSs\r\nwVrmWGJz27Wj2+nIK59sCzSaA9BOdzYLrcQ=\r\n=cuzG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620121919_1655727574389_0.4253084341244133"},"_hasShrinkwrap":false},"0.0.0-canary-20220620123850":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620123850","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620123850","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-dRLzs0w2noQHRQCmmvqTeGTFhMMCbK4OWpfFYgmn5igTaArOXbcQdInSD8u3JnaMKcNITTZE+mvIY3wzARQoIg==","shasum":"d1ff03f1a011ccb527251c5a3f02727a34c43172","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620123850.tgz","fileCount":31,"unpackedSize":99058,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCQg71F36ACheYWko0RShjao9x2wvOgE0DVGZReIgfAgIgAOEOynBHzsyVV6WnRXhOfRHJj+DCkx0XE7HjXAQ6JeU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisGpnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCig/7BPIMOvmbWBnYkpUE2MvRqiRrQKdWtgBgRsYxaJpc+AOyQ2wH\r\nanzbn7kf5x7HaTUqGWldYMqpzR0W5MezDCgyLenT7EO5sTIp8TYJRPHf0Ox7\r\njxmGHn2LGDSd+zrh9U+pSieNk/XOy0M4QbK4W9aJX6lWGFsBCDGYcEM9vh+S\r\npw7TnpuKHJdK+dW7eutOeDAVHyFD8HBsoPrsiTci1NucFIQFL6CFjPLShY+P\r\nxjXrokW2zbtxt1DqVbRu3JcV6Z1bslNFd/MNb7TBf3WeD5PlTdBv8j6q1iYE\r\nhE+DQPQD+QfZ6ZnaLDHumArwyttxqbz5enujaHHrV+/GWHgUyd4JOQNCwflU\r\nfyWcyMXDi3k/qw4JYi4Yf4GIJ6ABO4KYT2QBI+sCp3n7B5Cg8qWATr6+c1pm\r\nA5xNJ2l1MLkt/LAf5geIee7hVTSRmgdchpAz+4nsvLDcDQqFLfP3X3rZYxsq\r\n2z20acs4So/j6sDKm8avCYha8k84mXnNBRnPqLtsJWz26o3u9asWEDCodyvq\r\n9ZFRiDNMa/x129KZdYdI8hyxFM0bgRV0eYbJFkmqOX7UcueXfsm13TojghGC\r\nBR9/EmNo3BV5sCFdw2h8TPYHfMxNxiu8IzUdmEc/0E2QqDznYixzYICFBx+7\r\nS6IHZB0UM37sMQ8XrhYXBAyLwS3ACf0J4Lg=\r\n=ofpj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620123850_1655728742954_0.020329278383523608"},"_hasShrinkwrap":false},"0.0.0-canary-20220620130713":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620130713","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620130713","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-qQtaPFiFcHfOUK0Bv3ddmy6sN4KJRo7t9x7jIzLbkuB//LqEx7kOfwsMNqAp/2Cv7TIJPHnVIuYco2489TXRdQ==","shasum":"47a2c0b0a7170eee65d90eed8e1bb5ba0a7fb47b","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620130713.tgz","fileCount":32,"unpackedSize":101021,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCd3bt1gemZV5h8QZ/Se0foN/UtD/OPlSPYRppfE3nDCwIhAL3rZBpu8DMNbYx1hiDS7Ib8zPUzlH1QJ/pS6GjATlsF"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisHEOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlFhAAmc5/urewFxmiULFpzcMjetY6J0tzGjZ2shDjWnVw6jDB1Bui\r\nryJ9e5i+AYHuI8aQn6ADc6FUTtIbcy2oBOVJ+VltqyqFF7R+aVHWWu5RcyZW\r\nx+JkZCdD2omOT4eqTIqIYQFyFRyiLKPY3zbD6lcgTLTQxQmGOi4a7pPUwXqs\r\nZnBLdCfNhhoB1lwBjLL7GHwIEJPcb4djH57U+mqU8UfZu2oAx7J8lYCrWHGB\r\nUot1HxRVC9Gavo38wlOMNCFx9Xoy6FuCYxJFOjLxhzxcAFBHoIBxsjrkU6wq\r\nj7XM6f7fq70aa5Ld3BlW3Lf8qs1fqG5G/CkGtHv+rPdRUib5NDrPJUIqzo7M\r\npMpqJMS+snzFsZiiDyHtg3pItLhmN9g0t+JLyCaDzZAVz7B+faHfxisCebKs\r\n6PBtbXHSMIaWXeD9cXjkQSgNG6cQwHd02qckSAxnKYkdV+0lkFYt7b1ZLm8f\r\nyi0kjhtxebeTl16lKHvGK1jI+o3fPlVOyUAJo5Pa/BJWVSOB22igtaaglMPU\r\nZSqtPj3O2vn5svJqO7jgYiVMDDvtBeaw7pmSnAfAuAJhLTy/qSdSRgq2WBCx\r\noAzqsr9SCb0TNCKiPpMvfsETp683Gnix+n3nx2VSUifxsIspY5mcQ/Bbzp2y\r\nh1068B6nCWWO1YJ8iJ8OiHPyUY3MCC4dhpQ=\r\n=wxec\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620130713_1655730446410_0.5009305206514354"},"_hasShrinkwrap":false},"0.0.0-canary-20220620133249":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620133249","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620133249","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-bGMp9f91zj54d/sddqlCbN9ojJ01ahMfCTTIqRxDnz+bgI8cbhcE5SSemOA/lQgmCgIW3CZTY5sfdztpdiRx9g==","shasum":"63e118d083f3506110dbf2c07277e0897ead8052","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620133249.tgz","fileCount":32,"unpackedSize":101142,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFCMlrRvDk4hEWwlR7QGazEeId905PQCQdvhlW3FyX3/AiEA13je54akxKsnBwkb+JKtdT53VKkJnb8rpOYCr5zWgX0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisHcSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuFg/+LXqQiZFnJdCoDW5Mh6EcClmbJb/c28dPCV40oOmHJ7tDgKdM\r\nSm817VAXbtuIj7CyOk8bMJxKIyqiKKZJWJ6NZ7JGvDuG443egYbNP0FZG1bA\r\ngznNVYS7rqfM1CCSs8eTxuLHfXOuqpE/rEKU3+s2H4Qzxy7b+eMRMi11eYO0\r\nOWmGCJd9CIilNhb079wTyoxx4Rj9uHHor7XceFLkREzSGhnk1+nw+W9L88CE\r\n9S5w1xa/8YubhCPyRObHeMAWjIaWmucL1sN2GHmA8i5u4+B10Xjwwm8UY8fQ\r\ntPOT74mf0A16GjnGbV/GWX8daNkyFLLCT3/q5uhW2n9gUsFWZYqcemhfwsxP\r\nbILmRuBtsXNUyW/r040DEE1NYrpKuFjwsNNBVzxGXPO+9LNf5xZ6WZcPeBfO\r\nyCpfK3fwhYI5+rX8fzccjUsebf50EwRXKMQcRBpQXQXo2cocRefKOsm6AHyI\r\n6eBw4Ov8nSS0x263A/1T8GJ9pRgVzT20X1X4LRmr90WsIrDWAHHW9qvOGQcU\r\nrVb7GeY6zstFiwtz9Qaw+m3DKN5KvGT9ulqlY3gPy7LsgROmrkV7HbmCDbIy\r\nEuQpOO3gY8cXW0zwYKNRZJ2DDvXN2u0XSfELZTGqjzARdvgOoSmYNLit0Dni\r\nh+k6e69t/LxqrmG5z7VUyNWPCh+WZJrDR9Q=\r\n=svYQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620133249_1655731986426_0.7626786930181817"},"_hasShrinkwrap":false},"0.0.0-canary-20220620134450":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620134450","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620134450","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-mFVcsGbAs5GjocfXiAoFTvaF/Rj+nnFAczdXnzbPOmkG2QOlPWuk5oNdL0fQKrl20h4pHhcJZIM9vdc8zgYgoA==","shasum":"938742b676b98dc4961195819db25f9ceb1e0976","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620134450.tgz","fileCount":32,"unpackedSize":101142,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrr5otfN9r56TBqORQj/KXaLL+0kcYwzoBtM3KPiXW4wIhAPEx4NOiYl6iEve2zxbWlsayCa8y/XpnwaFVPua7pXdE"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisHnqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFhw/+KVqtKihX5i3HRCsEdm17KhlkF1CH1K7tIumOHC3XfNH4kbte\r\nr4FCo6kzjfA74wXmb35ZYi0fHhB1ByEPvxCrOdc84s+Upkgvwebulg+yENoC\r\n1+wo9JbCcMHjTVq7PRtOh+QLe2N6NjzvWwvfPyD9E5GUqbbyFmCJj+9nO6cz\r\n+QyAk1aSpFwS3l6WBlI3yAkHj5jOop3JSWmdewbUTJhHEirenyl6oh4y3Eez\r\n6s3DQAV5qBDNDv1AhIM1s4HmppKJr1tsZBu29l4QzIsMRDp8zaOaDNuo5ImG\r\n+e180Up0Ji8tJXpsUIQ1SvDR7L6cYBWmnMB9Cg0tN7PoJBad+MsD4Ri/w0dV\r\n6lsnIKUk/b4UJTddb/Tj+qZ0Z3Xy4K6DD/QadnQKOso3NkE23RTrGZw1VYEN\r\nVTr+t+miN1qgwTMlZozNLi1LK3SdN5WDWWZo+IHAohpgR/XUM4vS2eZSLWwU\r\nfgGSZMGZrJoWtUFTAv/s8rI6bBFqHTz4//+VoH/nBBa5lO+I3PW7GnEN13Gi\r\nHvemCssfhjwTHnczEQ4Nc+rQV3NtKHH46Cmh8P9N6yl89HTa8Plps/MZnwt8\r\nAS4HwpsG7g75cY4tcrbJP6dxawHqzYmaj3URLJfQ6U96o1espG8i8uyZxC4L\r\n4HcgIkoZy0NYwDQZ7Jtnm+/2okIFXXEZmp4=\r\n=QNYe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620134450_1655732713795_0.42519898207831686"},"_hasShrinkwrap":false},"0.0.0-canary-20220620150154":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620150154","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620150154","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-cv4WbxWLkB8h99SMddcmvr9YdBRr1Ng2I1ZL4Hwa5YhGilHyfz+RIS+pF/PQQc+TXZKURoycAO+0ldAnwVwzNg==","shasum":"8e0561e4ed21d6c1baff253352f12742f1f1e401","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620150154.tgz","fileCount":32,"unpackedSize":101390,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9/SJr+2H4+cE+9OdV4RLNAHfFMocBHFGMQx7JQklm1wIhAKVp+5+JyqJM86tUgkCOf04rV+2ZX8mYdIg/UjHMbC1S"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisIvwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqmgw/8DHExjfl1kT3khOqF7N7LKVo1skPnmzZ0pCWbqUXwRjU1y/WO\r\n8rz6AaaCGhB+ZvYhUaPFAO5snfR5eRTjc/wrdPTbsC75IjxsfhloHFFIrMRl\r\nzuJM6kqtQV0Dj+a5Xsxv18oynfP2HNv4+KaLkSj7UmJ4RqJAOhHFiE3VHIme\r\nI9YAap7If6ODNeyDWmgm3zqcDP5lm/EmeJnpAwkgKwhFa6GheIMMbaV701yI\r\n/MmwWsA+aD5RjiGMVkR9MtyDmJAkwfg73OQRq70I93moMDN3J88CLca2vK9l\r\nzdQnu1goTxyhDl+rMYt1abAEDS/883hO/vGQJw2AuxkZ2Rx9RG6/Q0KIEEVi\r\nCWpITvN4uW7+Hc8mzRZuTpsy/58YKx3f1rIGIIRZZDUY0CHKEVTW2+t3tqOr\r\n5P8JCarpVyb85EJtuBUswugbqT0OmCpu8Yna+AKzRssPH0+ugXEY8OMZWVKA\r\nD0CfoonhRgtvqY0+p65R2YWhvGz8Lar7L4j7Or/WrZQzdCw6bdeRyNhbJa5I\r\nXmkBNO4k3duFROexvWYGR7DGUNjGXPSAzWubVJpf+iCdidzh/rDFj1s0tPa0\r\nJDjGl1j1Wcxpv2hBQ5RTtkCS983Bjt3yZOZ1Cx337fbtYBmKolL5AqnLb7gd\r\nwM4IWW9LaR5TsNok6OlAfH5iaAgAKMHLU+E=\r\n=vvej\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620150154_1655737328305_0.4169992538925713"},"_hasShrinkwrap":false},"0.0.0-canary-20220620165825":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620165825","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620165825","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-TmWpyObWFhpT00T2LiBoSe9EZucg1y4a3z8yCuPNF61TkckIsb1z8e1i5xEGrR3X5RA7gcRJyGoti8K2r5eQGQ==","shasum":"c59f064a2ee83030bf05f55cebbbf0b02c413ef9","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620165825.tgz","fileCount":35,"unpackedSize":105913,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID+0fN211SrwHJrYEt/4GoEKZNDXUgnn7mLxyCeJYMY6AiEA3UfJ5ZDnT+aEPWY0syFRnSre5yc38AGJ51o0/MiAP5A="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisKc8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr01BAAojqfMtdGWCSn/TMIJlVM6DjjAiF8o/3e4E8hC8T3K4r89AgZ\r\nhO+McKeBzUOXX0CTp4pOs0oGfEmL1rytcxFdExOfRH12TGsYNFbf9PvOKL7P\r\nestw559jFqkR7quHveGPi1Uck1JD1q2kh/UwH7ynpz5mRmhfeN/Rc9TaX1z1\r\nNbrbVj2cPKGppqFC4QzIrexzp0lcODGhO4aqyIOkhsKZyVlLDlVyg0oBXCDx\r\n94QoDVEqQhlTVrs8m3dCbXYneL7VHKrcFaPPNoR8LRKnFcwrMCYCYPylQ2PR\r\nzKN2k/ri7JG5Tr8VPWfvGveTykEbMKr5Fr6v+At6FRJhRhoniNSX3qQRrOnT\r\nifnW/bbXYyet9KZroalbkgy2NqJ6HuiXkaUUfCIQ0Jbm16N9y/tEdQvRzOpA\r\nlip+A1jZcPApzRzJ4oMePyJXW04cxQ/DLQdW21qnJP+aVLxuI1yOrJOPxiSb\r\n8Qn5lUBWdqLj+dg6K2JItZqzTL3utKDpDEn+dTA8PnQYyXjWbrXki08zyZFA\r\n07ZO3rv+p9cGWOQ8PQDGneonLi/nfmIDpa4W1hB8PtLku2odbNShJFTj5Wy/\r\nNCYkvdaOghUmiYaIlzUjP9M4Cy3BrkCA8wRHYK9EgMN/qqws5jWHz8I7p/8x\r\nZ42Frzi+TNNaCS6r7cYCBFxuau1/1aSvJGs=\r\n=ZRHh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620165825_1655744316527_0.2778607128870021"},"_hasShrinkwrap":false},"0.0.0-canary-20220620180413":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620180413","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620180413","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-7LMV5O2gFzRG1Advre51Zf/51dek8O3zOMz5PFMjcbzeDkNhzSfcCwq3fNiP6EtRcpmpBX1KIDwRM1ihn7vaCQ==","shasum":"af9d7b922ec66bfe039d374c1e929511e629a518","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620180413.tgz","fileCount":35,"unpackedSize":105983,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCm177EvVH6C+7q1n/Ui5vJhU/N1tiWu6W/7DEHpWfIBwIgMO2ExqvpLXz/CXTWHiOb5ASmcWnVAq9xk9+wdr4EoFY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisLaoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonlQ/+LqXcJ8p4PKB67beP2ccoSGNNutRvalr4mGcY5Ka3YWwxZGPo\r\nNaBf6sYjV0BxrtFgTAXkGNdPjjbz+ULRJLqAXFDlGohVxZ6btuvzmiYEVqhF\r\n0xGvRdBwGuiBUyGmEA5yBDVAFbfmTES6WHbDxmwamk/FzUk5CLr5slPqD5zv\r\n2PK3zs6ciamNWsppXJSrmzLh6eqpxHL4FbrLs6w+4b16ItNlvblfPlVjvWMD\r\n69j0hL0AtekRkq6oq5rpf1Cpf/FdbeKmCeKEG+WDNcD8nMetldrz+L6vagyd\r\nc4KiSooSqX/uNmyGytmz7C35GMINRx2+4nhGRi8HX73sAmsdfhg7hvqYBexZ\r\nBg+fbSl6FIspu/ovGRMOOaEZE4jYsaHu/N2XJCtW5ntpwrW3mJV3pTLUBkhm\r\nxEtuJoUgj9ra354O8jvT450LQtyHzbL0MR3U7aXK/SH5ABwTs/Ga916tdWRk\r\njJqYSt5mluh1LHPYAtPy2Z5obMVS1TB6AwxU6uapG8V3nnU150UlRoqjrcmW\r\n5lj5hgwzOeKN1K3xI9AVwLeh/MhR8kQ4/+MJcTroc33vPdFX5s9gExJBEn8x\r\n1rRnlB2SLjKD6oPzoX47eW7KqieJTQRytZxSXDcM+GgRnlry69tckgPuF5H6\r\nfbvQzb75djrJ3qzst2LbQmDiMZgkjS97QzA=\r\n=mrbK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620180413_1655748264337_0.5213754221176903"},"_hasShrinkwrap":false},"0.0.0-canary-20220620182327":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620182327","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620182327","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-Tc9KOfLW4wjndD5WVROLZSqYGhrryWfoO7pOzx+DAbWb65bUr/3/FDI6UWCn8ob7+ftIKSArOZt79+jLXxnlFw==","shasum":"9cd2b1b6ab9fe09b18f11de825414fc1d8fa897a","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620182327.tgz","fileCount":35,"unpackedSize":105983,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2LJe52nLeChln3eTncHOlC7pUpzqLDH9OBwm5WRiFlwIgbsneFsXRh/x2KreSa7CPKzROFuYOn8L0tp/zg37CFDE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisLstACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpo+A/8Cz490uOa2Nbb5b2gdTf2CDQwvhGR5Ej59bV7N0xSlNbbAjwM\r\nJwCK7YmtYaTFzvRegF7oePt3PV29oLidOMWEEuVALpWtGf307UargY5fYQ1/\r\nKyzto+M7J723+v3lbRHbrpiMsC9Knj17rySC+A+QegOLIzzbFVLUf2DDIDvQ\r\nLC556DkE7faZXS5osfowDgZlCYqc8UqIpVwR7OEfwRp3YfMviszW7Ojp2EcZ\r\nfVUmO9l6k7rJsQCqr4weyYIGyWb2sIvZylyrthIxciOzf6hy0ee7pwV4feyx\r\naXqvW2Dk87qlZHXuR7C/J4siGqtbvL5FLZhqC797IitQ4FTDt9BDJScT+ZAs\r\nUsT90S8ZipbS2Oy//Rmyvx4Uhx+y05hsKK3tIOy5lqrJnf5wWIHX3B9qbRNg\r\nqRBkVgJ/D2Uhi6it1kjOdLTOjgl0vc0srEBvydsGEGAQOwXahudjIM0jt7z2\r\nh4n+Xn030biPK/7tmcF9D+F5CYwZEqF7p+wOjaAthsUph9FT3p3V3ppNptra\r\nC0IGzxI2mNoDQKR/YqS7G1qj5kcFW6l0zAXE1D5Tycyv5qLoEs8WQyNs2duT\r\nfdDfn2d0IH2ScGooy0ngmYuyW9R/dyhQQ6YHftlrmIfRRUgLCY83njKKh0PQ\r\n2oounk75ltPLW3L6P52XIuZlHieqCT9vPOo=\r\n=0kRU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620182327_1655749420948_0.09914540067386146"},"_hasShrinkwrap":false},"0.0.0-canary-20220620182753":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620182753","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620182753","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-rHwdrdjLD/SpeefYONlT7uSazHPx3ftsyWgirF+7WwezpUSoEfkx6EYjMDWc8hWh7hkdkj9Qj8BL6uFLvCJXyA==","shasum":"41543c80363ac2fe838fe39e3da3ff0d9513bcd9","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620182753.tgz","fileCount":35,"unpackedSize":105983,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzuEudYTK7GOWtLKqTEQPRljjgLpWKGBFSbbyuDjPRGQIgLeezMhlIkTdK/5UUGCeQGo3W6jpfRcMFk/FKXFp87zw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisLw0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoc1BAAiy3g+2gnKFAjY9NXdHEFzCciai3BrJxyxbKuXToDg+eDgSaF\r\n5zUUxiI16SiI1+B85fKzIrc1SkGomDP+o88CyZrMNEaYLR8YCuA9RPWwwBrs\r\nkg2UgeI7fuFUL14v2CoZenJWSbFIwvtR29PIllz08xufZQCDWZ3FQUHv/G/u\r\nDjzSpFXi/DMyd5Zwls0s++M+efB9wMq3Lq30aaYNaizuj5A113Ma82oofV5w\r\nFoglYtQnN4EgFoUHUXcRRGpKc5dOmUTkQUwyL3JlVehDsIYlyHpzpufFB5Bu\r\nM8bUJnBmbaIY77vXJIMBuP03HUPza+DRcbrYNTkZUbfGNuSu6DRzdpkZg6Ic\r\n06xtmsn47iY0pjK9KeVE44oCqRoZ1oT+l1kD9ZXP5njmzCXQ7URCDPAP7MJt\r\n/CoOd6vpI71ZkU89R3f3m3qFBZYgFBdTYzan8LoYLqokFIuNAVV9qK6EjRsV\r\noIl12lCTRRAwpiBRlvmBa65oBjVt9Ht8+ihethvs2UqxXS7CqtRl5bLo/6Nw\r\n3I2BPKf2+KbCVVF07o9btLyw6c4J7dbP9GqdvlW5FOzd9KRHeHxSZju1eHUe\r\n9yno61za9Q2t93FbC4Q1kqFUAw/XSs7KW4cPGwuFiTsa9VTcBDJfqxiE+5tE\r\nV48AnDpAs7+dk+DYlp+Rom9nfhvvRXhPA6s=\r\n=AAOm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620182753_1655749684631_0.7548853498809325"},"_hasShrinkwrap":false},"0.0.0-canary-20220620183848":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620183848","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620183848","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-0Lpf1rQCU78M067ehTlJw06v/Cnk6YGrRoyyPzX26+doDO5cl0MpchHTZjvLM8CSeD/bAsMwmxmXGsOsABdtgw==","shasum":"5e32250ac1c4e034bc6b468dbba364a020ab3732","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620183848.tgz","fileCount":35,"unpackedSize":105744,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDE8xmJgiGuXSaezjbfH7HzFc3faxM87P2a82f/vfv8YAiAPbzWbzQRceqezg5uoYKFhRF4CmXe0dHBhkugYIHSZ4g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisL7DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmozew//cOmSCJ2QL+JtBSTG8M1tEcvUgV4A4J9NB9Jf2SXvn+Y51gcB\r\n9p5lD+XGjgcw5mLe7ZcDqVNswxEwBJoJS126sZYWp6LsQu4m7TCWNKgZHkXl\r\nltbIRLBGUPu+lwh6wQ7mqqstRrZK2CrojYmiD3Q9NCpLJ8yBIa/IWohEfhJE\r\n2dhz0n8R3cKvWq25e7auHDDrbYoyYZ3Z2ItCR8xQUz74j+A6O3VPyjoIpKtz\r\nYjqjmvtR+iNF8DaXOZzGIDRVG0488e3Mm7/fkR0aWDUXJh0XpS1gZhFlmcUw\r\nSEX2K9NFiV1KhMhrSZNqnk6Uz5hFU4tRpbiZnMnDpFHHTcWUFb812vS1G6Q1\r\nnf8ut7+WtrSaW0uqzTZ/pqLj3AgHWaxiLjPWunHDcTgbt/tezywT8s4+1WUI\r\nGo927UFOgWBh70M7rNFyvQLlbt7TXNGl9AfIUfkC0Rzhku3X9RZhuR+UHC2c\r\nsqStp4moEzinL1/4ImddnztSHBZnNpy5SVDV5ubGhY9lXF/M508FCmCV71Ww\r\n5KugAE8/kUBkQCoIGdvf9jRYXnb8tfI72UOfaGo6WErxoxw7b/qK4A7hdnhd\r\nn3c4GYDjR7phfbc19IDQwkAsSqjZAXMob53kB8Iki3IBEIVuEdpe3iUd7YgZ\r\nQCH5zbOs3UMzfDEhPn6xTf2229IoW+HhB0A=\r\n=GBoP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620183848_1655750339184_0.7091949516836222"},"_hasShrinkwrap":false},"0.0.0-canary-20220620184813":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220620184813","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220620184813","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-DvkYQm+0QzuwLB5U1AX2593RkrWILHe53+2td9ZWUV++rEoM4eL/35J4Z6NKOly9nWEpe9NRs4HVLYpP1xOmoQ==","shasum":"2dbc29028230c1fcf2e8539d4040f8c1e2daa336","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220620184813.tgz","fileCount":35,"unpackedSize":105744,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXG/ryWVOmg5+mTijazGxmaGeZcYw3S2aJHZiFwMoiYQIhAMwNalDbivjiVHdKNAYgwPgKOI8Ttr6AsDXNN6+p0p0v"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisMD8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooJQ//WTIjGAeHtGCqBvMpxagNBiKPM3hYBMPeGZrXzUApWz0J5SuM\r\n6iSHuvXxoUEG/E6IsWGZ4EukuyaO/BqdPU+cKX+qEEY3T0IrKrLG5aGffOSf\r\nMDqiPuhQKIbROY3fvi/gBX6CqEyqgW4kzPJF/5Ii61Gxpzzdo7G5D0Gqco7+\r\n/F9nbB/3rkc8W8O1M81vI0drjlKSoc4WVxNq8BmGIPFUryBerWdrxnQ6haf/\r\nMQy69xUP0NDauii+NxEhJjVFOwUkV4j076ImOiDkfLQqYqxo1lVM4FyoMyc3\r\nCiAeIErCNcRkfejkvj3TVfLTfTiYHlQIV6ifz2Wy4luhCU8PlXxYjPBIvYro\r\nKNUi+VNbD25HGGesMQk8KIiiQY/+pUUKO/+zYXMKeRJ/on0hzYzmq5BiIL5L\r\nNzcGK0qleqzxIhACzGUyGjCE6wRCZDg6i+HKNMS4z+8xwHa5yW2KhZV2p8y8\r\nVxCd4nlntfC4TDMmKhakdUxkiD78SWjhmytZsLJv53OmJm/8kO+qnBD14T5t\r\ngk/hY/mFDS90gsCI2l4KVdLv1pLu0M5X/tQjpZhZXKaaAkbfCvST8chRQKHf\r\npyM6lOMyiqQVUTUO2p91ZTOhuOMyHqob0WNThc837TzZLStM0J48aKjKFBtY\r\nWotMfGUgc8Wob//eZ6px7SY2BUwbGPg4iAU=\r\n=LBS4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220620184813_1655750908153_0.6924743184519135"},"_hasShrinkwrap":false},"0.0.0-canary-20220621033707":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621033707","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621033707","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-N6+DpIUOXfXEb217/6hLl4AibsGlemt/DVaJwCnWWxGYha9mgfp6Hul9k6th2sgvyMu+JADSY+YQCjyN3WTibQ==","shasum":"5354cf95a0be702e80d5fe5de5312dc431f63e93","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621033707.tgz","fileCount":35,"unpackedSize":105744,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBb2waejHuTmCzhZio3flqvo0+zEZ56E7m9FXqg9bNuAIgR9857aFD0n9+BL97tEn1XM6GY85rxNycytvoK4xP/Hk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisTzuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGYA//T8I06BzOhoiBzgTOOlvMBoJxb4fy3orSm1XVCJ8U+e1Om2rf\r\noL6kNE0rWCDQu/+2gLqaBgCQJzRSmvMCs/OHVbTC3eY6nmOTfru42TSeM4U4\r\n93cmTrAnzKRUXAGrBh4Gnn86aUGm9bmYG0MQZNdls1af2uQifaQnBgolgf0c\r\nn7DU4TOYcSyufDx3Mt091WWVOxYuy0YvUHWn+MmQWKfQmDnkrupxLXH5QZpt\r\nLk7dvt8/JWTDg5XZt1EWoTh4OGxR5dnNlVFjC6JqTCDAtrRH8XhVqEXaBCS8\r\ndiOmhVkfUC1AONVvybs7dwJBG4o9aSX8c/dbxlgPwvgzbc9umCJ5jxxMYz0a\r\npIVftQQanf1vcsjZ5xh9tIr/4MrP90v4+PiJjsHiCeK7RESdv3ymqDY+D33P\r\nqBkCo/ly/h7qJ3D6BmpAiXJynuyBIVy8tN7TSbHJm1N6/gT+IBA1XvB93SWn\r\nFR40XhKq42AgPBlfoHgT3V2728nC620TbiuksVzCOQGbvQTudz6NG3nP35Yt\r\nCoseIVXVwLYWsvjzCcHSNq/D8Ow4qWTMkXCfZWhWKO6sXSMm7SCLCn1SuaUz\r\nvHo6rCNDWoSIAPAlMflYdmETwewj/EGeToXxlB0vK4n0Y+IeBHB0drT29uWK\r\nf5CgHkr4R0d43yHeDgKLai59cE2sxKNzsjI=\r\n=sLTH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621033707_1655782638521_0.10953059669661136"},"_hasShrinkwrap":false},"0.0.0-canary-20220621033823":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621033823","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621033823","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-XEV40w5hatFHXMy2tAZiJuMF1w4P7Qh5SB46dIyego5mxuc3OXv46nvtiZkRUPztEitYUYnkVI6wmAKxmhdTCg==","shasum":"b7c99912befeb8327c7d964111112ab80cc69832","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621033823.tgz","fileCount":35,"unpackedSize":105744,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8DzVG5q0d9r3NTIVRQ3jmqieU74WM46lbxfWcWHuKegIgJXSs7Bl3YkxN0NLHzvzVO6inwIlcIKf/cK/uCLkW3nY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisT1AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXqQ/+MiZHOfbiSifTRoUXYkqYmwHLfseWO/RdKB+ZEqTbMgV5HC9g\r\nIOIqGuNaNdIhSO70hT7tTNTmkg72b4tjJr2pVNL5kwyChn9V11mgzBfCdb7z\r\ny9krAZY/4wJrXvM0dr+OUhcLvnKmeAxc+Ehrvf2Gspnrn1QytwAaGr/enWiO\r\nm+h2u/HQ05SDZ1YhPa07QL13R6HZO2a2Z8Xe8mGt7CcbLbFwLRwaudy+kmbZ\r\nSso7EK/lOInCG0TyOWJ4OIhUmPjvZYPLN72Dpr6MO7x+pkAMq7gEMQeklMCj\r\n3rpQ5ssfDJ44JhUCxNrYNaQo27/3y7kp6NopsVsX8eio1DO8ey2TXPAiVxgW\r\noSL0sUC/XROVIfGTcBDGmqCO5eN6FVbmQ7ErxejcrU7WQDG5GnV+C1FpYyxh\r\ngok1pLYZXwUB03eANc00TZJy/rPJsHO1LDoGzmYR+x/j7ZQvV8AMk7FUbTn+\r\nQqv9KGfIumR651a+5LyjmyitEk+j9IjuoF9MrF1Ipy8FhiMz3qSLm6GeJr9b\r\n3xTFwwYki7CgtI5HgUojRE6187xF8Jx6aNAu282w5CDovEr89CEmUp1C7U3+\r\nI4LCV8ONIaBJE/nyrPPDf3SRhT2gHg2X9i3BfNUcODm0S3tqYzFWqqZwRw9G\r\n29WfAblYCsuD15/BSNIzJ89+E6Tjvr7U48o=\r\n=qTxO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621033823_1655782720619_0.1670345892231373"},"_hasShrinkwrap":false},"0.0.0-canary-20220621041333":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621041333","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621041333","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-Pcuhu6Znr/r7eNdJ5qw2xevbWLjnQmYqBQjJTa2tSMe9VVIgPEPIXXwSBpAnGHKkGWmW2seh0eWFKtw/x0r13Q==","shasum":"dcfbfc03cbcf62ae647eec073c7e6e19d66249d5","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621041333.tgz","fileCount":35,"unpackedSize":105744,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFFur+UF1zqso6FHwNQtuIDGT5JOdqdP42ll/IjwGYlKAiBgDvqHyhTqiqMcjBk5Bd7G6yB6q6D58U9c0wkpOaFABw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisUV7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5gw/8CTAg8He0HmZUemMhHo/0UT6Sxb70NKhSGVhD2h6mgDrQ0IDL\r\nLwRo2wZwo0ls1a9Z2D9xcQoqJ6TxVtujJkrposQXMlVUujje+CGPBPz27V4u\r\ncsqRtaYO0lLi2v9YGl2AimRGPiqC9Sn0Bj9t16qqSdLTYZyC9UxoXMRJpsss\r\n8WRx9AjfkYdFTcGHHdyIGBQ/EwejEueW/mmD9wFJE3yqBCG8C3+/DGLKNsfD\r\nJ/LRPLWTKuwCIiPv8jlQ+wffYhDE82gmaXkPn+2rujY53MjgFBNCQp2zbq/M\r\nPaFuFw5+fUndw31zGsolrxLqg9QUWjEUC6xpzVz/gbI1tQw4JP1LuUECM/7Y\r\nZQEh5dAlwzCr5o25UPWQwgOzPQTOQLfybA4sZ/foA/lK/Uu2rBCWRziBy93S\r\ndAYS9gqOJXjLx5C0A4ofhEkMFDMDFwGQZmRRV1Fd3TU4eha+KW/U75sjC8WO\r\nvqIPgN0v8UByJoUupSGT2c8Z279TVr57pRZGBTK/cYFuKEVeVidH5GH3nReE\r\n5xyFawKRgQJstIHbjAbgKP9M3xlQpBWC+YZo/uWjrfqsVV0DJ01IORkpgJfv\r\nzHczh4L2n8tvkyQyX54hWMxERo7UXkkFVVpREEyJGI79k+ytRk43z3Ia/uoW\r\ns5rzc6L+kzGs8wmDEYQMtNpAwW2o8aiil5E=\r\n=yqFO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621041333_1655784827698_0.39719925192746897"},"_hasShrinkwrap":false},"0.0.0-canary-20220621041435":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621041435","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621041435","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-vHL15Vf5VEKOM88DWmLRoLz4Gp/hxaFkIoocRe7W0MY53c9gIjrGfcOEBf779y2GE1H/pcoUUdnslangfeNz5g==","shasum":"5f6afbb9092557e7690d8e2a7aaf64d675dfac0d","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621041435.tgz","fileCount":35,"unpackedSize":105744,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHmMnRcEWWl7IIev2BCt6505OKbglp/sCA7Kf3UXNrIVAiBG8FxFn3p6Fi0W09vPKOQRoMZaUIaXN2KM7e4beoLDdg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisUW5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+Lg//da+/1TnrGANpd/djq7zeeU8nVyVcVXonMqyWwSESiuYGw4mU\r\n8Svgla5JMKmaG5DMGbSxfWg44N4y4fKYMjdTYEeLpZho8YKWN4dDV6UH1ZWB\r\nzVOGdI/pCPJOE8d9eXPfIS/l4bF60ic/ZgVMcGQOclrxhq4i4y/+AwkCjCkG\r\ntQqGikQ9shd0q25/lJSgWmaNPy3Njdqw1JCxAWY7Usz4lqpFu09kRHjxuYkv\r\nDPsBlaGDeGsc4NTyqBFZO3IJpOgOxoSlKfbm2vtlw2Gzmn/O4afm3R2cFTyZ\r\nAi2S+86NKUWqu9unXSg2W2k3JS6Zvsh3xQoynhceiO5XUBh0uLTX0FSwlakU\r\nyZ5OWwz+mrGbp/xtl22izDiPL8d28MOtMoi/IngZhTodohbVr1VpPsggrfb0\r\nq1qWSKigUVmzwVglGjZ82Z095P6OuCcv4IpXGI/7hzoOulryKH6ab8kt0N9u\r\n8wJIO5idsG136u5X66jCrMr43m/TGErAxQv8e/D9ueDu5+w3nvKrOYqENc4S\r\nFrCnVzZOYWLKYtxVZK8HKogYm65dKk6I2q7AkjtjXURvEcUkyR1nKOfswTWM\r\n7BC+Iqz2qlDUCEmqS0fWxegF5Ipnp44zVP2/meQjN5JSgrdCFkJbejn4aZkE\r\nHWmJxDTN5HFB/73VD6XShIEGDBG+Txtgcuc=\r\n=/HFQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621041435_1655784888900_0.5613411116717331"},"_hasShrinkwrap":false},"0.0.0-canary-20220621100644":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621100644","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621100644","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-J/+zSBatFjD7YoEFaSEv8xJO/UhmXmRX+/3zd4hMSnscyM7uq3k/Vxoab1KXWqfO6HrAXIlCQymrevOkHhLsZw==","shasum":"e256c81caa54e8becf6a849e20de6056cb6e77c8","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621100644.tgz","fileCount":35,"unpackedSize":105744,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAw7OMgSaVC/xhGRqVvz8BSDBezEuvTvneLp5xdZlwwtAiBgB+qHd6xtgoDWDD+3f/qpU1ZWhdVZrRm4gLQy3Ny7gA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisZhLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobuxAAlo3HnNRo4tyJm2g8FsYMgJS0G3Pu0qTKt5IQZiSXYGjFQq1G\r\nsxkgtCmo1qaHaW2pY+ACAjmF2/sSoy7lf0reZWRD5ZI3Ml3oMurxtxIxcojp\r\n/DgkWLy9+5IES9wl5GSmMB1t1wqY0B0Owquo5peunzscbp4prguLurPOYOMs\r\nMZD6MTG9uxrgPUV3NQEt50UtrUOxOy/bEMAEyZnvBJB/rQg9ajJSH70D30jt\r\ndTtEn6fgSFN33M14Ko8mOIoWQKPeo+uXjOmHt3oG5ppP9rB+6iqnuRquJodE\r\nkgj1rQyskKAtNCekuOJKDyzdlc26ziGOBJ4qEv0Nk6xIGeN689OynwLsrgOk\r\n9UvegK7SbuazR3zh5uLlKT6pqdgbXZfcg4f/c4hGAR2cus0bUbd7BhCHewr0\r\njrjh3Jz0zPEwsSNS4oNgEA9j+AEcLu4PPSlei5Dz6C2rp2j3N7Bvj7g7qPeC\r\nKVlKnZNP2/3Z3N9YzRdt1gBtLGvlKB9I/evOB7wtuqnzTFzedot9oP5u4OLM\r\nsgK/OI3pSEXvHY3nx3qrUjQf2Obuq1N0SJJkaL/NJcugARXKZA43xtCaiw1f\r\npEnSCHLH1zqvSWQppeng1Gvs/fIueGx4oa0YJyIrkiSOAO/WKG0kxu6coMvV\r\nLaI+UIlh5JS3nX4udNzd18gt86FXKG/JYAo=\r\n=Sn6Z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621100644_1655806026970_0.8399842226239538"},"_hasShrinkwrap":false},"0.0.0-canary-20220621100755":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621100755","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621100755","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-WXXdX4wZfqYXGB90optFrFh82qMSJq/1vxSlAfjWEaUORZkwUEMEj1fR5Gq97MdcRpBBjaFHXmedyXP5+r1InQ==","shasum":"22adf6b255a338783749b889cf9d4b4312e1e30c","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621100755.tgz","fileCount":35,"unpackedSize":105744,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSJC+Ccv21NJoPGfHbVRVDaEdk86z6e4ZPhHTs24jTHQIgP9JrJRFskEoA4CDEP5IbNbWul1Il+6SvWIeflu2BJeM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisZiLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpwkw//byek/xSIrJVe9Ya7G8FN1A7zbSY+Y5SJpt9pvHLkxdwCqIza\r\nxZMnXywELEUr1sWgAwuhSsHIqJJkI01C00/bDFcwOq+kzs8/ybOTx+JwzBjn\r\nFlxrxi9LJhCi+ETjQ6tF81+T/K4sfXhPx6shJ5pMLKJo5Bb4Kw8Xno4TsEBY\r\nocbxn8tJrlruojFUkaFbM3pnwEpF7uxWf1MstJNmzXAnUZTGacXzE8H0oM66\r\n+6DBp/oDU/12ICPhhId2KsObF5252pQ2smgWtaQZO3KaQiEABY8AVH3Q4YfI\r\nBjjUlkJq4TjsXNd8Y/SOAb5NQmI4sIjFKchG/EYWvVQ0hvGmqTAKxSF5R7Bw\r\nTQZfhfVRo5YoXUHEzhg3MklZDWLb2vV0119xjC13+tWtl7/BPtCDisL17fDv\r\nU4K4lzkxp8iSq9zAGtIVL0YoLTUbTZjnBXGNuqxXdk9cKXBuB0qcVnCJdDR7\r\nhESr7bt2D5t3uOxbqj04UvkHHCCUWow8NJq605pWfq1Y6P3EuUmzWVyQ5wJ8\r\n6L0d/R42ARf1m1LPQqSi0mKMVYbEw/fcnjbgDEzuJBwCR5U2KvxFtBjlNcVG\r\n7xcVgg+UC5XrxckYpyQNzNE3EDvrp65pWKKkxt+5m72Q+lIjQLPNDQ8VllPR\r\nxvXOzElll8bClTDdW+vzyR2RGOwdsQe3Zm4=\r\n=paGM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621100755_1655806091493_0.9778223168408653"},"_hasShrinkwrap":false},"0.0.0-canary-20220621112129":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621112129","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621112129","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-ypzLNRjIwIEDdAM+ey5FKZqDKWS5Qtkk3NughSqgDNLvU4WBRHqNbw1R3h47Zom+iJPbEF3/NB5A9NKyFmkivw==","shasum":"d30d05a043b0e77c65280d82d3ef055a6ae4acf9","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621112129.tgz","fileCount":35,"unpackedSize":105744,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGymVXW4nSkWHMx8N/by0zGJ6WC57bd6BETB5v11wvxsAiBf2/dlCEsalJUAeEfItVdLA/j1436kGiCNTtyKNE0SLA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisanIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOPQ//bfAu0Zas9falABAPo4wxhYMsPTyno03q8rJM+oBGR0TkKyon\r\ni8H2ZHo++rwZFHExSuW00ixWtb2azXwPQDj99MwndtaiLCHVLBkAC0GH+r0V\r\nLdrUMp4v42eBCgkwqR+1tXQt+qCop+jXLS6TSArpjFKyAoO9dhC5fudV6IEA\r\ny2CpiIjm3pLqfIWRnTEr0y8mQOOFUHMcps6f0/h+siG3ymPKeIYYQSq9mzHU\r\n69KOzV2Q9zn3rmuocTwvjKMqeSsBxC6crYwJvXG5q5rVLJ+NUozKAp6AVX4n\r\nbnxgvjFbdO5Dz8It6eD1uASYUkV1kNoQBZMt42lVO5IkAr1o3Rk0c0xyw9eV\r\nmzSdCo6OPMn+bR+rgnaYTc2mqDgq+kp8nrFLr7mNpYkqfWrQQekQflhv0pwo\r\n2fxdL3HlMwqLyIyUbkyTXD7TSWpBxbedIvsW06q2ZAKXKETeaGik0/R8B83S\r\n3mws3i3kBaJyeQMwGDSDjZ0JwhJW7GaEA78Qhqj5VcUm3GMwJmt57BVanXtk\r\nZuLNvH1VdYW8akQzi1Ms9tGV+J3cV2/cwwl0jj92ooNMhB8c7CB9TIRq/bZz\r\nC5atAAGfvDGJ2WcEDPs/pahOLwFHmo2YhbP6tFmu3r0EDham2NPTuOVjZ9hW\r\njYT4LpZGMsVHyHF7Quk5JMJzgRy+A6/bVb0=\r\n=xi+z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621112129_1655810503999_0.1731279682029161"},"_hasShrinkwrap":false},"0.0.0-canary-20220621112231":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621112231","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621112231","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-YmqKYEKAdg48RIAs2QygHbEStTN2xvhO/ni7Npfc+7IZm4v4iEjDunfchlEnjlOTJYRpNLBoA6PYoy6pple5Yw==","shasum":"c4d94e029d6be7b718a4e72c07a51d8b654cb28c","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621112231.tgz","fileCount":35,"unpackedSize":105744,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBPeKLiUEXvSzMpqyQxy/gQMQwHmomEYwWwnA3UbxHVRAiEAszU9C/DUOtqdpGpPQMGC2FK1C5z6gXMEeo18eOrkDDI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisaoFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoy8w//bAAw2sQH2yx1W6ZPxFQjw3/Tgd10/iXd+JXr/C4+GTDqRTgS\r\nuHk4CuZrjXhyhoQesCp0jOGFcNYCuUREwHK5lSnUITk7CBB7r73TwOIpJijr\r\nv3J2r9TdDia1sUhEGQvYT1qr0FHnAglDlWbCRZsBHzdkG9GMlMYhvdclZAij\r\na5Rqch0sQL5ln+wO3SLp+CYKtaRSZbQgNNlT70N7lqnZ72zE0hYdBj7ngMVE\r\nBWP9eY8mUPYqlyt9c85B9S4VsCpvsyOaUUPvD1AoWM4wDMpGReDOvExOwSIZ\r\nAzE5vdJBapUYUN+tgRhdCu/EySrWv+NXArjmqJg8RHPj2Q/S7Knip/CCK+Au\r\n7U0EnHvpWTNvO12ABanatBa/NTXIJ5hrVM2g/qQAoJxo9GTi8AXjsUzotC/Z\r\ndtaLeuhPrjDiSA7GBKUt82qkw6cNxpAAYAv5fIWfO9HHcoJn/cbSeEfAH4vZ\r\nu0rT9ak+hZWbs9wXMNGlYbOB4KY0lLauBdjDJol83FpCuQ7Cn9MnHb+UboK8\r\nbuTtTgPFfOtQa4qpkjE/nIErV6VrvotA2XO84OrOq9MEtbZI8diuCPPzCT4f\r\nQcQWVjjY+YEzdJGWuq8dg1cPvgdWkXfp+XzT0NQ59jogvu6eC/fYrtl5s7Ha\r\nDg4oU1pphkTYkqbTaamZ09a9+8R1LOlifcM=\r\n=TDiQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621112231_1655810565684_0.6602468560832326"},"_hasShrinkwrap":false},"0.0.0-canary-20220621152555":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621152555","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621152555","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-+vAp4lCmvp4gBThYhmu53tFwJ9AWuRhodysydIRHYRU+p0OeiWxGnsW73uf7K+qNb6KubAU9XuAK9KD+oEXU+Q==","shasum":"caaac7365e1752f82c6a7ca80b55cfe61a8c62de","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621152555.tgz","fileCount":35,"unpackedSize":106100,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIylslvIPDH0MIU65z8K2B2ZsRk5bIlrCH5v6tkuzQoAIgXVsd4W10VMxm9NA96zINTgKFv/o0daqevBUKE9OVk4I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiseMOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFHg/+JzFhSnXHtJMUQ6/Dx5ucF6jArcJujflD6qACqN+CeENixJrV\r\n+u7ZIICEe1nRz2n2Zer1VfwRcMs8eGPxv8xgV7UcyeYIdYDUMtFN8+EwWd0I\r\n3WxjsvE6F754GWRKwkRjhSk4ieBY3Ecg3QiWK4nSa7cD6+DFQUt7zv7EiHVV\r\n55TIaLsSCc7lVeCaIzu73SZ7b3qNoBP1iMNz/rXqpVl3KmHMi0pruijKsVvb\r\nGRl1Azfezk7W21l5qY+fRzvYEpy1NQxjZl0+6AwG1SRTGuEvMYpCgk52oHCp\r\nV5Zg4INrH2WXdHQy6TJFSMBgMs0WxTXWVGWbrtWIo9usb84KWNwq1UiVPFAh\r\n6CIyLEbnPdUjXQR17HwOmiaLSfXKQ/FhfGX8NBi4qVssLvGMpAxZoEUiFBEO\r\nIaj5F3I8kqkaLPZs6ZoHo+Yz4SH2OXART02uNgXF0qe2tvXKPRCQxlkkuZuQ\r\nK7yYdHNkVEHqfdYHu4rtiLk1Jwy11sOWtT2eU4RcIcItEBDrZn3m+fm2mkOh\r\nAAz+Ao5N2EXBfKG/lThZFab10yWUcjcWyUMDrZGX+ncq4eBU/zxqIJaL0EU8\r\nFPA7akPzrFqLipssJFxHyTQCkeGp4fPzHGp0yhxwleJNTyuih/74Z2AHKs41\r\nWp8V+Evm7ac+9D1LHKbx6PK9ztj8JrBui2I=\r\n=O4oU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621152555_1655825166509_0.5385860446710913"},"_hasShrinkwrap":false},"0.0.0-canary-20220621172524":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621172524","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621172524","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-Z3Bb8jsojk8f8pULPwOJMnuObyFDGzj0OcrOYulJ2jO2cfQh/Vbk35g4nsPeHjSuZ4x6EvzqhbmGAYaZjljftw==","shasum":"8943c20d9c2b06dd08ef24ae9f8b5c7d6ee37ab6","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621172524.tgz","fileCount":35,"unpackedSize":107574,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBY16wEoNEbf8wjHIqQQ7d343jvJqTJ3GByC4eh3RrL/AiBf5JvIqf0lcLcfiSA5rrH7ZIxeBERf+9gFoKkIGEBo6g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisf8PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjdBAAi3mdczD2+IFR26I00+tiARth7326fbO/DI24suebeADxsH3K\r\nkw2kSPGiCjeFpL3be2X/07sl11HIHwkayp/uzHNV2gBnmMU/L60Rvp/ZSkII\r\nKvoKYrUqtBuK47mRGPgMa0TZw9wojmDZy7cOSdzi/iBPpvWaKYB6WMW1S3R4\r\nad6kz2dk4oJEcSk9xSVtC4I59l/F7X027AmNaiZzWMFMTVrPr+3scROtFKhu\r\npWcyR/8MqCYFmR4VPusksHPhF5UQnNn8zJEmL94P+O04cVjjPx7BY0nckiQc\r\nsu9u88ssacAbRsZ19Gxzj6yMg/ZrraU/Z/h1y4lPNgvIsrqjJG323QEMfLwO\r\nr8In3dt6q/T0BQliXkM68W6Ix/mzXQmujU/NvalYIEqpu9qXaHN3/N0JqsVT\r\nS5AXN3OCnwclJuVe3MkRS8BldlIAoQBwCM7+BAvovO9Be9rWbJoA00jQFhTo\r\n5hiefFxB7cChX43nHt9xj7+MCqc4WI0IynvyzNCSlGxAN0JK1MjALmjevy9F\r\nt9FzBDCdyawGN+WlGkhKuenqXLLbr+TQXO0BGgzbE3vdMR1sdYbJMxbJESu9\r\noS4cS3LF6R1Mrw1mBbpJ11EzoU8W7T4frC4TmpoT47D2F1aSP2wCI7Ekv/FP\r\nRiVtSE/o5pVvuU0UA6GCpcP/CSA9rRYqhA8=\r\n=WAgi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621172524_1655832335565_0.9866174198680007"},"_hasShrinkwrap":false},"0.0.0-canary-20220621175058":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621175058","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621175058","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-j1ALA9QMoXR4a/FrraqrHq7YLx1oe+OQgetA7dkFNPC9Z25kd1fGpwgogzZ/zLMq8RH7Gete5WHf6S9OQbkITA==","shasum":"cc1d51756a64f98ae8e5aa3d57ad0321ed772d70","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621175058.tgz","fileCount":35,"unpackedSize":107554,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBRISuUqLnEeYWouMwy3SkSi0PJRJSNRPoQ3stTDrj52AiEAuijkwkIZjlFwqT8JDlFA1cBJ7XdgIy5N6Ev1gshzJvs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisgUTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoebQ/+P7i6t/GbbF27vG3zzuXbHGd68h85WumYy3svMUBQxVnCVUs9\r\nnSdXSCsRqBIA4daLdPksa1A1rGU9G3x5ZVYszzbWEpW+t2rA/kS3VS/7gywQ\r\n1b61Zox7tDFdF3NZuk84+6J7YxODro1ydhkPcXohluTK11n+KH8Pw3YOGk7C\r\n7wlGvC0G5NxDFyKE8NrM8IMoPd3LI2LoAATpwnhj9kbXp9q0mi655B1s4MhN\r\nVh2kShu8su69csysUJ6KIOrm86Q4OgT1GVfbrh74nNqoCU/jrPQdESZaQh5s\r\nTeBc1mZp5gaJu0+0INd5m8Lf7EFIiLKcitONoR1ki9UbBo/EVmh1HJOuw4J2\r\n4hMSFMJ/fkJazV3FGqq9j5Y8jUUx+Tpnn6uo7S3ify0VHsTNDZWJA0pqfvXT\r\nvEPDn6MK6HarW/C7ZP8iH/eywbSYQW0AkZpfgpYShLV8vwK7oCkb0OGBsycl\r\n+B+Wk4tUlFzwguB32duQGD9LFC+9p/nVQal1pVwHvCRNhOHBTlwV5wsjsH+K\r\nFheFmtXFP5KEsOoCDCjPVWczg0q35Nz/BDFnd6CdMNN/6fFIO/Cz/txgUTV4\r\nAjTrKtU2FlHZDgQ+mfDS79RcKtS82+DMPdYViPohWgTvsee88OizPc3H76vK\r\neZI4i4PZs1To8QSjrKEUfypsIV2QJkh1iQA=\r\n=hFhy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621175058_1655833875261_0.2382596013283549"},"_hasShrinkwrap":false},"0.0.0-canary-20220621183238":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621183238","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621183238","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-azchcPPe22MBRhamkSLlESv3JNKHm5//1EHzo5V9wWZugwafYJLV+NMTi40k14gx8ClAm10KfNWRQuj4ShQBjg==","shasum":"840424599c2df061a6406659799af2cdf53ab9f3","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621183238.tgz","fileCount":35,"unpackedSize":107637,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCF39hgvCZXUu5UIe9C8lmCQY0UfuWFDKnK6qR1ZWI1+wIhALzWo7PxovmmLASW0t3MT2HFZU0Kp4Z3kxKtL5lVCJU8"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisg7UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBtA//YjrM63cSVD0lNkkXMpZQPBM19gtxF5Q+cJrtnt0mu60meCo/\r\nOT9+wE8ed4RNOK0sr1NPfW6SqajoCdosAMe803Cp/qOz29oh4GR1dYecDFaq\r\n7LoJ6eWxWXqxpoBN1MHN5EnyYYUtGIxYOk2aUeCA8i/RrGTo8pcNgMXHDthL\r\nhiOjaZ5Q5YovHcFKyQIwH7hrvLH7Y27H4bPFScWguq/F1pAVTf1l6ySyBekz\r\nNQAxCAh8wN8aEu8J/fQKNiHeyiO265/m9a1j/WpmTy/KPDShK+D/qoJf/lxm\r\nn+1xNXiRhSZKQHre7UaJdEsgj/iShT4uky2V3ueyFOvKu6Ipkf5hpr61z5hq\r\nAv8qwJHqBTXFloko4ixWVRpsZbpRvlEIU59nrRwJXoJ8RiHo+ds6fMJGtukz\r\nI4DKNPXG+IrGjf3zEL2l77ToruW1QbI9kby48QTmDZPvEL+gbWfggyq2yIb2\r\nSnEhu6ZDxl+d5+MVJlgziUX7KKZoZEAOGL2uJDmfv2Dw+VrFq4NnqsEnIqND\r\nS/qafBP+a7mZ+zhzKBNBQ7/gAE7740zL4Br0HByp3xF4iuZ9NEiUqyCwWXnw\r\nl56laPVZcI+GiWKcRLR9zrKuhejnmWvjWJJPqjWv4V7aAEqo1LsQhzcJS+yY\r\nUCUbUhqIxFwwy+iGy24VyLHnipNM0C1aHb0=\r\n=UjS2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621183238_1655836372495_0.5285456030466444"},"_hasShrinkwrap":false},"0.0.0-canary-20220621185021":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621185021","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621185021","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-nwH0a10cnq3/rsHo/iYeG1YAZCZEmqvGcaK05rhavaDxYHi/NFj2gZHrZTSWu3kutnm0kFcjHiXtECDliTmmAg==","shasum":"f18abc420b384090dded2c1fce7bb9e1140f547d","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621185021.tgz","fileCount":35,"unpackedSize":108213,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFX/s4pmQ2Y96TZK7ilbK/ibKhOGrnT6RavFUVWUlBN6AiEAu0rxZ9G/aU7ZnODahZaeKVFj2bV6jEqITqAsmxahbtg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJishL8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqT/w/9EuAV1r8Ushb+fbg4Q8oO25nfRSVUSmd7u7RZrYjyMw6Q3fO+\r\npYr22a+LWYwX/OAKs2kmjuD91LFpJST/RJRIirwE7cM1439KAORlKEAhngp2\r\nGmKU7J10TH9+wyBTQZ3ubMZLcVzvhkEyPq/RIcrxDPbNtjJ0dIm8vzy6ygJI\r\nKedG2B+j/t1r+lRVMKum0Yntha6dh3mCGk8S0RhOmSGzoyqau7KreM+QGh9x\r\nVVNAntdTwilY/53gvKx/0QNyUGCe0RVCrSiJqxjcGzVg0OtIFZX6Opu0fMw9\r\n7jhk2oA6tXqkJrp0nV7x9q0VkHPHDCEHGgWPVAl5Zbsc3RjvXaGH2thEIZmu\r\nmZwJa2QuhKv73c8FJqCwYXjWYn454NsqVF3jNj09L91JIxqiF5IMU/MhUKRy\r\nxiKm3Cu3+lCnCqAE5Zl9MIIUsoecJsON1A23p6rsRvivGEyfhCqC1PimKAvZ\r\nn3O6N1jDwNG5xliiywDBbtQzfw8cdeRfSE/5XonV4rLxrDWNL3ECl7Aztc2c\r\nHgvU+EFLiekd1WzHv2SASzvR+kM4082+rPGOMyDtOvqgAPTEKxSzDVMGqAee\r\nLIkSRoXlmyT68u9rob3k1DW0PbraNnZgfnS7TxASKQIGlBGGPYw9UUBvfuJV\r\nagH3pVotGHoP3TNwcnD296T0VJPckuqK0wA=\r\n=5f0U\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621185021_1655837436156_0.45519597218949404"},"_hasShrinkwrap":false},"0.0.0-canary-20220621191830":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621191830","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621191830","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-nneb8zJ+3og4d2Znynd9M90HMhG1k+KRUzXWXH96aqxbQXSBxURHAo7NBuwW8QC2UHS3k1Az9DiOVGGhQxFImA==","shasum":"960cd62297e7e38e89802d54d9de6231cf9d6d24","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621191830.tgz","fileCount":35,"unpackedSize":107299,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD75wh314kRU39mFG4u1p1e/2YnG0WU+BQDptqkbLf0ZwIgIPkhlk1bpGapCTEZMKQxvnzhyhya4kznHwYu1bw3cUU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJishmSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRtRAAl4ioA78oPXc6CrGuulu5NydQPB8jd0gCR/RB22ETXEdkjo/m\r\np4x1/x0qJKLBaGUOAHk6Bmn/HMX4ekUjyOrq70qN6M5hyfZ9Wq7Bg8PU+pon\r\nhpelEmUVkVxvFEvyMAJXNOKZ7/aQMW+BTFkgoXfTN7i+8HUqJPaVUxFl+0dt\r\ngR5pnH3Dh6Lq1V+iT4K+R+IvpPB2I2gtgjCeefgv4QjOjrYMLWjNu7JDnVX9\r\nbkf+xANwC4XNivsP/RVtsWDVTiYHDiODLqisA/RDa9ob2pJ8m06xv/o0Ld4Z\r\nRHofd736+LuatzFlXqnO1H8BxhqkVUb/JtL4IRmYOKf4S7zNL4Ww3JZKv2HY\r\nE5Ri2/jrBp11CM1iR6XWmQB8Y0w08dLMdg9qhpRNJs+3/QgbVMf8zKqQmlZa\r\nj7f6UbOeSzBYHDBrGrGHfcQRtMQzbd6uS9pMDr19ptcqwZXo40bQPpbPe0JO\r\nvH/U6rvsB1lL6/WeVWVWYDi4qACctTU63gtA3xLBeJnOmM9l09sN7SaT6040\r\neHx1weulQofbKSX6LK3ThzizRH2r5zIK8q+3+J/EzGt2IytjwT4fuFEteBbw\r\ndExNxH9A8C9AX6ircLBmgdbTXqxsomhpAGxDV4jtdgc3ZUSafUOl7cxK9sO1\r\n+qHXmw2N0LQW8FQPgeNB6y+OMCipDcnoJl0=\r\n=ZLEO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621191830_1655839122647_0.8574776456536906"},"_hasShrinkwrap":false},"0.0.0-canary-20220621194247":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621194247","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621194247","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-AZesjrhYzWDlItl1zy2E3oEEMZNLZEOhcUDQzaLYVKDiy2AswbVkl/WfEkmTnu2Jg6Ji9oyq6tTkl6K7R5xtKg==","shasum":"6db422258a60aa60bcc77f37accf02adde8e5042","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621194247.tgz","fileCount":35,"unpackedSize":106822,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEmeNN10Kx/4IP31dpGrfyJBBwl7lq7X3H8dEr8ATKe1AiAXc/JAhWhyUNMeTRlja4h85cHXOrEixlACFbApdVvIEQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJish9DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOshAAlblP9z1Kyf6Y0HgZmMZRE3BEub9G1/QfaUNx4ycDOBiwi4dQ\r\n0Xz76N3O/pG+bg6jECRpwwQxybe9nj2OvTy+2RK2cH1pz8uDNhs4kbb02YLs\r\n1lNnxlxszEz2mI3xVlkJ3OIfkj5YyjSpNM3U8nsv4nc/rmkab24+4HYuCgvA\r\nVmNAWTZbwtXQAq2l7ImPp23tvhp+IU95OlG1LkG6AkDpkAUCAujXesfnYl+x\r\npwQyyFHuOftRaC6DMyCZ2u2yXHPaoKZZfKhrF7Q4SgjheXcqbNTpDzvyCerA\r\nF/znXEqkGAcq5asvP+B1tM8XS7T/x7SfNx3lwtFfO7sv4tdy+5vWEbPu2tPo\r\nAC53XzyeyXBPfoJgZsmtgUm9LqK05OkxaC3Z7f8eQUX+zBM6I/phsZDhBjP3\r\n6lZa9C5aXO3JlWF58kqBD1NL4TOSxtuYc2E4jOMM0Pst2G3hg15HLM/A52Y2\r\nx1pYeHXsrkXiyxcaz6o++b+CshGYQlwlITaCSTTY9XM4ENTzhRfAJrnfsJ6P\r\nSlvMEE96euLTpOx6I/HVAOlqMOCJC1Je9zvrnPh3IwA8s8bWKTGd8AWB5znW\r\niUAhLrnhxkN202DrI5oA+3RYFHr33edUcpnh1b39Km4iCnyUrHFlGNcTkAIx\r\neJhOZwkPQpwwV7Fna9FGgmUVF6ADodejlSs=\r\n=MWo+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621194247_1655840579764_0.7471685492799311"},"_hasShrinkwrap":false},"0.0.0-canary-20220621194840":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621194840","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621194840","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-UDR7jULyP4VnqzwyTUESbKYuwWhtB/tsyo19R92QBZZzoDbY4tf/jiPnGg/8HmNcPFRLS6AtwfMrEYYyaB8tcg==","shasum":"68b3cb9727d9ae1fd80c60d8a43f39e726fda53c","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621194840.tgz","fileCount":35,"unpackedSize":107322,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHFG5aQxqTFCONWHjZNz2b1eG7nj48VDDL3u8+rEXXGcAiBznX7dwuq4Uz/6gxZPj2aFwXXc+jxhaMBcizGu4Q0RIQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisiCjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9QBAAlDHIUH3udZ+oFpd6ph3V6SeOaFpv53YPK3w9otJcu/Q3Y6hY\r\nk50scS2g+No+afL6Ve+2adm+eAi6FPwtBDFWNllZka/Yp58e1DmLQcJ9n+gR\r\nCJ58hpbrJMZrGOFfNiyaN5iUIvTq9B2lWKKve6EWLxjzCdvWAy2KVHA6UDjN\r\n9zhOHoEVhnvYs6VZUajQpNsD6fEu8O0hvuA3seoesU1gy5CFwXtPg8Qk5Ubv\r\n8pzXiwJcRK1FEX0GwlB1gOa6FuSJkLViGRfk3/rbYRkIqP+ceAfqDK/hNTBc\r\naJkoJWEQs2Xzw+Vg0ahpE6igWW1kO40sQH4Z434zOQhuJEYK+R3LkTQgvqBQ\r\n0umwTHOwfDB6CRIhMI1JUHXX0MCc0+7XgWHQuvNhFtY7LCOc52jvHtbT/WES\r\nf2CJ94SbRCVDeMwJcQGxhoXv79AtbEBdMfw9cfmdDJTWKANzBrns+DLQSkKb\r\nVggHFEkaPpRMEofTdjW3hK2vpkXZgYPmfD1pnCFavroXDhgdGo2H2VwyJoa3\r\nAg4E7VGB6UP5IDIhm/AC1HvCA4f3Tjep8uYDJRzcR4aw/k9T9VX1MoAU5dJU\r\nhaDSLy5SjAC4gRQftyOA28mZSonhDd65p12y2boTGjq/Ng6pfWz7AImEqkh9\r\nmEJKFVBxnlMKqYOl6i7et/KKGLwCHsA+pBA=\r\n=z5+6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621194840_1655840930953_0.6572193892130298"},"_hasShrinkwrap":false},"0.0.0-canary-20220621195521":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621195521","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621195521","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-LNAHzMvSs1ocda8WEjt5HS7JCQBun2jcYSP1y/YEuwpg6WxY3c9psacvPm/7Mz/7CX6zBJQaJkB4Z3mYVjkmqw==","shasum":"7a29fd605e7a9e952b7c6e089f95bd1946072275","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621195521.tgz","fileCount":35,"unpackedSize":107241,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnqpXuWZmFTHtyTIVxY01OWPcYvUR9zF3LHHCn+GFipAIhAJTHC6+2z9aD2+P7/kj3JUzw2FclpPHJYD2tzw3v0kOb"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisiI4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosRQ/+LoiIO8JDa9RKiKynSWfrbK3ej7MLLIsgAu59Zblcms7aX2cJ\r\n+34snnGTG9o6VlHm4yvCduiv6CtSiL6a8PSPXSzAvKLgmPp/5FpFtTPc8Q4G\r\n3tQahzL/clnVqhOdiTCw6qh6sBfNSHS19iyo08Q2u4fjnK0kwnJ0VjYoCvCz\r\nHNK3bRingrSnQs4usqtuXndLGss6zho7vkue7T6sBOgr7QTEAe5+71y7HE79\r\nxbcb2aes6rG6zAgAlbtVpkWl41vwDOc6+/TvjtpD4Er79AC3bnOeaN5ybxcp\r\n2VVcntxUd7AJ0WWdiGoC+XSJqzVe9N/S/ay+Qsc3XuQMYyNXcNYeku/ap+0P\r\nzA10fxoZa2ItsJGvkfkn4MGricjgXrR/19HNV8IpZ0lRjNV1rDe1j/wRMFyf\r\nVvZljY8Hc+uIBI4t5cNzqYTj7I4DlyPndjDJWMTUNBk+pvPHYpJLH1Ggunfc\r\nNSJrpBjJyKg6uxLQqyTaHCRZvqGp6iJthfYz3PFqw/3iHOwUiI3715w4UIJc\r\nOOn8uMLSTADuM2ElvUgu0U3yNxpqnzZg3jA1x7965fXLeTAR9eoWrQxBKUR1\r\nsilI/cwiue0cvFygEem+gM74Eefx5mss/2HOxQnPe3zwo4WI5d77xnuV+Ain\r\nqDoprKiNBsxzvs8a5eKwvy/m2IrlFbTYITM=\r\n=j2tG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621195521_1655841336349_0.1738522616949827"},"_hasShrinkwrap":false},"0.0.0-canary-20220621200017":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621200017","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621200017","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-8nlzTYZBbJxO8ZpnICNQKcL2sUKLja2NrDJMemqxHC0GO9H5ePswFFOyBgtbZ8Ehye9O1a3j2JyJn3qLd+Huhw==","shasum":"e4aeaebf0c819267723902ce0b24125e16702d7e","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621200017.tgz","fileCount":35,"unpackedSize":107115,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC618a/EBVg9j05HB149tawo9SFABh4FIRkx5oltQ9bhAIhAJQkKF1nGcN0LaeW2128jsaduAEasyf4lp3VEVRkdja6"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisiNfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUJg//RkuDp8YntPvgqa7T/5enOOcQSyLdZDmG4ZAjdSH2ZMxlE42B\r\nhcAR5HGvM4ggTRe1GF74Br9zKmUuq+e2qqANbpKcM0osdQwIqhUrnkEhYwI8\r\nw5PM3iQkM4wYxZPHVOafHAiCw3GTEwiQm5WqeCbPUaOr7Y565vlhINh8Vf8n\r\n852+06p7x0kCArwX+9FTculf+3LeeY7slSsvezcY/7Zwrl1K217wtLg/hLTd\r\nUZpsLpDerqsfVB30hL5gelyOfD90YL/NIJxmLILPUdC3n6uwcoHYOx3uRLev\r\nXGR6cttZX/F7MhWNw46IQlNBWifrxnUtR7uVHQIbwYnD6ffiQP6pvf7C50cT\r\ngW9+4CFMB8pdvc9YWwXDku+MWPu18MVPZJ1mQWKxnIIKdr3FMiZYOsXEMGvv\r\nyVexYNgrJaN5PFE3ZvG05YidKy4PdAuNY27v0xVJa0gnuEYbRxOLUvy1T+3N\r\n3tosGrFu0yK5J729wghmhxG4LMHiRBgULde8NZxp/cf9KHjvAJdrP8ay9JfP\r\n+c6zemjSRcGou0yjKXcvSC4XwO/sR2bGDSfKfDCs/RGIIFyFXeaqOs6TXwGY\r\n9msZvESz5p6ly50Jd6S+I5EX1Ikg3GncyGshYpIweJsLKLhtuMAzZyow4fFD\r\n4/lHXBW2g0uPfF1tnvAfofsd+DJywtb0dVM=\r\n=Hl7K\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621200017_1655841631327_0.31632078014385767"},"_hasShrinkwrap":false},"0.0.0-canary-20220621200600":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621200600","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621200600","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-IsaM3AQCyN2YD6VieBk7Jj2Yvhphhl28I8chIggaskRq81QHBnlRnz0eg5aChxVf0TDRcKQ9y8s1VvI++qhQyw==","shasum":"0c8f07c801a7f35783e5fca3def3508e3f482863","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621200600.tgz","fileCount":35,"unpackedSize":107225,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHol9GZErpErtx2amDB5Hom1F9rSM/gTWw2c4GxMTMt+AiAEwi3rAgKElKQdbpvSssALTnlJGUxtFgrIQQvhAQJGvA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisiS3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLkQ/+PVPJSWjBn3XxFaJ6U4rm7zjSFS1N6Xwouj9m14TKOeCNcu6L\r\nTf5O1d/8eBxrZVl8lDDPaUzaDYZO9zxMYAcRJKHoHsfuqV2ALlFwgLWUtRhD\r\nWRfaaJwv3OOgN06eFdweiJWzkUeHdpFy9Ou2Z5l8xTlA1qeNv7p8S9J/bmHT\r\nU5Cv5O4vCxWfTZ5bwo9wSWKwof8iLFaJuJXpg0DpgzjoBw09d3si4vMG1fKX\r\nnywO2cUL3P3O7mlpLj6Oh9BzLlESqKiDouHx8kU3T+P4xGyT6lusEp/ryVZI\r\ndaVCDRGT652VU/WhIJmbVrx9rvKuN+DWSzaQAphZf26P8N3w0gd+BiHhZypg\r\n58lwhmw/uportQglaer6N+qnpqoweaaqiJ/NF5VPtbA+ObCF1peWtBP8cOJO\r\nisXeC4SlQap2FWlHnrrcsNQVQNZhIhKg2BipZqU6eyma59YJMMBjfvCwCPz2\r\nKlEpAWO2EEy9KScEyYWarR8Dvu7cOwXT3j7ef4XhK9hjx5IJgKXk6ul3j6Od\r\nI8Eb2AsTAtO7Oa6NcVqwKjZIDO50aupF8MiHyWF4Jnd5V/Gba+5/o064OKyZ\r\n5e5/mnsox6Y04Te+9HADD3uzZ0XtErYjpkxVEFDxeQre64z0BipmjhoSKuTM\r\nkiIasq/5pFJP7AUk1DrNYEJpD/lXqrj7Y+8=\r\n=Z0fw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621200600_1655841975279_0.5204249013567632"},"_hasShrinkwrap":false},"0.0.0-canary-20220621201131":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621201131","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621201131","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-HkhiAVLM5IWHtMtYSbJVw6lo38WbrzR/lgzRBhd0O095KSJwB5CJTyZEWFBGBtKXJDUED5qX52LZ8FGb4Yy+7g==","shasum":"c02660463577d3b12738676df5e35231c9573e56","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621201131.tgz","fileCount":35,"unpackedSize":106956,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIEt/SdcLMsh1WWaFC+omGXQAoGFzd+9MMNeHtjNfqY4QAh9Lk3BOIy1QJDKEgSAawKKwOBHcK704LvQ3hw/OmPf7"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisiYAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrlcw/+LtTmQ0ELsVG3fFh2QN7yAX6ubuMBDuyDN91uYV9bAYOPzL/X\r\nHBRIBxQEfNBxW+Z5GD0+Mu6k6DvF/ehsWnTnaYPJ5VevYyzxbg6HeXz+PbyD\r\nfwz5znZZ1DqZLYqnWBv+H0IGMUZNsaWyX2/crg7IFTJrxDkb6w+EvkD6y+GQ\r\ng9omNdUWV0QYN3O0G5W5wbYohe/P241viHAz81yFpkUObig0GLUqQlGxqghc\r\nyKePJwebA5evNrvLIWYUm+SJysCRtOVEA2SRo+00WeFV7f0t23bplGG9V0zo\r\nx6MwICN15UBxuEYspGbpgGzC3Ga7+tcJsgdmrFOIBnJWrZNRCPRior/vp3uD\r\n9/wdGp2kyp8q3l2cbP1L4Yr9DIC//4nLrcszN7iBkwABKMhzqIf9KIjUiaBA\r\nJvvQTNF6UkX5ckoHoRhbHLF6skmQ5xJnxwZXhXCS/uelBYOH2cFvACW42930\r\n4vu0cFT5Qja7YtxQDFPnAi8oXnnOtl1Yif43ou04vN/gy5GcUkcijQA+D8Gv\r\nQC5vJzFydNWkRU/Px+svfu4OdoKNuppkYtL5xOX3FB//445eTo1csMEHPMyb\r\nf0khzvwFt/vMzEF22LBnhExtR0UeO34RiDl8b0Q+DuQKCmz4ZzZ82Ud+Qpbg\r\nl0SPT5ho5+RPn0M64D/+12S0y6oIstLcdFw=\r\n=mNXz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621201131_1655842303452_0.3416657195600714"},"_hasShrinkwrap":false},"0.0.0-canary-20220621201314":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220621201314","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220621201314","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-lFx30zpHlzC76N+g/CJBLz9Mv8QLK0O5+StTWg44/+KyZ6EmCPu1hJJsHUS+LRObRtnfVMbBu1mBl44u7rIgqg==","shasum":"9bb542b4308cd183e6bf3302418ac504413be933","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220621201314.tgz","fileCount":35,"unpackedSize":106956,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3TEZno4vUberBaWX7kA90OBvq4C256RDq6JLgkQGizwIgCHaMImWp7mVKTO6KJrTsOLCeTgZ14/NUK3uwS0wWXyE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisiZlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPeQ/+IBLXlwwIb7xYY+lIT/WhmnMfK+q93MCJVPErcQqv1Mp+aUPv\r\nBwFM2M2J5mCCZjGL5+4zA3I3lrCr4zOtxtNaX+lK7cJ10nLvAkCvRsYBZeWF\r\nCsMQLpAAw/dKuXnOJjMIwS3mJfmITK17qgWgVonj7K+S9pjMD3+KiOxlzM2e\r\npcBSdutnFIU/oQVvHUEQISNposxgmAeK35gGwz89gR/KirF76Z/eFbAKnPqy\r\nw2Wck4mQAM6oJhfL569GydHcBuy1/KWDjag0wSDsgbrxdqA1eqCc+EPOrlGW\r\n58ij26whgVUbDfF0Lfs+AlNnXPny58oPSJGGYpj/tE/9BkxfynWnoyyfEuSk\r\nfvsxDJS5rj4XAxNJbQIHcYuvogtvt6ZY2ZYrWwgAq2nqixdsTcoZebZ5JU0o\r\nhmJxCZzlMybnLpSYs9Pl+ok04nYu/NFKcQgIB5plf0NRXMrZyzbstKd+xwNl\r\nwuzZsPv1Cd8VMX0TYaTr3eLK2mBGdOiyq3pHadH5Jf6iQV6RP1RLJ+WaX89w\r\n3iLQDqI0EC6Gf5XK0QG0Up74qpRDOFWDL3e1onwq9sE9xvOe/bLipPUaHByt\r\nMvduBFkWt9WnKpxa9yWudHx5d0d1piPBn2MfPBBetuyt3libaGAf+A3BccHT\r\n78agHmrboAwL7w46VTAZaN07eYK2Ol/UGkU=\r\n=AV3R\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220621201314_1655842405593_0.011565894618383865"},"_hasShrinkwrap":false},"0.0.0-canary-20220623132242":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220623132242","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.3"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220623132242","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-U+oENVpPYMOKMdTTMC9A5UKTqp0f/8hcSt9wcEBX9UNLp/52etuENJr19r54RRmuudRcG7vQKxfGXp3Ldd/+2w==","shasum":"ee3b0367b24629c36d77a3306085e04125fc59d9","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220623132242.tgz","fileCount":38,"unpackedSize":117492,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEDsZxKXxdgH/27TjINDXISmtOQ4O5c141iSxz9JoHI+AiEAkKIz3A+6VIHjKobSNkuqkFxkCpCoT+F9OqN69DpZl+8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitGkuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplGBAAlwPwohiv7aHYsRaXgsZEoZOLMRJkrRDHRqRfK8w2XRvB8xPq\r\nI/JItLCo3M9RvLd9nUu0PUzWn7cHwiowgh2es23XwYFaCHATn0ITOjcpi6Tb\r\nTMEPROYrrV4ghfJrWbi6ZCg6nk6EENOqUnpUwODJDzw7wHhAO+GFectNodml\r\n09qUXcOT6x9irEOeajuAenEsovqFqEuG1kZ2HXCP9fKxezuJHs8F/9m0ygXl\r\niNqLSjrBY3ZIBoxvgdGDFHmX1Uh0jW/7YlX4KGItZznM7ViwM8ZV+SLSQYw0\r\ndVA+Z2tkfYiyjQmcAwdGfEN4wL3gLJ+sI4ZoEWVz8S8gEMCkdj236RmkQ3LD\r\nPnI43+QwjZZGVbUuKS8bmVXiek2uDpU6MmLcoDVFX1otr2liRwRVFFjSKIxo\r\nSEPMHukS81w1KGqm7Kru2pTTXOh7tL1hPxjTVUrwRwf28xZnhLDdn1vM9dam\r\nU6rszo8Bg2TwP+iVRquPhFeKGdjj4YlBwJA7vfuDSjCQzXkihXc9HZh4sGpW\r\nWqM44ogiFMQFgYLl5H7OnBwZlAr2Nf5Fvywpm8ydX26eOhON0FlSyQhsyb3w\r\nllhlayV1SOssQpQGJCqN3/k6k+yGt2h+pWsl2BbLCmGUyxaanZy4PgRtcF/I\r\nBumygcGYTs2yrvMUYV0liczMKyDABAFTTTk=\r\n=3FJB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220623132242_1655990574373_0.8018683860111948"},"_hasShrinkwrap":false},"0.0.0-canary-20220623132426":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220623132426","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220623132426","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-2CBZypxVwg2HcDNYiB3J/ztxfKWGYEGL/YZjVB4x7r4Fz7BVytDUopEHKCirnAsUcJCM72k4MiMfPhhGFEq9Xg==","shasum":"713874e66f443530be3a83f5be2199c3e36545d1","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220623132426.tgz","fileCount":38,"unpackedSize":117492,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgYhshvnI62KsncD4PaQkQTzn5EJFR0XIGO4+PpvQyhgIhAPMGxwqUEbR+3Iz7HycKmreprmjFnHr6NT4aUVULrw6m"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitGmVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQYg//eh9hzr/bt9szceG5Vxq9+vRRiMuecvjIFy4XVCA9tmbvIXA0\r\n7nH/5/bxlfJ0Fz6gP1WlcbHZNTaUkfEDTlpZFE2j/CQAGboNatIWbL/Z8qPE\r\n1N7DI4h6p/X2zot9wBftGBqHh0dPKQfwDsps6COiIrqjBta17c2PtVHgXsVZ\r\n1aWMcolLEw//2dUru7CzyIlsALucjNggPeHVc/aaaEB3Zb5bpmJenJ/7SdL3\r\n6LTn19t1tXX892Pl8YfVsK5jv9igLf+8ayMQVcYk4Fq95BhdTgxtLOw77cgd\r\n+X0md0vDsuX61/xUo0bac3gBLzw4AOKLTwMUAp3ygF2lVmoakcLkhtScwt3I\r\nK6w/ankxQM7IozvQFdvVs9RgQbzWlu3walUvNbVVvYlfI0x0e2Kf7ju5BSmA\r\ny/W9v9Qov65k/LCEl2sAzgqWyvGW4vZn/OxmsIzHJ+E7BJ1TGzju/B53WUfU\r\nsQ95CA2bZoGxjrh7d7KQGIGU3x9DDv3dwC406MmMgbNoT1ffZNPb1ie7aigI\r\nfI0ZSPbTITnM0dxzWR4tF7b7txm1hsFdVmuRmvYx/DeHn5HcsG0AJ20PWwfH\r\nKTgfwRx0WMnUJVCk/loXRBteCqyInWylJF0CGCZPHdQ+VZds/kjCuNq9A2Eb\r\nztUsHrm39uH4+xhkz5eEUj5IJvr64pUOl0Y=\r\n=KoJr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220623132426_1655990677437_0.7592196103742743"},"_hasShrinkwrap":false},"0.0.0-canary-20220623132646":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220623132646","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/vfx?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Downloads](https://img.shields.io/npm/dt/vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Help Wanted! 🙏\n\nIf you're into visual effects and/or WebGL/Three.js development, **this library could benefit from your help**. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please [refer to the Roadmap](https://github.com/hmans/three-vfx/issues/4) for details.\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220623132646","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-/heXS8tQ2s6PPT1ZDn6DJh6YFzioj655GYL53yp1PaO/TPx/unXg+o2qZuXICm9jZ3/Tor2AzQLiO6fZY4zTUw==","shasum":"a1293ebd51eafe40bbf2166e8b712daaea963466","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220623132646.tgz","fileCount":38,"unpackedSize":117839,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFCEW3A8y4f+MoqHAlLjfBELPdFDNUIkuTtkWtAFctJbAiBtsOs85kYeZs2scAuXBzvhXPAw2T+Zis2yJZyxWj1cag=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitGoiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSYg//WzWWDkjOBa1dYG0z7nVoSaQ4kTgoj7q4SgEkoCzirQhVcdQU\r\nhD1dtd7RuDKzBjgXgsQHI0l4uz+Mug/tZL7VngFLBsqAFumdRYhrsd7rYmXl\r\nDxLZV4YdUZyDSd8GX4gIFDAwl8vR6IeQ+e3tfI23SLSG7PNNVERHE1B3Rn8w\r\n5l9WCNuYe+9VXDAUFojv7ttVKII2RyZJPyHyPjpyKkPa6W2+ILN7P563lP/s\r\nVaNXrYeykfBn2uu+EdIFvhLlLdlS9MObKCQ3Y/rb4M+cVLyIILVQujei80Sw\r\nUi22RAQ0B1O64bBj3pC8J3LITnaMS0s49NBdzksFtq8ejCW3E8fUGuUtyssO\r\nucY2sgb/McBeKtRMRJB7hdhdkUrK07udDHrQtUtwUd0yAvoyvbXA3+dpADcl\r\nllGwe69zjwVn6/LpDRLC8pXkvoW2A24UOHSBs215HoZPKE1zphVBZ3QakHAS\r\nZ4JkMXqKuC3QCde/y62KGAYaWKnPCwqz9LEKI07VH0KVv45m/rAKJ6XuQ+cX\r\nE9mmvvEG7fbKTklCE8SHF9JrmPi5geXhQ3Xl1BhX4zl/yZS2EoQvKrJO2d6m\r\njl0edCjsFX+W09oi/RZ5dwwWP+EVj6lGhZkOtfpiOYO4nzrf9hXcZlkfGGMd\r\nBSt1VaF/qsUN5hbKgk3jjsZrqi54Dmw9cXY=\r\n=1CuC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220623132646_1655990817820_0.41736332768350537"},"_hasShrinkwrap":false},"0.0.0-canary-20220624124109":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220624124109","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220624124109","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-HFCxbJoETWusH4a3RYqvE3gDkEXBdG32Q7KBNKNKOzx79n9GxEWEj7JL7zqgA03lIkYhvw93ac7lLILN1uHmiw==","shasum":"5a6924b00e3b37e30754f735b80a27b9098b518c","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220624124109.tgz","fileCount":38,"unpackedSize":118381,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZFnpijwzB+IL/6edFMwgodxeJ6Z+nDYIgdviyh5Jl/AiBKLSk34Q0ZOQaaD/sdp9z0kHtyBKVoONDfPGKRWYmbQg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitbDyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpogw//bBOwt6GfzoLIHlBqCMjznOV1x3nTjCVeNIWHsaADt7fLfGSW\r\nTFIje9CBxc23WwtIw2664sB0+xs3jySyk9XAkkTI4xQ3vfpiyH1GHfGHMCMv\r\n03mUYhkqXq7iC6RD3ysI6eCXwR8w5TbxYVDrWqYAY5kh+MuodMWPxnbcMQJf\r\n6pYc0B/EJ8t4UIBuMTWIQ875dHELnOI/lwRL8qfjCBkMknalbYVYCRW7v3hL\r\nUgMEJC3+Wy1ixN70WQPs8d0X7BYHEjAPrKy9WJ+fjxFbQIqnkdypULF+JvXF\r\nAjKHdxnw03SqXOrlJokwd9ikyiS4vEzFvgInJwH4Rf2qbB/CIga6nYhAs6tb\r\nPuUCLBWSvuIPTSyHCqGm++1wqmfKSfQsRI4JibR2Yz0rIvYiZsBm/oQKKPvz\r\nsN/ksV4L8cJAn3Cofnjj3NZsktYTRePAu1RvgEShR3pPggx2JXVpjYcoxWbw\r\nJs58Wu0Scro6JyfITlwgDTPhGxkDMb93KDoZcF/GhLA3V/L5O5ZMyh2srA9M\r\niUJpte3eSjq/dsNRPA5LoAziDYF/UWrWZH78ypwDDKKzQHrRe1p4nhQMiVlm\r\npaq2uTLV4cWYQg2GOvENB6yQ2BYKh9QlYnvrcz5a2Db7RsI68GOsSp5niy6J\r\nR/r7cMRb968E2Nx8defSv5W4HlWHlvb9UXI=\r\n=Cvv8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220624124109_1656074482513_0.743382340618163"},"_hasShrinkwrap":false},"0.0.0-canary-20220625052725":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220625052725","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220625052725","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-kYXXN5fY8QqeM9lfGinQD5hRDplJe+vl77MxzF8Oqs0lKSZTx3DVsnALzsxyghU6bNA8bRBDB1u3dtqDCYWjGQ==","shasum":"384f23bcb546da10e2df052efc0f9cb22c8fae75","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220625052725.tgz","fileCount":38,"unpackedSize":118381,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCr1imbUkxAOqmIaQZD6wENJaMx2qVWgBsOElwufskP6AIhAKYsUBrNIpTdkUaXqto5heBgNaOWsRq1vwCGDL7nk3VA"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitpzKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgVw/9FMXrF6Nol8aVFO2FVZuWCmCpYnpmJ00Dqptyj3NUU6OGu9Mt\r\nh8qtsEwE43x++78PRgTaC4R4Gbps4UrfT6zmbPWlhwV041F1znIGjbMJMGuh\r\nyYXOuTGSOHYBh2JWEiqa42OruaCuPTrpW6Ff1m0fdrZ6qLk7Jafp/MPOI54G\r\nGXZuqBKjKzYSSX9B781MFZmqvxWJk20UVYe84ZQSu/oe1sV7PzvY21rBdoQ1\r\nM8NUPlZJbm98wldV2OOGoquqcyOhPZn6erP5oHdnOlpFvdC0h9CXxd+hEGRN\r\n/fobPAd/z8naD8S2aorv+IGWKrNiFOSdqjxPn+KJpNoX91U3sv2EwLVQNXQq\r\nmCbFf2G/u2ocaElatI7Vuy08MFeyMWcMPp6cz3zyfbnmmEoqhb9065d44MIa\r\n7PB5teRwVEEA6VyxsZ3zNZ48n0NDzakVqUmfRnDshrcVeRlFOO5XK4D8s6D2\r\ninmmWGdbNQWF72/YkGz9+yPUCOz+QQaRWKEhLr05FcS3UY8niURzR82otBhE\r\nBXRV+D1NJSJ8etsS5e3m2sfUWJv6o0HSq05HHNVBvx1R3ooxh/sG/vjc7Agf\r\nYGKhnd8Lx7BwaeVIWTqdOn7Mden5QJ+RDFheB7b1/9otNEEfQ6I/sjugVuxn\r\n7KNIgwcqxw2SN2I4mdKG3dZq41yj3SQv0zo=\r\n=Ho5Y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220625052725_1656134858603_0.3180677483491179"},"_hasShrinkwrap":false},"0.0.0-canary-20220627114635":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220627114635","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220627114635","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-RN8hT+Xa3LLPoLGKuOEBrzEaLz3ODfRn1WbX9n9dhBSWBxxZtUu5ukwm7DU79I60bUO9B2nY9D3x4jWPqWahuw==","shasum":"5cdd8e20a64d89d50774ac808e993ce8b3bfc8cc","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220627114635.tgz","fileCount":38,"unpackedSize":118381,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAeu/5EzWJ6vr3WCQfALpQ4iji4HDjckvPt0z6i5RxwmAiAP0Nmf4c6lpDSVFHfTP4OQktXTteIs6E+xsaCHjNU7xg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiuZipACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTOA/+INrXy/SxbQRX4OAdXdMIOBiIA5tJGQviGypB2Zdtw5nP8vA/\r\nwoXLGZ+35nCWTU3qdC7NrujOKx0TnOEzV7mIz4TTp1LJXYHiow7Wdp/mv1aV\r\nseLRhWHZKqE63IyjZSnOSq/hToq4MtIjtaXg0wfDHJylnHqkbqUdLxnCPNHP\r\nJWxMuquldjPN18WrUKK0fuUzc5ZT4oOA669N6NWMfiKIlAGqSpGwDWVL0sg8\r\npZZ2Kaviixwuj58870bLEP1fc2pSTJNuR274TzFRDs24M4MSY8KXydXTZ7DX\r\nf7OKPjDebtYYwS2LxojuR6UAjG1yC72O4dY38fApz0B6Q/awDDYZNpXdnqj1\r\nPN3Pi7B+vSu1MkO6Iy3VzAk/Oq26WFNVRCHtrL/wsWqPoZ1I0/ezg51Nn8Y/\r\nfITToB6a/nyRINdtO6jj2X7AV0gtHgO24VGF68fAH0CxJDpF0OLSlmH4Mf1Z\r\nWXRwXCx+cQMLtRd3AzRi+gLeoJIijFAUtJhH4E7H3JelOW5RPPOXhW07HkmC\r\nbWc4oQEFTrxHT/lumufaucg36dPdAxIYK8Mbd4O5WoAswiIOf/JsFk6JaDfN\r\n9dbyF4DfL0V7wa9RYg+zBn/erYMHjLJmgbI7ebGUXSLiaH5VMLQIi+jD0kOP\r\nC3pPiMHEpj5G3imHfnzCCpTRuLRg1Wj+yl8=\r\n=Fo6S\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220627114635_1656330408682_0.21334920053191575"},"_hasShrinkwrap":false},"0.0.0-canary-20220627114957":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220627114957","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220627114957","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-wFxU7JYKFPbtCdg0sZ7RkF3Gckr9fu/YZbbYRzSCHYviNDwKVvBiVOUTDQ7d9An+Rz140Htjmzzh251NUuqgPg==","shasum":"f66a406e93bcc2e798657051f5fb5eba5c596f83","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220627114957.tgz","fileCount":38,"unpackedSize":118381,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVs8uP8UHM09TPRdq/KcK+vlxxZdsPMNK5GUDqXt9V6AIhAJvM6m+12GA0RzN32s+SW+H6zHTWUHc0JzQvyJ+OxTS2"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiuZlyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBCw//aqvQHvr7oZQj4dTfp262EbBl9VzvecZxzXboYU9ONkXLqiJr\r\nfIZM1dfvpIo2Kd++hzmttbx21apXT11hXxeIMDMFnWVsbdVmCjEqWXlmY/IN\r\nDYAfZlKa0EX0Uv7pZPPq+yxR5DZh3w7y64DE9B+s8DMJULwKIPvipmxkMTD+\r\nWpBl4Ao+24oalabke8eraZDHtNpTys85N5BmKj6BGoiwio5UH5iLZ5lxGj0U\r\nsgRz2QZHzHu8azo5Ci01u6Flz1dOzFyOAaG6rWKez9120oljJNBt9GeFgYY0\r\ns+ZGf70/kAlHs+nLaJcJ72NBV0nzU6TLcWZ6cG8W3a+tb7eHB/y9hihjN6WG\r\nD6DQ2xlrzhO0Occi6djQmRdvxYjEXaNYuKD/QDwWi/TjKOQG3R9eOLdVOXgE\r\nNqJKxG05tkBPcebJECBmpWgPHlHefh/GBo5lc5JDMCMUszmwyXG60h76sz4P\r\nyHtZ4OUCc/QI93bWBo1hFd4osSrsMlFJyAaxiXZjCKORGKq5jRiJitV/Jk3z\r\nrgWQWy4KRrPBki5hF3RfkDejirESZq7LN22ECu6aEbTIaOZjVno4xADGVgDi\r\nGebhWnmr6XNUaGnyKDHnWwZVuTvp58S/mbl6Mp25ejGlgL3VXnGY/VnNcePX\r\nFiuKtH0ChpguvUuV9IgyEQElHxjN60UThCo=\r\n=I41M\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220627114957_1656330610256_0.25606191684719937"},"_hasShrinkwrap":false},"0.0.0-canary-20220627144357":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220627144357","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220627144357","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220627144357","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220627144357","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-sqIwnhxa86BdIYRlOkAoM/43V6swPf5yWKphLMvSvlUPqNjC/VP4/nSbdEzEs+tXUc1nDiDH+iY/lrcjM6gfUA==","shasum":"49c6d6e6c1ac931c4340c30a4c34eefaf2dacbae","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220627144357.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCx97X8K8fG4noTZ8PjmzRUVqyuALF/7Mntnp5aTmhLPAIgEdbTljY2/kyDPD05ia227768rD2O3DMk6D4DuGbAVm4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiucI7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo51Q//Z4RKkXvxl+LIqtxnqnz0LGIjiw8bLbzUpQbS1Exnnbr9rnob\r\n681DAFIGKyztJupNMALov2Al+wBPn4shExeUpzo+efY++1sqxpBfihmrN8fN\r\nPCiKLURn1diEI0m1+/sYgRg728HhwzbcDWEvgMHs/YXrz76KqrnorHbltPpQ\r\nlIZ2OhMHn8uLLM5v5Ddnh8StvZMtPitv/lqTKseN+MtGjPJ1dOVg3OLaaKzv\r\n8EzG0VVndD1urydDBDHoXQXZKezgYXOOTkwHuDMdl6nSk5g4B0YTiHJEFniG\r\nWPuZ5IIjd88KJxsmP2KaZfx4HKUKDuPCEeHHHOI3smuMXIYywKpAdghNPFTx\r\nNsQtM6GaGcmVgp4bJNxLm/89aE7DHj94Zss93vmJMthjxV2Ix4rCF95QzYU7\r\nfu8At9F1zVE5GPlKt0FcdzdGzOiQqFsOTFTsBLxEee7GkLgGPDb8VlYDHsK1\r\nMiWr621+5pUpd5XvWlgcsdsEPWFSb+Ixhbzi73rEPm5E6pKNMLE8qc8SQMc/\r\njP2c+vax5TKdvVgrGIpRK+K/OP9qdm4yQa8Do34gaTiO8akwyothhGsU5Cru\r\n9tAZQsg040fQVah+1e9upjQYTGqMuVCTenB9RA5xGAZMj6XrqI3U/CwyUehg\r\nwGZ2DMa6mW0DH1QK+qwPGOuliYo6jj39CWc=\r\n=0KT8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220627144357_1656341051185_0.4976068135459675"},"_hasShrinkwrap":false},"0.0.0-canary-20220627144543":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220627144543","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220627144543","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220627144543","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220627144543","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-cBrKs4nbOKmC8Cie7VXHywZoD1RrVQHWF3UWNO9OPq4BEEkAAoJeiFvlzeHVJEyP1jEA/wo88qoS1646qR5kRg==","shasum":"98837d582f91cab1c579403303c76e661b5e1f35","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220627144543.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGkDht1zt9An/ikXSlUsvmljfTymKI5w7YbtdxG+aHEQIgaN2eQLVL7skQKXIorbDEX9p/DS1+XW+qJ0O2pCfS5O8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiucKnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5+A//QF1X2whBSR8aTMZqtMCxuLcHJmnNAcnLw5suLfqvAXIiLu28\r\ndujO8hkXCUpEyN0K1AO8JTshpkGrN8d8uU/0JCq6HS/fgGiDS133zCJYojkk\r\n5BD8MXOvUzgY3rCXweQlIq7hEZa81/IUBR3IgyWCqufGv+mUR/0Hprpm7XgI\r\npkWE/+an8l7GmGiV7OIAQeD5FFLxqSeskQ7XMmV4SmyRMApkgujf2o55cqp/\r\ntxvimBtlqjZbe/fyZlgPGRVcWcYZfCeNI0aZIZAs4LN2L9zSVUx1hMiJGqFz\r\naNFoDo+dfMv9/Bv5KAzgvjY8cRNTozr+EQ99Ktk/i/fXf6bYNUc5BwJnVgfv\r\nVtJx9Bh30FDS05Qt7mbB8DOFJcZ0DBcYOaq9v8ftcCKdcbY9PK2/itMDfh1d\r\n0oiIg91VUqct+Vt86OmO3y+ox6ZvIdSa7S5huJttj83tyzZiuSBlmPPPFOng\r\nZLi+Bd6tkJ6Ohly63IuETHXWmVwACnEYORYOXevhf6kZWtxcoudTq9xiN9cj\r\n+I0SARw1BlHd8Ae0M7d7OsZosMGtJyaCnT8+j+WU/Ym/K4m1vYGaS1WxcmcL\r\n+ccuqmhDjZ/1f3epHuvfP1E6CMhfDneIqYAZBemAtsX+4aL/bid2gOYRFclQ\r\nldmW+OSDcmBg6QS11GO8GJ2GkHsHam93foQ=\r\n=9ipq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220627144543_1656341159326_0.7579529857539455"},"_hasShrinkwrap":false},"0.0.0-canary-20220627145705":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220627145705","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220627145705","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220627145705","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220627145705","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-Jt497ipNFUBNtWrF8DxY/cey956F7mu2MIWxPsjl9MMxwsOFaCSHdhxgf5fGHQJjOTou7LnAOCdDD73v2117wQ==","shasum":"cfc7e2c8d6fdc1c8f2584be7232a0dadcfac1cfa","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220627145705.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGD7DiZKSic67Ep/fHUIFZZqWJltAGtgKj+FoV5n3Dj4AiB6b/ORvt/bGh3l3Sk5qy9GvG4ZeTWzlxSUG44oU74Hvg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiucVOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUEg/9G+hMixXrFo34hVt0pzX4kg7b6OLpS2F8pBISsTxFfySARP2h\r\n36Fj858m90qRhgkye4D50GbxTSlU7oIwio0y4qYF1RbK53asTY4Ulrk5wwcF\r\nNHVYR11tACerEljWls87bL1cpZkEVv6iz0WkEH+kQYnkQWQ0MWoejeS6+Gfp\r\nEUiM1+1Vmo8obMFkQYV5npG85ZthbFpzdSghAfBTyS6jKl2Y6/M01Agn21g4\r\ni7+9RMtXaIRvCKoVAEKU+/uTLq6V+dw43emb/Sy9NCN28yJmYKyLiBgUqVRW\r\nD6wFfL1EMx3Rex0D4qd8qe0TRh1NQq2ghempi60icGS3r6df1NonnrY5Xwna\r\nI7eCqYoV9dRNnljyTs+uzFGKwEGTnr/iLR+Dy5Gv2Oo8XQSMYIbYk71lwruj\r\nc8+bV4vv6R9cSDbjWvqrU5vAZeh8HBCXG6YNOJmmvdjfEKBwdgt4uBBZ3xyp\r\nUeW89hbMc7kl6zLN5aMBGQHfi7mIGqZGibcLtpOWDgTY9QcXb8/QG/QQJkCL\r\nCxhRWWECZYUGBeNRIexpcOsHDQph/10LDUtChLmgPhhVO6vXnWWQPR/M/xDV\r\nsVZCFrfHVfCNgfZkrC7IuplPSKNKSlc5wtJwud8VgnJoYOvxjdMDnjodlDWO\r\n6cpiUcdwT9r6OpRAJMS1ZJmtR4cBXsl1Zto=\r\n=WDsC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220627145705_1656341838237_0.4094084852227322"},"_hasShrinkwrap":false},"0.0.0-canary-20220627161330":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220627161330","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220627161330","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220627161330","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220627161330","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-83BM1xoAYe0EjQJbiDTcdb2qYuj/LxTiQJ3SYywvCBCuHBZmeRhAB0SZjdqnk9hsEX9Vh7BD6UkKTPQ4go1+ug==","shasum":"00780c411828bd94a9050672d17fba0b34619598","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220627161330.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdDgHtALLdjFlnXfez7CjgJA1+TmNCQTBMdGa4VP9xiQIhAI0U8bAKC0eqnUo6YLEjrl5jvuNcpC3x0wYkOp70S5br"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiudc4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmruuw/+LgsjhKZMhgnk6xoR4vX0BEcxn4E4utxunmcB3VxWKbpcgAKD\r\ncBVq6fI9fTd0twdMFTdrJEhAoHuDX2uljtDUyEXpviuoNFgM12wn0ad42GSX\r\n3wbIq+wTh9XnZEph0OhtPd/0JrR9lGgXpt87E1ahGbiIZcn7H4zzbaY5ivdq\r\nc8C/ahSu9FQ50FQZbscQNt7bLs0agO8+yWSjmqFDg3m2DiiYmgBK6AvXCNHU\r\neNyoUEM/NaxoXjtXdInBnEhdbo2jvuSj4LPMtrxdx5llwHdEyaNYAuWkbWl+\r\nmflyDF2iO93CO8QBjBPeELIyq8Cqh9VyGpiJZW/mpnjhcHeqvf6HWI4k4kkX\r\n2yYpeMl8yWu3vBtn3c9Pn1V09o79bK9Muwpw9pfYGQJK498kmsDbSqrDXvMx\r\n1/R/ecnMMFXeC18INWawRvBE0kdm9ULZenwkqoW8P8ESIJFRwtUEVXmSBZkf\r\nSI6FXSNAqSoB4vK6WKIa/vcPRz8Fk6t0zoeaFvkcaaJodGkV3QS151fjW0v4\r\na0V32oe1M9kvD/shGCj/sMRGMizoMw1YAG2zxsAqYIk3+Q9gjXKnX7k32HuY\r\nJWHkYP8o+s2WomZfeceV/O+mVCnQayYl6LFuHEzqoopBFi8sZ1y6s6MXNATY\r\n8X6UnEoYHoZ1J95d5Z1nMNKFNx5GqTkNCso=\r\n=i6r4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220627161330_1656346424209_0.13837058799533342"},"_hasShrinkwrap":false},"0.0.0-canary-20220628084446":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220628084446","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220628084446","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220628084446","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220628084446","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-UnhG/r9mQuceL89K/MfDQwxod5Lv6DIsH6ixZYd68I9+zrdXnM7yykZIKyAgM3R0lcR7pzsZoTz1eq/h1ZJF0A==","shasum":"97e736212e990abc4b7f5301a0b496b09b69b413","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220628084446.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHXqjMZyWhnitpSxhlfvYcPN05AVFRYexk2ydN5LaQ83AiEAp8pIoRy80TpokmWslovYDh8gw0GczxxtCKyPNmqaUXc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiur+MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrr1Q/+KbsU8dFj0JgsZD9DZajkglqw0BiF1wDkmsGcLFJYXP07S0my\r\nDeKBTKOwQHE9S+Xnw+Fpw1HtVmC95VfC8ZHHRrIOCxjtXrs61odTSLZltXgO\r\nJM81HxajaNttE78fo5yqVFEYbzye0AYveGH5eCA51PxtCfYNY1demVCfCcRb\r\nYMxD9qGVP5AMBQxhb4VsE0SmPbr2jDV1/bxNQT+BQ4e101hqTCoLY0FfHxWw\r\n9SzyaMePptEK2wwWNlTdaXY0w/zUA+/sZ1pGFEjgsXydVV/T57syyyTfe5FE\r\nsaJ58jvGHjBENRUgreTO9D+M+V81I4lIEinC7e8USLW+OABO0rGqo+tC2H7I\r\neZQA7ibhNRWElSGsZkgZpsFH5f5PVTqLiI2/aE132myfDrREXB/gIz+fZ6sX\r\nYmKtDxCpkoK76e0JfFvZep7XJmI91GrD4u2NEx3TTF3+ulHjEKeS6DXmwYzu\r\n1rJ2SpLVxHTVfO1bEvq8eLxN58JYhCUVsZQrBQDi64AUStMegWPhyu0tPrK2\r\nmwRF9qF5Das8Il1jjRE2nOIFfkXsnhEzQrAh37dUBWYYMTwoK0W5G5WXrdzv\r\nvzsuWmyezcE1NJcEc3GX08xayStC0vTE+ASwjTG1Ej42CUP53O3Z/IQjouuY\r\nxdFSEolzIMYZpZp2e8vONuLKwLW2fwUYJSQ=\r\n=/+nd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220628084446_1656405900697_0.8849744554698986"},"_hasShrinkwrap":false},"0.0.0-canary-20220628101033":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220628101033","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220628101033","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220628101033","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220628101033","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-T5bjgcmBUOy4qNX4XAznqB6NFyDZtCC2SmosYErkUnWyODyH1ynXouJQbID7nZMW6H6xgQclcSoY2XuaPqrtNg==","shasum":"82a0972b24fe89e6d03f8477c1d554d230e45637","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220628101033.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH3wGspqZtwNcbUNJ4JHVFCU4T1j/bEDWbMnGUv67+hXAiEAsmsMlfQC64ivWQl94r898w04809iuLTQX3yjgigOt2Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiutOzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmor0A/+Ox5S5/slHYYzDhwFoXsB2XhNtV3T1LRP/zaOlWAf/1ec6IE7\r\nSl6adpu7eBMZuwtyJTLngT7LtuOkur/HQcOUfoNv8yr7mQryUNCuhZMu5lBQ\r\nm2LR+Swc+8EeTNlRg0xH6mpjWowY0vUdxmmY9mJUFS2SkWXjAm1i3+hAY7fc\r\nxdOB3Nmam0TrlHE4Xa5mpbP8tKv7LBbXjON5uP7VKUQhr5F4DZa1d9PxEwQe\r\nofHQphm830NObSDf5ldKfLIbHbhIzXI00rEDH1laB7jSlTBVS4vLhrMutQMf\r\nQiEMmSR9EfUb+pJJlbp6lSrc8eAjJC518AqTPSmq+fJ1LFfD8D81MUNOIkJx\r\nT2Tl63An7LRibMl01pIot6dYUR9gOi78HEBAGlqkh9sQrEcggy5SMJsv3tBB\r\n33HmoxRJ9tOLWAfX/2n/N9fkKq0Ih8i4EEHzeCWYGF8PTm/lu4iWigl2NNjb\r\nUsIyM4FEyvTPRiXDdAwGFgExSBi96sKRo6UtrlzuJz9giMNPUf4QCr1ZWYFN\r\nX53s87kWsJnAh5XQBGNTzeNebLmVN0r1kISQv1A8FcPliTt5a8b3ehYKVJIn\r\nvCeISTejUBvXnmQ0nFp7YTJKCz4BuNiCUfN+CWz8Ow3keViWCFcgp2GiFGyx\r\n4V92ZVJDMWHrCNHLAIw/c0m5nlvvGscz7Ng=\r\n=JiyK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220628101033_1656411059237_0.1740137267045092"},"_hasShrinkwrap":false},"0.0.0-canary-20220628112841":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220628112841","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220628112841","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220628112841","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220628112841","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-60Ue69KBGjVZrIqrFvBh4g+xXeantb69ptTyYUCkHYhfDMQFeYQzA63UOUpjj2ouAsMI2lRygFIARWA19oUlxQ==","shasum":"00dac684f23df44abb174700429033ddc48658fd","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220628112841.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwIR2kG4JHL9IZK8LTucqwZw43kjDVT82YddKcJ1UKCgIgOlb3hG+fOx3LKylPk+1+/o/VwV4Dq+JxKzaUS4hs0+w="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiuuX6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXlA//VKQvkwN+ufNO0GIxZY7zfKwKKf3hxKB6VCCzS+KN/9q8tK5s\r\nOFC5HLuyWvaMrMcT58w0b4ULihasJmQCmwBO87DA/AabcVpIhYkOkhcL6ZT/\r\nkB9s8owfrR5yXiKaAEdnXBUClRib+yhJfifmU73I3KdSkE+21Xnfn2gdZ3TJ\r\niRiOb2c8VPycP8j/AOQNp00ktJAape37Zt+L9UTTXOOToIvrHBrh1rcmmnUh\r\nfPuzCVeW8s2z85aXmI/lkypdeBY4SxjABLL4bxrgtgkSdYixnthQA2pxxeIE\r\nRB2WgCtdd/2l8LOk0p2wCPxJjXw08bZvvheIomEz4K31xkdQMLQuGxjh7EL8\r\n3NtS6eMY4zcb1mz4eLrOzI9uAg04zg+kgNbXmgIRJUoXPrB4+HgYwORSG0lM\r\ncHCzh0iWlwLL/hdkr/WoxklrLCOH3UYOyPmwvSJ3pcGvMCyR31k1/UF/+Gza\r\ntI0bIJjo8b+O/yEn9AXjnOVtsPFVR+81C+PWOqn2nzs+JjGETKQe26kF6L3l\r\noxvOyik9PRu9xZ58iZFHrntvxquQ8XjWV7Od+6A9/W+7fEhZ2IWXuWrwU6D1\r\nc+XaKaQBHkJb7JpSKFGEes5sUMVfRia09nA1aEcjZbWR0vvp+JfjmeRauF26\r\noj/FIS2hXvdeaR/Zp5gitJCZoF52yBUoLFA=\r\n=J4rX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220628112841_1656415738820_0.7283071561504888"},"_hasShrinkwrap":false},"0.0.0-canary-20220628150632":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220628150632","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220628150632","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220628150632","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220628150632","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-qc/5cyTdrDUeri03dZaJXi7oJnkQJF2dUb8Itzglt5k+hKzkExRK22ta6venvLKpZMuzj06nKrmlqB6q/bv/Ng==","shasum":"9ad6414331fb7be98f4d85d37c2418a1da0cb0a9","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220628150632.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzcllMZcrHa/96JY2PgxBDRJA2/+KLuOJfL1e6YzPOQwIhAI8SiJzMNRJpnYdtJMI31Q0VcD9SXRvDQfjGaLPOETwQ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiuxkFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQ7g//RSnGfuQEbbVGUuMuLuDO4ot4bN6sRx3yTNOgeb3jaGAuXcP+\r\nmdPuWEAhBZPNSs6iJGMfBoBKVvn5B440PBKxC+hXKXw3VaSxCRt95ylfYfnk\r\n9fQdPSc7nOGMCMSIiHSZP+XEz245boZvifzQSbqBfDtKuMO7AVxBsFC2TLy5\r\n66/nv5k9eF/bwaRrSpveF9JuujZvZH7sD4Y2XJxl+mBdcQl26x5OQ1FRnS/c\r\nx8/YisQvs5WkDAQlA1b542nI9yuAgdbXpecLM7b0UpJolxVj7E9g82e3PyIP\r\n1QqipHJJ0v3+li7w2edUpn0FHEMslpXJR4VKdglK6hW8YjvZ3SC5WEKCKxK5\r\nfp+mXZnPHCtOoNnKgjLpBtrwZrFfhhJdATOgxGpwpx0Q7uLjGiZvx6zWjCki\r\nJ3IBdeGptFPLI9tsCZYUhqFIhcNlrRRn1Fgi30crFfxHlnzcundUNcjFj4G8\r\nJaAxduRUwXwNIxaf1egfzZ7Zr/NNxyHBCT77LU9ze1EsBCBbs2OyUST1m3HM\r\nUVXgRv+UzF3JsnyU1Bhx9q/LQ2TqboiILV0bFZ1+wJI3VULaN2yWKQe3p5Li\r\nEQ2KuGAIbmWqXZMADHWFUtR3FVrVnAvr0R5Sqpje9yfYj+sVriZuvMhoXMse\r\ne4XxYSjjbKcfqEOvD6y++gHqYRCy92TJDbQ=\r\n=OsYR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220628150632_1656428805797_0.7722101207687977"},"_hasShrinkwrap":false},"0.0.0-canary-20220628162947":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220628162947","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220628162947","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220628162947","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220628162947","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-RA7JJkhHLXpz1LxQs5aescNWqGcinCg9rp6LfqfVhHnL/T5BART6hvApNnCClVL1q95rbHvHoHjKigKmFbGplg==","shasum":"9e3cbbbf170208eb62d0440234fe11620e6d32e8","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220628162947.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvA0or4KBXh2oIg3Zz66vGwx31DAH+dmYdOtq48e2fXgIhAL5ltuvjWTwBDLcrIVuBeWxRKPlS97jPRkpCCsOlkori"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiuyyaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoB8A/7BCssLfEZq5La+yAtV7buDWVbPwI0MAkx9qw+79J867zfmdN3\r\nmu/kiQQTyU9SosW3mq8vIgX3Iglt+YfOCVKI+wl3Q/UAxvHPs92xL8Qiopro\r\nVtmIyekAk7YH823iDGbpl5203I5TaqHVE3bmZGwBsIeXqXFvm+Mrs7CZPRxi\r\nuFd+NftEhjRtJDHp0NIQIR6+YHweuljugJszWsPf86nQmuAARXXIZ1ka2CaI\r\nCllWHMhzBWMIsCnC++6XG9INgCkDrW0o8Lb11IwO3xVROxS+oAqxg7ua2AC6\r\nKVdb+T0upbqDdVt3oHMbv/uNgoDRVJEtacb8CHRU7SE2kO1mtEp1WKMXD50L\r\nS3+/MjeKRowRRH0i1qNtATgnRCnxoi34uN8gq7T9Uhbb4kwi7HA0tn2Sw9SA\r\n8dTt55Kn/bCu2pbYaMFI/PeaW3Fe7lq1kr3GnOAesLYRynyBQooYDJo5icw3\r\nsAnriDM1LeHrsy1UJp/qp+Ad/T6z0wyEiyR0IrPILT7yl9Fo4iBBeYCk1vag\r\n4L+lDKo4bjkYzU3pVVvrfdOOqSIesNk7gDVfrhp/l/QfjL02dc7PI4Gj2Zhd\r\n6JmC8A8xTDsxN7TxKRh7QITJC9SCyuh5FCWAu5S9z99CysHHL7ZDygfq78M5\r\n5dO5zNTN2N8uvpc1mMEMs03XPvrYXwP9Vf8=\r\n=hBih\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220628162947_1656433818094_0.2873749291035277"},"_hasShrinkwrap":false},"0.0.0-canary-20220628175513":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220628175513","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220628175513","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220628175513","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220628175513","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-b89WDIo2nf5SyDmF0Ca+XF0sBzUVgBMeP/2SNoacTWxxfKxiV+WdSSxdNQo/aDTpTxzS96qHBZzAUNwQOdNQNQ==","shasum":"ac72e5b42f5fd2c872925b08011abc6928f615b1","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220628175513.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTI1jK4SXMb7SPBjneesQWvMDB8tZhLM3Tn8aHtmINkgIhAMSRJalZHbvHkAHlakYhlQXnAPKfqK/48RfSGBnZ/xB3"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiu0CSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoG/A//QQcYJRZHVusGEUit1+43cuFjCaMgZHkt565Z1evpSBkFE+0L\r\ndwdVcPlPt58VRxq3aQ9yQL6Om2j64cZrf6P7gSDeGny/yQiVBqz8lqrv77K+\r\nGQeIc23xnqt//+2gojma/fg1glvJHzuavfsvEfATUU7PUZMisaPhJQF1WGux\r\nCdvgZR6YRrM/m2fBBTpWkrTNUTmM0bh/Us3z3EbGAThpp/2iRfTISkzTnq0y\r\ntFa1jykS6uuTrDwbHoQ0LdscnRMu1i0vVsGgoAKh/HfziFd1Dxe/OkYjwX0B\r\nfnTeWWKZp75hbFUk1F7SQf/ZifBJdbH6u6aB7/CWk5CiJ7coDUI7mkvCsDJc\r\nBoiucbU5H6BgEgTUFnbsDy7Rmg/o6/UOZYOEav+uaVZHKiYdRzHhPmv0WNcs\r\ntDu5t9w2E30ekpQtPq1+7oZyCNIzzGy/RApHxYo8syAw5kVXzi8AA00YslDO\r\nu6NsRRZiKyIYJB02z7k/hohErbew+GHqjNrXshcxPtz86n7cULmWsogJl2sS\r\nf0FE8CbB5tFXkpYcoLDZrP4zJKYrDdUzs69kUSFc07cw9U+2HHK2S6Pq+5Vy\r\nGg7kK6vNU0MfywPpmYO3+exBuiO2YJDVaOPrZ5u72kPQeKdBI1qFf54EpCDR\r\n2CdZvSBmeNjDXRnjDrRp/rR+IDqYiE37VEw=\r\n=iR+G\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220628175513_1656438930476_0.6353229776365408"},"_hasShrinkwrap":false},"0.0.0-canary-20220628195115":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220628195115","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220628195115","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220628195115","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220628195115","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-iF9aQ9fW6lhNtNIOybRq/R4M14cFXqyJrYT8QSNbsFqB44fZJnPtv6fBktyZkwk3ZZ2L8FdcLfedj7HOUB8dcA==","shasum":"053be5671e66962c017527adbeb60ca91802bf4b","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220628195115.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLVrUZ3GBAx/qiKY+K7BqlUjdcqKL3OZnUNgmYe+r/hQIgPIngpegT4G1pSShGrmQ7A+U6imjneJYGa4rCyZXEgTc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiu1vBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqU5g/8DhzWcPdIoLPhdBNr2s2dM8U818OyZVPBApehsZjx6NtVF3Up\r\nGLc5bPpxfPb9n3uKK3uBCt0r2UQgqR2dPm8GqgPoMX9NvxnZteTG1UUV07Fb\r\nwrEeioA6Kufdd2D+Ivqq5r/ppcDjavSzrbtHmLNtekVbEbWgFfQunboMMs7v\r\nX3ncDkGS2eIIXva4DtT4iIWdi5DEjiGdY6dSr1Zm2wgJS2TfGdbu4CG7MA9O\r\nlTefqrU6bCRZcfhDfXXOW1mwsrVD2LZ/N7wmlLdV2FLFyOy7Qc3nrmFxvYMA\r\ndIK9713RZffU/n/dDdb60/awpGIsJSpN8W+u5gT0KSY69F5vt5EuB6ZWOYhq\r\nmts662LLHwuyyCcTjtgMjWa5xpv+lyfTXIfcN6Wh3DkdLp1wzihPmN5JeLeV\r\nlEYHlV4kgpq8LyJ0KVR4HIyN6Sh2eVR7GoEk2otlfJm92kRMQJamdSYjE+NK\r\nT++P13Y/DdXnYR0AlZxtwE9NS/cE3I5/7yxifghx8sqYzhfGQisVO5e5m0UG\r\nXt1SCghozJUt+m3OMVRqikTHEdrFF9P5DlZ26dNvKioc/glINPP01cZtWwQt\r\nBUZGjZFUvCTdZX44W/dy8naZHU14uKD31d89/6UMBVCpBmLnHFxA13QjuqnD\r\nxDxvaLnvKk7YvfXPO7CzORZ24Fhr/nN5jaU=\r\n=Hykt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220628195115_1656445889642_0.4993894201468163"},"_hasShrinkwrap":false},"0.0.0-canary-20220628195756":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220628195756","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220628195756","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220628195756","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220628195756","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-r2w9n2D42C2KKDVE4i+l+SN18G+sx6peMrg/J+O2pKdyOI1qU34rnxeihYP81Xjf9CePXcW6U39CGq+bhNFq/Q==","shasum":"f0d8f72a7e2addc01e9933b09718934a694b2313","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220628195756.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbHcoSmP6zWl6OLKnCI4ZRcagP/BVb2cUHp7DFnCRSLAIgWgNOnhwqMmT3kjJovUwwQqMOaqYo/OMeAfoEWGfDe+U="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiu11SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8hA//fAVwiF53K3dpXXfqJyTgEn8o1JTEyvCDUqkYNpfxWpw06Ns7\r\nqR4PmUr1lD0nowH2qfOPMw3OY6sbayfj3JVTdOa8eUUsZcKAGqaeZhhLU9Vb\r\nd5j8f8nnKMVvZ/get4zQByiVMYumLXPtma2GgkCLVaCAesSgvVePHKZdtV3r\r\n2THRwfhfHECZBBnsCZ917WgKkssg+J+G4mnR2GaVNhvK6ffrRZP6XJkYrhwF\r\nhnsf49k23/UQwDR3XWAHwcwKXVw+QDq12fltucxZqm5LjjdAGbkrxSMs9IZG\r\nzsi2Ubgyh2BseKYxyfK3yPMcfKP8Ha7rUXk+eB9fJBh721FiLVLueH94g1Wr\r\nn1YUhpOt5fqc2S075qOoZZ2rFNAkCzo7M+0URKPPr5mArVljo5UaBBiVZFTs\r\ni8lxADG4Oo5OHfi7/WgbGCzQQYAl62Sr4IiG8e+jmPYivIpTJy9IY43Rd3Nx\r\nviWdgIweacjk+lkod5D+KwtmT44DTI9BFzwNBIOyJqXVNrUzyBqWJkzy6ak6\r\newkvJEUXd9MbkyfiGZVZ+JakF3JzMphbsqUQ/UDZyrmM+C7QdWVtOA74NGB7\r\nk8FqGXIG+xSL+hs7h9G3I8WVV5+Rpxt/xWZhy+UZ5blb/07l+J8mFxCAUHLS\r\nHcZRKcPY7KAGXOGomrHd6hUnqc7yq/DtTac=\r\n=6QmG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220628195756_1656446289888_0.23925782630168402"},"_hasShrinkwrap":false},"0.0.0-canary-20220628202226":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220628202226","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220628202226","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220628202226","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220628202226","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-UnxRLTL3ZbkrBKNmOGgqkfIPC3WTm1/o8kYj+SObR2c3PV4rxoGNKeP03XGJW1+SBXzABfzHvcP9ftYehSNHCw==","shasum":"0338be4b08cc67981312ff90589995b43fe93572","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220628202226.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFPY3sFfdHR3dL+ThtfKi/4Mws9JNqcLFE4wQkL4yBhBAiAQItGTDS7FABf1MJNzsG/170Qd4nBShiIJc6MKZ0uwYw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiu2MPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDtg/+NopFofC7M6YEaQPpojex420UjgkRaSGR7UXK37WZRZXHQbL2\r\nAcESaP5ThqHKW+b1AYVOo/iPJbWbY/LlzZ92a31mNJOp8xQGC7iOPg5eE+ic\r\n3WkBnRr4xIdE/JyCUkTINr7XjiECVJXhhHQqOjWJqK5qlWPAUXOpiAkCRXnn\r\nW7uVnTUOKPVIWVlNliDYs7XMaAfZjzAXPZqgr6PVWEayOQdOYpztEPEHnVQr\r\n9MQkUP+ptxl4i1lsuA3tio53qrL0KEaF/OeWooFnIx+Asz6/eJRX0JxWgceH\r\nLt5OOMCKNRtyaUgLrrU6p1K4vuxx7STjiiCOdcsYPb6IUOiBCdmemq3FgACv\r\nKZcuReLyVLSqtIkhp1O++hJ2Zp4gi3G3rxpnjYyr40UXHml280PaF8AuaX2h\r\nUdYBrJ/OaqClApllcyVG+EbvWFD3GiN4//GEVjBmyaAoHpN/Prey8gArvah0\r\n/a8hT4xk2FU9Wq+bzBQELBZd6QuSPs0aG+GFAgQG6S/3QZAbuATxFJnBA7Lw\r\n3GGPWJSxQpj8yORby1amDvqgMx/j82L2qyCF8ar0zKQb7QTiyN9HVU3M7Uu9\r\nOBLC2Aidtur0/L8orzETWy3BfLUnZ+55KLibPUmC4uINrZf/Z4ohn8AmUVW+\r\nl+NYiWyMQt98QkNQKb93BPp6ToDGSVSb1a0=\r\n=eLX7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220628202226_1656447758864_0.7912155119984059"},"_hasShrinkwrap":false},"0.0.0-canary-20220628210843":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220628210843","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220628210843","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220628210843","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220628210843","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-k3nkJ2opfAWHUA4clmuFwGmaNjhpFclxm4/OgB9JCFi5wZ96S/33IiMB7iRvwzbXzycRCwD7ErSzpsrVpztnvg==","shasum":"4f402060bc9f5ac352d2596c155f396a26d89e03","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220628210843.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5OyoUlVnWmWC4XFrRFx4I4NWSrcJkHEI7RB1I7pS9jgIhAJDfGhXdyQ1oMVe3ES+oqj21O8U8fko1/NlcdALMX/BE"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiu23pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTEg//UkyYC4YR6GBW2oclLZcaNdt986qUG0n1oAnHAgPtN+FZih1F\r\npumy8lII5zU9fZBStpAryc+prqtm1Y3PhxmQFguS3azEvkgdEhe9awagxDQz\r\nYarntEo7bOMBhrGkH3AmNmMdsQniosgCAEUZCcuSqkFFpgSahr+mZq0FyxyX\r\ntw6SesYnpwuZEL/VXUJU7AxHtmXmabfsTLkfA4JYSuxy7C0g7iXbREgK3fZj\r\n8PP7Etgk/OnUItDCPWfvnMoFZeYCm6H8gsNUJffOImcsQAocCjo+GV/bY8RX\r\ndboZqmWYUAx6lC88r96c/rj35519IT/JGpF3yguP6aidIc1tffQSJ47Licmz\r\nYC2rlCHbxO7LZMHpIbxSZkCbkQ3GCLrPUOpzwV8n774Vu9+Q7fcqSZ4kcMmo\r\n9adEsvQjQ+nfyZX4l5vx8yvSleK8Bzpg22wOpSgNS/TKLERgDfAQlROIwFQr\r\nIvXa1g3+ZAwnTWwmOA47Rxww8bFHhRPTpyaDaEd4RgZ/E8wLEks6TlnGVz8l\r\n6rDBP3PySZIh3rPp9zecHcVkzRswJ5yIvw9jVZkyybzg0AByBWpjTKsQR3JD\r\nPrkM6bXh4kWzlgv6DXlwmyIB+ZhSmtpMNJ45cgNqo6fcOrGLQJ4WQBOYcPUy\r\nrtN7RXMvL6jb/OtwLItcSpyyctPfRu9d/Dw=\r\n=hhUZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220628210843_1656450537425_0.029542638948214073"},"_hasShrinkwrap":false},"0.0.0-canary-20220701134857":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220701134857","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220701134857","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220701134857","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220701134857","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-MCG9UMATwKo/5xv+VhVtvmpQqB3Xmlg9Rqu0caGWqRiZQMlcww+jR1JJLQS4jxgJc/CpVhaVMiXbxqyn/oFMGw==","shasum":"3de44347ec8fa0b9aea65ade8ac7702be3191ddb","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220701134857.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICnxffQqohBrOK01gJrEYakW/VIiYp8E2g7tAJzbtieBAiB13CZWmrXIfD0RAu4aQrt68ftUv7yqJLM+Fyzjn/NVkQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivvtYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8+w//fxC5NLeoziqGHw0A4d+zlWZFTWqbv/pbiPWstt2VPNhZ6E7C\r\nYJ6uJ13laIn1cBzpVr2EuCFD3fCLabWTm4lL1YFJZf3+MptMJWjI1LBSZupi\r\n2lI7/jF4r345X4RJz4Z9JQiwxjS4xq5lESGzQRCqxcuiQyOn5s0rjHemDl7I\r\nXXgXchphYWPSiIJ2t3OJJex7p1weF7EQB2PiZdAZem9S27NnVW+iMl57KwHU\r\ndvPDhJPFea56t96jAFi1qqO4E0zxA/P01B1gUGB4PP4CDZ6Kqm2IPB1ne9ch\r\nejrgjj5Ldx0JravD+Ju5o8RsmDuEgOQm+7zFf4XqJQghGh7iypwW+dUUezte\r\nn/IrErIxesiiTO7gMelhZa8vt0sNx5kswB4UcxmaXNgvP8n9ZIoUYAngkhp1\r\nE8FHX8gcMnsluRaYxjbhTinjDPHFg3Wke8vs+YpGEfLRjuskhmGsy9sKnNxW\r\nREzh5xY0rFr/ielkyPvfRJkcvlefuDl4qElLnC6W5iz76zQcXbvpu/L+Po3X\r\nDfHO04VE1ASp8pOj8a95HorReUpFR42pRCeFsJQLsPx2lUMWQkRdH89zC5Qb\r\nrzznoAwGsEo4LBWN36ZPNJot1Px4NOzskZifJ91W8BPCIRWc5wUmM/wgB1Yk\r\nH34E1UiuYC9DZ56XYxYu0PUVnwM9v3oIg2c=\r\n=Nuuk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220701134857_1656683352217_0.5244419648932981"},"_hasShrinkwrap":false},"0.0.0-canary-20220701135023":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220701135023","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220701135023","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220701135023","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220701135023","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-iuF2BHKavMqNSvx+1bYuiHcYNm0hmkkGbXqHWq833lLl++Jz6HYjP10C+pU93VPSHoayJ3v/mjLgI23E9KoW9g==","shasum":"0e816f13593bb409cd76fc9f7398ce35907cfb44","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220701135023.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDov3hQ/umSTNvcHVKAyVsdkrSxRh4b+RDFPQOx0d0OJwIgJ+2ubAtemhIj3Ivr1XLVNitrtYs4ciiBpMfjeCfYpzo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivvutACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrC+RAAlXsmPu5QWW+UC27cT+rOC1kcL3i7OFzv80Fi/t0kvPE0PkfG\r\nxalfZcDMUmRMwzZMyoX0DfVoP+JD2ZFncISrPTTdLNPA80iRNDyBTG3y4rQi\r\ncqy+Ol4e/w8Sp6ZP6Ob7gDlp1cfVY1/Sa3QopNyUFJy5u5z4Yy1cPcZxjmmp\r\nc0WPfdG3ofoehm3h8yOy/M7X2uiTqQCE8EJ9zAUJEYFuyMihXShg2PyCoOTn\r\nReF2VRlBXfqNlXQ35xVIhRJYLhb2QHUd48J2cq0CA41oPaTFmQnEseUpux5v\r\nZDd5K0YfRDtVtuOb2IBeAlNJTIOk9FVOWonJMySeeeX1qWSSgRxW6plrT2s9\r\nQLplSY6fJodH6PUsAedTa1nzFeXOjiWRKHE0+B/wDT3/I9lAeDjs7sBOSVb8\r\n5MesZ0VAkY/nvdQw++CQ4Vc4oiodtGE5vFbkXeS3WpKjoaW0Btuw4hcBFfKG\r\nFmGGTYfOI0ZRrOB1kkcuLZmrbqsCeRlbnuksWwx7XcW6n+TOsUrcaaHXLiR6\r\nORBEX5EQnFo1mRYVzYXb7bADX/jtpuArNUsc6By065A88GoW9TQ7oSntubWd\r\nswBC2Uo3W8KnYN+tHwj/xuMqG9FTnE0xB8/8EtCHeNvOkWKJB3Dc9ZCyMF7N\r\nCcbLvIIfVl80YaVNocM2hpMSyLvLOrPzNyg=\r\n=skbS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220701135023_1656683437335_0.6991932983882578"},"_hasShrinkwrap":false},"0.0.0-canary-20220701220347":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220701220347","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220701220347","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220701220347","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220701220347","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-+gwfCkUXqpviAnl5+Ezq6Ljx+v/OVQmuJxUyaDn0Mo10GIh1maffIO7MIUQSJMLfr9UmTFVtkeH5tKO3HpnpBw==","shasum":"8ecd79da63a62306e3be06bdb1e52787e7074c6c","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220701220347.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDHlJvT6ju06PyWhoWoVy9cQcERIENMpSNI582AZK06WAiA7OQjm4DAOFZoKx2pSycUpCgEWpznfcNtoZg762vGvSQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv29RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr94g/8CpLPozs4BbEwbE3/U1HqMdoEj1gITlwkSJ20RJlSc923PhTB\r\nXRubVO0m+tKJmPdOpEOta//VnHtO+wTxbQvPGRohqI8703ymFVdYlQuP5T5/\r\nsVQgPFj02sDB/Z/XUWuoQqoFULHfTo36xyyKsJUeUJlQ7ugrnGetIU7S6wlM\r\noNM2WlX1HvaKmNMF//DOgKH13Ceh3y8gOAcT5OGmwczlcs0VPD5UBaRX9kJO\r\nQGWKs6NlKoRRs5S20cQp47xlEYL0vgDjjGk1Mtik7owrVZLTkFfTh7cgEic/\r\nfd/urTn8rv8UVF7lxiFs1QXwwhhmuDRmd+DNu/2Y+SPF9zY+A81qwSJc2UfQ\r\nZqt+NqABQhrRXifOiLf3B1Kil/U2UoCaB6Sq5z0ZjAjwT3XGb6tJ1ZjjEquS\r\nkTR0aNHBaovUP1a1a6xA38bh5eVe4TVl9n2wigC4o0znWADN4oaJC1prsBZx\r\nUm5/Jgq/Ar24/DX+CnawOVFGMVQBe3CNPN4agaQdhOXfgEWFGtnxRysc2L3Y\r\nQGZNhSyLy5z32UTdVS36G0vHk4ytl6iuk+5GAe43faFE2xjEYFIzNdawDbxN\r\nl7NhCKEtjUVQun93ZNCniwEOANoKBplGT/vQA6OFR937WtEcxnIZLt9NpJ1t\r\n3nmCGKePt/6d7khIMqiu7oVPrO+Z1/YcOis=\r\n=IS9G\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220701220347_1656713040919_0.6658638848445482"},"_hasShrinkwrap":false},"0.0.0-canary-20220701221334":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220701221334","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220701221334","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220701221334","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220701221334","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-KscUuT9RufJzrcGnL1GlcGmPUuQp/e+znvmgTZ9T6Q3s86b6TrtjQ9KPIBzIF0VXzLWWi6pC7mHTKM6DC4GUgg==","shasum":"693c79f945bb9d345c1f961345c5af0c2e8f4bed","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220701221334.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnycEfgvocH7LdSRbqEFpGAvUndnRNGs2rLGazb40lcgIgF6XCK5uYQsTQrhlcHEwAQZ5AZ0G5n3uOc0UVZnBayu4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3GbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXhA//UZFDRF9Db+c8SIGp2jWQIfv/BfVnX0vIZE0qDpbE5jB8m5t+\r\nBQx/uvazxur4U5SuNeS6YG2f8MZP455m9kGU7ijTgdVnUND+p8I6f7J+tIa9\r\nGrmoSPxj6Zjth34ighD8xkCXHFWzcfLytnpmSp//V1I3bEyYelXEqALkrSoM\r\nWrwBtywWZwOEw5bm9tuLbeW8pvu7XDvR5aes51bpSh4DLm42gUAxC0sJEuOx\r\n1YN1qncExQpRGJ9VGhpzgPlKuJXeC1bqqveSI0cW2lBmm+/V5yE5AaVF3WHB\r\n+TlMVFMJfzguZgy0+oBnGFwdnnhO0JLCboelSzReIknKwqllQ9W5MQ4QkLs8\r\nI4tN6ZgjPI0ea6njhhOIZL9KMis5XHg9UsGjdZeLUP49Kwk8mP1+Rxe/k90V\r\n/meLgAyiLY3LglmqG0W8JWXuEWfDnGFKKqMtZqzYbaeqIRk5rTxwWFJ+QM/r\r\nrrN2O/Pa9XexKoqtGRByT+FgMF1xy7tGWCpEu+OVIW9amNXnzEwaOwRmC/RG\r\nsAZK4EKcX7YQ/wCFGD1CiFn83bQZMnboZmlNaGI9ocJ971iWmT5kOy4LE5hN\r\n35sIeiic0fkU1cCHsn78EnaZt0QSVGjb8xULw1aQowt1RGBQCFH0bC3ziu7T\r\nSsO5Jui4xrkE2Xg0Wjk71YjCrlA+HNMW9rg=\r\n=2Jqh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220701221334_1656713626878_0.4895021243538715"},"_hasShrinkwrap":false},"0.0.0-canary-20220701224746":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220701224746","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220701224746","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220701224746","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220701224746","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-KtpPTQYdgFY0endQhNv6fsuUaLQXx2wiaZeOD6oRcIRgyW0DKW8m/EpTRFNBVqwhPmgJrXYr/lgHBwmIyy6row==","shasum":"d2b32d26855258fef0b08756d7b97b4d96b02766","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220701224746.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR6Y94y2dmi1LrTWcUkG6ZIfDdXqQZdCQeGkxyVyS61gIgULb7Gi+79EbKSNQqDWX+A61qSE51AALU7DPi8x7W56Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3miACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqbsg//UR657obFQypqN9Pi7O2Z368CifagSQqfv3f0EHIucARuytmP\r\nQUESMcKbmkPva7vARdMj2P4xWPEhPgPhEeIsL7harJlizHncxGV6kZQDcfMf\r\nVugg5udXh1RD9pzwF4ZCEM8gGTXpOJZBOqsiA3uqalFKKdcJXTffUI6dQMiQ\r\nVIauh52HURWYlkpbbK5pXz+2tga9qBYrKLUo9RJir3PT8v9fiBuhU6H+pVbr\r\nNysOVlAp5c78YLzWD/IrBedSkp8Pt+fwaWfqa4yJwGP1wLL09fqUqjigKpQq\r\nmppBUHPb8dJ96e8NOxv9wljGz0aukucTaOTTbJO1X3wELMgdw4MMrvrxbQov\r\nw211WvUGoejYKGBzMAbPyzea5Tx7rtoYvo4h8Z1DA7R89i8wR2aW3WwUkbzE\r\n0PsmQy+FC52QxEw2wMDvumQuzyfoPAaF4O0oTYc9Ed2WeUrTy/BtzsBGYxrq\r\nhFM0TjhyxSNqiciVRB307NjUHfUqG3kxPBQIq9W7HF2v+PBRCmH70yqDsXqz\r\n8y8syRBcHuEK5hN/TlsPHIg3VYzDTtGJYcyzGBfJqk2s8rfgWgqEyor568qK\r\nNf5+aycr7zu9TlysBhb97j8TdS77nnBKIso0kv9fFliPAmTTZBTo6Y8VAXLi\r\nxUSqzrS1F4iVKLSqV1BE4RS2qEYcy8HjG2g=\r\n=X38Z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220701224746_1656715682254_0.44799726787405914"},"_hasShrinkwrap":false},"0.0.0-canary-20220701225229":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220701225229","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220701225229","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220701225229","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220701225229","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-f/xYjbQggR9r3miohJ5SytSbL8w36W+GQzEz+xXn/OTj8xd4tDpBS4yIfdiMh1Brir2B6tWfxX/s5N0btx2a/A==","shasum":"8adbb14d94237a264aa2836eeb313a6702a21dc3","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220701225229.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbTX6XFRmsvvis5SzwwhWCcVZAhrplYb/XtOVDGKppPwIhAIMLhIsmRTAHmpWEmwEYTPa4Vb573nNR/aM/WXGDuBWJ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3q6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriYA//cNNqZVigW6K9Isx1hRffknc5AlkWH1g2itS5vB5cV1MaR7K2\r\nmNfY7RwRDbLoW+MNXLYdPWw9SL7irjrXtuQpRAbgZLNeoblF0zvYsLFBXhVp\r\nYslGBJdOvQh5nkw7XPJ8Fuo7ZqrTaW+y75fhKSF8e4seZ7+aFKeCUuilSGiw\r\ntHWGrm93wv2xoeke7jJ+JfqNmJQcLxddWj4Y1LYwc7XJJm4LYormwMhdpOrB\r\nywJT6DNyr/d7Tl5zmcMW7J5el7LNWqezYsLCy5fTAmLqMqThvNlu4GX7+lT5\r\nCgXWsnD0OxpW9iHXVG6IaGqICDmlkW7PRkhmKfmNpWDR0pKVKpbXq4R3H4Ec\r\nZfptCp+1KJQgMx9Xxui9+1jgcBCLGzBF44IgcJRtM1Kf+u22yD+jqjn8yFdm\r\nB7paYoOEGQKWq+GWZlWuY5sak73J6Vtk01+DmGcHC2Z0JJxVSPwho0d9hfDf\r\nPIQ3pTN2j1HUnutn0CYl3x/B8mcM0FMfHowvDTYhT6P/v7KN5NUj5KUn2FZ9\r\nEKE2Pei6sqT47Gc20LaGZJCnWB3mxwlZywLG4Xl5T5UZnvqZ+v5MSjF6IOgo\r\ncmKmof3a+ISPqMvLjm+hib6y+GHZOHlklilSMSnrqgIYrMCQaC8+Rygn+o+o\r\nn+p5rPr9+bbMhVe+xq0/qhZNKrsWDI9NkeE=\r\n=KIUQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220701225229_1656715962716_0.26297470084991637"},"_hasShrinkwrap":false},"0.0.0-canary-20220701232436":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220701232436","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220701232436","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220701232436","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220701232436","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-ufGaSgGN3OXpeFZ97IULQ4bel1FRaNzYmS5K6S/w4f7VJ02lSGc38nrAuMV733uyhgQ8ryfXa4sNy4blu/m3rQ==","shasum":"541a90018481e76dc3714bbf9e2e7fb92e3ecddf","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220701232436.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNSLBSF6qAWeudpLM/B3qTj62ToXRxTyZRJEIlo60E3gIgJycCqGmcgkTtRg4jJrCJ2LzfPgdqWTNfE+Uzm7SpkSI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv4JEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFrg/9GHoEfzLm0bKdnPgPqxCvE+W35ZfVH/vCP818Hjl8ftwWmoHq\r\ns4YZEJortMXylShB7UVwHLXxbWQTFbma86ujWrJuG7Q391JLV593mp9HwNLC\r\nDCpQyYs9+0YwLQjKhMZkT9rmSEczK0uzg99BBDzjxxZ42tqh4LM/LyWPGJI2\r\nQAlnj3FWIidUjlH18PTpaVJqF8PQ58MVDPtTwZKHJbwzOm+YKpNKytl+aIEl\r\ntRC7cBMIdN31k1VuOH/dVg51PJhamNdyw5mvyncVfRtvWr9Dr++mj0K/CMtZ\r\nou0H2S+ZoWZQB5vRflWlXfFreHyPAjAgmjHkSXto5zzJyffc2QHAaHxWBjHr\r\nZtUpzFx5vPa7KH8cQ9zVwsMrZTBNHt8FIrRYnIGHuYDmWK3Kke6qZ/MIXISL\r\nUO0wJQxvkNvQuD3YqtRoRqiH6b3/hESWM+7B3vvZjwS8aVETel91fTWXyNeQ\r\nyKcwE0ee9ZfsZWsPeVKEVi7ZODfNNLtyE/lAp3653z3DSAVtjF36wzaLkFWc\r\ngy2Ksb9aGqJljrnOATtR9Lcy/O7R4W6ObRege9BunSJ/7ZpB3In/vSSc37N3\r\n7c+vqqMfe9DrSPeZ/CCQpl1mPdROjVrIF0lVkK/rK5+FHxyyqdYCWY83RX30\r\nGRuRA8+sV3ovEkWASj6inxfkOO2cygKKYkk=\r\n=1ImH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220701232436_1656717892297_0.168539426652349"},"_hasShrinkwrap":false},"0.0.0-canary-20220701235655":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220701235655","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220701235655","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220701235655","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220701235655","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-gIlBjl+O7A84j3pyoHxzjWGIqYCZ8+NS0yD+hYVv1bAYUpGWksE7wqmWy4wJBLi9NxiPF5nZnN0/eywOwZSiDA==","shasum":"7eebab05094f9156757d942cda8c2fcdc0672b5e","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220701235655.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvFCjIvqNsVn828QBk4kWur4QjmSLL3TC7+S4iKoRdSAiEApuJOTTfYXZIgG0K9x6GgBduTHDB41V8eK+bER+bwizs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv4nVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXTA//er7unoABCS49o+iiVLxeE1qsVvcYeSscV83SAEmrNIy1aWjx\r\nHSnj1Ua9WCVLPHFMnHj/E91d5rHdIFq2gGNbuRQV3c/bavX4lcAClX8qC54b\r\n/LZ37kmYyGL2hRHlNTBuXRIVJ0kuZvoDaiHnbHWxtx/K8l8ysTCtHlRMYu8q\r\ntG6nWkHh8Ghz7GO33bXyxC+sMD8s+wOz7boB3LQWEkxEOpvOMRvUKFT/B+eX\r\nxBMQvw1C5JxBQflj76uYuu4GDa59t9fFIPwHU/F1U94PX0gq2m9+zj5TJ6Fd\r\nvv39rxhQW/XtwYZ3tscuUsHxhzBVE+qbEJ8y3S0BlbcGg4TB/c0laPTH9GXs\r\ncp3KNpvIVy3An55HOebDb6lueyt+aPw7NMGxSf1Jgw4jhAewDZ8QrQKBSWib\r\nPHCOvHAhNgG5cTpC6hjkIQSYzPNt6ubMQj3/pY3erDWpRymMRV8Y9KB2Hqsc\r\n78qQwHjka6p/5N1LABgQyUTtZIsQfdbTC6hioPPGdiJd25HF5yTOoJUkisHv\r\nJzLalvnGNxOKEa8BA7KnWcIb83U5cvdJZFklcAIYuGt07qPQ/hKAyJTRXtgx\r\nzCX1EWZ3PN8AwewRvqk5o7N32cKzCaZoL8iWs2oYw7u0pI7w3Jzmx72+5CRU\r\nt7XuvJrM0gE7knRbLbNkEvgDn22XSHAJz4k=\r\n=vHdQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220701235655_1656719829340_0.14832601496549613"},"_hasShrinkwrap":false},"0.0.0-canary-20220701235752":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220701235752","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220701235752","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220701235752","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220701235752","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-WlGOvxAppoSSJT0BYxWEy7EraO+XnnpgMW2EN5Z6XpGZB+glREYCX80OI+WxEO8z44vqVnTzqj1+zrZNZsXT2Q==","shasum":"d4a85040e4e5cb04a75a7443ebb9c002a8a1c2d0","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220701235752.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIENw4Ae2Rbw88Z7547BDn9H3gkhzRCVXoAioey9P3/u7AiB2qUOKcqeDF0TKwWfTxMkdIbuVRHOOaOkpcZQXT07/2A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv4oRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3QhAAmWlKTl0r37nvJdB01Qu+a0CcwKas7ZI4sf45YfPuSkdPPi//\r\n2egMTGfq4n0RCIZTQJ88o442awNRMGdCWhq9RxjqJVJWFOjEt8TX0P/N0WJK\r\nkd3cCkgBtIpDQ0Rc5wWZCdR65PVdW+xJSnA2NdVjLcp8l+9ebxcJ/bNPblNs\r\nBUTQxUSy1amWX1h074dw8wKYHbMhh243n9kuwXAqIhfaw3qR6iIJF4Q6SFq4\r\nh+nx7fBT4XlPnmVNQM8XD+9yk0ITlR0jC8XoZPlmPfAa6FgPrGxqoH1hDFWO\r\ngRLvIUYwazSdSOlmmxRxsiYG+LAWvbnYL7N9X5ftxcdKsD85NWRGhpw+ao5m\r\nGrToNOXz5daJxQersDTBGpJ68+kowWo2PRFpmDSoBmPkZhs2BoQvrmHMoAfX\r\nK3cYDPuGtK5ACeAPJItYR+gZxoTCzMxFwda8CFoAw9vo2SlOgJQYO8sZNHXm\r\nHZwrlm+a2+nK+KX0sIkCYlxi++9qA9ZKxURkS2Xji0IXQRtqWmvBkG1gXSpt\r\na/gyA2rlao2yl5M0Ejvpz+tvtGgRF9176AKOZx4GDs0jY17S8GwRnWm0/o+N\r\nD6J10WSG4vw3mm9/M3K5/YlmiFy2n1y3D02WL++vgmOCQjKYMtgF6gcS7Vlc\r\n9mZX24tWa2qh4ZOrYlXask3Ib/+Z5Sc5vZs=\r\n=7CdE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220701235752_1656719888860_0.9707240355888738"},"_hasShrinkwrap":false},"0.0.0-canary-20220702000840":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702000840","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702000840","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702000840","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702000840","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-M6CszAWzxg3vyINy4PMeIOkzBj7hQ0h4EgEmUB/8lFdn7hlnWgKhc0PS2OOrmMy08nErMb9VlRh5YKfIec6S4Q==","shasum":"fe6da56ade9fc2e7ddbbbdaaf4228a0b290bc2ad","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702000840.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2b3IFI/VpzfQEkqHxOfWGxtWKUEM21l4ClOfa965X5AIgVZG1vQVDOghgY7hBrEm4/xR0KULR80K7GYQ/HuUw2c0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv4yVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNmw//W+Gv+W9r2vyu35XXCIJq3G0yQh3g3kKSx08dK38ZBChjQYya\r\nr4Psq+DmMcLi/SWsB+NdFTV1FFlDSlQc4bF2VlV/pJSgQgn+yXRmamNrkP0i\r\n0O7uj741Bn8UCxkdXuCiP1Lf6qxY15bk7VhXgfyBKvOR45sj+MZ0/g3X+k5V\r\n5umk5nCgUfcfZJpaELLixLWG3qsfX4U0EroR8PYrU0IAJKMDU+cHkrc1Er3o\r\n9UlSvsqATiFbAA/WteZKdqoKSbijOTCW8AmNZokoYo25K2g3djsqKZJ1G/E5\r\nKqszlZv5UOdsuu3l7NwGt14t3TSLo1TD5EJ7Jl1NsPF86LCOR1yMwFSp0YQa\r\ndz4M5jDnYaMUpLWIh2aWkpF9qK4Hg1kHpO3mF/QQuHA3EcjtDXTCEjxdLIAI\r\nxbAvOrZgsSFWhf1g1y1Dl/ftepdenkyWyzpEUq9EePjk89i/PWcUcvzquOwA\r\n9JdO8ZuQ8EaYWYIZKjguiNcTli4h3lLYdDIxwIRt2sl15IpXR3eD6qtY1quy\r\nOByr2XCGIlBSYsIofvfdJkdGaUjyATjeF01wGXK/i/hR0BhK98o0tGRne4oX\r\neOKuOD6sf+6rcNX4wc+xmm0/xDUCjyRfXDCRXEWlglQ69FG2LzHWeMtMRgIC\r\nbkPxZBQpH59k4mP//l83HO5WvP23QV0C+gI=\r\n=Xrg2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702000840_1656720533522_0.9727395361358839"},"_hasShrinkwrap":false},"0.0.0-canary-20220702001048":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702001048","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702001048","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702001048","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702001048","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-9E4YFBWrNAp1GKZebn6ssOMJ72SNBsp4mv9/LuZyM2va44xbyJL9cvDxSwysbXwIZN/i1VgGimiJCtCfcnGHvA==","shasum":"b32a8b5632309e9fc8691e53c48c4d1b31df621f","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702001048.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICQ2NX9OLr8ovb/tbPHkPIwtfqvOfp+tlEzg1PGKk9u8AiBlUWZmZu1oHEDE1vephM3t1b8dzAisWTd5AwBNblmF0w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv40XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHHA/+IwOy/xa2+8YxPmE+YRQg//FsgKQUZH9nlpB11wCoLHXV51y5\r\nVzm4p6aHJKDGRG31gUSCT64nqt9LKOdeJY4tsV92rK1wSzCPtkNATnE0WD3H\r\nlB87rSeFgNpIuxdqy8NB3b/aGXMj59agQxcH3MxXl/rCNYx6WqxYqr3YMYoe\r\nzdigZurYVgcLr3p8dOqm3ZEiwV5D5bAlzyVfE4Nd0/PUnKsneYo7VHryr+WQ\r\njcw9oY5r5dAh6RlOUap3qMBbPBkfm0/W4l72kiwAGiIITytI0v+IiUBaU9RE\r\nv6GPXnY84lFFu7619pxGKMdXbuXe4sjiyXV0SBCb6XKd8I9X84y62auO+iil\r\nTFuNeFVcS06G+6Dt7AwqHQr6Po9aeqlXTJ/9KmhGtyFp6bSXLuk2Z7SwbPUF\r\nnML5VX9zGu+QwOKdIDKjZfrrJncKaZB0yspWhms/NYmjet0fC3JRjGuqT3n+\r\ntVOHURL9M2O2ViBC0UINsVwLiHm3Yf0KB/4qfdojbRFAFS+1nqAPYq+kspAo\r\nNHyBc05UpN47RlfRCfMo/HpCkrI3db9HNL5a1T/voTZ3RfuSaCul4mqrsTQ9\r\nDHvTSkVGiJ23a1eLdiqZ6cQsqhsTXcL2ESRu4VBRE6NDelLl/0hPtXwguER0\r\n04q64L9ERWxwKFBl/6VmlkAFa0wgNIoAffc=\r\n=0c8u\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702001048_1656720662925_0.7749750618451783"},"_hasShrinkwrap":false},"0.0.0-canary-20220702100656":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702100656","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702100656","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702100656","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702100656","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-M1QVMsMUHf9glya47XeggFKNGqNCc8VOo5y7sQdZz6jK8j1FoQp9fY/46owEJ5t979Oxi/6Q5cweZXqhxkn0Iw==","shasum":"8167981bcaad46dfd490dcb4f90a57dfea78cfb9","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702100656.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGQVO4ZincglD8mYh2RaGlpxKt+edSLf2q4rpAHnhyhYAiEAq7NacWc1xkPiUyx+yLFJxtibEhWfNlY27z0uJcMJuqs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwBjOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrteA//dXuFOYlFVekzf2GAHXv6q2D9yqVkGy+Nf5OJeJsog/GKEENL\r\nKCDxWdmVSHSxd9kQIX3nuQogCfPKgzedRvA8p7PqU1iEGx3Fi+78i/UaA+yX\r\nYQZ3QWMaXZhUEJoXbInL+uaD3y5dBJq6AzQ06qCr+pe3Ms0WqoliJj8zfrRx\r\n3K0zAINslIa0xfSxoTvGZELB1F2JbtjyHTCl8M/YlxlZwlq5Gp6N3Avic+tY\r\nSu1FrYMJFpAkKfe4K7j1qY8Uqxmb+PpumA19S9KfJL0cfON3d1T9YljrF+hf\r\nVf2NDxYTXmXPL2CFn5RqF2ia0dYs7z/dN3fHLyJiElcE3282tc15QdnE+Mt8\r\nPffNLN6uBgEJzenic+Xr7R822t0ef/HMk6ywtSKwFghZF5OMg3xuAc+JMYBb\r\nx7iLXMQpXpPMT7CoWfAiFDO4pKvm/ZWAb5x0ZDUQe5XbtihbEMab6ILsIQqn\r\nSDI3lEqb8MMmDYtFL1JpRNTC8VnRZrHB0Z6V7c1ctIFEpGjFAxyNjnex03b0\r\nMK90Xgm5FuISNpUBiM/lBklW+sQunjQfOlc7NOpgOYfKg/PoEKNaiZmGSNFa\r\nmbvoot1Egr0mijUTqqoKp+H3EebFHfpBfJ6KyoQfW6tLwH1anp15EmYb2Drf\r\n+rXvfX84HEOs5UHYvA941C0o3NP/0rXtVMI=\r\n=/ad5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702100656_1656756430603_0.3991017860520947"},"_hasShrinkwrap":false},"0.0.0-canary-20220702123228":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702123228","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702123228","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702123228","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702123228","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-Tqz61p9wTUMmVGl+wDQFvjfIWKJO+BLT8Twg3w9AQeQMtHw3anZrTEudVawlhAsWnD6Cy6UGPRMoDdVRO9G5Gw==","shasum":"49c42efd81fefbca0da977ee376f7b69cfa3b772","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702123228.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBwVfahSDEh94E9S97XQUuAG4VveigxtIsSvtPMpcx2bAiEAy4iQWRITqBNJlkudqq+VJV5huByHiH6U/PJc4kCI2Qw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwDrqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJKg//VuN35BJgRwCv+vumaYe4LQd2DgnSpBnsCwI092uaDox95qNe\r\nsQSUlqyhzyj7ozLWa4sTpy2Ia3O+0/xloPD6uHEhxrPpNv8pSnraCjQyy8K6\r\n97uC1YzE/1TeaE61H2QIIZSOMy0ikGAyXWGhaJUQp0ANvVXvqPpD17RHt5Jz\r\nX6fxcB/GK+s7jRteF0tFAhY7qQKCPGly7Ljh5ojrgBBe6n0VFHCeuk/M82kz\r\noG6N9NH5dPSYJXUyGtIrgjioTZhrQA/2Gp2BeQJvdybtLPYAOml+4tXsY7uY\r\n8+MQdB/IvOFtQgH2cMIrMxirzpeI4iKLRFxOQt/CrCD20UDNvo5I7M8C60pc\r\n2sE491vd4pi1LHO8DLLrO5VUI8yihPnzkrijffUCawqwJeF7ZI+UQyPeDKzI\r\nBy2P3HnvqlYnpFofNQQx8zGpkIy9wF6FAaxYR9vtSdV3qWULJH8Om12mRYvx\r\n0xUhBun0bHiYqndhGVVsS5uMYzOaq8AJv5cHdkVJUbdT/OPdL9qvT88oa0Uj\r\nnIJcc3zsRGVAhFMXlHoZhqxfHlOQL70qjndfDaQcj2L1kPOkLUF4bLqxEytY\r\njr4wBToh2cnp4X82RWYE5klv6gOvBSs7DCNr32eRXWUnySn6ZCIf/BBg61Tv\r\nAInaQQOPGrl/j3aSf/Ba7k8RAgjIA1ZId5I=\r\n=sPjZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702123228_1656765162515_0.3162613709676614"},"_hasShrinkwrap":false},"0.0.0-canary-20220702141104":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702141104","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702141104","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702141104","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702141104","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-4JdfLC4zy4dqy+6DVUTBuV5aBodZFC3U347gk2y0T6529+zJ5h02VjfLwVKkf6sTpAfBS6+Ft/d3AS2XhuIJ8Q==","shasum":"0f84f597a0fae8c171d853d84daf1e672e6dbf52","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702141104.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/pdQLVyphSR1LA+rDILt6Wv3zPOxgBtu+XikdYnVK6AiEAiyjwk8dcxMueK/Fd6gOnQLGvyffmVYb6L3Y3Vdnk8rY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwFIGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowFRAAnzCL88jn8CV+sZbhfGLLM+Y+mhMnaiNhps+Pa07RQJ9fgYgx\r\nBH/GYs7fuPbKOpLIQu9SLB0nucWDW/2gfAsh9JM3NiBwdO0qc0JMfl8YVfZZ\r\n5dmPI8Qg7O6wYcW1oiHZa+pi+NvfUC1jvwEF+UNaHjON4YM6xL2qc0+iWZBz\r\nAtxx2c6O4yLC66nAt+ytN4DsgYKnT7+B0xQ0TeW8RGaxOEKcsvg17lelkDUW\r\n7G0gE4jUR3X6jokq/HrR4cCIOOL/OWY60M1J97q+Age4WxAteLm9P8+N5mwr\r\nTikiEgiV0XjcUsLRZdZcD+YyUukZWrRVXwSG/oo4qx1r5XN7IQAuWKFONhiY\r\nZ9piTMWQ1zI5r2y6lgfgqRO365fCB2ixIjEfPIof8j3nVOPHS+1mOnLvdSU/\r\nH6E6VtxVHe+jirooBmdSG2zhAKVEV2FConaUFJTwi1eKAjRQaJY3oZAu9kKs\r\nQZRKCkrecO03HSjsWZFgwk+LzD5quZCVi2WWExZ9JTD3/itJX8cHY2T8wH1x\r\n47tQXI1uXgVQ8Ov2moSrTkjlgSSYDETBD8xdWy8unQPNnWELfAPrjgUWAYgG\r\nHpnQP0ZwmZ+BHVvhaEo8Uxb9/xt6iHqafJNrPFT68N8b9x+IWMhYzQRfXb4f\r\nWGeTA3qmEvK4QJ1fiHntFoyAStuGi2Acd/8=\r\n=44Tn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702141104_1656771077949_0.3587616195821399"},"_hasShrinkwrap":false},"0.0.0-canary-20220702143444":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702143444","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702143444","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702143444","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702143444","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-fhJNeYxO927FLGH2aVp6PdlRup0PgAI6/RYmTcgVfoQzRY3M6paBZUf1tVUaAnJ9m0KxrrM0kKEtx/era6+zWA==","shasum":"ff74091d1e76b9eb5487b54d1b3b68c47e49fd67","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702143444.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFV0FIXS/5qVujr8IOW8grvKcgTUmN7R8sk2Z2atBOFkAiAyMGBADwaALPupxQP2TFTj3RcDfZrxxVSmX0gpNm5zMw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwFeTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2qw/9HfUljzWflLDmfKahOnXK4qBlRAtN0nSqsieCIs/3xQmZ7kyO\r\nXRKnmWOpqpts+U5POauzCkltAp4ZLaQ753ZApG1cRM1lHMPUC9LpI0+7amDc\r\nwyC3z2/6BuxIj2FCcXa6mRemgZcziMyfwaGwTMnWD1T9itHBLC0XYtm7dAzS\r\nSnzU+flueRDtd9+cY1Nv6LNeKIoKNCet1fA4x6TimPE3t4RQa+WD36Zpogyx\r\nj5jeI57DSTClQ9rt/JZibz09oZ+8ZhGKcUHq6hsXb8Qo1TQUvowHVdT0zZbi\r\nCP3t0MAH8N+8Ic3JPsYNHOhCLgmkMpqZW1uVYXgZ9k1OWXTXagWU59JiW7km\r\n/tUmdv7k1cIZh4EmXPrzg4pmt5VXmg/DG0CDoCGVHLREbUjTJXXAkXkSBQRS\r\nGoV58kUreEN4prv7NO5TNKxmMsCKHb5YEs5xbZVFmVOZuNQAK/SfgUatPXcA\r\ns3wgJgPC5AOOqUCGHS1bH6P20+lUC0G2EEiD5tMd2KSaFX2lnANFbB14VLuV\r\nnmmDRQrTDf3pNZd0ygqaK3mTc6k/vAyJkxb/MM3RQCLMv9rXsBne12EsDD1w\r\nb5LsT5VK+DatCNkxN7TwJ8IdY2odT2cbCrLIMRI+/2myANNjy1OPXp6pKB+5\r\ncIyXGRxMN67HMeIz/ITsNc4B6ikAqfiBFC4=\r\n=lsdQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702143444_1656772498889_0.7525993377035962"},"_hasShrinkwrap":false},"0.0.0-canary-20220702164441":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702164441","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702164441","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702164441","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702164441","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-4Hy64TiztpgGtupghnnLv6XFI0UXdhhnG+ICLacaK3t8QPv7BTSVvLEbGqtT6juvAySIQgpgR3LpNLWSt+nHbg==","shasum":"7688652bf5c84ee0671576ee89af5ce700e5c4a6","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702164441.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8sJLQ8mh/8SHE6ygAckP21dUEHUYYseesEvRiEOI1hgIhAIouNX0QHMHeCjxUJjV5g8UsexSjv/6ktPRrcJ92iodq"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwHYJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqevg/9FOPum7WpA6XJVzjZajuNb5NIuYnSLt8wfZx9vNWa5AtU1PTk\r\n0Y3LiA0y5gtw8Uqw1G4R6FSAQpEDwj3yGrJiakIALZ1ZKEgnTzHRhhTQknxk\r\nzg2jEbmNiZm1Yv4Cie/ZER5YbcOFt5cQcdzY9Pe+2VrG3gn48kFCFTWpTFjK\r\n2tqTE651h0H3NMUbQdz5jXP1wz4lzaaAMfayhwRK3VzQJbONZOn0la87aBoA\r\nH4oyUeAm3bTbzjn8dUEHh3KirWTewsXjsUPk3svQCuRrxfgAeRAf8NMz97SN\r\nbw3ZuSwdXZI7bR7UKSIMugvG6B8auo4GSZijd+oqVGV1lrfet9V+2755OIy3\r\ncNryBmnYjkBNSk7iGrobkVbIDZ5bemG0Jx/tg/uCyIu1pQfxYcYFPVE4y5UE\r\nuLsjeJSDTFT12vmSfCrnV3DBc8PHeMndSIFXpxnND8MyDJa2Zhow+xpgRPip\r\nUmkav0rGCjXr+z8xB8nqBXmBC2uEk/oeHn3W5u3auaoNftrTb5FD3jZDZBhx\r\nBa80H2qmXPANCj0O73uDuCo4+NpvZJh8CqLJJNlb/gXzqV8QhbouMMhl1hrK\r\nM78Zj+q+rplB0pLkyiO2sJDQW83ZuVAtQCDYRTcnvcwJ71HcZPD0k3KgawUT\r\n1ArMi50+pz4AaKlL5r0kiu0lOLfRzP2WP8s=\r\n=rLlq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702164441_1656780297583_0.3719217730164861"},"_hasShrinkwrap":false},"0.0.0-canary-20220702164632":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702164632","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702164632","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702164632","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702164632","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-U5pq69u8qjJ8YlOjdSqCpjn6iZZsNmruOIzkb5yG63+xPIbObLL/knMm7jiiNoccwmYbWDYhkMvu1jPu3NPVWg==","shasum":"d9a9a4ff2dd75e142d67267e43f278f36e95e7f1","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702164632.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2TrnkWl7N7RXQKgidDEDAF8EDFp4ThioeCun13pRJCgIgVTxvuAyIxB6eG8yqx+A0IY4QABPDWWODPyz7CEdDHLg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwHZ5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoebQ/+PMcP5WVAaAnq6ZLDUMyTSSmzRy6ETMrp77p8OPFa2IwK70bF\r\neK1Ri1hOSZNIZWh59urwE2FrqDWN2id62En25eBxp92258IxUIdvm8xTfyCa\r\nzEa2TsyLJVPEkXc0uHwiyR35WAcACWUsBWFRz1/FxNVJ1ztBEQb5xbA8175O\r\nUSQcT0FMzhr6PdtfkAOrw42QRmS7nNqC9KmleL/C7sGkvxJBWAzVtvoujXHj\r\nsx4wRF17IV4BStYWZlbOz9UT0ipyFxklNdIEP2Sx1osAMMtVGrk2FqjERq7J\r\n2aQiaCiNPnWJ6oeXRJBJPcnh9NGFKIhohwRYuP88oUM0tefouCTOWjD6W/85\r\nHTLI+ufGRAQHYvi3tYb4c+IfmRwztsIz0nMq4owf+VemS7vmYF+wjbjY5Ama\r\nSFhswnMxfWySyLhp7BPTHcMDZpU/IKzfgFNM/6w+k6P9gt5HHYnsWZ//G78X\r\n5CHQhDls6xpyKV3I/MI7l15/dpcAfuqA9x+k4PopkU+pHgKYu7lfOMhPMamk\r\nSjBYs9i+wlYM9AIWg+pD5CoKI5yiQgxB57YBnqsmfUJSQ2X5Cyu5n/JHIEuB\r\nRA4X6WBnsVTuk7GjzU+ZPRGoRTX/LnPmTgh9eBrPbLaVq1H27lJj9JJ385Pe\r\nq6WSULlsAPnO4vHjdh06SiQP9GmDzgM50uA=\r\n=vrAd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702164632_1656780409416_0.20059028407235702"},"_hasShrinkwrap":false},"0.0.0-canary-20220702171044":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702171044","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702171044","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702171044","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702171044","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-Q1vJfzgQfFeBx1WrqY1gtWkd5gGbkp30qe0j9MDVQgZ0fayFjbui9D3eHVTqACUGoob1MQGmDUwikhso5ZpTWg==","shasum":"edc338008e42186450b7c2e67277ec7735da2958","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702171044.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdCweYec2TdaEon8+ILX46JjsuD4nQvfS2fIvQ2Rj2eAIgeL9Z38X8mC9Wqze/cFNgDBUUannaFJgZYwpCAefNA8E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwHwkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrysxAAjp5qhNmEcTorwPg5A4qWOei819pW0wrkIlUVUSjhXcDYWfn2\r\nNzeOU1Y9qtjzzg7OZsvhNUunttXezAojXDKnPqhQERF+rDeefYhOFQ6l7LTC\r\n5tZSVQKogeYwN6mx7JJ08DsW7OgRv+udwrj2VaCCeom3O57ga3BBCV1cMPAG\r\nXtNAJCtcXvDN7yWvMykHQDG00F8KbZaUg58aXlGxbdH8cL4ToNmVyltmcpJ1\r\nxF1LI5AXhR00NKVuNFG2K+ZYaeh4aFvdoW8dzApufJsYUTvuEsibPb/AN5oz\r\ndUwrBpUD5me8C8t49IuL64RAYE2OktLuquS+eQsFzdsbc1339rbLyQDtslTM\r\nfcmsWIcPq1mh3LXvyq/dokACUNpNqBWnZkuna54k8QTL4hHurlHt2RuWYrcn\r\nT8wcDN9HBYF61aTGiLsvkYJaYVJSw41JszVBL8/mJUnVF4p47ZGLGZPCSHM3\r\n/fXHkL7rpOb+ezeTllpRiGgtmQo/CwW8DGptuvvcJKMuG4QezC23mTJOeeu8\r\nb9ELBUjbDbFsUFgSQSp05kHm2uc49JFNlvP0QT0L4PVnLFQomOZZ4KokON70\r\nV9EvKOqJtt/Mn8NmS9j90loqxpbKwe6R1/gPPE6u4iH4k1H5KuE1P+85Vh2P\r\nKu/7nfvY1TC8sr3l8XCyhCFd+EXhURiegxY=\r\n=1a7Z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702171044_1656781860137_0.11133307957780425"},"_hasShrinkwrap":false},"0.0.0-canary-20220702193829":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702193829","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702193829","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702193829","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702193829","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-k+8sr+2JSE5toetiotcnucPdEMetr8UU7jb6Q6NBfYgJ8lFVYmMGBHdg8RBTM//HJrwoGh4DIswarPeuR7+GMg==","shasum":"b8a4e9c60716858e0afba4e86512f7cf5c64a631","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702193829.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAf2DSE/HmgJSdx0dEghtdyU0jC0gveAj4OYr4cRdT4AIhAN0fnhFAPGWRKPwaaPmWG4nSo5SQGcApBPR+UKxq6Zt0"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwJ7EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBsQ/+J03TSTPXnsxMrDZbhKKyV8sPOSDHU0Udq8uh4HwyBlSIVs+5\r\nK7jqwNy46y0bIX2aVltynoWfylA3Y2cPEErH6o8wntM/jp/BV0coSTWqv2kb\r\nwvftsZu81Ljr9f77FIVWuFwGq3JrfYMPKVwrvNzmlIghRj1CEoaIn9xm+PXj\r\nbLg8cCvS/NUDw28SHoLXeWMF3Az8P0p+4Zp27wp6PkrgBoGSilu0TZw+AUTB\r\nxeR179Wn66z2nJ8UoB9OamEjuPpMXQzXIF70YhSMtD4IxwDOKNNXLsZgRrGL\r\n1qTz+31cqFPmDuEx9fIgzaK3TEj4c4kyt2NT7qnmubaW3/C4rCqbiGq6ii9n\r\nXrHaknFbnoTIyQlGLSp7TPGZhqQXIoPj3nQ3Vbv0sYmLrDodrme7ahId+XqJ\r\ntLHsntPk23a2uwQprq2E40H2bFEu9/G8GHDt+8FAUbQpgU5AusRuFwDnf2Fc\r\nIRAqu/46kHTdMExbycXI2pjPkg7XHATeigsrVhSEXGkrd0kfDfdrfD8DehfE\r\nxz2W3MdBmkRA7KRh0uyqzhY9gocv3TtdRVZgBB/jpQgGz/3fEZyIbMU9nfM7\r\nt6U14T3qiuKyS4wykt7YC1+zI4c91H4fF8aBy1o+aJhe2dRmQ71MdQEcMxXY\r\n+6bvMOhp6AKS6PgBnNfeyZ8CtpVSKKFvSiI=\r\n=6tTO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702193829_1656790724721_0.8641311724541809"},"_hasShrinkwrap":false},"0.0.0-canary-20220702203638":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702203638","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702203638","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702203638","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702203638","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-JZ7ppVtx/jYroC82qZ+NtJfT1d4osP4MQzW56opn1I6cF84C/XEZ2fH7U1pSv+7oSo1CLO24gVVs2ol0MKJUtw==","shasum":"771d555c7c191fac8cce7f65a70f10f067b9d04a","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702203638.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDROzCjxYAHO2Q60kteVzsX1aqOgIENWm257G/8y+hXPAIhANClXcn+w/4/u70uITfWc8+rkA1f1koe8aw8Nx+GNEZW"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwKxmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAPA//eNmYFP9y6H5eO/Go2qeEctVtqA879lCHBUuePIZh5zunbkiL\r\nbLJu7NTZ6yZWR1eEsc0mjlZ3NWlFZAC4I12SprksFCDegb8nlxGDTTBODcoG\r\nJmHxNHfwwgP3+mFAb9HWYd5qlN7DeKWliN8zRGiGj7ZqjAZkydiNb8LT1p7v\r\nkdEUz3O00gYFTZ+LGx0Ds95qk2EagJDCNo50cTBg3qm/8aDmdCax5p+8UnjE\r\nFpQHr23XcL7MDM+2AHXWqnG8s2Su6RI3rASHmUyofu0/CQo7CdL2K0DJTDb9\r\n1Tidn7Do5yUgXWPtqtZctkrsnGp7X8UIohJTNPc7f7jcNdr/dFD3/f92mtUM\r\nBZZmVYhQTQ8tLU4r7W0QswrogHZi6jfYZtICa9p2mUrVoOjJDhm4pg5KcyNJ\r\nfFcS4s0kAzR4PDya3Z1Lo02yIDLxs3eXIbs/oUMIw/azaakuL3zpri1CxJ5n\r\nC8lm9KG7Q9l+ottcAVQrIYAIKnNv++HWkKriBn7MwxHTV/kp9v8pddyZIY9E\r\nN6sH5YtfMQyHZRyzlpPEdjwJYnP8ik9i1UP4AgIFON8/mf2GxwZ2z6zC2oT1\r\ny7o+LLD5ypuRAlq9ZMIWiqeEWC6LzJyIi5svxU+AuFroVdR+CIpVyEeYHPaI\r\nrqkshdf/js+F/XcFEAuV/Z7QF7yLtJWEnBE=\r\n=SFy0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702203638_1656794213959_0.9440017861861418"},"_hasShrinkwrap":false},"0.0.0-canary-20220702203731":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702203731","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702203731","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702203731","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702203731","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-J1K+y5AvUpi76EoMrqEqMkUi/Oo4iFr7fTpaC/guP0dk1qNxGoMq1MoWAZdKh/FdHJ7MsvnAiawPN8RDhLg3AQ==","shasum":"f252bb914b7fd41214ac9c4ee96ac93bd350d89f","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702203731.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwIifePBfTuEPX1jedGG436Vl5MM5KB13NHvs4FSY7SwIgFUglEVQU2brQivDyyXLHHPww/h9qyTdIPehZALb+DaM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwKyaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGXBAAhyGCz3CfGN5x10Hmow5frD8T7N4MUM5vDOJZ9v+j7RzDKU25\r\nVDAl/A9Hi8si2FMAtTzI92uRZEhuqFscgmEh8OARaZl6XYRpW4XVia5d5VdX\r\nPejrouW/aDXRi2joca3WVLbFeNoK2VQ0r82EcxTS3qDrrub43ZoMJsV3+H5D\r\nhoUlyEpNaOXex8tKf7RViA0RT8sIeP92xlDFxPGHlz3XtJ+iyQLKnQMRJ5LQ\r\nUbheNDYeVMr8WBu8JH2S8TEzQY12O9CQkLWdzxOyjnPAsvQqVyH9Ja5i4nE+\r\nV1zPqAxf7yF7G//R8eaaUmpT1vo0cqrQiS51XQ4g5LRLu7Um7HEiIQjFaFLs\r\nL83RayhG2gMG3jGN4jalELJdTn6IMMWyDLyA2T2xNMJ719Do0jN7QywytRhU\r\nZHfF6Ob3Q+MaN2pAIIU4qSyjB+7yeBLI3IX36LrUdwepRJHV2BdJz34cnfU1\r\nBE4LNkoCSIvFKlMxrZONcINoKdjzFASwh3gD9tgk0q00o4I6msr7q08l6m8g\r\nIJFEORhHuVXAz7lHOOUI64a9M7bi2ELvkF3R8XfO0EJey/MvfdQXRsihZ6jC\r\nwgCELnQ7lu/Y+egg2wXvxDzJe/Eg29zMVkw7IJAph7iG7YvbHuwKP62l58Lr\r\ndohFoPiBDyUuumxw7wuMqEkNzlLZG3i6L6o=\r\n=cQjA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702203731_1656794265955_0.6228789744533989"},"_hasShrinkwrap":false},"0.0.0-canary-20220702203922":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702203922","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702203922","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702203922","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702203922","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-s79tUcirnyo0xC3reA0v2mrJL5PS6sRK9n76oiyvdCb+c/RhFasEFMhLjkJtYp2/num4uAM9NHIHxD+HAxZufQ==","shasum":"8495dc7335869bc8db15658b5c046e24f440df88","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702203922.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkbHvZcJjKK11oUKnmgSLN+ZrKLjhinwbnfWqJNMruFgIgZ0GUQ+iBqo88UKmqWP1WSyaowVT0Pf7xcd5UYteoTUQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwK0KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpV5g/+J52yavUrb+14btNOA9cgutNzJi588uDG1jn7/XtGx9GRVgTR\r\nmWvI2FYlIGO3V82vLGd+hNzZiRqb79B9pHSIDBxM9V1jQHmcnd/ejybQh2g8\r\nCt2n53ymcrXi1fp/hvCdZRVrNym9XSUYynztDNLvcAU2i8jc6f/NtIj2zapN\r\ncbt16gG9gCoPxXLYGqQ9Tqi5x4bfAb//nhXCmatSUFKk51yDcDe6KcV9n2/b\r\n6aqA5P6wed2eEIZPhvIjo54IeKAzezTCzrPNFsore8fyzTfZe4MBIrOJQ+vn\r\nb5wJUJlXqlbFQ9EIKU3tn5duWqhxSugR+rJ10YIcxysP+cXcuFWWd8pwzPYJ\r\n3Ga3p2z9msNwxTDmgpB0FyjMte9cRUIOH80jYUIi5gClIU3jyjIFUCo5ldrf\r\nox0zTbgCiGYXx3ZZX3CdWyc8vRFCcuOkh+nLRGGg0oNd/gSTFL9WYgfDKSPM\r\n//qYW4fFvTlPWYQEBgJL6PDByOQ1S/MG/M7jOM4dFbcavqodTJviofgpLYFV\r\n0NbR59Y6QxlQrXwL14zv87ocTE87QfDmp6lzYP0tdGtS8NYciTVI9vI952lX\r\nXOXN3PtaO7WnYDGD4Mq2pA8hSwtzE9qC5Fx36tBAUbjMnGIb5MkJjHl5UPG7\r\nRYHpb1LVyYdhX0cWtRmaVsZ+6Ued24Qzqkc=\r\n=r2ri\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702203922_1656794378641_0.15840696298235524"},"_hasShrinkwrap":false},"0.0.0-canary-20220702205531":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702205531","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702205531","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702205531","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702205531","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-9AzoAu5ciWVj/4A4uVXibVePI4SM+r3cyqe2StMX6ZCpmVks62JZ7oHX2ctonGSmSc+tsYkHUR/D7XonubA5Fw==","shasum":"3877acbfdca36aadd1d51d0480b4fdcd241ebb0e","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702205531.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7TRCfYab1nfAbJD82IOlZDHTq344oKvHWZpD7ASV7JwIgYJ1xN8dZxsSlY1FquAc21InE9i6RFDcmTxV7VpQGwD8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwLDSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqSRAAiLXISrr8s333yced8QD9dwdTWA+gm0c3DFI+BwNwf0T9TfBC\r\nojK35U+5aD1BeUa4uQAyg+u2S2+yZ+11ZdFgEOb8J/BBY8SHRv29T/pARju5\r\nmopmra4+vJL9H9IyBXwgggY3dLczImIjCxISQfGyTgk2AnDPTMcBpJ4HKpU6\r\nSJTFXMniQmYnUPWBOFDAuRXwFYLyguPIOnDtPn+rsuV4SNUQblv9qBWUA77k\r\nAvZBaF8anXK3iefo3jsmZZXZgrCBvv3WQAcMSk8Hw7Dloo+EhBXaddyWoglI\r\nro75eX8CzfTeGZUIwzLO/4xFqvqVlOEbeAS03zlI8RcExaRhJ12Rj+1TX1Vo\r\nExKcuFVqXBARSX2XFLuIBmTO9TC2upA1Y7O7OjGOXQjv8RBrufOfPRlooHVk\r\nD2LFoUu2rK7z4UqBv+QES1qFT06vED6J/l7lFd6uu8CZMMAZcD6NMf0D9b2C\r\n4mFjX4p9EzmvvwQUcVVJ3s5G2cP2WP1mDD85cGvLYCFoBEI5N60ElSgQR0B8\r\n7WPqF7RH/JAj64AbTg7AJCOYGfj/q6egyog92xzthPBwfSUSpn1JMGelQAr7\r\nBov3AzaDw7RvDVbvRqWjYGTiDk4ECSyXv//Ug+wWcR35NjYASLuIcPGW3ag0\r\nQwpKNtHkZTpw5dXVCKaiIK8f5fLeTYFw+VY=\r\n=bCMA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702205531_1656795346344_0.1331281321359583"},"_hasShrinkwrap":false},"0.0.0-canary-20220702210629":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702210629","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702210629","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702210629","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702210629","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-ejKtcIhC4coxy1jlQ4UA59N98NWkmpAkwh/oXsH3+fThRtB+lja/7JbmsHAZt/j/GudutRPGAXZJcKGurImtwA==","shasum":"ce896ad4f3fa7c4005813b1d72b7649107b56439","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702210629.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDN9FIR6Gnufqe9dPEtPi4a8mXfwyzPinLDFobAoYfCXwIgIyU5cr8nUvCBvt0/zEyzfu7C/HumZEMiOIu/I1PbKxU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwLNlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYhA/+Ip4qvu+pm5pUpjDCxUa2cQM6Tl+pHI83m+aJDUmJ6oNmCNAE\r\nXJ7kK7Y/Oljeln6BMDFaEwGZ8nrUFBzEmBWozbBPSf5uvjxldZiUG/HArM49\r\nSYmaQLnUtFnyLPY0zPhniB9ad9+5B3N2QLexUuJtPR0nl+2U++x6OE/ZLM0k\r\n8azhCbRSwO2T2DUwOLcYN9CCoM3hBTwtjLdTRp8CZFpUAYBaBzmdB0hyNoyd\r\nRyAKQ6xPNfyPM4Q7aMfzcYFw8thZ/l902EVyH5qxg7n6wZ4E/6luHQiEn44C\r\n7FU3z1zihSid2K1b0MOZ/BociwOYl1VruT+A0E2gDKDcgYyZW6qZAoCv0c0i\r\nZsUmLt+M1wa8Xw+S/N9ms1A7TX2wM17I+gSJlxeZ+dz9jqsO2Poh2Awsf065\r\n5bXpuonuhxgPiMbRab0EoHMEfXXmOq3sbV1Rf7Taqmayl1zYewh6RIidXovZ\r\n7EEhJwBvOOffIKgKohTur/tEF2Nupa9GndmIxWuZlHIAwoGkbQ8w7glXo4eW\r\nUKKxnlaA3u9uFy37L8SzvAoPgl3VUiJ8ubrktghLcC1H3PQDtdxFhwYktLV0\r\nwaS4q+/bNwiF7MAD3tP+mIVuP0i8KF77jUclLGlar42+CQxvKEvaQ9TUtDti\r\n/Fs8ig+QZG6OfM7q9cGRS027tuU4VmKJ3Ao=\r\n=/RbM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702210629_1656796005110_0.27572657604820594"},"_hasShrinkwrap":false},"0.0.0-canary-20220702210731":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702210731","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702210731","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702210731","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702210731","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-VtZvlJXViF8dg9P5TWx1t+/1JDstl6Q96s0YB47/OfTQwjUzvAC7MKYpv0bXv9RvWSXq2kVrxhg6E+u+qBaPsA==","shasum":"6dcff5b853693fa9d67f630061bef2336716e1a8","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702210731.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDYGQ7K9hJyt6/n9a43K2pGwOW/yT8INe9bKGGHoqCQ3AiBKgVcYrhXODqIhJpzvngSpQp6YWhYbYKqo7UQ1zv0kmQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwLOjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKGA/7BxRkw+lL5BOr/I7QXv3xMyxIl60tuLOd1OeP5HEQJBQqpI8a\r\n0+0Ov25zz38CvS79p/bxITAjmSp5pM15502TlcOvht3e1qyqUGFSysFsnSGP\r\nMiUE2mTPXIy8zxZzZY+9yXJquB3uKAtc9+Hq5LQVlL0mYzpW0ym0nQ5pQKzN\r\n8IHeZ0/DIEveFjNr1IRVBfOafdSQsLbFx9u8tn2Y9lVx9YvmnF8qNNxeaeIN\r\n0GeZ8w18OULzQ8UUhOfeCUGcUkD4QbjFh1Ela6AZCSAkA+csgW/xkhkVT6VD\r\nblqOWoETVbBEpy4n6QndxwBRDRkEBvtfBgGovq4qz0eO5EucBGWr9ngi/eHX\r\nHr8cdub+b+AE8m3HtS25pIsptTQP3M9J6/DkhMJQzZb66WnE2Ud/jKUC1xrB\r\nxXxFLO8F8exeVidFFwFaOkQ/LDgbqY8frZuNyn9sSOUSqGc8UBMco9naRsHL\r\nOJ00/uYHgFFDk1bD/8N5L5tlA10AMdg9JVtuFKqCxjMspmMfbKJyJ2oD3ymy\r\nWuZ3TJJGSGkXPa9VqO7IVCHNM6YVKse9aFFqh9ddA7uz3BGSZKKi6Q49xfLf\r\njUEgdRRoQVIkt9Ad6och3Ocx6+kyF3gKjf/GH7ao3h4SKuZk2gGtLmnt+EkR\r\nqEuIO4Z4QyZC9XgULp1x0/7JLod3VnrMeVk=\r\n=9RlK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702210731_1656796067386_0.44966301612483695"},"_hasShrinkwrap":false},"0.0.0-canary-20220702211845":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702211845","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702211845","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702211845","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702211845","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-BIldMyVquR4G9lCZAVsiOHJJNOFI/GC+f6AXr05qqHvHiV2Brbffuar4A+N07E1Q3MZDs8BPpM17Y9/yC9eQzg==","shasum":"c515869bd95e4fb6027d71e08833e193fe2d9440","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702211845.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCiCcqpuPIdvkDYhBVZ1xvk8FTIAy6nKkm2lWbk6NEIgIgYeHY8K5iDyFTteueN2XI021ATQywn4yOCvDIylwnA38="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwLZEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBOBAAiwjZlr3EnjKYX87EXxQJbJUWaMHoQ79deKf5b+Jyz3fsnrDC\r\nwQeAI2TGfDmZ9DLsX4YfMYHOjE8kFvtuvg3O5/WyEZB2qJkt/r8CRcamL6QV\r\nRpNEYbmfXHajqzg4ORiNav9qguRJ+Td8UOw0NNNdFThNasvr+eY+hfi7gZ2/\r\nqjXJAulBWPJOZDpK3Ej5iqDTSJGP0kqzHR3mNxJ5w6TtyLJzhjoDieopAqH0\r\ndF1rV9c3aG8s3fPqn/oWhwHtiuiWa4VZLiHEs3j3XuqqdP092Bxl1YfwC6nA\r\nnHfNGr+MScw72/CAzI2ofcvw0TEvgScMVyRscUrO/9jcoZ9CENd0kbCH2ipf\r\nnYQt/gQKMJwQO3epjl81RSsmJexguhcm1DJ45gqhVpMsgGDBW9TcxDuljI2g\r\nbGN/KQG3zUeKCCUOzh3dQB/GKGh64tGYdMMlsL1x1bbcROJF7oPSESFju5yo\r\nJFbsrSibSj7Uxnnov6R+QoV5gbioqE/b+I9CE+ZZ8XjnofduuovkvW6okwiY\r\nZwLXjUSVB/GcHIic8eqVp0/1Yb6mUTmilWqOHOtRJT+8mxYIrPDcEF9ATtkK\r\nWANrdzwkxR/Llkm3b3zA+kEkVLAu2T6lxAqIFv0+lEWI1zwx4RKT2BKRI7lT\r\ngtIFLtaVrXmNEPqm32NozUMpZmw1tEv9Ejw=\r\n=bUVk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702211845_1656796740519_0.5488058915504175"},"_hasShrinkwrap":false},"0.0.0-canary-20220702212433":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702212433","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702212433","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702212433","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702212433","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-A6BDZxLbXHX8xIa537lkMmjCtr5lXbA3z3hOvydC4UNFR6ABH3vOIDrjOFLY7NyD54Bv0jqdRa18mv0f5OW/XA==","shasum":"400fb7db6764f5b643a6d62d5abe3224c2ad4585","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702212433.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7j9coeerpu6K2IhcxZuf/AkeM9vVt/1gGyWRzQpWnrQIgCpuF0tISUdET9IhOTLHLoSt9+FqZM1eoF50MbUYN2FQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwLegACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpl9A//cy3SfGrmrAiFP2uwJ8M2d00kUPZZ0E0sDK/x4gRt/iOh5Vj/\r\nNPnWH/zLWMUVWioj1JoJPRErs540WRuUpaUBOY67lmDndFozvrbjxZwAStec\r\n+vz6erUKlLchKZLmZSknaMMmt+5fgT9ow1+rPIupOB/z4bRHrLIWT2Zvv3sZ\r\nzXQ8MdW1XnLxV5IhwYt6cT5BNbBZdRgPCPYtpGnt0CJRTkj8610hec21cfZn\r\nNp90SDEOheRJFhl03GXOg7MH3QB7JtT+Dke7Y1Bm8nbJu4o/9hHc6DnJxie7\r\nzeDZLXikTQ1+welqhRpg5M5LQB+szW5ztdmjf8CTSelqpxogxBOkehpumIdr\r\nLCrJu7p9B1HWkk+g1m3ebuPP8qNNTUoN2c+7OzbzZu7eTaK7kzvdEje+5Fx6\r\nf4aKUWnGSl+AgkO2SIYr80OKxtN+Dj7PzYRoqymv7ajLN7fPmnhGG4NDkF3K\r\nZVPWciBibmC2p45PbVNYmIyjGsHRi5q2vLD4IxDV7vTTX3ydB1b3t69TUYlQ\r\nzj+SK2cqG6NLaM9jcO0RxzExMo15Abz6But6/XUFbq/q4ZyeDtT7Uo6G2J/Y\r\nNgfQ5cfXlX4RzoynmaaDnOEBj09ClI8zbRAHkaYmxIT+VeuKBe/k3P11Dg0N\r\n1ubvhYpZEEeINo4QMVTw4R/iLHJS3pyop/Q=\r\n=pseN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702212433_1656797088295_0.00897813798409608"},"_hasShrinkwrap":false},"0.0.0-canary-20220702215034":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702215034","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702215034","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702215034","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702215034","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-AxdC94RAisgya7LARRxbqiUXBeL8nbbhqVwclwWnpqoq3fcF32i8pvIzCb5kUTBXbY6SFutzjwGLrc8Pl+9IHw==","shasum":"d81b19ed262833810dac08472342c64d256bc94a","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702215034.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6Ql0i8f79ve34iTYgKeXd3dALFyOg4ILiktguXtFtgAIgPwEEMZfMEOOnUYBTOD44IPVTkigakxKfo+OYGnUSj3o="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwL28ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnlA/+MZ7Rlf+sSJ9xCNqw+da+cYwmLyeeSJTR9RgnMYI5Ryfe5S6R\r\nmwprf04P5n9b90xattBKnWSiU/Zs/HtT2DXp8S5Byu1YV32WHbSzUXgU8s0U\r\n7HxkE0L6UfrfFqRWAjMWADtEn8jAQd59L5Jqnt3VmyaKgc8Y3z3+v0yOUshc\r\nM7kB6M6v86TAUvNCHCwVeMQTuecHJFeFtvWrrowk0v8qkm7F0U3tMr+Nbz2k\r\nTpRkqSW2J2x4L5E54cSJqMPWBmP/RwGpq4ra+GV5g8d39HA4DhXoRkdAgoRJ\r\nRedAxGEFk9q3WrWDKOBrAy8c5YqbuuyS+mH7LPLYAJeaab3jvyqFj3lPbCxm\r\nXvT4VVpc29jc0EBeM7ojM13zuNq0nlMN78gwsYp9nsQq3LTBD3pHh4GR9jaW\r\nbFZcLaZeiLgxmuW6tyGhqQ/wN45zf0PdTX9hHtDiRrhkfZHhrxkamjAvffWA\r\nMYJCtF6js3QrmA5lP9bEOTxcaj2tXu0au6cBwQsEisvzESC1zOgSpmuScJ/X\r\nU8eYUsc+L+1RYB1K/egjRtdXsZ/slIs1BWCQ7N6/4+X6YVJY8BUoqZsiaSA1\r\nlOVFDmFTxTzNKSKZD1xmyjLuRV3aOorW4vw36PBAn8OmF7Uc6J/odDZlSTnN\r\nQ71lECUXn/xFS4lh4uiBktW1tUoxWFyGRsY=\r\n=qOuj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702215034_1656798652417_0.7811340950893553"},"_hasShrinkwrap":false},"0.0.0-canary-20220702215130":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220702215130","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220702215130","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220702215130","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220702215130","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-2b0Y61xMR9HUNeEmNHGQdQdR09tVKqwwG05eGP5peJZ3Kb/a/kodHcBaaz9UxxX/EVZr5cLJhHlU1ZhVuAPu2A==","shasum":"011b00d7b71e8ff11329a48c79927c514aadb53e","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220702215130.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGPD+l+4M+4tMzvzSYQEw604MCN/Tg1WyWtvPvlE8Z43AiAXJ9MDAqPln96hiEFwe8SGBLnatbud9n7KZ8YLEuk+sg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwL3xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoL9w//Ys4uua98QMVSPdlievXwmisLD/OpoaH4rKK/mBzlDuR7ZyhP\r\nLrjVnmxAZ1w+AZ6hKV7Ibav9hPoSuS7meCIW0yQclMJTUyz4CjBw6Ok9Juov\r\n4V3vaB0lTGDb1UDGe5GdRkv/lDd1IXNOeRXKyIhWQzEEQiAPVtgftg5CH4U4\r\nXDJBeDkTCMeLMfxAgW+5M0vfw0xYzkykw8TuzyjO3gFqxzaFNxkp0fBYQtxd\r\ncY63iKwCD4JCzl1Lfw1UjoCOnIcGpI9zX7/MXel4xNSip6F6g4BWjKcjqV7w\r\nrXl4XeaT1KwFo35mfF+DVy++LXqeCBJwze5y0hdjhbe8/T+Z4BSjg5c0HlmN\r\nXTAHmhE0ou5PPVe/lQfiHV/RV0KdvftJ1G9ExQ3+N9FifmB47GyWkUdupkyX\r\nGHeYOJgWYlFjV/ji9vMFD3yyyjJldKuGFVaX9fhx7A/8KEf6w+DfEF/4qeEL\r\nlLrRehu/DhbnTxMnU160Ok4a5pLpB0cUUub37UuL5+Fi3QhBoj96om4KjR+4\r\nbx1S6/G+Y/NMQbQnKWg0V/QPlPhwLPENPDUvHhph3YFnBnYUpyVrLfrNVoZf\r\nMBQq/dj/jGdd8Efact5rBlq97UhmpxonzNcmg18hXmw0vR44ATmXorEfiWHb\r\nMVZDW2nfF3A5GDJGJ0TJhFGwVfCfnlZ9RQ8=\r\n=ZMW4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220702215130_1656798705327_0.12590463080761505"},"_hasShrinkwrap":false},"0.0.0-canary-20220703053940":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220703053940","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220703053940","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220703053940","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220703053940","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-HmjISkQfoYh/Bwf0tg7cUCP/w/ogdFL8Juuie26WvmkBBg/I8Vw2x6BerR3B8Wqxmi7CeX8inL0xhOm0ZZf2hQ==","shasum":"0ebd6ed5d10710b0b5f179e9505bbe374c08e753","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220703053940.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHy2VCAoZUZttkueNp+wnE0BhlXmR9Vh9BeElWvqG7ksAiEAgIdHLferVsk/Psmij0jb2PwaHm8trdcm2T+lJ45u5V4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwSurACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqS1w//cfPjxwlJQ3CjSnKZWhcUfyb7nuOm5OMiFR/fU4zAcyyCdnrD\r\nMuOClw5eaSDNU95yIC0CEsNLETo5ULB13u60hccBf8B8KpGPK1MgOC5ZAlya\r\nhlwCUOa+XwTJdHQ33F6ehVuMR+ZNFV7Vm1b3YdvJSVtHlGzXTXuID0rvzm5J\r\nqEEDxXAHHshJx7C3NV2MXEtKCyALeNvjGPsmYKTIlUgjX/v4i9HB7yZ/A53/\r\npYwpML89msunKRxQ2v8hIKTzDRtxeQUCNEY3fhV1c2Ku29yjKfEzW4NPZqPY\r\n/0XFzFJSy2Pf5qiciAvtrHn2PFKbvtJitGw4OqSzuuq26LWURDTcmpKIIObj\r\nlp+U20Kx5p4FWN1ZiBba8tkQriETfHv/okEGTsSo+eWnDUDHLBo2XNzBZqgw\r\n/QqUhfFtGzcGISo2wErCSlXq1D38UkAbgLOOt76seT4H8Lg05eOY+0UfRsW7\r\nuiy/H7b15m+AjMJKJxv9TZDtFBCiKAjgvCdNX5OwJq4mUYlZRw7MvTc0/l5w\r\n64pJWn0l89ao9Tv17t/P3fgvmUPtItpwzGbSo1MbPPbyOjmSpgzG/Lm8Ikvu\r\nb+Csjj0Sp0vqo0ROUz2wRYJu+51DS3RFLjHLWcoJOBTcK6yw3XrKRSasA9Ky\r\n5RIlFOFk2gAdKW6SopA6MaLGq5rDMvTiFos=\r\n=Ke5g\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220703053940_1656826795491_0.30872069920882006"},"_hasShrinkwrap":false},"0.0.0-canary-20220703085141":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220703085141","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220703085141","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220703085141","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220703085141","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-Be24IlnOzQrTSorHfpg7I6g/U152jNgxKtfN7qTVtw9G2QhlZGocBGB3v5H/xBWvnM9/L6t7+p2v8OneTDYB2w==","shasum":"bb5140665aafdbb8f3ae8df429713bd54b1994a2","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220703085141.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHWAa50bkLu5yge9/89xbl2UfwyzR5r/HbkV9pZCq4yvAiEA/sUPcqDbXKB1Uh8AA0KILoLSIbEEC7RVTXNpNnkjMbQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwVisACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUzQ//WBUVkQc+BkgP5QXOoRK2XxZlloV1EGzY4nXnTw5/I/z8569Y\r\nHGEq9HgOp3nsFlGH6/CexDFc3EKUq0XMgy2yS+6IeRJ3ffE9/6j9t8F4JamP\r\nVK5RKQq7l1qwx9OtiO/wtFZExz5+P2jYqB+U+hoQ7PjBEg6zBUbreRLwPgAR\r\nOHlhsi1yV3skW2IZe7kJWGXihEKLB+jkyUir+EIC4L1a9FNtI7xlUm4btzih\r\nAXyNbotaCpRJW0XgTjoLP5bsbnohNEp6+FZEjPskUWtx3cLlKlNthhYeMwPW\r\nV4ukdDl6OkekP6HYRAF6wIxAM3yXoUCKp7IuxwapuLXswy6vpjbwB63E4QCM\r\nUC+kJhHWdZp8YNYQw02DMQT+ocEJhN9yz6gzZXIGwi0WWSXaSyhwZ9oLNUr/\r\nMoFCTvjrIm1ujK+qE4EEI8XaUaEIoEUQZQFoQ2fjpxu89FllOieHcZs76iyf\r\nYYvFvLG24GBof1/GwO/RLUtBtbCZlL8c0MqXQ2Nv6GM+trKo5etrti2KTqB1\r\n5dGEIWLTA/kGJaS1uZwFfiGV5bn4m2FvuViLIhEC3KJkJiqUNrnI0JNxeXC9\r\n947EUuXaRTtZ+ZFxP/hlYxxNdBz2PIuY88gXPzCi3cz8zs5p5l3eHzvA8L4P\r\nemVg98mby9w1Cu80Fo39Kle7VQuwqPm8aTU=\r\n=YvgH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220703085141_1656838316466_0.7408615482438916"},"_hasShrinkwrap":false},"0.0.0-canary-20220703102555":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220703102555","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220703102555","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220703102555","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220703102555","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-oDK9gJU9niUarfCjCI9KYFhyK0NQPYaKrFHwBlzRGtIHv3pNyT08Hvgr2pAo0A1rMOfdMMNzBkIe6AZlISfVNg==","shasum":"a4849d0d934f159cd602e3e3e6396310f645b7bd","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220703102555.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUr5zqocdjPzMvIQKVrqafRAnwufFmhCOfKqIfY1QJIgIhAKeJKFEkwF87Rg8iJG+dopb2tOD2xbnwBp7TaIAAZktK"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwW7DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrtfg/+MWDeOed/k6nS1MqG2w07bh18kBA8jbpijCbE5QEqll63lzXi\r\ntgyhLRGi5c58JGfh5lqS0FfW6at7bIO24gvg9gUaPD2iRkyh8JkrILC414hw\r\nSPTb+Yx/gSrGsSvfHsT8cGRmJIgfQeHvl1bWTeKTPHHtLhD7ipHKRZRs4d3E\r\nxahYQz+Cgqhpw3MCFlQLQN9gYzYW/4SwVepKS4I/ZEowPBfXoWUOs8fzTKRX\r\nSU+zeg32E1NAIX//aatbpeB42Mn5mKbC4t7UH8IZU+AyflnuqqskfXw3wc7Z\r\nEehZL2FpTKh/HMd++u3pfdFvRE7H6UhgUqz7kKGA6eRd7gjVCXvUMnArHEsj\r\ngZhdQxGVUdCGydjoSvRoBhzjYkyxhIbZcxd0HZJzshJn3vbu8e+limH9EZV2\r\ndHNiAdCgmn/BVlsY1Esy3BsOUJjyK9gfqZdDGEk9RIGRZ5f2ilEow0UiNcU9\r\n7ZDsPIYUVrwfW0VmWPWpPP+jnSNyWwHHQvVBLAJBsxogU98TB2aTb/L84o78\r\n5whOix1lVB/waQKUqDj731W0ZS51e89J/b0YXXPts5GXqTtZvenFAsg47+an\r\nKR000pJJ00+lDLnOIlwprYjLDQ+YUkrPmgo0zHnhKooWa46/bVfVAUkS3Rs3\r\nSIVAKX+j07D1Ftk5Kk12gQqiin1fU4O5gA4=\r\n=XR8e\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220703102555_1656843971576_0.2299985413812522"},"_hasShrinkwrap":false},"0.0.0-canary-20220703124304":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220703124304","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220703124304","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220703124304","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220703124304","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-TLpokaiiU8fn/nzbloR2KhTTdvOQNTzMB65KfDMsVSFLYFStT+pPs8SikCcUT/+4ECbJ7+1IehO5MZ9/K+RDCQ==","shasum":"553d043aa6375937f5a3971e430e69f2f03c77a7","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220703124304.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF1sSrrZMaDFbLkCXtDlPsTVqE2TffTubsThHrmo+z9CAiEA5vjcd6nbh31qliaIJvkrgCt5UDVzmdrbT2RSt/7MrTU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwY7pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzKg/9HOu8TBIeCVuGVfqmoiNSC3Xhg7XLUV+laGNVzQ9M6vUlBNo9\r\nueW544z2XAd6FqvjF32ePZQjr19Te73PM0yOz9BL7PRmOXTdiVrKqoCo+mxy\r\nkM3CJxCpCQ+V0W5ZWLxuDKT0o4G8ZXPWK0kSqU8vehM3U6C6tL1w0qmrzuwx\r\naw7hdVzMOI1cR4jG8pvfeqUGKvEd/9UpEYyC0y/WtisT4C6hBKTLW9MR3c4U\r\nOAc1W5FqWQoXk0sbGUtN2nRYhXOziDZv7HgXsMkKdcN+H+/09ohvvuiG056Q\r\nZcXcA7V6wZk+bkRQTY2/W2XEM7FOTRyFDpdI12aNZSFB1v/ej7BD/xy4PpIq\r\n/QwqEC4RkqdjH/A+1+e37OVRRmbWQm+uaTlAyoX7r0x3j6c6jXh7eCUQNTm4\r\nUPvIAxAM7RQWYoBDShkShLLBXEwlmk7N0SURiU9ZirCsd6GPPPWLteknmRSI\r\nb/SW9dUGY0KFo1wpAaewTdYtYA1Qg1j7BpzbWuowd3OfWB/B/dnzHrhw9msv\r\nbSr6YpcJa6msuFJCytBla/o/zTjJ0B3xpj6w+WdmhR2+EcLGTIWs2X99BCBG\r\neOZ9bZqlv2aaeAhQujZZ04S8GbvjBlyzzHvIrSg+pL0nYHjbqK+dmtNT068y\r\nrxEEPjSj5DffDL7k/o8k6G76qkfbjdsg2ME=\r\n=UhC3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220703124304_1656852200826_0.19369630514983305"},"_hasShrinkwrap":false},"0.0.0-canary-20220703124937":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220703124937","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220703124937","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220703124937","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220703124937","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-6f0plSXkuDEL8bZK0YuVnxmNIb7IpnUS6w4sKYRAaqmVx0xkeGXuqFk3hkUcdg6cP/4KqY7XgqbFXxjhOuZRog==","shasum":"75eaa87cdc395ac878da0c8240ab46097fbd1082","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220703124937.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5C/8ANo5pb1oOADu/KR8BUN4wV/C+gavGyMUtSA11GAIgYlU9N24RbJ2Lj33iupl8k/C0wsL5Pya/HznIl4J5tBM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwZB2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGJQ//cCjDYXx4IJLIovt2VB0a0vaWnheGx9v0SmRdDj8g56vSW5pl\r\nnP5eziDU5G28hu2L6e+hL5HYToT7+LQBm3JyBEeCZOxJYWyCluJIZJw+x3ju\r\nA4b5P5++mfss+dAkwY2X+1dv+LX/JgzURUoMRtiNmnwSvRAA3hhNj4Aj/RMB\r\nkr0G/UZ6Gosb5HphOUWSM88hDNdCum49J77LDQMpfom9IEUbH+VEeaPviKt/\r\nChgn9G2hVlLFgEsCqMS9V2Eb0+cOILS7Dt0EBA6kl4HM/e2BEZubwDS1UHwm\r\nJ8IM9Ul01AY2K56CWRk/a+VlBZUeAXLHEeuuV7aZbJ8A5fn+YCoPZ97cMnii\r\nC3fMqhQT4U1vHxXzE6yEpzXbHT+VfC3E9QfDjtyxnngvEF98PukamlCN0HAs\r\nBbXoMj94vgZ+9d6wz4N7dpgXJrQaPHvlhfbh6TVYl5HjgAxIf/lxVR2PI5X2\r\nJ2ozj8KVjaz6iRYCHhcVkNW2TRpo9HD7t2EW8lbXw4qpul5J8rrhbAdJm2R7\r\nsAjnDwIMYOf2SXLnpnrIV/dYQ/wFnrnYYjVNb97pcBrW3LbmWyZo5FYrYnPy\r\nwlYTLeF+tmDi+9nxYy2Ioahhe8dOPoihdcq5Fy7555WT4Z01UkaTfqQI4T7O\r\nM25Umud5au8Uyf3/WessrhDFq6J25g10T7s=\r\n=qEaw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220703124937_1656852598008_0.774260426379275"},"_hasShrinkwrap":false},"0.0.0-canary-20220703131923":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220703131923","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220703131923","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220703131923","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220703131923","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-SqajZfsjVey480ksrLAxi/oRl3/i0d7nz3ILW/yfbC7BWxjVqYAm3dQ0NMg7TCQkPK+Y3tV3Rum7KMn6NvttLw==","shasum":"72e871e03140a345c9cca166058357a12bfd5992","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220703131923.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC87xTc9Uw74y+5p9r+dDCDO1BtZIuX52JiSnPaX658oAiBHvRuWf3vYG21rAoNNlB57hpJy9YQGJQuxLgv1uraD0w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwZdtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJ+Q//f0s6G4pV8mFIhkaMGxdQ0EqRDVaaJNOOnov37G7uH8M78Xqv\r\nI09NDXb0mAe8CClQ/YycJXQ6IX2p0zyEQDu1qvWynw3pSFM0jew167iqypLq\r\nZlf/rpjYaFC8rckN8YfM9C52BMBW6QqMhKfYFcck+Nqek4OafgQtl/oWnPOk\r\nYuvE9kfDwDt3OexydIaE/lzQu939tFOLmrsqvZJ1Vo3ZrnIPsyBaxlSPr3IX\r\noKX11OuUZLeHyS6d474BYlcGPp2jiGj0RbzgeAV4KsimshRZTfd9wrBq8e3r\r\nnF29wDWpv1yIya7JX0ugCd+HGyq4Ab/LnVSyEn99CITLCj2r7hAzMZPr4YY8\r\ny2kEPslPDjN/p37Td2DRUAW9Cx08GTX1l7E9/ixoe2VRstzFNsmKs0xzOd1f\r\nOIjDxrhbt+GoOL7QatQlf3mG7qm9wXzA0WQcDxhYSrOuKX+QbFZWfA7QlGSq\r\nochM5fE313Wjea/aCadj33VpKOMVai14uoFSAYNxAvYgrTAgY/LTgZkWamem\r\nPoqrJ+wDl1xEKlBf9Bjo9shLKFd6GoovmrYKbH8dFM2mkqOkY9CwFkUbTO0R\r\n63GBWM6K3jPwvgL8xMoRaSoyfjVzzWSCgnItu/C3vnIrmjIiWoHyxz0UyIFl\r\nY9nRC2H/cjea7CmLjpbxvvrmrmW46ZvdUrM=\r\n=9zbg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220703131923_1656854381296_0.9220631449223469"},"_hasShrinkwrap":false},"0.0.0-canary-20220703134158":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220703134158","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220703134158","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220703134158","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220703134158","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-5XoSSNh42QEboCfrIzbAt7HrxXoUT3OZ5aZJi6rbsfyP3XN3zb/RHJfC5xqLkwEDYLusn4kK81qb+Ic6ns0YyQ==","shasum":"a9efe0dfada7149b71502f01a21d883a78461f1c","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220703134158.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZtYnmNFAhNFQQWfF1F9layNDik6yrjKloLP8C59muygIgb7zrZ2mu3o1iZ+0zJesYD/GaDKOXgSYo6E9LVYq9tKI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwZy0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobsQ//Zk8Yb6RiKhfvH0BOMJyBqw9H5aDSzk2C5Hu8IqylyMwrKoQL\r\nd0QMuB+VwnrNQahz9CTDLv8aj89riEjirj5HJ5nak5l/e7Rbfud2FBwazigv\r\nrB/rdAUA+EcoLVDT+sA9l9kue7MFVtaq9E56LiOoHOXNx3321Jp6VYZ7MN38\r\nMIJ1NErXNvv2zK51PFPhP989pXcsihfzmNcDOTjODnP01J2W9oROp+IdKgW4\r\nBKMXHTdOhzZnrQFnaWcvorixSjbiyshrA60H5e9wzSv8fJlzueCZ4EcOUFJw\r\nQyz41lEiJRRUp8IKnR21eDgShCCoev8KyTHokQdc7AWulKiVK3Uhib0tc8D0\r\nVR2ZsYeTywtsccBocsaCYgHPQ9kjxKrktO2J15nYdxoixJXOe5kvZbFF3VpO\r\nD6hKAAkr7XA8Jm0QsA8ZIucybAPlVXBtKfxLB3GVFY3f8yIbMxmFBBlOqyxD\r\n+Tm8DLkjFQBAf1jYiqaSw2pwfZos4hUzweQ5/FeiZzKBbu3R/RUo+KbxMN7R\r\n6M4Gnl4qxe65Zi8nImeQpxBFDxMPSNu/Z0TbNJ/jtoxguys343bLb9C/xNCg\r\nS5h45VOQj6Dm+DueYdFJDTwglLkx+WP4Gk5ED80E6yeV3gqodNuW2/TxaCfQ\r\nwwLgwf2I/hJtvVH0F/jrN5y9Ie0XY0+4iu4=\r\n=YHIF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220703134158_1656855732460_0.7749774009661143"},"_hasShrinkwrap":false},"0.0.0-canary-20220703162245":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220703162245","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220703162245","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220703162245","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220703162245","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-68ZURNZg3mGcFbHQL6eWrLS1CoRjUsjdKaS3yXJ/Wgj2E8BoP1MleWR4Dj1iAsOCbFvU3kPqZAnh2fn4hodnCg==","shasum":"5d9c0491469a3aeeea265e91a8c4876c11298f02","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220703162245.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG5NE1gEugVEHhyb9CSbcDYWrG7TnAV9uAXFMFVu7WYjAiEA7O/Hq4jxxDuOsSYmvH1U+HX3+rJUdxU96x75TkgrNHw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwcJoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVYQ/8ChtJ/RTO7PM1yRPBbazIi4lo4OoviuaLTDwMxMWexzzQsKpg\r\nkTnUNbNTLNPOzkHZKGNbhxWfgAARqy6KDJq40hx5oo8r5ormjo57FgcG9VF8\r\nZOufABaPxHGfpzaPE+MkqbRUWz0wCKWLDH12bPZ7mqFPyvD064LTXAkDzQ8J\r\nvgUctyoBc040wLdI3PRf2Do8lh1AgL3tX2qkSn1FMxs5DlegVDHJpFtiNQrG\r\nkTQ4WG04TWarXxXzM6bqts/FHgyeC1XzvjY0RyBAKawpEbRZmQSeR720Bu9y\r\nwqf/K/e+a58d1LOzmzpN+9Ff7ERiW2gQCM4QntRuq2crWlAaZqRVONYjfbat\r\n98M5Vo5FVZV0FU1JiGG8sI832ucAHJM0GT8AwBvht1fCvsJPpIIYIZb9bj3P\r\n7fF70Voq1Fz6Cul2i6MN6i9/F5n0HlokB3T+f1toq0QPjQtqtryo9JT+8AYQ\r\n5twB3DhTZ3/w6xQ+j+1hedRe2c8KFJDgH1zvj04YZBUxsMbcV+32W3S0lhSx\r\n46rrMhsXXySWj/00aICyFDNqND+x+gjju25ehLxzn5oRdIiTGvYDOeUe3zAn\r\nMfrex49VgVGwfsGOxF4MwYr09vz7pUYy7l2SHwCi077TIqqqKCjrdncagp9h\r\ntt1uHItr+WgQ506Da27BXoIpeWHLovi5EYs=\r\n=4IC0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220703162245_1656865383860_0.5068617746248985"},"_hasShrinkwrap":false},"0.0.0-canary-20220703170744":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220703170744","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220703170744","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220703170744","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220703170744","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-bFsAIVvCSUSCTYmVVS2Bt1VppUpDza1UTjBXoQkI7gmNBIE6u066Y/+BqXA+tXkvc6GO+OYbr7lF0i+IbBkHfg==","shasum":"dd38f7889f147f10896fe1ccc49bb96757b9e55b","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220703170744.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG0uJUbUZhmFuQiEFvUpRUHlV5O/6sFgI2wp711L+3rvAiBaOcYkaYABbqGFyCmTl0XM13uYkgikG9qhL5t2UaBMUg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwczzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAnw//UQlcwc7gA/uPHzyODnTfOQG5KXf5TcT3OWyZAXlZNd40QnP0\r\nAlBy3YabTGJpE2Z/oBlzoBGvIA87mPf7zAa25hBVTuFGi+4SfTy/yzoJbyhd\r\nhWM4S2Zrumd85m4KNFzXIVOxUCz3fXW13vSmh8NbepRVmnjRR2+HESTU9+8b\r\neReR1xHXAcTJxu1K6MKK79BHIyCMTCJScNmNVXyeQPeeb5c14Ue7FafPpI5b\r\nHDUXpf5B5+ekZxSBFatGPrjU4xT6kRZNUBYxzXpeamFhaR8z0yxSuba848tf\r\nO9oyh5+XozovciA8GcWKjoWOw5spjCZuAgeieiNJ88Y9PzJAyM+As4EJeoQQ\r\nrQJnSmUpc/ODoGcd3V3uuly8bNVDNdEVnNkwKi1PEPcYkfUTwpz1X5M3kEnG\r\nrVpiRtUZcbDz1x7UP6u0Ej/Qo5XshLMz5zy6sDUz057XZ8dFt3g8wD4Tj/yt\r\nBOUv+yTRRJBea7Am7V9Yi0CivuPJUP1mUNncr0m8IkUJ3uCm/sCIPByNZnF3\r\nvrmKmuwdXQRfvVEeDE6WLuLZJWWZyp+ZPBdgCGxcakWzgpP6/n130cbKifo+\r\nuKlt63A7um2cI5l0xTc7yEXpW6q9ZXK3Ic4SxagNTcGs5ia6D+UvuKUiA20b\r\nXybx2s0ewjKZez03tsngsENOKMBcaILZ4Bs=\r\n=OWrB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220703170744_1656868082991_0.0005556303042748567"},"_hasShrinkwrap":false},"0.0.0-canary-20220703172433":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220703172433","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220703172433","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220703172433","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220703172433","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-M0HT1Sj4y5jjCFkrsx9XYfq92qz8TddfT8//w+9Xeo74/gObEeAx653IhedyRb2xS1M2Lsys7jGc4VE+MTCn1A==","shasum":"4e07a0565ae55a374474dd305dde38e2766f1408","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220703172433.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZuBsnjoMNHbeoL07M4xUfhCu8UOkYc2ijbd6FLLAqCAIhAJ4tHlm+NLVqyQFFoRxZjHvM/kHlEMLel8PYwwJjDbZw"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwdDjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8iA/5AOVWwSrPgvoEQe+Xj5JzPLRqaHmNFtez+bmQTexyHwk1tcVn\r\nNs0Cy3AHOQ7wcZeKhJzN/SlUz4MRwk/3Xm8P+uzVCxFdG5AngkzRGYXZOKje\r\n/ZF0gdZ8puse77UKWrV62GKdZBRJ4bg88Lf1McN7qnu2uTLarQXnfspxQRJm\r\nipB2BDSXcQBFMdDDxsaZbjtuujWrt0XNEErCLAyXdVgKOrIZv+R8GJW4TD3f\r\n+m1nIeZ6ZV6e0CyfsIo+FQNUMt3RfmszJoTzUe4MN4ZajE2y3/Hke3QdHhPE\r\n3yx88ELi9sSveU5JtN4FVj5b+iDDHgVkGApfmWEXDsUB1/MMRzL7AZIz+uR6\r\nZLbo3DcbAo3291j4P/JuSNgs68amEePNFVbruRM2U8aT1memmI+RgQLDoEW8\r\ns9rIv4VhnYKXy5Dij8EWON0qEgkTS5t7I5SdIqQetiH6+f5E9OKrW0bObdeh\r\nIDQNvUQvm5f+Kt2U7O6D5m0xCWL3Siafby+JIukjkeTbOB/Z/zN64sk94Q1Z\r\n+Yn+40YzBpHu9IYjqTa2ZQmyU67mZjzgtii9vDelXul0poKVM3DoVlpisVKi\r\nusJqM49YaRHi2U0eHLaMisflGb6iki/b4PWswwLQICFp+zCecSRwgGV0Zr4P\r\n9hdYSh/bZBjFXWy1awX7ysrAQb8U7mpSV9M=\r\n=O2an\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220703172433_1656869090848_0.38594177957183673"},"_hasShrinkwrap":false},"0.0.0-canary-20220704195355":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220704195355","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220704195355","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220704195355","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220704195355","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-hymOWRV12283zCErf1Cdp1r1KIt82NFVKOskqpLsCXm1fz7V8GciiVlVLQQ+s9wYJbB3e/vKfEnbSdhwJTXYbw==","shasum":"12cfbad6a918ad2d648908b183d9555c6e22ee7b","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220704195355.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGCtlWZx9cDq2G03Ynz5ceeIT/I1LYS6xq2Js+JeB3wlAiEAyUviwUmcL3KVzgdUVME4/4E/sjiNiwzhlAayZYxbVIQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiw0VjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVow/+MjbqBNI7EKPrbaSdRY9eQphUHKJaW0soLSQj9w49JyM/wH+I\r\nEQSInBheRn08pzaX8uEpHVEEe23+EBodtjizMLGrjSRgBJzwmdn1dSB9vasP\r\nMNvB6HG0IciSIFYTBqR5MMhGUaKyfun3HQupjP185xkAhZbgL6rdSo+RiVii\r\nFFMHd84buYr05guEWVu/gUe+y/8SWCdR82y87JiLxFqlynl+be0gYdZsN1zg\r\ntXtDZOiKPa9ZsfNSQu5kpPKcxVOX7wtNrKegAMCNBm6uDTVjX4T6zd0M10GC\r\nFzLM04As4rSc3aVja9tKG0o9LQVTO7IAf4YG/7HzBeAgM8hdKi3K/tKBBQeC\r\nKMSt9ku2D2cjjefesDkDo0gyao49dpVFE2ij+98MrFl9f0EPx8HSArPhZ+Za\r\nKP/Aaes8iRk3LA22fFV1DME+wvdvWMmK5qvu6YU1ggprVkBNsVVukrkJVMXp\r\npLvuIDLESA/udh8KNMyxJ9Yarqoc54j/RKcWz4O/bKAwBFBmANtq73UuxPW9\r\nIDpAb6mUeAyoWdc3fRJfSqIYSj8puDZgDTd7X6f3umnnGH1jn1K5QF93GpHw\r\nCF/LzEWegnvTLkqSsv8tbXgguN0K/J/8QVz3+Ir9IolCWj/WSQYEGYphg3Is\r\nxx1wI0u6prDvjgZ5QJq5TPpqwCDIElvpg+s=\r\n=75mN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220704195355_1656964451157_0.5287315700100681"},"_hasShrinkwrap":false},"0.0.0-canary-20220704195957":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220704195957","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220704195957","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220704195957","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220704195957","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-Qz3bsTUQh62AfSicU2Ax+jxpkVAXu5F/UXhzNXPRE1RIPZWBuLWCsDwdfyClRO4rQJriVL8ubw6vHjGlj16mwQ==","shasum":"a4f988d0d167a85555089869dc56b459206dec5a","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220704195957.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiXs4D4NxDfzu44X5/On5vVtkq3m73TbEr1wXoQmN2zQIgB3hz20kJqn+YFQkn4vv1oD64+7hoCuWRz+sqtLlnVbA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiw0bPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8Eg/9Gw3q6APrfQDP1Wp4h6cezIoc8MgbCyi+09vZ5hF/2lF15XuF\r\n2jstFEyoq5sVZXtcR2HrOV+mrzk4r/ZFmB9M7l3DpkwGEbCcbOmCOJEfmqJ1\r\nXpxKiDMht7mCZqhbVfSqXJqIBjp+6xyEKhnAsOTa91POGQNr9L1mv4ucKiy2\r\nYosiZwzbm5tRsW6qD0eVndvA8pxs0HHwycd1VJDx8Ct7jBzciD03aeQQPQTd\r\nlpPXlZEtC2PDO1SGAM6ngUCjqj+7dMO0npZv46XT3lqb8WVp3rt1Ce0NPr86\r\nE//tU+4uJhka6zjVgi6JtHmACrc/EROY/NkHaPeIBGwTcOB+26dbOuDWtwp7\r\nAnHtq9WE4+zQca+Sedhzo6+AQsnydbU1d67LEU6gb4k2U43ji79tqGf6SMCk\r\nqwt/K16oP+6jqwZL3SDZxmgH7cAZptXewggfW6+58sEEfw5Uuso7X+v8lv/l\r\ndIyBqb60PjtcpfzDBpb4mJbIkhrKgOIJqiSKpAmHFkBMRTwjKGT3YOCaR7Jw\r\nACfgUl3nfxol46zyAHjCBelkz1OgKdQQjtyD1no06T2Vk2cyhw4QpxWY3zHS\r\nbfcUDQXJQwKsyv83VGbXQcbuGhRhbD9g1s+cCMOBwQHbIDDF/GP0g/HHo8Xa\r\nQKfrTIDsSUeVVfEJRgiilXZW/ifdgFpL9Y4=\r\n=wajw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220704195957_1656964815084_0.5774892129994411"},"_hasShrinkwrap":false},"0.0.0-canary-20220704200146":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220704200146","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220704200146","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220704200146","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220704200146","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-Uno7EmaKlfB3+u0YJsFCrG+4NW34Z9/T4lI7mSw9SHWMrMqnxv5KEy9izS8AMyRmF9GnJTw41Pr0IF4HT/1Rfw==","shasum":"5edbea4028b52f759212e7cbad91bf3342c4f6b3","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220704200146.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDy5f/YqWQJaG6tEn1IZVQEycgjsr2C9NGnY3XCQKpvtAIhALXLo8+fh1qOkvHwvsuckMQzZse3ko8TSywFGPaMQqFy"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiw0c+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcxA//VAvzSZ2rfCL+N4itxivcFtORCokWb3+qOYmpMDcg3IEY1Wie\r\nw9ieDwoFpQruNulWbYNZeI7gZ+BoscJb6rqEembSBcZAyttgJ/yLrNL4wcYK\r\ndHbY/9+F7L9QRATOWZaxzhXhwL3CEPQAHm0hnM4TAEfmCDFohfUA8Z48yCok\r\nA4TRBs/s2FTQcqW0ezfPiNguHyZSZmi1DAbXj/vp5x0nTKJA0eVMgtnpaS0o\r\n4VExt4vP8RXOn+itwLwhasabLp6S86kmwdBFMHR5TFpPQDP0e5C/gjV2msFi\r\nfdgz9Vl9urK5iBnK6bqZFe0CqgDdyQbSC/cXQndDA9ii9or7VIowQgtgs6DI\r\nO+VYB9+bZ+89dVnu92VpbqOn2nMWJzy8K0e1/Tv/FBA74sO1tZSi2f2hf3dh\r\nX/wM8gjmRySoT2V8KjUJjaONZ546chJkVcDPOJJG85pZubN9o+K6LFjcO3Wr\r\ntbDqiVXMjJAouM7W2eI0nN9EJ5hfZ2zzE7b5RUtTCCJFJ3vSYzgpajYdjRzu\r\nhZE9AmMz58RftAzg5GA/nmWYfGSeHoDXAiFV9Y76/4FVEsylFY2ePbHOE1xJ\r\nlOdXyXy44rvcSKlk2ccy91UNCaDqUqIpoPIT9tdUJ+2BBPMjpRQY9v5qqtTt\r\nneimpK0nJNZmciQX0NcrHXH9uylG9kw2zv4=\r\n=6l2b\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220704200146_1656964926656_0.8233459600556139"},"_hasShrinkwrap":false},"0.0.0-canary-20220705102348":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220705102348","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220705102348","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220705102348","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220705102348","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-WUURnqR6yJjH7oy94NxYXE3/ejmMeqvaG3RuCP8lw6odzprXFA6hLGjK7VaHv9tENolnagTfUNwkL/mAUTEx8Q==","shasum":"160900d6592040435bd28045de581924bbded38e","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220705102348.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQbsYBnol6vmLogTIuA9+A8AbZyQ06jbrKx/qdhx/ILAIgHt5/6L1vkTS1cDQe4zkKtABvzRYhJNu4UlPPJMu6vwg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixBFDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokhA//X3gndm1jIp1OGVjNASkXymfKh2QOnGYwHVMsUJ977ZHxgvvk\r\nADmhjZfIRF440u1CEEu7nHdAUno8iZTBgXXDELdZrXHQrS/srQZ0w7n0/QDL\r\nGpW2wVhOG77+EooWGyIpqTE9nHfQEhoy65V0SW765vsAAVJFSOwnjqWPoDyq\r\nfVTsmJcbDFEtUPOXRf9YbcTQj77huMALLh+zbELEHStrTeksb9YJ6hfDaFdb\r\nyG76mOYsfp++ENhanQfKXEoezPkSZ8HdXR69XmXitJF+T3Ty52RBBtiy5fJT\r\nMm4LstfPaCFoXlSfKq1lO+DfdeQNxX3DHLyGNiul9e5z+OqL2qL14NYUOLFe\r\nKIgiQHqSBGm+V3xeynGoF5kvCwlW0FvfHagloNX0NgcjAjsgoQ6pQzu7RkUu\r\nIWQfutREeHO8bLJyaK34zR9pDNc8frAnJhy3KUdwW+ZrQjjyIXf5nzHenhn3\r\nyjpuxqYrK3sZhyRD+LyaGMbBujLq6LIey3AmtEGUZaIoKaUbiqvu4tSMtmyP\r\n+MQFPc3US5hsISMZ9XkvEFUSaCjXdfD8EGc6yez8yHYbDkkA4BI8xr9ctoNO\r\nbwGGCzFoqoNHkoWA7fKlfEq2Kxlw6ZlYxbnMsXE3Xpaqw2uo9OHoahiG38Fw\r\nksjrWrSPE16dBATT5oMNqn1nxsBk7xZ9nfg=\r\n=TeMf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220705102348_1657016643256_0.45217552255036386"},"_hasShrinkwrap":false},"0.0.0-canary-20220705111154":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220705111154","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220705111154","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220705111154","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220705111154","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-c8DEtlObLhRLRn5Qg4UfJo6+SeUGfh/xL+4ZVe0ubObXROKh4MxthoHoecgYwx0D7W7lkvzm1l86vpKRRQfEng==","shasum":"2df5dd815696120c9b2dc9f7133e38e86c80d27d","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220705111154.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnTZzBa/Ny+tw0RDLKKFxwzOx6O+jnXt6KaXQxiBE7YQIhALukAhK60v8mQJy+WQWCv48AI5MTpVb7QWLEPUvWuvIT"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixByOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaZRAAgdtxjI/0Dt40IupzO38rwwpJopQ2jzYQFXO4v1z/nZ8oz+k/\r\nJkgwVYR9a2sNBRJwQv2YlH3hR5Sb/s+XUJa+9Njoq/flbccb4anwJdoeOI2x\r\nZejeTDhZfCCF0a+UTQlawdCKBXjDN6Oxb1f7f/+tWT/U1+114UE0nsYrj4Ji\r\n2xl45hVQnXWplPIPHZLHqFlElyhwEBeWXTbkDD4tOqoIWbYklVhbuJOhf9sC\r\nvBaY82YlBBJuPZxgK+V4bL7a1Bfeu98N+qozDylibXolNwBi49uBjM7Wpkhm\r\nvuG9uId38wFzes0CDF5eOSkKEgsjUsQGheLHXPiF+JsuPisN0Xj4wlFTAM+A\r\n8OU/EbvrzXrLVEl9zLgpHy1LvwTeL8RjBG4Bz27nY9NNzOIhKYGc8uFmdZ0P\r\nVQNWWjSUhuO4RN8pRzDAEXg6dMtliJaiheIXyU7M+YHMKpnarYN70YGZGiWj\r\nckgMS17308nbCU97K0aqxXJ6y5wAmZ0nXNPxzu8Gj2nVh04DKIDzY6vOO1gm\r\nBnzIfF88ZczuqfykksknxjHwwmjTw5GXA43xI4LrmD6Pc5vsifSaCdZLjAuS\r\nwXRYWNFmVTAIDfGju5aXsbPeu3FkoD93k/B0ZumSkPDfIXxcGDkSQwnw5sob\r\n8PLJ9l92565LZQjkWH/OZxmgWBGDk7x+Uuw=\r\n=/NnE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220705111154_1657019534617_0.1850626060961944"},"_hasShrinkwrap":false},"0.0.0-canary-20220705111500":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220705111500","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220705111500","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220705111500","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220705111500","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-aovfeGHnq0g8hnZI/en7GFHEtdweWNVV8wxY7zP9omC61OY8d9T7c73LlfwaLeWEc4VKeuOoAA1671zsWZyUfA==","shasum":"e0135200c839d9043102e9272a55f156e892a7d7","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220705111500.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDRx43T747+yq9x2cyQnV4SzEleuxFJ1tDMH6zqYVRWXAiEA/wpL879xSgvDnmkPEJHBWSzT6tKYcNoyAoWDaU5zR40="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixB1JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQMg//UC+Gbd8OwrELEKDNMnZrf7eODxOq4t4BMBvhO762KYv8rWu7\r\nzjOT1Q1CXsCdGMsnCnossKQN1cs3yo12Rb6hMwVCvd6ss3EeZNxH6cuDSTPJ\r\nTnCVwftBPRhXHBuOqo/B3Y0H+am3BwBEbA8kVwgyOReyeNGQopOMPxDJwXEZ\r\noHzSEjFV3ecNsdI2n+bFgJF+74XI4ekBASTRnZcD+34kSoGtk919YiRHLJ7c\r\nlCmQbHrVkNpH+WaeU0ILDttSOpPrZNDfNaDk3PguVgxHMCm1uKQlnhfDuiWP\r\n07NTdjjH6Pbj07/0wX/+EXquPRedEg1aSZnRzNBlA8vyUmMQUJDa88ITCH5H\r\neY+Qt02g6fd2BISgBUPOjxzj1fmKaTGJyZAjulqKRXC5caRmBHcMu2SUv8k+\r\nbX++QAdiAJIYf2TYD19YtVphG9bKwrtVpSPY00WP03KQ06ykTrOEJTZN8pzJ\r\nX9xd62awuIc6/TNkMLsCmkAaxpSdkdc/H/mu1s12cLKIKnCgGUFh0C3UKr6s\r\nyDF8JR8rRmcsgshZTIubHMSNBmx0b8UtAS3yWzJPQo17gZRzIxVHnJ8XjGU4\r\naHV28XTpnLW+tjyCEmLFYYSDhT60azVel3I9NhThW5chBc24nFjm8PWwwXTZ\r\nhzmWZKVjkoupY5i5fLGZkj4RyzNi7O3LMMc=\r\n=C2ei\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220705111500_1657019720897_0.13455281201938796"},"_hasShrinkwrap":false},"0.0.0-canary-20220705121648":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220705121648","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220705121648","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220705121648","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220705121648","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-TbnGvps0r+Mv4MkHyYjoeauHx+kkjMzgny88nN7oPDZ8hzg8fhnbO53olSPt7kBX3h0zLaJ5gUmYE+MKc2negg==","shasum":"fcae70eb048c98baaaab1c4719aa5be57333a9be","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220705121648.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAvBKh2MzqSDUsgYFn2W8TVAOlvw3ch0XX16hJekz9qzAiEAtLxHA/XRidDJGy/skXY8AbIIBeHsFj+8af+vhZau1vk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixCu/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgNA//TuhaJRlVzC60fyY46o9Zd/ieHNHYiFq/0TGGyDiQfcmg+2iu\r\nxGcdxURxXDBM/E6t5+qkdh+YWz99mZewIPYMZR26KUZQlkCst2SpM/ZXPa9v\r\nAcGqL/S5VG8lP6/nj0W6tvI/DwwhCe62ZsRM+jAP5OH+n8AfUB3Y7rZ5lDVe\r\n5S9tERJvRo0AQZJtN2K9KBgRYPWZCtzehShPoiyYKAlkyHHrjhcTyqC8Yh+y\r\n0++E2af/u+e0uqIoNfcHc46kAk3qW1bX9kGyG9ltMsZeZBI7xxafotvNb19H\r\noXvzWxA8kyep6+aPwkRFVC+tnBq1NxKXa1fw+6LTrzBLnPX/Xk9wO7zG95hk\r\n7zWgCm9Y3Xra/9WrOjqZlbwIqJ51HCaFfqxzdpxwzbme0Ty/PKIDFWmlM76m\r\n4drL+VTQQFbGrdjmroN5vFs2GZRN0QsDm/cFV3qKaDWlexphALuxu4RqC5Ge\r\nG9WUjCJAAmf76KI9JXNU07fEIw27qWbvD088M1vpcDf9v/klX3S2QFHdJsqp\r\nP9FJoPRkGNAB4Tz/NBXAqJkltZfPnezCpGKFtU2RD8DXSVeBkJ/2JcEva3Mj\r\nqfV5Bz4KSkdteJ1ioq+Qp1dveIaAQbdVtUOjVpV+JIW08sw8fK3aeBELtjCp\r\nbGZKa6PayAdvZ52hbpIYYEmc/rdrUdD7EPk=\r\n=UupK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220705121648_1657023423413_0.4114724769103728"},"_hasShrinkwrap":false},"0.0.0-canary-20220705122927":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220705122927","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220705122927","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220705122927","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220705122927","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-VFuErYDvWwFxbCmulsYVN/a3f/uE0Tjdh1OlDvgWdr5oF0h9Ft8SIVRWQemuib5mx1O1Cpqyg3aosZ5jcQ/gPw==","shasum":"3c5a57d209d90a87721704759637cd4394add427","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220705122927.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWwCyS5HfUt0ngBKSWwgOi09I2ItH9SedhpSva8wJTGQIgSHf25f9eL3dXjYq5Q51WwA60wEoYb3clYvPlHBXWY74="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixC62ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzLA//RxfkLCxZsF9V6Fg51tRTxP+Z0Swcjxy/7hJgQ5urCO9cg/ma\r\nMr2461BdCTrXRQEJQXJxLqiVu6UWQ702znNrt0v1FaSeB+X8oXgbNyo70JBY\r\noklWkbtB02tZF3zZg/pdBkIYUcHtsa4XKMQsms6NxcJD54XkrJmgXJpWuXu8\r\n2aqnJKkSHSLaiqjwaQMpMqkiW/qBBlea7fj2W1fEzvS28J/TK4z7pXE7/dih\r\nSfWBGqmyMRtLGYys408wbrVUCKQxg2OboaXl9X+2UTtMu9EhiJizWf+/RRD1\r\nTevIezP9OS0UcfPjSlSFVMoR9ZUcPXV5QcK6VjMMesQGFQROCr4c4zkMxT8S\r\nLQXsz9ksvbW2ohjgMwUeT5u8ER3O9HXnAmvzwBjnXICojc9Kp7RNzt9Hbp1I\r\nnEVe14VjrF/+zeK7gbQqr5xCzg0R9eTaRT4ptT0R+OeRdVCZsUs5OlSSh9fI\r\ndRE7lpvFJfADsdyGqi0mLpMt4R4/iRmTOzL7ZMCWdaw3UDbfvGzxowZ9nnpV\r\n+ZnqBfy124eNbyp1JoOqRPQm986FYf5bDymB41QSqC6FkAdchjkEMj5zpjIX\r\nNKNKMgmG1PYozCV8VvnkAKXPN/iK8uCA2hceR1CFNNf2JQeFUYBXH74WfG6i\r\nmbIPG+q8Rvu9ExiOMiWge5gb0Iow/m5pYfQ=\r\n=1mNA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220705122927_1657024182578_0.5870171011373488"},"_hasShrinkwrap":false},"0.0.0-canary-20220705131931":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220705131931","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220705131931","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220705131931","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220705131931","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-bDmrQbRzIXAB/UTDwcbi3tt8cjHLduafHNl3xh2U62wNqaVnEyrtsRUFacSO3BBnuLkgN8AMhT9UeNwANN7vwA==","shasum":"9cb37afb683456edf5f1dbb1d1cac8b169bd91b8","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220705131931.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxlgHgNEci2XbJA9vlwAhqhq5lx46njn1ECxlFC8tVWAIgaX5hJ7FytFPtVVuL42bbADqQcl3iDCpna7tPdGeoNeU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixDp3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobQRAAl/r++q/4jKDa8BpKZPF2CZVm+UgV0z0ZbfGyWd1Ni3rwaZuK\r\nJkn38f/SXZtFcasaKLxS0Xc4JYhVcSiinjp67UWNcansSEh3NB5SGH5fYgqN\r\n9ZklGBBpIHLoVeX1LeXOGz3OCpd+9n1D86fqDAEybpfxhpDOmzeDuMNv3gAw\r\nX7N1ZY84eBq1Os7/v9O/Ox9kuIICqjaCX6SBoZTyTaGLCYC9PFKADf9Fsh+v\r\nM1Lz1+BsmaDnmQiqaCPEvO7uEppxaQyjDxr6GY4iFy9pZ79K9kdCwieZETAS\r\nPFfWSs9jE+alC69GExPI9PmpT36ePTpw7m5b4RIOH7XjUSfw0q3Dp0ZG2Pq3\r\nKcL2WL+fwDlH4/fa8U0M0lkbx1W0R337A31ai5q63I0512rlcxGPdhQ8Q28s\r\n8ODYO9c+5Not+5gVSr+U9pu1IsDvoTHFIgeO56HRvbhGAju9kB7gKR0mHTCM\r\nwiglUXXAFiPAWfg25j+CxavyefNjNtWjpajeCBuGGDJK7FML5xjGN87ltyAf\r\nycjHQs6yNZn1fv2W+NtyU21ftyYkQ8t7KIaKHQ8Orn/997MaW+U46SAfZ0gI\r\nMI9VlXVgFFsyZaG+OgU5c6xHRwqlaa3T6JwXQImR4oRac17HZt7qwruzjdeg\r\ndKaW48z+C9/QcGn82WbMI123Rx7zmsAC65A=\r\n=DHR3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220705131931_1657027190925_0.9232850240855066"},"_hasShrinkwrap":false},"0.0.0-canary-20220705132935":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220705132935","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220705132935","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220705132935","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220705132935","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-nsKLFcxwajpWwUem1TAROrTw7bpNN9oGPuz3zq5fpajyhhONU/r/wuMKTWdGHXu98zKtw9cxPGEO1t66BtDsQg==","shasum":"4e0a7757d1d6cb21c29c04c5a4045acc63f13373","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220705132935.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaKNZ4NqgnLSHAZCLNW5r2J8unr4FtinpxV7fi1b0SpwIhALJsoLunOUEON9gnVUGSMF/CX2p1ewWgL9ui9UqYpx47"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixDzOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqq3A/9GzvkFcPFdlWJnJvaF8ijJP5IIKsnGhy7g6Wf1m5Ah4JLxNGq\r\nHNv3LqYPmOyFfGsano9GDp/hKkG0i+jZFc6ySxySYpeLCtq8LoxnSKaYvvgv\r\nVLJi6KSf2cjYM6KPx/HIhNdNfCMMkvHme+8O4TfWGy3f1hBeGex02sBPy4vr\r\nkNJXn4/QtXbdT6XZG2j35qufFbJr6bW4AVLfRZED8JymsWaZeD2sHelvmkQo\r\nqEY5wNWVaBGS3+um72i2nF6P6DJmj6aRqXmL3uJMPCc7yKDD8FflcM58NJEd\r\nl2SNktSmjcqaVDCFrssuGwvbaDBIZA+WZVENnDgS0dhfoNI9eV9h63yDUNPH\r\n5DGAx7BeJhlt8T389l7mEuCaFoicZTqYkuMGE71/a36vkeiM3Rln/zxyqvTV\r\nbzct3L1NJErRxm0XrTFk+RTJ/++uQF9mJnYE8TXbiuO+azpOPAO5DGHWXJlf\r\neadu2XqJZXzx3dg6HdUe0GGmoyuh9LpXbss0AWRKKb6OxSJQZbaleETWJwFl\r\nId0Vdh3D+C1aJgcmxknojq/C2guLgeW0NWTDDzzBDh0ejf3suiPpcIRjL2Fz\r\nDOfad391qIk1Y0igPnhHnSwJnz3FYH4hGnQGgiay6f+GdDNMki18manE9rfi\r\n2xbItOimO6i2xaqAkkE1AZ3sBdb/a6VTzBA=\r\n=ohCM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220705132935_1657027789857_0.5707323661695145"},"_hasShrinkwrap":false},"0.0.0-canary-20220705133044":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220705133044","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220705133044","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220705133044","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220705133044","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-DXbKGEwmXI9CcPeqzS1ss2ExzFK6WtOSzONzd3P6TsPdolMrj6Pf/V3fTTroDp3rQqOTsk1LzFdWF2cFFganSg==","shasum":"b85e24dddfb168898bdda338130393b9756f7801","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220705133044.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwUqmpmJP5eZmKfZjWNd163Fe3iT+/J4o86y3xZmXSqgIgUH4zTtC+xtuoX80PvePAUQhw9oh9bZC8sdiSRpLSLQ8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixD0XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoizQ//c5sFjS06sPIWlszTn/pgaXG8trawndifZ8niZ1CE3r5gET/Q\r\n8m9k/3kSlc3NSC+kNIzS9188qtik++VkV9zta5Wo2/Fflvfu+tPTMCRrFrYC\r\nDK6pOePbUysfZSFgHZnQk3Oh6INg4Jhgin8cmRDTR84uPu7esTCf3co2qekK\r\nG8j1l/q1VJI4X0nh5uD6YpTTgL+Woct5TvIFgxeWSyruQR4uMIutjWpWfnGj\r\n8TcnhBot/JqmE073dxlUwM1CRid4EwpalB9eC6kUg//wFrFEUcelhc3lipJl\r\n+67YCjYRf7lhDV+VEG1hM7FoJndRIacv/91Kz8gDUBLqDQKq+kOBezuo00jY\r\nVofoedtGYZTNV/aa9dGA3bXBbO2EFIYZaBlMpCiC5ulVWlNWIU1qSJUnDMb/\r\n3aLNC2ccpnI2Mg1mrU4d0yvKaQCm+XLLtifXrd7Bz+CtT83bCYj9t0nH7Yg0\r\nSfE/Eii0y2YxGWWKVQEjT2lWD4m0wP0bBfidNnvvRkrWQRzoSFF+AzK3QbRa\r\nqDldbPFfE/dYOcAg4ZfqUVWerald4SWazB/BGRXN6vmdzX0l+T14yg0noGUJ\r\ncib2yMWEDsHOorJwlsTb04ixgE4Yh8FYrT0vtsdwMdKMWtu5rfOTPnS6zw5o\r\nM42tTdcY91XyCfqLh12Ny62Tob5e6e3s4ec=\r\n=sJXv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220705133044_1657027862963_0.7262601199212533"},"_hasShrinkwrap":false},"0.0.0-canary-20220705134535":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220705134535","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220705134535","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220705134535","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220705134535","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-9pyLeQaKZEPQ0upnLdyJ+M5bxxWU+JCo2KHiFZ3h875FA7s8LBv2LgPwhWrs6c29LYRuronr/J6TFZfydvl5SA==","shasum":"06b860f62ea456df1ef90e51db37ed744753d33e","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220705134535.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDjozUFjIJIhoKWKwIa0RLMEsC27HXbFWzxqxTtaHNTkAiAUvhcyOxU6Zi/hzjmYmoITRDokpeyw3lgYln57Ib33GA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixECQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqzsw//dFtj463L2eWWroG3vZUaVWDPEKJE3D36+0C753YWW9Z1Mv42\r\nZWnokClvYvhIbeNVXFdtu7twOWDj2I+Ji8mHeaOxe/fxyE1LHnK/wlE76e1A\r\nqk5vZbR9dZD5baAnEX3pWve0uvox+EdHuYq4cmE8HxWs5oqoodRgdxPFsju2\r\nR49fY16WuUcLptbiNZFpMh9h7f6jh0Dcz7PKHbZfMque8vcWMSPRklJPGeGS\r\na0OL43jLI8uUbHxNQZ5Eu7L9G7bu5T20X5GPyo1gpmpPDrLKW45Tq/hu70Pt\r\neW3q4oxlJ6FCANCB9H6tOX+GFiBzUEqqHVfdvY9esvoakCD+IKV7AslyUQ3h\r\niUu/QyDBTXWDUu++kavvmANlPFZHAweW48f/98yuqxrcSFqS6QS6lAkUHOfS\r\n88ik6IQjgXfEpYoMya7IrmJsXeZEr0aNdVt7spPS7ngb1JRrxfKcM9vTlrC7\r\n/9ClONUklkVHi1vvRKGn8LTz+VraMS3UQNEqHo1zJ5dDIf2Rw528AfohJ/uE\r\nFefmLbSK1Mj+mpXzotp1b6ox4XQgQSr/aoogjDH2Ca/fu3tLlPuRXuxtxPuy\r\nV+q041CEP3zVq0pcLQ+tjUIPPqXE4gLPm+CO1We7kpA0+1A2PcWuq0fdn8Vc\r\nUD9cP6nVWmiSCd2/SvtdefOMHrFj+tM5sdg=\r\n=AmqO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220705134535_1657028752161_0.8493447618518777"},"_hasShrinkwrap":false},"0.0.0-canary-20220705194600":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220705194600","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220705194600","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220705194600","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220705194600","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-N1OBUKa8ZVCoacCrfunB/rNcC5CWjaUz6pc0ZzffRjyf6qHe7TFViohxXk04P3Aj5YlGtHVTUPzfewfZWs29Lg==","shasum":"f86067c6374060cfbd642db115589fdaa2cd98f5","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220705194600.tgz","fileCount":38,"unpackedSize":118563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGSNveNf8F2re0daMOZUGK+NWVTH7eK4o7dG5ynxfV9pAiEA6h5sRAjaleWuR5xMLzQmWKOtfVcj8/v+aUsZpfrZq9E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixJV2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrn5w/+JGVxsGmG8II6ZAuJKs33PCZe/9L+l8znzFq2EM9dvWYB6Lmw\r\nLsNyc/yYMz5xUd6kpSiAGVj88tr0UwTST+QkzNmKsP1zLu8oIZCvtHn1jYBx\r\nFQaxRNWUvWzeYyRhjMNa54aOiDnNV8qZmHXcZE07Aif6J+9DosiLp25+FphY\r\nzRqGHXeUOSV65z+yWpgaaITJES+4mUeD8zd7WIrZQSdH5bBtfXaLc3brQf0H\r\nRZnTupJcNP6tS3NvzxBlS+2b0FnOqV0nNdSYUU9R35Mwu95xBpNfE/xT4PMI\r\nOcd9RZCHI1Hr36B5mTpwxjYKstOO/qm1VsXkMyfl1OWwB+D0Tyf9gKIYpRjn\r\nOBcO2ffBuLwYzU8ShHONAFG20lD69tgKcNfppAagG302dGwV772jbmWrKp6k\r\nFvRcweH+dWGFjWPEbpgEJJY6bmfEjC/FMJkzzFz8sKn/ZR1wKlV2FXsuKOjt\r\nt+0DyiSbXtu5WJmvprCBKZHRQdtlMJ0Y6uR9t/79spBcW6YHlSQ5NsuybrsR\r\nFTsaXRxLLq4qVzJpKqb/W8Bu25aFQ2DMF+dU6IG88rF2fBVYqUdikoSueKou\r\nHtrt1uK19og/R6D7jlheIRGCspIsyIathQ5++2mKb1zc81JC2vsN3+Ty/G8n\r\nm8Z5RPFt9mlafAfkI4XcsxCvE3/Ee5cZxQ8=\r\n=LzOw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220705194600_1657050486324_0.04290993037654389"},"_hasShrinkwrap":false},"0.0.0-canary-20220706085539":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220706085539","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220706085539","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220706085539","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220706085539","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-Ye79B5kMKKxwqHME13BZqdtdMMPa/iMBGU5LYDNwH001hIKQSEGHfziBVlKCSpahaXiOqGtjXf8VU+/nfWCmnQ==","shasum":"13af4886dd074f2c9fbbfd54c25a2b02817cc3c8","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220706085539.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbKKFXNeCS/McLNVs+xDBXU8m/UEkxw1ct+YnDXDJ4VgIgQCE+n+8EkZh5vB/iyU2jMur/AkhdyxCMit9IVwpESAU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixU4eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZ/BAAluZ9lOg4RYpOjviCv5S2JpnlvViFXCNDX3h6lr5ZlEZhblwU\r\nuwfQv9TG5igAxwp/unMYkTlMZ3yauEpeqdpBiARCeSZIIY/YLgZ8oU0KxBSV\r\nP/3JzyM4FFCdkRhP35gmz8T/ipYjq9cCEoSR6Rlsld0XVNldzJOuxcfYsLIq\r\n5GMXIT9dKkodnzhbwoumAVZAiwhpzqlRp7rXICtzfhP/FvS1ByJOYZ3ZrCEM\r\nNmDC3hQ2S1FuSi9vyzPm7fbCSPvjGYk/U//T2TZCHE+CSHgrw5PdgNs4BwTk\r\nVepcfAIveOaU/8khPVgMVD+iR+67OhKguXghtrq+FjrmG6vI/OYGYPoauBU6\r\nF4+RjA2BX8gn+9eFabUUkqxfdMEgg37KUVXml0kP0lkWelvDIA67Rd31vQOn\r\nDJy7WjEsdb90h9lOiymrwtHDtiXCzWwzQwm5WVQuG3aUQlTjnFGTaKiad2te\r\na3TAZykZ+N4FJdsYDPPgxGK33knqzbY4RtjeuAwgOP3aFYC+ZtJglvInNnSr\r\nA5qmJNBBP+g4NzpTmW/6xj0fHA4Iw29kv1F9v/aPYpyFsAbfl88OS2W9IKkQ\r\nt+IiJOZwWN7h0Bp6VCy5+wZmBryDy/RJ/gc3i8gNqwReTE9fWMzwysQm39ww\r\nnlfXRICsf/7ueLiVVn/wv0x5fLHcv82pnhQ=\r\n=DJi0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220706085539_1657097758122_0.3496862165502379"},"_hasShrinkwrap":false},"0.0.0-canary-20220706110648":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220706110648","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220706110648","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220706110648","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220706110648","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-iBvJQDWGWdwGW6XBrexqSjZbFl9TLzre1JfOlwkLgoZ3cknxfgQ+1t8HfpX+mxl3NDFB2Xddv8XpDFEHqysEpQ==","shasum":"4601515167bbf60b3d527e05974a7e8e50aadc09","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220706110648.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvc6WbZyfAzyNStJLZxNl1Wet8rTEm3D1xfBJoijzlcgIhAIvrb84tgqxHxkrzKCmzqLfg51FCcP45ZLaP8ghLgss+"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixWzgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxcRAAljbfL04oRahUbnEfyzfLCufKYFBceYYfd3LvoWJqrIMEM57L\r\nyQj2I5X9Q6hwIE+IstnoXTmXU69RbrEtr/jysWZn4cFiVaqCwviZVYr0LlPA\r\nzOEt2pK0GTmvE4S6mC0lYYVoGKpGPdbVz81rBY1DFn1N3KloMVsVpwWW6UNt\r\n7vZy59fny+WgGkcm6/JBIDz157gZqVpEZnjmWE7KJZHxvtJ4cqsqna2q+Spf\r\nybIyLrbyS4oLMjobSX98UzK3F5REOeHSj+uJM0QT90MjhyPk/55ctvb/kF3a\r\nnj6F8r/dLqnykGLjr1l/THqr2EvmXK0bdmvolzkmqg8y1ql79QxS6w2Mfmow\r\nkuGrKP+RtSmwch5pZtBJ11Ht3mD1i6UDRuYORQG3a3mDx3Q8Oc2s9uP3n65/\r\nO5p1u0IgY7C62oiJrqtQUvBnBApH55E0p3Ey4WnwAqur8KPKz+EXc6K+1l5V\r\nAJtWv9avfm8A+6aM0/xiCyh9H7NgnYMuM8qxhWfeL1MPBltaGW06i7M+KbGa\r\nuhSQnTO5gyrFeHtvFh3SouorqWnr1Mtnh40eQkWjT+bbYMDdY3TgfFwSBh+w\r\nb/yRzAMoxjx73Xrdgszym7IBmPk5R9Ln/Nn68JsLuPMOFPHxP/IlswCn1vtm\r\nUc8mrCNMnpOmtuxV8WjSUPrJJaJAClLVTBk=\r\n=6wDa\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220706110648_1657105632449_0.5990692902887573"},"_hasShrinkwrap":false},"0.0.0-canary-20220706110825":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220706110825","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220706110825","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220706110825","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220706110825","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-bhAEipvoFopBDEkMR27vXK0PusCx5iXXw2ASvN1pL6L/S4N+ZG0MDuETarhVEYh1KgHZ0KLgLK3OdzAf7eBDWg==","shasum":"2cdfcb6a8ecf90daa693e9fd81037a7a7d90289c","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220706110825.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD92ukk+V9ObdAhwjBsFHd9Ft6c6tSb/UbO9cP2PDIkEQIgU3OOU1aqhJecxjEfk+8rVVHSB1YMitGKWXvItSqQ3yo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixW08ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeVw/8CSDlc4xPBUe/p5mBdXpYLi1hE/idbrEzlwV82qV1S3y88x1N\r\nG3KONGoWew1b2t/7avQdASskXF5W4Dr2pqxQC15AIG6Xvh2NhtF1Bi7K+I1N\r\nFOmQHCqgpn/rCFI3sH/zRUeTyLeS1s7RvBPIf/N7z2Ka31z7fFL0w+D990GO\r\n85OkTTzkoUMiA72IzuDxwoB5o8YHJGTwVWriVhXJN5BA7Rtj24Cnqy87FI9+\r\nohvE6opdJK8uWHTvVDOpwM4tT3mIjFo1pKpjGwMJ7hkNOgCVT5ggGIDMPGZA\r\nvy9v0N6tMXAUOJDBdD/TKQbSZJrlpjakzVQMsNouqgRGTWtiVQMqiGcnPqs5\r\ngvQ7ceiUrT34FLXX0ttkVG0X5H9c9XUicltv/w+tgQ5IVCBW2OFWsFyUyS3Z\r\ndDBywN/Cf2CmbBxxLkrI1rzAz2VABlQw0xSDFm6pLzlb0kgLNgzpkFpm3lSR\r\n34J1rW/8HSm/1K3/pzhW6XGcxCmyB0VPOpUMa9WO3nH6QA+7sKI0FiXZpsn+\r\n9BamBGPjl3lxpjA6u//LAtQp5NiK0SbB8q5uqiDd7RCObhBf0hZ1u9dfhG/P\r\nvm3aA531iWqipF00vQis4Ya90BAkElnwnSpp375UCB/usQW3QzP/MIY49DHz\r\npEjcbIJjjP2uSwIAuK24GSiJLUCUqNrwc+0=\r\n=Aun6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220706110825_1657105723973_0.275580427274039"},"_hasShrinkwrap":false},"0.0.0-canary-20220706111715":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220706111715","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220706111715","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220706111715","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220706111715","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-7QMMzeKcQQlCxTHHKjITIolqaT/jFohbdApDIMXZxRkpw7qD+0EHHhBbBxsCc6xQRISOh3KQ4oVNQ/OyYSdaGw==","shasum":"5094d127d0b6d8ac823a6ba62088252905c2ef89","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220706111715.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6VCSjtm0PcD7LCpfFhPGpLIaJ3SKaMFSaeIrH8SbTLAIgKBA4gSjCRqvYqZ550P2/i2qAqXKsiN1zaoFe1oaX6bc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixW9MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqwwg//QC5MTsZt0cA5418s4uSy74MmB7i4jc2LBOqllBUme1v7hncT\r\nUXbnZmn8FjwP0yfLLG2ldkMN63aMY7pxuGHkltnHYTtr7U8EmKpbMLt4bXfN\r\nqViTi8pkQcZ1d4aHqduyOCG6uds+P2/ekh2XMwU8RlrqkDNVPyrXyhnLUyn3\r\nQrbP7P+5quyrK/gNT34b9Pn/zp0TVfndcN1uFK/mOgntFiMKtnrhzjOKGxnM\r\nuCAl6MLZRIuHp9rxYnf+Wyl8Qie5yGGMbH2InsSXQGRS9dUSNhJLMav9b7Vh\r\nJZNWYzMmRnAJ3CKxc6Ru5PVLBHp3JvjkaRIjnmn2WDA8AmXZF/tsm9mmhYr5\r\nZpQOB03zHY8Ym7+/SExb9huI+6bLTOpyccnM4crzX75TO5hvHTggemwD0Zou\r\n2VLS37pnzRyFa4pw0jZ/QeMILLbDaVYXNLMJzoxykwWc6LdRtxEQ6i/nzhy/\r\nxynQCidRW8vXLd8o0j184uCryY/Qu/vCSTvQAq70qvW7gck2MSW3n6At9SpC\r\nETxIk5OzWsY4tnx3J1z/bAsVQpZL+NPnwF/6JJqf2tLVz1STwnhSWuf1qy3W\r\nBJ7ilXfptPIKaTliwmduVO+tPjIzwFMv7lIu8aG2KhQwAGhazzkfU6XtOESj\r\nP9G11GHus3dMQR0S4K1PIpat/4REssQDjOg=\r\n=Js78\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220706111715_1657106251855_0.7924153316818137"},"_hasShrinkwrap":false},"0.0.0-canary-20220706193304":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220706193304","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220706193304","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220706193304","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220706193304","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-SL9nOJYk6k/Q+v+8lgi1HZXtbqQScBF4L7DrdEJYhSzKuy6GwsLYfHxPSo18eLAHTQ0CcfzS2Dn6R1FEw+c6bw==","shasum":"0e36f6262c2a34f20cb3fd8f65fa32ecf2385a57","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220706193304.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYlcJL4b3dAjqmA/ZSKwE21HrZ4XuIwWA0R0GRs+PZNQIhAL1GrtiFuhksuhpdezuWtbDGL/ZTtKY3d6EnX5X0dkpc"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeN/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqa+w//TSR8PaG2ZfM8poMheR4P3AZL3067ZQlMCCTyo5HAtqwZocQE\r\nrNI6g4iVVPpPbfVMq/eTz2jLyGqkJHK0e1vtiKWqTgH72VXX8k+TziXv0ZFM\r\ndBkbqiWxtsPp3Bp+3ur7/4n+KB12CejiRg8UzHmETBfUlH/BVnsJQHmm1Gol\r\nvn9aFpGIbfhRE+KPWzBsvAVgjUWfTEJULaX1DYnysWSep4jfPUuBevefiFvF\r\nqXm2Mid8K3WUJLr9ASkOvGUpkIkinSp6jn2pwqkYprsOeFtgGTo9fiWvIIE3\r\nL+QfWlcGqJgtNmMZ84Rr+8YpRs+Qbw61OUwg5PY8hyxPX1QRHAd3X2lYOdUt\r\nIMdfN404W7FgA/rvqKuBAj1acLTNILtIuYktRRmOkFTJgURg5teJ9q5uDqtX\r\nxghYaebr4eBPt9tL4Nu26xLYbrLI7yUdAybESwwvmu/0wUSV0bgpuf3bCwsU\r\n1eOJ7AhEZTnUqKZi4IQ3cngKXLLRpimPP7nW9EQPdwaw3iT8pxSgbHXhV7Do\r\nCp/SgZB9SEtTmoVcAZCvsXBraAU5Cf//NAhQCRdVc6fJoq7nVWqA9Lukj87g\r\nw2DbFO4RhiCKCgwdCbiPdaNICa955rxQqnTm/xQxTjYF9WwEWxdkItSEX6TE\r\nOsW6LOLyH2mu2+9fgLQIcnspgJt4PxZywQ0=\r\n=5pwp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220706193304_1657135999684_0.056009685628848116"},"_hasShrinkwrap":false},"0.0.0-canary-20220706193631":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220706193631","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220706193631","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220706193631","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220706193631","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-pUkrPt6TLmg8Hed72tEsrHLXUAdoKDwu3lmVqgVjqHre8fgGkdS4BzTUVXN8wyvftPfWHUlcLCJbCOlTdWN7+w==","shasum":"37d013ccb55fdd851661a3dd1f3e6b7ae4199407","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220706193631.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDPxqcsoKX5yJDUWNqXA5Z3So/otGg2SN1erwJLpHqDOAiEAq9NB6eeROHxJ3MHlALXFCdDIR2pMLjE25r255AT4aXA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeRVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6pw//Tp8v3JZ1h65QWJBbDPdElyMZlzCTVURxDTexE6yF/ihfc17r\r\nLwPIuTX/4QQO+dPTLgNLWQPbCOpGg6v7CPYofTK1lLqUYtz1bIANUcbEWR9V\r\nnMCASVHOu5ufVIyJRG5IaRU1JVwerT8vXKhz2CA6pB+qzpY45oEWviMwRTuy\r\njtRaOVebjf55/5YA8t/DeDwdCszZUeqUNgieuPMg4j/UReGRguexHva9F+Tz\r\nKb8PeboOcR/28N62N48NUyFLpCofhOSt3wRXCh8hL3KbQlbgmAMKLzsrlMab\r\nqRu12UJYtW6Q041X+gwoL4sicz4d6zyJL1OKJ4WSA7my/bAf92axLJ7TGvyP\r\nLL+QsEqkPllDvKJ5Kgw5wjc+Iiltd/ISv7JtKFKTtFJAFx4kNzgCivBPxej4\r\n8rUTnF137uHlowkpQ4N1d8faNKDpeSNq7fzK8aTbhTTdj5witPA4H8wi/hUU\r\n9wb0WgykDE9pwXPar/MWtntoNXAKYMAgeyVj9GXyQJrY+FPP94/IlkHHgtQi\r\nUb3iMe9sPqABdMxOiOd823B4mvkkXIt2lP4ci+D2zHQnRpbEJN9UbMqPmZDu\r\nXLqP09pvBEdBFKmyHfvYYffDSpUYhRwx+aQ6gbwqQurjRZrY3AwSGSmM0XgU\r\nxqm+mBFNQVLbT5vZzU9It9sBWyycAuyEkA4=\r\n=Katt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220706193631_1657136213615_0.9952796378364221"},"_hasShrinkwrap":false},"0.0.0-canary-20220706195911":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220706195911","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220706195911","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220706195911","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220706195911","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-oOOTl4qt8C48AyeDw2LfzIWXN92JPmApFeC2I6QdhQrbQlasbhqUTAPVUQqAInhx7G+CZWua6iQCo4N8OtCu7g==","shasum":"79bfe510bf72091d567b994e6e9c42e01eece2ec","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220706195911.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFsH+NRVVCjv2kGiSZhUL6MQVrp0VTxey7h6qJIzpJf2AiBi4/geqsUw98QMkiS7YppbklLLsFL/MNgShpqHQslcFg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixemeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqt1w/9Ha/2mXX1dL5RWSdpJqSpk1gHttGuLeXyLvKxiv9vja5c6Wb/\r\nzZebCRSGSmydojluStOXuPJXdjU1zINtyZOnckz4ebRcq2/gevpsGzkC7esA\r\nXjVbAXGChlXpqxkuSHrv8sZXMxdaadV4eeWtmHrOKqocOB1PJ16clnPKcycS\r\nH+aAtclCZ85h7/9HhrxV+z74g5uxZvYbwciHD+L03BT7OYG1pmsesPIkzSeE\r\nPoiJt5CM/jEa3z6JopCmKD1M5WuPKuW0VepK6ImQxM6nJQ7szi1k+x/qrw96\r\nZVoFm3MkLwx9zGzGTScjwi1ITnm93Vr2aaM24mchwBIa/6HIAusIgWOMzUx5\r\nHbMPsRrug92jDaQDbI72HxCRqXBhcGOHs99NNHiHS/t3DN4wvGJki9y99ZRF\r\nUtsUUyu32VB8feWRa5PAqhgZcgJ60vuHmT6p4EZCViDRhKutsFxz5GGtfW41\r\nhXzdZhrpGEQvcQk0cl0b8izwnRw8+KrOfnq37rXmB9UHxUnM3vIaTyLKvWeM\r\n4MPijCJ54pcOG67Qh0WS9oDe3VN9Pg0xGHH7rJ7JIQIs2nDZXIKT6t4PZBXb\r\nmGqvEqOwRBOEiJp2Zsr0zZSFm9k7d7WSnIDK1SmdqleGnoWVR2wzsfBVWOCf\r\nngeIn2pr2FUXrgJDOLV2WwkQ7/fncJIcJ44=\r\n=OBbv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220706195911_1657137566057_0.08669046722270046"},"_hasShrinkwrap":false},"0.0.0-canary-20220706200520":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220706200520","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220706200520","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220706200520","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220706200520","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-YzySbWsceyoTx/0GqDRziVy2NzovENNoProJd88ugWli17Cn4GIwk19N9xPGJUa23LuHEKtwOsdouwWO6seBcA==","shasum":"6a0c6659f0c96877c2d90f2e198d17362bf9f043","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220706200520.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVO00L+WwAVHxdFks/tXSZUEwtLgsCZ1dpBFm+DpmCsgIhAMp4n94mk6BCixWvHkeuagTBsDl6T8UPvsWrraLup8wO"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixesPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9wQ//TIMqoLITgBxhiBTmNkRrgu+GkRTmGELAO9VHs8GgYpuTLYsv\r\npVvXo2C4X7BHWXsuzPRlyDKjpPixc2s8gGLS+pIHd55avMffX3JykVoWJf+z\r\nFHeXPI29dJujCiJu7y2F4awiZZmSnEGVFM+Bh/PusgdDqQrE9TdyX/LbTeco\r\ndwFRFcXqEgCwzPWiRQlX/7uU+8TSJt/F7Aq04OnG09mJbgIMB7Ia5qAnTObH\r\n+uu6FjdGClqTddtaq2BFDDh2WrHSOZn/JPTersTv5Pv5IBD/QayxrGhrRD/D\r\nzDqhnvXJgQl20GXWGaQuM8WxWCK3rv3ySFcfSihdBojkT4Vg/H+QIAwdfyQT\r\ngqzou+AH7AaJxpXwhnykWSUEYplLyPCwlP/wcLkbHuGPjI41PAS2R2vxCjzi\r\nSjHPJ5gcJPjYOwxbDyFqmbIiBsPGQwLLZS+ZRUyOaeOSX4AYMX+6yRMRF6rp\r\nG80niZkJMIqzn48vSANFd03tVabND2ynzLeLNlO0WAqsJJLADwCfdYbyG0hf\r\npK+KpgroZQrFPg0zagzoegjI+Rc4i8wsbNnwnTALppIuAuZFi9q/lamNNuNl\r\nqG9XEblPbjDIfz+BZ4Ns9xtiVIJIHBTkfSMPB1FtAH6GmXc7w9mR67wYzsGW\r\nokwcpG/jTyej4pnspDZWl4Gp/5Dth/7FSXE=\r\n=Hfkm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220706200520_1657137935392_0.7805070945727792"},"_hasShrinkwrap":false},"0.0.0-canary-20220706201258":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220706201258","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220706201258","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220706201258","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220706201258","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-W8GYYngkI64Qgwf1U50zBZakE4Hu4B8ELd+isLlC75o58IM/j76VuzJV6qPA84M07/1VSG3R+6qt0QgCqLTmBA==","shasum":"3e4e000a0db72a20e62abedbb8b675d22b421c93","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220706201258.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDL8ULZ1AmNiAhLqfAPpLuYgfPWTGv+e9gpYCPWHjrP+AiEAn+zWTknvoDIuth8A0Aruoc+siDLCu6whZEJLarTvBsM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixezZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojlA/+JzpIi7GhhAeoXzXW1z8vNy+2uOmAJ3qYM4EKR/1OTGK1fk1p\r\nstIX4ziDyamLgCoE+w/yVg9e7T0P5nny20L1FSbMG9pH61IPUCzjBbB/kGZY\r\nWY0oqvNjnkXwunjaulTneaah0DapQfYfgXUnxLkWdoAYqruxpRR427BmZxMY\r\nCHrjaw8E7QWinCxZaMRegUyT9XNlKIGARGRfeVXP+Bnrwi16Gs5Gvih+wMIw\r\nfejqBQekshNBEPjv7z9QQ3C0wAsERsASs65/bGJ0VsJfiARPorGXjUUEyRYh\r\nUNL8snJzSCD72JdeX9QfZKOiVweomJeHMtkqxNfFI8w95GhCJofC5iIMW9tm\r\nCVHAmFAvahuBjTMXK8nzHWpoStoqdFbmSwRsKcq8UaEtb2eh6j09DIQIMbDe\r\neJtB3AIsSKxHZWaqBSYcPW1T21Cz11MwAhFJEsiOG4VgAW+6dO96TGNW5Ldb\r\nywbnZ7D4snNvmwxTGWB+1tfWyZBR2qyqVKejSExjkJ+wg2LpoHb8lwVRoteh\r\n8fkXkoGX2ACbLu3xcoBjJKBwmYCAclh0YStXUg4ldg12Oj8zbGLsBrKBoeJf\r\nA12mq9RJVStgwN7CUzGi0E7PhWiOoOVB45w7n5/hM+DJ4la34tij4caVxbyD\r\n7plDajU2NjY7xs2VaLgUl/XXjp9dNrQhrIs=\r\n=qNFm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220706201258_1657138393120_0.5622785773491414"},"_hasShrinkwrap":false},"0.0.0-canary-20220706210945":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220706210945","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220706210945","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220706210945","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220706210945","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-NIplJVlFxm6NwJqtSY1PtFTFHfa5jmbluWpGaE5lZvM13OSD4kVieRz2mNq2xTO8eUm/13FoYSXl6+fXrcVb0g==","shasum":"c37a2f0be1ae5a66d23580795fbf3c4e79f7b6e4","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220706210945.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGNO0eHu+yOFS0CXdmZ19gJc1xKtxutT5CIC3qRkrx6eAiBVdExtsU0ZS8t8Ry3bXxpw2mZ1h/4fox4n71orGNqhew=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixfooACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoW9RAAgLiP+pHwGrcCJRirEhc8ZMvwG3r6O6f7Un30W+S9fY6gM0xD\r\npVZyJRq6tcvAn8hIJNT3QkgyQ8uUh59PxBkAYljcOa0ep7xHWRWrgd2vNUOR\r\nb4tmvSpm+vr8aqmr4wrUzYY/Cff9ZRtebmimXhivuGiNVfVbjwfGn+cCPdhK\r\n/F74uwN2mRf8WNVwWKviGqFzRIsAC/pZ/c7U2UYT1zhp6xnlBH9bGCgmSNgx\r\nURBaBkI+LxAlQnJ8dJt9ZL9xG5VOhFZrfXunZlBnnUKr/MuprrNbVdzmLa8q\r\n0i5dQW8QAcVs0Ifqjo7msbETIdchltN/SB/kkSu/rBQBTE3uC376GQd0yZSQ\r\nnUqDW3oMMi8jC3SOfTTMf63C78Vf1ii18GecERcYNf/GIcIBRVO0PWtx4B/j\r\nB6q3Zv5MaRsD7EOwt6hEl1yT22M/bYAXg4Acv8cOs/ABbg8rDuEnmffwJ9od\r\nWgAsJs3hNP5/xyL4Eken2o2ylfr7T4C1HMqD+WGunasLAiqGEndXs1mOiwL+\r\n0QoOe1RSG2is3XhBjPaVOJn2ZfNzuRMBt76SPvv2Le/5B/wzsV1FICqR+OfU\r\nv5t+GuhKW4s7IUjcdnPPm/IFOitc2gRj03uWodolCKUVI1/l5Vfs1ldgCGpO\r\nTBiMES4+PlBLHm09Pkr+VBcJyK/9U+uFUaM=\r\n=k8nn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220706210945_1657141800051_0.5845970859085008"},"_hasShrinkwrap":false},"0.0.0-canary-20220706211041":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220706211041","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220706211041","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220706211041","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220706211041","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-sQgzDVNespEq5JfX/1rw4SqyLJXFtlDx0wE01Va6wACCVMmucEAXtz+/q9sXInTS/Hxc5Mi9kXLtc286oyScAw==","shasum":"98f6ba59268cbb080aace71221ec261eab94632b","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220706211041.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFiGeQL4Z9z1+Ik6stZyh7gOdMEt+TZXH0JiAVplOA42AiEAi7opjauJnQy7SYAGLfpIfLjYxscZjd6yzZQ1bU6MQpw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixfpgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5jxAAmjgH3MXVUSGwi/1uEkVKdI6SpgmPrP0qaFhNmj8pg65PN5cH\r\nQBsVAvqm7RTt7Y+4U4ZHhnC+YLH0YYqGuClXGWT7EXD1bwACtusGfgjtPg/K\r\n6SR6/VYqKPeuVDfC13gBZTapmJMLpsywng0wrZGwD5LDNJV6PgXQIV0tZ3nW\r\nZTThoqXH08GF/O7/o2lh0SFLPZx67qdLm2tw78VisLCZkTZBAcGWqHADzIRN\r\ncKwZd7k5Mt8pdfp/AZoQSYM/WkcEtoQmoVezkMkKQ4c/jsVjUzogzNOCpuEx\r\nhgfWUzAf90yNjRsVeQOFdXRQIrr74EKrdZ0Dgk44lvOV2DIANpNQSz+7H8Zc\r\n8djTbNLPtHIwJTMNySAwOd1bmdtaEMWgeXSO7Xoj3jvRo39P3DhkhAENctz5\r\nQ8Kqj5PL0CbXSaSjvbSmfxuhP+Nd6U6sAGd4+IZZtfZrxSWA2NmmgpNx2TA7\r\noKWGED2K7TKCGjMP+6xvBU+y1tWOp7zZ3r/4E059Uysa16LrZnm1PLMB1ckQ\r\nNqXuikorAgpTiRsVCpF9Bs5M/h1owQaXu0M2aTDTFlCyI4ac9faqsd9T+DQ2\r\n/wpTFDtI2m6wd/nAwIWq3s40kdGTZwjNy+nVwvR/3wraAlRrswMeWQ2uHohb\r\nG31XJP04napru21ZyoxO99gMbQjinWspdgM=\r\n=8SLS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220706211041_1657141856344_0.025505854133046624"},"_hasShrinkwrap":false},"0.0.0-canary-20220706215653":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220706215653","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220706215653","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220706215653","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220706215653","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-tg5daeEKPqftlhuA/uaqW8i5IhrWFMExfH9PiVWWRgVYL5a5t4L+/KYSnS/LfFFsOk9lbOnmlBPOy75MimXsnQ==","shasum":"b5a424b57aa839ad39bc15f6b9075afc782065c6","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220706215653.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3L+w6INiSrJL/jj0UcqHgxNFrtc09pol6yTeMe4PK0wIhAItTiMYTApyO64MIumChJFErbd2j8rkui3VCWoRSQBr9"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixgUzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAaw//T8Uplcooxo9OO2p1WAly9CFwZlmgcsYAahN3sSTU+IDaf+VP\r\nj7QugChXywSqnHY4Q98PTzVXAtGaCbNmYe9bTakooy91SlTrBQKkFpwte3fy\r\nbu3lpvRJSruJLcgFbRV+k9BXFAyQipgo9RvGDVDv9ZbcAbHH2av8v/wOLq3R\r\nw0M6yizRDCn43TGv+k34QX9xCyAUDAYO513JKYBtJmjXYWe/PxMD6XtNOH5p\r\nQcw0p5xrzmvrClLElQwwAsn2HGQYoVOajPIembZ/UWaURNywYwR5RaTi0sjU\r\nxa3kZTltT8pvqBl2NR892PnDY07s2PspiDWLfKlrnOqEW8HTaj5zKg/xQlrO\r\nCgy7SQ7ra9L3DV0diG+O1tFkKN7gIUSTd6jvQ0VW7hysbRgE3hdfTX10ayVT\r\nihomlMDEsxmrvHm2+DmO8/29lmPxiNSJI+rLnVVIf4HI3MpsiEFEnLSTxsTD\r\n7F2uSxASY8I7YEhfT6KpxSh9C62yf9kqtO/yIAOwaA5L1OOzw584VoODxL61\r\nMbEFIKN3Djavynsdimc9aUt5HVElAyElEfobDRfbdQ/qlSC8T9MZPgU6tWvq\r\neYOMR9ip1HBRUMeIV182WVua9xLsIQTdSmS4uq+wCOLVn/gMwHVrpfPYA/q1\r\nE1um5gDU3VbSs06SqnkXVlA/NIKkiXvMu/8=\r\n=KT4E\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220706215653_1657144627526_0.4029814801733558"},"_hasShrinkwrap":false},"0.0.0-canary-20220707074840":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707074840","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707074840","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707074840","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707074840","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-O1JrzasRLqA5M+9fGOMDiinCOSMnbnWFpFGVwNe6sytabtwBhKZqHwDYJzBwFtaMmu+SdM4VuX/C6DKAQUgAuA==","shasum":"812536ccb30880c92b1f2aed23eea15a82b9d941","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707074840.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH3+xkLLbZlch4LPBON//4LUUXq6mTMFZdeoS5IAXcS2AiEA4WuNmqqVk4krGEv5DxCp6IRSODL0MUqZRrU5sFrtcjQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixo/nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUWg//U3N3NsMy4Ay0pAaYwq252EIEM2e8Yq6+eWCIdMyxKVZUuheW\r\nl7UF5RbBj3nPOwlrRpJzsJdR/iJB12YCWBi7myIHZc8ukPeuNAlISTT3v3mN\r\nWoF31u5DpRB+nPr/Nvf/4okLYP/aZQFVXxRqUlnasW2B29L+UJNL1FsrgmrM\r\n1tuPwy4zoOfPGh+XLiWxevUw4kolnIgjzLek8K/FNEWRQNPiCJXxYaFFDV3w\r\natPh6kSd3Z9Vlki7xe3VylcNGLbNzRG3cq0haEoOUNvMlFeH/74Z7mXJN4Mb\r\nLkq3Uef0b1tLgruDDTDQpyp5maSFcQi2Isps9t/tmrwC+eb/61v7tmkqygMc\r\nouvrSbx5L120tVw+iE1Lu/zY6UoiwYEvYTxM1+TgB4nIgFJIYzh6WngeTaOc\r\n6Xg8DAtc+b0azA+RgmjOeW2n/JlwUfdkv2GKLbpbJA6q0jPgxSfB7m2OmIF0\r\n27WjjtVH0SwdwWYBexe7HAfteGTlfafGk4VPr00qcYV+75Tvxiai6SKMXCQ3\r\nT421OXocQK64+3JpVAUyQPx2/3xXAWquhW/GIEW+yWXPxPsBWc5feXI2OqYF\r\nnL9rEeBwUJw5E83ANs4vpInw357KySiZ3vpvzl9VW/RSPDvBUjEtdFpFFW5E\r\nGDU4Fg+4YFxIQOGhpHoa4wDzo77Py5O+DO0=\r\n=PL8H\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707074840_1657180135330_0.96805382781379"},"_hasShrinkwrap":false},"0.0.0-canary-20220707080120":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707080120","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707080120","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707080120","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707080120","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-U3+p94M7MkVter4bBIZiWmhifs3kc8lJAZLhituT0nRl17PqlxzggoVzV3cjGwKvhz54tAxyQL8nuQ3KVY7i2g==","shasum":"abff3e28a667e56b062242bc0842f657e4533ce5","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707080120.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE3t3iRtoYTcWZdDUvTZojjpSsF1BG5Y9VGtHeBDdo70AiEA5sBruDtVlfMwAJSq3L3/7ymzkDhwNJEpvfJUbjVAu/I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixpLkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEEA//X+XhMT0ESI2rl7/CuoqREZrcqZO/j1qtMdKFHZjd5xWsN3/1\r\nALiVx/X2M5wR7XWpx14XbAMhZjfMycc2wLDju7rry9MPzYtTKpr8T4Zu/J2u\r\nDaEqLRdefc42ip9wQ7P5NeG3HyW5ZiV4Uk/LhY263vOTEVNVLh58yM0XFPeT\r\nDcOoNYFDaLSK6WkRrFq0IouLfpgTGaxxWs8Uj9A9ifxxpI0GpaNACnvtvaGj\r\np67dwGr3ukGO8MPvJmANx9zhtcB/eGnPbZNE+eXjy8jRqkUPhBsVh34FpbwV\r\n3MttlxMbnjXE5zd0sf/DXas+WVTgtvJO0Ps0jVuc6s2N0fTbuHHTulamy71p\r\nI34lqiymuWlIMHKz6EASYfKuQhtYuokqH/w1inwL11lnMcLYF1huC5JP7VFk\r\nbLHtGek4fNpXtFkP3HUJr9+9Gc4ixO7or4CLvsa75Gj3+Fn59X6m9vcDlHXW\r\nDtCQCAnhpmbfg4VVPXjFLbeinbJrIyAPO2nu5ziPaGo0dRviw4g/KqZwUqaC\r\n7q2L48DAhSCvOG0uTL5Nvi8ZWtl9K/Ut3673i1xF7k0oIdABvHbWB32Gqcsv\r\n4xsMxAS4RHr04LQf7kSmS2zufhqH/sZhGTSY9LC01xxjKcH/QYv+nP32K534\r\nkjftsKg32vVwnYRn58V76qRPcgojSzuu+58=\r\n=h4NB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707080120_1657180900335_0.2333315077763103"},"_hasShrinkwrap":false},"0.0.0-canary-20220707081412":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707081412","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707081412","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707081412","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707081412","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-t9M2hzQfwd1/1d3tC/mEKBSc6Kj9Nu0uIoPGS32dYBWuGE7gYtgQVYn76zhKRRFFO+ummM25PMFlDgiTaf4gPQ==","shasum":"2121d3e995be00c52b1b670bc5a35d2789f26269","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707081412.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICgKfiM5eB7KleVmh3AqBBxV2kPrawcM3cF4r2lLdfvhAiEAixg13Cbg/0mhCu2jThdi8Q9kku7y/X0qtSTONBrnwA0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixpXkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVFQ//TJs1jNoJpCR+rbk6ZMeTeYt/ImKHMZy6P9kRHFne3p4j3SIK\r\nuFxo1SvH7v2SViXCKEG8FUcGtpTEFuAYA9bR1J+t8uRc8faFGTYzHscvNK7R\r\n4J2L1XRFOGYsM8Yr7G4x36ix/8qZvCdgz8YRNh3GeQklyQxtK+y8+dW3OSTR\r\n/HmXSPpqYhnOBFWzoHF+FSy8hpJxKA0CYQJtWmzBcywMum3KgUStd0LZjYjc\r\n64OMorvtNf9JXbN9R3U0PKm7BeXbN+DWlf94QZEgD8ahaBialtKwOldch7cE\r\nA+oh/HRNVq354VJG4S8Hez5uybIiv4pRUFVGmASCrI90d3ZixyTM0Rkh9tzo\r\nP6EhBWx+HkJtlIE4667gA9htoLsbigKf588OBz25DoLmfmJcfF1GEjidw8aW\r\nBWqgihjyEDFMODy7cXBVMj62/6i7u2cEk5kRJ+cD+1NHRkyDMgpVd0donavN\r\n/3I1LZM8eZ2ROl2AlpA4Ub/HonDafWL012EYxW/Y9m3O5t1mgUgR9/6GzvWn\r\nGsGojOzvFH21CYPEXUTbpqxFs4K4LEcR6sZrWkMMGzBgRVI5TnPQw8DG3oTZ\r\nF52rgnLdCWhefN2kAzT2aK36EaIG3eRFWPvOdoC2U8TnCTo51u+5ztZY3vCK\r\nl6RlixCbiEAjcp3dAeCQhLeTJCUJZEvMrMM=\r\n=VhW7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707081412_1657181668180_0.15713593160982864"},"_hasShrinkwrap":false},"0.0.0-canary-20220707082306":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707082306","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707082306","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707082306","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707082306","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-7b81vaVMTXP1vmr8p3J/H7RMhZBBztZ16qjRthdBlcm2QGStbEKUtu+NVEAGGuOXO8uSY9/sGYF4byrUks4peQ==","shasum":"3ab5e9643a3ef69cafac6a5704142e82734578ab","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707082306.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8oe1Jx+LgmfyJO3y/4N2aMYnD3qSqA9ZlrsvsCbrhhAIhAJqDFKh4oozt0qDI+I4NPYI+hu7Os7tH48DawTZHChLz"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixpf/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoF9hAAkwgY4+x2NOon/sq8Xl4F+Es0q5H48mMGCwmzr/1bQTLn1Lr4\r\nKY3EeRf56VtIUjo/gc82TVpPckpQX0kKGmGeiUyT5o/+UxPvQXohrX3kBdQB\r\nPbmTawIo8H6n2LYh0BEhRTxaL77AujqjO6qFMFwy09ug1BfWeoloA4HOhU1h\r\n20MofnRCCP528v8rN/FflNEC+J9jZC/Pf98Mqk/o18ZDjM8O8EZ8S4dxQVV3\r\nrfluq83sl9QhfbSxY0NzGL5/TPP9soxT6jfAkdUl2RiT+ubnmkZihP+Nw8sa\r\njKcMYZV1HtfkjOYl1PMPwz8tCVlxMjmhD3RlpZd4DxLrq8DViJkVL4TiBNzu\r\nIlcUoXa9eoH1wmxD7VETd01fmU8p4L8cS/DSoa93JDMHhpRHdUK1QSf0Z/Fh\r\noOd/X7nfkIsDusL8t3a4QqJRSmDfDa9UouAfQrJfzrkY+eIhtxZLzNp56yKY\r\nNBQ7CSNCHOBHlh0C2rGXa4MAmbZ3PmCh6Lj/ipycr5Nc8GH7Sag8I9Yc62mK\r\nosIqGzPJDO9wAv/JMeG+e6Ipr7snhTcXRaFONuHgz/R7hJOXnpPmvop7/6UP\r\nmlZefm4HZDUE3ectdpltHx3VEtN07meSCmGrswpfQTPh2UViofuJ/Hbm3SlD\r\n6s5jaMWsVeVmbG/+wkPefOmnOuBLzk/egGk=\r\n=VVfz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707082306_1657182207063_0.2424054501925481"},"_hasShrinkwrap":false},"0.0.0-canary-20220707083339":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707083339","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707083339","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707083339","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707083339","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-Ipt6nGtY8pfKpzCZ09i0/LNMkrm7c/O/cABr49YKPat1EsnawHfvf7E2G2t+hlhgHv4LMR2M95mqEkrvdzzbVg==","shasum":"5362891637fb918ab690420c85b569df6f03a46c","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707083339.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJLPrGY/1117HVps8JNo7G1jZznqSmZ6dD4uFP66hxfAIhAN6j6YTd7loE2J6P4ThyStq8yifSKRCtSmEMJtiZ0Ejr"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixpp0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7/hAAkYa3jDO0cXyvJo54yynRCh9PXSlEgJTN+WGYm7Kupmaxm6bb\r\nXXpG0HmLaSrg6cg2xw/BPkQNGp4/0l9nRWxDyTcmwuxt5DDjyLW/YVt77x/+\r\nkBe+rA47de3okJZWYwhEtHLn4OBULSVsF91C1Go05uZqPjpjOlHvphZCBzMg\r\nbDS+p2wPz8XXUM9q7W8Xv+aVDE4TIvD8oMVHMIvBxziVSo7BkE8Vx+/WOxY0\r\n7cY7oDD650yEFV5+TZs6aT80NFrTCl9UNgYV8LyE5F3Nf5Fy9RVsvHZkhJXN\r\nVbrS5lB2LvDfHViZl5fR0pEBHqkMXj78u5VNpPcRTF2o9NPEPG1PPU8TJtXr\r\nILH+8NpiprcaIn4mFbXknKhcL/8eG7l8y84avH4kajGiZvr132+MEi/WPLzm\r\naF9mB9uZvywXeXeOVqTK6EseetwQMMEQ2i17gkiqVG7uBTQ+CmmPbbWvNY3C\r\n4gwKkA/1cNRFnBEKehUEsecLjA+9xZK1ad2ZM0CknecHWDGZurWsOsy9cjiH\r\nAfl0sIZ5k2GDEFBFwJY3B1VQkXf98/G3U1DQkRF+YQizp32rQU71slIef25h\r\nVWXSvlBzHVbylrfBeRdkbEHM9a9eT1zc9VOXMKFmzBh9E6hr5NizGcbgccyb\r\nMcW62cSriHfoSMrithOi1SLXxICT+tboQAs=\r\n=XinY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707083339_1657182835909_0.4858705024329224"},"_hasShrinkwrap":false},"0.0.0-canary-20220707085441":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707085441","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707085441","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707085441","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707085441","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-iN9+Y0K4N/j3ICGqiajRJui3KKM+poDhbZmYC/wXaWpqPMjfboTrR3O/YJoxztBpldiW+yesYdlaac2ywczSxg==","shasum":"2fe26f62c911ae8933bdd87c8ac41066b94723a1","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707085441.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDAvoA3TKUNtKrJlhLvuL0J2eO+4uyHhnP28JNQlSTxHAiEApXaljxXYgm7p9rOkgPz5rABiHoCdPrJSNeduQhdh2Ws="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixp9iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqW9A/+L4xYtBZrsGbgdJzTkMF4QTSHREr1F/NWzqvsC/OjI0F0g75Z\r\nWkz5XNDxRMCwesOj6poKhOvU9+x6JZIXCu2tMzCGPU3EFE2hif23BQXYoXWa\r\nwcAnK9qjd0xQrNpHOIzLXF6prRg+hLqkTke1RvqY583lwshlisbi6l841jcf\r\nf4wRoa1vkHIH6KWFge4wynkVBP8a/iNLhYInqEGZb4me/9UZikA7mEdHv0L6\r\nctXkEikGwhe85ZzIaJi5LM6i0tKa/mX7d6yZsOcxTHSl0KVPTCpY1EH1NZNr\r\nkUt/N6qbLoeCvafbRXDAozG7IjeJWlwee4XNJtRtFrq4zZjb/eDbITHFefLd\r\nqcURwu1/UyQZkmv+7gz2b1qM0g8gR8DyHECTw6wp6qMvMj+2GY1NSFQ9Cjgr\r\nRDJkV1egkW3KM6eEGcfVx6dwG2Z3kSdOg5qbU11KM1FD9yRKl250Ted9CSM3\r\nnr/whdBxoNRTTFZyBiXxat+jmZITu8jnFUffxbo4lWB7sVJJoLQFRwHuuYAN\r\niDA7Jp6SDWufX3HLfJD3AbYUpk5meW1SDd35gT6ss1bS5FAJby7MwUdV6WTn\r\nfhsyzI5rJmKxxPMXbR0awdTgBBhmNRa87lS26GyL7e3QeEU5EZQ20oceA75b\r\n1Z1QkZuaz3kSokmXBEOuPU1FPlTF7EbLbM8=\r\n=VPu5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707085441_1657184097952_0.5346481196996491"},"_hasShrinkwrap":false},"0.0.0-canary-20220707085902":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707085902","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707085902","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707085902","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707085902","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-KaTfkboVnKJSO02vJLwKjXfK5GGoJbvvJ3mHmCTGxGGs51VX6oXw8KKtN0n2EkM0uWOYQ9Oha67Xs3mNdJ6g/w==","shasum":"e85d81deaabcb8070ca5e0fe4b7bc47f4317213a","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707085902.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFxk6fAG/x6ODFjWHQ67asrbyK3jPZc8mBJ3EG7KJMemAiEA9KL2T8bexcfzOkWfM8XQhi3AcmGXgF2oF8nezc4h3Yc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixqBnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGVg/+Ih7wF3wFdL7Bodf4Ibj2DffD/Ow8fH5gGskClPRKm1Cisrkr\r\nvuJ5SFRjG5ZYDlfTl1o8L4lVw5lNAH+5FJoqVwK7KFUvpnq9uzIH3z4YnESK\r\n8GsiTMk4RsH9vZEYxjEaw9pPkR2l4Wu1NV4/xeITgn8Xb1AK7hGhq3Xwzdt9\r\nw0UEAyvRmOoAWjO1zvUawFxHWXQQXQ9gHZmJuuq+XoW2pqC2pc8t7aTHyJr4\r\n1mUnQm5y9rxd7JzN4bnDR/kExaeMPnscALQTyWLEk5oIY2h4HNPVe+AoktWl\r\noLItBkCLqsEBAdM3ThlwPAqA5aD9RRoG1317N+TCdaDxoUQ0FW6ZU31tBULf\r\nBkzuDl2tQ/OcAu780hI/o9Q7UdODBCjlbQLmJGzvX8OhpifGOVIhvx4lFTuj\r\nyLo0yQ93ZrNVALP6STbKZdfj0XHoJ4FmcL+Zmdmyuh8MD6M76NM+8kKSZx+v\r\n+7DVxlRD0k7y/y9leZlAZw5gIlZTDMr76aB/xIrQb1EtYTb01CN/kiKx5Rhs\r\nsNBTD3P15hcmy8rlrIxu89HGwSM/2aDJJ1sc9z2+bCuf8ls2OGLpPboIU8OJ\r\nMIPg+SUq9pm4j9butyiVOc4I5/BCXJDdtRoBu75LqgXDgIky8dV0L0gsWeQG\r\nXtExtkNaZbrUEIVXFaoPsjtRJADRMADthfk=\r\n=EODq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707085902_1657184359606_0.2563298500766875"},"_hasShrinkwrap":false},"0.0.0-canary-20220707093602":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707093602","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707093602","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707093602","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707093602","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-VM63GklPKjU1xucgp6fuNneAKaZ/1JqOsBIgoGLe2KTD42J+8UyPKmnfPWgeiQSE6SbP/9xo3LCrwyacEqsNCQ==","shasum":"89dd8f9b2a00ba39c25e835141d5cbc465c5f1dd","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707093602.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhpggNfXv520ci77LkeiZKJRvBfPSCPXSFvI7gURY8KwIhAIsdWpEXilcpr7RdvNR0BfPfsmhEf5LKlrjieKJrNJNc"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixqkUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4FQ//TKWTbI7BEZGHn2QBiRUnwqiaRRKWKlFsxqP7sf7YflBNRTFH\r\nCAQ9PskOEUvkFO6bKm//nz9p0si1+7giI1Qd3tCw4eaIJQnlAcwb0c9AJE57\r\n+1VGnFAgQ8cqPXRy1ONjduYCNtlXN8MKvewFS7YgfKwBQXD8nTiplmX0EpGQ\r\nlHkUHI5EQSUwQ19+OrCIFxJ5nHxgDdAjfoKbVaF+mAXyZeEiby07cvFby9ZR\r\nikaCcgW9m84DKDV8e0NG7bETcC0Kwd/s6Ya7ZalclYYq1P+VNfEuVaAmUfqh\r\nqQjp9kdPxoDrwsApPFFTrEgP/LgulFTWAhMGrt/awjaNtoSI7q68JBmEGGYx\r\nVoqv8KeBI12ZWIDhfIzPPBiGU9YbN7mPOWxcIDUNoRCEvzh+JxETuXR/U76w\r\nA2pHFCNEdgh2DBjA1j1TaDCirWn57K4i1K1UxghobfoEqUGtqujbrpJfZ+xz\r\nRdvv1E/A9uK8IZbdrcuJYRn+a+TRcirQkZcAuhlsWWIzbZVal72qWZemxvpQ\r\nFUJsckfYYbuUCIQwgJQTiTpCMHddTJcwvRXKlXyg4IeCjfxbXjMCqVcEsPrU\r\ntH1rCuij4EQDNi844+tWj1PqsqAfyG5LQMM9EqPnTQXt7VYOFpdJOVTyjQN+\r\nQZXxleRrhhFTNuXX0BI/Qqikiil/TDMD9sE=\r\n=eug5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707093602_1657186580055_0.42562643348975326"},"_hasShrinkwrap":false},"0.0.0-canary-20220707103051":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707103051","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707103051","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707103051","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707103051","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-NEFvnSyev7daCPJHvF/NxQ1SBn3Z7VDmu8045L6k6gGMGGrNn+GWUJFIuiD4GF8JxXk7iRXOg48PPshxRQF/kw==","shasum":"fea9441aa0c966d7077c9cff9e1153e55154d9c2","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707103051.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBHsXqRNjrgAZud6g2awSCkiAGQ+G5vE4Hriws1nxHEAIgbnskA8cmv7gbce3pcjhg0m3xAkwxKaN8n4xwLSarK+M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixrXqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr21A/9EXIpFdKM2xMu5q1JPIQuvv0yODqhZ9eugGZQw9qrAui55zsS\r\nt7uZmJ1suNXnm04GsC5vez+I9KeLxTyNWCxCqyv233q3jUGWjKEXCLCHmlt8\r\nj0S32VNIBjFvtLqHldSkGpuVRurCqiS2BtDfaDazyF8I/Pe5ylkz5aR66PGC\r\nOFo2LTKu4P1/CPjHRQmOP4MA9TFgPzv61k03/GbUmM7rd686UPJpz3GM6EHI\r\nTCkBZ63GVQxaqayBJH1rzIw1eoVcMLGMYMuVpemgC97fbKRKHbcYVtbdKQIG\r\nnp6kt+RW6REIgOBxOkXtucHHDOgln/RefPAaoYdyEA59Wmp6kEzYvk8JYbhB\r\nde797HcKiRvAmKN8AHZ7DXPajIS7xAQxBSs3BYDzJRo1rFIKghp/SP9fQTY3\r\nQUFS2DJoxVRLMveg98hcbaLOhPna2QvTl1OSHFTePUbdn12ylH09cC3MOAxc\r\n0XsxiPLZzY5LQ4IMedJs03GeCPwqkVpuEa4Gf4ziGxxggQBvQopqAdIjBWCZ\r\nGfLGp1/ZLdPnwwXB/HdtntfbtLY2OjDH/rBbOJ2rXcmDqGR9cddGQUzs8vgU\r\nx4tGPoVJmKnFAPrAohimDY94vxsgR9zPE2nTMK/ANFZ0SZVE93VqQhxptUOj\r\nS/ILV9LPYeVzzxsBeGTcDLlR33N7/9VJaHw=\r\n=sbtb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707103051_1657189866223_0.22701777890224695"},"_hasShrinkwrap":false},"0.0.0-canary-20220707104822":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707104822","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707104822","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707104822","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707104822","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-MlEGPL5BSdZwUmibVMz30DjTYPv8hqduwv6kAD69mWJlE41cUNkmKjoi/S5nZsa2bU9hf4Gtp0xEz1kWXlD9Qg==","shasum":"c1159047e2c2c290376954b2b7913b9607df3e56","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707104822.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4M8ofq7xO9WvSnP9rFh4ImC55/BgweNhb2HhHdpZD4QIhAKJ94Ik37P7HFXLjWWpM9gWVS5eIMQgAgWL8O7uZFNQ9"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixroJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmry8w//fdsCmv4TV70i0o3JhXMVs+sLIvXat9SLDvhcGg/9TtIhOTIf\r\nZQzOF4GpUnr6xiPZY7R+RmsRy5SepDe0+4LUoVrI5aa3+0eckjLNhsCuP2UG\r\ntcSicOqOZi1UlpXavIjea6j93Ey8NhFqW4yqUESB8OqNMDR/GnYTPxF/iRaj\r\nNhQplzane6xis5BhvCKeWpYYLhwHwt5W/DnFXRYc+UlFkPY72RSFeM70GuOE\r\nBzJ+uh/hc+D2SHoVm2wXO7OYAKxv2iKqy5YAmEQ86iZkaGpH271SgZ5vzE0m\r\nJKDrqVA1CC45hHlRsuQVzV8AD09RffNm8OUKmCgriPF6ovmNzr+RiC4FCoN6\r\naao2Mc3VDai7Xo8Ix76Fzocpai8r/IheyFIoXSz/cb/4tTIq7UW1yjHmct7A\r\nstv2/qANFJhKdTTppfJvFl4174RP5Kf2eoRS6ljq3CVEG59othvKlcUWHhi6\r\nfcmnCWgTBB/cImgAlEeyJsWOsN4hzmD/HvFwyFCBJuoAemKwfneASeZPgC4v\r\nxlWe+nxe2FTS42AzcHhs0/3pELNM7YRZC/SeAYh3Dkx8koWnZVVTFVgLk4KC\r\nHa0OzLCdqER1A8rQi75eUzyA4PyhOm1/b25EAUgKrzca6YD2oGSy062fUKrN\r\nwS8z/fFsolyLlseqrm9xzB8Wi89bCNbXJzE=\r\n=8h30\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707104822_1657190921378_0.3495729370344314"},"_hasShrinkwrap":false},"0.0.0-canary-20220707111132":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707111132","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707111132","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707111132","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707111132","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-77xxA85tqSemDPm3sdVdR/l2HeZSuLaeab5kcyq/MAPkMF+z/VtiWpJcacEHmZufval7ybyFMfcXFNm9dCLo2A==","shasum":"914cef719f9960299a00ad3c3ca987944206817b","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707111132.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHYVpEM818hVaffhw9dLJaufA12Hr2gNelNerkCWKczcAiBL+0QBEPF90r6ROg4Z2M4f05gDkPp6U4E9ypAcGBsY9Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixr91ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOqRAAn75gySzwK2JetCbnRz6BD6RgrqNd/QUAt46rRTVqIreypeEf\r\n63t1FeWCqEwBBCYNV0NWGkbA1/7me2HLOwqaz/papyPaO9h0JRYOawyDs1r3\r\nodvXzI/7HNjDy9aFYVzlo1BUZaBdY5OSbRXS6x8UAEj+1GG9azaAncgE9p4l\r\nyEyxYGuPRl+v7EkMi2aH4jBtvHWYgOl7N8RAl2pYvUX1GbkwOZhsNQAhM8os\r\nB0MK7ab2EQz68g3AR6nja+PLvI1fkisuE57mNELPlbfklq1MjOu2TcuDxX9/\r\nyzkZws/HOK3J63Wpu+nKdUmismd9oiqxyPWb4/K0hnJxCOFhK7TQO0EoZ9jW\r\nolFEw4ySLBAfV6TK/TmiEs+1q3P2dzhglutGC/GetgHAJ/zTof5ruyuCUwLA\r\nTofoga90MRST+jL5toIYX2RGAXpqc284+5XSND87VvgKTdhrmu3eAuvxNuT7\r\nmyviG5dUYMM2a4pfQFrb/rKI82GpIn7soUkyrhrtB5hzDMYyOfgN0H3V22K5\r\nPz4drmTFNno+Fgk9BMfWbjiAadwdi5I46ZF7nDPze9jhVoPWbB0QgV+8OuKD\r\nd+LA6lCHKP41l43eABN49BEoo/6nIeUa1TJL58rqBlQFar1/CmvEVTq0CVc5\r\nBfGTqTcxEYpPIFc9HZ3qDaOWLRLafqC1Baw=\r\n=b0GL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707111132_1657192309495_0.3845765509475465"},"_hasShrinkwrap":false},"0.0.0-canary-20220707111249":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707111249","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707111249","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707111249","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707111249","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-PCIar73qg1QS3dydASLlpR0BVHSy1CWHcG7GsGu+LbhChAxnvtUJc9cUBePvYt47+XXzKq4gk+7IT7VMjaugMA==","shasum":"9578d207eb92798ead651694fc938daffbd27b18","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707111249.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHJicoCmURsCT1I+wKlaRW55THDS0uHH1ee0H1JNihLsAiEAsBxHDcarcvbFJX4JFXiU/bwV9x3s4xF707iFuAtNI/0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixr/GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpN6w/6AmM/nLv29DUgdSkt3V+B7QRL/5JuBxIAgJR4SunK+ffT2BrS\r\nfnn5KZzLltfuGXFb3npwN0T8SpIQ17tudIkEcbeqb9bqs/fzt9VBC+JwFKGX\r\ni6wb0doC06TWarb8MU6lVziaLtoLaco+S9FaZbZtU5VTLPC4Eo2lc0Hwy6VW\r\nk9dPdI6u9o5JQkq11qVnjifJyVznFtN5CCL84H4B0x3kz2YvK1oo/zxzx29I\r\nn/kCdKyqkkmwzq91WXhnyq4pDaa1cYGYjk1u499/R4W4CS3x76++VEIhoHRC\r\n3djZwI7AyaoVEbFJBvxucYAtccTboN/v8+n6xAvyvqvz+R9T4cb6uytmPkWo\r\nQcCzBo5DegYjdgSk26DInh2VleO0xnv7sV4zIrNqiuzh7T7rxq2jHg2C0OkI\r\nwz+HUw50DIWixXOCCwbepJe5rp341Rg8Tm7vt6gmmiK7aMQzvGXSf46ZmNjw\r\n2Y4yJ5Nyz35Yg3DMBDKxBNk2GSmNYhk1XReh1KNZRUcQ0PsKFmrJH4koHT6m\r\ne3OO0N1nAHy5Teaji57Qxmo8/rz5dOu/gKRrLhiAxKJiS25r4PB7oKi/RPZY\r\naiTrA5eLUABJewZ8v3HvV8oVBFmD3Yzp7Vk/vu6ojwRmyKg+xZUlL8anEEyN\r\nnCY3GS4hVnJi7iJtNA3KkT8KBIr4zPeS390=\r\n=lc5k\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707111249_1657192389992_0.42895437872648534"},"_hasShrinkwrap":false},"0.0.0-canary-20220707115747":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707115747","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707115747","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707115747","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707115747","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-cPeOJLJsI5NwGtWg/5HN9/EofoD39BGXCdwEHCDm9RlPlEGCxylfRIbaY51r7hf/4UUjCuIVzkjN1Xzr3P/5dw==","shasum":"a0505dfd4a30ee9020ee700de7867f3478a9c2c6","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707115747.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEonbyKcAbmbB/z3dmS5w5/q95KD7IlwWgUDD/jNi6LgAiA0/Ij8D2ItB3Ug3vJ8ef59/tv77CYYwGaIioNKf4tpsA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixspOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoxA//Xa/zRynFravq/qmHXfxvqNJ03Zr5AZHE6td/i75FyJqCHOpP\r\nGG5Be4F4MgAIUxzhXea+WFpJd9vZJ+LjPDzlrq+JjHIoWEG4o9f1sD6LrdM7\r\nrrK04tEe58tQenGb/QK7tWv/amOZznafT5tODSxgF9OWXrXOVIUpzOgpjeMI\r\nNXmB69yAMP09gr0wPZV1JQ1wHWkMYPzJclWzHLwBxuWYRmKRTeTKM/ADZ89k\r\nwpTetlhuGFd6YbXEo7jy9HzNPNNUAi/q5+ntj2qcysoBtPbLbMyQs0H8htmc\r\nrEk1gvxAOpYUs6kGA3nDtW3feP5YASXxb47hqCm/y+3WQyzxgcJPz0TD05g9\r\nWz3tJyHJbJ1xFZcpnixS6twTx9iQfv0AEdOYyUHf5t61NTKfcPQ7E/ARIN10\r\nA8oMUuQasOj0DaD9wHdDkaX0KoB82kt7ecKOA5ZbiTcI+MYE9872fGiqTpA6\r\npVzFdnPiE6A2EMNj3sbyi/tH9FVYvwnFhwc+NuFPXMxkPthB5XSxBLBHUOUP\r\n3DDk+gWV1lK6DDJPWFHWAA7lQ9DcmdAMMQBfRIfaNYwFCshSPkXQQqTtNB/S\r\nys7wVxDtj0QK5DFpdToUM7JhamzZTnY/Q0iIRldVTObXiNSqCtB+O0F2GDqa\r\njTIC60VZYfA7oVtx9y9lTwEjwdgE436cUCA=\r\n=YR08\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707115747_1657195086068_0.007838759762603509"},"_hasShrinkwrap":false},"0.0.0-canary-20220707120522":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707120522","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707120522","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707120522","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707120522","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-KlXJ4EyfyElxbyvmY4tUXbDrMXz9VutkVnwiFY3pAp5q4mG151rXw3BibdHXppkY41DJE9m7PxTzH9XGxg1O3A==","shasum":"164f791e909d347499fd2b2f41c38f64124caa23","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707120522.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE+ue3v2HYUYrCYNNy79mSA4Cik2j7cihsfRPkWtfmI7AiBscWmKhu2NOT0dIfeSkLHMPqfcOf/Nef9w7sR08fli1Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixswUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrbfg/9EJqXSOrytnaDzzZ9/m2LyoKhaw5b3cfeSyKg+Cu5/gIt10y6\r\nVCWw9Ad3KE+VCSaFcCIeEmyh18S/kx1uPQJ6VJG65IxhnrNNqSn1wmbsY80B\r\n+DBYLDM8iDqD/CEgl9FrhlommOE9WQGv8seNg+tlFjBDcoYsfHk9+D3o9+zj\r\niOTskryPUkR1k7A5hq3+ZOjDWtgBOUxoEmAMh0WvUW/52xBPRy0tnX8+n74N\r\nh8lYj5Zr9u3A/GAEMQv0T+DydZNZ/wl/GG6oM9GkapgiCZrb9HyjRd5cYHpN\r\nPQwTgA3+GSNEPBSVh7Fjgr5CwdqGaTgg3jdxVmrY4TNG9Wu8tzL7FHOKmFea\r\nzg+9y2nD9q6Nsl/CVJBSg0xWBMkn9NXEFtdo2U0KXS0iE7BfoHKZ8u+uC/Ko\r\n3uqNYLk6NRvorEc2wVo/7eojKQDTuRLITSqUyMXOcjxpz4VsRvDsxh154WkZ\r\n2wOHff26gzdd9z6wcse0dbMZtycLVo6KJJd2OEXmz5Makc5DJWUZRP1dI9Si\r\nqWxrKCfHdHQl+coSxMw9nemmGZGzNooi18149orl7Ot/ZG6eR/yXluSYJ5Ru\r\novHeEHGFQAmkAd9s0r8xFisEfPFlaEypyF92MOfSSP8TifQJFlWrMwI0gUlP\r\nOu5+oyfRShPpuTHyOnoq5fXkOT8hM5CEwGo=\r\n=0WvE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707120522_1657195539904_0.40640560551712857"},"_hasShrinkwrap":false},"0.0.0-canary-20220707121154":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707121154","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707121154","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707121154","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707121154","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-eNJS11QdgGhs4KjeEumFvUs79hrBv2BEtQesF2BZnuFU12iQ1QQUtj93k6i3OfAsOsJS/Fvs1TmwMp9Yo0w5HA==","shasum":"2ad50864fabbaf3d25d653d241d4beaf5536a3bb","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707121154.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6IyZWyOZCHwgcsYJOHFHgKKPHPCcTZdXP7PaSHlyoagIga5xNms4SiP2+ZLWGVpMaKhIg+9LA6Wr2b8zGIG2poS0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixs2eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVwBAAguWelxdgSHI+dT0q4d9rRHRNw7U59Q+L26PPqBFhsvoEeUTE\r\nuLY1MitI1d2kvPwFNeV39dh8u3B+Lz2je8GQB9/EnF/RWdCMoY3nksCjK7+l\r\nqGljJShzXrBsMGWl61qulSR5Kw+y16AFvbiozs83vnZajl4l5dpH/rQ1ZK/C\r\nZSA0DEOr0m5nAM6rqceyuZI0LAa77VoHf0VsXkn516nxS12Ntr46giC65Jn0\r\nQlZFb0HKni9XDAq/2pmP2CEwSumeP7AtCC5rDHy1Z0qgNb2IjoIf5ZcKRr9P\r\nvciKgUnxZ5dPNNWt5F5OLhuP7hZCAfOAXXS05F+WM4aztEzkYasPLVt56EKN\r\nANPkkUHTdwAC9lTHnOwrQitWWH6xpD0jdYld26egV6eKZSkyYTAEpDs5dBxG\r\nqqlCYj3DbEuup6AwDj7+d482ozDHIWoTiY599OjS1IAz9fgnRsDYnK8522JW\r\nM22IkYHFHohnUYPjpqWEaDQDeoq9Hqn06rpnbhov5tqDhxin9rUy8Zcu7KWH\r\nUzFvtOIcQdb6RThnGJTsONnl0CvNHbhXG6AZcoF4dZDuChHjLD0xszVWQP49\r\nJhOriRgAqeiwm9fc/dtDUw/HTRPpF5S4p4DXWpdylcYSC06rhyuBPozTJb/O\r\nMSb0kbcI3dv1EXA4LU3YPwoOA5z6flXgvh8=\r\n=RtlE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707121154_1657195934687_0.5555587361280769"},"_hasShrinkwrap":false},"0.0.0-canary-20220707133317":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707133317","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707133317","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707133317","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707133317","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-mcy0NMuePwdDBg83/xqSPxe/CjceTlhuS05oVy0oBVX0t5r9tq3YOPCqzvbuzC8z2cM+8UatjEuWQHc6pRpSmg==","shasum":"83a30147f7a59a0a3b8bd2573301750ae05f38fd","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707133317.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH8ftGvgtbHXoD5aoJdihLibu0KYpQ07+jOsh5D1Be1EAiBoYvO5WimU4qLcBeTVVGjjssxOz1+jPqUX/PkEziUr2A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixuCvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAhA/+LTt0p287A6KQLgHKgJerLMAYXRNtlvIKDDJKg4KcfcS4MJua\r\nKq3TSSQqqj3pK5basZF66sAN+xSu8tC90VUvA751W6xVyPZlhU7zP+Ed3JUz\r\nxR3zRKElf5GNowfzgnpqrSMqe5i1tasc0fypIWQlbqSjHWnpVKLVbji+T9tQ\r\nFoJbOw/1NpQX0I5aLzey7aDWh/a3wX3omp3GOTnBGt8aNriEycm4K/UodSTN\r\nOjbRn909MowX10ZWMNpRDHEG+rFTMHiF9jVh4bG89PqSB9FQ2KJw2nUPfyta\r\nfTie/MJZdpqKcyy+uhWXg9TwvewVqh5HhXEs+NU6STPHdoYKWr0Wf9yEEKiI\r\nsQYNSlEc+XXMY7Jutte/KZa4BctL1wWxoJ5R0vx2zBWXRA7DFmn1+uYRi1gD\r\nwZMo+5s6IPCENj8OLyu+pSIX+0yH0mVLIkva0kjty1Gs9WWS2bRW59IDC+jx\r\nsmwoKv3gv8W87nGnYsElGCLSA6SOJph1Jfj0Fcgm4tLMm+ITKvEOi2LCD/bE\r\n8eTgHroMonj/laag7mtRfHgfXBPBp3CwkCscNmMEKjj71h4L7dgm37L22Z9T\r\n1d7jjNiBV7Rs7IMWJjTlf15rwWKunWld1O8zlcekVmMChqeap1zxiIpsppvr\r\nLQGBIDbOAvm6G3DKCTInjUnDfXOOGwQQ9+o=\r\n=H1aN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707133317_1657200815205_0.28804756789126573"},"_hasShrinkwrap":false},"0.0.0-canary-20220707133418":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707133418","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707133418","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707133418","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707133418","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-ogoe97yzWEaVlRw3GrngmYorAWSUlPymWnW/4FnupMJFlog6e1ovX/NzCBbuNr3A9GkW3TXlZqOqLAhbTdPjvw==","shasum":"0870621b8f03e66cf494f9baa4307e3935958383","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707133418.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgy5zcxtwd03DpfoQzRZOifAr5GyKUFDKUHWTZkvI+wgIgNV3vbRRVbl6DctXQyhojuLV+INzqSlg7PrE1Ts4FgAM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixuDtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5KA/+N05pHktPm8yPNAE+g+YZbKS9eydb21OZ+1x9BvFKw6hnQn28\r\nUcJIM4ROSl+dGfRQ08cMEzlEnalGMLCFqLevAaZydKgNOVrSHFuP8Ig8Y08s\r\noX3KW4pWD9209VcKa/AmkQb0WT03ZBKJgb2Kb52WlxgJM/39C5rb+Ggot7r4\r\nauwaBwnyzhVf9r4vy76LQFL4uELuLPWmuDnYSbmw08Zl8l5B7R804NHe6Win\r\nNtzlHooZFybfUL8HHJBt1QGLJO64ngiDCJoTWRvyLGxB8GsxgROuelHqtHT/\r\nKOryzCl4xVlHAe5wg5R99+YhetsXYMUWzpJGKM2NYbaYyQ656CeyXsuK6N8J\r\n2Gr8tVX23ETv5Jnp1fQxcvs0Y8H4+jTZEbgpiEFyjd4HcxUjAisyVMbXr+k8\r\nDM8POj6jTOPltHdWgFt8p812qqx+Ga5ycGRJ5313WweyspQgPLusIPf8BPi9\r\nS8jP1X/2CORISSdnqtSZKOQY6Ue8gQGqZkPlIwWjw7cN5OxQTJ3NKBFvGlFh\r\ntH1FDDpNpgQHwnCFmJtFRAUdhBPrh9hE/OOAeXtQ/d0NnRrs/2dtOdMXNCuJ\r\nrJXWpD5xFXPfZ6EyfMo9T0Q857MDEjkHSF1qfLr/eZ4DvV5g18CO5WkGVmbr\r\nNS0dOENGQR2LNk0JOntw9jvPRj7guwA3OnM=\r\n=QF2S\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707133418_1657200877342_0.1461646614826111"},"_hasShrinkwrap":false},"0.0.0-canary-20220707141633":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707141633","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707141633","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707141633","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707141633","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-aUXYip2gz1vyiCuUsTHSrOlJjXGDz19iCh4GJ0is9qlmrZdNaMBIwp6QuBwgUjzIdbkRK7LhzWXUSiv1Geu0IA==","shasum":"e6859a03cd4d8a755dc865a79adaafdace57fe1d","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707141633.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAoLFbFvjoR8EWLV5JF9rGi/2X9L8b2ETczg5yx+OG8FAiEAltDcgMGalcNFFAN+OUy6YeqXCNZdrdlBdxdVn33qFEE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixurRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonZQ//WeMNiCNYxYygkuF1ufZlJbCy8eqVnhlbIq7xRjoXpOAvViGa\r\ngMjiQfgo0eeF+LE23WlpD2fGvID5riSMxPLYac+rckM3wLIk6V8UdTNTFk3d\r\n+F491aqvqdClFelfD2phcXD+EHCk5lwaZG6+2TZyW80TH9PygOZYZiYF4+Bj\r\nXmCiQs5X/qLKytkSk9dfnNlb74bLPyqHKDk7QU9H8k6JhdA61lzE3L2cyepQ\r\nOU8Vp6KVy4iTTJlzzg7FMAiYMzK785GgExBn6Dyo/ns6Upk8ykWIoJi883/j\r\nfxyxOPEzNhzpe8ZWt77iBfsUvlCgoucFSQXqOJE+uF7zWGnpGP6kJMKXHWz9\r\nbqaES9Yq4Q19vWGo0m0rYgO9Jr5ozt/M2nmPPCUYaG8RhVK0kfW7SZrhMXWI\r\nVbGECtOJHbyMoe4FohDiR2FwqUZ8fkp4P+zQOiQoNAtzRGiDILDFMvQ40z+V\r\n3QW1KaDxSrP0pisAe1huyrBj5YTNjLIGkE9D/xClm7PeVYG69dAbELawsIzE\r\nRXU5mJjxLVj+O1uwevox325GkzEGXOFdMgCEx4SF5ibgyGyjIjdvLNhoBZSI\r\nG/f/GfUfb3V6G4JYm5dYiTS4qx6vFXexnAqNh6QfTwdrYE9PollPFHJPRqAM\r\n7m+iwEUv7G7egRA4XuX74pliCgbELguUWjs=\r\n=O+Ro\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707141633_1657203408932_0.5417944920554283"},"_hasShrinkwrap":false},"0.0.0-canary-20220707141744":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707141744","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707141744","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707141744","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707141744","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-MjBtUPnAzvgiVFHbsxmN0EPNiLceAGzEXQWRNi4qJaPuoBDpffiDezhrYaL/LDgdEJWqZFHKHQN9OxpWnYOosA==","shasum":"936a9c1fa5b66f6c6ec820e25e83990660a54a25","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707141744.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNmHH/f2sf/Lw/pC39oSA+yx97KhcL/QLBx/fTYfH3EQIhAJWMKHaRnt5pW7ZiK1Vzo+KPs2PPASsUqzULHychPiwE"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixusXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWDg/9F3QPDRAZL+BZbklcxHuqG6w+19biwcRkHWR4NYa6GnL566+V\r\n4GUFaPKJ/xnA4/jC015X65JkMZJNUuyF7gXr8Irf8VNsyIUAV9ADGE1kZDOZ\r\nB+s0y+ndslCaEaKwvZ8uQpuvF6G1KAWBU/S2ZFY40k9RMiokJtRGqaOcPSfj\r\nsaOQhVzDOE3QtaqP2up1Ka5e+YZep3PVEBpGKeeKPSTVCktg96c7w68aYA/c\r\nT4ziD0sAIc/LRdpB42w1WZTROXWj5zmpcd366OkEQ6qhWftCJKtOkTiWy59G\r\nn5tGQVlVj7DUEoTUKSljBQ/ViKZzWSxANABuvTQqp7koFn4K+I6matDKHznt\r\nSRWD5VNMV1MFCg+xVjFKtRpNAuvKgIF110CBYy9PL1UBypLnfPxMeGKXGUUL\r\nuwNEQMc2oXoAiuJLNwovUYRUSeFc3ry0cjLvcC8Jq54tM67uIm2n4kL7JUS5\r\nQ7Y1YX/Kj+knzz1iiOSohpN2GzsUFkxdlqMGLIHcFRKkYbIN08ZNHYNVbt4E\r\nJAT378IYAMWdqybY7jEd1cqFOGtmh8Bve6hmvRWPMKOYTCgyc4dyFyWRVOEW\r\nwjmuqft9WoiIRrv9W+d9NYflnPbR5k+jCaeviBUQ+K48GpOQGtiJ4WxA7Yhx\r\ni0qxmDj0kwPcTTSG+T4uPajPaZR8UylDEY0=\r\n=1deO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707141744_1657203479329_0.008514013047838498"},"_hasShrinkwrap":false},"0.0.0-canary-20220707143540":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707143540","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707143540","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707143540","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707143540","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-tCZ6WOzq8ZZR6vRjpd7OjXDsuBr0Zb1grPnp8+j4umQe/SNuIas3dHOluYoKeUqV8jnQljNqf1o8SmNMXe+hPw==","shasum":"0232a188cd96d44afc0d1ccb9211db0c3b7f7db6","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707143540.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqiM+SipUh0iAVyrmNyCnMfLJ4GCHViDyA3tEneGL6ewIgXNOAmGkvWXXq2eU0iCVTWVn2c5/e3x0BpRrm2kB/qGI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixu9LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpU0A/5AQBnR3RJPFw4oToSC0HfkWHGc4e/SIIy3cI8v9snqcea9trI\r\nap976Xc3LcnhcvTkpzT3GcFBYZyvVKc0anrePldmdpUTtlLJfa2d876Zt+rL\r\nUG+Jc3XbY2gz6hQfVwCkFMxePNzFgUeabSAdSd3UMz5bQuXM5qnm86P4nME6\r\neDDuo47bzXhFykPTfWAFED0ds3oCkmur71avxeHdDGSdlKf/kFEpcfz4w8rF\r\nPJTikZzNMckgbBomQbqPk8Z+y1DPtInJzVJM43BTa36TqFmYjKVvNtRDNUH6\r\nCq/KYQcgIRDpoKJnUMEH5+NNOUBkVk3Dx7dEIOvE4gHOd3CZItGyt270Q+Fp\r\ndvbgcbzNwCvi6U+ZEVUBs0P4jal1rKjsh1VgA51MAYiNURD3/DnxTkOBtUAZ\r\nDCYbG+/ka//pP9PFLnK3Epwc4d6cqDceKyDIuD34N51TWGlCzFGA9jMV4zKP\r\nFgQ74O/zicOClS/ivQOazIB8O8ST9T1nbzAXbCWSX/RK1FWRwTEH6x5o6TIt\r\nZKfLv9UzV+f/RB4/8ghhpOkEcMH0ZB3uOhR6Zl4dUdIZztZrd93d9zH7aGqr\r\nA7oJYLVgx2ZMVJNGB7w7tFnOf6yfi0VDSDr/ytoQhdLa8aO0PRUIPH8n6l9u\r\n45jZwF5pIojwoy4eV0izoIo2OlJvf2+A1gg=\r\n=390x\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707143540_1657204555454_0.9760134121884174"},"_hasShrinkwrap":false},"0.0.0-canary-20220707150703":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707150703","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707150703","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707150703","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707150703","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-b2wwlDEMxOCqlLEQmBxox1W01mjHitv7mGSOox1hdBZm9pwODVGAYVfVs/fJKKBPKgWqk7tvnphTe4He0NIVKw==","shasum":"eafb6c32c9aa8ddb22ad62f1147a155a176c8839","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707150703.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjEPhnpd9x54T91PCfDQdNrEV/JhM0hURZ33T8OfnwzAIhAPTFMHq3szcVQBs/+0xsextKhy1GbLaVybrK3o9ePKYH"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixvaoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwwA/+O8UhEo6eW3RI+p3XgVgPAdARgNDEyjDBFH1D/dL6K3hY+GzT\r\nUyKWQoeqYPUnJWaKbl4gpaP9GWnAVW7l1vsT0aXEapEl5eONf9jag0UHs9eK\r\n0+rOuHV54xFAMDB9IDHvNSM/gZ8T9CMK4BFvt7fH6il5lcT5uiagZN62ZJ8U\r\nz23N5KgNUOzisl6/n1Srq7XBbj/qjtVi4kFRq+wi1iQaDqM8Crw/C1HHEjgy\r\n+wkokgQdb1wsVPaNuBpdvT40xQL8VHMa86I250uADXhMKGv6CHHhxwB3OLXa\r\n9bazEiI6nc3we5wusc+HaY6RqzwAOAS6fFOk1S+iI38d/0wmvj1wDLUbRtq7\r\nhPqepIqkhlugvvVStOPtvuShIBUL55ZtPPIT+QJzDd27Lv3wiNxsPjQiP6uo\r\ng8I+sRnxt9rOZuQnZFWUKWYTi+gq8QyS7iJW0Xquapsfh4GaxR/+E7bYJv+6\r\nn5byBhvu9zOINfjYMb/3fP4F99cVQnD9u9yf97rYzgWT+7Ir8yAwEK82ckDU\r\nL20KXOJvf2YlXYUm8DdkL0Gz38X0HCw963tnHTdxL/eMaDp+i5cIoTIX8GT4\r\nTycutHZb1M6VnPnf/j7Hfytje5bT6Kxp+cd2MnhXyXy4YKK9lmMICURw6MkD\r\nsoGEnqDQAt1FdKPqpTTUGOuwVJ+bkDEJtAw=\r\n=JNzb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707150703_1657206439869_0.41537193726108734"},"_hasShrinkwrap":false},"0.0.0-canary-20220707172340":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707172340","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707172340","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707172340","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707172340","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-pNkN7/5KqTSo9QMyzaE/5+8xA8JI4S5WUlfT4M5gYUgtTUaqiX+8XU7csXnhLeep/geWKf3F1iGsgdQ4tjsdFg==","shasum":"41222dce13a30c3990c461e685bb393a67748b99","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707172340.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBxOCj4O+cNEY6qLZrTyvcjyljau0Bk5d0lFtB0DYiIcAiEAxZWZRyfZhdSwq6XILehcNb7iec7JcQ4qG+pIck+aR7E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxasACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXsQ/+KAyAXFVI/47rvbkDyyd2FFpcLc2hKmKne/fEZSoJ7KbN8FuN\r\nzkLPFksLap3Exye7eJF06P5END2K2ZmUs8YPlsp100tg/CQ6B6Tx2eU1gFwY\r\nAm22Fz5fkVXOp8ZT5SdTslf22xT3/fN6UioYAVUiXpLNMCxm5nRY0jGEWdjl\r\noB8GNdLn/wGNLPxM9df55rE0eMYPfZCrF05jQFfzd5/VCM6M+dTYNCtvNJBY\r\nrFwpb/n4Aa5MSWPOGYlMk19mrctTBZTBPbvwVnKutnZZ/HyNlx4sNqc+qOuj\r\n3YVi8MER0nGp1JdSn7p53MVB1514ix1dtpg0ykUo6i4aeNHxViXEz44hP8IW\r\nzTIlBwF6cHahqNzEIAv/N1zorsXjcuTKfPlyeUseJczms+7ynHfsEA8HJp3T\r\nZKjquxwdlyOJPSwgcJIvTej4DeQrQye6DLCYbWO39qRgWWfr1OeZcEHUUxXq\r\nQI4eUA8/JDbbXCSLmoqN3M8TwHaghghgydq9XD7+EhXS2L7BZrLQuZ/olb7J\r\nksGKKdMWMS5Xf3povFqbDVqTp2y5DRlhN4N1Q3p9swRln/tQJMcOYfBXSn1p\r\nAN7vHry0XW/Q3xNco7AIcIJNAspvWf7tF4MA2v/deDyNn8nUN49l1f3bjed/\r\nciOKoQktHozEnlnD+iI4jYjfyWXC1MC0xkw=\r\n=z0Fx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707172340_1657214635809_0.8167731461379246"},"_hasShrinkwrap":false},"0.0.0-canary-20220707172450":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707172450","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707172450","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707172450","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707172450","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-EKw+Fm/D/43K2igqt9sY8bYKO3C3psvc1KRCH/Gek993zK+HHzk2+IE3ZAFdsziC/70E6akF1s7ZXbddqiPI9w==","shasum":"1b404e43af23dd21df8ee903abe526cba41e155f","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707172450.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA0D7YFoP4XaFNYoMXboQvJI97y4v02URpf9H21ypMZ1AiEAvuOfDOEKg9Y+86ruRXAdw99ner4a77GdYNXmn5rn7BQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxb0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAYw//QNveo59otmHPiu48c70V12jq6FEWWDNVlYSEx/hDOo9kgi+Z\r\n4KQ0GcrJdkLlKc064cOUmv4LK8LgVoVATY85NiS1Y3OQstY1xlU24XZRlY1y\r\nW1wheC5WmpA0sK76k4NMmPxOV86rziRZ+7laOZe9fxu/fKmcaqo6JYvdXORD\r\nBtJO/mAmMhoo4qNt5qTAMPHY9bB8DPRyK+XTGPQUCdKwJWutjJm/kWjji31W\r\nzDf6K5PiUF8NE7ewurhRaQRuX06Wdc6WHX3gjjYteyNd7YjhMw7PvUmfdSWz\r\nG/FDA0r9xHDDLhJWJTb3Co9TmBTVdBTYweiLHAQlmSw9TA6YEBvM8Tuc2eVi\r\nKma0BL42QCYUTu/+T/7VsWTlXWKH1jYAr5gr415ob9WSb6d1yvQT0NXSp0Dg\r\nZeFp4RQ4sNd/tHqvRyIGhTpViHR4y4JqLXWdXIqkv5e6xaVY8ntAqWzbwN38\r\nK3WmCn89UD8m17gQ/w9CjYh+EEGw1ljKMjs5905ydX7C/AFv4E1jNygaOnDA\r\nQ4ewYxdD4zVtAeFaMSEE3roS0LOIUCSgaYqK7yW8hPNKlOghGFAUcvBLi10m\r\nM+K1obvDSEaFzct59oxpfW0zWDvbPrHwh0/EOVAIzn8IgCrTVpzZPK+onKhs\r\nVwrVFZLrG25XGxbV4hzHdpNciCk0e+sX9Bg=\r\n=5EyJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707172450_1657214707863_0.14760165722826746"},"_hasShrinkwrap":false},"0.0.0-canary-20220707173623":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707173623","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707173623","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707173623","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707173623","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-6B7kKry1/RdkuTTHN1dHm+ITkIKvscxVM3mXSgYojzVX55jzlluXuyHwjHab+1A7eF80HX0pTiDKsl0J7lpAuQ==","shasum":"784b5bbbdc9e92291db8310085ec7dd6ebc50ee3","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707173623.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIQCRFrmu+TnXrDebfWAYtp6PPZs/z7qDfdWmbIkVYMQIgISBeQgKkYnSNo8CcosRHqXfSxG1f7T+240Hj6a8z4bU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxmrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnCA/9Ht5aW0/ZDGj1NMP/m14OyLOHt6trhmtur1ziQYBUeX5t+IHZ\r\niAjup49RIP2ZIcT2b1CP5YtDmaJ/UjTZX1kdAzIct3OGzF14vMOg1sJeGbGx\r\nYUdjUU8aPh5Nn6J3U66J1ixhXRfWzyiM3962J4aHq8JidyfMr5JdHci50Zn5\r\np7F4WIKq4HH/XQu3PQix7zQR3+hd7gWOUxiI5FZ6LFqoljr3ujbWenAk1LtX\r\nBt8BDE+/RYyCS3/7XRYJEcS8dZrqe8ao6U7oKN7hD1a8v3frzPLbTOZUEQys\r\nzykDTb9ZmDcRZ0eEksgIWbekERclk5GGC9IQIETz7+kOa0hN/CsBP+fHXpjl\r\nc7F3VjRziv5/gywFzv4z6jDLpbs/6UfrvsD6UqO8fI+KWZc/+dcwop2VX0Vh\r\ngfjztjNY18+zTMytabwJdQJf3kruLp/CToN7ffIdR0Re8cKQor2LPHCoztUx\r\nnpZ12QY1NlnTUMhzNtCLuT5JH5h392lBIVpkLfmYWJEDjIahtapPXdLyU4ng\r\nTv+ZHAfoak+sG/sR+Oc1NGKRhqLz5vbPNs9Ig0+93wBnbsOySRaC8t3N7BUU\r\n9joqQhG+RB0JvBof8jggqYyVyZwvxUnvbNMvKZd3BZSYOC4W0Dv3VeA4kDF1\r\nH1kaQ5EGcgpIpazRaCOO2bFIwLZkJilcw+E=\r\n=4hcT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707173623_1657215403226_0.10989187608283935"},"_hasShrinkwrap":false},"0.0.0-canary-20220707180205":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707180205","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707180205","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707180205","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707180205","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-eJYV+glgsXCrr4IiqlIIzfjOnhQUXp81C44NvKx66jEnM3zUx94EyRkSIgP3KRISzLn9cIm6PSdSzUSW2Qev4g==","shasum":"3a64c29d0e30074e6af42fe10df740cbad645836","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707180205.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2+E2EnIrpH/+IjRjjJiiTmqLqB/wni/45xpvxPo9+8QIgVdsnMy/sJjsh1L+m+KZSAWPQUCLOSNCxhvg8U0JtlVg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixx+yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVTA/9EcH8EkRfqqIon/0H/wZqSiMQZIhaR+jDgfg6czqrm+zzeoW0\r\n9UVFsw24HobGqljftaA3IXbciwZpYzwDRMbWMBR3pvHvZAbTLJCFt9cuHn1/\r\nUT7FTqau+yF5/gfwVJBmq+3FcHIyzkrXUzwRxGS5jj9Z/XEpqieoSFWaJleg\r\nB9PqAvryG2kOs4lCgCpAa1GvCJDGw5n+7/TeQ2316IX3CNTP0DKqwV/WIjQz\r\nwE75AkHzGuZUsT3TRYrFiNP7gDVgQLXJC+JgMmapLuwSDOCY3ktU9uwYTvMg\r\nTk8zlIBpfosV6N8UAWhPcK9+QY1xmF10hPLAbFmov0Izypegu7nqqAinTJYN\r\nzZ37mrE3NxkBdAwgE2RM5pl+q3Of+Dt61miYbq0RAqUmR+1hd7ifwuqn8+Vs\r\nUGUwR3jDGUeZNAjfZFlf+MRpS6gGTCz9kVP6cGeEgTlqAL/wg4gdRwOJLi9n\r\nM48ayw1pzP/H/c4jaAfT+myRKpkX0VHj3nN2Gg7JnfcXtww8ttm7FH8Tlg3W\r\nnvTkLDg5p6csuaaM3a2t5boQh5f8Qrsxp+lamlGZaiKF/sAdCYVYrvPb75uN\r\nsBnCP3KrJqKsaMZysL1Hjj5OBdA3pYczzmIMwgqTwUQFC8rwXyIAyYu5d2dn\r\nh9XAqZkkSXYiW/y8t3kX/PD6llkxzFIkvRg=\r\n=rE3g\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707180205_1657216946750_0.8068917237320916"},"_hasShrinkwrap":false},"0.0.0-canary-20220707182606":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220707182606","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220707182606","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220707182606","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220707182606","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-uQo1h/Z30an/a2EdbV0l2OMzCQjq91gCTf6nE0wj6o/ZOR5KaZy0fcwgauHHoncHhf7FzSrbLa2tlr4brp3Kdw==","shasum":"d5f861a7b3cab1f4f654303d5fa82847baaa799d","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220707182606.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmbk8ViWqEN1Zgr/Oa71SF0amamavuQy8C6aTNLwby5QIhAP6MqchcXo6b6hqCEV+LgcrlH2g5fgvnK6GLI/oXmZps"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixyVQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbEA//SaLAE86L4YmO5qF/GVi9qvSWlCSRyF7Ewn7yPe0d1s/+YG19\r\nIOattXGP3FrLBCZJxrJXguQxCJVABa4f/vbPBwT8avxrGQ1tS4KakKgnXrZt\r\nYxzesFC9sObHpugCNUM+JD/8htJCsqhdmT5xxuruAwUc8NHydvyT+1/ymTJg\r\nwozC0l+YyLFuyg9d1IKTzqlaz/zM58T2pt1LAAZElbkNxc9KWAAyA+zt6UJB\r\n0ncrFArl0qVcBSMK1soKGrh70qvjdbrVoDCvxFdxmDfIGLXl2ABzz6432Zdp\r\nCETEgu4co7CUKiO0B62qML03WPfZCEyb31TXPj45iQnOFnQvHbD2+yhIBcTH\r\nlWUZVkx0dzGm99g/R8oNPrp+r8dRg4LZfQiHUuzIxtuKobVFN1X5oy34pJbc\r\noiV3RJxeOaaZr9XecSP4JlBJO2pwqw//2hPyH9GZw1wiTBvgXun6LR/YeKUw\r\nF/3Tujg6VHe+wmHMNud3TY5pkKzaiX3OeITaF4lZTIjbjDRlozCJuZc54lcm\r\nOd4RxA4XB6NhzIJdViOegyh3bGJcjmZkAjITPTRM6+hgV1Cl167BjQ8txWFG\r\njnQvOH1upIwYXGyLfoVAeW3js3h62F1/GfHVxaMqx9tePWhUhawjeSAqSPwL\r\nBxTgYiW25R74110UfZLy7mxgvgo5/N3nb6I=\r\n=UR9k\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220707182606_1657218383805_0.5499187889984958"},"_hasShrinkwrap":false},"0.0.0-canary-20220708072610":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220708072610","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220708072610","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220708072610","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220708072610","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-Fb8OZlT8AWKpPaxFPoDYl1FyXbIcG9iROnyeMhqX+r+yU1X/wo0XIwk/iroc/McH9J6KQz70Ne1qjnjENARk4Q==","shasum":"8f42bc58156ad059a68ca0b42a37950a5751baa6","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220708072610.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfPg+fZWU1zCBQZpiW4W846EXggDvBQz4L+xP9fwbqKAiEAs4A9zsm9c+5VxfNN4wvfJ3NJuYGBlVx7Q5lnY8nayDQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix9wiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwLg/9GZDfLFggxfIeyn+Tc5dN9t1TgTQE34pD4sprOVfTEiJGF8JS\r\n6Mg4r9jjVsLP2ijEwdcfCxJNZPg1v2eXF6s5gISpLqg44mv9QxKk8erYErM6\r\ng06+7P2VSIhoy0cxNQJfmIDOE0uAak2u3R8jZz7QShp1dKg61gk/MPgkYldf\r\n9A3UJH6NAwkSbbhwSvgtiJHtyzdPqpqfFHlK3oXH5P/ea/hidpmUsinv5UhP\r\nZRficBB/UDX38NqOGFC74qd3tEJZoYab8U0kzo8Sit+E5OXOGBcRPOXYaAzF\r\nH8VA8hHZiZbcxZDa+XCEBywHtM3E9MjQmDd/m7sZYY6AM7jUbq+Tj2wRZtek\r\nOCYxfaWPISVH/Eb6Lq9PoTC3AL2/hFDM8xGwrW13lpbLSrPNJlcLz+HpnVDU\r\nloXsoVMwbHlB/CdYiGlcZgDtJjnGM/KXg5a0ttI+9XcE0N0U+iqChzXY0zej\r\nLgWQ2cV3XeiFCYBThjq0lKHmN5OY66jufzyXoVZ651NtImG/h+FRAj/kxIdR\r\nDLya8oGiJbV8XFDC5DtfaTRMA3FZVP/e2EGHyUvMe/lOmI2LrVs+ZSkJonuC\r\nZnx/wwkC5d5+fJ45cGVNfQbebUFQ9jFTHxffiudkr2EN8PboXYePXkLGDFHS\r\ni5ebrWINsSI5LaHSRWjQxxQgTN0bJE9fFmQ=\r\n=mwm2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220708072610_1657265185882_0.7409836419243778"},"_hasShrinkwrap":false},"0.0.0-canary-20220708100343":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220708100343","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220708100343","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220708100343","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220708100343","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-dWkVJXIbWV2L9VqoGqkS7lWmUDdjXyUkgu2uTC4NlQcsQyJklDvzkHsUJIRBLget3VSY5YaEcvzP1gbDX78MUw==","shasum":"13a42f385f2521727997b155c6fc7e29e836e2de","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220708100343.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdLmMq8blA5O8BBzjTW8M95+e0GxqkENzbUBB7flPt8gIhAOmwmB22vut7tEv2JvO4icMvdUAOwEosZo6c8O1UXstL"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyAETACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8PQ/+KeFmtcCvnXGhqLnUbJjCdks/tY9dsLiEAGTuiWC7ZP9lR5Fp\r\nCmYqMx5cncmZ7fcFp53yR4EMAlqjhA9ioht9aCisnOuOlLVHKtcQw3IBmUDL\r\nWqryDoIL3Js6Bf8ixZuFKIdCL0diklswm3HijaN01Rhof/3moASP9p2imitw\r\n0qDHLj3TgcO6wn/7UtRle0tX/4Fb/1EqKjlqOWbHalPbr2rScDWocYSgw7QD\r\n1yPKX/qHjbPoeLbDl3zAx21/Gf9P/VeWcnb/YrtTuNQRXUdcKqtWbzJeDqPS\r\nI8SLxYg65JwvH2K7uNyePwIrjdoBng0uxh5gFs8AkmCNTk/MM8fBvvoPRXOe\r\nAB0eXgltStpEY36l30FdPdNg//Ftz2xgCDgHPW/6TqIjcrn4UOY3yjzHazBu\r\n5a5KievSBL9oAxB8HHTkgr9C1o0EimYuKbglw8yvc0Rn9jZVV0MMIlxi675k\r\ndJNtIKWgriSPPfYM+R3oREFT6Lc3fO01ta32EzXUhu9SysH/on3qp4pHcvt+\r\nGKeaeMDCm3cLjDZita+C5fL0xvZSMH1w4tesrZxPXX+9BfP1bRuCWcZL33ko\r\nzA5YIyq/uXG7lGL/dIK5wA3jGI5PrJ+VaHs16eW7oqWbJK4ZtKH1qvUvEZp5\r\nQaGjB455ZkQplXqdZg2KZUYhyo/vl6S3+sE=\r\n=jgOV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220708100343_1657274643516_0.37991018666089515"},"_hasShrinkwrap":false},"0.0.0-canary-20220708100917":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220708100917","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220708100917","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220708100917","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220708100917","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-lbUC5RU6J0TS5buUShGHmvuDM959AQZM+GJBo19hzCcMMa9H3tIBr3H9MhafZ08UuFr38FTUeBTQ5FMAzNHNxQ==","shasum":"f6b2a13e8635249abd29a0cf4b07f34540443063","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220708100917.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGFF4RJlB0cBlNhyR+MdccEJJDl7mIGdKjO3clo/zxewIgddKsVpVR1o/aEKUrGEZost/DbF81fTk+84oh7fCgaAk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyAJlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTLw//UiGb84rYn2dEJMW6iaXA0Tpe/FU+x45SjNMEdo6NHga7IrmO\r\n01hL5NFXb7vzZTIY5xWr0Ffo0PyO91oQDM8mi6j4rYDv6ODCRm/mdIn9R8t1\r\nlD2IL9MB+m5W+nZlyiVDsRvAIP2bt3O3ZdTQKu+KD6Jn2QyVtO2zOzX1fuR0\r\nRUijKqp4Tm7B+Nj/zcL75b7TKiVfIdjvZYQRNAhrF34ZZBPwNx9aBtSiczNX\r\nI88orDV71pgUqRgU7wnXg6C89A4uAXxZTOayosqtoKOR/7A7dtQvgALdnDLa\r\nALgBEv/wizoXnU++2AyZrKN6kxj1LF/9jsv7zxSDDo1sjve32N1IYsJcC4cH\r\nC4mF/noK81xcM0n4JSHFLaNfs/GvDbXH442otvEzZ6XAb/2EYGJeyiN/DBG7\r\nosaHncK9lSDXuVzqqp7G8EMqgD5oC3SHM++idV9fxUGUQw0l5UkEbQy99NJA\r\ndFNzKeNDmYyi5sY33M0S6dgd1GOameEcaY1Gtw/blcXKhi/GxyWQTwXQVbO/\r\nirdd9j6H2Cj4vs8DKSMhaBR1Tsa5C7o6nEBSm/mtu++aCXGAO7YQhIuVd4vU\r\nTqaRXNlf/EJAMtEiX5YSX2hspuE4QjSmwuroLqkxofFufXgHV1upLauqa7gE\r\n66wdoivz4lwIY28v4G1HIedqMXTqECDeHgA=\r\n=bikZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220708100917_1657274981754_0.7622042600659129"},"_hasShrinkwrap":false},"0.0.0-canary-20220708101645":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220708101645","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220708101645","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220708101645","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220708101645","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-T88h5e0r8QDOXGmor/IS6jMu5UQvl//QLjQsrMzLthnTr7vQG1sgkoEr28RGfcW6HNYmZA7tpvl+Z8+B11wp5w==","shasum":"47bcf686fa21792750c691feb42f41f8e6a4ef06","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220708101645.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAXA8m51l+2cKnL4F/AQzCQx1rQRIfj1x+u0wVHQ67NnAiEAqXUno+lr6OqPOQvwoWXUwOi+Z6/Nn577d1fJjxJUO8k="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyAQcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoASw/+MaaGI5MRkrgjhMMPPkw1dS2bFnjIAUw+WSb9yPdPiy/cV6te\r\nUQQ6I6Sym6doJ7ik5vcLn8PmLfjnW2EWHz46Zzy4Mm9iBP/T2xK2+V7ICazo\r\n1VL0dh+reHGnWyDmu6F/k9R8JUvnWtr5j6jDTfHLYgvj/4IjL3dUaQ2VboBD\r\nr13L46aycRVMplOw3VSJw2p9NqeXzQte+qTGMa9zMaGpEyiCnU9PvyXb2ECm\r\ndvMrvVBx6nZ0sfLZPEgB6pHV0qKAkZnKpl/LFelLK06FCLeb1YvBcrPa8Jne\r\nGm2Pxz7jXS22/YGbiXvyMa12T291rCoMGMKNMczBs8NxeXkD+pgOk84rCirn\r\nKaOR+m/vaeCHaYUtvwFxbw9USHGLDF12LFoIf8tVPXyyqRALhAzAbQDT8zTZ\r\nZKhXlleDlbWn6MAXpDAC4WzPnSUWEayt6W+ZXmd+1VNddX5lbWkSHSykpbib\r\nOHL61poV/aJufRWQpqQUCdvk5EbdbvOGy/yl0K0X/CTBlZ4CfLjTwwFWgYZm\r\nh9l30Djb3wdbLwQHxGKdoOgSJ5Zm2cQn3KkkEQMKQl2qoE+ZAoBI1N998Hi2\r\nYMzo1njwiVWXzWr9iOVTthyiacSV1KP6DEPf+2dng+p3dB9LVoreaz90jlg9\r\n2RfJ3B96ennnpUWGcRfdjMDIZyEGOEpC460=\r\n=+Bdh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220708101645_1657275420131_0.6662005630850651"},"_hasShrinkwrap":false},"0.0.0-canary-20220708102502":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220708102502","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220708102502","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220708102502","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220708102502","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-4RrM4PmqCUjajkKknIX0OOOV3cb5Qi+GffHrbz/8axNTqB5ECS4woEA8SBvQf1inXeFvGZRanykJ2tko5EWfxA==","shasum":"e1f72d94a830b567318dfdcbc8298de193ff1ef4","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220708102502.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHVefzvYJslzNo/cNXr54QA9PmnetZWf3fxOfJiqGAc5AiBOk3F395gmZQYc8YB372+rPMj9phJDwgJB74cKNrJRDQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyAYUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqQg//X7FRxfizYswvFyEiawTTwzNLcSFC9HGszq7GK3xvbAIt3/Z3\r\nE3xy0h7Ri4A0lh6Z2Nn5A9+hi7gakPCei7/2b39c2/o2bPj/DDWCvbMccbwn\r\nUS11mnjMhbRaNxGEazAn6ltGx4uxZg9+dkS6qNpyvKuJHMbQfpjonQwXdtJ8\r\nZGSp1MQwTnvcBSQ7OOM4Il3LVi33nFdIxfQQ9q9TbZuRe1gxM/SWXHGiso68\r\nf8gwUOA3Yz/6oy3u5XCurE+VYcWGBOsZyW5ACDp0ezEsq+sN0hbumXDkWuBe\r\nsLhQNShf3uZbp9HYZD3yF9Gm4ijqqv708HqITw25keCCsFYQVaBKjVoFQWQR\r\nhThPKRiA8n9rzzEJPT1N7gc9xOowxBQa+i/tNY3qmb0jdzdyhcUJoLpcqk3r\r\nx3HgFhPue5hAMRWOoL4hFncRAKrG28VOMIXUQN0N2x6mXtetdjRr6d3ORw3c\r\nzSRbysiqouZC3yekFQq5ShYsLYXC12vs/Bp6qTHV902uYjPtwuXKqU7j1zFh\r\nuc8EthuxLj6sJo9BC+A5OStmtm9ZpwaJZV9KlG+DcbjfPCC2D+JB9kI6ec3u\r\neLMzBrCSbnsfcSygUtgDPk7ZqMR2TtVZEOJ23QtIhZb1WgULGVQJcnRy3gLL\r\ndniaXUUjNbsf/YbXwF8gHNVq4TdR9jFQR8E=\r\n=40Zc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220708102502_1657275924243_0.9476639230698827"},"_hasShrinkwrap":false},"0.0.0-canary-20220708142000":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220708142000","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220708142000","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220708142000","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220708142000","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-bKQQq6pVGMxF30+8B6YdYIPaHFtcheOQjRsb9g1F0eGUjznr7TLuYZ0geelC479uAiRSVFhRe4dOnEhzD9fBNQ==","shasum":"c7d2660678f076a924efe6128f7007d4525c7f7d","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220708142000.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICEkqZ/6H1rbvxV5fUKJx3JAZr4vEx+LWhREYPowxpZCAiEA+HMR5faFaE6/PjEY4cXAJ0ydkMyWKplt+RuQxiJsJY8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyD0gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqb/A//WU/OSGBa5SZ1J8ecsOqZkTjzalOm+HRR4gsPavR6pC+WYzZX\r\nmf/qHtO1U1NWyJ2gW2D3rjA8m9dCwA48H7drKGQASO273NbIa0MWHMECoG+h\r\nlGxhAGbcXnBi35TGokm3+kN89Y6Qjq1M/UQsmZKwHMXN7sUUKYcSZimdYcP/\r\nVRCBM5zb05qYnmNPR+H/qxn2kNVxSCG8Xa5hUTUh/zxdcJ8TQUVlKrqay+dd\r\nSSvFRh2g1E+zPayc5rnDcw0zi59Ri6pGqsS3ak4jPb3qL5FBPP4BdDit34/u\r\nW6HezwrMXdRZNiACGJFNafZnUxXqcWkp71ZwuOaKfXCAAq4caMFrAQ2Nwi0P\r\nbOWzdM5one1eslxlL1Y6NGGC/1yUp4/iC1bkH8sqS/Kat4hmlrZaGZdk/1y3\r\nXH0nU3uyfjuI9mr9QC2oUDI8wD33jnkDxnrwQzCrwueBam04IMDckuKdjqw9\r\nxdQyWVknjRYYw2AliElwXFx7B9VRkb1EtEHpCG8Oe70hvayHkEOhf2PdTMZh\r\n9V9uc8HfoJAHFBBJuYmxlI6Dwt/QozaG1/lynE+xT7dM7Ldyd2GP1M8ArzLh\r\nA4dKM57Y8NFutRWnZBs8GWY3Eao380AhqpD0XRpPbo81DahZeuQSuhXRX4Kr\r\nZmhrkO7uUW1DKc6w57tWgmufbk7P7soJLH0=\r\n=BMUY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220708142000_1657290015831_0.7174108914039945"},"_hasShrinkwrap":false},"0.0.0-canary-20220708143746":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220708143746","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220708143746","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220708143746","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220708143746","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-U+KPzu5wk+lX1S+gBDVSYVTxH/8amUVeqstLj/H2VpHTNZz3tD1t9zqkl+oPCNEqFJDhpFd/i5slkJ/Wn/lGIw==","shasum":"559781359d448c9b0815ab6125583f05759b08bc","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220708143746.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBNpsE2DB8WWeHYq+v6irhML4kgeVqsqhn9JkqsE905LAiEAmPFt52xUUnbRBB3AR8yoASCD5jBfzeX1yGimQLqHIvk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyEFJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/hA//aqomlsMcq0Aj0Gu53Kd/jYI5uDxOgsrYyOwP7BTIyKfq5MTm\r\nf7bRQCqefZ7VpqOHKm7xUrEV+o60zDDmtKs2YQ0TkZmU/3utlUbvcdnBa6vS\r\nXK5moKKRT9W4bouO6awvK3ahyXcl4EmNrFZGxLtb+4bD5GdOSJyKZyTK1DZD\r\nI46X3pEB4G9huc15KxI+Kf2Rg2dqW30rZwo+uODFMCj6ENLnmziGjKAO6Jbw\r\nLlmQfjmzkourTx0yN7z+xjB3ot4kyPcn/Ys8JhFy1sO3kxUjzwkKc94PdXx4\r\nO45xTBr/mRNcZd/33yBMPtijNflbhnXnJegoG2e/95zIki8UKvc6LEO82WOl\r\nqjz69YNHJw7mWB+xPjEdyrp1z6V0Z17WOEetGVxF9LEM8AQNZBxtrkyrqjFh\r\nLKYD8I6eKUkZtKhzri0x7jhWs0sdvTO9EXPBiGtr5K2rBWzvIqoE4G72C6Uz\r\nekXLZk2jEQG8pA6AZpG5iTKFi9k1KQQGzStx4qJfqL03R+JPM1ljnwuxxW0D\r\npn5xSbEkqxnC1rdZoBiYy5nW6snvyFBy6z5YQGFBvpqjAGz2pBmDshE0sEf4\r\nxH000nYm+j3yIj8HWcclVWMbRJnqgERi15MRFscs0bOu+UE5m5ATzQqyayk6\r\nrTwAVUY30JmnkCfXi5PlrhBDbVD4YHcgRnA=\r\n=qU4L\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220708143746_1657291081273_0.8391940581246977"},"_hasShrinkwrap":false},"0.0.0-canary-20220708144225":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220708144225","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220708144225","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220708144225","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220708144225","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-OkPxPCCuG3nQ2GHHOtjLrJSgqM2DofKtkK9TDh58zz3ndX7r1aJWJythwpJKAXNdj8074N9ulIq+GjYGrWq9zw==","shasum":"f986723b2aa2de8442dcc173cc165771b37d2b8e","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220708144225.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfvKPIMICcAl2Csdsb0eomNhqMXpwbM965cjjjprAiugIgGk/XC2rFV3W2AsMiNuxZU6XjD+Ld3qIRHSTM7nxBaZg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyEJhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqphRAAid8F+ChXjZp3xSXplnw7GTgfGaqabQ+t6nGZOxRS+GsuwYmE\r\n7bzK0+yGJZ1Ma6eKb4+5ilh7TUY7gseE59nXlFZ3R9Cv3Ygar/baUgPaVr9x\r\nQ8/Xx3NpEFZVSC7JSSCQ2h9nQMOfQNuTG/ncDCp8d+IWfPEO5jiQ/3baqXh3\r\nEtDooM4MmGGhwHxpvHIvRvdcPuc+nqoOFdzuOfAmjRUz49Mp4SfR335jQGUt\r\nykWncePKg7r0dx0dNz12+0PLRGvg6WKr/A9+JSrER/nANokh/G8LrvG2H/VY\r\n/3rTFawo+2Sc6bDwi2JlGQNiTuTyosdceYxCPkq0Y6h8eTsNdJEBDAuK6FNY\r\noDHnqc5STAt3LwEog15pDzfGlBTdG3tyxdLpOxl+lCcAKA3P5LZVOCQ+bC/S\r\nfbQxoRhpZWKkcgm+vlYhUDNWDsjqvNllE8glE9OsCz6BBH3iWdpwcnTcaVZ2\r\ndpVXkv7j5eaEWDRC1FcOzvV3S+BIdhxYl3gNt9grXVfm0AcxY8TzhJ7dqPXL\r\nPhJaVG4aA1aiE4e2sfYIAArA+7/7413Ruqjrr6RcAe/lyR/iGYTqhuhU/xJG\r\nsjtRVDF6Ig8MZLUTQLrOkZ9tpmaza95x9BWO4xBhdpvJVgFGre3hT71l4kW5\r\n7l7KaX4J6H2HWp+63U5nW2XOngu0cpJcZkg=\r\n=69ZT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220708144225_1657291361370_0.09410195759627937"},"_hasShrinkwrap":false},"0.0.0-canary-20220708145957":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220708145957","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220708145957","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220708145957","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220708145957","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-GfF4o+2RCU6M1fnLqgd3s1BVASrmO/1dJHJptADPvmmkiVOwHa7x7uWcMNvy7Tn8FUY1Auum82tGK+Pvv9RQ8w==","shasum":"6c02850056f962e52bbc096d8d261a0412d87ba0","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220708145957.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH1JzEIMsG2dhAAsEpKy5AhrPN8sVZqMOEydT59yqe/1AiEAmc5qyl3GGaYWY3HBzAhC2dnm5BD2Kc1I1gbJIDW7r1E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyEaAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqe6w//aVgqC6rI15GayBv8RAEwVihE7fmsV/3qLnrPAHTF8jqMSdQA\r\na7HKmgEjosjWbFKXnXKgmeMBiGcQE1o37jsAPUExzMA4vHA2S8RbzZ9+pOkg\r\nI6Y/3qoNodp5D4OeUQYb/TMWO2W0lAsx6AYuYTLSkN9BtSgT9j2EAuDwbI2g\r\nsABUgOABmlsLSDphcyoY1zNdlMhsoOplaMp2NPAwJFLI/UoU/+inPJtyu05c\r\nXNx5eX/eE4Z+L7ids0POynOHHSsahIaPZnoTrFlVIFxgQKZ5kNm3yejzOx4D\r\nSHYhy5UWXTZrNw4/+XoOpYaLF08l4hRQbDxRo1ipop3rLUVbqtJpQho9YZQy\r\nn9P2DKaapaNmEOY0fy8SOlh6KZL/Wqt8rlgSuswMnQzSZOMZmKA6vfwgP9aT\r\nIHPbQH+Ny6uaz2mhpdX3042vsdg7voVkWVZ7twKWa9FcbQ8YQiXuX6kncp0J\r\nlXxpKYi5e7erHqd/uUGxHp8rQsstZ06jY5wQgOUcgsYYgrhO1i4L8xeW8zPZ\r\n5vaJ8Ni/mqjbOwRppkLBn9vFcrn2c+1hgC76xFc00Zd4E3MlPTqcKjT3Iq3F\r\ndAxXmi6uKgA26KIbHAQxUWUa82jUK/yyMpsCoaIT0dZ8poyEcn6rYMFIBYSo\r\nkEsC5gR8xIIg03c/+2KEaP1iH2CAq+OAai0=\r\n=wLSo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220708145957_1657292415971_0.29202013690369233"},"_hasShrinkwrap":false},"0.0.0-canary-20220708153539":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220708153539","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220708153539","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220708153539","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220708153539","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-OGLQ0L/TsJvGsqmMFLV4es26Nz5OLt/RGisodJKxnub12b+SnF2EJ6yic/BtiW+KmbuMc1ne5Fwz+oCk6RyNkQ==","shasum":"62bb151d5fe0d876a6b59255b9e395adbe4d6587","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220708153539.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFJZXfwxHgs34gptG/AgrKUtDu0QSoPyzfhJh+18OKIpAiEAxYP8M43aMuP45YANw1dAKCSD2rJPi8ZNRT8mSz9OZ1k="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyE7dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptRRAAjpYGI3RZpaMTjfnJx/qzeUBIiTUxuk4RdaiM3ysNg/SxLjLu\r\nqR8YELhErW8RUQyq6k+D5qD9XdOgAhh3s6g8Hoj5U3/ufClcKBk45/taK2bo\r\n8S/BLtdjrYtPgy0aIAy/pQnm0XS9xnEEQdqKq9kexJRsQL67NMU7yI1u43n3\r\nR/HaYlCHHmmRipKozd2uss8/yN0HlTEBxY6AC+oKyvH4i82lG9MXxvzpN+VJ\r\nvDNQe/OHi5SxDdmNSbqe5NM5rU6L59JOQsbMqw1F+lEkxRRycH5Jvswesl0+\r\nILh89Ki6atdUdjA3BpoG6B3YWkAmo3ZaAzrPZOZ2WC+QMCC+X45sdb2lVd2Y\r\nKlWLHhGQQl/JzlqhJhaMcKvMo4dYJq5CkYDOxhD9sK37wGVEIxbRKWxCF6lK\r\naB73dpUJ/IaLifpuGaTtXOrNMm8yciDCm4UVK/H+pD3OPeCGZYefLnvpt8bS\r\njezawx2oUxtPO9vtce0s7RTksm5/lLQDpXmXo0L7OeHfNyl02Z/zosFMxdsx\r\nRM+/nyDkS3MHsMrzTuDEJ/GXOuuewQ3Bn5sK9ZUO4bUpRCtj5ausXtvFruCc\r\nXQUt1N+iOPBOFQkzgdnfbK+PqP7gctuTuRcvsG5hLqbgc3NpdKn9P3w7/82Z\r\n516Gfe8oTH9eW+/Qj+uIl8mZWwSSApz+Kek=\r\n=X5Dt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220708153539_1657294556973_0.29403023844306664"},"_hasShrinkwrap":false},"0.0.0-canary-20220708163418":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220708163418","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220708163418","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220708163418","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220708163418","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-pvTRbj/nzZy3l6CDUv9qJ+YnGB5o3DD7Fy+2cEBkbPeqOe0aogLxzI1X4a7Qw42KPCjb8OFKTy5sGEtmXIXsLw==","shasum":"0deabe2371a6e9761c6ed13260e48dc153e9f823","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220708163418.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIECo6AbWPrcQ/kZx3zWUACXAMvDiFUqeM7UcSb+ZWt6JAiEA7jmRR530JCeru/bpZ4o9aZpcaaemKoRGlB++CnH3gVs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyFyfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrp+w//Yn/2HZ8GobFP1D7hjSD6Ny/L2dkoZX2aH+OP5rw04hla6ASA\r\ny9zVd3oEGgKNuGW+oaTw+lBrl6as+C1Gz01+NY0FBxMeOyaWLzy4t3aaN12d\r\nMnxVReta/hV1SmbQmY7IYcIDRPtWVY8QpDxtSlzRv3e4q4d6Fnt90k5hYvjI\r\nk1CEZUB91oFZ7MXNn4U6lIz7UAYJrea4CJUngZdjUm3XiQuPVfNkrtiw0Dj3\r\n+/NFj3dZUPJb0/nLfsRASr7xaWEE/5ZEqT5sA2alC7S6ttA5JhlnTm9j3bIA\r\nKbIRaohOJvHVFlZEqmX41EToSKRJxRGKHu8yobMsrEx9nv5GZd7uC6g1YYBJ\r\nC8LJVY57z26PMBIQWEisgHkijJDxfZi5bxFL3y+QI0Wd1D2dL0JcrwKf398z\r\nCntKvcGbUwpZ3XsDwCQ/sL+2/7dAAwxEtPCVqo2pYmM/HpSbuh6+EUXjBcMH\r\nQ2nLWSZOFmWB414BKy8tiYOcoWtDFSP1X8+rMYbDx1rnBKlhBMe5tjJRPg3Q\r\nWoyk2C4whrgvtapV9jPyharKUH2dyAIvMDEF0ugqSjQ/Qz5U6Iq8o1vrUzi1\r\nzJAWf0xwVjP5Uk32T7bh7lCJgGFJhJFri+HbQeU7/aOo9HcZTVmxw+vXC1Sq\r\nvR4K3XGBW6Z69CuBG0q/GlgypzBHlvTkGXo=\r\n=mF2O\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220708163418_1657298078848_0.6573993975397809"},"_hasShrinkwrap":false},"0.0.0-canary-20220708165828":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220708165828","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220708165828","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220708165828","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220708165828","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-S0d/vsDuBGSSmejxnsG2i2Tj1c0ZRqg/4PdXaDQ+mio0SPLu3PYn5wXxDfku2Q0xuep3iKG/KEAPg60lA30gvQ==","shasum":"18351da229de2823963205b7f9fa3845d35ccdfb","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220708165828.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICzGFO4Cjg2nmh/BVgf1L3JE9jrWKFLZ31S4SGhSJdbhAiEAl7mk2is6kpMCoI+vb6lbc9ovEuI1F/RhkSph1buGRq8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyGJEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGEBAAidb+mQUVDwgR8WdFnkI7yh/Qu8sUQL+9n8i+VrYfVw9LGfQg\r\nPCGxM0utrlsc+SV7eZxoCsh4ULVhYISE5bqFy3Z3Wm5ZLkiasnU4/isWqNIt\r\nYOr7Ypb4nBCpxWj7zInW0KzhbHNwPmPTsXRYz5C1Bbdr9Sc7JwoywsX01Lqj\r\nI1J/1zW0xuN1f0szADE0u8ToQm7D3rGUsyWc1qb2b5IAUF172FXcSFVJNzRQ\r\neLColGOIlLKGlDTP2ZU2hRimknZcgGDop9FAz2jK1gMCSJmhaO3Q9+gz2pX6\r\ndclgifk0EGUzRlxV4MahHE90bN/4yiEcuZUqWWPeMhZNOfkfs40sFXqeTyTh\r\nieEFUNwQ3hXUtHk07UgUxCsX30+CE9zNa55Q8FGkZ4lGTeCuVHbxq0TPXwe3\r\nAXf8y9jHmcCVL1Ah4EGkxVhspgxXEszkhK/vNUCnIB65RyhFDmqE/nYypBb/\r\nAaZvMkLwF+K806sfZ5d14eEmJlXLkc/ABv8S2GHsFEPiP/wooonF08BpalWj\r\ntsDTboq4xue5EFEVYdeCanqr+HrY9lAIpdHFw/fBbPPv9uhEfBjRfoJ9of8k\r\n0gmxE+5SVx9ZXBcF0sGtj6tKbAH/2e7QZ+3yFwSbyI/52K9WAz1qcNWyAI0R\r\nPFPY1vgWm3OHfQEyHs8Oxzotf7FlvCWSimc=\r\n=1rYN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220708165828_1657299524412_0.17869207458418535"},"_hasShrinkwrap":false},"0.0.0-canary-20220708174319":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220708174319","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220708174319","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220708174319","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220708174319","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-AY/iS0An7RC8fSpZ4bgnNmzsUer6irJgR5Et74UHHwCRJ5w4N7qNd4wsiB9ABaeZIwdXuM07qSO8/mLQXoMm9w==","shasum":"6f1d33f62b5761da2441b510db59dc8f2ad4a305","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220708174319.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICVz2If3qJymzYx/0D+EVnRLTLYvJ304Q4HFEqrQyMVPAiEA8iqITrvwt6Rr82UddVHB5Om5172EWsdKMiTIjitdEiA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyGzKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2Ww/8DjCdvB0p0VCdxZ/fOluymV23QAYOOe79e6+0vn/kFohgN6UO\r\n/q21XnxmkMmH4ljk1jZ0ccEqcqSjEj+WRICIR3HaZBbao2qoTWiavy+8uRSK\r\n0+1CPoaUYVws2Z6ZbtnL7GyhL/3oI61Ja7MmIAUHdXowtnuXM0xdNH1WjOKl\r\nprXsnw4RRspKr/SgN5RnPOvD+WHULSy8UCiriOncATfxEK5NRXOf8811QK78\r\nxQH/7bdWSQUFx8BFR59mGOc1s6lrsAmFn7ixFQuKtAva8ur5/u+O/nXynsTN\r\nDaJj64o6tBXb6bx968At0TXLgVRDE8LyM2PLtq5OM6tmKKPX1ILjebL00tFO\r\niNtXt1ZHMF6WqDt3gfFaTxyFHORXfpKegl6lR1MpL6HVofRteRCWBcGWiRRJ\r\njG4YgRi1JPxin3ikf/PHcPgGWgAQt5i7fe3Aewu8c0mVvCq1Ys8iJOiVqq/Z\r\n1FzvPSxq/3JTnTkoIYxKbPmAIZ9kPBj0N6k+tDuipuKYgJd5eSVhOH6JJmyR\r\n+A2W74SMi/5nG38QBPkV6GPe1UUM7NoUTB4lMcjl/evBoT5GclaDAvmA/Fa0\r\nR/bwD+Q6csyyz2rXWPKi8p417t9wH+O8Jdq64mLI6MYwHYIlJ1oQg7nLRx/2\r\nmH6FsH3l/5qWmieIegrfEWXD66Cv7uFk6Ps=\r\n=BDa8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220708174319_1657302218208_0.5221813814470542"},"_hasShrinkwrap":false},"0.0.0-canary-20220708181446":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220708181446","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220708181446","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220708181446","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220708181446","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-qVCCW9+HPoDfAevmwjkD2G/uVHwIxWooNA2No5o7WWQvKSONyLrUVxrdmDEZVNade7Et2dUe/xIyYMW4Z3fFgA==","shasum":"cd588ea0c1bc57855172bddc5fe638cadc85df05","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220708181446.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGXQo9c5KfZ8+9Bc7Nx2fvwd4VxrzVERP3+xZdcnOCkiAiEAzKzu8E5hCWxYrfcqlPhUYsT2V1eJrSahHOUUe/+iM6A="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyHQrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpvmw/+Oun++8z0WfyrBVZ5DExyhYmgCCMdWtVia5Rplj+wYB6HTpAO\r\nV9VCtwiR14WrxTVePKwA6sWtaSompCZsq9Z1CvC9wcRFRl2g950xso3XUB5P\r\n3lsBRX4dujGwz6fiFWXNlBYotQtvR4QJjuncszueJyLTIFpxDEBBZAvMBycH\r\nggvomWABPQWbZMakXIjmG40zWuAwrLVoN7N0Zqp48Lkrji8uI84PTqtBwt8v\r\ndzOUfcfW7vCL83aPwJdkioR2xTQUazOos1FdAesUMkpzqP7JDJDtCgmL4qZJ\r\nRSxcW7TDpEbz0mRBpCfDeK9WFu251PhG0foyT4rAaRU8vHpwhPGQpYndr3Hu\r\narxx8kdpiAFespWctd4HeaX0BZ7pQLk9jE7bDVGqMrZc2GFJdEPNLwoXhpj5\r\nzLqupRVq5qz0bphcf6DLac5CE9oZ+mZfcLgZW31A0tTs/Q1U5YazEK+gkxBj\r\nBm9oCLNyf3brB/SdIOJZderS7ZBRnq540aBEw0cz5bQpfup4nW5p16DCJu85\r\nokbV9mHMfYwjgYj0A9vhtGgTMIlKddoKyjIxVyRMikn1PR+LvQULAQEkOgio\r\nbg87q+PyyDLkJWYDqd02hd3vH5AYkRxvAB/zkaw+pLFQzPIqCMwraeab2p5X\r\ngX4X6QN2CLX5Rk0ROGou0A911yvZaUdemHw=\r\n=ZEM/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220708181446_1657304107257_0.5805513182160318"},"_hasShrinkwrap":false},"0.0.0-canary-20220708182912":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220708182912","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220708182912","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220708182912","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220708182912","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-US3QUvM7yP2T6xQKJeGuOE9Ys/X63tXno/0hvltKrjx3hr9z9t11CoErKEElPz8Z63dxDHxC8tmlrxaTVS02Mw==","shasum":"07d6fd9053f7eac1a3a1398cfca3b8657bdefa69","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220708182912.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG0JPeZjbiENX+14erD10819cauoiejcB48AxVRkD63oAiEA6ON2cZGOzmP8yFFa1dVHE4BB+Mn3bA+VJZ7Eo9VQX9A="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyHeKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpydw/6A8TUq8K9I4Ar/jYuztIOxLsYIzaHfsQRocYZkmR8Yd9pO7EB\r\niw+EsHagQj5B7IvB2a/8YNMDYKN29JfkP+3LBYXTFVlzN6FxqMQT89ZQG3t4\r\nABTC8BRvBxKPEVK13em6N+3He/TqKr/p5hqOD9/uQigR1iz0MqOi8XvBmo7e\r\n2uHskOok0o6/RmvZ16Qtt5QMw2/cuy8FiFvjJpCCEA7TRaXjDhwUwolAxi2Q\r\nj2P/pCBGcONfyh8KyImftYL0YMM79Bp7Wfta1rWv2+/tMQLQ+x2sGLrMom/Y\r\nNr8WP4FcFS9wcgrwAp2vp32MFiLqPRgsrr2JG8QlZrtj3c7HJ+3u2bMqKXUa\r\nUUz46dagzSvUCPWQPCRhurii19rvuLqEEDvCT5v0FVY3CyhbIaAAirXWunds\r\n/1dVmpDqRbS1gGX9i8Z0vlH9Zc8Z1QsDMaZX0lCKCMsk5VZbrXpDXpx3AY+u\r\nnYyNv/CCaXSwj5xPROsxSm8Vlfdv6O1dyWAS6QwrgrQb5j9fsUFuDTybB8VN\r\nTZVnes7PsU+5YPWRkp0aaYU4J2+an8NI7z7UaBdJNoFOaFcsVG7wus/kS/gH\r\nUrU48eLNCIyiwNgyRUhLa6I8wRQsh+PSAr/wQo+EyJFmlF15IJAwGCVgUN2b\r\n7hJQ6uzkhzI6dadcPSmix4bqu5Hd1g0Ls/o=\r\n=Rl7X\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220708182912_1657304970583_0.823803313523487"},"_hasShrinkwrap":false},"0.0.0-canary-20220708183307":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220708183307","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220708183307","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220708183307","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220708183307","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-BFRnI+ZkUC2QRGi8dnhaw2UaBvyZ9bJ+O/V/xLDETcS2DvpsPYXFpmszCGinxF9hBr4kVUp4AWsBQEuS7WE81g==","shasum":"29f8bd2593822e43dbbccce32497f2a0da8191c8","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220708183307.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICzRdLTxwNasNdAme6H7qZyWCsX69l6h5nMuvkBJDjaJAiAsaimID7t85qG3vItq5YszyvKJPSQi4l9meH2Q5Hy+RQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyHhzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBiw//dzDGzMLOOzgQewKqUyctHaOgZ8Re0TmWL3CAL9yqWPkuMFJK\r\nsbM/1EC6WXLAnXHbOyEWb5aWKZTuQr/B+yGajIC0whRNxeUZZad0jmUzckTP\r\n33LIeurFdp2koOIQQPBMBGUIAxWSCxuHpFGbdxJMiLbt+4z4+q3HAIUtza/D\r\nmBVszlV833BSharHKrYp6Y6XHaq9dRIDxL+uZ9gzN9NC1eg+YNIGOzbY1PfN\r\nMWfRowpQWosfWjB8NrCvvMUd/YTm+DaXgMdbP8jP6vjlrioMXzShDGiZqzmL\r\n/QdPWOVe+4YpOxPn8QuFU6gc8bu2YCyOYgo/93YNIFeQqaFJ3287R3pyHDif\r\n3q+Hz4PiaymGQQCbKA9SLrcy3qHZz524BoL6jah7AqlXKr5d+zKqEkTWJRqE\r\n7AxMfrZEIzJ8j8ihahr5Ht2Z8H7hC6MpT4XW0QAS3dTtuoQoYI8V+6n7k2cw\r\n6n0nnFpZ6Fnjkw+VnaDoDI+iNliIG8mE/p5LaQDpnBdz751C0EYBm9tCHcDh\r\nqIIlk3GqfyJhA/Uwsqgh63IkJvJCP41SOT0a87A2XZBLjXOETIFNicZEI1u5\r\n03C9WqINrd5ihgyeQrSo2qBKKVecmJK6myrrThIZMqbioxh5uefqZuIU1d3e\r\nnc7CKeuaW6/UVvAkNfzE4TC868FyD06GKcA=\r\n=hb/2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220708183307_1657305203272_0.4669235585894711"},"_hasShrinkwrap":false},"0.0.0-canary-20220709041435":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220709041435","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220709041435","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220709041435","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220709041435","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-hR4W99b8+nFFn3NTvUFbHlqgDBfgjzWUQxD1gRY7KyydXlMlqa/xPod2IkV32P8L3d8kNV+TPrq28e+gOjD8Uw==","shasum":"0625ad5cd27f43164cc35e94759d7358c3e2ebe8","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220709041435.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEEqA6L84PQ+JC53pKo3iJvFl4IzpoUryvq5myB+Z4LiAiBVoMBrLabBVRJWZ2GIlZjoDlU/3Zs8EVGK2GvzF5q5Vw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyQC7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxOQ//eWVXDC8vfdaCE23svfk00gvgYOoGw9zzzN+RtZ48Ps2MEvkY\r\no3Ex0ZtMnDhAR/dp/E6ThUHiEfwx0MYnL8IJdMI0AqbL9Su90qGMmtf5s7H5\r\nylhiMB3ZXwpX97zVJ8WKdQL/9vZul6ZCcQOLawPJJ6LAeWt5HfBcQ3J4C9he\r\n2XNfF91xwmwsKu0asZg6y7EGBJ/DlcPCysf5ZvDdzJ8NAU7tnd1TBfyzsbn+\r\ne9AotJNOSgIODCyyquwA2xlV4N6ejqPCRyG1YTLNIwBFSVw8KF2pCq8nCGd2\r\nLch+RWMfF91uZU4qNwMKz9UYsCgMgkuwK2ud6l0xbjp/GZ2YZX/Aln6bK9/u\r\n4f5kqYeYqyjp2TvjUlJAunczV+3xB0Tig/utMnFXnlrxZ+XkmGV9TxD/j1jH\r\n5rUdWOyi+Hb4rzB5+WZ+VHFJHHY3chNxUmwhW9H//kTmx/WW1wWQAvr2WjSu\r\nqkrOv6OfhFou7f8gQI3lYDaRaj6xCUzqnr+u0pkxRcGUwMC5pAgpQcSSOtbb\r\njJNKa69IuX0zJH9jozsBOXHBzpDSYzd4JGZz/mdsQk/tCMYgUffLia5G4O0A\r\nK6ayIFsw8THQ94IpuK3MZrHv4j26RmDdzreLmLW8QkEqKYl0PqSzo2ojcwTg\r\nYVXEQLXNZ+9VzOWIMUMi0Re50/88mlFh/Zg=\r\n=mGsD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220709041435_1657340091424_0.8357895227323111"},"_hasShrinkwrap":false},"0.0.0-canary-20220709043355":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220709043355","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220709043355","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220709043355","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220709043355","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-jLzLQnMeOG7bcTMFFhH3s7iJb0storfjrysByg4c5rwC2Lc5G2uI53KJabBJghn71i3Uf9bsoJL0ZBeF7jvpew==","shasum":"5acb62602a98fc6fcdefe43bc3da2ccbab6d83dc","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220709043355.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGr+0L0bSz8iUc94LOSsa/X82nKLwkd73sUj/NUea7PgIhAPfGZhofTHo97QO3rvJMAG2VAR9TXL8yDVT/yqanWd71"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyQVKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoOQ/9HJRqKDoSi4T0mt71vS/42BcVlReHPyZPHgbIyXhB49qEA5v0\r\nwfr8xjGLQJws7H1Ff146bxPU2Zu1NV/9HucsA3OTVJoYy7TirE1eEL75PfTv\r\n1kZJZlJSwoYJLHQ92woLIV1VUZhDc94Tok++/K7l7eGIVrCZcWHuBMHtNzYe\r\nqvdIdb0VUN6NXAr+/bMyos6YOjUbj4JcS9AtJIhAxzlx3XLosWp4XJJEXJ1C\r\ncBDYpADvzA60m5L8Xau2NFLQXCRdNId89brq3ZaXjTpfQBu5hfGmFnGxmB3O\r\nwphe4XdgGN8JaFmiOFoK50tw1NkAQcmj01Rl/yWDlg3GvUCUmaL2ktZwLXOH\r\nCmfXDeDsaRsPCWPPbh5No1blK0MJ0ermSivPZsjSqvGgDOlTEUvvj2oTLZZZ\r\nca92BEnOnsPMH4kl/0XqHEWHX/J6hsQNayHjfikJIC78kWOTZFkRtf/htjZi\r\nUrToae9aa0Kw7B4xdqAjK1OTIvGLTJPCSdSdU4WFIsn1sjMrnXtPovvQcVx0\r\nDvvqOXihJ2PwxgTMcb4ZhEnSapWQkT+emq0qvMlIZ50BWdxlNkiFoYSEGPZm\r\ntnHIvoIgxicUUJe8LXV3pWUK9e4whTD6kW77J5GYtI3ClDc25wixUEN8QJds\r\nNtEoLrR1KALsLuSFMRgUXq9h1zn/dH4o6eE=\r\n=FmmK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220709043355_1657341258097_0.8847515718511558"},"_hasShrinkwrap":false},"0.0.0-canary-20220709045814":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220709045814","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220709045814","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220709045814","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220709045814","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-+rFeVbpT+QHZWb5xzyb4oNB167Zi2aJVsiRziTLWjJq+Ece+FN6WYdzKqg1JJXg5OciJ5SyRqkSNbbz+/FOr/w==","shasum":"c95922ac33044d83076c346b61079b662655abd4","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220709045814.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAELWsNVKvf6a//SFyrXYpWR05ARxoR0VyFylVRIu+5tAiEA3KGZIQ+dsRIFo3Tp4GMvq6JyC1WzdM2C87AnWwO7CUM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyQr5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMjhAAhzA/n2YAP+2H1u0f6NW6XIjxLellHdjaL1E3jr7o5Y+p8w+Y\r\nJbg2ykD0NWfOmlFlf93eqyayHTLdkv3Ms35occn53CoxfFWR49M20eek+RDR\r\n1DAghgxSLSimpamLmygUtcPrfSXU5gIOUB+wtrSgYDMiKHwto181Dez6VZnd\r\ni2MqafQoQiCbGuxw9X6y49saRfxB/WVKy1211dpIc1qpOjHUIoEN2ZpMndhb\r\n5fTU0MMnjtuqenDkBzFkHXeINEaLTL9O4v+HhSKz4ve1jNVo8Uxygbu1SleN\r\n7UEumH541T0/76iXKCGAj408qtx57XbxC+KGWYnv7N0ynoj/r+JB+wj+/zUF\r\nhoSPwmcIKgkF1uiFVPAcp3KBhvEH3Lzk3Vz6fcwg/taI4Aq+kBgaP2SU4am5\r\naqBbkAMjOGiYXqch8iMCagckcDBoEVRhVcqDPhBwbnbg2VqEgAGb91Tr3kbI\r\n5al6p8sI6/9hovMV8EFajrrUj6ZUUP+GZiMCM1cIA0dl3arsqQH6yS5Ci5OX\r\nRU+e5gDo8UKm6fdWJKq/FTYTDrMTjuuZl/HDtf25JovNXyqN2ldTFZxiliFv\r\nQ7chwgpUI8JCVxJVr9gU/ZN1CMIQUI2pxe4gZ7QJ7vjtzOvmkUpNBTgfVr6h\r\nXj4JToTxzPAEZtUctfGra0u/7WoZYMwJMEs=\r\n=tk0X\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220709045814_1657342713100_0.32325273698561174"},"_hasShrinkwrap":false},"0.0.0-canary-20220709072030":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220709072030","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220709072030","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220709072030","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220709072030","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-n/ZZIsObXS/sefePKBtDA3aq9sPCuavCpyQptS92GETSdB0CAXp5wU5c+PAqPMSLeOcu4051N3okrFCuBmIB+w==","shasum":"48b4007e4b033a0198a56c4861258c9d21db3953","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220709072030.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGfzbEzE2UVlcVcfM/5MpO5sVCFAHh9HVIGmBwVz7lL/AiEAhKiW4SpwKsF8PinssjpRvo2yRxaGpXopOrkBPSqYMyc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiySxOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptnBAAjCzuCUK2sMytwGfPU/4KgcWYsDqgwHvj8wNpmN96ImQpUhh0\r\no+ye3IxuW72pVlzc8hmglW8WljlY19BAxH9BmBQNrYiTSVJhMC3C3NmOFRP2\r\nNjz1cjSQN5/uohiEGhzNFVLbOyjJgZDeS/jg6UutPTPdJi2obAaiuAMzA14G\r\ne6E8RdJxkX5in4vHKIB8+ay6uhOtq7spoPzF1SR0+3Xd7oSFZTzjsJzTxv06\r\nlJ5Uqb0xfzYYzGpBiYR5if2sIhjIOPAJx07tXQ1QPxVFGTHHTnSW3U4lC5K4\r\n9JWkBTM9Y1raxporF2q47iCM7qyyV9x+hbaE4+g+Rv4GaKvV3H6F6TTpGrDD\r\nNVKywWhYbvGEPz5/c2/SbVBt3wswcm7RqH6AJlzBqwiJjajtu1LF8RqxDT9v\r\nKpvRQCnqXzpbYDNxwgYW0KKSff7iolgXtG8Xo2PzvBf62gcHV+oDqzQ4dWJ9\r\nzP3+PhllKSnYdCuMX9CY2/56odLROpltxSbQq8TkyBy01FdzPBTyK2TGyUvN\r\nsNGGepudTpjU3kg0JnPwihfj694bYQuwJZbWyK9/wmCUdc8wir13COurzH5m\r\nxSze15hKcIg/8w2KejQA20M3f6S5bwsqJyQnolmxKo97a8IdSV8xmd8uuV9L\r\n4bmKqzhmMt1yx7HwB816myRW/fKNY5Hfxgw=\r\n=OwHB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220709072030_1657351246121_0.5566301705804919"},"_hasShrinkwrap":false},"0.0.0-canary-20220709113411":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220709113411","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220709113411","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220709113411","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220709113411","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-v/GU7asdLVWpdC+iRvkKuk4EHaBPc+BoMRCiZC2BdWDnkhcWQSPRAz5tQt5tM1Z5yKmuyJDVPq+sId/t0R0y1g==","shasum":"1f6d88b1311ed57c05ad81fe53620be775a4c525","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220709113411.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQV0MVHRvxlyOHfuK5ZL92mR1+b7sT9A8TZrZSSv6EIgIhAN2oPdQoUZONsSOpYXBmpr9+OC5aWLuXdXI8KoBNGssM"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyWfFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcFg//ZO62xLf5EpYEF8vRxmB4DvAAq+eyfWgGa6mGvX0Uhd2KVr9A\r\nIOpwzl7ORR0L9EuSGLbTxz1c/IuoveS8L56YNOAvzwhEUcJ4oVX8aZPi0vH5\r\n8jbbH8oC+cuHs9wSQFecVBCtS2zu5fJdUVvTOCL0YOCYPseXbbpGhiIyO+/2\r\nbTTvQP+RzSKwCbBtdflHEaUv226Idgp7uQ8A6dl1Dqp3K/PpDaPp4sRRbj1w\r\n9BYH4ODZEW5l8E0uinBNsR+vb/TO26lCPBjGcO520mk5seuZSGoplNG7IeIJ\r\n4GTJ91rMPGqPGcBK9fbGhMYCz7JHFDCONS/HxB77LSCkVx8L//1kZG6U1Ny6\r\nn/8oQ5iS+EpOKDIbx7ZLgaHU0F8deDWpRvODuCjUzp+XWN0h8QBLEeS7vLHW\r\npjtAGe9ey7io0KprsytwYNCCeMnI0/j17h6BPvo5kqCBMdF+6Lpc6SeC0DBI\r\nMvv9rUKMeTdcmL1AyBm0j6cLbR8zPpiK0B/5dcgdsZ/fLR8zxRBQvxbXrHBY\r\nJS3aLjr4QZTc5tCU4TkTCmj4Zip/NVX8ogxcB2g/OPGG6vlClq47u0u/+7O6\r\nRnUbJisXATusSUxJMArFKrjJeM8Qh4aDvW56oUTS0WX+KrqCTZ5vxDEWdKqa\r\nsm/6D3SdSXcO7SfkgIu6JWujqfftaZgzC2M=\r\n=N/uC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220709113411_1657366469149_0.4999430410878354"},"_hasShrinkwrap":false},"0.0.0-canary-20220709142503":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220709142503","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220709142503","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220709142503","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220709142503","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-EnuJtEpLzB6BeiAzdjgxE7vhf8jY4HP4nFbh8f6YDpXNDvEXjS7My8QHpHTg8oMgUkOghoecwdS22tyjSTsQhg==","shasum":"3a087d56356b9335732d9a80efc52e7b08b41fc9","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220709142503.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEcW/FO5B1GPUBrHYf0wCqnkjIEo3IoRBM9IQg/RQ8hHAiANHsRecVaF6RMDCLBK5zOfLLjd5RGSlHn2gNKMkVd2bw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyY/PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVjg//VdahrPusN1mAF0IqGiHLOKTBoIw2hdHM7cgN8C9jzVNbY5up\r\nRjKqGf1XTfQZ3YEgxXjoRzRBRAXg/gJdcY/nx/R4QmcpmwMUgjQvIF1jfi7c\r\netbGo7HAKge8JPxXzyhjLJ4Qzbzc5Cih2cuMLSb3KUTuu7Km8jh7bNQlr7d/\r\nJTorCmnYpxowffrS6RC0EAUpE9YOM+Y6wJ5vqdhR9FV0+P6BimwLfEdDTy80\r\nLFE5nGPBJu98O6OgMMXR+SDAXKmaH9bt5otRywh2VOYIxZCRZhy5TYosbybb\r\nRiOc4mnJOyfT4povxJuQL4vEE+VbqBX2oEZxLMLEeu6SGdQqRWrt4GrQL2wN\r\nMWSQY+To+JK6jUVjjammsBEwi8oIR0eUY2LpDQiEKsZocXVkN5sBh7OPizGI\r\nuYXv+7ASsR227v5IAM+HJwmnBonK1dOaslq+PkFDAOHB8aw8nz+62nVUwe9W\r\nUgENTiGLYpOL5UFn6zvy5X/Uql0c51ecoRgMjtUWtm7Auodc7XDHUkZQwzjI\r\nzhsUB0DiorD8J0UWKgJ/jGKeigGbDnoRnCEr9mWNxpsWn9C2Aa8IJLQqc+tf\r\nt4fcGkTmWED85FfmJkeyNSowGhw0XcBLtRdaviT+291V9EcBhyQ/VojX1ubw\r\nuzD1lZIGUB4Uw/LX8uc4d8KgzpXis0JKOAA=\r\n=apaH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220709142503_1657376719384_0.8667151769531769"},"_hasShrinkwrap":false},"0.0.0-canary-20220709150918":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220709150918","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220709150918","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220709150918","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220709150918","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-JX+RwYYu2fbuo00x/kjIdvkc+IRiE6eZEcKTsPyTvPAOtFx4hj13z3YiX+wX2/k/W3v3aUCqzAGoio/mhfGYjg==","shasum":"549efc3951da8718db9d172d97066838e4dfc493","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220709150918.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF7LLSw5cmD6vrBsyzGIFm07jt6OHaS0aR/TnxR39YV+AiEA12J8sXxrmiNy7PyrrQ/i11PzUfCHU/4ksQh/b25ekzs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyZouACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn1RAAovjEG6O0QaaJKtkeC5Jif1/4DhRzn2F4Yu0Su8iVGN6Nd8XE\r\nJf+9nBaCUCam3bLkQOmtLkd4QF6WNmQfnRClJWag2II1BMlyDx3lOxtEAm0j\r\no/kMa1hDZqjyvNtI6ADOj6MotbG1EkuXr5JXjwwPqHsDAmHoV4uOJwrvM1N6\r\nhvNgyxYwV57G+Z0y5NfV7GUBiKJ/6b/1j8EAyi51Y2WkrXXckmxwrcLJ0cHm\r\n+LWMPkhdBOcBZcb4Odd599lWbVlJ8iANj/VzbBntjmz2tS15RVuZm08KrvHj\r\nCaM0c1StqgD9ikYzrWWUCMmBVk+zI3xSV61baycVIj5zSubQ/ps3Fm+vZmWD\r\n0PXbvGnRt6aUFXBNEdGOZ4Skzpx9UqZ0gm7w4keNIXyjQf4HakqPeMyTzvRy\r\nh/THLg9uxrasGBeDhAqknnUWrt/O/AJdT/1mN8+OTDyhqvJBXVHh5obiPHIu\r\nX1dEYbbyeu5oFl1MWcVXaDrsc6QaodW3WXz8xtkxm+a4YVtUM16nfFDGY004\r\nDcLVSqMnxOJSPsoQvReCnFGoX9YNAfRm/sEPiQLyfN3rIxhf/II9ZeaIq0iq\r\nJM58wOF4VXOkFJQG4EFYdhTjxTh3Y+8Uo2DeNUvLSAA51QN9+5hl4ej33kl8\r\nF/scF6MmL5sWrMH3YEiqJUU5b+VzYWQwHYU=\r\n=Uloi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220709150918_1657379374516_0.8159702202843042"},"_hasShrinkwrap":false},"0.0.0-canary-20220710094147":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220710094147","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220710094147","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220710094147","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220710094147","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-KuEqJnAUpHrAjQ/h2C22RXVN9pzm1kZ2/LjmJLXLujF0CLkjly8nM9DLea31GtJriY9fEBM7zfberje+8/NEfQ==","shasum":"d963c94881a591a3cf03523a9d5cbf1ba71e2968","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220710094147.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA9uXHGED3DjWFKrVLfev2JQwg05IfycRmJ6GMzRw4lwAiBg9rZycDmkEAGqXz9LUPetBMPEyoHeJE3YsNX8XYSrTA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyp7rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCRQ//YURxIqkq3xR+rwBlBQxEg4EvkN1yMPLertHg98JhDijIYdlT\r\n0YLpPJcd5rk1Ztey9lrbw6uscQt8aZd6IWj3x/F8VgAVE1hQnc8rPKD9GyP7\r\nHMqy7fyCEsPFHKmZKKN4fs4h6ADPZz/DAG2HdYC/krVc7ovOdAcPfL/ZWWTG\r\n2qT/AcXlywuliYcqvn6u/yu7WDqPwTfs7Caa/yJVf7FGXzjX4xWqM74gYmRF\r\ndvq7eUgNQ9lyrl7y/DP1Aa16DZMZlC5At/csEAK3QRpMZdu+4SMDezPK/rZX\r\n+Qc47dxqnwYwNknCL2d7Ur9ylZ/YWbVHP4jgvlL+0B1gbJC+HB7vQ9YmgHpQ\r\nXiLerO+qQGjZM62J5YBgD6BUfL9PTuuKR86kLS0H41piDi1i6a51WepyAy0J\r\nS2Yzz7mZ6lF+rJntBMIaYFr7p7WrZQEoXMLTIDGFBF0vl8KAMdpTmEZDJhSj\r\nPjaYJwuHak3T+W/VD2MOiGK3ZCUQcpsASrC5w0CAmS8DokCqUuOCPFOPmBPZ\r\nh/szDjSyd1HZlda/5yxugINhJ+s82BmFS4XjRidA54PW2W3S9jveqEpIrC2b\r\nwsyMXYf54gSSTRJqZtqy/9EpbX1LcsqVdYm8OP4b1DTbgIv4DzHwD7Td/uEa\r\nmVHzuNZk76GSvQ7jln7EezZFRRIg1tKTUJM=\r\n=0xfl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220710094147_1657446122818_0.306071355283442"},"_hasShrinkwrap":false},"0.0.0-canary-20220710094530":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220710094530","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220710094530","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220710094530","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220710094530","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-Qmr98p6dZfXsXEYkmE0O4D6UFBX06V5aYWq+HVcZkie2JkuyoXu04+Bed7WApNtmBNQcCuajhYBynq3UYXG9sg==","shasum":"d2bad2ed051012d531ccbe710a515180cb04b7ab","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220710094530.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIENDz5yPrOSElXK5te2yVMxkRfFaY90SMBSv7LMK2ZBbAiEA29qlQyGAjKYk811S83+qtocTtrKNZEisg2BqtOROqdE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyp/NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlqhAAjnNUpXpNaGnJl+Z5tw4umbh0lKuU5rhqfRI99qB4qPkfobUY\r\nZDkuoyOz0O+WsN7cMpmUHa+n835zKdnY/SMiub+bwLoEAej6RCX87ua9mf0j\r\nZRbBYYLbyyxVAZtX2WLolR3UOaFQN+KgyuobWVhC+s2do64fpsQrvX75Iq/i\r\nTW1IIR5Ddme71YfIjGIIymajdgtZJ32s8npqcEzrMXVbtj7enBaWMMe/hZdX\r\nFRjAzXnaZMJt2oTkOCAl8JPJgO4HSTjrveCbzsZgRZ7ylWFJpF/il8/Fc8Db\r\n7BBSIEtbdKeO/hHiv/3guzVzxdlGmcD1wMhcIjlvYfRU6zi//gMf9gRaKRu4\r\nzn2fPf4icRGL9akV3/9uSH8xzEGi47ALXPEagGwRJi0FORKHXJF/lkaB0e6e\r\nbiaVxJzcRsRlS/UatuI1E+kQ01fOQK5Z114MPaZKnOfJBWOfIyRaoEWc/gpy\r\nKtzcQ2U0wmtKFBUWvH9Kts5XjuQ2+7IiOeIrFelGF5gZtiTxhgSLQY1p6KUH\r\nS50m2g8O3r6AFLKe+rwHYjy7aPtVZhZnz3cZcnQyY4o/xunzwEMZpUPqFHDo\r\nwv60ruJGp6C4fD90GkxytSUVMl5F2sm/0YaH1fNoIK9P8nZAZC6KThSF5rzF\r\nS0R8VAlg4RPwEGlBPr+B5Ho/4MW8/1wZUaA=\r\n=+oan\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220710094530_1657446349365_0.23132916666844539"},"_hasShrinkwrap":false},"0.0.0-canary-20220710095448":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220710095448","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220710095448","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220710095448","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220710095448","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-Tyhg1CVkdEnmkmRa59t4PDeYrHt2w8yJzYgHJQHCY5gRj4ArwSXD/tEL7m1ApAXIwlA1WMTxTp1A5chHeZcpuA==","shasum":"6104b21de10fcb0556a349a11097cf4e06bf03fc","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220710095448.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKZBKLjpeeih/ozFQpciBRQxF1SFI2EGxqURGXgh829wIgXwd9Oink2Sv6/WysPIru3YvZUjHfRubL0WCcaaSeFd0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyqH4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonzxAAmrPBBv5Bj1pHfdN8YMfeHGB4bPVfkbJOhgoZPoolKMIsgRq9\r\n5VWvHC+Ou3HGGve3KFYUAqlNWq1LOGtHSyghsvLlmEijlF2PFJZaSOWejbie\r\ngC1Ep5TXVbMLskhLOErin9o+v9hWZKsz2arT1xFuDjb51Vs05vKrJ8o1kT97\r\n101x81CzAwZ34Bgx7zg1ttrylCmwzBE6F+MX/NWPxl2cXTtwOTFQqT09y9hA\r\nF5+DQSeG34LCJC3Bus8N8X2oiVPi4B3R4008EXtKowADkEbxH4yWa5PW8S3Z\r\nK0IbB0Cg0gdvploNgI+Si3y//rUz96XDgHsTeHYeu95Ua1iroe58Avj5gW1S\r\nVBN6DSIDGAcSdP0mUSlzb9aTv4kAc2ryhBEbS5Le00utlIjqX/6KdGmxK7Mi\r\n6gPXjdJl+PO/Cpi5809HznHAl3jNmwRmh1cts+uHF2VAbryIm3J5Yjmc8ULL\r\nKanY6TzemVEPl9laJiQljWmMcIgNk7tjqrgEzMEnvAz2P7jGOjABHDs4xQ1A\r\nxN4uGtNNE0QZBqsZGJ0tItKAqroFjEeotfVv9C6z5dvMdR7n7ybayiMsFWiD\r\nVYsoceL5U9/hpCGGrJVYjPNjHqgHys701IWnjuxLTfHzUGSzxxwPTlN8aX+d\r\nk27/30wDllDfJT0arU8S6CMdmtrqLp6N2fc=\r\n=6km5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220710095448_1657446904638_0.9296585811290949"},"_hasShrinkwrap":false},"0.0.0-canary-20220710104926":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220710104926","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220710104926","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220710104926","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220710104926","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-CU/cBtK9eZP8JrI0n4ASOJYJF2JtJBHrh+jlD352n4DTV41QVCTY4dGQwJ4ufZ2Vyl4aJWiKpoKbXLapYxOzdg==","shasum":"60dec57b5dc24ec99626f3f3c4783c1dea3e6d29","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220710104926.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqQOV+dbcBAjqmPwAnuVuUZdD+XJ/kpLqfWueCNEGgsQIhAKztT7I2sm1pcaV9dwprGGaRU7G8Jee+q8oe0eRFKO/s"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyq7HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqz2Q/7BLiviNcaY/Rlesx1hpGVjUoDHhYHgrvgCPPye3fvzAEAUM1N\r\nTNXX3Za/n5bhBUGZdKNPV6D6qIMa4VPCr+jgevLJid55lv76xUIu7v5g6LvT\r\n++YiYtB/So+7ILFO8ZQZ028rHN55EZcy+H1DMh6ZeCC4Tcel9H4xMBWWmzEI\r\nC4q+D+FoSUU7cwZuUQ3mW0itmQewfU3vbWjcKCvK6K7h4nAAeA5GYU8flgjh\r\nlP5MlBqyQYs+XALldAaj5cIwmuc12SPK/7l4V6tX9u0HZq2PrqAxu74URRw1\r\n9NTXzBoKhs1IPG2VS6LZuqbogUUwGI/WjGEKh3PgbO6h+bItzYykHO1vZmNF\r\nnPeWdkUgjpEu1v94GSTV1ORfLyi0ur0QIAtPu99q8Eyp2TzGXyXzo8YPj9mn\r\nTL6fJuseWVP5/IEspGaBq0NeL4nWOUbv0iqdlv/GVvOTHoiUDMhJzxfZJL4x\r\n/TINrXren/FsHpnJm2hK26KnEyx/6b7By6M4KXrMoplz4ZyoaJaNW0HEcJTC\r\noQVaXDeT0AqJX2NK4egI8FPkIMSu+urc4Xb5hRhEbti0hKg83BN1+jWW3uPs\r\n/aU2DECq5J65u7CJYcgojrvnBuuf+TVVLx6TBQJ9EYlmJdpEYwYccGST6C8j\r\nCqUjPOVNPjdAhIu6cnnE35oHwpDPP9Vs2Yo=\r\n=PU+1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220710104926_1657450183021_0.3283547362088446"},"_hasShrinkwrap":false},"0.0.0-canary-20220710110359":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220710110359","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220710110359","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220710110359","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220710110359","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-+/JsBCuXlCWhmqgqEkCgLi7/IgTAa549DU+fVeRUSgggk6Cwi3bFj4GhXde0oOIj2Ah0sjPAGOCP3JXnKsEcrA==","shasum":"aa87ef07a1b9b884549808a12a60b91ce7a2c1d0","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220710110359.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSNk+RtrfPWft20skFDu/jPgLev+DZeSph8N38P9brZwIhAIObLBsVfH3LilQQ45C0GeWK21k0ZRfYMoM9hIVssayE"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyrIvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgBQ//VNKmLnJ6AhW4Dwfx65AJJ3Ld43Edc7x6C6nQL0z7vilE2tnS\r\nEF2lmzuIFGUIZNEKqmdIa6AEEiUOngm5L2SnG08EC39FmeQszftT373e3aPs\r\n86K0YPXuhB3OQgFG3pYzLFAqaXW8tSZLYEIwsO0w9fmgSqk+sP3wQjw7AuSt\r\n91a4ZYCihkJIxc3WQzN+8GBBJ4ICuCAdql7Ej9O+LXbO5tvvAHgLSGI+ddg7\r\nfjgtjLDoQQAhyZ7wpY7XKUn1kyhMmw6+zZFBzyc5ZwlKRF+YaXHvojYrXyHn\r\n4b2zrFwtttRKruKL9zc7FaqqKucuoQsw+GXvj+vxm7c9POfG+Afo3w+d8YeK\r\nwoIDM3wh5n4xWaDCbP2tNaOR+NZRvT9mT7aQzTWhOvO77JrMsyfoEmLEZvH5\r\naIYY+3t/qKc+CvS7uOzpocMm8xnFv3rD9NpELcSNz5dUJJC4ND5G+JplUGjE\r\nibLmOe37RQXgFQxXWi52986srgX4oqu67/66zjHLggT+oiaEgd3slkffxhS0\r\nguIKnkpG0VZ7M3u53+vEy9NAtfkn34WH4AYlPNnNt+250/eUbQt0yUUs2C1T\r\n7NwuxylHrLZdrvZpAUZEtG4k7xk/nrWoQVfAU7TPQQGOGCggvosEC5bIkiVe\r\nNutHZLxOMZUqxqSk/0fcFgX0tkOiczrwcF8=\r\n=3bKb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220710110359_1657451055142_0.12859824506281337"},"_hasShrinkwrap":false},"0.0.0-canary-20220710111250":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220710111250","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220710111250","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220710111250","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220710111250","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-0N0OZvizkAkrL+B+RpNO5azveO4Gv1vW/y6ARHLB3VN0cjobVh2qySCprZQN/33ILMbY71cEEhOU2MwKEnFLCQ==","shasum":"1f3654bf988c35945b820d599bce49b2c9194ae1","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220710111250.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBskPFlti8J/b61vscY0yyBO2Re+LGnp7uEST4srrhFNAiEA5yR9wtJsGt5MaD0Tx3MvP8MdNZT8dJ5YgKX46xlUwQk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyrRGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsTw//RzHIG8C94VOEiHxPse2urcljZjYUQy61pevA9XvLJ3DxImPP\r\nO/wfUMBz6DDys/ywOKVXCAybDT8PPTfWQ60hsgLUMJtNpV8eSD8coraAGiBx\r\nSte5QySVn0q7GDcW0RYHRm5XhrlJNTsCsSHqGzHa8HTlY5iyQp4y8ciSD12Q\r\nTZw3grY7y/jD6SBU9/KT1ShbJXU45KGcEDcKhI5oNZLuBwATa0Y6Zfn9T3EK\r\nEKRIy9FIW4u7aHxN+tvc/VTcK5gXG05682AN2Qjs2HMBixyCTGPbfGf87nvR\r\n8uBq/unZoMxOVdD534Mvul+l0DD0N90GCL3QzRAqI6aqHNHUQY27KmZ7j3Qe\r\n9E/dGLUnmMW5uMWy+vAlrWaPkmK7Wblm2UM+7pC7ToaRm3Lc8B1s9dwcAp/T\r\nqMmVCmmcSMdIWv6c0MslmrIxiPYQF2fe5HMHigrw/VQlvPvEd91C3Uu/t9h7\r\nym8fPGyDTP6q+hc+gCnsi65vW+gVgp6kIKx8UQ3HdiPhrNsMIppwVTzzE+gY\r\neqGkeINr9S1a8TPDN8UYS4HXzI2SerLJ62srEENtg1LLkx08oew7hAGYD1cZ\r\nipoPUVkK8Am1H0O4Ld/Fe0FcQQh8v8xfJyzW1yQM0R9xhF6UgYt587epypO3\r\nn75Kly/kErT71lqHYTi41EAokGYYZzBg0qw=\r\n=dcKn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220710111250_1657451590341_0.7259666531604987"},"_hasShrinkwrap":false},"0.0.0-canary-20220710112130":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220710112130","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220710112130","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220710112130","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220710112130","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-OzlnSDBhy1yVG2Hc3+f9iJo5cHYRJ9K1XLpl/+LhhBNXFZs1XO/NpRiJvl80kFYYjoWOYsYhkXSCvJZyt+SOYA==","shasum":"00550ebcde66eaa3c9d75174d331cff4fb59a985","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220710112130.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjrLPFxB8wzTk6LHOk5ZLWNtpGvDojVqVMn2PAekaNHwIhAN9Aszxahi1TRNf0fVGsg0amJoJU18WRK0XnqKw2/4BR"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyrZKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7OA/9F/Icufvv06YCxuQlGGOXeJdCKXVToM6AbGaeNPOhVaJzuI42\r\nk9zNhEqScjA1YM+MaRre2HjEldjVDxOdHwdeMeFbVP8AMGvWedmZpMPwdaAm\r\n/NJ+UtB0dCjXaEuJko7yjBMLYsRl55pcvK76jhnA9EzuJMr3PJQ0A/jfIArC\r\noia2to+D5lkBXn23N2wwuFyvEto4JX6IoAew3mqiXJxxcNrvSUps44rqjh0e\r\n3nGucIsz9lRCeGZR+PmYJ3Y+4g4quJaUfraVKIJ4eAVY9Vj39mX80Aucp0SE\r\nDtGJSYvVvBvpWuEG3sD8I0kYcLQQ1rdoRDhJb3RTXAZM/YMS8XQ24sVfaGsO\r\nyxvubFpTp73HOOwWgoTFj4vV5FC4K7Nt3CEz0iFUpE5EIixKJGBem9hQhNO4\r\nsWZvvPahZ3VPaQ4cCp/teL6lEfxtzhBQZP1xurZwR2V4K4hCCkhZs3vaHIzG\r\nfsD7GXkaT9bQ9H9j5Fqj5EGhGjSD8NL4IHV1x2lUKZeTDw2YcbAdExiourNL\r\n7OeQHCjO0j+2LKj4EY8mGHov4sT+seyjylGOt7kyO/EPsR5JUvzOCH24mLrs\r\niWKvQocawaW9bNMvOZ97jZGwjbrtx0s853OFaChlIKnWgkWJjm1ODDWZhFAd\r\njAG/cxoo3oLlDM4as14fXRJivED1Qspw8s0=\r\n=pbol\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220710112130_1657452106392_0.6918471982380112"},"_hasShrinkwrap":false},"0.0.0-canary-20220710130149":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220710130149","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220710130149","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220710130149","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220710130149","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-D9bnRREu9efAzw5gbCKbzRlX/4YotILaP7aN1IDBoiW/9wnfTkmGzcIngiUWRjxRK6M/GakPXuo47OfCwJecwA==","shasum":"d0735da84b0493e19ece643a659c9414f8e5dbda","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220710130149.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPAkwa4BELhHukLR+UFa7zTZ+OC7MK2TyvAawReKumqgIhALGLkFFiW/WqSYqPlOV9k/pDTHJerx0U0/vfvrdplM9H"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiys3QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreaQ/+KMf9d4Wr9ZKuqsA2/eXPeIMGfz3crbiirANG9NgCt/VCOoT1\r\nAqYMbEnhyegjQHfNF7nJ+oNNRDQZRR4PeuzZfQZDsDhsXjHYR7eHdPrrCRxu\r\nsCDi19RiUv7ZSMhbRgQBnxAWoA96yAXL79VzIR38LCDMX1RkRNxq1CfGhXvI\r\nY/zdI8kEsKwPhJ7qir/vjVUJrDBm6fJBWwhqSkd9sdHLWwaEV18pGq7CnY/v\r\nyx0c23XYOPWOGoPF4dTonBwewgtWFJqRNmsZJLBnU7dG3AhF9vWjQD8RdEW4\r\nxK87YTovh4oTtDFXysxaf5KsRxdmu0gTYlgaecw6tKYWJn1S15f6Inu/XcQj\r\nQ13Sd6vF2YnEp8lYhcjmDZeTFaKbniIj+t1qpkpChKy9zSMCWqych6Ca2c0S\r\nnhk1jRYEewhwQQWbw+OAkbrwMGqLc0fmDX0DQJD31e3MIk3q0lpqwgAf800G\r\nsIoA7kjHsBXu3PPCKnsfTjwczr2xJ07lnhJH3JwDxJg2tG326vhH4LYobiBX\r\nJZPoM5qtZPvDZmyOMJJ2QBzX55yQYlshgrUa4h7mETh7jWqoDnJ+OxHIS6+I\r\nkYU23w/kRvc2CjASKZjzbSQSKHW0QD+WzCqJ4CMCfBlO99+bg2Ewr4FHyVvY\r\nbhcISgbLmdCfL0m7781dBmtAtFu4tlGB+/Y=\r\n=YJAv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220710130149_1657458128499_0.8226100947816961"},"_hasShrinkwrap":false},"0.0.0-canary-20220710130959":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220710130959","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.0.0-canary-20220710130959","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.0.0-canary-20220710130959","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220710130959","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-n2JtPWbsvnxfdIY3CXxafaSIzIC9ulIab3gT+LZBkBlwBHIFO8ro4b30Vk7EqzVGUL3PCEZGdUOyXs9FERMB4Q==","shasum":"931a282f41bf1267c3a10bd2af73259c1e5fd54b","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220710130959.tgz","fileCount":40,"unpackedSize":132341,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICndfdwNyVqEcHJ5V864effy5hhIFXk7pxTr6BJajj6pAiEAopNGqD9FlA5aBG4vxHDMKZUvy5zcHUgK7IEyr/+16tU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiys+7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1ZQ//XUNIgYZzbogJ0Wy00SeOJwmn2TNiSW5xXlXAH1ODrzYFF1n8\r\nU5zNprpYze2SCZFpUI8IoxxL6qZE7dTk2843t3E3pVndLamyhfHgg5nbL6X2\r\nk8oC/iWnMim0cVhfDGeUBMUmNsomqBs1/9uYh4jyULlO0FjaSDOxsLvum7M9\r\n87aGbNXDKYIsv8Vxs2SpFnwlNgPYxCAoQNG+XcOJLksssbrIwL1muYn2EnxY\r\nFMG/LUbN5lLtKEvnM2Gli6dpgO8tzx9EaJbS36owdGrxA1/6xVScDNtlVQWs\r\nPf9/YRAMa9vBMIOCjgVfjvWAi1tfnndqCdpC6aBWqcDwvUFS56Hc16NZ7tGu\r\nn15jYoKovrmlQ7jJ3/WcSuxnecSjUlc3RYHSXMmYNSUXE8X7H5mASXjcAtzP\r\nnPGeDjhO9wzTKUc15vpxXl28JijDYk2t37SGL/NNt6IcOKcbU8kaNZJWUNsa\r\n0xCam/VG0XDU63tI19ENVe5esK4UJxbbbJdmMzNINJIyw3dgAntbNJNXpMlW\r\nEK8PJigvuT9cvW8lD4clYupAkJWmKLrQqDyre651af2v3hBqUQ9U2/61U2Ou\r\nPNEY4oy4uaoJ6E36320dZ0jrfPKSCsbbJvSc0RoXoZbsibvLITFr4fH/NP5o\r\nDOgrvcQtmgSHluaXKyFaXWRAXZRRUYs4pyM=\r\n=a7dg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220710130959_1657458619630_0.6057335499283298"},"_hasShrinkwrap":false},"0.0.0-canary-20220710132445":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220710132445","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.2.0","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.2.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220710132445","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-WUw1DRt0aSJ1U+OpMMyhabbsYX3/cnQtmcIX8fp9pj1SSjPhOVod5ovWmzxdLqeK106X53U7VOyE3m3h2uBP8A==","shasum":"05d3533a0665e905b66ad78df0965b14037b61a3","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220710132445.tgz","fileCount":40,"unpackedSize":132219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGunNRxxPBJUG68AjuBtRP7H8h4uFmMVODew3vFuEV1bAiEA12/sSukNlW8JC7KncmRFg+EPB7RIvkhTknN1F3nsrMA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiytMuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHpA//fe+ssEyt5OkDC88+fDmESaxDJ3Kxh5QK9M0Ru2pkmn6wH67W\r\nKufpL9sIEefESTEDol5Z6dxoNMaYDBwMLl5gYb95R6R0EtcdOJs634Ziim5v\r\nWhxXWd4qI735KioIveoDhAA5y6lMafK/lz8uptg5DsAVSiHzliOBXgycJpD1\r\nCD/kWp1Bt57YYQq773erzF0u2qDPu3d/AbYKOEVnaQTMNze6C9mnEHkaQOuW\r\nO7VDoRSvN8nQv8s/AQROFcTRI7Fjnw67wkBazrHK4LAFvNC8/TM/+84St0gy\r\nVGQADNGVMCFNOeZ813T0e56E9AR3DiTzodi3PkM4p52LBbeLHrZgd/lSW3HL\r\niR2LTBMIlRzb46bR/a23dhlXFbOl+7iJpxRgRwNHKlMBiqynEi9lvXA7GJIs\r\nVTJoF0Jl57juzEmD/a/e0uWHVcKCl5ChlphVPTZ91Yn8ptdXYMoAs5NpEwdI\r\nunIIT8uesDMMoLZi+MAaz1w3j8tPibuwnA+rWyiCXbbMa5aubImioRlZSdGQ\r\nDNyn3FcC2m4j4rL0LgcaFTCLEn1XFsxwwUxAPidmKnBatlFHBC6etCsIqJFs\r\n1eXoiN+S4pcBGEjIF1GlofP5WvFYK21q29Vb71mOnNhseqFyaCWVFF7zYY4d\r\nb0Ed0cHVsL1tftmZYxAjXEMWpBgBdlihyDw=\r\n=gr9c\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220710132445_1657459502364_0.941001208278545"},"_hasShrinkwrap":false},"0.0.0-canary-20220711120917":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220711120917","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.2.0","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.2.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220711120917","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-9ILcnvlVcgEGpsrRIXp9Z7IZpsNRIJuFVQsWqRCdt2uku67+i1Fvzg2rR/Vt29GufrBKK435n+ckeAax3D+/0A==","shasum":"eb59ce6251168f3f81325b49a45ab5c2d375c9c8","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220711120917.tgz","fileCount":40,"unpackedSize":132219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICyJlhWKhJRsO30VtRg1Milvf5RFeqWMNeDqFiksSdp8AiEA9re/HBExBnipSnb3hmCFCEhPyhtNCG6vgP+1geI8dwE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizBL9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7kRAAocruTCP4CMDTakQEtr4clKDk58u5e4uvVou0LQIdimtU2ahC\r\n3HR8iVSozbXjH4biRJoHe1EhDwvoK36un3Vea+d5aIH3Ndm708ll3U6JhgTP\r\n9LI1FpYkEi1fCsCrjN7BX0OUA2FlgykVARilWsfMb9ELCR6hhVDK7hWc+mBb\r\nQ/Ej4dTCmAZPcyRZAIxzlh635N18QAkJ2Adga8zVhc4BR/qetA7SUyIwaxBB\r\n1+C3ob7Pn9764QMtgsD53RtPqG6cZLRbMcx7LNbXKqQlpdNnMLcTQ98Z3zuV\r\nZxvpSTuMWhwvBMcwJModeU1n8Frtqa5Qxt4eYnqHBgZ8B2coGhDiuMY15R+u\r\nH+sNK/G7aSxTIdUEh0U/t6lLFfgsDKTCl03xrmfa/9gRXl7/HrJJdQMRQ1yN\r\nsdAfbyCIqolsbFWcdLiRgel3mHfsCPT80JbbCbM72I0MdWVvX1n9d2JpKHnK\r\nVlj5QQ5JuZfNkhrLn2HFIr3zaVRcYeZVFuhipl3U+kMTPQbbu+KL1ccjsiau\r\n4demCUSLXQYSzHQYN334wq+Z6Mkc2syX6LzZ+h+gtnJmcpL+YOndj95089sb\r\nHMeJMFaisgXVVUcnlVN5EcWPZYQO81ir+H75JmRBzlgapCNE4abzfz2KNU3r\r\nZf5KVidjZXuLhCU8lfi05kgq1mJZOPoygYw=\r\n=3x8T\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220711120917_1657541373284_0.7387960573975381"},"_hasShrinkwrap":false},"0.0.0-canary-20220711121232":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220711121232","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.2.0","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.2.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n> This library is (extremely!) work-in-progress. **Use at your own risk.**\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220711121232","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-hUqNc2xk80dm0+Fp6UfV86bmHYAEPUiI05y8o1JvH9YVCh8KE2YppEJlutB/Fnt1AbXgWcf5eX/4cNo+6kEhZA==","shasum":"0ffb5e9bcf96536f2a7f29074f7e9b7384bf87f3","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220711121232.tgz","fileCount":40,"unpackedSize":132219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDw/4S++GLr8BNq6sUaUyYRD8gSG5AOnsAlMEJrc5vxQgIhAOut+z0YDqsOfR7Yq9kjidhFgj0+2GmY+qowNK8L2Q+G"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizBPBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCXg//eJi88GJ33YMieN3c0jnwvWDaJUyTYWFi4cGhOsyQQQ8GIcal\r\nCnkxl3NqBrpdkL9TlBaxWbHqJCDt9B+63ZyN6ONxiO1WjX5vBcg9PrJeIJ70\r\nrSY2PR9pFvfzWNdfwCoN/Ow631cV5Q+ncXqMxEFHbJxvSZXErJUGkGw0cdLn\r\nRKc8pAuwICU07Ban8a/00OiNSHkHfIr82Ys/OVhfKv3of2aXagVGTyoAtyFy\r\nClARpTNf9f83hOeUDnpHyqCkfy04R/nxfSAtTBVwzf8w+Gm/ZtvOCA8VQxrU\r\nhQwyXGnv0DXwSh1lMyyikNYWGyjy1mKhDfGYHVoYFTzXAKv0BOr/9AUA/wZI\r\n03CmzLPUT89W5o/Ij6xF1Jmj46mk7XZKMheZBTPKlzwSq1Wwulfh+cNrwU/X\r\nFmw9CF5B7lQ9PSJkxCZM2e9oM8kbf5kiNJdzzCOxzDvvhge1IQcXJwngYsdu\r\nEsqBPhNU4Xis+JSmfXQgvFoJ1tF90KuUzDvvNo+aC0PeziBXlMjyY4AMh30U\r\n+jPnA5QS6IivXtFCau6iRqkRBKFIP8fvpBX0sptks1N3KokvMQh/eKdShuov\r\nc90A7af2I5ZNJhTIPWM6slMrycLnew6W4fO2LaFr5WaeYG7onbVqtNngn5bM\r\nmUMn3XEvtt+xwtef2JuN8N9icAl6mUnhh5A=\r\n=UhGs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220711121232_1657541569734_0.5489133413897056"},"_hasShrinkwrap":false},"0.0.0-canary-20220711122002":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220711122002","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.2.0","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.2.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n>\n> This library is (extremely!) work-in-progress; meaning that **it is not done**, or ready for use in any other capacity. Please don't use this and assume that anything will work; it probably won't. And when you find something that does work, be ready for it to break in the next release. **Please don't open Issues or PRs for things that are broken**; I am most likely aware of them. **Use this library at your own risk.**\n>\n> If you're interested in using this library and want to keep up to date, please [follow me on Twitter](https://twitter.com/hmans), and/or click the Watch button for this repository.\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220711122002","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-VDEInsFng9Tvt/rI/Ibhl5WZyZ2Q8KGSR3rrd56R2hZGyZS1lAv3s6dA2wKEzYO5OkIWxtLqyXGLE00sv+SO/Q==","shasum":"90fa320a4e1b28b4e586d30cd44572edd8f712df","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220711122002.tgz","fileCount":40,"unpackedSize":132755,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsBVbwiBKQImXXrO/xH2JTHbwAdsazIiXahJni1frmhAIhAPms9fUf54857Nrdaj96gcsadHFAGqE0nURpKYYRyiwv"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizBWCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkvA/+LLH92Cjgq2TkBgkRjub/Z9pfOc/UXNP2k16+NiqIsppXcMJf\r\n8lqzkTDT0ZaEkkRYXjxosbIZTITsqoLoDPQG3RB94I/3TjXOicq1gaTF4ngV\r\nLrIA7UVeMUuIfglDy3QSQj9DZzaawbmiVg3UYq56neDjbyCNkKwM1P9GmCxw\r\nOUbeLGCsTNFU7lNiCf5ia9SdF7xvrk/+PpSRblVP6er+QzhdQMuxXCd+l0i0\r\nT77iWgj8C2fJexfjuUyP2Q4s702KEpfB29BPS39HzF/P4v2AOu9qswClOS0+\r\neS+jlWV6WHz9P9gb5haDdWztV7Bp/Emapg5NcAoKfz3Jcjh4zXAbn82XUawH\r\nInq6PZjmLViP7uh8KMzuOrl4U1E8IYPofWcJ9jXawuQZwZWhWJOPbeo3FQdX\r\ncn2evO4axT6CiArrSWxFb/7GZ2y6w/DfvqD4h1JT2cqfO39E9AA140q9GRAI\r\n0/aujEluZ+xyZzcEiNP24IEbDfsOL67vP52JxezkB6qLL4xjpJGMUzpcK4uC\r\n1dyL8xiSRmzyd9VSYQF4D0u3V43VySQ1DKvKa30mOJ1h2mrZdXIJpQqGJfnr\r\nAKr7NlC9gx8heUGtDPKHZ3aJpIfv3AwG8UAZNVTLKMmue1jOOugcl0QXHaTK\r\nceiSgjwxF7L0HhckMLwBhjYgwwnECKU0mMI=\r\n=6NX/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220711122002_1657542018464_0.4913164139224988"},"_hasShrinkwrap":false},"0.0.0-canary-20220711170039":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220711170039","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.2.0","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.2.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n>\n> This library is (extremely!) work-in-progress; meaning that **it is not done**, or ready for use in any other capacity. Please don't use this and assume that anything will work; it probably won't. And when you find something that does work, be ready for it to break in the next release. **Please don't open Issues or PRs for things that are broken**; I am most likely aware of them. **Use this library at your own risk.**\n>\n> If you're interested in using this library and want to keep up to date, please [follow me on Twitter](https://twitter.com/hmans), and/or click the Watch button for this repository.\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220711170039","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-7tfMUcB2TcN3lsfZo3cTv6iOIupAiLYZ2I71tgxaFkXdAm1cXB9FZ5LpVgjBPYxOwJx/H9HhVKjmdUi3axmNqQ==","shasum":"a946e0b53f8a00b425e78c52b6f8d0b7ea9933fb","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220711170039.tgz","fileCount":40,"unpackedSize":132755,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAPOMa6TA1xKLLhq3mUFVpLbZ4Ios/FMuMZqY2VoX2FgIgaOZ0IhhhnMC/XCX6jj4px+rkdA7WdYDKSOTYPmSQ5oo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFdLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpW3A/+Ng13hWt38hqqnHnBefx7lMqxiEulUMOKatl4R92QkU4HQqt7\r\nnW9ZhgsfG9o9Re7d5Sdi38aPUeqCR9WZ18KC5cy2GVK+fIOJmkUIpUP7mg3D\r\nbCncpd5J3hmwj5g/WTLNL5l7XYgyP/EueGum9ytOWPcWMQSy56CJAJS77HuP\r\nWIN2FoZ+424FWdAy65ol2EMWbivfXsB2ESOPerWRcwYLPXY7hjGn6xlfJMAS\r\nD0PA833YI+aUYrMB4uSDbOWKdOB9weQ3xKGfZB0Zf4uKrORGc8tgKj12nrzk\r\nUrF91LZ2VufVwvTN+lYDOr6aRXSHWxYrXk1/JDwM6E/ik9L4awIjrUaN6z4l\r\nBOMGdEXWbRmOw6q8qRnzpLNRnEMv5FOwI6Lr7mmNQbcxQaMxcMQ4vk8Ul2bu\r\nrJyhLixVWBhn9igBt6EKO63cE9v3Di74e4/reC6Lo4La71b1Eni+Cgf6+xqF\r\ns8ongEbkNXAgsMGOeKICugJ9Cs0kUP7havwBLTQgQyRWRoKmzTA4Axd4UEtC\r\nOyHzBrcv8bQmPaJOEYJjWKGh74wZNF2pi8csdydE9tBseduy47VCI7BJ6UnE\r\nec41kac2rNZk+P698K7S2NrbRmiUL7aesxpqkie0rfcZRUcFDP+wMe7svP9q\r\nPRp2oLVcN1aRQ8JfF8fMEpPe4vfqtbApJhc=\r\n=1wbW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220711170039_1657558859322_0.34475634361027496"},"_hasShrinkwrap":false},"0.0.0-canary-20220711170228":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220711170228","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.2.0","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.2.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n>\n> This library is (extremely!) work-in-progress; meaning that **it is not done**, or ready for use in any other capacity. Please don't use this and assume that anything will work; it probably won't. And when you find something that does work, be ready for it to break in the next release. **Please don't open Issues or PRs for things that are broken**; I am most likely aware of them. **Use this library at your own risk.**\n>\n> If you're interested in using this library and want to keep up to date, please [follow me on Twitter](https://twitter.com/hmans), and/or click the Watch button for this repository.\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220711170228","_nodeVersion":"14.20.0","_npmVersion":"6.14.17","dist":{"integrity":"sha512-1Epx8wr4h70rrZ2eThSTrdqEV/xe18PcO3zTPuBu+ixqSPwB5VGSR1NXgDTx3CYkxySK4LM7EnIKMAI3Fefm7g==","shasum":"ad819c8d491fc974fa7a2740d4971c4c628e41e2","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220711170228.tgz","fileCount":40,"unpackedSize":132755,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH3XdYNhilR09TJ++Qj67uArnf6jLQKLe8/TsqnXcklVAiEAtDZXbU1oVxKHFdmhaq+02QWEq1ALQuOQMwPTbi5r3iQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFe6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqWA//ShBvZBh/KEh3TsC9pPPmkWnS2vYWCzOzyXcJANw82EPVokTn\r\nrk10yA41wPSklBeoUJLN6n8bIRzfktmEg7Q95i/A6NUFUABD6UFKsA8QdX94\r\nP9x+RJKrv9r8prSCAD588VrLLY3ETyC6ZkwIq8QguKfmu1DiynrTH3gUdciW\r\nvpQUXYHH0eSFlTSjz0tgGiuOwXTE4Ueuh0nNBAw9sncckwCC12XPNWfF3tqv\r\nbP3qX/291n6qhiiaKlZe8ip4SEX0NlOpXdI0pmJX4bxbIe+ZWLr03Au8PSxc\r\npes4fJPbJZHlc0Blvc+2KEgqAou7J9zsiJlVZbW0o+xSuX9q9hVUx93ZNUe3\r\n2N7EXIxTDWmG2j7pktDynjgLa6vgj5OxtARidXqEKyoitUNUUkgxji/Bj+d1\r\nxmxyqxsL5IwNUDR+fUKoFb2aI+yaAu/iopjUnMxaxhmD0M3penKIfOVXFu1n\r\nP7gk75612w9syiLgBKWomtvZkJxJvUn1CFx3jwIfhm9Ke3+fr1KetZ8/FVVG\r\nr4gr4YqAiGR3LZG6Aa4/2xKeFiFC04Q0et8lNzFquvyVx8wBr6WGN8bmF78A\r\npB05qrbE/MfSjFOPF519bMBD2Y1ePbgeGrQgMo9SpkATWbmE/HHx+aBgo/DN\r\nCSbiVq9PSbFR0OIogruS6qZq2aB7QUEHma8=\r\n=L7r6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220711170228_1657558970062_0.614911007476378"},"_hasShrinkwrap":false},"0.0.0-canary-20220711170400":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220711170400","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.2.0","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.2.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n>\n> This library is (extremely!) work-in-progress; meaning that **it is not done**, or ready for use in any other capacity. Please don't use this and assume that anything will work; it probably won't. And when you find something that does work, be ready for it to break in the next release. **Please don't open Issues or PRs for things that are broken**; I am most likely aware of them. **Use this library at your own risk.**\n>\n> If you're interested in using this library and want to keep up to date, please [follow me on Twitter](https://twitter.com/hmans), and/or click the Watch button for this repository.\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220711170400","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-U3Wy6iYGTxtMne6L81TK8ReiJ10etAu57TaRy2y0Ke4JPp4WNAEG01kvemeuAyubiJCO9jQS823oAoi6JhHyZw==","shasum":"a9db6c679cf8c9e9701c990b867e01aeebc4d853","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220711170400.tgz","fileCount":40,"unpackedSize":132755,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBANe+iVvkQcsJyoIsHmsMMvw5LEWDuJXF0UxRhRGiJlAiEAooWGv0onfHBo04DAs2zBvgttzJ8tZecJISEf5B3F5Ec="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFgQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqL9Q//a6LsJkuvTw8e8U0wZ2jUxIZP/M0UkvwV+JkSGf18YeWMdDiF\r\n2U5YbgozbrrSmHbeCrEUKSdL+UFdqEHP6ie9Y1+hWUm4dK5ZE+Ko+Dy+VRcO\r\nL5fc4sAhk9AJfzO/GZ4cwDhLwEYw9PBpJARBMRwQhzwyGxjuIRnmwTGE0GcK\r\nqnYEHcIssFcQWKuxi3jUcxmAq8YfumvQKXeLLhwmNSjEG1kYF54h7oHa5WH6\r\nQwTazec5q3k4Nq4pEhJ65lx0TE4dFjwF4tecnPZ7EOS1dsXXMPhCXqBvgWYc\r\niVIzZi5QBsNsFRknsXE4Tl6l1F8FEsymqt9HSpdSo3WRrIS/B8SAcqrDBGzL\r\nNwvz5PclBp3izYOukuYC4FOYNVBkDbfmBi6gxCF4D5fvA8ZOtAvofAgiyQhs\r\nZobZIeNvieqa9tnKakGHzWLbwI5ujW9YwkIO5gACNco9IsIHpU1tcf/bYnAy\r\nkdD2FbclDVkn/wRUye/O99Bu973DhVgoS5P2/zE7HDQj4NAtrR1Rr8FbU06O\r\nLgLx/Znknhrz/q3hLNdcmJGdzkUD9kjPFvsDy3WpYucaaMxiAlllQF+IQu6y\r\nNuH1gvjGzoe59EymxWlJxJfylY1TAWwmwg3ArhLw3ExJGbaAkw4TCUdx80Ns\r\nlbwGnwvrj1ejc5k0LLpFLv2XhCb6Ox4emSw=\r\n=t9zI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220711170400_1657559056546_0.7583930799725875"},"_hasShrinkwrap":false},"0.0.0-canary-20220711170614":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220711170614","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.2.0","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.2.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n>\n> This library is (extremely!) work-in-progress; meaning that **it is not done**, or ready for use in any other capacity. Please don't use this and assume that anything will work; it probably won't. And when you find something that does work, be ready for it to break in the next release. **Please don't open Issues or PRs for things that are broken**; I am most likely aware of them. **Use this library at your own risk.**\n>\n> If you're interested in using this library and want to keep up to date, please [follow me on Twitter](https://twitter.com/hmans), and/or click the Watch button for this repository.\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220711170614","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-28cXVUstayLFGJA0ijkkACuXqaAs3JN86ERVjIYBD1KrU6cKmuN8kfaKZ8BmG6DNd9/XKJtSHcGwMcx9Hcm2jQ==","shasum":"f851d436fa2e84ee15ed73ffd1b11707fe271b25","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220711170614.tgz","fileCount":40,"unpackedSize":132755,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSA3P9JmjyskO+XH0y4yHBxmUP25qyOjrOakZkJfvn5AIgHFPwNgNQdsDQCHPxypkP0pnVgOicNJla38GRoX+3dj8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFiWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkKQ//am2CSN8BddRR5lOdt0XcNNjH2xlKKJyLEPjq+N2oBKcgBRkv\r\nLCvok20e6aC3dCENs+ViWm+SOZmJAJuvpRYdum5fm9dXuiK0755fT6ajY1ma\r\nUYZ3O/Jlbe2Gxa+Qf/RoyftfRfZx+bMWXycTN6HSF+tBjCR4Vm55cdrE4bsy\r\np42NT03pILps87nUFJvE4o5CtHf8LIHa4r9kiAK7irGM2qdi3EPIP+asvK8G\r\n/H76nFsinzZ2Zh1kUxY4OtfTRbmYYexvecawzUdp0YEjoA/N5MFd5jTzQ8BE\r\nlFIR0aLb0KmEAPnv4+tAfjW0FvnmDQ8yuwRjRt5yP8H8LaJzhdc1Uy26qDng\r\npu8UpkHV9aYdWRm83Y8tReWzsZZCmCW3oasBeFS1ck/YgSOdVnDYwsOCCF3D\r\nBtXxA8Nx4LcMgg1yIwZhi2zb8uo5xrGMoCuRV8Le8bRVx3sMBu2m/EYdxNUN\r\n0li8GCIldhElnMGpcy4VaKSkZwK+XEm69QjbK0Ftb9bqd8mZZD6WHU0w1O28\r\n388rpCpATqZvQge/jifEyaWaEzytEqAcLBRscKOWjD84E8VUy7dh/Vz5mgfL\r\nIzACYORLD3Cx5ARLmwDcPHljh2HKTFvDyI6JIfaQY9JwhXvaGqhhI1q9MVZD\r\njQmlBFYOd/5RxX1i3zsungOzFWFgPmHBYtE=\r\n=34H3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220711170614_1657559190598_0.7056999332539691"},"_hasShrinkwrap":false},"0.0.0-canary-20220711175102":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220711175102","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.2.0","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.2.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n>\n> This library is (extremely!) work-in-progress; meaning that **it is not done**, or ready for use in any other capacity. Please don't use this and assume that anything will work; it probably won't. And when you find something that does work, be ready for it to break in the next release. **Please don't open Issues or PRs for things that are broken**; I am most likely aware of them. **Use this library at your own risk.**\n>\n> If you're interested in using this library and want to keep up to date, please [follow me on Twitter](https://twitter.com/hmans), and/or click the Watch button for this repository.\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220711175102","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-DbWGvEo95jRdLqqe7gpSSXJliqRVsXxnoPEYEUxmE/fiK5EoHIPHyCuf4kzWnUyYCGJU4u94/b6OMgDXeV+0OQ==","shasum":"8b81954ab7df48868a173e9371cdc8ddd1c8cc18","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220711175102.tgz","fileCount":40,"unpackedSize":132755,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICcwA5EK11aOHsDr8EUBXWN9SAldKAKpqdu0kl4QpFq2AiB6/WABFlqhSbSGyhAhQIF0p+TCKRLrQwZSq3Wtl+JDWg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizGMWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotVg/9E/14warARGjoVF3GlYMzyki+CRj3GWm9EDWSEm6+RudJiysR\r\nEon1DuThHab5Ze1NlCWt5J/5U9DPAlCn5TJShoEfl8Bi3Qg9PeSaao3Ppr4r\r\nglBfkHfSylApKfa8SvfND/k84spP2wUknOKXn50IP31VOEmCJT0V5qiCcA26\r\noHN42BIZCULHGa3neQDqsBv7nrulng8I7jnWlXzbmJEvamva7fLlOTCbr037\r\n6eqg8FJzMYABEgdPH+bMl031V5pgfDYqJlqeGpu4gyPzfGekpPy3oN7Da16Z\r\n3LUSqbo6Gte1zwII+KxhzHIHcxlRnwiHwjgPq1ZoNDuxrs4DxlGDU9NUYXJ7\r\nK6ASOVOrfoZldAZh9Eu9dG5CF+6ng7Jf2gffZ/70by9Olp5mNCYig44Z8K1P\r\nNalcWWj6VaWJYn3KcTsjqJfFTHk/UqEL2h4FNf6yBAPJBr7yrlnfoQhJqfyN\r\n6ihNl5e6rNHhxkzICTbhouiuzUpBaYkCndzLjaNwlACaDHKvY0MDiu1p+2Km\r\nleKGUjh3T8COB31TuFPlNOVMPQ5qbJreRt6kBfCq/T+aIwfREYfTwr7cpOG0\r\nneQCGjf8vwOe7mGOiHL5C3F85SdMwUBxjHE3F1PxvNf3jRz/Krzrw3LdshAA\r\nQze78XhtzwhCLfNOLQZmZcfKOPNnV5bTUIA=\r\n=Zv7R\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220711175102_1657561878404_0.23752417506996149"},"_hasShrinkwrap":false},"0.0.0-canary-20220711180942":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220711180942","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.2.0","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.2.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n>\n> This library is (extremely!) work-in-progress; meaning that **it is not done**, or ready for use in any other capacity. Please don't use this and assume that anything will work; it probably won't. And when you find something that does work, be ready for it to break in the next release. **Please don't open Issues or PRs for things that are broken**; I am most likely aware of them. **Use this library at your own risk.**\n>\n> If you're interested in using this library and want to keep up to date, please [follow me on Twitter](https://twitter.com/hmans), and/or click the Watch button for this repository.\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220711180942","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-n/5sBTJICVMmwEnNyHbTPhuv6QI+qttrOiiG1PUNt6WTTfS+1IWi7qtERas5+9TznnRq2Q0oOgKG3lzE+zv7hw==","shasum":"b8491c580e1a9491a6b5230a65806d37abd75f26","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220711180942.tgz","fileCount":40,"unpackedSize":132755,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBZbhv0yM7wxsbf79trqXtLZ9Ba4FYONuEli5bVc63ZuAiEAzK+PUy/SIEu73GVwV0WrpGNKnWaK8JbTBOQuHKp3SLQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizGd2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0SQ/6A4P7xw5PVLvnJQzeDWicBar2Plf92tj0BYuutdHRP7J1wXEq\r\nBLVXsjIuSPHm49Vqwgp71NTcv3SNtReEpRoZj7uKR0ha7wmUaJmNxvc+VSqV\r\nCOHe4WF4l0rVFlz7VBn9W3YvxcxU7REWlAi2t3Jj4hQYK5sRmQk5Z+TfWbdu\r\n+hnsfeBzjq6RBe3p5dAnK7UffSORXnSXj1xzx9KW6IpUeZYGFZQGubasQSvP\r\nSSIMCnVZ++KpJJe5/7sGoVSDK8u7dI77aVxZYdRQkn3QktlVzbix3Nuxa06k\r\n7w5a7jjzWDeTLxwhLoihrPir9Jc+A/DPuWwfVtd4Kx0rVbnEyxwsuJL7IUcB\r\nWGny7ddVGc7Q2pO6hiYvHi3p6zIaAKkiKluLDfnTIKszzjMCvBAqdnXbLWeY\r\nvhCpgBhHTgoqxnHsrm3AzKPjDBjraDzDNyl5xqd7xoii4BkPIFHGDYIcua5Z\r\nBKDelVEOSQ3fnAZhj7H3U4H4cUoC5Dlrb2cUKl0L+d+/A1dwmOjH1NP/MY/t\r\nFtI5ydvpWMegdrfY3Fe3Fq2C8rPsIGbNRMdV7zAx3g9LPa7W3dQq/WVNATZx\r\n3saPOXSqrBS9y7KwsSXVo+s7TwnVmZKPaYXoAg/5OKvaJPhB4wvqc/kHoEwQ\r\no7xQkyybTlw0tSceSopUUQKQ0bRdTjZeiBE=\r\n=1wRa\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220711180942_1657562998493_0.07609404702322453"},"_hasShrinkwrap":false},"0.0.0-canary-20220711183335":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220711183335","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.2.0","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.2.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n>\n> This library is (extremely!) work-in-progress; meaning that **it is not done**, or ready for use in any other capacity. Please don't use this and assume that anything will work; it probably won't. And when you find something that does work, be ready for it to break in the next release. **Please don't open Issues or PRs for things that are broken**; I am most likely aware of them. **Use this library at your own risk.**\n>\n> If you're interested in using this library and want to keep up to date, please [follow me on Twitter](https://twitter.com/hmans), and/or click the Watch button for this repository.\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220711183335","_nodeVersion":"14.20.0","_npmVersion":"6.14.17","dist":{"integrity":"sha512-tTPa9HcTGUUI4UUl5Asm+ctVqqW7031BOdxrD0m39XsRpr9slBG+zl2GhpLFvOfaPj4Q/3M7PBkoYFIMBQS75g==","shasum":"159e6f45494be5267724b90c9b8ee3f6fc8b4812","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220711183335.tgz","fileCount":40,"unpackedSize":132755,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqNQelnR5VhV+vPG2OBBx2ws8ExL1w0bvqF8fefdi2LQIgCeeG4ECAx0gAr5gcTI48PgaXR7abHNWaX7d2LaqUHcU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizG0WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroFA/8C16B/DNaksvqEG7WLymV8DWsliUZ1B1bjMuSioGzQIIjkJea\r\nKtzMapbBV5/7s5ecMFSKv7raE07RTFB9sTViPn6R7Jy1HhrTebaGTpgZPZ+D\r\n5UUzm6lUwM22TPWyUIxiTxmrE3wPhBRjbQPIrqh1Dr/dQj+OUefWeeoNi4Hd\r\nRsR2RsBEoBJIVQJN3YgqHAEvlLDrZ1TJtNMfrZJEAbzglcIaybnYG6hvSrP1\r\nGRBEZos99iHUrlxsX8TmEZABudkWZGlSc3YueyIzMeyxz11k6aoDFIAiAezm\r\ngMtUJDtlSbVwV+ZanQB2J2ONJCqfhJ2dds+2B7xxR5ds2MiCeLa/1wtQqKlQ\r\nZZDs/5WfiRwQOgUI6hTRY++Zh5NSfeXztJh45pmdAcJOrl+6ZIzTWO6T2BNS\r\nrImM9UNlBuSvI89F3icvbGsbMmmZ3lIXqSxURbFqWWOWh5ti78FXASuf3Oao\r\n+lVBJHc6Pkv2Y1XL6ZBq7HVr0f5pPRTpDUHRJ9J2pq1HCzv5rMsFybb5AJtQ\r\n8Z5qNMX5dFcp2rPdkLi12Pnirm7Ap3l09rj/CIOsl1BCZO3fIYla0C/rc6eH\r\nsdKmZmSxhaepHmIIzEhYHlHAsIxfoLG5cBjK8RZqzUe56zTo3Go84RaY9i8p\r\ny7One3CGC7Ep8O8wB2WeR5ouAT+JoxbR1x8=\r\n=RYFT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220711183335_1657564438562_0.7597567196942325"},"_hasShrinkwrap":false},"0.0.0-canary-20220711183442":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220711183442","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.2.0","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.2.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n>\n> This library is (extremely!) work-in-progress; meaning that **it is not done**, or ready for use in any other capacity. Please don't use this and assume that anything will work; it probably won't. And when you find something that does work, be ready for it to break in the next release. **Please don't open Issues or PRs for things that are broken**; I am most likely aware of them. **Use this library at your own risk.**\n>\n> If you're interested in using this library and want to keep up to date, please [follow me on Twitter](https://twitter.com/hmans), and/or click the Watch button for this repository.\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220711183442","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-HYe+/QuuW35Z7lOh1TbPHCkG/Y1sCg265Agb0pHcmUvShVCjQ8WpffLuZnjDQhC0ZrSZYo0I3/qN1ehdj6JHxg==","shasum":"8a6f2b38c61152d3a9dce6b5a7d0f41cadafc8de","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220711183442.tgz","fileCount":40,"unpackedSize":132755,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDL9FwvUBAiYxvO9Eca5RU43go69C806BshOQZYAcfkwgIhAJvaTu8n7i3c5AnEduDCr0saGwv2JG+4KMOvDKDt8aZu"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizG1SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtXQ//WpW8Fz0Y2l2+3mZ1giWtdxzcTijHOtJPJ0r0efaabbq2mDbp\r\nh/roJZDm7aAO7R++ZTef4qzy/ozjzccbOfT47N7/DIw/HZAUQmhe7F/jXT5C\r\n9NAVgTXKqxPE5ONtBMogkpIMQenL57YZ6kPvVBlzYWounYUQV3dVH6020Lu7\r\neGYQlSR8b1NVDEeAFSobmozxkKkgIjxHpwDCyZBqCkpA4yAU1SQHPQE/S3ZS\r\nkUMsLQVhagZlL2LNPQJC13IidXuEYbTB+DWmuM1uMAyfiSt4D/W93RLsY/eo\r\nxwOWkEReXbD14Sh0PkFzK6nQqClMizkW3hJ5Nlik+8d36rIP5XiBoYT+TE7p\r\nV5y7kha1Zc2TqDPS+JSkJOsDlsEgipTOEn0WGMXwSTH/0juU1p52wbbeQRga\r\nBdVkt35er/ojAomzWWXgE5DZC57DqrqpaGhMs1fRSSySa9ULqB3IHX+B5hXp\r\nvACNm3Xctzxy0QN8IIf8ODG/9Z+TD6sPQG6qzj/z9n7MFXRSo5JQ+geF2XNf\r\nPgObXkQX/e4sPrX8NxJCV0KhYEefcXUpUiBdpkeopvAlcUwwpFVVhmTp9wHc\r\nWbBs4jFl8N/h6vyBmTAocsv92TOkbCWw3NbFhOoyLODeudiOADnHcCiG8hp+\r\n+vt05ph/kNrTLlkNZ/8SZvLPij8kbnUNSeo=\r\n=WRvy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220711183442_1657564498534_0.6774186488531282"},"_hasShrinkwrap":false},"0.0.0-canary-20220711191717":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220711191717","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.2.0","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.2.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n>\n> This library is (extremely!) work-in-progress; meaning that **it is not done**, or ready for use in any other capacity. Please don't use this and assume that anything will work; it probably won't. And when you find something that does work, be ready for it to break in the next release. **Please don't open Issues or PRs for things that are broken**; I am most likely aware of them. **Use this library at your own risk.**\n>\n> If you're interested in using this library and want to keep up to date, please [follow me on Twitter](https://twitter.com/hmans), and/or click the Watch button for this repository.\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220711191717","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-f1R4EAS7CxgMyC88jaCD85ucQSFLtaHfoOqntVn12RDB+KrS/18ALjrAw2HleD22HQP2ShmVYrJq0Ju0si1/GQ==","shasum":"624ec202698ea6b78cdfdd6076fe73e52eb82566","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220711191717.tgz","fileCount":40,"unpackedSize":132755,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBnZlEK1TqR7rI48XTDoTwPoYsVtNxBMpzkSjqQV98PjAiEA1TxzMWltVFwZ0f+9KDwJ33DisR+AmS+rjLdDSt41UE4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizHdOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqcsw//dMihxKxem1yuOI60Y229TQj+Kp9N3CNBgHtnjqq99bmk1k34\r\nwxlfFmSZObnGIXpnEC9XN2KEQzlmAb/3xIbkdQbCgibe6SJLSuCkngDw48ZK\r\nQPBY9haWuzribGrEQJQnB8xY+KatV5/14Ogm/G2JTvJ8kLlkwtpviBZWohjk\r\ntsjiBHXQNnjVnu0DKMFMtYIKdJKQByvRDLg+Nu+Bjoohvv/OJst0s5s9vkly\r\nZhEneWYSoADExbhM6+KmkJ/y7XDH0MpIT569FrjLx5H5W9AAZ6fwpHsV2loA\r\nalUtEgB7DMIeDjqiTMqbPq0BOCbHxQRQdUfbU0EdxmpfHyxYJxLYd21/08gm\r\nmH8QLdN7TGlGeelPHDniLU1bBh43s6xJoxuoZn1hhH/Alz73JHELhIew6ECk\r\njHLm6HkCZpZ6s5diZCNfz4G4mDEHS8py/ClNUmfUj2X/pb8l6Wa0eo2bNcns\r\nej7dxR4lVbcym1cyV1O/CH8ZapnOJQnbKF9lb9h/EwGIPHA6ck8ZVcZi9+R3\r\n4aooWSM+zeeALHOB9ZgWnWCdSkM1dNIKKTWdkya5L5OFs694KJIZFJCkCmSQ\r\nFFhHjcmb0Xpe5vBva8IXhwy9OcVg154eRaso2HA8/ANPr6+q6XwtZ8ixbFxQ\r\n086XqxFntKiGGf7Xnv50nN3JIsxkCXHFuvs=\r\n=IovC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220711191717_1657567053841_0.6419473225646448"},"_hasShrinkwrap":false},"0.0.0-canary-20220712072700":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220712072700","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.2.0","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.2.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n>\n> This library is (extremely!) work-in-progress; meaning that **it is not done**, or ready for use in any other capacity. Please don't use this and assume that anything will work; it probably won't. And when you find something that does work, be ready for it to break in the next release. **Please don't open Issues or PRs for things that are broken**; I am most likely aware of them. **Use this library at your own risk.**\n>\n> If you're interested in using this library and want to keep up to date, please [follow me on Twitter](https://twitter.com/hmans), and/or click the Watch button for this repository.\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220712072700","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-RQVGlYy4bH4o4itHmnH0jN7wotkvUkX1yWwJR3Zr5CgQksmPhA/mLbZE5RD8z5zlfL7LSTcEy1yUzlJy3vwzCg==","shasum":"1e74bd9d88ec689573f5709fb81d6fae5cc23eba","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220712072700.tgz","fileCount":40,"unpackedSize":132755,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBssp8Bp/fyAWatzuJejAv4uOWHV4QKbKfmjR26Yuu+DAiBo6N0sH6VkPhNjsjrSGAxD1UI4jDZ4n6zPu87BWJamMg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizSJaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOHg//WuPstN2JTVT6g9rPRke25YTpXDwvIWwfeTsMIwsLnnyhQBzO\r\nCOw9WxLbttSTMQSyaHiGjHS3I2MAhwP9h307BJXneHKGMAf7hVg1tgaQ8nyT\r\nlQQ8+rgkRmjnCFAuYq+rx8WpFLikFeX2cq5+2XbEpsO6SpiNSSac9FEOabF7\r\ndjbQoPooLjktB/SoIS2aDKluaErzNNP34erppEcq43DybWJE41RCSuCPTYIs\r\n82asEpHpvHisaq4J/QWpt6gfI8z7Gr2LX+so0L7tiXPL33rIPW2X+rar8gIz\r\nnFLeMp7gK3Xiprqqw8rRcyeywtKTY3Pc7X5tqN121tgqvNlb6o2JZj0LHQU3\r\nH9LC8y0OIMNq22Z7CVolomWJxmSpzIE/msp6MgvSLPAZDtu1FsIC9Y7CgO4I\r\n3qWjNBiCDqQE+NEV2woXbQ8+fnhSiGSpK5fBbyDwcJ0XU0aj9u4X+vRZeV2p\r\nzDOtOAf1l7tIDVPIbrvyw9HdB/QaDl4L/PJ5EgWDHGWiFiFC6fAkcElLOd0z\r\n+woBAqg9ag6sC2DLh6idY7G6mNKZcqw/kyPY2UgS9ZwJ5zaOXOjHkN37VHq2\r\n9FpH4ziqOvdNyB7SA8V+OJTPf+nfonUhAdhwrWMy6Q6xTXE0c7yum5YCOzYH\r\nRoGCcNH9JYt/IIV064eJkQzw2+61a5iY1sI=\r\n=DRFK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220712072700_1657610842497_0.8335630412356294"},"_hasShrinkwrap":false},"0.0.0-canary-20220719052515":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.0.0-canary-20220719052515","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.2.0","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.2.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n>\n> This library is (extremely!) work-in-progress; meaning that **it is not done**, or ready for use in any other capacity. Please don't use this and assume that anything will work; it probably won't. And when you find something that does work, be ready for it to break in the next release. **Please don't open Issues or PRs for things that are broken**; I am most likely aware of them. **Use this library at your own risk.**\n>\n> If you're interested in using this library and want to keep up to date, please [follow me on Twitter](https://twitter.com/hmans), and/or click the Watch button for this repository.\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.0.0-canary-20220719052515","_nodeVersion":"14.20.0","_npmVersion":"6.14.17","dist":{"integrity":"sha512-8lT6kaDw9osZFnIoMQEYkb5cOSr9Sr7nXXpNu8tQLeZXyPpQHnfFtpb1ezQqsrbALvNXDAm0pzw1OUTA+tGkMg==","shasum":"f43448798c86cba8f38a419ac8eafbe3a3e95b58","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.0.0-canary-20220719052515.tgz","fileCount":40,"unpackedSize":132755,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICn62dj9uPGKhsHQxzypaiDycoXYB1iAPS9c0DwBEl+nAiBkDiCxQWal2VOm/8ys1gQUXpdo6OTYsnM/gGRhEnP+KQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1kBNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwqxAAkzz7Q2xPB6NIiI+yVzlMSRo/yQankVkYdfnSy9NVMkM+4s01\r\ndtD7AymBstS8eVEsLxKcjWDTkOyY0FrTOF9PeUwvzFFWPiY7Dpoddo2dgwEF\r\nVdCnv76e+4NgN6UP3ErWglvH8BxdvUdoTUgRiDUrSDcI1lIHN1D+8e6bnYym\r\nmcRvhn086HwBHSbGZkJFVzqr/wJCApIMDPZPvP0og2Wz39Ad4m7XUkEmL5u5\r\nH4slAEap7KARHShJolUYprJgAFgEkMk2ODvHzTWtyE7+j9YIyAJKDxW1P8gG\r\nI7RvgV8tTRpjGZGRen3fARvvoxaOlDBV6t/YeA8y/B+RgNT2QToDZoQKWRX9\r\naVcUJzXl0c9meOFwM7qjg8aja/X08QC3tPCBK7zb5cuYllVyYDbDSHOFddwH\r\nh4yi74YuDzuBmdyg7iwNpF++TQZBc26ep4NOaF/0oI1Yqhu5Ww+Lm/UJDlzw\r\nQ3KIPmp00q5wW+7DMvsJdQyqmWI0hdLcFx7oxV3T4nLiPVgjCo6NOsavNKvJ\r\ntrAgoSNXHGXBeDoUIsIKwezYN5s04BUtqqTZLrw2nSKPx0l3SltoLtbIJorU\r\nHEdYVEFGq++FZJ6jeOdTS8ZNtOwbw4VqqAw+DSMFU+sU0Ts31gNJb9UD8sUZ\r\nwXo2MN49MKLP3eRA9pQmi06AGW5qLIaMsCA=\r\n=fm6A\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.0.0-canary-20220719052515_1658208333385_0.15661638571061776"},"_hasShrinkwrap":false},"0.2.0":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.2.0","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","shadenfreude":"^0.2.0","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","shadenfreude":"^0.2.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n>\n> This library is (extremely!) work-in-progress; meaning that **it is not done**, or ready for use in any other capacity. Please don't use this and assume that anything will work; it probably won't. And when you find something that does work, be ready for it to break in the next release. **Please don't open Issues or PRs for things that are broken**; I am most likely aware of them. **Use this library at your own risk.**\n>\n> If you're interested in using this library and want to keep up to date, please [follow me on Twitter](https://twitter.com/hmans), and/or click the Watch button for this repository.\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md","_id":"three-vfx@0.2.0","_nodeVersion":"14.20.0","_npmVersion":"6.14.17","dist":{"integrity":"sha512-VfZW6yu4S0wqljLhci62HA7JcQ9BN4IVwL5G3/wlfVUZWcDA1upKrTiZzqO117NEps83WtzqPQb9EXb/3CAZ4g==","shasum":"93e1fd4398bbb4c8d7900c6cfe83fbf0b0a9bfa0","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.2.0.tgz","fileCount":40,"unpackedSize":133034,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5e/sBiQqxiV59sr/UOO7KdISwdYFNXneMvK8pjZAkvgIgVyVAfbN/eSgzkASN0ku+TJ4WbFFTr779O/SldtR5D/E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4Vp9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmprcg/+I2xwp6GNcXzh3p/9U3B0cGHvvkRFKpxA6AxzCsSzP5NN+PMH\r\ncAwZfZsY4jm4A6sqUounPOV8vk6hHVfk1MokeODY9T+/GBBK55ewtz869dTO\r\nwPYOZ2/khxMsAcTcsNZJlfd9SFPZmM7aCcUWY6eVoYRAL0L9erg50CQcioYG\r\ndGTWQvUvnQhpamsJI7WdffzTcdGB/qK8MNrop7MdlOGWkA3Md9Yek54Fj4EC\r\nCMaXrA6934YU6WGYfCcG6tvp+9wUe+sOwfngh3630iG/vFgcaigZJ4+v30Om\r\nJK+zY4v0ZfvMOT2vje86uDzaadK+VWV3qncrgDe7/lWEToJKharQWnr5cGwO\r\nyEjyLlTDNeOmknAKF8Gxn6aq5gEOMuAJbxFRILC50Y3dYcS2z8Yl5jbLazMU\r\nMa2itomGVEXBlbDPWB1L4OnpjGm+8uedx8ZQ1RktKIcQClqV2APPsMR6lBwR\r\nn7oKT4fuWJQoJBSuihXx7H8wO7qOeF2wryqZbJugVbEvIW3+/AHPIRW+ihUQ\r\npBNHlJBxCo/UeIeQ/Ouf4TYNjhb8GEzVQsoESxfZTS7ISoD0IefRy2pIUwqW\r\n7clqStyuR8ZPq8+FfzXp9D9Rpb5jg++04DiMf6Qkppv+gqdknB4O5t7eCiaU\r\nQQz9zNPBJA8U7MER5dVwLSZ4jZzzE8i/7vs=\r\n=cbaL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.2.0_1658935933377_0.36772134732070927"},"_hasShrinkwrap":false},"0.2.1":{"name":"three-vfx","private":false,"author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"description":"Visual FX!","version":"0.2.1","main":"dist/three-vfx.cjs.js","module":"dist/three-vfx.esm.js","types":"dist/three-vfx.cjs.d.ts","license":"MIT","sideEffects":false,"scripts":{"clean":"rimraf dist","dev":"preconstruct watch","build":"preconstruct build","release":"yarn ci && yarn publish","test":"jest --passWithNoTests","ci":"yarn clean && yarn build && yarn test","docs":"typedoc src/index.ts"},"devDependencies":{"@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@react-three/fiber":"^8.0.22","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@types/three":"^0.141.0","jest":"^28.1.1","jest-environment-jsdom":"^28.1.1","react":"^18.1.0","react-dom":"^18.1.0","rimraf":"^3.0.2","three":"^0.141.0","ts-jest":"^28.0.4","tslib":"^2.4.0","typescript":"^4.7.3"},"dependencies":{"react-merge-refs":"^1.1.0","three-custom-shader-material":"^3.4.4"},"peerDependencies":{"@react-three/fiber":">=8.0.27","react":">=18.1.0","react-dom":">=18.1.0","three":">=0.141.0"},"babel":{"presets":["@babel/preset-env","@babel/preset-react",["@babel/preset-typescript",{"isTSX":true,"allExtensions":true}]]},"_id":"three-vfx@0.2.1","_nodeVersion":"14.20.0","_npmVersion":"6.14.17","dist":{"integrity":"sha512-MT+c8uFOYxfaOlJtX5yfGZv5WplDPWhDp748QjjnWtU6HcemDZdha/7kqCUtuRbbjtHi3OInJE7CKp0I4g7bDA==","shasum":"f26e1cc57797d44356c9e2695e6f2e8c1ecd9efb","tarball":"https://registry.npmjs.org/three-vfx/-/three-vfx-0.2.1.tgz","fileCount":40,"unpackedSize":132974,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHt17AonWvMUJrwAElHM0nhEoymssxa0Tpbwu24tehA5AiAVQOYKzw4QlW4BQK+jgiYvEEa3tnHIQquJ+viKUixYLQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4VytACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmTRAAm7TPowtTjeS6q1QRXZW3f6YnUEvK0HqxwldrY3fXnG8exUh6\r\nzFCeS6YkiJDFueL1w7HUMDk7v4GHyhWu8jn5RNUy9lAWreuJ4s/jpCq6E9k/\r\negIKGhiK7/m2eHh9prVvLh+Feh40D8kudIxjQ1xX0uV0GmCsMHiofcmIzCfE\r\nU6SVlxHEERlIva2WjQ9fGwPPtiPPUcZQiVQZKSNvs/MqZIv/H6bCq6Id225L\r\neI19mJ3ULPW6nayq5gXi818wSKcgnLI5WrJV4tr9tI1vKRLe1wVdg7Or5lCi\r\nMqQYpfgqh8pxCXRKcJ5rjd9kUK+6wVn0EGA1fSnMDQ/IjLfapFFghq4Mq7cd\r\nyh0ohSUWiiRJxj5m5vcA1b/JCEBeopCiXFjNlaepjrbK5jwBOuVFydj3czpE\r\nTgK0CfN62cz1YGn2vk63sdphp9VuasOVcV+sws/1zji4VNJ+ewflWUYHf6oe\r\n52DiIUoUZLQO3G3jdJcOl4lNUFUQue+F08ly8M1Ht800h1MlBuke5wo+PAkr\r\n+tIRObMp7/7ZXmsms53ctV2MjkectJLLGxikbZ/2RDCBXsaaVSY8tV+48tIM\r\nakf1R/+Xv5nT2FBkdmocuxK+JkOR9O3S8lb6DMBJJYfrg3hfeAD/8kfUtjhU\r\nrPm92iSw8W+/L2HF8vhnXQEiw2+0IZJfafY=\r\n=lurL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hendrik.mans","email":"hendrik@mans.de"},"directories":{},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/three-vfx_0.2.1_1658936492964_0.2948772022617572"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-12T09:18:45.456Z","0.0.13":"2022-06-12T09:18:45.676Z","modified":"2022-07-27T15:41:33.381Z","0.1.0":"2022-06-16T17:46:08.764Z","0.0.0-dev-20220619122803":"2022-06-19T12:29:03.965Z","0.0.0-dev-20220619123114":"2022-06-19T12:31:22.420Z","0.0.0-dev-20220619123738":"2022-06-19T12:37:48.560Z","0.0.0-dev-20220619124552":"2022-06-19T12:46:05.159Z","0.0.0-canary-20220619124850":"2022-06-19T12:49:01.843Z","0.0.0-canary-20220619125732":"2022-06-19T12:57:44.771Z","0.0.0-canary-20220619130627":"2022-06-19T13:06:36.774Z","0.0.0-canary-20220619131032":"2022-06-19T13:10:43.006Z","0.0.0-canary-20220619131722":"2022-06-19T13:17:35.179Z","0.0.0-canary-20220619132136":"2022-06-19T13:21:49.212Z","0.0.0-canary-20220619160353":"2022-06-19T16:04:03.586Z","0.0.0-canary-20220619161006":"2022-06-19T16:10:16.698Z","0.0.0-canary-20220619162816":"2022-06-19T16:28:26.776Z","0.0.0-canary-20220620081248":"2022-06-20T08:13:01.622Z","0.0.0-canary-20220620095345":"2022-06-20T09:53:58.495Z","0.0.0-canary-20220620100818":"2022-06-20T10:08:28.565Z","0.0.0-canary-20220620111223":"2022-06-20T11:12:36.632Z","0.0.0-canary-20220620113551":"2022-06-20T11:36:01.590Z","0.0.0-canary-20220620113815":"2022-06-20T11:38:30.719Z","0.0.0-canary-20220620114034":"2022-06-20T11:40:46.494Z","0.0.0-canary-20220620121515":"2022-06-20T12:15:26.099Z","0.0.0-canary-20220620121919":"2022-06-20T12:19:34.598Z","0.0.0-canary-20220620123850":"2022-06-20T12:39:03.092Z","0.0.0-canary-20220620130713":"2022-06-20T13:07:26.633Z","0.0.0-canary-20220620133249":"2022-06-20T13:33:06.687Z","0.0.0-canary-20220620134450":"2022-06-20T13:45:13.997Z","0.0.0-canary-20220620150154":"2022-06-20T15:02:08.489Z","0.0.0-canary-20220620165825":"2022-06-20T16:58:36.696Z","0.0.0-canary-20220620180413":"2022-06-20T18:04:24.480Z","0.0.0-canary-20220620182327":"2022-06-20T18:23:41.071Z","0.0.0-canary-20220620182753":"2022-06-20T18:28:04.784Z","0.0.0-canary-20220620183848":"2022-06-20T18:38:59.342Z","0.0.0-canary-20220620184813":"2022-06-20T18:48:28.309Z","0.0.0-canary-20220621033707":"2022-06-21T03:37:18.699Z","0.0.0-canary-20220621033823":"2022-06-21T03:38:40.802Z","0.0.0-canary-20220621041333":"2022-06-21T04:13:47.939Z","0.0.0-canary-20220621041435":"2022-06-21T04:14:49.071Z","0.0.0-canary-20220621100644":"2022-06-21T10:07:07.158Z","0.0.0-canary-20220621100755":"2022-06-21T10:08:11.684Z","0.0.0-canary-20220621112129":"2022-06-21T11:21:44.188Z","0.0.0-canary-20220621112231":"2022-06-21T11:22:45.860Z","0.0.0-canary-20220621152555":"2022-06-21T15:26:06.726Z","0.0.0-canary-20220621172524":"2022-06-21T17:25:35.737Z","0.0.0-canary-20220621175058":"2022-06-21T17:51:15.486Z","0.0.0-canary-20220621183238":"2022-06-21T18:32:52.646Z","0.0.0-canary-20220621185021":"2022-06-21T18:50:36.404Z","0.0.0-canary-20220621191830":"2022-06-21T19:18:42.830Z","0.0.0-canary-20220621194247":"2022-06-21T19:42:59.943Z","0.0.0-canary-20220621194840":"2022-06-21T19:48:51.124Z","0.0.0-canary-20220621195521":"2022-06-21T19:55:36.595Z","0.0.0-canary-20220621200017":"2022-06-21T20:00:31.531Z","0.0.0-canary-20220621200600":"2022-06-21T20:06:15.456Z","0.0.0-canary-20220621201131":"2022-06-21T20:11:44.009Z","0.0.0-canary-20220621201314":"2022-06-21T20:13:25.887Z","0.0.0-canary-20220623132242":"2022-06-23T13:22:54.568Z","0.0.0-canary-20220623132426":"2022-06-23T13:24:37.665Z","0.0.0-canary-20220623132646":"2022-06-23T13:26:58.001Z","0.0.0-canary-20220624124109":"2022-06-24T12:41:22.746Z","0.0.0-canary-20220625052725":"2022-06-25T05:27:38.792Z","0.0.0-canary-20220627114635":"2022-06-27T11:46:48.982Z","0.0.0-canary-20220627114957":"2022-06-27T11:50:10.498Z","0.0.0-canary-20220627144357":"2022-06-27T14:44:11.398Z","0.0.0-canary-20220627144543":"2022-06-27T14:45:59.535Z","0.0.0-canary-20220627145705":"2022-06-27T14:57:18.410Z","0.0.0-canary-20220627161330":"2022-06-27T16:13:44.392Z","0.0.0-canary-20220628084446":"2022-06-28T08:45:00.831Z","0.0.0-canary-20220628101033":"2022-06-28T10:10:59.474Z","0.0.0-canary-20220628112841":"2022-06-28T11:28:58.951Z","0.0.0-canary-20220628150632":"2022-06-28T15:06:45.950Z","0.0.0-canary-20220628162947":"2022-06-28T16:30:18.333Z","0.0.0-canary-20220628175513":"2022-06-28T17:55:30.671Z","0.0.0-canary-20220628195115":"2022-06-28T19:51:29.829Z","0.0.0-canary-20220628195756":"2022-06-28T19:58:10.041Z","0.0.0-canary-20220628202226":"2022-06-28T20:22:39.050Z","0.0.0-canary-20220628210843":"2022-06-28T21:08:57.648Z","0.0.0-canary-20220701134857":"2022-07-01T13:49:12.424Z","0.0.0-canary-20220701135023":"2022-07-01T13:50:37.513Z","0.0.0-canary-20220701220347":"2022-07-01T22:04:01.064Z","0.0.0-canary-20220701221334":"2022-07-01T22:13:47.049Z","0.0.0-canary-20220701224746":"2022-07-01T22:48:02.484Z","0.0.0-canary-20220701225229":"2022-07-01T22:52:42.881Z","0.0.0-canary-20220701232436":"2022-07-01T23:24:52.496Z","0.0.0-canary-20220701235655":"2022-07-01T23:57:09.580Z","0.0.0-canary-20220701235752":"2022-07-01T23:58:09.059Z","0.0.0-canary-20220702000840":"2022-07-02T00:08:53.720Z","0.0.0-canary-20220702001048":"2022-07-02T00:11:03.160Z","0.0.0-canary-20220702100656":"2022-07-02T10:07:10.816Z","0.0.0-canary-20220702123228":"2022-07-02T12:32:42.782Z","0.0.0-canary-20220702141104":"2022-07-02T14:11:18.038Z","0.0.0-canary-20220702143444":"2022-07-02T14:34:59.081Z","0.0.0-canary-20220702164441":"2022-07-02T16:44:57.762Z","0.0.0-canary-20220702164632":"2022-07-02T16:46:49.653Z","0.0.0-canary-20220702171044":"2022-07-02T17:11:00.308Z","0.0.0-canary-20220702193829":"2022-07-02T19:38:44.954Z","0.0.0-canary-20220702203638":"2022-07-02T20:36:54.208Z","0.0.0-canary-20220702203731":"2022-07-02T20:37:46.135Z","0.0.0-canary-20220702203922":"2022-07-02T20:39:38.784Z","0.0.0-canary-20220702205531":"2022-07-02T20:55:46.540Z","0.0.0-canary-20220702210629":"2022-07-02T21:06:45.290Z","0.0.0-canary-20220702210731":"2022-07-02T21:07:47.618Z","0.0.0-canary-20220702211845":"2022-07-02T21:19:00.697Z","0.0.0-canary-20220702212433":"2022-07-02T21:24:48.506Z","0.0.0-canary-20220702215034":"2022-07-02T21:50:52.560Z","0.0.0-canary-20220702215130":"2022-07-02T21:51:45.510Z","0.0.0-canary-20220703053940":"2022-07-03T05:39:55.699Z","0.0.0-canary-20220703085141":"2022-07-03T08:51:56.622Z","0.0.0-canary-20220703102555":"2022-07-03T10:26:11.920Z","0.0.0-canary-20220703124304":"2022-07-03T12:43:21.067Z","0.0.0-canary-20220703124937":"2022-07-03T12:49:58.186Z","0.0.0-canary-20220703131923":"2022-07-03T13:19:41.545Z","0.0.0-canary-20220703134158":"2022-07-03T13:42:12.663Z","0.0.0-canary-20220703162245":"2022-07-03T16:23:04.055Z","0.0.0-canary-20220703170744":"2022-07-03T17:08:03.166Z","0.0.0-canary-20220703172433":"2022-07-03T17:24:50.997Z","0.0.0-canary-20220704195355":"2022-07-04T19:54:11.352Z","0.0.0-canary-20220704195957":"2022-07-04T20:00:15.257Z","0.0.0-canary-20220704200146":"2022-07-04T20:02:06.948Z","0.0.0-canary-20220705102348":"2022-07-05T10:24:03.822Z","0.0.0-canary-20220705111154":"2022-07-05T11:12:14.796Z","0.0.0-canary-20220705111500":"2022-07-05T11:15:21.106Z","0.0.0-canary-20220705121648":"2022-07-05T12:17:03.615Z","0.0.0-canary-20220705122927":"2022-07-05T12:29:42.785Z","0.0.0-canary-20220705131931":"2022-07-05T13:19:51.100Z","0.0.0-canary-20220705132935":"2022-07-05T13:29:50.114Z","0.0.0-canary-20220705133044":"2022-07-05T13:31:03.121Z","0.0.0-canary-20220705134535":"2022-07-05T13:45:52.383Z","0.0.0-canary-20220705194600":"2022-07-05T19:48:06.515Z","0.0.0-canary-20220706085539":"2022-07-06T08:55:58.290Z","0.0.0-canary-20220706110648":"2022-07-06T11:07:12.615Z","0.0.0-canary-20220706110825":"2022-07-06T11:08:44.186Z","0.0.0-canary-20220706111715":"2022-07-06T11:17:32.042Z","0.0.0-canary-20220706193304":"2022-07-06T19:33:19.867Z","0.0.0-canary-20220706193631":"2022-07-06T19:36:53.776Z","0.0.0-canary-20220706195911":"2022-07-06T19:59:26.242Z","0.0.0-canary-20220706200520":"2022-07-06T20:05:35.570Z","0.0.0-canary-20220706201258":"2022-07-06T20:13:13.293Z","0.0.0-canary-20220706210945":"2022-07-06T21:10:00.233Z","0.0.0-canary-20220706211041":"2022-07-06T21:10:56.551Z","0.0.0-canary-20220706215653":"2022-07-06T21:57:07.712Z","0.0.0-canary-20220707074840":"2022-07-07T07:48:55.566Z","0.0.0-canary-20220707080120":"2022-07-07T08:01:40.542Z","0.0.0-canary-20220707081412":"2022-07-07T08:14:28.441Z","0.0.0-canary-20220707082306":"2022-07-07T08:23:27.196Z","0.0.0-canary-20220707083339":"2022-07-07T08:33:56.085Z","0.0.0-canary-20220707085441":"2022-07-07T08:54:58.107Z","0.0.0-canary-20220707085902":"2022-07-07T08:59:19.770Z","0.0.0-canary-20220707093602":"2022-07-07T09:36:20.227Z","0.0.0-canary-20220707103051":"2022-07-07T10:31:06.417Z","0.0.0-canary-20220707104822":"2022-07-07T10:48:41.552Z","0.0.0-canary-20220707111132":"2022-07-07T11:11:49.662Z","0.0.0-canary-20220707111249":"2022-07-07T11:13:10.142Z","0.0.0-canary-20220707115747":"2022-07-07T11:58:06.251Z","0.0.0-canary-20220707120522":"2022-07-07T12:05:40.134Z","0.0.0-canary-20220707121154":"2022-07-07T12:12:14.823Z","0.0.0-canary-20220707133317":"2022-07-07T13:33:35.406Z","0.0.0-canary-20220707133418":"2022-07-07T13:34:37.568Z","0.0.0-canary-20220707141633":"2022-07-07T14:16:49.129Z","0.0.0-canary-20220707141744":"2022-07-07T14:17:59.537Z","0.0.0-canary-20220707143540":"2022-07-07T14:35:55.663Z","0.0.0-canary-20220707150703":"2022-07-07T15:07:20.053Z","0.0.0-canary-20220707172340":"2022-07-07T17:23:56.028Z","0.0.0-canary-20220707172450":"2022-07-07T17:25:08.082Z","0.0.0-canary-20220707173623":"2022-07-07T17:36:43.377Z","0.0.0-canary-20220707180205":"2022-07-07T18:02:26.961Z","0.0.0-canary-20220707182606":"2022-07-07T18:26:24.022Z","0.0.0-canary-20220708072610":"2022-07-08T07:26:26.053Z","0.0.0-canary-20220708100343":"2022-07-08T10:04:03.709Z","0.0.0-canary-20220708100917":"2022-07-08T10:09:41.871Z","0.0.0-canary-20220708101645":"2022-07-08T10:17:00.288Z","0.0.0-canary-20220708102502":"2022-07-08T10:25:24.486Z","0.0.0-canary-20220708142000":"2022-07-08T14:20:16.055Z","0.0.0-canary-20220708143746":"2022-07-08T14:38:01.488Z","0.0.0-canary-20220708144225":"2022-07-08T14:42:41.612Z","0.0.0-canary-20220708145957":"2022-07-08T15:00:16.308Z","0.0.0-canary-20220708153539":"2022-07-08T15:35:57.162Z","0.0.0-canary-20220708163418":"2022-07-08T16:34:39.061Z","0.0.0-canary-20220708165828":"2022-07-08T16:58:44.574Z","0.0.0-canary-20220708174319":"2022-07-08T17:43:38.499Z","0.0.0-canary-20220708181446":"2022-07-08T18:15:07.461Z","0.0.0-canary-20220708182912":"2022-07-08T18:29:30.759Z","0.0.0-canary-20220708183307":"2022-07-08T18:33:23.566Z","0.0.0-canary-20220709041435":"2022-07-09T04:14:51.814Z","0.0.0-canary-20220709043355":"2022-07-09T04:34:18.335Z","0.0.0-canary-20220709045814":"2022-07-09T04:58:33.290Z","0.0.0-canary-20220709072030":"2022-07-09T07:20:46.341Z","0.0.0-canary-20220709113411":"2022-07-09T11:34:29.313Z","0.0.0-canary-20220709142503":"2022-07-09T14:25:19.564Z","0.0.0-canary-20220709150918":"2022-07-09T15:09:34.695Z","0.0.0-canary-20220710094147":"2022-07-10T09:42:03.142Z","0.0.0-canary-20220710094530":"2022-07-10T09:45:49.517Z","0.0.0-canary-20220710095448":"2022-07-10T09:55:04.823Z","0.0.0-canary-20220710104926":"2022-07-10T10:49:43.208Z","0.0.0-canary-20220710110359":"2022-07-10T11:04:15.359Z","0.0.0-canary-20220710111250":"2022-07-10T11:13:10.599Z","0.0.0-canary-20220710112130":"2022-07-10T11:21:46.608Z","0.0.0-canary-20220710130149":"2022-07-10T13:02:08.673Z","0.0.0-canary-20220710130959":"2022-07-10T13:10:19.846Z","0.0.0-canary-20220710132445":"2022-07-10T13:25:02.512Z","0.0.0-canary-20220711120917":"2022-07-11T12:09:33.463Z","0.0.0-canary-20220711121232":"2022-07-11T12:12:49.905Z","0.0.0-canary-20220711122002":"2022-07-11T12:20:18.696Z","0.0.0-canary-20220711170039":"2022-07-11T17:00:59.520Z","0.0.0-canary-20220711170228":"2022-07-11T17:02:50.234Z","0.0.0-canary-20220711170400":"2022-07-11T17:04:16.772Z","0.0.0-canary-20220711170614":"2022-07-11T17:06:30.807Z","0.0.0-canary-20220711175102":"2022-07-11T17:51:18.581Z","0.0.0-canary-20220711180942":"2022-07-11T18:09:58.659Z","0.0.0-canary-20220711183335":"2022-07-11T18:33:58.730Z","0.0.0-canary-20220711183442":"2022-07-11T18:34:58.783Z","0.0.0-canary-20220711191717":"2022-07-11T19:17:34.023Z","0.0.0-canary-20220712072700":"2022-07-12T07:27:22.697Z","0.0.0-canary-20220719052515":"2022-07-19T05:25:33.631Z","0.2.0":"2022-07-27T15:32:13.663Z","0.2.1":"2022-07-27T15:41:33.314Z"},"maintainers":[{"name":"hendrik.mans","email":"hendrik@mans.de"}],"description":"Visual FX!","author":{"name":"Hendrik Mans","email":"hendrik@mans.de","url":"https://hendrik.mans.de"},"license":"MIT","readme":"![vfx Logo](https://user-images.githubusercontent.com/1061/172030500-4142969b-a0be-403b-94a1-a6d23e20cfa3.png)\n\n[![Version](https://img.shields.io/npm/v/three-vfx?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Downloads](https://img.shields.io/npm/dt/three-vfx.svg?style=for-the-badge)](https://www.npmjs.com/package/three-vfx)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/three-vfx?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=three-vfx)\n\n> **Warning**\n>\n> This library is (extremely!) work-in-progress; meaning that **it is not done**, or ready for use in any other capacity. Please don't use this and assume that anything will work; it probably won't. And when you find something that does work, be ready for it to break in the next release. **Please don't open Issues or PRs for things that are broken**; I am most likely aware of them. **Use this library at your own risk.**\n>\n> If you're interested in using this library and want to keep up to date, please [follow me on Twitter](https://twitter.com/hmans), and/or click the Watch button for this repository.\n\n## Introduction 👋\n\n`three-vfx` is a visual effects library for [Three.js](https://threejs.org/) and [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.\n\n## Status ⚠️\n\nThis library is currently under heavy development, and is most definitely **not ready for any sort of production use whatsoever**. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!\n\n## Examples & Demos 🎓\n\n- **[Official Examples Suite](https://three-vfx-examples.vercel.app/)**\n- **[Official Starter Sandbox](https://codesandbox.io/s/github/hmans/three-vfx-starter?file=/src/Effect.js)** (fork it!)\n- [Space Nebulae](https://codesandbox.io/s/vfx-space-just-the-nebulae-xv9bqm?file=/src/App.js)\n\n## Where is the Documentation?\n\nI'm afraid there's currently **no documentation available** outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on `main` on almost a daily basis. There _will_ be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.\n\n## How this Library Works 🥳\n\nThis library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.\n\nIt has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses _not_ to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.\n\nHowever, it will happily power _most_ of your game VFX, and it will be _very_ fast doing so!\n\nSo, a quick list of things you should know about this library:\n\n- All effects are **particle based**, using **mesh instancing** to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)\n- Since we're using mesh instancing, **each effect uses a single draw call**, no matter how many particles it is composed of.\n- Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)\n- All particles are **fully animated on the GPU**, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.\n- Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; **only the parts of these buffers that represent newly spawned particles are uploaded to the GPU** that frame.\n- You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.\n\n## Hacking & Development 🏗\n\nBut if you want to give the thing a whirl and do some hacking on it, clone this repository and run:\n\n```\nyarn && yarn examples\n```\n\nAlternatively, you can [launch the examples app on StackBlitz](https://stackblitz.com/github/hmans/three-vfx), or just [view them on Vercel](https://vfx-examples.vercel.app/).\n\n## Resources\n\nA couple of links to (possibly free) resources that will help you build cool visual effects.\n\n- [Kenney's Particle Pack](https://www.kenney.nl/assets/particle-pack)\n- [Kenney's Smoke Particles](https://www.kenney.nl/assets/smoke-particles)\n- [Unity's Free VFX Flipbooks](https://blog.unity.com/technology/free-vfx-image-sequences-flipbooks)\n\n## Questions? 💬\n\nFind me on [Twitter](https://twitter.com/hmans) or the [Poimandres Discord](https://discord.gg/aAYjm2p7c7).\n","readmeFilename":"README.md"}