React-three-fiber: Effect post processing

[dbismut]

Hi! I've seen the Lorem Ipsum example and how you handle the glitch effect, but I'm not sure how to replicate this using for example this postprocessing lib.

Here is my attempt:

import {
  PixelationEffect,
  EffectComposer,
  EffectPass,
  RenderPass
} from 'postprocessing'

applySpring({ EffectComposer, RenderPass, EffectPass, PixelationEffect })
applyThree({ EffectComposer, RenderPass, EffectPass, PixelationEffect })

function Effects({ factor }) {
  const { gl, scene, camera, size } = useThree()
  const composer = useRef()

  useEffect(
    () => void composer.current.obj.setSize(size.width, size.height),
    [size.width, size.height]
  )
  useRender(() => composer.current.obj.render(), true)

  const effect = useMemo(() => new PixelationEffect(100.0))
  return (
    <effectComposer ref={composer} args={[gl]}>
      <renderPass name="passes" args={[scene, camera]} />
      <anim.effectPass name="passes"  args={[camera, effect]} renderToScreen />
    </effectComposer>
  )
}

But unfortunately nothing appears on screen, and in any case, I'd like ideally to be able to write:

<anim.pixelationPass name="passes" renderToScreen factor={factor} />

Would I have to create a class similarly to what you did with GlitchPass?
Sorry this is a noob question but I'm curious to see how one could potentially reuse existing filters!

[drcmda]

yes, that's generally how you can include extra objects into the scene graph. the name attribute is a bad name for "attach" (will change it to that soon), it basically attaches the object under that name on the parent and if it's an array it appends the object. the original effects composer uses an array called passes. so this works, but your composer seems to have it booked under "effects". I don't know it, though - no idea if it doesn't need some method to be called still. If that's the case you may still be able to get away using onUpdate={self => ...}

think of the jsx api as a direct reflection. there's no arbitrary stuff in there, it just maps into the target object 1:1, so it's important to follow their api, the reconciler doesn't know or care about any of these objects or properties.

PS. these apply functions only need to include the objects you need. Springs apply for instance adds them to animated.xxxxx and three-fibers apply makes them available as native elements.

[dbismut]

Okay got it thanks. I'll try to see with I can do with all this, sorry a lot to ingest, everything you say is in the doc even, it does make greater sense now.

[temrysh]

@dbismut Hi, any success with EffectPass?
@drcmda I don't have problems withe other Passes, but stuck at applying Effects, couldn't find any examples either.
v3.0.2