A suite of libraries for making game development with Three.js and React not only awesome

Overview

Composer Suite Contributor Covenant

A suite of libraries for making game development with Three.js and React not only awesome, but "so good, it would feel wrong to use anything else." – hmans

Building games with React and Three.js is already pretty cool, but a lot of tooling you need to make those games really nice is still missing. This project tries to fill some of these gaps by providing a collection of libraries for various aspects of game development, from GPU-driven particle systems and VFX, to game UI, editor tooling, camera rigs, audio, multi-device input, and more.

Note While this suite of libraries targets building games with React and React-Three-Fiber, some of them can also be used outside of React, just like some others are not specific to Three.js or React-Three-Fiber. But building games with React is where our hearts are at, which is why you will find most example code in this document to be written in React. 😎

Sponsors ❤️

This project wouldn't be possible without the support from its lovely sponsors. If you'd like to sponsor this project and help make game development with React & Three.js incredible, click here!

Kenneth PirmanCarlo ZottmannJonathan VerrecchiaDave RichardsonTravis ArnoldStefan StübenJorgen Hookhamperplex.ggDarrin MassenaDennis SmolekGianmarcoZdenko KlainChase DavisChris CordlezisuGonzalo Martinese

Packages 📦

Shader Composer
react vanilla three

Shader Composer takes a graph of nodes (here called "units") and compiles it to a working GLSL shader. It provides a library of ready-to-use shader units, but you can, of course, add your own. Parameterized sub-graphs of your shaders can be implemented as plain JavaScript functions.

Mix(v, new Color("white"), NormalizePlusMinusOne(Sin(Time()))), (v) => Add(v, Fresnel()) ) }) ) return ( ) }">
const ShaderComposerExample = () => {
  const shader = useShader(() =>
    ShaderMaterialMaster({
      color: pipe(
        Vec3(new Color("red")),
        (v) => Mix(v, new Color("white"), NormalizePlusMinusOne(Sin(Time()))),
        (v) => Add(v, Fresnel())
      )
    })
  )

  return (
    <mesh>
      <sphereGeometry />
      <shaderMaterial {...shader} />
    </mesh>
  )
}

material-composer-thin
react vanilla three

Material Composer provides a mechanism to hook into Three.js materials and customize their behavior using a sequence of material modules. Modules are higher-level implementations of Shader-based functionality, and implemented using Shader Composer. Material Composer provides a library of these material modules that are easy to extend and customize; but, as always, you can add your own.

)">
const MaterialComposerExample = () => (
  <mesh position-y={1.5} castShadow>
    <sphereGeometry />

    <Composable.MeshStandardMaterial>
      <Modules.Color color="#d62828" />

      <Layer opacity={NormalizePlusMinusOne(Sin(Time()))}>
        <Modules.Color color="#003049" />
      </Layer>

      <Modules.Fresnel intensity={0.2} />
    </Composable.MeshStandardMaterial>
  </mesh>
)

VFX Composer
react vanilla three

TODO

timeline-composer-thin
react

Timeline Composer provides a small, but powerful collection of React components that can be used to orchestrate an animation sequence:

<Lifetime seconds={5}>
  <SmokeRing />
  <Fireball />

  <Delay seconds={0.3}>
    <CameraShake decay />
    <Fireball />

    <Delay seconds={0.2}>
      <Rocks />
      <SmokeCloud />
    </Delay>
  </Delay>
</Lifetime>

Render Composer

react three

A preconfigured, opinionated render pipeline for your React-Three-Fiber games.

TODO

Input Composer

react vanilla

Composable multi-device game input.

TODO

UI Composer

react

Screen-space UI for games and game tooling.

TODO

Camera Composer

react vanilla three

Composable camera automation.

TODO

State Composer

react

Helpers for managing game state.

TODO

Development 🛠

Repository Structure

The repository is structured as a monorepo. You will find all packages that are part of the Composer Suite inside the packages directory, and a collection of applications (examples and otherwise) inside apps.

Most development happens on the dev branch, with the main branches mostly being used for releases.

Core Tenets

All of the libraries in the Composer Suite are aiming for the following:

  • Authored in and for TypeScript.
    All libraries are authored in TypeScript, with first-class type support. This means that you can use these libraries in JavaScript, but you will get the best experience when using TypeScript. If you're using them from within JavaScript, please be aware that these libraries will not make any significant effort to provide runtime type checking or similar.
  • Flawless HMR.
    The libraries should provide a fun and flawless development experience with the best support for hot-module reloading possible. The user should be able to hot-reload their code and see the changes immediately in the browser. Where possible, state should be retained; there must never be errors when hot-reloading.
  • Prefer Declarative over Imperative.
    Where possible, allow the user to declare logic and data using JSX, instead of forcing them out of the declarative JSX layer and towards hooks (or even further into the imperative world.)
  • Usable Individually, and Together.
    Where possible, libraries should be designed so they can be used individually, but also together.

License 👩‍⚖️

Copyright (c) 2022 Hendrik Mans

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Comments
  • export full name math helpers

    export full name math helpers

    I just did a simple rename in VS Code for Div, Mul, and Sub. Would you rather me add additional Divide, Multiply, Subtract exports on top of the existing?

    closes #349

    opened by souporserious 5
  • Full name for composer suite helpers

    Full name for composer suite helpers

    Curious if you would be ok with using the full names for some of the composer suite helpers like Sub, Mul, Div, etc? I was a little confused at first when seeing these in the examples. Happy to help with a PR for this if it sounds good :)

    shader composer 🌈 
    opened by souporserious 5
  • 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.144.0 to 0.146.0

    Bump @types/three from 0.144.0 to 0.146.0

    Bumps @types/three from 0.144.0 to 0.146.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 from 0.145.0 to 0.146.0

    Bump three from 0.145.0 to 0.146.0

    Bumps three from 0.145.0 to 0.146.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 @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
  • Stacking texture modules ignores texture alpha.

    Stacking texture modules ignores texture alpha.

    Having material that takes a grout texture and a brick texture, where brick texture has alpha, so grout texture can be seen through it. Current behaviour ignores multiple textures and just renders alpha as white for the topmost texture.

    Code: Screenshot 2022-11-15 at 14 04 11

    Result (expected to see grout texture through space between bricks): Screenshot 2022-11-15 at 14 04 36

    Grout texture: voeg

    Brick texture: brick

    material composer 🖼 
    opened by micha2it 1
  • Texture module does not take textures 'offset', 'repeat', 'rotation' properties

    Texture module does not take textures 'offset', 'repeat', 'rotation' properties

    I am trying to make a material with 2 textures layered on top of each other. And I also need to change texture transforms, but modifying 'offset', 'repeat', 'rotation' has no efffect. Will this feature be implemented or there is another way to achieve this?

    Screenshot 2022-10-27 at 14 56 45 material composer 🖼 
    opened by micha2it 2
  • Make arithmetic operations n-ary when it makes sense

    Make arithmetic operations n-ary when it makes sense

    eg:

    // now
    Mul(a, Mul(b, Mul(c, Mul(1, 3 )))
    // then 
    Mul(a, b, c, 1, 3 ) // becomes => a * b * c * 1. * 3.
    Add(a, b, c, 1, 3 ) // becomes => a + b + c + 1. + 3.
    
    shader composer 🌈 
    opened by gsimone 4
  • [email protected](Nov 19, 2022)

    Patch Changes

    • f8785d4: Fixed: Texture2D().color and Texture2D().alpha now reuse the sample texture2D call, instead of re-sampling the texture.
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Nov 10, 2022)

  • [email protected](Oct 25, 2022)

  • [email protected](Oct 25, 2022)

  • [email protected](Oct 19, 2022)

  • [email protected](Oct 16, 2022)

  • [email protected](Oct 12, 2022)

    Minor Changes

    • 1ae718d: Major Breaking Change: Everything around particles has received a significant refactor to reduce coupling between the different libraries and prepare for the addition of new particle and VFX types. There is only one user-facing change to the API resulting from this, but it is significant: the way that per-particle attributes (including lifetimes!) are set has changed significantly.

      Instanced particles may make use of instanced attribute buffers. When assembling particle materials with Material Composer and Shader Composer, these can be wrapped using a ParticleAttribute unit. In the past, InstancedParticles would search the material's shader graph for these units and take care of the buffer writing automatically.

      The new API makes the attribute writing more explicit, with the added benefit of decoupling InstancedParticles entirely from Material and Shader Composer.

      When working with ParticleAttribute, you now need to call a write function and pass in a reference to the mesh that you are creating the particle in. In order to make this easier, particle setup callbacks now receive the active mesh as an additional mesh prop in its first argument that you can use.

      Examples

      Setting particle lifetimes within a particle setup callback:

      const lifetime = createParticleLifetime()
      
      /* Before: */
      lifetime.setLifetime(duration, offset)
      
      /* Now: */
      lifetime.write(mesh, duration, offset)
      

      Writing a ParticleAttribute value:

      const speed = new ParticleAttribute(() => 0)
      const velocity = new ParticleAttribute(() => new THREE.Vector3())
      
      /* Before: */
      speed.value = 5
      velocity.value.set(x, y, z)
      
      /* Now: */
      speed.write(mesh, 5)
      velocity.write(mesh, (v) => v.set(x, y, z))
      

      The write method on ParticleAttribute accepts as its second argument either a value, or a function returning a value, and doesn't much care which one you use; the function form is mostly a convenience mechanism to help you save on the number of objects created every frame/emitted particle. The object passed into the function is the same one that is passed into the ParticleAttribute's constructor; in the example above, we're instantiating the velocity attribute with a new THREE.Vector3(); in the write invocation, that very Vector3 instance is passed into the function for you to mutate. This is significantly cheaper than creating a new Vector3 instance for every emitted particle.

      This new API is a little more verbose than the previous version, but it is also more explicit and less error-prone, and decouples the particles engine entirely from Material and Shader Composer, allowing for more flexibility in the future, such as writing to multiple meshes at once, or using non-Shader Composer mechanisms to write into the buffers.

      If you have feedback on this new API, please let me know.

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Oct 12, 2022)

    Minor Changes

    • 1ae718d: Major Breaking Change: Everything around particles has received a significant refactor to reduce coupling between the different libraries and prepare for the addition of new particle and VFX types. There is only one user-facing change to the API resulting from this, but it is significant: the way that per-particle attributes (including lifetimes!) are set has changed significantly.

      Instanced particles may make use of instanced attribute buffers. When assembling particle materials with Material Composer and Shader Composer, these can be wrapped using a ParticleAttribute unit. In the past, InstancedParticles would search the material's shader graph for these units and take care of the buffer writing automatically.

      The new API makes the attribute writing more explicit, with the added benefit of decoupling InstancedParticles entirely from Material and Shader Composer.

      When working with ParticleAttribute, you now need to call a write function and pass in a reference to the mesh that you are creating the particle in. In order to make this easier, particle setup callbacks now receive the active mesh as an additional mesh prop in its first argument that you can use.

      Examples

      Setting particle lifetimes within a particle setup callback:

      const lifetime = createParticleLifetime()
      
      /* Before: */
      lifetime.setLifetime(duration, offset)
      
      /* Now: */
      lifetime.write(mesh, duration, offset)
      

      Writing a ParticleAttribute value:

      const speed = new ParticleAttribute(() => 0)
      const velocity = new ParticleAttribute(() => new THREE.Vector3())
      
      /* Before: */
      speed.value = 5
      velocity.value.set(x, y, z)
      
      /* Now: */
      speed.write(mesh, 5)
      velocity.write(mesh, (v) => v.set(x, y, z))
      

      The write method on ParticleAttribute accepts as its second argument either a value, or a function returning a value, and doesn't much care which one you use; the function form is mostly a convenience mechanism to help you save on the number of objects created every frame/emitted particle. The object passed into the function is the same one that is passed into the ParticleAttribute's constructor; in the example above, we're instantiating the velocity attribute with a new THREE.Vector3(); in the write invocation, that very Vector3 instance is passed into the function for you to mutate. This is significantly cheaper than creating a new Vector3 instance for every emitted particle.

      This new API is a little more verbose than the previous version, but it is also more explicit and less error-prone, and decouples the particles engine entirely from Material and Shader Composer, allowing for more flexibility in the future, such as writing to multiple meshes at once, or using non-Shader Composer mechanisms to write into the buffers.

      If you have feedback on this new API, please let me know.

    Patch Changes

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Oct 12, 2022)

    Patch Changes

    • 1d74dfc: New: <RC.RenderPass> now offers three new props, clearColor, clearDepth and clearStencil, that allow the user to configure which information the built-in clear pass should actually clear when enabled.
    Source code(tar.gz)
    Source code(zip)
  • @hmans/[email protected](Oct 8, 2022)

  • [email protected](Oct 7, 2022)

    Patch Changes

    • 78ceea2: Fixed: When accidentally going past the allocated buffer size for particles, InstancedParticles will now log a detailed error message instead of crashing the entire effect.
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Oct 3, 2022)

    Patch Changes

    • d4df511: New: Shader Composer now provides a GLSLTypeFor<J> utility type that will return the equivalent GLSLType for the specified J JavaScript type.
    Source code(tar.gz)
    Source code(zip)
  • [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)
Owner
Hendrik Mans
THE WIZARD MUST BE STOPPED.
Hendrik Mans
Decentralized-Music-Ownership-System - A decentralized Music Ownership System developed on Truffle Suite and React Bootstrap to allow Music artists to upload their content to the blockchain

Decentralized-Music-Ownership-System - A decentralized Music Ownership System developed on Truffle Suite and React Bootstrap to allow Music artists to upload their content to the blockchain

M. Adil Fayyaz 10 Sep 5, 2022
An example implementation of a top-down 2d game made with React and react-three-fiber

react-three-fiber Game Demo This repo shows an example implementation of a top-down 2d game made with React and react-three-fiber. I used the core fun

Felix Laukel 550 Nov 30, 2022
Lingo3D a web-first 3d game development library with React integration

What is Lingo3D? Lingo3D is a web-first 3d game development library with React integration. Playable Examples github codesandbox github codesandbox gi

null 2.2k Dec 6, 2022
Word-guessing-game - A word guessing game made using React, Typescript, and Tailwind

Word Guessing Game This is a clone project of a popular word guessing game made

null 2.4k Nov 30, 2022
Sudoku Game in React: This game is a logic-based, combinatorial number-placement puzzle.

Sudoku Sudoku is a logic-based, combinatorial number-placement puzzle. Try it here Screenshots 1 2 3 4 Demo Demo Video Contributors Ayan Dhara Grawish

untitled 11 Oct 19, 2022
Star-Wars-Memory-Game - Star Wars Memory Game Using React.js

Star-Wars-Memory-Game Um jogo da memória com tematica do Star Wars. O objetivo e

Lucas Saliba 3 Feb 25, 2022
Memory-test-game - Memory Testing Game Built With React

Memmory Testing Game This game is currently live and hosted on verce , play it h

Ofentse T 2 Feb 22, 2022
Metrics WebApp create making use of React and Redux

This React capstone project (remember what are they?)is about building a mobile web application to check a list of metrics (numeric values) that you will create making use of React and Redux.

Aime Malaika 6 Apr 29, 2022
Assignment of Milestone 11 (Client Side) , Making an Website (Travel Related) using Firebase Authentication, Node, Express, MongoDB , Heroku, React Router, JavaScript (ES6) & React Bootstrap Etc.

Simple Site of 'Travel Related Service' (Holiday Dreams) - Assignment (Milestone - 11) This Repo is for 'Client Side' This Assignment is mainly on Nod

Yasir Monon 2 Aug 27, 2022
A decision making app to help you decide where you should go to on a pub hopping adventure

A react based application designed to simplify the decision making process when out with friends during a pub crawl.

Matt Lawson 1 Jun 3, 2022
Making an online banking website with a easy to use UI.

Making an online banking website with a easy to use UI. Where everyone can an make an account and login where user can deposit money,transfer money from one account to another and even keep thier money in a fixed deposit.

Parth Shirole 5 Sep 10, 2022
This is not the real NETFLIX, its a clone. Built with REACT JS, authenticated and deployed with firebase.

NETFLIX-CLONE This is not the real NETFLIX, its a clone. Built with REACT JS and authenticated with firebase. click here to view the finished page I u

Kevv_in 9 Nov 10, 2022
Sosu is a zero-dependency, ESM-only global state manager for React that tracks keys and intelligently rerenders

sosu Sosu is a zero-dependency, ESM-only global state manager for React that tracks keys and intelligently rerenders Demo Basic usage: import {store}

Alistair Smith 31 Sep 15, 2022
Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

Davide Mandelli 4.7k Nov 28, 2022
Awe-amazing Windows 11 clone. Oh wait, Not for your Computer, but for the web! ⚡

Awe-amazing Windows 11 clone. Oh wait, Not for your Computer, but for the web! ⚡

Piyush Suthar 448 Dec 1, 2022
Read documents like a pro, not spending a minute more

Read documents like a pro, not spending a minute more

Kreation Duwal 1 Feb 10, 2022
You should focus the logics of your app, not DnD

You should focus the logics of your app, not DnD

Thaddeus Jiang 13 Nov 21, 2022
Learn the foundational concepts necessary for building React applications and libraries

React Fundamentals ?? EpicReact.Dev Learn the foundational concepts necessary for building React applications and libraries Learn everything you need

Otacilio Saraiva Maia Neto 4 May 27, 2022
Resturant Management System backend was provided by Client so we did front end using ANT Design, Bootstrap and other Libraries of ReactJs

Resturant Management System backend was provided by Client so we did front end using ANT Design, Bootstrap and other Libraries of ReactJs

Safiullah 20 Sep 17, 2022