Parent html not respected when using r3f PostProcessing effects

[ThimoDEV]

When I Add postprocessing effects the canvas is positioned absolute. My content is positioned correctly when I give it its own canvas. Is there something specific about the post processing package to use it in a View?

[backuardo]

I experienced the same issue. For now, I ended up updating the usePostProcess hook (from the starter) to add my effects.

[ThimoDEV]

I experienced the same issue. For now, I ended up updating the usePostProcess hook (from the starter) to add my effects.

Can you share the code here?

[backuardo]

@ThimoDEV I haven't tested this thoroughly, but it seems to be fine (120 FPS on my mac). Probably need to handle window resize and stuff, but this should get you going.

These shaders are from three-stlib

export const usePostProcess = () => {
  const { scene, camera, gl, size } = useThree()
  const composer = useMemo(() => {
    const composer = new EffectComposer(gl)
    composer.setSize(size.width, size.height)

    const renderPass = new RenderPass(scene, camera)
    composer.addPass(renderPass)

    const dotScreenPass = new ShaderPass(DotScreenShader)
    dotScreenPass.uniforms['scale'].value = 3
    composer.addPass(dotScreenPass)

    const rgbShiftPass = new ShaderPass(RGBShiftShader)
    rgbShiftPass.uniforms['amount'].value = 0.005
    composer.addPass(rgbShiftPass)

    return composer
  }, [scene, camera, gl, size])

  useFrame((_, delta) => {
    composer.render(delta)
  }, 2)

  return null
}

and the usage is just calling this hook in a component:

export const Dog: React.FC<PrimitiveProps> = (props) => {
  const ref = useRef(null!)
  const { scene } = useGLTF('/dog.glb')

  usePostProcess()

  useFrame((state, delta) => {
    ref.current.rotation.y += 1 * delta
  })

  return <primitive ref={ref} object={scene} {...props} />
}

[szymonhernik]

Any updates in the codebase in relation to this bug? i can't mount effectcomposer.