Effect Composer in three.js throwing error and not rendering - three.js

Question

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
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 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
scene.add(mapCamera)
}
my render code is:
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/2bc49e956cd9a4af590aae3b66d4d64d2b9093b4/src/client/client.ts#L150
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
console.log(composerScreen)
and when i click on the error in console log
and it goes to composerScreen.render() inside render function