Render mesh 'between' other regardless of position

Questions
1

Hello, I am trying to achieve something a bit tricky and I cannot get to the solution.

I need to render vertical a plane with a texture to make a ‘fake’ landscape that can be seen through a window. There are ground meshes (horizontal planes) on both sides of the window.

Now is the tricky part, I need to render the texture plane always in front of the outside ground plane (green in PG) to see the whole plane even if it intersects the ground, but it should still be rendered normally with the rest of the scene (blue and red in PG).

With the help of this topic, i managed to create this playground, with half the desired behaviour : Rendering order test | Babylon.js Playground (babylonjs.com)

The wanted behaviour is exactly what is happening with the right part of the scene (red ground and walls). The thing is that the blue part doesn’t behave the same, and its seems to be related to the order of creation of the meshes.

I tried to play with a custom renderingOrder function, but this doesn’t seem to have an effect (but I may not understand fully how it works).

I think I could do it with renderingGroupIds but in the final scene i have a significant amount of meshes and i would like to avoid setting their renderingGroups manually, even for meshes that are not directly involved in the effect.

Thank you for any help ! :pray:

2

What about this?

(Just removed setting plane.material.depthFunction)

2 Likes
3

Thank your for your help :slight_smile:
It is indeed working in this example but it made me realise that my PG is not perfectly mirroring the situation i am facing.

In my app, I also have a skybox as a background, that is supposed to be displayed behind the green plane. Thus the green plane is no longer the farthest element to render.

With your solution, the green plane is invisible because the skybox is rendered in front of it.
I updated the PG, you can hide/show the skybox with Space key : Rendering order test | Babylon.js Playground (babylonjs.com)

The final goal is to have the skybox and the green plane looking like an infinite plane going until the horizon over it.

4

Why not to use renderingGroupId to control the drawing order of the meshes on the scene?

https://doc.babylonjs.com/features/featuresDeepDive/materials/advanced/transparent_rendering#rendering-groups

1 Like
5

If thought it would be complicated to manage for every type of mesh that is generated everywhere in the source code. The rendering order solution looked like a cleaner option as it would involve less code, but maybe I will keep that solution if I cannot get the other to work.

6

But you’ll end up with a clean solution w/o hacking the rendering pipeline.

1 Like
7

You may be right, I finally did something like this : Rendering order test | Babylon.js Playground (babylonjs.com)

Here is the involved code, it sets the renderingGroupId for every new mesh directly after its creation in a scene observable, which is quite compact :

scene.onNewMeshAddedObservable.add(newMesh => {
    let groupId = 2;
    if(newMesh.name === 'dome' || newMesh.name === 'ground2'){
        groupId = 0
    }
    else if(newMesh.name ===  'plane' ){
        groupId = 1
    } 
    newMesh.renderingGroupId =groupId;
})

Thank you for the help :pray:

1 Like