Composer in react three fiber makes blank screen

Questions
,
1

Hi,
i’m trying to understand why this happens,
this is my effects component

import * as THREE from 'three'
import React, { useRef, useMemo, useEffect, useState } from 'react'
import { extend, useThree, useFrame } from '@react-three/fiber'
import { EffectComposer } from 'three-stdlib'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass'
import { FilmPass } from 'three/examples/jsm/postprocessing/FilmPass'

extend({ EffectComposer, ShaderPass, RenderPass, UnrealBloomPass, FilmPass })

export function Effects() {
  const composer = useRef(EffectComposer);
  const [enabled, setEnabled] = useState(true);
  const { scene, gl, size, camera } = useThree()
  const current = useThree((state) => state.performance.current)
  const aspect = useMemo(() => new THREE.Vector2(512, 512), [])

useEffect(() => {
  if(current < 1) setEnabled(false)
  else setEnabled(true)
}, [current]);

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

useFrame(() => composer.current.render(), 1)

return (
  <effectComposer ref={composer} args={[gl]}>
    <renderPass attach="passes" scene={scene} camera={camera} />
    <unrealBloomPass attach="passes" args={[aspect, 2, 1, 0]} />
  </effectComposer>
)

}

I see blank screen, the line is obv the composer.current.render(), any suggestions?
Thank you

2

the syntax is slightly off, it’s passes-0 and passes-1, you’re essentially writing into an array of passes. but there’s no reason to mess with any of that, just use drei/Effects (which does exactly what you’re doing above, it abstracts the boilerplate, including attach) or better pmndrs/postprocessing

bloom with three/jsm/EffectComposer via drei/Effects

bloom with pmndrs/postprocessing

3

Thanks a lot,
I just tried with drei/Effects but i hade issues with the implementation of SAO.
I go back to three js composer also to avoid the MSAA anti aliasing, that dump fps in my scene.
the syntax correction saves me :slight_smile:

4

there wouldn’t be any difference, SAO works the same. this is what it does drei/Effects.tsx at 5d361031bbc6349ff581a86821db0f2eb63fc7d3 · pmndrs/drei · GitHub in the end all of this is just light abstraction to kill some pesky boilerplate, but nothing really changes what the composer is or how the effects and passes work.

1 Like