Open ThimoDEV opened 1 year ago
I experienced the same issue. For now, I ended up updating the usePostProcess
hook (from the starter) to add my effects.
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?
@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} />
}
Any updates in the codebase in relation to this bug? i can't mount effectcomposer.
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?