Material Composer extraction (#163)

hmans · Aug 22, 2022 · dc04f03 · dc04f03
1 parent 03d432d
commit dc04f03
Show file tree

Hide file tree

Showing 56 changed files with 607 additions and 469 deletions.
diff --git a/.changeset/silent-plants-shout.md b/.changeset/silent-plants-shout.md
@@ -0,0 +1,6 @@
+---
+"vfx-composer": minor
+"vfx-composer-r3f": minor
+---
+
+`VFXMaterial` and the animation modules have been extracted into a new package, **Material Composer**, that this library now uses as a dependency.
diff --git a/apps/examples/package.json b/apps/examples/package.json
@@ -15,18 +15,19 @@
     "@react-three/drei": "^9.23.1",
     "@react-three/fiber": "^8.4.1",
     "leva": "^0.9.30",
+    "material-composer": "^0.0.1",
+    "material-composer-r3f": "^0.0.1",
     "r3f-perf": "^6.4.4",
     "r3f-stage": "^0.3.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-merge-refs": "^2.0.1",
     "shader-composer": "0.3.0",
     "shader-composer-r3f": "0.2.0",
-    "shader-composer-toybox": "^0.1.0",
+    "shader-composer-toybox": "^0.1.1",
     "statery": "^0.6.0-next.2",
     "three": "^0.143.0",
     "three-custom-shader-material": "^4.0.0",
-    "three-vfx": "^0.2.0",
     "timeline-composer": "^0.1.5",
     "vfx-composer": "^0.2.0-next.3",
     "vfx-composer-r3f": "^0.2.0-next.3",

diff --git a/apps/examples/src/examples/Fireball.tsx b/apps/examples/src/examples/Fireball.tsx
@@ -1,6 +1,6 @@
 import { Mul, Time, vec3 } from "shader-composer"
 import { MeshStandardMaterial } from "three"
-import { VFX, VFXMaterial } from "vfx-composer-r3f"
+import { Modules, ComposableMaterial } from "material-composer-r3f"
 
 export default function FireballExample() {
   const time = Time()
@@ -12,16 +12,16 @@ export default function FireballExample() {
       <mesh castShadow>
         <icosahedronGeometry args={[1, 8]} />
 
-        <VFXMaterial baseMaterial={MeshStandardMaterial}>
-          <VFX.DistortSurface offset={Mul(time, 0.4)} amplitude={0.1} />
+        <ComposableMaterial baseMaterial={MeshStandardMaterial}>
+          <Modules.DistortSurface offset={Mul(time, 0.4)} amplitude={0.1} />
 
-          <VFX.Lava
+          <Modules.Lava
             offset={Mul(vec3(0.1, 0.2, 0.5), time)}
             scale={0.3}
             octaves={5}
             power={1}
           />
-        </VFXMaterial>
+        </ComposableMaterial>
       </mesh>
     </group>
   )

diff --git a/apps/examples/src/examples/FireflyExample.tsx b/apps/examples/src/examples/FireflyExample.tsx
@@ -1,4 +1,5 @@
 import { useFrame } from "@react-three/fiber"
+import { ComposableMaterial, Modules } from "material-composer-r3f"
 import { chance, upTo } from "randomish"
 import { useRef } from "react"
 import { OneMinus } from "shader-composer"
@@ -13,9 +14,7 @@ import {
   Emitter,
   Particles,
   useParticleAttribute,
-  useParticles,
-  VFX,
-  VFXMaterial
+  useParticles
 } from "vfx-composer-r3f"
 
 const tmpVec3 = new Vector3()
@@ -40,19 +39,22 @@ export const FireflyExample = () => {
     <Particles>
       <planeGeometry args={[0.05, 0.05]} />
 
-      <VFXMaterial
+      <ComposableMaterial
         baseMaterial={MeshStandardMaterial}
         color={new Color(4, 1, 4)}
         blending={NormalBlending}
         transparent
       >
-        <VFX.Billboard />
-        <VFX.Velocity velocity={velocity} time={particles.Age} />
-        <VFX.Acceleration force={new Vector3(0, -10, 0)} time={particles.Age} />
-        <VFX.SetAlpha alpha={OneMinus(particles.Progress)} />
-        <VFX.SetColor color={color} />
-        <VFX.Particles {...particles} />
-      </VFXMaterial>
+        <Modules.Billboard />
+        <Modules.Velocity velocity={velocity} time={particles.age} />
+        <Modules.Acceleration
+          force={new Vector3(0, -10, 0)}
+          time={particles.age}
+        />
+        <Modules.SetAlpha alpha={OneMinus(particles.progress)} />
+        <Modules.SetColor color={color} />
+        <Modules.Lifetime {...particles} />
+      </ComposableMaterial>
 
       <mesh ref={mesh}>
         <dodecahedronGeometry args={[0.2]} />

diff --git a/apps/examples/src/examples/FogExample.tsx b/apps/examples/src/examples/FogExample.tsx
@@ -1,17 +1,12 @@
 import { useConst } from "@hmans/use-const"
 import { useTexture } from "@react-three/drei"
+import { ComposableMaterial, Modules } from "material-composer-r3f"
 import { Layers, useRenderPipeline } from "r3f-stage"
 import { between, plusMinus, upTo } from "randomish"
 import { Mul, Rotation3DZ, Time } from "shader-composer"
 import { useUniformUnit } from "shader-composer-r3f"
 import { MeshStandardMaterial, Vector3 } from "three"
-import {
-  Emitter,
-  Particles,
-  useParticleAttribute,
-  VFX,
-  VFXMaterial
-} from "vfx-composer-r3f"
+import { Emitter, Particles, useParticleAttribute } from "vfx-composer-r3f"
 import { smokeUrl } from "./textures"
 
 export const FogExample = () => (
@@ -35,19 +30,19 @@ export const Fog = () => {
     <group>
       <Particles layers-mask={Layers.TransparentFX}>
         <planeGeometry />
-        <VFXMaterial
+        <ComposableMaterial
           baseMaterial={MeshStandardMaterial}
           map={texture}
           transparent
           depthWrite={false}
         >
-          <VFX.SetAlpha alpha={0.1} />
-          <VFX.Rotate rotation={Rotation3DZ(Mul(time, rotation))} />
-          <VFX.Scale scale={scale} />
-          <VFX.Velocity velocity={velocity} time={time} />
-          <VFX.Billboard />
-          <VFX.SoftParticles softness={5} depthTexture={depth} />
-        </VFXMaterial>
+          <Modules.SetAlpha alpha={0.1} />
+          <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>
 
         <Emitter
           count={50}

diff --git a/apps/examples/src/examples/PlasmaBall.tsx b/apps/examples/src/examples/PlasmaBall.tsx
@@ -1,6 +1,6 @@
+import { ComposableMaterial, Modules } from "material-composer-r3f"
 import { Cos, Mul, Time } from "shader-composer"
 import { DoubleSide, MeshStandardMaterial } from "three"
-import { VFX, VFXMaterial } from "vfx-composer-r3f"
 
 export default function PlasmaBallExample() {
   const time = Time()
@@ -12,17 +12,17 @@ export default function PlasmaBallExample() {
       <mesh>
         <icosahedronGeometry args={[1, 8]} />
 
-        <VFXMaterial
+        <ComposableMaterial
           baseMaterial={MeshStandardMaterial}
           transparent
           side={DoubleSide}
         >
-          <VFX.DistortSurface
+          <Modules.DistortSurface
             offset={Mul(time, 0.5)}
             amplitude={Mul(Cos(time), 0.2)}
           />
-          <VFX.Plasma offset={Mul(time, 0.3)} />
-        </VFXMaterial>
+          <Modules.Plasma offset={Mul(time, 0.3)} />
+        </ComposableMaterial>
       </mesh>
     </group>
   )

diff --git a/apps/examples/src/examples/PlasmaStormScene.tsx b/apps/examples/src/examples/PlasmaStormScene.tsx
@@ -1,5 +1,6 @@
 import { useTexture } from "@react-three/drei"
 import { GroupProps } from "@react-three/fiber"
+import { ComposableMaterial, Modules } from "material-composer-r3f"
 import { Layers, useRenderPipeline } from "r3f-stage"
 import { between, plusMinus, random } from "randomish"
 import {
@@ -13,14 +14,12 @@ import {
 } from "shader-composer"
 import { useUniformUnit } from "shader-composer-r3f"
 import { Color, DoubleSide, MeshStandardMaterial, Vector3 } from "three"
-import { Repeat } from "three-vfx"
+import { Repeat } from "timeline-composer"
 import {
   Emitter,
   Particles,
   useParticleAttribute,
-  useParticles,
-  VFX,
-  VFXMaterial
+  useParticles
 } from "vfx-composer-r3f"
 import { smokeUrl } from "./textures"
 
@@ -58,21 +57,24 @@ const SuckyParticles = () => {
     >
       <planeGeometry args={[0.05, 0.05]} />
 
-      <VFXMaterial
+      <ComposableMaterial
         color={new Color(1, 2, 3)}
         baseMaterial={MeshStandardMaterial}
       >
-        <VFX.Billboard />
-        <VFX.Scale scale={particles.Progress} />
-        <VFX.Velocity velocity={velocity} time={particles.Age} />
-        <VFX.Acceleration force={new Vector3(0, 5, 0)} time={particles.Age} />
-        <VFX.Rotate
-          rotation={Rotation3DY(Mul(particles.Age, Cos(particles.StartTime)))}
+        <Modules.Billboard />
+        <Modules.Scale scale={particles.progress} />
+        <Modules.Velocity velocity={velocity} time={particles.age} />
+        <Modules.Acceleration
+          force={new Vector3(0, 5, 0)}
+          time={particles.age}
         />
-        <VFX.Particles {...particles} />
-      </VFXMaterial>
+        <Modules.Rotate
+          rotation={Rotation3DY(Mul(particles.age, Cos(particles.startTime)))}
+        />
+        <Modules.Lifetime {...particles} />
+      </ComposableMaterial>
 
-      <Repeat interval={1 / frequency}>
+      <Repeat seconds={1 / frequency}>
         <Emitter
           count={5000 / frequency}
           setup={({ position }) => {
@@ -106,17 +108,20 @@ const FloorEruption = () => {
     >
       <boxGeometry args={[0.1, 0.1, 0.1]} />
 
-      <VFXMaterial color="black" baseMaterial={MeshStandardMaterial}>
-        <VFX.Scale scale={OneMinus(particles.Progress)} />
-        <VFX.Velocity velocity={velocity} time={particles.Age} />
-        <VFX.Acceleration force={new Vector3(0, 1, 0)} time={particles.Age} />
-        <VFX.Rotate
-          rotation={Rotation3DY(Mul(particles.Age, Sin(particles.StartTime)))}
+      <ComposableMaterial color="black" baseMaterial={MeshStandardMaterial}>
+        <Modules.Scale scale={OneMinus(particles.progress)} />
+        <Modules.Velocity velocity={velocity} time={particles.age} />
+        <Modules.Acceleration
+          force={new Vector3(0, 1, 0)}
+          time={particles.age}
+        />
+        <Modules.Rotate
+          rotation={Rotation3DY(Mul(particles.age, Sin(particles.startTime)))}
         />
-        <VFX.Particles {...particles} />
-      </VFXMaterial>
+        <Modules.Lifetime {...particles} />
+      </ComposableMaterial>
 
-      <Repeat interval={1 / frequency}>
+      <Repeat seconds={1 / frequency}>
         <Emitter
           count={200 / frequency}
           setup={({ position }) => {
@@ -147,18 +152,18 @@ function PlasmaBall(props: GroupProps) {
       <mesh layers-mask={Layers.TransparentFX}>
         <icosahedronGeometry args={[1, 8]} />
 
-        <VFXMaterial
+        <ComposableMaterial
           baseMaterial={MeshStandardMaterial}
           transparent
           side={DoubleSide}
         >
-          <VFX.DistortSurface
+          <Modules.DistortSurface
             offset={Mul(time, 0.5)}
             amplitude={Mul(Cos(time), 0.2)}
           />
-          <VFX.Plasma offset={Mul(time, 0.3)} />
-          <VFX.SoftParticles softness={0.5} depthTexture={depth} />
-        </VFXMaterial>
+          <Modules.Plasma offset={Mul(time, 0.3)} />
+          <Modules.Softness softness={0.5} depthTexture={depth} />
+        </ComposableMaterial>
       </mesh>
     </group>
   )
@@ -178,21 +183,23 @@ export const Fog = () => {
     <group>
       <Particles layers-mask={Layers.TransparentFX}>
         <planeGeometry />
-        <VFXMaterial
+        <ComposableMaterial
           baseMaterial={MeshStandardMaterial}
           map={texture}
           transparent
           depthWrite={false}
         >
-          <VFX.Billboard />
-          <VFX.SetAlpha alpha={0.2} />
-          <VFX.Rotate rotation={Rotation3DZ(Mul(particles.Age, rotation))} />
-          <VFX.Scale scale={scale} />
-          <VFX.Velocity velocity={velocity} time={particles.Age} />
-          <VFX.SoftParticles softness={5} depthTexture={depth} />
-        </VFXMaterial>
-
-        <Repeat interval={1 / frequency}>
+          <Modules.Billboard />
+          <Modules.SetAlpha alpha={0.2} />
+          <Modules.Rotate
+            rotation={Rotation3DZ(Mul(particles.age, rotation))}
+          />
+          <Modules.Scale scale={scale} />
+          <Modules.Velocity velocity={velocity} time={particles.age} />
+          <Modules.Softness softness={5} depthTexture={depth} />
+        </ComposableMaterial>
+
+        <Repeat seconds={1 / frequency}>
           <Emitter
             count={50 / frequency}
             setup={({ position }) => {

diff --git a/apps/examples/src/examples/Playground.tsx b/apps/examples/src/examples/Playground.tsx
@@ -1,3 +1,16 @@
+import { ComposableMaterial, Modules } from "material-composer-r3f"
+import { Mul, Time } from "shader-composer"
+import { Color, MeshStandardMaterial } from "three"
+
 export default function Playground() {
-  return <group></group>
+  return (
+    <group>
+      <mesh>
+        <sphereGeometry />
+        <ComposableMaterial baseMaterial={MeshStandardMaterial}>
+          <Modules.SetColor color={Mul(new Color("hotpink"), Time())} />
+        </ComposableMaterial>
+      </mesh>
+    </group>
+  )
 }
diff --git a/apps/examples/src/examples/Simple.tsx b/apps/examples/src/examples/Simple.tsx
@@ -1,14 +1,13 @@
 import { useTexture } from "@react-three/drei"
+import { ComposableMaterial, Modules } from "material-composer-r3f"
 import { between, plusMinus } from "randomish"
 import { OneMinus } from "shader-composer"
 import { AdditiveBlending, MeshStandardMaterial, Vector3 } from "three"
 import {
   Emitter,
   Particles,
   useParticleAttribute,
-  useParticles,
-  VFX,
-  VFXMaterial
+  useParticles
 } from "vfx-composer-r3f"
 import { particleUrl } from "./textures"
 
@@ -24,24 +23,21 @@ export const Simple = () => {
         {/* Any geometry can be used, but here, we'll go with something simple. */}
         <planeGeometry args={[0.2, 0.2]} />
 
-        {/* The main driver of everything VFX Composer does is VFXMaterial, which
-        will compile a list of animation modules into one big shader so things can
-        happily run on your GPU. Try commenting out some of these to see what happens! */}
-        <VFXMaterial
+        <ComposableMaterial
           baseMaterial={MeshStandardMaterial}
           map={texture}
           depthWrite={false}
           blending={AdditiveBlending}
         >
-          <VFX.Billboard />
-          <VFX.Scale scale={OneMinus(particles.Progress)} />
-          <VFX.Velocity velocity={velocity} time={particles.Age} />
-          <VFX.Acceleration
+          <Modules.Billboard />
+          <Modules.Scale scale={OneMinus(particles.progress)} />
+          <Modules.Velocity velocity={velocity} time={particles.age} />
+          <Modules.Acceleration
             force={new Vector3(0, -2, 0)}
-            time={particles.Age}
+            time={particles.age}
           />
-          <VFX.Particles {...particles} />
-        </VFXMaterial>
+          <Modules.Lifetime {...particles} />
+        </ComposableMaterial>
 
         {/* The other important component here is the emitter, which will, as you
         might already have guessed, emit new particles. Emitters are full scene