diff --git a/apps/examples/src/examples/Simple.tsx b/apps/examples/src/examples/Simple.tsx index a92d27652..799d682a1 100644 --- a/apps/examples/src/examples/Simple.tsx +++ b/apps/examples/src/examples/Simple.tsx @@ -2,7 +2,7 @@ import { between, plusMinus, random, upTo } from "randomish" import { useState } from "react" import { OneMinus, Time } from "shader-composer" import { Color, MeshStandardMaterial, Vector2, Vector3 } from "three" -import { Delay, Repeat } from "three-vfx" +import { Repeat } from "three-vfx" import { makeParticles, VFX, VFXMaterial } from "vfx-composer/fiber" import { Lifetime } from "vfx-composer/modules" import { ParticleAttribute } from "vfx-composer/units" diff --git a/apps/examples/src/examples/Stress.tsx b/apps/examples/src/examples/Stress.tsx new file mode 100644 index 000000000..a93855711 --- /dev/null +++ b/apps/examples/src/examples/Stress.tsx @@ -0,0 +1,62 @@ +import { between, plusMinus, random, upTo } from "randomish" +import { useState } from "react" +import { OneMinus, Time } from "shader-composer" +import { Color, MeshStandardMaterial, Vector2, Vector3 } from "three" +import { Repeat } from "three-vfx" +import { makeParticles, VFX, VFXMaterial } from "vfx-composer/fiber" +import { Lifetime } from "vfx-composer/modules" +import { ParticleAttribute } from "vfx-composer/units" + +const Effect = makeParticles() + +const FREQ = 8 + +export const Stress = () => { + const [variables] = useState(() => ({ + time: Time(), + lifetime: ParticleAttribute(new Vector2()), + velocity: ParticleAttribute(new Vector3()), + color: ParticleAttribute(new Color()) + })) + + const { ParticleProgress, ParticleAge, module: lifetimeModule } = Lifetime( + variables.lifetime, + variables.time + ) + + return ( + + + + + + + + + + + + + + + { + const t = variables.time.uniform.value + const { lifetime, velocity, color } = variables + + /* Randomize the instance transform */ + position.randomDirection().multiplyScalar(upTo(6)) + rotation.random() + + /* Write values into the instanced attributes */ + const start = t + random() / FREQ + lifetime.value.set(start, start + between(1, 3)) + velocity.value.set(plusMinus(5), between(5, 18), plusMinus(5)) + color.value.setRGB(Math.random(), Math.random(), Math.random()) + }} + /> + + + ) +} diff --git a/apps/examples/src/examples/index.tsx b/apps/examples/src/examples/index.tsx index ccd810b2a..c0423862f 100644 --- a/apps/examples/src/examples/index.tsx +++ b/apps/examples/src/examples/index.tsx @@ -9,6 +9,7 @@ import Playground from "./Playground" import { Simple } from "./Simple" import { Snow } from "./Snow" import { SoftParticlesExample } from "./SoftParticlesExample" +import { Stress } from "./Stress" import { Vanilla } from "./Vanilla" export type ExampleDefinition = { @@ -20,6 +21,7 @@ export type ExampleDefinition = { export default [ { path: "simple", name: "Simple", component: }, { path: "vanilla", name: "Vanilla", component: }, + { path: "stress", name: "Stress", component: }, { path: "explosion", name: "Explosion (Legacy)", component: }, { path: "firefly", name: "Firefly (Legacy)", component: }, { path: "fog", name: "Fog (Legacy)", component: },