react-three-fiber
react-three-fiber copied to clipboard
The performance scaling example doesn't disable post on regress, it just skips the final (cheap) blend function
Using BlendFunction.SKIP to disable passes with an offscreen target (which is probably all passes expensive enough to be worth disabling, and in particular SSAO and Bloom) doesn't actually prevent the passes from being calculated, it just skips the final blending function. In other words, all the expensive calculation you want to avoid still happens, it's just a cheap blend function at the end that gets skipped.
See this discussion over on the postprocessing repo.
@vanruesc suggests creating two separate EffectPass chains is the correct way to do this, then swap between them as needed.
Here's an updated example that that does this.
function EffectsMin() {
return (
<>
<Bloom kernelSize={KernelSize.LARGE} luminanceThreshold={0.55} luminanceSmoothing={0.2} />
</>
)
}
function EffectsFull() {
return (
<>
<SSAO intensity={15} radius={10} luminanceInfluence={0} bias={0.035} />
<Bloom kernelSize={KernelSize.LARGE} luminanceThreshold={0.55} luminanceSmoothing={0.2} />
</>
)
}
function Effects() {
const [full, setFull] = useState(true)
useFrame((state) => {
// Disable SSAO on regress
state.performance.current < 1 ? setFull(false) : setFull(true)
})
return <EffectComposer multisampling={8}>{full ? <EffectsFull /> : <EffectsMin />}</EffectComposer>
}
Note: I originally tried to do multisampling={full ? 8 : 2} as well but this causes a crash, see https://github.com/pmndrs/react-postprocessing/issues/97
i was wondering about this, thanks for researching, i will be using this going forward. but in any case, this definitively shouldn't be inside a useFrame but useEffect otherwise it's going to bug react 60fps even if the setState does nothing most of the time but it's unnecessary overhead.
as for the crash in rpp, i think atm this is the weakest link in the eco system. someone has to fix it. :-S
Sorry for the confusion!
I've updated the docs and the related Wiki page to better describe how effects should be enabled/disabled.
it's just a cheap blend function at the end that gets skipped.
Just to clarify: setting the blend function to SKIP does exclude the entire main shader of the effect from the final shader which can be quite a bit of code. It's just not a reliable way to fully disable any effect.
Also note that Effect instances can be reused in multiple EffectPass instances to keep memory usage low. If you use two separate BloomEffect instances, you'll end up creating two bloom render targets on the GPU. Instead of reusing effects, you can also dispose() effects or passes that are no longer needed.
Thanks for the clarification!
Also note that Effect instances can be reused in multiple EffectPass instances to keep memory usage low. If you use two separate BloomEffect instances, you'll end up creating two bloom render targets on the GPU.
How would this look declaratively in React?
@react-three/postprocessing will try to combine compatible effects if able and order them alongside passes. Here's an updated example, although it seems original context was lost since I don't see any withstanding issues beyond hook misuse. https://codesandbox.io/s/y74lg7