pmndrs / react-postprocessing

📬 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 effects, but can save you hundreds of LOC for a straight forward effects-chain.

npm install @react-three/postprocessing

These demos are real, you can click them! They contain the full code, too. 📦

Why postprocessing and not three/examples/jsm/postprocessing?

From https://github.com/pmndrs/postprocessing

This library provides an EffectPass which automatically organizes and merges any given combination of effects. This minimizes the amount of render operations and makes it possible to combine many effects without the performance penalties of traditional pass chaining. Additionally, every effect can choose its own blend function.

All fullscreen render operations also use a single triangle that fills the screen. Compared to using a quad, this approach harmonizes with modern GPU rasterization patterns and eliminates unnecessary fragment calculations along the screen diagonal. This is especially beneficial for GPGPU passes and effects that use complex fragment shaders.

Postprocessing also supports srgb-encoding out of the box, as well as WebGL2 MSAA (multi sample anti aliasing), which is react-postprocessing's default, you get high performance crisp results w/o jagged edges.

What does it look like?

Here's an example combining a couple of effects (live demo).

import React from 'react'
import { Bloom, DepthOfField, EffectComposer, Noise, Vignette } from '@react-three/postprocessing'
import { Canvas } from '@react-three/fiber'

function App() {
  return (
    <Canvas>
      {/* Your regular scene contents go here, like always ... */}
      <EffectComposer>
        <DepthOfField focusDistance={0} focalLength={0.02} bokehScale={2} height={480} />
        <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} height={300} />
        <Noise opacity={0.02} />
        <Vignette eskil={false} offset={0.1} darkness={1.1} />
      </EffectComposer>
    </Canvas>
  )
}

Documentation

• react-postprocessing docs
• postprocessing docs

react-postprocessing's Issues

Turning effects on and off during runtime?

Hi,

We are using this library and its working well for us. Great job!
We need to dynamically turn some effects (specifically on and off) during the viewing of the page - sometimes we want high FPS, sometimes we want beautiful visuals.

We currently do this like this, using an isPostOn prop:
{isPostOn && <Post aoPreset={Post.aoPresetsTypes.low} />}

with Post being a component with our chain:

const Post = ({ aoPreset }) => (
  <Suspense fallback={null}>
    <EffectComposer smaa>
      <SSAO {...aoConfig[aoPreset]} />
    </EffectComposer>
  </Suspense>
);

This works, however it is leaking GPU memory, when switching between on/off modes, as the Post component (and thus the SSAO object) being recreated every time. It seems like the resources do not get cleaned up correctly.

Is there a better way to do this?

Add Shockwave effect

docs reference: https://vanruesc.github.io/postprocessing/public/docs/class/src/effects/ShockWaveEffect.js~ShockWaveEffect.html

Adding SSAO throws Normal Pass error

Hey there, I was wondering if anyone knew how to add a normal pass to the EffectComposer -
as when I add <SSAO/> I get this error

"Please enable the NormalPass in the EffectComposer in order to use SSAO."

see full code below

<EffectComposer autoClear={false}>
                <Noise opacity={0.02} />

                <SSAO
                    blendFunction={BlendFunction.MULTIPLY} 
                    samples={31}
                    radius={5}
                    intensity={30}
                />

                <SMAA />
 </EffectComposer>

Any help is appreciated. Thanks!

Add GodRays component

Add README for Selection effects

Don't instantiate NormalPass if no Effects that use it are specified

So far, if SSAO is not being used, then it looks like there's no need to create a NormalPass to the composer. This should improve performance. If I understand this correctly, the NormalPass (unused by any effect other than SSAO) requires a re-render of the entire scene. This approach will likely halve framerate right off the bat, it is why MRT was invented. MRT can be done with WebGL2 but three.js does not support it. mrdoob/three.js#16390 The good news is that it is possible that it could land soon.

Depth issue on Safari

Safari:
https://user-images.githubusercontent.com/3739536/108192698-a4f23f00-7125-11eb-9c90-a3e2b4382878.mp4

Chrome or Firefox:
https://user-images.githubusercontent.com/3739536/108192859-d3701a00-7125-11eb-9a3f-082aa4f77ed3.mp4

Simplest reproducible code

import React from 'react'
import {EffectComposer, SMAA} from '@react-three/postprocessing'
import { SMAAPreset } from 'postprocessing'


export default function Effects() {
  return <EffectComposer depthBuffer={true} >
      <SMAA preset={SMAAPreset.HIGH}/>
    </EffectComposer>
}

One thing I noticed is, if you change a prop on EffectComposer and save, it fixes after hot reload.
So I think this is a bug.
Thanks

UnrealBloomPass support?

UnrealBloomPass : https://github.com/mrdoob/three.js/blob/dev/examples/js/postprocessing/UnrealBloomPass.js

Which way are we supposed to use postprocessing?

I see that the more recent codesandboxes that @drcmda has created are using components straight out of three, e.g.

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'

Whereas in older ones, either react-postprocessing is used or stuff out of drei. So I'm confused as to what is the most practical way to go about it. I'm leaning towards sticking with just the three stuff now. I wonder what capabilites are in/missing from each of the places.

Also, I'm confused about why three.js itself has a bunch of stuff for making postprocessing effects, and there is still a separate repo: https://github.com/vanruesc/postprocessing

My guess is that vanruesc's work gets periodically "included" into three.js but he works on his stuff off in his own repo.

Outline/SelectiveBloom not rendering

Hi,

I am trying to use the Outline and/or selective bloom on some meshes, and while there is no error generated, the effects don't seem to be shown. I have made a code sandbox to illustrate the behavior. I based this off the examples I could find, but there weren't any updated ones for these effects here, so it is possible I am referencing something outdated.

Of note, my original example used forward references on groups as the arguments to selection, but I have tried this with forward references to meshes, and even normal references to both without success.

Support for @react-three/fiber

It seems that this package is not compatible with the new naming convention of react-three-fiber, now @react-three/fiber. Using the @react-three/fiber package causes an error when the EffectComposer is added within a Canvas:

Uncaught R3F hooks can only be used within the Canvas component!

Presumably because it doesn't recognize the Canvas from @react-three/fiber as the same from react-three-fiber

Updating effects via `useFrame`

I've started a thread over in the react-three-fiber discussions (pmndrs/react-three-fiber#595), but I'm wondering if you can add some insight. How should effects be updated after they're changed via useFrame? Sending these along to the EffectsComposer via state is not very efficient. And setting state inside of useFrame is really not a good idea.

Add LUT Effect

In new postprocessing version a new effect was added. We should add it to react-pp as well

docs

Can we open a discussions channel here?

This would be similar to the one open on react-three-fiber repo.

Attempting to add custom effect to the chain disables MSAA

I'm trying to add an OutlineEffect with code that mirrors the example in the docs:

import { useContext, forwardRef, useMemo } from 'react';
import { EffectComposer } from 'react-postprocessing';
import { useThree } from 'react-three-fiber';
import { OutlineEffect } from 'postprocessing';

export const Outline = forwardRef((options, ref) => {
  const { scene, camera } = useThree();
  const effect = useMemo(() => new OutlineEffect(scene, camera, options), [
    scene,
    camera,
  ]);
  return <primitive ref={ref} object={effect} dispose={null} />;
});

export default function Effects() {
  return (
    <EffectComposer>
      <Outline />
    </EffectComposer>
  );
}

But it breaks MSAA. Commenting out the <Outline /> line restores it. What's the trick to use to keep MSAA working with custom effects in the chain, and can it be documented?

Uncaught Error: Cannot find module 'three'

I am getting the error Uncaught Error: Cannot find module 'three' in the console log any time I try to use react-postprocessing. I am assuming that it is an incompatibility between the versions of the libraries I am using, maybe? All base functionality of @react-three/fiber seems to work fine, it is only when I include the EffectComposer tag do I get the error. I tried to create an example on https://codesandbox.io/, but there it seems to work OK there.

Here is the example code:

import { Sphere } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { EffectComposer, Noise } from "@react-three/postprocessing";
import classNames from "classnames";
import React, { FunctionComponent } from "react";
import { Back } from "./components/back";
import { MainMenu } from "./components/main-menu";
import { Page } from "./components/page";
import { PageTitle } from "./components/page-title";
import { Settings } from "./components/settings";

export const App: FunctionComponent = () => {
  return (
    <div>
      <div
        className={classNames(
          "absolute",
          "top-0",
          "left-0",
          "w-100vw",
          "h-100vh"
        )}
      >
        <Canvas>
          <pointLight position={[10, 10, 10]} />
          <Sphere>
            <meshBasicMaterial attach="material" color="hotpink" />
          </Sphere>
          <EffectComposer>
            <Noise opacity={0.4} />
          </EffectComposer>
        </Canvas>
      </div>
      <Page id="main-menu" path="/">
        <MainMenu />
      </Page>
      <Page id="about" path="/about">
        <>
          <PageTitle>
            <span>About</span>
          </PageTitle>
          <Back href="/">Back</Back>
        </>
      </Page>
      <Page id="settings" path="/settings">
        <Settings />
      </Page>
    </div>
  );
};

export default App;

And here are my project dependencies:

    "@headlessui/react": "^1.2.0",
    "@react-three/drei": "^6.0.1",
    "@react-three/fiber": "^6.2.2",
    "@react-three/postprocessing": "^2.0.4",
    "@types/howler": "^2.2.2",
    "@types/react": "^17.0.9",
    "@types/react-dom": "^17.0.6",
    "@types/three": "^0.129.0",
    "classnames": "^2.3.1",
    "howler": "^2.2.1",
    "immer": "^9.0.2",
    "localforage": "^1.9.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "rot-js": "^2.1.5",
    "three": "^0.129.0",
    "wouter": "^2.7.4",
    "zustand": "^3.5.1"

console.log error:

index.ed731f93.js:61 Uncaught Error: Cannot find module 'three'
    at newRequire (index.ed731f93.js:61)
    at newRequire (index.ed731f93.js:45)
    at localRequire (index.ed731f93.js:83)
    at __require (index.ed731f93.js:126047)
    at index.ed731f93.js:126183
    at Object.j7QVa (index.ed731f93.js:132603)
    at newRequire (index.ed731f93.js:71)
    at localRequire (index.ed731f93.js:83)
    at Object.4OkVz.postprocessing (index.ed731f93.js:126027)
    at newRequire (index.ed731f93.js:71)
newRequire @ index.ed731f93.js:61
newRequire @ index.ed731f93.js:45
localRequire @ index.ed731f93.js:83
__require @ index.ed731f93.js:126047
(anonymous) @ index.ed731f93.js:126183
j7QVa @ index.ed731f93.js:132603
newRequire @ index.ed731f93.js:71
localRequire @ index.ed731f93.js:83
4OkVz.postprocessing @ index.ed731f93.js:126027
newRequire @ index.ed731f93.js:71
localRequire @ index.ed731f93.js:83
1D8Pk.@react-three/drei @ index.ed731f93.js:26279
newRequire @ index.ed731f93.js:71
localRequire @ index.ed731f93.js:83
5mCR7.react @ index.ed731f93.js:1056
newRequire @ index.ed731f93.js:71
(anonymous) @ index.ed731f93.js:120
(anonymous) @ index.ed731f93.js:143

Has anyone seen this issue before, or have any idea what might be causing it?

Thank you!

SSAO Effect working example

I'm trying to get SSAO working, I've tried a number of different settings but failed to make it to add the desirable effect. Can somebody share a working example?

https://github.com/pmndrs/react-postprocessing/blob/master/api.md#ssao---

Failed to compile on Next.js

When I try to use this with Next.js,

import {
  EffectComposer,
  DepthOfField,
  Bloom,
  Noise,
  Vignette,
} from "@react-three/postprocessing";

export default function ThreeDLogo() {
  return (
    <div style={{ height: "100vh" }}>
      <Canvas>
        <OrbitControls />
        <ambientLight intensity={0.6} />
        <Suspense fallback={null}>
          <Model />
        </Suspense>
        <EffectComposer>
          <DepthOfField
            focusDistance={0}
            focalLength={0.02}
            bokehScale={2}
            height={480}
          />
          <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} height={300} />
          <Noise opacity={0.02} />
          <Vignette eskil={false} offset={0.1} darkness={1.1} />
        </EffectComposer>
      </Canvas>
    </div>
  );
}

with ThreeDLogo.tsx being imported like this:

const ThreeDLogo = dynamic(() => import("../components/ThreeDLogo"), {
  ssr: false,
});

export default function Index() {
  return (
    <div>
      <ThreeDLogo />
    </div>
  );
}

I get this error:

Module parse failed: Unexpected token (1:2320)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> import{BlendFunction as e,BloomEffect as t,BrightnessContrastEffect as n,ChromaticAberrationEffect as r,ColorAverageEffect as i,ColorDepthEffect as o,DepthEffect as c,EffectComposer as s,RenderPass as l,NormalPass as a,EffectPass as u,DepthOfFieldEffect as d,DotScreenEffect as m,GlitchEffect as f,GlitchMode as p,GodRaysEffect as h,GridEffect as g,HueSaturationEffect as b,NoiseEffect as w,OutlineEffect as E,PixelationEffect as y,ScanlineEffect as v,SelectiveBloomEffect as S,SepiaEffect as x,SSAOEffect as T,SMAAPreset as j,EdgeDetectionMode as C,SMAAImageLoader as L,SMAAEffect as A,TextureEffect as R,ToneMappingEffect as P,VignetteEffect as z}from"postprocessing";import F,{forwardRef as O,useMemo as B,useLayoutEffect as D,createContext as M,useEffect as k,useRef as I,useImperativeHandle as N,useContext as G}from"react";import{Vector2 as _,HalfFloatType as H,Vector3 as Y,TextureLoader as q,sRGBEncoding as U...

Do I have to set any special settings for Webpack or anything?

[v2.0.2] WebGL error thrown and blocking

hello,

when using the library in its latest flavor (2.0.2) i get this message in chrome:

[.WebGL-0x7fe1518be200]GL ERROR :GL_INVALID_OPERATION : glBlitFramebufferCHROMIUM: destination framebuffer is multisampled

simply by having <EffectComposer /> in .

Any idea how to circumvent this ?

RFC: react-postprocessing storybook

It's been a success for drei ( every new contributer uses the storybook to create the components or at least creates a story when contributing ) and it's easy to keep it updated.
Having to updated 20 sandboxes may be counterproductive, especially if only 1 person can do it, while the storybook uses the latest dependencies and imports the component from the source.

Glitch Effect Help

How can I disable the Glitch effect on user input via a checkbox?
Changing the active prop does not work even with a very minimal setup. Is there something I'm missing?

...
const [active, setState] = React.useState(true);

...

<button onClick={() => {
setState(!active)
}}>Toggle</button>

  <Glitch active={active} />

Glitch multiple issues

Hi, this library is really cool. Thanks for making it!
I'm seeing a few issues with Glitch. Please let me know if I should break this up into smaller issues. I can also try to help with these, but I have very little experience with graphics programming.

1: No Glitch component included in the Glitch codesandbox.
The codesandbox button in the docs links to this:
https://codesandbox.io/s/react-postprocessing-glitchnoise-demo-wd4wx
There's no Glitch component in that codesandbox. Adding Glitch to this specific codesandbox (with these specific dependencies and versions) works fine, but:

2. The dependencies in the Glitch codesandbox are not up to date.
The version of react-postprocessing included in this codesandbox is 1.0.0-Beta29. Similarly, the versions of Postprocessing, React, and the other react-spring modules are also not the most recent. So I upgraded the versions and discovered:

3. Glitch errors in the latest version of react-postprocessing
When I upgrade the dependencies in the codesandbox to the most recent versions, I get the following error:
Effects that transform UV coordinates are incompatible with convolution effects
Being new to graphics programming, I have no idea what this means. Here is a codesandbox with the dependencies updated to the versions found in the current react-postprocessing package.json
https://codesandbox.io/s/react-postprocessing-glitchnoise-demo-qquhu?file=/src/App.js
Is it possible that this is actually an issue with Postprocessing itself? If so, I can try to get a minimum example together and file an issue with them.

Note that in the codesandbox I provided, I upgraded to latest version of drei, but the issue persists no matter what version of drei is used.

Again, thanks for making this library, and I am happy to help debug this if you'd like, to the extent that I am capable.

Disable Glitch Effect via props

I'm trying to disable the Glitch effect via a UI input but this seems to take no effect.
Here's a repro of the issue.

https://codesandbox.io/s/tender-star-lw07h

disable multisampling when webgl2 isn't supported

right now rpp crashes in safari.

Problem Using Different Effects on Different Items on Same Canvas

Is it possible for different meshes in the same scene to have different effects applied to them? In this code sandbox, only the effect fo the last rendered item is applied:
https://codesandbox.io/s/react-post-processing-single-item-3dm54?file=/src/index.js

Any way to use this without concurrent mode?

I have the capability to dynamically import modules in my react app, but would like to avoid adding an experimental mode to it.

Is there any way to use this without using <Suspense> -- I'm just looking for a tight integration with react-three-fiber and the dynamic loading is something I can handle using a different strategy.

Error - THREE.WebGLRenderer: WebGLMultisampleRenderTarget can only be used with WebGL2

I'm receiving the following console error in Firefox and Chrome but works fine in Safari.
THREE.WebGLRenderer: WebGLMultisampleRenderTarget can only be used with WebGL2
It seems closely related to this issue. Any suggestions greatly appreciated.

SelectiveBloom is not updating object selection

I dont know if this is a bug or if it is an intended behaviour I am not understanding correctly, but it seems that when changing the object selection of the SelectiveBloom effect it adds it to the mesh, instead of updating it. I'm using it in a bigger project, but I was able to reproduce the problem in a quick sandbox example here, and I'm posting the code below as well.

See that when clicking or the first box, you can toggle the bloom on or of as expected, but when clicking on the second box, for some reason the first box blooms as well, even though I have console logged the reference (called objectBloomRef) I'm passing to the SelectiveBloom and it is not holding both of the boxes. So I guess the problem lies deeper or I am stupid. Please help?

CODE:

    function App() {
    
      const lightRef = useRef();
      const objRefOne = useRef();
      const objRefTwo = useRef();
      const objectBloomRef = useRef();
      const [selectedObject, setSelectedObject] = useState(-1);
      const [showBloom, setShowBloom] = useState(false);
    
      useEffect(()=>{
        if(selectedObject == 1) {
          objectBloomRef.current = objRefOne.current;
          setShowBloom(true);
        } else if (selectedObject == 2) {
          objectBloomRef.current = objRefTwo.current;
          setShowBloom(true);
        } else {
          setShowBloom(false);
        }
      }, [selectedObject])
    
      return (
        <Canvas>
    
          <mesh position={[-1, 0, 3]} ref={objRefOne} onClick={()=>{selectedObject == 1 ? setSelectedObject(-1) : setSelectedObject(1)}}>
            <boxBufferGeometry args={[1, 1, 1]} attach="geometry" />
            <meshPhongMaterial color={"#18a36e"} attach="material" />
          </mesh>
    
          <mesh position={[1, 0, 3]} ref={objRefTwo} onClick={()=>{selectedObject == 2 ? setSelectedObject(-1) : setSelectedObject(2)}}>
            <boxBufferGeometry args={[1, 1, 1]} attach="geometry" />
            <meshPhongMaterial color={"#f56f42"} attach="material" />
          </mesh>
    
          <directionalLight color="#ffffff" intensity={1} position={[-1, 2, 4]} ref={lightRef} />
        
          <EffectComposer>
          {showBloom && <SelectiveBloom
            lights={[lightRef]}
            selection={objectBloomRef}
            selectionLayer={10} 
            intensity={2.0}
            luminanceThreshold={0.25} 
            luminanceSmoothing={0.025} 
          />}
          </EffectComposer>
        
        </Canvas>
      )
    }
    
    const rootElement = document.getElementById("root")
    ReactDOM.render(<App />, rootElement)

Can't import the named export 'AlwaysDepth' from non EcmaScript module (only default export is available)

Started getting this error after postprocessing v6.22.4 was released.
Library version "@react-three/postprocessing": "^2.0.5",

Logo Proposal

A play on the bolt icon with channel separation - because it's the only one that would work on a logo

snip

DepthOfField focusDistance doesn't seem to work (possibly renamed to focus?)

I've tried it on a couple of projects hoping to get it working but it seems to be fixed to some default range of around 1 meter

<DepthOfField
  focusDistance={5} // it doesn't change no matter what is passed here
  focalLength={0.1}
  bokehScale={5}
/>

The blobs example in this project has a focusDistance of 0, and codesandbox seems to be down at the moment so I can't test it on the example. codesandbox is back and it DOES work in the demo - so this is probably user error... Though I've tried it with a orthographic and perspective camera with no success
Blobs: https://codesandbox.io/s/m94xb

Here's the DepthOfField example from postprocessing which does work, but the property is called "focus" instead of "focusDistance" so I wonder if it just wasn't updated in this package. https://vanruesc.github.io/postprocessing/public/demo/#depth-of-field

If that's the case I'd be happy to make a PR to update

I pushed an example of the failing repo (sorry if it's a bit of a mess) - here's the link: https://github.com/aVileBroker/Isometric-City

Layers

Does this package support layers?

I am trying to add an effect for select meshes

v2.0 breaks animations until window is resized

i've just upgraded rpp to v2, but it's causing some havok with the renderloop. it looks as though no new frames are drawn, but when resizing the browser window you can see the scene update.

minimal repro: https://codesandbox.io/s/misty-rgb-ouo5x?file=/src/index.js

<Effects Composer /> causes flashes when forwarded Context changes

I noticed an issue on my game that whenever I update the forwarded context value via setState, I would get a flash of blue like a bump map.

I abstracted the problem to a codesandbox:
https://codesandbox.io/s/nostalgic-pine-5f1jm?file=/src/App.js

I'm looking into it myself, but I figured I would post the issue here in case someone else has a chance to solve it before me.
I feel like the issue has something to do with the memoization on Effect Composer. For example, the useMemo here doesn't actually do anything since it still creates a new object every time its dependents change.

Add Outline and SelectiveBloom

These are currently in but not working. I already started the work, posting this as a reminder

Dynamically changing multisampling causes a crash

I tried to improve the performance scaling example by reducing multisampling from 8 to 2 on regress.

function Effects() {
  const [full, setFull] = useState(true)

  useFrame((state) => {
    // Reduce multisampling on regress
    state.performance.current < 1 ? setFull(false) : setFull(true)
  }, [])

  return (
    <EffectComposer multisampling={full ? 8 : 2}>
      <SSAO intensity={15} radius={10} luminanceInfluence={0} bias={0.035} />
      <Bloom kernelSize={KernelSize.LARGE} luminanceThreshold={0.55} luminanceSmoothing={0.2} />
    </EffectComposer>
  )
}

This works initially but after a minute or so of switching between the two values it crashes with Cannot read property 'alpha' of null (possibly the error is caused by recreating too many contexts):

VM1475:63 WARNING: Too many active WebGL contexts. Oldest context will be lost.
HTMLCanvasElement.getContext @ VM1475:63
postprocessing.esm.js:3089 Uncaught TypeError: Cannot read property 'alpha' of null
    at EffectComposer.createBuffer (postprocessing.esm.js:3089)
    at new EffectComposer (postprocessing.esm.js:3015)
    at eval (index.js:246)
    at updateMemo (react-reconciler.development.js:7294)
    at Object.useMemo (react-reconciler.development.js:7840)
    at useMemo (react.development.js:1532)
    at eval (index.js:245)
    at renderWithHooks (react-reconciler.development.js:6412)
    at updateForwardRef (react-reconciler.development.js:8471)
    at beginWork (react-reconciler.development.js:10525)
    at HTMLUnknownElement.callCallback (react-reconciler.development.js:12184)
    at Object.invokeGuardedCallbackDev (react-reconciler.development.js:12233)
    at invokeGuardedCallback (react-reconciler.development.js:12292)
    at beginWork$1 (react-reconciler.development.js:16531)
    at performUnitOfWork (react-reconciler.development.js:15337)
    at workLoopSync (react-reconciler.development.js:15268)
    at renderRootSync (react-reconciler.development.js:15231)
    at performSyncWorkOnRoot (react-reconciler.development.js:14840)
    at workLoop (scheduler.development.js:417)
    at flushWork (scheduler.development.js:390)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)
index.js:27 The above error occurred in the <ForwardRef> component:

    at eval (https://6m1in.csb.app/node_modules/@react-three/postprocessing/dist/index.js:242:212)
    at Effects (https://6m1in.csb.app/src/App.js:174:42)
    at Suspense
    at ErrorBoundary (https://6m1in.csb.app/node_modules/@react-three/fiber/dist/react-three-fiber.esm.js:1178:5)
    at Provider (https://6m1in.csb.app/node_modules/@react-three/fiber/dist/react-three-fiber.esm.js:1370:27)

Incorrect Normal Pass for Instanced elements

As noted in other repos, when you combine instancing and SSAO (for Normal Pass) the rendering breaks, since it uses internally scene.overrideMaterial. It's not possible to use a single material for instanced and non instanced objects, since the program attributes are different.

CodeSandbox to reproduce the issue:
https://codesandbox.io/s/r3f-instanced-colors-cvbdq

I proposed an hack in the original postprocessing library but it's only temporary, so a better solution has to be found.

Detailed reference on drei repo:
pmndrs/drei#22

Reference in postprocessing library:
pmndrs/postprocessing#202

Effects won't update after re-render

After a re-render of the component, Bloom effect is broken (i.e. you cannot change its properties anymore)
I haven't checked with other components.
Please see repro

• You will see blinking bloom animation
• Click Toggle state button
• Blinking bloom animation is broken. Although bloomRef.current.intensity is changed, it has no effect on bloom

https://codesandbox.io/s/react-postprocessing-dof-blob-forked-8cu0k?file=/src/App.js

Broken sandbox examples

It looks like the example sandboxes no longer work:
https://m94xb.csb.app/
https://5jgjz.csb.app/

Could be due to the repository migration to pmndrs?
I suspect that the sandbox is getting a 404 when it tries to pull the example code from github.

Looks like the redirect rules aren't catching all urls:
https://github.com/react-spring/react-postprocessing/master/examples/bubbles <- returns 404

I would attempt to create a PR but I assume the sandbox owner would have to update the project settings manually :)

Having contours on adding EffectComposer to a room lit with Spot Light

Hi I have make a 3D room with spotlights pointing upwards to the ceiling.

When EffectComposer tag is used, Then I am seeing wierd contour lines in the reflected lights.

Without the EffectComposer the lighting has a smooth gradient

I need to use Bloom to my scene but this is causing some issues.

I am using the effect like this
<EffectComposer> <Bloom luminanceThreshold={0.2} luminanceSmoothing={2} height={500} /> </EffectComposer>

Performance drops when using with drei>Reflector

Demo here: https://codesandbox.io/s/fo7fg?file=/src/Scene.js

uses this example https://threejs.org/examples/webgl_mirror.html

react-postprocessing and drei GizmoHelper NOT COMPATIBLE? [with sandbox]

Hello, when I use postprocessing EffectComposer, the drei GizmoHelper disappears.

see codesandbox: https://codesandbox.io/s/react-three-postprocessing-vs-drei-viewcube-veq3c?file=/src/index.js

if you delete the <EffectComposer /> the Gizmo reappears. (Even with actual effects within it, it's the same problem)

Why is this happening and how to fix it?

Thank you

Route changes cause app to crash until page is refreshed

Description of the bug

Route changes (e.g. when using react-router or wouter) cause the app to crash. However, the pages load successfully after they are reloaded. When this occurs, the following error is logged:

Uncaught TypeError: renderer.getClearAlpha is not a function
at ClearPass.render (postprocessing.esm.js:3225)
at RenderPass.render (postprocessing.esm.js:3660)
at EffectComposer.render (postprocessing.esm.js:6271)
at Object.current (index.js:1)
at Mb (web.js:157)
at web.js:158
at Map.forEach (<anonymous>)
at Ec (web.js:158)

I created a demo sandbox to illustrate the issue: demo
The app initially loads successfully, but when I select the Spheres link, the route change triggers the crash. The code in the Effects.js file was taken from this example. I tested this demo on a computer with a faster graphics card and the app doesn't crash.

The @react-three/postprocessing library isn't used in the demo, but the same crash occurs when using that library. The same can be said for wouter. I originally posted this issue in Raoul's postprocessing repo and was advised to post the issue here.

Calling window.open within an onClick event is working as a temporary solution.

The issue seems to result from resources not completely dismounting before the canvas fully dismounts. What would be the best way to ensure all resources dismount before mounting a new canvas?

Library versions used

"react": "^17.0.0"
"three": "^0.121.1"
"react-three-fiber": "^5.1.3"
"postprocessing": "6.17.4"

Refs assigned to effects are always undefined

The problem

At the moment of 1.0.0-beta3 if you try to pass a ref to an effect it will become undefined.

It happens because ref prop is already occupied in EffectComposer:

https://github.com/react-spring/react-postprocessing/blob/3a89610a586326e5b78d7fb325053efd49326788/src/EffectComposer.tsx#L70

Solution

One of the solutions is trying to merge refs. However, React drops an error about inproper usage of refs.

Warning: [object Object]: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop.

I think the right one is making a custom prop innerRef. Last time I tried it, everything that used refs got broken because of composer becoming null so I don't know yet what's the proper way of doing things here.

"Primitives without 'object' are invalid" error with SSAO component in 2.0.2

Adding the SSAO component results in an Uncaught Primitives without 'object' are invalid! error under 2.0.2. Downgrading to 2.0.1 seems to fix this. Minimal reproduction here

ShaderPass Documentation / Help

Hi There!

I'm looking to render a shader material as a fullscreen effect via ShaderPass from postprocessing. Does the lib support anything like this at the moment? Here is my setup so far, but it results in TypeError: effect.addEventListener is not a function

import React, { useMemo, forwardRef } from "react"
import * as THREE from "three"
import { EffectComposer } from "@react-three/postprocessing"
import { ShaderPass } from "postprocessing"

import HorizontalBlurShader from "../../shaders/HorizontalBlurShader"

const HorizontalBlur = forwardRef((options, ref) => {
  const blurShader = new THREE.RawShaderMaterial({
    uniforms: HorizontalBlurShader.uniforms,
    vertexShader: HorizontalBlurShader.vertexShader,
    fragmentShader: HorizontalBlurShader.fragmentShader
  })
  const effect = useMemo(() => new ShaderPass(blurShader, "tDiffuse"), [blurShader])
  return <primitive ref={ref} object={effect} dispose={null} />
})

function Effects() {
  return (
    <EffectComposer>      
      <HorizontalBlur />
    </EffectComposer>
  )
}

Any help would be much appreciated. Cheers!

EDIT: added Codesandbox for ref: https://codesandbox.io/s/r3f-postprocessing-shaderpass-rd-trp2u

Depth of field performance

Hey there, been wondering if anyone else has had performance issues after applying depth of field to a scene. Code below.

<DepthOfField focusDistance={0} focalLength={0.015} bokehScale={1} height={900} />

FPS just tanks after putting this in. Tried to mess with the settings but nothing seems to be helping.
Does anyone have any suggestions on how to make the performance better?

Thanks!

Resizing viewport causes weird glitching

It happens even when effect composer component has no passes in it.

Glitch doesn't seem to work

edited
It seems effects DO work, but glitch doesn't seem to be doing anything (same code as in examples) on my local dev? 🤔

Cannot read property 'isInterleavedBufferAttribute' of undefined

When adding < EffectComposer >< / EffectComposer >
I get the following error with the latest react three fibre

Works fine in older versions

TypeError: Cannot read property 'isInterleavedBufferAttribute' of undefined
at Object.get (three.module.js:12719)

"react-three-fiber": "^5.1.7",
"react": "^17.0.1",
"@react-spring/core": "^9.0.0-rc.3",
"@react-spring/three": "^9.0.0-rc.3",
"@react-three/drei": "^2.2.7",
"@react-three/postprocessing": "^1.5.0",