<View> with postprocessing

[frarillotta]

What is your question:

Hey! Was following the Next.js react-three fiber example, which uses the drei View component. I wanted to add a postprocessing effect to the whole canvas, but, alas, without success. Was wondering if anyone had any experience integrating the two?

[valeredou]

Hi !
I have the same issue trying to apply postprocessing in a , the layout is breaking and nothing happens.

Here is a sandbox showing it : https://codesandbox.io/s/view-skissor-forked-qm8zzl?file=/src/App.js

I think it's a bug, never found how to make it work... Did you solve it ? Thanks :)

[fromwhite]

I have the same issue, temporarily replacing the view with scissor.
It would be best if the view could be implemented.

[rossrossp]

I also have this issue/requirement

[ynamite]

same :)

[FarazzShaikh]

View does not support Postprocessing out of the box as postprocessing requires EffectsComposer.render to be called instead of WebGLRenderer.render. If you'd like to use postprocessing with view, download the file and replace this line:

drei/src/web/View.tsx

Line 138 in 7186407

state.gl.render(children ? state.scene : scene, state.camera)

With

composerRef.current.render()

where composerRef is a ref to the postprocessing EffectComposer passed in as a prop.

Like in this CSB: https://codesandbox.io/p/sandbox/viewcube-forked-vhhxks?file=%2Fsrc%2FSceneWrapper.js%3A59%2C1-60%2C1

However, please note that you will have canvas background alpha issues as Postporcessing passes were not built with gl.scissor in mind.

[ynamite]

I figured it out, finally, just a minute ago. Yay :) took me a couple of days.

I've got split views, each with their own DPR settings, each with their own EffectComposer and different Effects, which stack according to their order in the code, with full transparency support.
https://codesandbox.io/p/sandbox/multiple-views-with-createportal-and-effectcomposer-refined-forked-jxg86f

What still bothers me:

• when scrolling the document, it flickers. Not sure why. If anybody has some insight, please do tell. fixed!
• I'm using multiple ScreenQuads, instead of just one. I'm a React noob and for the life of me I couldn't figure out how to pass the FBOs to a parent wrapper (to apply them all to a single ScreenQuad). Just couldn't get it to work.
• using multiple EffectComposers. Would rock if this could be made to work with just one. But I don't think it currently can.
• any other inputs are welcome

[ynamite]

Now even working with the original View.tsx from Drei with transparency 🥳:
https://codesandbox.io/p/sandbox/twilight-browser-7235jd

It requires a slightly modified EffectComposer, due to the issue / bug mentioned here: pmndrs/react-postprocessing#285

It's basically a wrapper for View.tsx. The key to make it work, apart from the fix to EffectComposer above, is to include the EffectComposer into each View where post processing should take place and disabling it. Rendering of EffectComposer passes is handled by the wrapper. To allow transparency, each View is rendered to a texture and applied to ScreenQuad with a shader material. Works great.

One thing I noticed though, Drei's View behaves strange when scrolling, I don't know why this happens. It doesn't happen in this example https://codesandbox.io/p/sandbox/r9w2ob but it does also happen in other examples from the Drei docs. Any suggestions welcome.

[github-actions]

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!

[github-actions]

We’re closing this issue to keep our project manageable and make room for other active work, but we truly appreciate your effort and contribution.

If you’d like to continue working on this, please feel free to re-open it or reach out on Discord — our community is always ready to support you. Thanks again for helping us stay organized and for understanding our approach!