Problem using stencil and depth buffer

Questions
1

Hi everyone,

This topic follows this one I opened earlier. I first thought I found the solution here (PG) but new problem arises and I believe I do not understand exactly how depth and stencil tests work.

The thing is I want to draw a pool, but which might be slightly underground so I need to be able to see inside the pool, but only through the water. So, I used the code from the solution mentioned above but I ran into new problems : in this good version (PG), my pool renders fine. But in this wrong version (PG), the mesh looks like a mess and to be quite honnest I do not understand everything that happens here.

The other issue is that it seems I cannot add other objets which won’t be affected by whatever happens from line 90 to 103.

Thanks in advance,
Regards

2

pinging @sebavan

1 Like
3

If that may help, here is a much cleaner code. To see my problem, check out line 18. Changing the value of pool.renderingGroupId sometimes produces weird behavior.

4

I do not think there will be any efficient way to do this with stencil unfortunately. Why not creating a hole in your mesh for the ground instead ?

5

Why not creating a hole in your mesh for the ground instead ?

Because one of the feature we want in our app is to be able to see the pool projected on a photo (a garden, for instance). In that case, there will be no “ground” around the pool. Because photos are taken from a “human realistic point of view” (that is, not from above or google-map-like), we cannot simply use the ground of the photo as an actual object, in which case yes, a hole in the mesh would be enough. We basically want to achieve a portal effect above the pool.

Here is an example to illustrate what we want to achieve :

image
image916Ă—701 100 KB

We clearly see inside the pool but the background is only a 2D vertical image. If I rotate the pool that gives

image
image876Ă—700 86.3 KB

which looks weird but the effet remain : wee see inside the pool only “from above”.

(This was done using Unity. But since many of our projects were exclusively meant to be used as web app, we are currently working with BabylonJS to see how good an alternative it is :slight_smile: )

I do not think there will be any efficient way to do this with stencil unfortunately.

Would you see another approach ?

Thank you for your help.

6

Hi again,

A co-worker finally found a nice solution :slight_smile:

Here it is for anyone in trouble : https://playground.babylonjs.com/#R3SZX4#2

Thank you again for your help. This can be closed.

2 Likes
7

Nice, my struggle was the top border and how to display out of the plane if part of the same mesh :slight_smile:

1 Like