VFX Composer (formerly known as three-vfx, or 3VFX) is a visual effects library for Three.js and react-three-fiber

Overview

VFX Composer

Version Downloads Bundle Size

Warning

This library is (extremely!) work-in-progress; meaning that it is not done, or ready for use in any other capacity. Please don't use this and assume that anything will work; it probably won't. And when you find something that does work, be ready for it to break in the next release. Please don't open Issues or PRs for things that are broken; I am most likely aware of them. Use this library at your own risk.

If you're interested in using this library and want to keep up to date, please follow me on Twitter, and/or click the Watch button for this repository.

Introduction 👋

VFX Composer (formerly known as three-vfx, or 3VFX) is a visual effects library for Three.js and 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!

Examples & Demos 🎓

Where is the Documentation?

I'm afraid there's currently no documentation available outside of the sandboxes linked to above. As much as I would like to provide documentation, the library is still too much in flux, with breaking changes landing on main on almost a daily basis. There will be extensiv documentation as soon as things start to settle down -- until then, if you want to play around with the library, please feel free to use/fork one of the available sandboxes.

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.

Resources

A couple of links to (possibly free) resources that will help you build cool visual effects.

Questions? 💬

Find me on Twitter or the Poimandres Discord.

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
  • Simplify `compileShader` return value signature

    Simplify `compileShader` return value signature

    So far, compileShader returns a tuple with two objects:

    const [shader, meta] = compileShader(...)
    

    The shader object contains the typical properties expected by Three.js shader materials and related helpers (vertexShader, fragmentShader, uniforms).

    The meta object contains additional properties like update (the per-frame callback).

    This structure was chosen so you could easily plug the shader object into your favorite shader material helper in Three.js or R3F, without having to explicitly destructure it yourself.

    But now that Shader Composer is no longer tightly coupled to Three.js, we have an opportunity to simplify the structure of the return value into a single object containing all properties:

    const shader = compileShader(...)
    

    Would this be a good idea? Who knows!

    • ✅ It would make the API less confusing
    • ⛔ Using SC in Three.js would be slightly more work for the user
      • On the other hand, the newly introduced @shader-composer/three package could provide a helper function that forms the returned object into something that can be spread into the relevant helpers like we're used to
    • ⛔ We currently don't know what using Shader Composer in other frameworks (eg. PlayCanvas) will look like, so it might be too early to make this change
    shader composer 🌈 
    opened by hmans 0
  • [Changesets] Pending Releases

    [Changesets] Pending Releases

    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

    @material-composer/[email protected]

    Minor Changes

    • 4f9903d: Breaking Change: PatchedMaterialMaster has been renamed to PatchedMaterialRoot.

    Patch Changes

    • d504e35: Upgraded to the new version of Shader Composer.

    [email protected]

    Minor Changes

    • a3356db: Breaking Change: RenderPipeline has been renamed to DefaultRenderPipeline.

    Patch Changes

    • d504e35: Upgraded to the new version of Shader Composer.
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [4f9903d]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]

    [email protected]

    Minor Changes

    • d504e35: Breaking: The casting helpers (eg. $vec3(), $mat3() etc.) have been renamed to vec3(), mat3() etc., and have had their signature changed. Where the old implementations were able to take any number of arguments, the new helpers will only ever take a single argument. (If you want to cast multiple arguments, you can pass an array.)

      /* Before: */
      $vec3(1, 2, 3)
      
      /* After: */
      vec3([1, 2, 3])
      
    • d504e35: Breaking: Shader Composer has received a new package structure! Its code is now spread across multiple smaller packages scoped within the @shader-composer/* organization, with the main shader-composer package acting as an umbrella package.

      The user can now choose between either picking the scoped packages they need, or just using the umbrella package, which provides additional entrypoints for specific frameworks and libraries.

      Example for working with individual scoped packages:

      import { compileShader } from "@shader-composer/core"
      import { PSRDNoise3D } from "@shader-composer/noise"
      import setupThree from "@shader-composer/three"
      import { PostProcessingEffectRoot } from "@shader-composer/postprocessing"
      
      setupThree()
      

      For convenience, you can also use the shader-composer umbrella package. It directly exports most of the functions and units you'll need for building shaders, and provides additional entrypoints for framework-specific functionality:

      import { compileShader, PSRDNoise3D } from "shader-composer"
      import setupThree from "shader-composer/three"
      import { PostProcessingEffectRoot } from "shader-composer/postprocessing"
      
      setupThree()
      
    • d504e35: Breaking: The core Shader Composer package @shader-composer/core no longer requires Three.js as a peer dependency, and is now ready to be used together with other frameworks (or directly with WebGL.)

      Since some of the units provided within the standard library require framework-specific code to operate (like CameraFar, CameraNear, Resolution etc.), glue code needs to be created to use Shader Composer with other frameworks.

      The Three.js glue code lives in the @shader-composer/three package.

      TODO: example for usage

    • d504e35: New: Arrays of specific lengths are now automatically casts to vectors and matrices; an array with 2 elements will be rendered as a vec2, an array with 3 elements will be rendered as a vec3, and so on.

      /* Before, and this still works: */
      ScaleAndOffset(value, Vec2([0.5, 0.5]), Vec2([0.5, 0.5]))
      
      /* But now this is also possible: */
      ScaleAndOffset(value, [0.5, 0.5], [0.5, 0.5])
      

      If you want to cast an array to a specific type, you can use the vec2(), vec3() etc. helpers:

      ScaleAndOffset(value, vec2([0.5, 0.5]), vec2([0.5, 0.5]))
      

      Or wrap them in full units, like above.

    • d504e35: Removed Three-specific bits from UpdateCallback

    Patch Changes

    @shader-composer/[email protected]

    Minor Changes

    • d504e35: Breaking: The casting helpers (eg. $vec3(), $mat3() etc.) have been renamed to vec3(), mat3() etc., and have had their signature changed. Where the old implementations were able to take any number of arguments, the new helpers will only ever take a single argument. (If you want to cast multiple arguments, you can pass an array.)

      /* Before: */
      $vec3(1, 2, 3)
      
      /* After: */
      vec3([1, 2, 3])
      
    • d504e35: Breaking: Shader Composer has received a new package structure! Its code is now spread across multiple smaller packages scoped within the @shader-composer/* organization, with the main shader-composer package acting as an umbrella package.

      The user can now choose between either picking the scoped packages they need, or just using the umbrella package, which provides additional entrypoints for specific frameworks and libraries.

      Example for working with individual scoped packages:

      import { compileShader } from "@shader-composer/core"
      import { PSRDNoise3D } from "@shader-composer/noise"
      import setupThree from "@shader-composer/three"
      import { PostProcessingEffectRoot } from "@shader-composer/postprocessing"
      
      setupThree()
      

      For convenience, you can also use the shader-composer umbrella package. It directly exports most of the functions and units you'll need for building shaders, and provides additional entrypoints for framework-specific functionality:

      import { compileShader, PSRDNoise3D } from "shader-composer"
      import setupThree from "shader-composer/three"
      import { PostProcessingEffectRoot } from "shader-composer/postprocessing"
      
      setupThree()
      
    • 4f9903d: Breaking Change: ShaderMaterialMaster and CustomShaderMaterialMaster have been renamed to ShaderMaterialRoot and CustomShaderMaterialRoot.

    • 1e313b5: Added two new units: FrameTime and FrameCount.

      FrameTime is a unit that represents the time in seconds since the application started. Most importantly, this value is guaranteed to be stable across the duration of a frame, so it's perfect for synchronizing multiple shaders.

      FrameCount provides an integer counter of the number of frames rendered since the start of the application. This, too, is great for synchronizing shaders, and might be better for when you need an auto-increasing integer value instead of a floating point time value.

      If you need these values in your JavaScript update callbacks, you can import the new frame object and access its time and count properties.

    • d504e35: Breaking: The core Shader Composer package @shader-composer/core no longer requires Three.js as a peer dependency, and is now ready to be used together with other frameworks (or directly with WebGL.)

      Since some of the units provided within the standard library require framework-specific code to operate (like CameraFar, CameraNear, Resolution etc.), glue code needs to be created to use Shader Composer with other frameworks.

      The Three.js glue code lives in the @shader-composer/three package.

      TODO: example for usage

    • d504e35: New: Arrays of specific lengths are now automatically casts to vectors and matrices; an array with 2 elements will be rendered as a vec2, an array with 3 elements will be rendered as a vec3, and so on.

      /* Before, and this still works: */
      ScaleAndOffset(value, Vec2([0.5, 0.5]), Vec2([0.5, 0.5]))
      
      /* But now this is also possible: */
      ScaleAndOffset(value, [0.5, 0.5], [0.5, 0.5])
      

      If you want to cast an array to a specific type, you can use the vec2(), vec3() etc. helpers:

      ScaleAndOffset(value, vec2([0.5, 0.5]), vec2([0.5, 0.5]))
      

      Or wrap them in full units, like above.

    @shader-composer/[email protected]

    Minor Changes

    • d504e35: Breaking: Shader Composer has received a new package structure! Its code is now spread across multiple smaller packages scoped within the @shader-composer/* organization, with the main shader-composer package acting as an umbrella package.

      The user can now choose between either picking the scoped packages they need, or just using the umbrella package, which provides additional entrypoints for specific frameworks and libraries.

      Example for working with individual scoped packages:

      import { compileShader } from "@shader-composer/core"
      import { PSRDNoise3D } from "@shader-composer/noise"
      import setupThree from "@shader-composer/three"
      import { PostProcessingEffectRoot } from "@shader-composer/postprocessing"
      
      setupThree()
      

      For convenience, you can also use the shader-composer umbrella package. It directly exports most of the functions and units you'll need for building shaders, and provides additional entrypoints for framework-specific functionality:

      import { compileShader, PSRDNoise3D } from "shader-composer"
      import setupThree from "shader-composer/three"
      import { PostProcessingEffectRoot } from "shader-composer/postprocessing"
      
      setupThree()
      

    @shader-composer/[email protected]

    Minor Changes

    • d504e35: Breaking: Shader Composer has received a new package structure! Its code is now spread across multiple smaller packages scoped within the @shader-composer/* organization, with the main shader-composer package acting as an umbrella package.

      The user can now choose between either picking the scoped packages they need, or just using the umbrella package, which provides additional entrypoints for specific frameworks and libraries.

      Example for working with individual scoped packages:

      import { compileShader } from "@shader-composer/core"
      import { PSRDNoise3D } from "@shader-composer/noise"
      import setupThree from "@shader-composer/three"
      import { PostProcessingEffectRoot } from "@shader-composer/postprocessing"
      
      setupThree()
      

      For convenience, you can also use the shader-composer umbrella package. It directly exports most of the functions and units you'll need for building shaders, and provides additional entrypoints for framework-specific functionality:

      import { compileShader, PSRDNoise3D } from "shader-composer"
      import setupThree from "shader-composer/three"
      import { PostProcessingEffectRoot } from "shader-composer/postprocessing"
      
      setupThree()
      
    • 4f9903d: Breaking Change: PostProcessingEffectMaster has been renamed to PostProcessingEffectRoot.

    @shader-composer/[email protected]

    Minor Changes

    • d504e35: Breaking: Shader Composer has received a new package structure! Its code is now spread across multiple smaller packages scoped within the @shader-composer/* organization, with the main shader-composer package acting as an umbrella package.

      The user can now choose between either picking the scoped packages they need, or just using the umbrella package, which provides additional entrypoints for specific frameworks and libraries.

      Example for working with individual scoped packages:

      import { compileShader } from "@shader-composer/core"
      import { PSRDNoise3D } from "@shader-composer/noise"
      import setupThree from "@shader-composer/three"
      import { PostProcessingEffectRoot } from "@shader-composer/postprocessing"
      
      setupThree()
      

      For convenience, you can also use the shader-composer umbrella package. It directly exports most of the functions and units you'll need for building shaders, and provides additional entrypoints for framework-specific functionality:

      import { compileShader, PSRDNoise3D } from "shader-composer"
      import setupThree from "shader-composer/three"
      import { PostProcessingEffectRoot } from "shader-composer/postprocessing"
      
      setupThree()
      
    • d504e35: Breaking: The core Shader Composer package @shader-composer/core no longer requires Three.js as a peer dependency, and is now ready to be used together with other frameworks (or directly with WebGL.)

      Since some of the units provided within the standard library require framework-specific code to operate (like CameraFar, CameraNear, Resolution etc.), glue code needs to be created to use Shader Composer with other frameworks.

      The Three.js glue code lives in the @shader-composer/three package.

      TODO: example for usage

    • 4f9903d: Breaking Change: ShaderMaster has been renamed to ShaderRoot.

    Patch Changes

    • Updated dependencies [4f9903d]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]

    @shader-composer/[email protected]

    Minor Changes

    • d504e35: Breaking: Shader Composer has received a new package structure! Its code is now spread across multiple smaller packages scoped within the @shader-composer/* organization, with the main shader-composer package acting as an umbrella package.

      The user can now choose between either picking the scoped packages they need, or just using the umbrella package, which provides additional entrypoints for specific frameworks and libraries.

      Example for working with individual scoped packages:

      import { compileShader } from "@shader-composer/core"
      import { PSRDNoise3D } from "@shader-composer/noise"
      import setupThree from "@shader-composer/three"
      import { PostProcessingEffectRoot } from "@shader-composer/postprocessing"
      
      setupThree()
      

      For convenience, you can also use the shader-composer umbrella package. It directly exports most of the functions and units you'll need for building shaders, and provides additional entrypoints for framework-specific functionality:

      import { compileShader, PSRDNoise3D } from "shader-composer"
      import setupThree from "shader-composer/three"
      import { PostProcessingEffectRoot } from "shader-composer/postprocessing"
      
      setupThree()
      
    • d504e35: Breaking: The core Shader Composer package @shader-composer/core no longer requires Three.js as a peer dependency, and is now ready to be used together with other frameworks (or directly with WebGL.)

      Since some of the units provided within the standard library require framework-specific code to operate (like CameraFar, CameraNear, Resolution etc.), glue code needs to be created to use Shader Composer with other frameworks.

      The Three.js glue code lives in the @shader-composer/three package.

      TODO: example for usage

    [email protected]

    Minor Changes

    • d504e35: Breaking: Shader Composer has received a new package structure! Its code is now spread across multiple smaller packages scoped within the @shader-composer/* organization, with the main shader-composer package acting as an umbrella package.

      The user can now choose between either picking the scoped packages they need, or just using the umbrella package, which provides additional entrypoints for specific frameworks and libraries.

      Example for working with individual scoped packages:

      import { compileShader } from "@shader-composer/core"
      import { PSRDNoise3D } from "@shader-composer/noise"
      import setupThree from "@shader-composer/three"
      import { PostProcessingEffectRoot } from "@shader-composer/postprocessing"
      
      setupThree()
      

      For convenience, you can also use the shader-composer umbrella package. It directly exports most of the functions and units you'll need for building shaders, and provides additional entrypoints for framework-specific functionality:

      import { compileShader, PSRDNoise3D } from "shader-composer"
      import setupThree from "shader-composer/three"
      import { PostProcessingEffectRoot } from "shader-composer/postprocessing"
      
      setupThree()
      

    Patch Changes

    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]

    [email protected]

    Patch Changes

    • d504e35: Upgraded to the new version of Shader Composer.
    • Updated dependencies [d504e35]
    • Updated dependencies [4f9903d]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]

    @material-composer/[email protected]

    Patch Changes

    • Updated dependencies [4f9903d]
    • Updated dependencies [d504e35]

    [email protected]

    Patch Changes

    • d504e35: Upgraded to the new version of Shader Composer.
    • Updated dependencies [d504e35]
    • Updated dependencies [4f9903d]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]

    [email protected]

    Patch Changes

    [email protected]

    Patch Changes

    • d504e35: Upgraded to the new version of Shader Composer.
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]

    [email protected]

    Patch Changes

    • d504e35: Upgraded to the new version of Shader Composer.
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    • Updated dependencies [d504e35]
    opened by github-actions[bot] 2
  • Extract Shader Composer core that doesn't rely on Three.js

    Extract Shader Composer core that doesn't rely on Three.js

    As Is:

    Shader Composer compiles GLSL shader code from a graph of JavaScript objects ("units"). The library provides a) the compiler, and b) a library of units that serve as building blocks for shader graphs.

    The compiler itself is mostly renderer agnostic. You can use it in Three.js, but also any other rendering environment that can work with GLSL code (or potentially WGSL in the future.) It still has a peer dependency to Three.js mostly for some typing and variable conversion reasons (for example, the compiler knows that an instance of THREE.Color should be compiled to a vec3 GLSL variable, and similar.)

    The unit library is slightly more Three.js-specific, but only in the sense that some of the units provided make assumptions about the structure of typical Three.js shaders (when used with ShaderMaterial or injected into existing materials.) For example, the VertexPosition unit assumes that the position is provided as a position attribute, and will break in any environment where this is not the case.

    To Be:

    Shader Composer should be restructured (and possibly split into multiple packages) so its core functionality can be imported and used without Three.js, with the Three.js-specific bits living in a separate package (eg. shader-composer-three, analogous to shader-composer-r3f.)

    Todo:

    • [x] Create a new shader-composer-three package that re-exports shader-composer and adds its own Three.js-specific functionality
    • [x] Remove the Three.js-specific arguments from the update callback on units
    • [x] ~Allow the glslType and glslRepresentation functions to be extended (so sc-three can add its own conversions)~
      • We have taught it about objects that are shaped like Three's vectors and matrices, and we've also taught it about number arrays. That should cover most usage scenarios.
    • [x] Allow UniformUnit to accept number arrays for vectors
    • [x] Check if we can make toybox not depend on three
    • [x] Update the libraries (and examples) that use Shader Composer with Three.js to import from shader-composer-three
    • [x] Make a final decision on whether shader-composer-three should re-export shader-composer, or if it should expect shader-composer as a peer dependency
    • [ ] Check if we're registering peer deps correctly in the shader-composer main package, and maybe mark them as optional

    New package structure

    • [x] Restructure packages into scoped micropackages, with shader-composer merely acting as an umbrella package
      • [x] shader-composer
      • [x] @shader-composer/three
      • [x] @shader-composer/r3f
      • [x] @shader-composer/postprocessing
      • [ ] @shader-composer/toybox (maybe use the opportunity to finally get rid of that package, and move the contained primitives into different packages)
    • [x] Update material-composer to use the new structure
    • [x] Update vfx-composer to use the new structure
    • [x] Change @shader-composer/three to export a function that needs to be called explicitly (and call it from @shader-composer/r3f)

    Documentation etc.

    • [ ] Update documentation of shader-composer package
    • [ ] Add documentation to shader-composer-three package
    • [x] Write changeset(s)
    shader composer 🌈 
    opened by hmans 0
  • 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
  • [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
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
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 99 Dec 27, 2022
R3f-homunculus - Ripple Effect and Distortion Effect using React Three Fiber

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

null 11 Nov 13, 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
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 200 Jan 1, 2023
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 36 Dec 28, 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 81 Dec 24, 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 731 Jan 7, 2023
🤳 VR/AR with react-three-fiber

@react-three/xr React components and hooks for creating VR/AR applications with @react-three/fiber npm install @react-three/xr Examples These demos ar

Poimandres 1.4k Jan 7, 2023
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 94 Dec 4, 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
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
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.4k Dec 29, 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.8k Jan 5, 2023
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 43 Nov 16, 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
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 184 Dec 27, 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 Dec 19, 2022