Additional postprocessing with Pipeline

Hi all,
I am using StandardRenderPipeline in a project, I need to add a post processing effect which is not available in standardrenderPipeline. How to do it?

You can chain them by simply adding it to the camera posprocesses :slight_smile:

2 Likes

Is there any reason for StandardRenderPipeline? It is no longer maintained - Using the Standard Rendering Pipeline (depricated) | Babylon.js Documentation

Better choice is Using the Default Rendering Pipeline | Babylon.js Documentation

As for the postProcess, just add them in usual way and chain if you need.

3 Likes

There is no specific reason. I just need supersampling effect. If it is possible with default rendering pipeline. Then that is cool. But can You please share a sample code or PG for super sampling and downsampling with defaultRendering Pipeline. It will be nice .

If you need antialiasing you can use

pipeline.samples = 4;
and if you need FXAA
pipeline.fxaaEnabled = true;

see also Using the Default Rendering Pipeline | Babylon.js Documentation

You can also use MSAA without pipeline, as in the example https://playground.babylonjs.com/#3X7NYB#1

If you want to use other postProcesses with Default rendering pipeline, there are no problems - https://playground.babylonjs.com/#Y3C0HQ#532

1 Like

Also check this - How to get antialiased render output like this - #17 by Evgeni_Popov

1 Like

Thanks a lot for your reply @labris . Please clear my confusion. One of the solution to overcome aliasing, I saw that the super sampling is

new BABYLON.PassPostProcess("scale_pass", 4.0, camera, BABYLON.Texture.BILINEAR_SAMPLINGMODE);
    new BABYLON.PassPostProcess("scale_pass", 2.0, camera, BABYLON.Texture.BILINEAR_SAMPLINGMODE);
    new BABYLON.PassPostProcess("scale_pass", 1.0, camera, BABYLON.Texture.BILINEAR_SAMPLINGMODE);

Please have a look into this Anti-aliasing problem - Questions & Answers - HTML5 Game Devs Forum . here only I got above lines for supersampling. And It is overcoming the aliasing issue too. But the solution given in this link How to get antialiased render output like this - #17 by Evgeni_Popov doesn’t have those three lines of codes. So What is actually supersampling. Please help me to understand

To double the resolution of rendering use
engine.setHardwareScalingLevel = 0.5;

1 Like

Oh. No, Now my confusion level increasing. Then why those three lines . What exactly that will do. and their values like 4.0,2.0,1.0 @labris

new BABYLON.PassPostProcess("scale_pass", 4.0, camera, BABYLON.Texture.BILINEAR_SAMPLINGMODE); is making a render target texture T1 4x bigger than the display size. As it is the first post process of the list, the scene will be rendered to it.

new BABYLON.PassPostProcess("scale_pass", 2.0, camera, BABYLON.Texture.BILINEAR_SAMPLINGMODE); is making a render target texture T2 2x bigger than the display size. As it is smaller than T1 it will be downscaled by using bilinear filtering when generating T2.

new BABYLON.PassPostProcess("scale_pass", 1.0, camera, BABYLON.Texture.BILINEAR_SAMPLINGMODE); is making a render target texture T3 the size of the display. As it is smaller than T2 it will be downscaled by using bilinear filtering when generating T3.

So, in the end, T3 has the size of the display but is coming from a texture that was 4x bigger and that has been downscaled 2 times with bilinear filtering, smoothing things out.

engine.setHardwareScalingLevel = 0.5; is making the engine use a canvas 1/0.5=2 times bigger than the display size. When this canvas is displayed by the browser, it downscales it to the right size. I don’t know if bilinear filtering or another method is used here for the downscaling (probably bilinear).

So, engine.setHardwareScalingLevel = 0.5; is more or less the same thing than:

new BABYLON.PassPostProcess("scale_pass", 2.0, camera, BABYLON.Texture.BILINEAR_SAMPLINGMODE);
new BABYLON.PassPostProcess("scale_pass", 1.0, camera, BABYLON.Texture.BILINEAR_SAMPLINGMODE);

Note however that in the latter case you can also enable MSAA by setting .samples = X on each of the post process.

3 Likes