# Composer in react three fiber makes blank screen

**URL:** <https://discourse.threejs.org/t/composer-in-react-three-fiber-makes-blank-screen/44888>\
**Category:** Questions\
**Tags:** effect-composer, react-three-fiber\
**Created:** [November 18, 2022, 2:20pm UTC](https://discourse.threejs.org/t/composer-in-react-three-fiber-makes-blank-screen/44888 "2022-11-18T14:20:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![GrikFreak](https://avatars.discourse-cdn.com/v4/letter/g/47e85d/32.png) [@GrikFreak](https://discourse.threejs.org/u/GrikFreak)\
**Post date:** [November 18, 2022, 2:20pm UTC](https://discourse.threejs.org/t/composer-in-react-three-fiber-makes-blank-screen/44888/1 "2022-11-18T14:20:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [November 18, 2022, 2:37pm UTC](https://discourse.threejs.org/t/composer-in-react-three-fiber-makes-blank-screen/44888/2 "2022-11-18T14:37:37Z")

</div>

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 hdr workflow - CodeSandbox](https://codesandbox.io/s/bloom-hdr-workflow-gnn4yt)**
>
> bloom hdr workflow by drcmda using @react-three/drei, @react-three/fiber, @types/three, leva, react, react-dom, react-scripts, three

bloom with pmndrs/postprocessing

> **[React EllipseCurve - CodeSandbox](https://codesandbox.io/s/react-ellipsecurve-xzi6ps?file=%2Fsrc%2FApp.jsx)**
>
> React EllipseCurve by drcmda using @react-three/drei, @react-three/fiber, @react-three/rapier, react, react-dom, react-scripts, three

---

<div class="post-metadata">

**Author:** ![GrikFreak](https://avatars.discourse-cdn.com/v4/letter/g/47e85d/32.png) [@GrikFreak](https://discourse.threejs.org/u/GrikFreak)\
**Post date:** [November 18, 2022, 2:45pm UTC](https://discourse.threejs.org/t/composer-in-react-three-fiber-makes-blank-screen/44888/3 "2022-11-18T14:45:43Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [November 18, 2022, 3:04pm UTC](https://discourse.threejs.org/t/composer-in-react-three-fiber-makes-blank-screen/44888/4 "2022-11-18T15:04:27Z")

</div>

there wouldn’t be any difference, SAO works the same. this is what it does [drei/Effects.tsx at 5d361031bbc6349ff581a86821db0f2eb63fc7d3 · pmndrs/drei · GitHub](https://github.com/pmndrs/drei/blob/5d361031bbc6349ff581a86821db0f2eb63fc7d3/src/core/Effects.tsx) 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.