vfx - a visual effects library for react-three-fiber

Related tags

Miscellaneous vfx
Overview

vfx Logo

Version Downloads Bundle Size

Warning This library is (extremely!) work-in-progress. Use at your own risk.

Introduction ??

vfx is a visual effects library for react-three-fiber. It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.

Status ⚠️

This library is currently under heavy development, and is most definitely not ready for any sort of production use whatsoever. If you're interested in giving it a try, you are, however, invited to play with any of the example sandboxes listed below!

Help Wanted! 🙏

If you're into visual effects and/or WebGL/Three.js development, this library could benefit from your help. There are a couple of issues and missing features that could use the help (or input) of people much more familiar with these domains than I am -- please refer to the Roadmap for details.

Examples & Demos 🎓

How this Library Works 🥳

This library aims to be a game-ready library for realtime visual effects in react-three-fiber projects.

It has a focus on performance, while still striving to keep the codebase maintainable and easy to reason about. For this reason, there are certain advanced techniques for particle simulations in WebGL2 that it deliberately chooses not to do, including keeping per-particle state in Frame Buffer Objects; this is why certain features, like particle collisions, are currently not possible.

However, it will happily power most of your game VFX, and it will be very fast doing so!

So, a quick list of things you should know about this library:

  • All effects are particle based, using mesh instancing to render any mesh you throw at them. This allows you to have both simple and complex particles, and have them integrated with your scene's lighting, including shadows. (Support for gl.POINTS particles may be added in the future.)
  • Since we're using mesh instancing, each effect uses a single draw call, no matter how many particles it is composed of.
  • Effects scale from a couple of particles to several hundreds of thousands, or even more. (But for realtime VFX, you rarely need that many.)
  • All particles are fully animated on the GPU, through some custom shader code. Your CPU is not concerned with the animations in any manner and will be free to do other stuff.
  • Particle spawning is controlled from your code, though. Spawning new particles is the only thing where the CPU gets involved. Newly spawned particles are configured by writing values into buffer attributes; only the parts of these buffers that represent newly spawned particles are uploaded to the GPU that frame.
  • You can currently animate velocity, acceleration, scale, color and opacity per particle. At the moment, these are hard-coded in the library's custom shader code, and attributes like color or scale that change over time only animate through linear interpolation (ie. they linearly mutate from a start value to an end value), but there are plans to make these shaders (and the buffers that configure them) composable through code, which will also allow the selection of different easing functions and animation curves.

Hacking & Development 🏗

But if you want to give the thing a whirl and do some hacking on it, clone this repository and run:

yarn && yarn examples

Alternatively, you can launch the examples app on StackBlitz, or just view them on Vercel.

Questions? 💬

Find me on Twitter or the Poimandres Discord.

Comments
  • Version Packages

    Version Packages

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    [email protected]

    Minor Changes

    • e3ceedd: New: The shader that runs particle effects has been heavily refactored and modularized, giving you significantly more control over its behavior.

    • eb0c10d: Breaking Change: <ParticlesMaterial> has been renamed to <MeshParticlesMaterial> to reflect the fact that it is supposed to be used together with <MeshParticles>. Among other things, this is also in preparation for potential future support of point particles.

    • 5ed1564: Breaking Change: Due to the complete refactoring of much of the shader code, some of the per-particle defaults have changed:

      • Min and max Alpha now default to 1 (before, particles were configured to fade to 0 over their lifetime)
      • Lifetime duration of new particles now defaults to Infinity (before, the default was 1.)
    • 8aec47f: Breaking Change: The top-level <VisualEffect> component has been removed, as it didn't actually implement any kind of functionality whatsoever.

    • baf11be: New: Soft Particles support! <MeshParticlesMaterial> now has new softness, softnessFunction and depthTexture props.

      export const SoftParticlesExample = () => {
        const depthBuffer = useDepthBuffer()
      
        return (
          <MeshParticles>
            <planeGeometry args={[20, 20]} />
      
            <MeshParticlesMaterial
              baseMaterial={MeshStandardMaterial}
              color="hotpink"
              billboard
              transparent
              depthWrite={false}
              softness={5}
              depthTexture={depthBuffer.depthTexture}
            />
      
            <Emitter
              count={1}
              setup={(c) => {
                c.lifetime = Infinity
              }}
            />
          </MeshParticles>
        )
      }
      

    Patch Changes

    • 4371469: New: <Emitter> now is a full Three.js scene object and can nest children.
    • 4371469: New: <Emitter> now supports an optional continuous flag. If it is set, the emitter will emit particles every frame. This is useful for effects that need to constantly emit new particles, where the use of <Repeat> would be too costly and/or inaccurate.
    • be7aff8: Fixed: The u_time uniform now starts at 0 and accumulates frame delta times, meaning that 1) it can be used to determine the absolute age of the emitter (potentially time-scaled), and 2) its simulation is essentially paused when no delta times accumulate (eg. when the time is scaled to 0, or the browser tab is in the background.)
    opened by github-actions[bot] 4
  • Bump @types/three from 0.143.2 to 0.144.0

    Bump @types/three from 0.143.2 to 0.144.0

    Bumps @types/three from 0.143.2 to 0.144.0.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 3
  • Bump @react-three/drei from 9.24.4 to 9.25.1

    Bump @react-three/drei from 9.24.4 to 9.25.1

    Bumps @react-three/drei from 9.24.4 to 9.25.1.

    Release notes

    Sourced from @​react-three/drei's releases.

    v9.25.1

    9.25.1 (2022-08-30)

    Bug Fixes

    • allow for depth center, fix oncentered (58f76a1)

    v9.25.0

    9.25.0 (2022-08-30)

    Features

    • added onCentered callback in the useLayoutEffect (#1020) (f5f252f)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 3
  • Bump three and @types/three

    Bump three and @types/three

    CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code

    Bumps three and @types/three. These dependencies needed to be updated together. Updates three from 0.141.0 to 0.143.0

    Commits

    Updates @types/three from 0.141.0 to 0.143.0

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 3
  • Bump three from 0.141.0 to 0.143.0

    Bump three from 0.141.0 to 0.143.0

    CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code

    Bumps three from 0.141.0 to 0.143.0.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 3
  • Bump three and @types/three

    Bump three and @types/three

    CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code

    Bumps three and @types/three. These dependencies needed to be updated together. Updates three from 0.141.0 to 0.142.0

    Commits

    Updates @types/three from 0.141.0 to 0.142.0

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 3
  • Bump vite from 2.9.12 to 3.0.3

    Bump vite from 2.9.12 to 3.0.3

    CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code

    Bumps vite from 2.9.12 to 3.0.3.

    Release notes

    Sourced from vite's releases.

    [email protected]

    Please refer to CHANGELOG.md for details.

    Changelog

    Sourced from vite's changelog.

    3.0.3 (2022-07-25)

    3.0.2 (2022-07-18)

    3.0.1 (2022-07-18)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 3
  • Bump @changesets/cli from 2.23.0 to 2.24.1

    Bump @changesets/cli from 2.23.0 to 2.24.1

    CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code

    Bumps @changesets/cli from 2.23.0 to 2.24.1.

    Release notes

    Sourced from @​changesets/cli's releases.

    @​changesets/cli@​2.24.1

    Patch Changes

    • Updated dependencies [f64bc1b]:
      • @​changesets/git@​1.4.1
      • @​changesets/apply-release-plan@​6.0.3
      • @​changesets/read@​0.5.7
      • @​changesets/get-release-plan@​3.0.12

    @​changesets/cli@​2.24.0

    Minor Changes

    • #858 dd9b76f Thanks @​dotansimha! - Added a new config flag for changesets version --snapshot mode: --snapshot-prerelease-template

    • #858 dd9b76f Thanks @​dotansimha! - Added a new config option: snapshot.prereleaseTemplate for customizing the way snapshot release numbers are being composed.

    Patch Changes

    • #858 dd9b76f Thanks @​dotansimha! - A possibility to use the calculated version for snapshot releases is now stable 🥳 All snapshot-related config parameters are now grouped under a single config property called snapshot.

      To migrate, make sure to update your config.json.

      Old usage (still works, but comes with a deprecated warning):

      {
        "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
          "useCalculatedVersionForSnapshots": true
        }
      }
      

      New usage:

      {
        "snapshot": {
          "useCalculatedVersion": true
        }
      }
      
    • Updated dependencies [dd9b76f, dd9b76f, dd9b76f]:

      • @​changesets/config@​2.1.0
      • @​changesets/git@​1.4.0
      • @​changesets/assemble-release-plan@​5.2.0
      • @​changesets/types@​5.1.0
      • @​changesets/apply-release-plan@​6.0.2
      • @​changesets/get-release-plan@​3.0.11

    ... (truncated)

    Commits
    • 382db65 Version Packages (#890)
    • f64bc1b Fixed getCurrentCommitId so that the returned value doesn't contain quotati...
    • e420482 Version Packages (#882)
    • dd9b76f Make snapshot. useCalculatedVersion a stable option and introduce `snapshot...
    • 5af3f2f Version Packages (#873)
    • e174172 Fixed filtering of the ignored packages when adding a changeset (#871)
    • b812293 Version Packages (#845)
    • 84e46d1 Dont't include ignored packages when adding a changeset (#744)
    • 7febb59 Ignore ranges when snapshot versioning is performed (use exact versions) (#857)
    • 2827c7a Fixed the declared JSON schema type for the changelog config option (#854)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 3
  • Bump @changesets/cli from 2.23.0 to 2.23.2

    Bump @changesets/cli from 2.23.0 to 2.23.2

    Bumps @changesets/cli from 2.23.0 to 2.23.2.

    Release notes

    Sourced from @​changesets/cli's releases.

    @​changesets/cli@​2.23.2

    Patch Changes

    @​changesets/cli@​2.23.1

    Patch Changes

    • #843 101b1cb Thanks @​caohuilin! - Fixed the printed filename in the verbose output of changeset status.

    • #857 7febb59 Thanks @​dotansimha! - Fixed an issue with dependency ranges still using pre-existing range modifiers instead of fixed package versions when performing a snapshot release. This ensures that installs of snapshot versions are always reproducible.

    • #744 84e46d1 Thanks @​mskelton! - Ignored packages are no longer listed when adding a changeset.

    • Updated dependencies [2827c7a, 7b1c0c1, 7febb59]:

      • @​changesets/config@​2.0.1
      • @​changesets/apply-release-plan@​6.0.1
      • @​changesets/get-release-plan@​3.0.10
    Commits
    • 5af3f2f Version Packages (#873)
    • e174172 Fixed filtering of the ignored packages when adding a changeset (#871)
    • b812293 Version Packages (#845)
    • 84e46d1 Dont't include ignored packages when adding a changeset (#744)
    • 7febb59 Ignore ranges when snapshot versioning is performed (use exact versions) (#857)
    • 2827c7a Fixed the declared JSON schema type for the changelog config option (#854)
    • 7b1c0c1 Fixed the declared JSON schema type for the commit config option (#852)
    • 34a9210 Fixed a changelog example path in the docs (#851)
    • 101b1cb Fixed the printed filename in the verbose output of changeset status (#843)
    • bb7690e Add SvelteKit to the list of projects using Changesets (#685)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 3
  • Bump @preconstruct/cli from 2.1.5 to 2.2.1

    Bump @preconstruct/cli from 2.1.5 to 2.2.1

    Bumps @preconstruct/cli from 2.1.5 to 2.2.1.

    Release notes

    Sourced from @​preconstruct/cli's releases.

    @​preconstruct/cli@​2.2.1

    Patch Changes

    • #476 3930466 Thanks @​mitchellhamilton! - Using node: to import Node builtins no longer triggers a "package is not specified in dependencies or peerDependencies" error

    • #481 76f0163 Thanks @​efoken! - Updated @rollup/plugin-node-resolve to ^11.2.1 in order to make direct imports resolveable, e.g. packages that use exports in their package.json

    @​preconstruct/cli@​2.2.0

    Minor Changes

    @​preconstruct/cli@​2.1.8

    Patch Changes

    @​preconstruct/cli@​2.1.7

    Patch Changes

    • 3f202fd Thanks @​mitchellhamilton! - Imports to @babel/runtime/helpers/esm/* will now be rewritten to @babel/runtime/helpers/* for CommonJS outputs. This fixes the CommonJS output in case you have ["@babel/plugin-transform-runtime", { "useESModules": true }]) in your Babel config.

    @​preconstruct/cli@​2.1.6

    Patch Changes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 3
  • Bump vite from 2.9.12 to 3.0.2

    Bump vite from 2.9.12 to 3.0.2

    Bumps vite from 2.9.12 to 3.0.2.

    Release notes

    Sourced from vite's releases.

    [email protected]

    Please refer to CHANGELOG.md for details.

    Changelog

    Sourced from vite's changelog.

    3.0.2 (2022-07-18)

    3.0.1 (2022-07-18)

    3.0.0 (2022-07-13)

    Main Changes

    Vite 3 is out! Read the Vite 3 Annoucement blog post

    • New docs theme using VitePress v1 alpha: https://vitejs.dev
    • Vite CLI
      • The default dev server port is now 5173, with the preview server starting at 4173.
      • The default dev server host is now localhost instead of 127.0.0.1.
    • Compatibility
      • Vite no longer supports Node v12, which reached its EOL. Node 14.18+ is now required.
      • Vite is now published as ESM, with a CJS proxy to the ESM entry for compatibility.
      • The Modern Browser Baseline now targets browsers which support the native ES Modules and native ESM dynamic import and import.meta.
      • JS file extensions in SSR and lib mode now use a valid extension (js, mjs, or cjs) for output JS entries and chunks based on their format and the package type.
    • Architecture changes
      • Vite now avoids full reload during cold start when imports are injected by plugins in while crawling the initial statically imported modules (#8869).

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 3
  • VFX Composer: Instance/Particle Attributes Refactor

    VFX Composer: Instance/Particle Attributes Refactor

    Goals:

    • [x] Refactor how InstancedParticles interacts with buffer attributes. There is too much coupling between that class and Material/Shader Composer. Ideally, the class would not know or care that its material is driven by the composers, and just focus on the uploading of newly emitted particles.
    • [ ] Refactor ParticlesAttribute into something more general-purpose. They're really instance attribute buffers, so maybe they should reflect that fact, and be promoted into Shader Composer.
    • [ ] Decide whether Shader Composer should know about the concern of "setting up meshes/geometries" (eg. creating attributes for all the attribute units in the shader graph), or if this should remain in user land, as it is now.
    opened by hmans 2
  • Add `Mouse` uniform unit

    Add `Mouse` uniform unit

    Summary

    A vec4 uniform unit that holds information about the mouse state.

    • x and y contain the absolute screen position of the mouse cursor. (The user can choose to normalize these by dividing through the values provided through Resolution.)
    • z is 1.0 when the primary button is down.
    • w is 1.0 for a single frame when the primary button was clicked.

    Questions/request for feedback:

    • Sometimes shader may be interested in more input state than just the primary mouse button. We could model this unit here to only hold the mouse position, and put input state into separate uniforms, starting with a MouseButton uniform that provides the latter two values listed above.
    shader composer 🌈 
    opened by hmans 0
  • Controlled particles: automatic frustum culling?

    Controlled particles: automatic frustum culling?

    When you have a controller particles effect with lots and lots of particles spread across the world, it could be fun to automatically cull these -- ie. from the many many asteroids we already have, only upload those to the instance matrix that are in view, and cap InstancedParticles.count to the number of instances rendered.

    (Not sure if this really yields any performance benefit. Asteroids could just as well be separate instancedmeshes, and we'll let Three's own culling do its thing?)

    vfx composer 🎇 
    opened by hmans 0
  • Entity Composer: Notes & Ideas

    Entity Composer: Notes & Ideas

    Summary

    Entity Composer is primarily meant to be a new React and R3F layer for Miniplex, but it might also be a good opportunity to try some new ideas around user-friendly ECS for games. Like:

    • Renaming "archetypes" to "indices" (ease of use: it's a more familiar term).
    • Centering indices around functions and not component names, ie. world.createIndex(fun), where the function accepts an entity and returns true or false. (flexibility: this might allow for some interesting composition patterns, and allow entities to be indexed by component value and not just presence.)
    • Making the world and its entities a little bit more store-like, where addComponent is replaced with a simple update or set function that updates the entity with a similar API to what the user may know from stores like Zustand or Statery, and remove the bits that previously shouted at the user for trying to add a component that already existed on the entity (ease of use: more familiar to the store paradigm)
    • Finding some possible patterns for making individual entities reactive (maybe not needed, since entities can in fact be reactive stores, but who knows!)

    If we find something cool here, we could extract/backport it into Miniplex for a future major version, or let it be its own thing if it's just too different.

    Store-like usage sketch

    Faux code:

    /* Define functions we will use for indexing */
    const hasHealth = (e) => e.health !== undefined
    const almostDead = (e) => hasHealth(e) && e.health < 10
    
    /* Pass the function into index. Passing the same function (by object identity) will return
    the same index! */
    const almostDeadIndex = world.index(almostDead)
    
    const entity = world.createEntity({ health: 100 })
    
    /* Update entities like a store, which will make sure they are reindexed: */
    world.update(entity, (e) => ({ health: e.health - 25 }))
    
    /* Or just mutate them directly, which will still get them reindexed: */
    world.update(entity, (e) => { e.health -= 25 })
    
    /* If you mutate them outside of `update`, you can reindex them explicitly
    by calling `update` without a second argument: */
    entity.health -= 25
    world.update(entity)
    
    entity composer 🚀 
    opened by hmans 0
  • New and improved Material Composer JSX API

    New and improved Material Composer JSX API

    The current API

    At the moment, to use material composer from within React, you have to

    1. created a patched material through the composable proxy, ie. <composable.meshStandardMaterial>
    2. fill it with material modules that all live on the modules proxy, ie. <modules.Rotation>, <modules.Alpha> etc.

    This works, but isn't a lot of fun. The primary issues with it are:

    • It's pretty verbose
    • You can't import individual modules; you always have to import the entire proxy
    • The proxy is probably bad for tree shaking
    • There's a weird disconnect where the Layer module currently doesn't live on the proxy, but actually needs to be imported explicitly
    • When starting to type <modu, VS Code won't auto-suggest an import of the modules constant (probably because it thinks you're typing out a native element.)

    The last point could be mitigated by changing these exports to PascalCase, ie. <Composable.MeshStandardMaterial> and <Modules.Color>, but maybe we can find a simpler, nicer, more fun API.

    A potential new API

    Since we'll always hook into some sort of material, maybe we can make use of the nested nature of JSX and go for the following:

    {/* The normal R3F material JSX */}
    <meshStandardMaterial transparent>
      {/* but it has children! */}
      <MaterialModules>
        {/* We directly import modules */}
        <Color color="hotpink" />
        <Alpha alpha={0.5} />
        <SurfaceWobble intensity={5} />
      </MaterialModules>
    </meshStandardMaterial>
    

    For this, the following changes would need to be made:

    • We would need to remove the proxies and let the user import the React components representing the library of MC modules directly (which would also mean we would need to explicitly add them to the code and maintain them.)
      • As a workaround, instead of exporting per-module React components, maybe having a generic <Module> would be enough, eg. <Module module={Color} color="hotpink" />?
    • We would need to implement the <MaterialModules> component and find a way for it to modify its parent material element's onBeforeCompile function. The main issue here being that currently, it's not possible for a component to access its "parent" element (the material, in this case.) Maybe this will become possible in a future version of R3F.
    material composer 🖼 
    opened by hmans 0
  • [email protected](Oct 2, 2022)

    Patch Changes

    • b318f26: New: RenderComposer.Canvas now offers an optional strict prop that, when set to true, will enable React's Strict Mode for its children. This is to counter the fact that a <StrictMode> declared outside of a React-Three-Fiber Canvas will not automatically apply to it (since it's rendered using an entirely separate React renderer.)
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Oct 1, 2022)

    Patch Changes

    • ee1bed4: Fixed: A recent change caused non-instanced buffer attributes to also be subjected to the smart upload batching mechanism of InstancedParticles. This has been fixed.
    • Updated dependencies [0dee294]
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Oct 1, 2022)

    Patch Changes

    • 0dee294: Improved: Added frequency prop to SurfaceWobble module. Please note that this module is still very much WIP and will likely change significantly in future releases.
    Source code(tar.gz)
    Source code(zip)
  • @hmans/[email protected](Oct 1, 2022)

  • [email protected](Sep 28, 2022)

    Minor Changes

    • 8519e17: Mega Breaking Change: Particles and <Particles> have been renamed to InstancedParticles and <InstancedParticles>, respectively. Functionality remains the same. This is to prepare the library for additional future particle types (like PointParticles).
    • e699129: Breaking Change: createParticleUnits has been renamed to createParticleLifetime, and the useParticles hook has been renamed to useParticleLifetime. Both of these will now wrap their own lifetime attributes and return an API for setting the lifetime of newly spawned particles as well as using it in shaders and VFX modules. Please refer to the examples for details.

    Patch Changes

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Sep 28, 2022)

    Minor Changes

    • 8519e17: Mega Breaking Change: Particles and <Particles> have been renamed to InstancedParticles and <InstancedParticles>, respectively. Functionality remains the same. This is to prepare the library for additional future particle types (like PointParticles).
    • e699129: Breaking Change: createParticleUnits has been renamed to createParticleLifetime, and the useParticles hook has been renamed to useParticleLifetime. Both of these will now wrap their own lifetime attributes and return an API for setting the lifetime of newly spawned particles as well as using it in shaders and VFX modules. Please refer to the examples for details.
    • 18fe663: Breaking Change: The makeParticles API has been removed. You were probably not using it. If you were, I'm sorry, because it was largely broken, and a bad idea.

    Patch Changes

    • 18853ba: Fixed: Emitters will now clamp their deltaTime to 100ms max in order to not spam the scene with lots of particles after the user returns to a background-suspended tab.
    • Updated dependencies [d3e2b88]
    • Updated dependencies [a09a755]
    • Updated dependencies [a962a31]
    • Updated dependencies [8519e17]
    • Updated dependencies [e699129]
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Sep 28, 2022)

    Patch Changes

    • a962a31: New: enabledDebugging() and disableDebugging() to toggle some extra console output when new shaders are being compiled.
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Sep 28, 2022)

    Patch Changes

    • d3e2b88: New: shader-composer-r3f now provides its own mechanism for patching Three.js materials through its new ShaderMaster master unit and <Shader> React component:

      function MyShadedThingy() {
        const shader = useShader(() => {
          return ShaderMaster({
            color: /* ... */
            position: /* ... */
            /* etc. */
          })
        }, [])
      
        return (
          <mesh>
            <boxGeometry />
      
            <meshStandardMaterial>
              <Shader {...shader} />
            </meshStandardMaterial>
          </mesh>
        )
      }
      
    • Updated dependencies [a962a31]

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Sep 28, 2022)

  • [email protected](Sep 28, 2022)

  • @material-composer/[email protected](Sep 28, 2022)

  • [email protected](Sep 26, 2022)

    Patch Changes

    • bb7e585: Fixed: Minor performance tweaks around controlled particles.
    • 8376e3e: Fixed: When a controlled particle is unmounted, it will now automatically mark the particle system's instance matrix for reupload (fixing a bug where the last controller particle would never disappear because nobody would trigger matrix uploads anymore. Woops!)
    Source code(tar.gz)
    Source code(zip)
  • @hmans/[email protected](Sep 26, 2022)

    Patch Changes

    • 8d95fbe: New: Added density prop on collider.
    • fac8ca5: Fixed: Sleeping physics bodies now don't update their scene objects' transforms.
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Sep 25, 2022)

  • [email protected](Sep 24, 2022)

    Patch Changes

    • e0a1c00: Refactored the <Particles> component to bring it closer to idiomatic React.
    • 7dadce0: Added a first version of <Particle>, a scene-graph component that controls a single particle from the CPU.
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Sep 24, 2022)

    Patch Changes

    • fa84333: The library now exports the usePostProcessingEffect hook that can be used to create custom postprocessing effects (see the LensDirtEffect implementation for an example.) This will eventually be replaced with a different API, so please go light on it. :)
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Sep 22, 2022)

  • [email protected](Sep 21, 2022)

    Patch Changes

    • 473407f: composable.* and modules.* have been renamed to Composable.* and Modules.*, respectively. This was done to improve integration into tooling like VS Code, which can now recognize these as impostable constants.

      The lower-case versions of these objects are still being exported in order to not immediately break existing code, but will be removed in a future version.

    • Updated dependencies [473407f]

    • Updated dependencies [473407f]

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Sep 21, 2022)

  • @material-composer/[email protected](Sep 21, 2022)

    Patch Changes

    • 473407f: Patched.* now exposes both lower and upper case versions of the materials, so Patched.meshStandardMaterial will work just as well as Patched.MeshStandardMaterial. Note: the lower-case version should be considered deprecated, and will likely be removed in a future update.
    • 473407f: patched is now also exported as Patched, improving certain tooling integration (like VS Code recognizing the keyboard as something it should import from this package.)
    Source code(tar.gz)
    Source code(zip)
  • @material-composer/[email protected](Sep 21, 2022)

    Patch Changes

    • ac6a9e6: When patching a material, it is now marked as dirty (material.needsUpdate = true) to make sure it gets recompiled.
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Sep 17, 2022)

  • [email protected](Sep 17, 2022)

  • [email protected](Sep 17, 2022)

  • [email protected](Sep 16, 2022)

  • [email protected](Sep 16, 2022)

    Minor Changes

    • 2a56a89: Render Composer was completely rewritten from scratch. It now comes with its own JSX configuration layer for the postprocessing library, with <RenderPipeline> using that to construct its render passes. Because it's now much easier to declaratively add post-processing effects, <RenderPipeline> no longer sets them up by default. Instead, you can now add them as you see fit:

      import * as RC from "render-composer"
      
      function App() {
        return (
          <RC.Canvas>
            <RC.RenderPipeline>
              <RC.EffectPass>
                <RC.SMAAEffect />
                <RC.SelectiveBloomEffect intensity={5} />
                <RC.VignetteEffect />
              </RC.EffectPass>
      
              {/* ...normal R3F stuff here. */}
            </RC.RenderPipeline>
          </RC.Canvas>
        )
      }
      
    • 2a56a89: The <RenderCanvas> component now has been renamed to just <Canvas>.

    • 2a56a89: The buffer containing the first render pass' color information is now returned by useRenderPipeline as color, not scene.

    Patch Changes

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Sep 16, 2022)

  • [email protected](Sep 16, 2022)

  • @hmans/[email protected](Sep 16, 2022)

    Patch Changes

    • 2a56a89: The mutable list API now also contains a useItem hook that makes adding something to the list much more convenient.
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Sep 14, 2022)

Owner
Hendrik Mans
THE WIZARD MUST BE STOPPED.
Hendrik Mans
The VFX UI using react, typescript and UI Component material-ui

The VFX UI using react, typescript and UI Component material-ui

DVN 2 Sep 18, 2022
A small 3D game built with react-three-fiber

Avoid the cubes while the speed progressively increases! Can you beat the rainbow level? The game is inspired by an old flash game I used to play in t

Adam Karlsten 172 Sep 25, 2022
Our SDK for the 3D rendering platform React-Three-Fiber.

Zappar for React Three Fiber This library allows you use Zappar's best-in-class AR technology with content built using the 3D rendering platform React

Zappar 29 Sep 19, 2022
Small React three fiber multiplayer template

R3F.Multiplayer React three fiber, socket.io boilerplate multiplayer server and client ?? Getting started Getting started To quickly get started Clone

Or Fleisher 74 Sep 27, 2022
📬 postprocessing for react-three-fiber

react-postprocessing react-postprocessing is a postprocessing wrapper for @react-three/fiber. This is not (yet) meant for complex orchestration of eff

Poimandres 667 Sep 30, 2022
In-browser lightmap/AO baker for react-three-fiber and ThreeJS

react-three-lightmap In-browser lightmap and ambient occlusion (AO map) baker for react-three-fiber and ThreeJS. Live editable sandbox. Local Developm

Poimandres 92 Sep 24, 2022
R3f-homunculus - Ripple Effect and Distortion Effect using React Three Fiber

About このアプリケーションは、React Three Fiberを使用したPost-processingの学習結果として作成したものです。 Post-pr

null 9 Aug 19, 2022
React Three Fiber FPS control for mobile and desktop

React Three Fiber FPS control for mobile and desktop

Antony Budianto 21 Jul 13, 2022
React-three-ts-bp - [TS] Stable version for React-Three + Spring & Tailwind bp

React-three-ts-bp - [TS] Stable version for React-Three + Spring & Tailwind bp

Dale B. 2 Jan 3, 2022
An algebraic effects library for javascript and typescript using generators

Algebraify Algebraic Effects Are Here! (sort of) (If you're unfamiliar with algebraic effects, here's a great article: Algebraic Effects for the Rest

Jackie Edwards 72 Sep 19, 2022
The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.

The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State. Table of Contents Articles Featu

Sergey 87 Sep 13, 2022
This project features basic simulations that show the effects of social distancing

This project features basic simulations that show the effects of social distancing

Veselin Stoyanov 2 Feb 1, 2022
Entire React code base explanation by visual block schemes (Stack version)

Under the hood: React This repository contains an explanation of inner work of React. In fact, I was debugging through the entire code base and put al

Bohdan Liashenko 5.1k Sep 27, 2022
A superset of JavaScript which gives you static types and powerful tooling in Visual Studio Code

TypeScript Example npx create-react-native-app -t with-typescript TypeScript is a superset of JavaScript which gives you static types and powerful too

Michael Czuba 1 Aug 20, 2022
A description of React's new core algorithm, React Fiber

React Fiber Architecture Introduction React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of

Andrew Clark 9.7k Oct 5, 2022
React Fiber Tree Visualizer & Performance Metric Tool

HiFiber is a React Fiber tree visualization tool that provides a dynamic representation of the Fiber tree as it loads and updates on your browser’s page. Working with pages built in React 16+, it maps out the application structure and will also measure performance metrics – including Fiber node start time, duration, rerender time/count, and various other useful Fiber properties.

OSLabs Beta 44 Sep 9, 2022
A React component for viewing an STL object from a given URL by utilizing Three.js

React STL Viewer New maintainer needed. A React component for viewing an STL object from a given URL by utilizing Three.js Looking for contributors Se

Generate Impact 133 Aug 28, 2022
An example project integrating React with three.js

React with three.js example See the demo Created in response to this question on Stack Overflow.

Will Bamford 28 Sep 9, 2022
Gamedex built with React.js and Three.js

?? Gamedex Hello world! My internet name is Suboptimal and I am an Indian software engineer. Gamedex is the repo where I keep track of my game dev + c

Suboptimal Engineer 171 Sep 12, 2022