Shared Resource Example (#179)

hmans · Aug 30, 2022 · ea13985 · ea13985
1 parent 85f851f
commit ea13985
Show file tree

Hide file tree

Showing 21 changed files with 379 additions and 466 deletions.
diff --git a/.changeset/perfect-weeks-beam.md b/.changeset/perfect-weeks-beam.md
@@ -0,0 +1,6 @@
+---
+"vfx-composer": minor
+"vfx-composer-r3f": minor
+---
+
+Upgrade to the latest Shader Composer and Material Composer. Lots of new APIs!
diff --git a/apps/examples/package.json b/apps/examples/package.json
@@ -8,21 +8,22 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@hmans/r3f-shared-resource": "^0.0.1",
+    "@hmans/r3f-shared-resource": "^0.1.0",
+    "@hmans/things": "^0.0.4",
     "@hmans/use-const": "^0.0.1",
     "@hmans/use-rerender": "^0.0.2",
     "@hmans/use-version": "^0.0.2",
     "@react-three/drei": "^9.23.8",
     "@react-three/fiber": "^8.6.0",
     "leva": "^0.9.30",
-    "material-composer": "^0.1.0-next.0",
-    "material-composer-r3f": "^0.0.3-next.0",
+    "material-composer": "^0.1.0-next.2",
+    "material-composer-r3f": "^0.1.0-next.1",
     "r3f-perf": "^6.4.4",
     "r3f-stage": "^0.3.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-merge-refs": "^2.0.1",
-    "shader-composer": "0.3.1",
+    "shader-composer": "0.3.2",
     "shader-composer-r3f": "0.2.0",
     "shader-composer-toybox": "^0.1.1",
     "statery": "^0.6.0-next.2",

diff --git a/apps/examples/src/App.tsx b/apps/examples/src/App.tsx
@@ -6,13 +6,11 @@ import {
   Heading
 } from "r3f-stage"
 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"
+import SharedResourceExample from "./examples/SharedResourceExample"
 import { Simple } from "./examples/Simple"
 import { SoftParticlesExample } from "./examples/SoftParticlesExample"
 import { Stress } from "./examples/Stress"
@@ -56,10 +54,6 @@ export default () => (
         </Description>
       </Example>
 
-      <Example path="soft-particles" title="Soft Particles">
-        <SoftParticlesExample />
-      </Example>
-
       <Example path="fog" title="Fog">
         <FogExample />
 
@@ -70,25 +64,17 @@ export default () => (
         </Description>
       </Example>
 
-      <Heading>Effects</Heading>
-
-      <Example path="fireball" title="Fireball">
-        <FireballExample />
+      <Heading>Techniques</Heading>
 
-        <Description>
-          An animated fireball! This example uses a normal mesh together with
-          VFXMaterial.
-        </Description>
+      <Example path="shared-resources" title="Shared Resources">
+        <SharedResourceExample />
       </Example>
 
-      <Example path="plasmaball" title="Plasma Ball">
-        <PlasmaBallExample />
+      <Example path="soft-particles" title="Soft Particles">
+        <SoftParticlesExample />
       </Example>
 
-      <Heading>Scenes</Heading>
-      <Example path="scenes/plasmastorm" title="Plasma Storm">
-        <PlasmaStormScene />
-      </Example>
+      <Heading>Effects</Heading>
 
       <Heading>Experiments</Heading>
       <Example path="playground" title="Playground">

diff --git a/apps/examples/src/examples/Fireball.tsx b/apps/examples/src/examples/Fireball.tsx
diff --git a/apps/examples/src/examples/FireflyExample.tsx b/apps/examples/src/examples/FireflyExample.tsx
@@ -1,15 +1,9 @@
 import { useFrame } from "@react-three/fiber"
-import { ComposableMaterial, Modules } from "material-composer-r3f"
+import { composable, modules } from "material-composer-r3f"
 import { chance, upTo } from "randomish"
 import { useRef } from "react"
 import { OneMinus } from "shader-composer"
-import {
-  Color,
-  Mesh,
-  MeshStandardMaterial,
-  NormalBlending,
-  Vector3
-} from "three"
+import { Color, Mesh, NormalBlending, Vector3 } from "three"
 import {
   Emitter,
   Particles,
@@ -39,22 +33,21 @@ export const FireflyExample = () => {
     <Particles>
       <planeGeometry args={[0.05, 0.05]} />
 
-      <ComposableMaterial
-        baseMaterial={MeshStandardMaterial}
+      <composable.MeshStandardMaterial
         color={new Color(4, 1, 4)}
         blending={NormalBlending}
         transparent
       >
-        <Modules.Billboard />
-        <Modules.Velocity velocity={velocity} time={particles.age} />
-        <Modules.Acceleration
+        <modules.Billboard />
+        <modules.Velocity velocity={velocity} time={particles.age} />
+        <modules.Acceleration
           force={new Vector3(0, -10, 0)}
           time={particles.age}
         />
-        <Modules.Alpha alpha={OneMinus(particles.progress)} />
-        <Modules.Color color={color} />
-        <Modules.Lifetime {...particles} />
-      </ComposableMaterial>
+        <modules.Alpha alpha={OneMinus(particles.progress)} />
+        <modules.Color color={color} />
+        <modules.Lifetime {...particles} />
+      </composable.MeshStandardMaterial>
 
       <mesh ref={mesh} castShadow>
         <dodecahedronGeometry args={[0.2]} />

diff --git a/apps/examples/src/examples/FogExample.tsx b/apps/examples/src/examples/FogExample.tsx
@@ -1,6 +1,6 @@
 import { useConst } from "@hmans/use-const"
 import { useTexture } from "@react-three/drei"
-import { ComposableMaterial, Modules } from "material-composer-r3f"
+import { composable, modules } from "material-composer-r3f"
 import { Layers, useRenderPipeline } from "r3f-stage"
 import { between, plusMinus, upTo } from "randomish"
 import { Mul, Rotation3DZ, Time } from "shader-composer"
@@ -30,19 +30,18 @@ export const Fog = () => {
     <group>
       <Particles layers-mask={Layers.TransparentFX}>
         <planeGeometry />
-        <ComposableMaterial
-          baseMaterial={MeshStandardMaterial}
+        <composable.MeshStandardMaterial
           map={texture}
           opacity={0.1}
           transparent
           depthWrite={false}
         >
-          <Modules.Rotate rotation={Rotation3DZ(Mul(time, rotation))} />
-          <Modules.Scale scale={scale} />
-          <Modules.Velocity velocity={velocity} time={time} />
-          <Modules.Billboard />
-          <Modules.Softness softness={5} depthTexture={depth} />
-        </ComposableMaterial>
+          <modules.Rotate rotation={Rotation3DZ(Mul(time, rotation))} />
+          <modules.Scale scale={scale} />
+          <modules.Velocity velocity={velocity} time={time} />
+          <modules.Billboard />
+          <modules.Softness softness={5} depthTexture={depth} />
+        </composable.MeshStandardMaterial>
 
         <Emitter
           limit={50}

diff --git a/apps/examples/src/examples/MagicWellExample.tsx b/apps/examples/src/examples/MagicWellExample.tsx
@@ -1,5 +1,5 @@
 import { useTexture } from "@react-three/drei"
-import { ComposableMaterial, Modules } from "material-composer-r3f"
+import { composable, modules } from "material-composer-r3f"
 import { useRenderPipeline } from "r3f-stage"
 import { between, plusMinus } from "randomish"
 import { OneMinus } from "shader-composer"
@@ -18,21 +18,21 @@ export default function MagicWellExample() {
       <Particles maxParticles={5_000}>
         <planeGeometry args={[0.15, 2]} />
 
-        <ComposableMaterial
+        <composable.MeshStandardMaterial
           map={texture}
           depthWrite={false}
           blending={AdditiveBlending}
           side={DoubleSide}
           color={new Color(0, 3, 2)}
         >
-          <Modules.Scale scale={OneMinus(particles.progress)} />
-          <Modules.Acceleration
+          <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>
+          <modules.Lifetime {...particles} />
+          <modules.Softness softness={5} depthTexture={depth} />
+        </composable.MeshStandardMaterial>
 
         <Emitter
           rate={250}

diff --git a/apps/examples/src/examples/PlasmaBall.tsx b/apps/examples/src/examples/PlasmaBall.tsx