Skip to content

Commit ea13985

Browse files
hmanshmans
authored
Shared Resource Example (#179)
1 parent 85f851f commit ea13985

21 files changed

+379
-466
lines changed

‎.changeset/perfect-weeks-beam.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"vfx-composer": minor
3+
"vfx-composer-r3f": minor
4+
---
5+
6+
Upgrade to the latest Shader Composer and Material Composer. Lots of new APIs!

‎apps/examples/package.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,22 @@
88
"preview": "vite preview"
99
},
1010
"dependencies": {
11-
"@hmans/r3f-shared-resource": "^0.0.1",
11+
"@hmans/r3f-shared-resource": "^0.1.0",
12+
"@hmans/things": "^0.0.4",
1213
"@hmans/use-const": "^0.0.1",
1314
"@hmans/use-rerender": "^0.0.2",
1415
"@hmans/use-version": "^0.0.2",
1516
"@react-three/drei": "^9.23.8",
1617
"@react-three/fiber": "^8.6.0",
1718
"leva": "^0.9.30",
18-
"material-composer": "^0.1.0-next.0",
19-
"material-composer-r3f": "^0.0.3-next.0",
19+
"material-composer": "^0.1.0-next.2",
20+
"material-composer-r3f": "^0.1.0-next.1",
2021
"r3f-perf": "^6.4.4",
2122
"r3f-stage": "^0.3.3",
2223
"react": "^18.1.0",
2324
"react-dom": "^18.1.0",
2425
"react-merge-refs": "^2.0.1",
25-
"shader-composer": "0.3.1",
26+
"shader-composer": "0.3.2",
2627
"shader-composer-r3f": "0.2.0",
2728
"shader-composer-toybox": "^0.1.1",
2829
"statery": "^0.6.0-next.2",

‎apps/examples/src/App.tsx

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,11 @@ import {
66
Heading
77
} from "r3f-stage"
88
import "r3f-stage/styles.css"
9-
import FireballExample from "./examples/Fireball"
109
import { FireflyExample } from "./examples/FireflyExample"
1110
import { FogExample } from "./examples/FogExample"
1211
import MagicWellExample from "./examples/MagicWellExample"
13-
import PlasmaBallExample from "./examples/PlasmaBall"
14-
import PlasmaStormScene from "./examples/PlasmaStormScene"
1512
import Playground from "./examples/Playground"
13+
import SharedResourceExample from "./examples/SharedResourceExample"
1614
import { Simple } from "./examples/Simple"
1715
import { SoftParticlesExample } from "./examples/SoftParticlesExample"
1816
import { Stress } from "./examples/Stress"
@@ -56,10 +54,6 @@ export default () => (
5654
</Description>
5755
</Example>
5856

59-
<Example path="soft-particles" title="Soft Particles">
60-
<SoftParticlesExample />
61-
</Example>
62-
6357
<Example path="fog" title="Fog">
6458
<FogExample />
6559

@@ -70,25 +64,17 @@ export default () => (
7064
</Description>
7165
</Example>
7266

73-
<Heading>Effects</Heading>
74-
75-
<Example path="fireball" title="Fireball">
76-
<FireballExample />
67+
<Heading>Techniques</Heading>
7768

78-
<Description>
79-
An animated fireball! This example uses a normal mesh together with
80-
VFXMaterial.
81-
</Description>
69+
<Example path="shared-resources" title="Shared Resources">
70+
<SharedResourceExample />
8271
</Example>
8372

84-
<Example path="plasmaball" title="Plasma Ball">
85-
<PlasmaBallExample />
73+
<Example path="soft-particles" title="Soft Particles">
74+
<SoftParticlesExample />
8675
</Example>
8776

88-
<Heading>Scenes</Heading>
89-
<Example path="scenes/plasmastorm" title="Plasma Storm">
90-
<PlasmaStormScene />
91-
</Example>
77+
<Heading>Effects</Heading>
9278

9379
<Heading>Experiments</Heading>
9480
<Example path="playground" title="Playground">

‎apps/examples/src/examples/Fireball.tsx

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎apps/examples/src/examples/FireflyExample.tsx

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
import { useFrame } from "@react-three/fiber"
2-
import { ComposableMaterial, Modules } from "material-composer-r3f"
2+
import { composable, modules } from "material-composer-r3f"
33
import { chance, upTo } from "randomish"
44
import { useRef } from "react"
55
import { OneMinus } from "shader-composer"
6-
import {
7-
Color,
8-
Mesh,
9-
MeshStandardMaterial,
10-
NormalBlending,
11-
Vector3
12-
} from "three"
6+
import { Color, Mesh, NormalBlending, Vector3 } from "three"
137
import {
148
Emitter,
159
Particles,
@@ -39,22 +33,21 @@ export const FireflyExample = () => {
3933
<Particles>
4034
<planeGeometry args={[0.05, 0.05]} />
4135

42-
<ComposableMaterial
43-
baseMaterial={MeshStandardMaterial}
36+
<composable.MeshStandardMaterial
4437
color={new Color(4, 1, 4)}
4538
blending={NormalBlending}
4639
transparent
4740
>
48-
<Modules.Billboard />
49-
<Modules.Velocity velocity={velocity} time={particles.age} />
50-
<Modules.Acceleration
41+
<modules.Billboard />
42+
<modules.Velocity velocity={velocity} time={particles.age} />
43+
<modules.Acceleration
5144
force={new Vector3(0, -10, 0)}
5245
time={particles.age}
5346
/>
54-
<Modules.Alpha alpha={OneMinus(particles.progress)} />
55-
<Modules.Color color={color} />
56-
<Modules.Lifetime {...particles} />
57-
</ComposableMaterial>
47+
<modules.Alpha alpha={OneMinus(particles.progress)} />
48+
<modules.Color color={color} />
49+
<modules.Lifetime {...particles} />
50+
</composable.MeshStandardMaterial>
5851

5952
<mesh ref={mesh} castShadow>
6053
<dodecahedronGeometry args={[0.2]} />

‎apps/examples/src/examples/FogExample.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useConst } from "@hmans/use-const"
22
import { useTexture } from "@react-three/drei"
3-
import { ComposableMaterial, Modules } from "material-composer-r3f"
3+
import { composable, modules } from "material-composer-r3f"
44
import { Layers, useRenderPipeline } from "r3f-stage"
55
import { between, plusMinus, upTo } from "randomish"
66
import { Mul, Rotation3DZ, Time } from "shader-composer"
@@ -30,19 +30,18 @@ export const Fog = () => {
3030
<group>
3131
<Particles layers-mask={Layers.TransparentFX}>
3232
<planeGeometry />
33-
<ComposableMaterial
34-
baseMaterial={MeshStandardMaterial}
33+
<composable.MeshStandardMaterial
3534
map={texture}
3635
opacity={0.1}
3736
transparent
3837
depthWrite={false}
3938
>
40-
<Modules.Rotate rotation={Rotation3DZ(Mul(time, rotation))} />
41-
<Modules.Scale scale={scale} />
42-
<Modules.Velocity velocity={velocity} time={time} />
43-
<Modules.Billboard />
44-
<Modules.Softness softness={5} depthTexture={depth} />
45-
</ComposableMaterial>
39+
<modules.Rotate rotation={Rotation3DZ(Mul(time, rotation))} />
40+
<modules.Scale scale={scale} />
41+
<modules.Velocity velocity={velocity} time={time} />
42+
<modules.Billboard />
43+
<modules.Softness softness={5} depthTexture={depth} />
44+
</composable.MeshStandardMaterial>
4645

4746
<Emitter
4847
limit={50}

‎apps/examples/src/examples/MagicWellExample.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useTexture } from "@react-three/drei"
2-
import { ComposableMaterial, Modules } from "material-composer-r3f"
2+
import { composable, modules } from "material-composer-r3f"
33
import { useRenderPipeline } from "r3f-stage"
44
import { between, plusMinus } from "randomish"
55
import { OneMinus } from "shader-composer"
@@ -18,21 +18,21 @@ export default function MagicWellExample() {
1818
<Particles maxParticles={5_000}>
1919
<planeGeometry args={[0.15, 2]} />
2020

21-
<ComposableMaterial
21+
<composable.MeshStandardMaterial
2222
map={texture}
2323
depthWrite={false}
2424
blending={AdditiveBlending}
2525
side={DoubleSide}
2626
color={new Color(0, 3, 2)}
2727
>
28-
<Modules.Scale scale={OneMinus(particles.progress)} />
29-
<Modules.Acceleration
28+
<modules.Scale scale={OneMinus(particles.progress)} />
29+
<modules.Acceleration
3030
force={new Vector3(0, 1.2, 0)}
3131
time={particles.age}
3232
/>
33-
<Modules.Lifetime {...particles} />
34-
<Modules.Softness softness={5} depthTexture={depth} />
35-
</ComposableMaterial>
33+
<modules.Lifetime {...particles} />
34+
<modules.Softness softness={5} depthTexture={depth} />
35+
</composable.MeshStandardMaterial>
3636

3737
<Emitter
3838
rate={250}

‎apps/examples/src/examples/PlasmaBall.tsx

Lines changed: 0 additions & 29 deletions
This file was deleted.

0 commit comments

Comments
 (0)