Hi, I’m having a problem while using UtilityLayer together with PostProcess and I hope somebody here can give me a clue.
I reproduced my problem on the playground below:
Long story short: I’m trying to setup a scene with the utility layer¹ as a "background"² that isn’t affected by fog neither by depth of field, while the front elements are. I tried to use another camera too, with different layerMasks, but the same thing happened when applying the post processing. Besides, I prefered to use the utility layer so that I don’t need to bind the movement of the 2 cameras together.
¹ Yes, with autoClearDepthAndStencil and postProcessesEnabled to false.
² A mesh really, Layer with isBackground to true isn’t what I want, I need something to move along with the camera, like a skybox.
Does anyone have any idea of what I’m missing? maybe some clear depth to false somewhere or maybe try to use RenderTargetTexture?
The object disappears because the post process makes the main scene to render in a separate offscreen frame buffer and then copy this frame buffer into the main buffer. The zbuffer is not updated in the copy process (it’s the zbuffer of the offscreen framebuffer which is), so when drawing the utility scene it is drawn over the whole screen and overwrites the cube.
I don’t see how to overcome this, we would need to copy the zbuffer of the offscreen frame buffer to the main frame buffer but I don’t think it’s possible in WebGL.
[…] One way to do it is to clear the post process frame buffer with an alpha value of 0 and to blend the background scene with the post process buffer. For this to work, you need to draw the background scene first:
It’s the last post process of the chain that needs to be blended, so I had to do
const postProcess = pipeline.depthOfField._effects[pipeline.depthOfField._effects.length - 1] to get it.
Great explanation of the problem, now I understand and I’ll try to make it work outside of the playground on my project.