# Post processing effect composer not working

**URL:** <https://discourse.threejs.org/t/post-processing-effect-composer-not-working/44141>\
**Category:** Questions\
**Tags:** post-processing\
**Created:** [October 30, 2022, 12:33am UTC](https://discourse.threejs.org/t/post-processing-effect-composer-not-working/44141 "2022-10-30T00:33:48Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [October 30, 2022, 12:33am UTC](https://discourse.threejs.org/t/post-processing-effect-composer-not-working/44141/1 "2022-10-30T00:33:48Z")

</div>

I made two effect composer one for the main screen and one for mini-map view of the whole scene in minified form in top of screen.

I did this:

```javascript
function postProcessing(renderer) {
    composerScreen = new EffectComposer(renderer)

    // RenderPass is normally placed at the beginning of the chain in order to provide the rendered scene as an input for the next post-processing step.
    const renderPass = new RenderPass(scene, camera)
    // When using post-processing with WebGL, you have to use FXAA for antialiasing
    // Passing { antialias: true } to true when creating WebGLRenderer activates MSAA but only if you render to the default framebuffer
    // (directly to screen).
    const pixelRatio = 1
    let fxaaPass = new ShaderPass(FXAAShader)
    fxaaPass.material.uniforms['resolution'].value.x = 1 / (window.innerWidth * pixelRatio)
    fxaaPass.material.uniforms['resolution'].value.y = 1 / (window.innerHeight * pixelRatio)
    // const copyPass = new ShaderPass(CopyShader)
    // meaning of renderToScreen. I have to set to true only for the 'last' effect
    fxaaPass.renderToScreen = true
    console.log(composerScreen)
    composerScreen.addPass(renderPass)
    composerScreen.addPass(fxaaPass)
    // when screen is resized update fxaa resolution uniform as well

    // The width and height of the THREE.EffectComposer.renderTarget must match that of the WebGLRenderer.
    // #TODO: WHAT? Why? https://stackoverflow.com/questions/16167897/three-js-how-to-add-copyshader-after-fxaashader-r58
    composerMap = new EffectComposer(renderer, renderTarget)
    composerMap.setSize(512, 512)
    let renderPassMap = new RenderPass(scene, mapCamera)
    composerMap.addPass(renderPassMap)
    var effectFXAA_Map = new ShaderPass(FXAAShader)
    effectFXAA_Map.uniforms['resolution'].value.set(1 / 512, 1 / 512)
    composerMap.addPass(effectFXAA_Map)
    const copyPass = new ShaderPass(CopyShader)
    copyPass.renderToScreen = true
    composerMap.addPass(copyPass)
}

```

and I call

```
postProcessing(renderer)

```

and renderer variable passed in that function is:

```
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.autoClear = false

```

and mapCamera used in renderpass in second composer is

```javascript
function initMapCamera() {
    mapCamera = new THREE.OrthographicCamera(left, right, top, bottom, 0.1, 1000)
    // for camera to see down up should be on z axis
    mapCamera.up = new THREE.Vector3(0, 0, -1)
    mapCamera.lookAt(0, 0, 0)
    mapCamera.position.y = 512
    scene.add(mapCamera)
}

```

my render code is:

```javascript
function animate(now: number) {
    requestAnimationFrame(animate)
    const delta = now - lastTime
    lastTime = now
    TWEEN.update()
    KeyBoardHandler.keyUpdate(handlers, keys, delta)
    render()
}

function render() {
    renderer.setViewport(0, 0, window.innerWidth, window.innerHeight)
    console.log('composer screen', composerScreen)
    composerScreen.render()
    renderer.clear(false, true, false)
    renderer.setViewport(20, window.innerHeight - 512, 256, 256)
    composerMap.render()
    // controls.update(clock.getDelta())
    // labelRenderer.render(scene, camera)
    // renderer.render(scene, camera)
}

```

I tried to add all relevant code here and this is the code repo:

> <https://github.com/pravinpoudel/building-annotation/blob/FPC/src/client/client.ts#L184>

I have two branches, one is main and another is FPC which have the code with post-processing

It is not able to render anything and it is showing my error:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/6/462007546ef774ccccfaecdc738e5c3ebde8eee4.png)

first one is

```
console.log(composerScreen)

```

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 3, 2022, 8:33am UTC](https://discourse.threejs.org/t/post-processing-effect-composer-not-working/44141/2 "2022-11-03T08:33:53Z")

</div>

can anyone please give me feedback on this, i am still stuck on this !!!

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 3, 2022, 9:06am UTC](https://discourse.threejs.org/t/post-processing-effect-composer-not-working/44141/3 "2022-11-03T09:06:38Z")

</div>

Hi @prisoner849 I am sorry for this is unethical and bad manner to mention you but I am stuck in this for the last week, could you please help me in this !!

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [November 3, 2022, 9:25am UTC](https://discourse.threejs.org/t/post-processing-effect-composer-not-working/44141/4 "2022-11-03T09:25:34Z")

</div>

Any chance to provide a link with live example?  
Or a minimal example, that demonstrates the issue?

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 3, 2022, 9:46am UTC](https://discourse.threejs.org/t/post-processing-effect-composer-not-working/44141/5 "2022-11-03T09:46:06Z")

</div>

does sharing a GitHub code work?  
I dont know how I can make it live example. I can try with another demo code.

I can do that.

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 3, 2022, 9:46am UTC](https://discourse.threejs.org/t/post-processing-effect-composer-not-working/44141/6 "2022-11-03T09:46:25Z")

</div>

and Thank you so so much !!!

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 3, 2022, 11:43am UTC](https://discourse.threejs.org/t/post-processing-effect-composer-not-working/44141/7 "2022-11-03T11:43:28Z")

</div>

after trying so much,

I made this sandbox which is not responding ☹

[https://codesandbox.io/s/mystifying-fermat-y04foe?file=/src/index.js](https://codesandbox.io/s/mystifying-fermat-y04foe?file=/src/index.js)

I am trying it for the first time.

If that is messy, this is the repo ( if it helps):

> <https://github.com/pravinpoudel/building-annotation/blob/3ee1cd26477353e77a73867a13c6308d6871108a/src/client/client.ts#L385>

I am sorry. i struggled so much even after spending so much time to make it work on the sandbox.

☹

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 3, 2022, 11:58am UTC](https://discourse.threejs.org/t/post-processing-effect-composer-not-working/44141/8 "2022-11-03T11:58:02Z")

</div>

and this is console of first composer and second is error on  
composer.render()

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/d/ed4b08c6dea14bf494e3d04cd669cfb1e2bbf894.png)

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 5, 2022, 5:21am UTC](https://discourse.threejs.org/t/post-processing-effect-composer-not-working/44141/10 "2022-11-05T05:21:44Z")

</div>

hi @prisoner849 , do you think this is not enough?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [November 5, 2022, 9:18am UTC](https://discourse.threejs.org/t/post-processing-effect-composer-not-working/44141/11 "2022-11-05T09:18:59Z")

</div>

Any chance to explain, why do you call `postProcessing(renderer)`, where you use `mapCamera`, before `initMapCamera()`?

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 6, 2022, 4:33am UTC](https://discourse.threejs.org/t/post-processing-effect-composer-not-working/44141/12 "2022-11-06T04:33:42Z")

</div>

Ohh !! god, I wasted more than one week just because of this ☹

Thank you so much, sir !!

This is what model is supposed to render like:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/8/e86365cae85bf43f5ce79104debfae8fea7f3417.jpeg)

but in my scene it is like this (dark):

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/b/db10f7015e0ccb7e94cdd913ca736c2a3e1e7531.jpeg)

the scene is so dark !!!

When i included the gammaCorrectionPass before copypass it became this:

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/8/b85b83e912d1c86011921d075a7f536f905119e9.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/8/b85b83e912d1c86011921d075a7f536f905119e9.mp4)

i added a mesh and copy camera position into mesh in every render/request animation but the square in the minified scene in top looks very unsmooth like it is blinking !!!

I checked all over internet, how it is supposed to made but i couldn’t find anything so i did like this.

What are the things that i need to do on this?  
and one thing i notice is that the mesh top view in my minified scene view on left top is not straight but rotated, can i ask why is it like that?

I tried both things i.e adding that box mesh as child of camera and adding camera inside the mesh but none of it work. I thought it will be like scene graph and when i move camera, since that mesh is child of that camera, it will move as well but it didn’t. At last only thing i could do is copying camera position in box mesh in every animation loop.

Thank you so much again, i was hopeless for not able to render that because everything looked correct to me and i don’t know why that error was so vague for this error ☹

Thank you so so much