Post processing effect composer not working

Questions
1

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

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
image1060×339 34.3 KB

first one is

console.log(composerScreen)
2

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

3

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

4

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

5

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.

6

and Thank you so so much !!!

7

after trying so much,

I made this sandbox which is not responding :frowning:

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

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

:frowning:

8

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

image
image1545×523 60.7 KB

10

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

11

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

12

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:

image
image1920×1063 247 KB

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

image
image1821×945 180 KB

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