Soft Particles

[hmans]

Summary

This PR adds support for Soft Particles. You can enable soft particle support per material by setting its softness prop to a non-zero value. In order for soft particles to work, the material also needs to passed a depth texture. The implementation in this PR expects the generation of this depth texture in userland; the examples app contains a sample implementation that may, at some point in the future, be integrated into the library itself.

Example

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>
  )
}

There is also a softnessFunction prop that allows the user to override the GLSL code used for determining the fragment softness.

Other things in this PR that somehow ended up in it, ahem:

• Removed the Three.js vanilla post-processing and replaced it with a recent version of postprocessing (it has a cool new bloom effect!
• The particle setup functions are now passed not only the configuration object, but also the index of the spawned particle. (This is currently the index within a single emission burst. It might be changed to something else later, like the index of the particle within the instance buffer. Use with care!)
• Shader module bodies are now automatically scoped, so they can freely create local variables without colliding with other chunks, and are prevented from leaking variables to the main scope.

Checklist

• Add a new shader module that gets injected when soft prop is true
• Make it actually work
• Does the Three shader already provide resolution (so we don't have to pass it in?) - it does not.
• Allow customization of soft particle function
• Only render depth buffer once per frame, not per effect
• Remove Drei dependency and render depth buffer ourselves (instead of useDepthTexture)
• Move the generation of the depth buffer into userland.
• Maybe provide a quick useDepthTexture hook that does the job.
  • feat: provide a good useDepthBuffer to use with soft particles, or document how to use the one from Drei #45
• Double-buffer depth texture
  • bug: WebGL warnings because depth buffer is not double-buffered #43
• Fix depth buffer breakage when viewport is resized
  • bug: Depth buffer gets messed up when viewport is resized #44

[changeset-bot]

🦋 Changeset detected

Latest commit: 54b4c5f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
three-vfx	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
three-vfx	✅ Ready (Inspect)	Visit Preview	Jun 19, 2022 at 11:48AM (UTC)

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 4 hours (more than 100, code: "api-deployments-free-per-day").