Updating effects via `useFrame`

[robksawyer]

I've started a thread over in the react-three-fiber discussions (https://github.com/react-spring/react-three-fiber/discussions/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.

[v1rtl]

tbh I don't know, better ask @drcmda

if u want to update ur effect conditionally, use useLayoutEffect hook like here:

  useLayoutEffect(() => {
    if (depthTexture) {
      effect.setDepthTexture(depthTexture.texture, depthTexture.packing)
    }
  }, [depthTexture])

usage with useFrame - idk the best way to combine it w/ rpp

[drcmda]

i tried it out and it works, but you need to know postprocessing internals because the constructor parameters that you pass have are mapped to internals.

for instance this is how you fade Blooms luminianceThreshold:

  const ref = useRef()
  useFrame((state) => {
    if (ref.current) {
      ref.current.luminanceMaterial.threshold = (1 + Math.sin(state.clock.getElapsedTime() * 2)) / 2
    }
  }, [])
  return (
    <EffectComposer>
      <Bloom ref={ref} KernelSize={KernelSize.VERY_LARGE} height={400} opacity={2} />

demo: https://codesandbox.io/s/r3f-basic-demo-zvu4g?file=/src/App.js

now that's unfortunate. react-postprocessing could try to abstract this but it seems rather hacky, and pp could thrash that in any patch version. im going to ask upstream if this can be fixed by them.

[robksawyer]

Wow, that's a process for sure. But, nice work hacking this together! I really appreciate it. Let me know if you'd like me to close this.

[drcmda]

for this btw we could really need help, but it would be easy to do:

import { BloomEffect as BloomEffectImpl } from 'postprocessing'

class BloomEffect extends BloomEffectImpl {
  set luminanceThreshold(v) { this.luminanceMaterial.threshold = v }
  get luminanceThreshold() { return this.luminanceMaterial.threshold }
  ...
}

the react-pp effects would then instanciate that instead of the original. and that's that, now effects could truly be changed by props, and refs. currently if you set props it re-instanciates the effect which is very bad, and - of course - props that you use with refs don't correspond to the constructor args.

if you want @robksawyer PR's welcome 🙂

[v1rtl]

I think it's safe to close this