Postprocess aliasing when using viewport

Hi guys, I found that
Postprocess aliasing when using viewport, the line is broken
multi scene view | Babylon.js Playground (
maybe because rendered on full size and then scaled to half size
Does anyone know how to solve this? thanks!
(I can’t use FFXA in my case by the way.)

I pass the size, it looks good
multi scene view | Babylon.js Playground (

but how to handle it when resizing

You can enable MSAA by doing pp.samples = 4 for eg.

multi scene view | Babylon.js Playground (

It’s better but the line still broken
can I resize the postprocess’ rendertarget ?

My workaround is setting the _options.width and height directly.
multi scene view | Babylon.js Playground (

You can pass 0.5 as the 3rd parameter of the pass post process to use a texture dimension that is half the screen.

That’s essentially what you do when you set a with which is half the screen size, but it also applies to the height.

Also, I removed your render loop, the Playground is already setting its own.

Maybe this reference can help you if you want to draw antialiasing lines that are always at least one pixel large:

1 Like

Thank you so much

I set adaptScaleToCurrentViewport = true, it looks good
adaptScaleToCurrentViewport | Babylon.js Playground (

The PG is good, but in my project the ratio is wrong, i will update later

I use 5.57.1 set forceFullscreenViewport = false, the ratio is right. but…

What if you test with the latest Babylon version?

I tried latest version but I found 3 problems:
1 sky box ratio | Babylon.js Playground (
createDefaultSkybox cause the ratio wrong
2 sky box ratio force full | Babylon.js Playground (
forceFullscreenViewport = false then the width is wrong
3 sky box ratio prepass | Babylon.js Playground (
the prepass is incompatible

sky box ratio ignoreCameraMaxZ | Babylon.js Playground (

ignoreCameraMaxZ = false resolve these problems

But I’m curious why it would affect the aspect ratio.

From my understanding of the code, PostProcess.adaptScaleToCurrentViewport = true will only work if the projection matrix is not recalculated during the post-process pass.

As part of the projection matrix calculation, we get the current aspect ratio by calling this method:

public getAspectRatio(viewportOwner : IViewportOwnerLike, useScreen = false) : number {
    const viewport = viewportOwner.viewport ;
    return (this.getRenderWidth(useScreen) * viewport.width) / (this.getRenderHeight(useScreen) * viewport.height) ;

The first time we calculate the projection matrix, we’re not in the post-process pass, so getRenderWidth() / getRenderHeight() will return the screen size, which is correct and will render correctly => it’s because the viewport width and height are already taken into account in the post-process texture sizes. For the sake of completeness, here’s what we do when adaptScaleToCurrentViewport = true :

if (this.adaptScaleToCurrentViewport) {
    const currentViewport = engine.currentViewport;

    if (currentViewport) {
        desiredWidth *= currentViewport.width;
        desiredHeight *= currentViewport.height;

However, if getAspectRatio is called during the post-process pass, getRenderWidth() / getRenderHeight() will return the size of the post-process texture, which has been reduced because of adaptScaleToCurrentViewport = true (see explanations above), resulting in a distorted rendering.

And this is what happens when currentSkybox.ignoreCameraMaxZ = true: in this case, we need to recalculate a specific projection matrix for the currentSkybox and then restore the normal camera projection matrix. It’s this last step that will call getAspectRatio() in the context of the post-process pass and return an erroneous value.

I have to say I don’t see a solution, other than the workaround you did (currentSkybox.ignoreCameraMaxZ = false) which only works because it doesn’t trigger a call to getAspectRatio() during the post-process pass.

cc @sebavan for his opinion.

Same as you I wonder how we can improve this for 7.0

1 Like

I understand, thank you for the explanation.