Ssao and clip planes

Bugs
1

Ssao works with meshes that are cuted by clip plane
https://playground.babylonjs.com/#LHQJ2I

2

Ping @julien-moreau for SSAO :slight_smile:

3

@Zuzukidze looks more like a depth renderer issue.
I can see that the depth fragment doesn’t implement clipping planes support: Babylon.js/depth.fragment.fx at master · BabylonJS/Babylon.js · GitHub

Where for example standard material does: Babylon.js/default.fragment.fx at master · BabylonJS/Babylon.js · GitHub

@sebavan do you think the depth renderer should implement clipping planes support? If yes, then the geometry buffer renderer should too?

Thanks :slight_smile:

4

Yes definitely :smiley:
Should not be too much of a problem as we have shader include for it :slight_smile:

5

Hello,

I created a PR to implement this feature : Add support for clip planes to the depth renderer by fchoisy · Pull Request #12685 · BabylonJS/Babylon.js · GitHub
Something similar had already been done for the outline renderer : Is it possible to access to elements created through renderOutline?

I hope that solves the issue :slight_smile:

2 Likes
6

Thanks a lot for this !!!

7

@fchoisy I’m having trouble getting this to work in conjunction with changing the clipping planes before and after mesh render as shown in the docs.

Here’s the original: Babylon.js Playground

Here’s while trying to clip a single objects dynamically https://playground.babylonjs.com/#EHLHNX#131

Do you have any thoughts about how I can make this work?

8

Hi!

Thanks for your interest in this topic :smiley:
I will try to explain my understanding of why this is happening.

The SSAO Post-process takes its input from the depthMap, which is a texture rendered by the Depth Renderer (see https://github.com/BabylonJS/Babylon.js/blob/4bfb5fe34bb5dfaee4a611dfb4889f8f60dbe2a8/packages/dev/core/src/PostProcesses/RenderPipeline/Pipelines/ssaoRenderingPipeline.ts#L317).

Now because the depthMap is a RenderTargetTexture, it is drawn in a separate step, before the normal render of the scene. You can see this by adding some observers to your Playground :

    sphere.onBeforeRenderObservable.addOnce(function() {
        console.log("before sphere")
    });

    sphere.onAfterRenderObservable.addOnce(function() {
        console.log("after sphere")
    });

    var depthMap = scene.enableDepthRenderer().getDepthMap();
    depthMap.onBeforeRenderObservable.addOnce(function () {
        console.log("before depthMap")
    })
    depthMap.onAfterRenderObservable.addOnce(function () {
        console.log("after depthMap")
    })

which results in

before depthMap
after depthMap
before sphere
after sphere

So using the onBeforeRender/onAfterRender observables will probably not work for your case because the data for the SSAO is generated before onBeforeRender is called.

I think the best solution would be to use the clipPlane properties of the material, as suggested at the bottom of the docs.

Since version 5.33.0, the best way to use clip planes in this case is through the properties material.clipPlane / clipPlane2 / … / clipPlane6. This way, you don’t need to add observers to onBeforeRenderObservable / onAfterRenderObservable.

This gives the following result : https://playground.babylonjs.com/#EHLHNX#132

Let me now if that solves your problem!

2 Likes
9

@fchoisy thank you very much! I really appreciate the explanation and the solution.

10

Nice one @fchoisy !!!