Post processing effect composer not working

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:

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
    // 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?
    composerMap = new EffectComposer(renderer, renderTarget)
    composerMap.setSize(512, 512)
    let renderPassMap = new RenderPass(scene, mapCamera)
    var effectFXAA_Map = new ShaderPass(FXAAShader)
    effectFXAA_Map.uniforms['resolution'].value.set(1 / 512, 1 / 512)
    const copyPass = new ShaderPass(CopyShader)
    copyPass.renderToScreen = true

and I call


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

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

my render code is:

function animate(now: number) {
    const delta = now - lastTime
    lastTime = now
    KeyBoardHandler.keyUpdate(handlers, keys, delta)

function render() {
    renderer.setViewport(0, 0, window.innerWidth, window.innerHeight)
    console.log('composer screen', composerScreen)
    renderer.clear(false, true, false)
    renderer.setViewport(20, window.innerHeight - 512, 256, 256)
    // 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:

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:

first one is


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

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 !!

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

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.

and Thank you so so much !!!

after trying so much,

I made this sandbox which is not responding :frowning:

I am trying it for the first time.

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

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


and this is console of first composer and second is error on

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

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

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

Thank you so much, sir !!

This is what model is supposed to render like:

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

the scene is so dark !!!

When i included the gammaCorrectionPass before copypass it became this:

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 :frowning:

Thank you so so much