Magic Well example

apps/examples/src/App.tsx

@@ -9,6 +9,7 @@ import "r3f-stage/styles.css"
 import FireballExample from "./examples/Fireball"
 import { FireflyExample } from "./examples/FireflyExample"
 import { FogExample } from "./examples/FogExample"
+import MagicWellExample from "./examples/MagicWellExample"
 import PlasmaBallExample from "./examples/PlasmaBall"
 import PlasmaStormScene from "./examples/PlasmaStormScene"
 import Playground from "./examples/Playground"
@@ -41,6 +42,10 @@ export default () => (
         <FireflyExample />
       </Example>
 
+      <Example path="particles/magic-well" title="Magic Well">
+        <MagicWellExample />
+      </Example>
+
       <Example path="particles/vanilla" title="Vanilla Three.js">
         <Vanilla />
 

apps/examples/src/examples/MagicWellExample.tsx

@@ -0,0 +1,54 @@
+import { useTexture } from "@react-three/drei"
+import { ComposableMaterial, Modules } from "material-composer-r3f"
+import { useRenderPipeline } from "r3f-stage"
+import { between, plusMinus } from "randomish"
+import { OneMinus } from "shader-composer"
+import { useUniformUnit } from "shader-composer-r3f"
+import { AdditiveBlending, Color, DoubleSide, Euler, Vector3 } from "three"
+import { Emitter, Particles, useParticles } from "vfx-composer-r3f"
+import { particleUrl } from "./textures"
+
+export default function MagicWellExample() {
+  const texture = useTexture(particleUrl)
+  const particles = useParticles()
+  const depth = useUniformUnit("sampler2D", useRenderPipeline().depth)
+
+  return (
+    <group>
+      <Particles maxParticles={5_000}>
+        <planeGeometry args={[0.15, 2]} />
+
+        <ComposableMaterial
+          map={texture}
+          depthWrite={false}
+          blending={AdditiveBlending}
+          side={DoubleSide}
+          color={new Color(0, 3, 2)}
+        >
+          <Modules.Scale scale={OneMinus(particles.progress)} />
+          <Modules.Acceleration
+            force={new Vector3(0, 1.2, 0)}
+            time={particles.age}
+          />
+          <Modules.Lifetime {...particles} />
+          <Modules.Softness softness={5} depthTexture={depth} />
+        </ComposableMaterial>
+
+        <Emitter
+          continuous
+          count={2}
+          setup={({ position, rotation }) => {
+            const theta = plusMinus(Math.PI)
+            const power = Math.pow(Math.random(), 3)
+            const r = power * 1.2
+            position.set(Math.cos(theta) * r, -2, Math.sin(theta) * r)
+
+            rotation.setFromEuler(new Euler(0, plusMinus(Math.PI), 0))
+
+            particles.setLifetime(between(1, 5))
+          }}
+        />
+      </Particles>
+    </group>
+  )
+}