Soft Particles (#35)

* Prepare the softness * Cleanup * Move creation of depth buffer into ParticlesMaterial * Set camera near/far * I have no idea what I'm doing * Simplify shader * Tone down fog a little * Disable logarithmic depth buffer, woops * Eh * ALMOST * ALMOST * SO CLOSE * Move drei to peerdeps * Fix * Add a standalone soft particles example * softness * Tweaks * Cleanup * Tweak * Eh * Switch Fog example to MultiplyBlending * Woops * Woops * Use window resolution for depth buffer * Use normal blending for fog * Remove full screen effects * Eh * Tweako * Fix lo-res switch * Cleanup * Fix typing * Tweak explosion * Tweak Fog some more * Tweak Fog some more * woop * Cleanup * Cleanup * Cleanup * Fix Simple example * Tweak shader some more * Scope main chunks * Add pp * Effects! * PP * Fix types * Tweak effects * Tweak examples and bloom * Tweaks * Tweak bloom * Tweak bloom some more * Tweak shader * WIP Tornado Example * Some debris * Debris -> Dust * Remove Tornado example, unrelated to this branch * Clean up shader in preparation for customizable soft particle functions * Further prep * softnessFunction * Move custom useDB/FBO implementations into example app * Use userland depthtexture * Fix explosion effect * Wrap examples in suspense * Start out own implementation * Cleanup * Cleanup * Fix dpr support * Cleanup * Cleanup * half resolution by default * Fix explosion effect * Remove useFBO * Update uniforms every frame * Cleanup * Changeset
hmans · Jun 19, 2022 · baf11be · baf11be · vercel · Jun 19, 2022
1 parent 4371469
commit baf11be
Show file tree

Hide file tree

Showing 19 changed files with 445 additions and 128 deletions.
diff --git a/.changeset/weak-dots-check.md b/.changeset/weak-dots-check.md
@@ -0,0 +1,36 @@
+---
+"three-vfx": minor
+---
+
+**New:** Soft Particles support! `<ParticlesMaterial>` now has new `softness`, `softnessFunction` and `depthTexture` props.
+
+```tsx
+export const SoftParticlesExample = () => {
+  const depthBuffer = useDepthBuffer()
+
+  return (
+    <VisualEffect>
+      <MeshParticles>
+        <planeGeometry args={[20, 20]} />
+
+        <ParticlesMaterial
+          baseMaterial={MeshStandardMaterial}
+          color="hotpink"
+          billboard
+          transparent
+          depthWrite={false}
+          softness={5}
+          depthTexture={depthBuffer.depthTexture}
+        />
+
+        <Emitter
+          count={1}
+          setup={(c) => {
+            c.lifetime = Infinity
+          }}
+        />
+      </MeshParticles>
+    </VisualEffect>
+  )
+}
+```
diff --git a/apps/examples/package.json b/apps/examples/package.json
@@ -11,6 +11,7 @@
     "@react-three/drei": "^9.11.3",
     "@react-three/fiber": "^8.0.22",
     "leva": "^0.9.27",
+    "postprocessing": "^6.28.0",
     "r3f-perf": "^6.2.6",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

diff --git a/apps/examples/src/Game.tsx b/apps/examples/src/Game.tsx
@@ -2,30 +2,28 @@ import { OrbitControls, PerspectiveCamera } from "@react-three/drei"
 import { Canvas } from "@react-three/fiber"
 import { button, useControls } from "leva"
 import { Perf } from "r3f-perf"
-import { FC, useState } from "react"
+import { FC, Suspense, useState } from "react"
 import { LinearEncoding } from "three"
 import { Repeat } from "three-vfx"
 import { Route, useRoute } from "wouter"
 import examples, { ExampleDefinition } from "./examples"
-import { RenderPipeline } from "./RenderPipeline"
+import { Rendering } from "./Rendering"
 import { Stage } from "./Stage"
 
 export const Game = () => {
-  const { beautiful, halfResolution } = useControls("Rendering", {
-    beautiful: true,
+  const { halfResolution } = useControls("Rendering", {
     halfResolution: false
   })
 
   return (
     <Canvas
       flat
       gl={{
-        logarithmicDepthBuffer: true,
         outputEncoding: LinearEncoding,
+        powerPreference: "high-performance",
         alpha: false,
-        depth: true,
-        stencil: false,
-        antialias: false
+        depth: false,
+        stencil: false
       }}
       dpr={halfResolution ? [0.5, 0.5] : [1, 1]}
       shadows
@@ -47,7 +45,7 @@ export const Game = () => {
         shadow-radius={10}
         shadow-bias={-0.0001}
       />
-      <fog attach="fog" args={["#987", 50, 100]} />
+      <fog attach="fog" args={["#987", 50, 300]} />
       <PerspectiveCamera position={[0, 10, 50]} makeDefault />
 
       <OrbitControls
@@ -60,12 +58,14 @@ export const Game = () => {
       {/* Scene objects */}
       <Stage>
         <Route path="/:path">
-          <ExampleMatcher />
+          <Suspense>
+            <ExampleMatcher />
+          </Suspense>
         </Route>
       </Stage>
 
       {/* Rendering, ECS, etc. */}
-      <RenderPipeline beautiful={beautiful} />
+      <Rendering />
       <Perf position="bottom-right" />
     </Canvas>
   )

diff --git a/apps/examples/src/RenderPipeline.tsx b/apps/examples/src/RenderPipeline.tsx
diff --git a/apps/examples/src/Rendering.tsx b/apps/examples/src/Rendering.tsx
@@ -0,0 +1,60 @@
+import { useFrame, useThree } from "@react-three/fiber"
+import {
+  AdaptiveLuminancePass,
+  BlendFunction,
+  BloomEffect,
+  EffectComposer,
+  EffectPass,
+  Pass,
+  RenderPass,
+  SelectiveBloomEffect,
+  ToneMappingEffect
+} from "postprocessing"
+import { useEffect, useLayoutEffect, useMemo } from "react"
+import { HalfFloatType } from "three"
+
+const usePass = (
+  composer: EffectComposer,
+  factory: () => Pass,
+  deps: any[] = []
+) => {
+  useLayoutEffect(() => {
+    const pass = factory()
+    composer.addPass(pass)
+    return () => composer.removePass(pass)
+  }, [composer, ...deps])
+}
+
+export const Rendering = () => {
+  const { gl, scene, camera } = useThree()
+
+  const composer = useMemo(
+    () => new EffectComposer(gl, { frameBufferType: HalfFloatType }),
+    []
+  )
+
+  usePass(composer, () => new RenderPass(scene, camera), [scene, camera])
+
+  const bloomEffect = useMemo(() => {
+    const effect = new SelectiveBloomEffect(scene, camera, {
+      blendFunction: BlendFunction.ADD,
+      mipmapBlur: true,
+      luminanceThreshold: 0.7,
+      luminanceSmoothing: 0.3,
+      intensity: 4
+    } as any)
+    effect.inverted = true
+    return effect
+  }, [scene, camera])
+
+  usePass(composer, () => new EffectPass(camera, bloomEffect), [
+    bloomEffect,
+    camera
+  ])
+
+  useFrame(() => {
+    composer.render()
+  }, 1)
+
+  return null
+}
diff --git a/apps/examples/src/Stage.tsx b/apps/examples/src/Stage.tsx
@@ -16,11 +16,19 @@ export const Stage: FC<StageProps> = ({ children, speed = 0, ...props }) => {
   return (
     <group ref={stage} {...props}>
       <group position-y={-8}>
-        <mesh position-y={-0.5} receiveShadow>
+        {/* Floor */}
+        <mesh position-y={-5} rotation-x={-Math.PI / 2}>
+          <planeGeometry args={[1000, 1000]} />
+          <meshBasicMaterial color="#555" />
+        </mesh>
+
+        {/* Upper pedestral */}
+        <mesh position-y={-0} receiveShadow>
           <cylinderGeometry args={[16, 16, 1, 64]} />
           <meshStandardMaterial color="#eee" metalness={0.4} roughness={0.3} />
         </mesh>
 
+        {/* Lower pedestral */}
         <mesh position-y={-3.5} receiveShadow>
           <cylinderGeometry args={[18, 20, 5, 64]} />
           <meshStandardMaterial color="#666" metalness={0.8} roughness={0.4} />

diff --git a/apps/examples/src/examples/DustExample.tsx b/apps/examples/src/examples/DustExample.tsx
@@ -0,0 +1,48 @@
+import { useTexture } from "@react-three/drei"
+import { between, plusMinus, upTo } from "randomish"
+import { AdditiveBlending, DoubleSide, MeshStandardMaterial } from "three"
+import {
+  Emitter,
+  MeshParticles,
+  ParticlesMaterial,
+  Repeat,
+  SpawnSetup,
+  VisualEffect
+} from "three-vfx"
+
+export const DustExample = ({ intensity = 300 }) => {
+  const texture = useTexture("/textures/particle.png")
+
+  return (
+    <VisualEffect>
+      <MeshParticles maxParticles={intensity} safetySize={0}>
+        <planeGeometry />
+
+        <ParticlesMaterial
+          baseMaterial={MeshStandardMaterial}
+          map={texture}
+          color="#aaa"
+          blending={AdditiveBlending}
+          depthTest={true}
+          depthWrite={false}
+          side={DoubleSide}
+        />
+
+        <Emitter
+          count={intensity}
+          setup={(c) => {
+            c.quaternion.random()
+            c.position.set(plusMinus(30), plusMinus(30), plusMinus(30))
+            c.velocity.randomDirection().multiplyScalar(upTo(0.2))
+            c.lifetime = Infinity
+
+            const scale = between(0.1, 0.2)
+            c.scale[0].setScalar(scale)
+            c.scale[1].setScalar(scale)
+            c.alpha = [1, 1]
+          }}
+        />
+      </MeshParticles>
+    </VisualEffect>
+  )
+}