PostProcessing out of sync

I’ve always noticed a small delay on postprocessing that leads to visible artifacts when composing the images. This is what happens, with a dramatic exaggeration due to slowed fps, added for emphasis and laughs:

On higher FPS and slow motion it’s okay, but with slower framerates and faster motion things get awkward.

Any ideas of what could be causing this lack of sync? This is a PostProcessing pipeline using a variation of the old OceanPP, with scene.enableDepthRenderer and a PassPostProcess.

I’m guessing the depth buffer is not properly synced and uses the previous frame instead of the current one, but I’ve no idea how that could happen.

Spector is your best friend here :slight_smile:

Maybe the depth renderer creates its texture after you use it in a shader, in effect using the previous one and not the current one. But if you are using the depth buffer in a post process that should not happen… That’s why Spector may help finding the problem.

Sorry for resurrecting the thread, but I only had time to look into this now.

The issue is with effect.setTexture('positionSampler', this._geometryRenderer.getGBuffer().textures[2]);, which is set on onApply(). From what I see 2 is the POSITION_TEXTURE_TYPE. I’m not sure what a position texture is – is it the world coordinates for the pixel?

I tried moving this call to onBeforeRender, same issue. If moved to onAfterRender the effect disappears but there are many render artifacts.

Any tips for how I could properly get the position texture for the current frame and fix this problem? Thank you!

Adding @julien-moreau who built the ocean PP , it sounds really tough to help without a playground here :frowning:

it really feels like one is rendered after you use it creating this one frame delay.

I’ll try to create a PG. Meanwhile, here’s the actual OceanPP code if it helps (it’s slightly changed from the original, but nothing that would cause this issue): lajevr/OceanPostProcess.js at master · Corollarium/lajevr · GitHub

Going back to basic Babylon, should the gbuffer already be updated with the current frame when a postprocess runs in a PostProcessRenderPipeline? I’m using pretty much the same code from Babylon.js Playground :

    const pipeline = new BABYLON.PostProcessRenderPipeline(this.engine, 'pipeline');
    // create the ocean pp, this is essentially new OceanPostProcess(options)
    const oceanPP = this.loadOceanPP();

    const fxaa = new BABYLON.FxaaPostProcess('fxaa', 1.0, null, null, this.engine);

    const effects = [this.oceanPostProcess, fxaa];
    const renderLayer = new BABYLON.PostProcessRenderEffect(
      this.engine,
      'renderLayer',
      () => { return effects; }
    );

    pipeline.addEffect(renderLayer);
    this.scene.postProcessRenderPipelineManager.addPipeline(pipeline);
    this.scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline('pipeline', this.camera);

I would say yes :slight_smile:

Laje de Santos em Realidade Virtual and actual demo of course :slight_smile:

Hi @brunobg !

I really don’t have any idea of what is happening :slight_smile:
Do you confirm that you can reproduce the same glich, on a device that works well, when you try to throttle its CPU or whatever? In order to try get lower FPS

I know that this post-process can generate glitches on some devices and is not inteded for low-end devices. I never reproduced your glitch but had other glitches especially on mobile devices and integrated GPU chipsets such has intel HD graphics

1 Like

Hi @julien-moreau! thank you for the reply.

Yes, this is happening on my desktop too, which is a pretty good machine with a nice GPU. The shader code was tweaked heavily, but only for “eye candiness”. The basic flow is the same and no changes were made to the positionSampler.

PG reproducing the problem: https://playground.babylonjs.com/#98XVMM#2 just shake your camera with the mouse quickly and you’ll see the issue.

Could anyone tell me a little bit about the gbuffer meanwhile? I’m still trying to track this issue. For smaller objects this is incredibly annoying even for small camera movements. Thanks!

You should make your post process not reusable in this case https://playground.babylonjs.com/#98XVMM#5 line 21

I ll check with @Deltakosh why we have this side effect in reusable setup: https://playground.babylonjs.com/#98XVMM#7 basically we are taking the previous texture vs the new one in reusable mode but I am always confused with this flag so I prefer to ask the BOSS :wink:

1 Like

Sorry what is the question? :slight_smile:

The reusable mode is meant to let you reuse the same RTT in a chain like A->b->A

@Deltakosh Yup but when turned on it looks like we are using the wrong frame in the Post Pro.

If you move your mouse in https://playground.babylonjs.com/#98XVMM#7 you can see the edges of both textures (pp sampler and geometryRenderer one) do not fit. This does not happen when turned off. In Spector I can see it is using the previous frame in the PP and not the current one in this case but not sure I use it correctly.

1 Like

Nice catch :slight_smile: Thank you, once again you’re saving me and my arcane bugs.

1 Like