Stencil Issue

[gameBole]

Greetings!

I am trying to make a stencil for grass in my environment so that when the player gets inside it, he can see a certain area and I placed dummy objects in it that can be seen only if the player is near them and they can’t be seen if the player is outside the grass. Here is what I achieved so far by following this example:
https://developer.playcanvas.com/en/tutorials/stencil-buffer---3d-magic-card/

This is what it looks like

Now to the issue that I am having,

1. The grass Y axis is higher than the ground obviously, so when the player gets it and the stenciled circle appears, its looks a bit odd. Here is what it looks like if the grass and ground have the same Y axis.
   
   

Notice the difference? This is exactly what I want but I want a different approach because this way in the environment, grass will not be like grass which will ruin the environment. Let me show you what I mean by that

This is when where the grass Y axis is higher in the editor.

And this is where it’s on the same level as the ground(Solve the issue but ruined the environment).

Now to Issue 2, If you zoom in you will notice that the half circle which is outside the grass is a bit different than the ground, this is again the issue with the Y axis, as I have made a duplicate of the ground and applied stencil on it, Which is again a bit higher then the ground on Y-axis.

This is difficult to explain, so if you have any part that you didn’t understand, feel free to ask, and here is the forked project. Dig in.
https://playcanvas.com/editor/scene/1491510

Any kind of help or guidance would be appreciated.

[yaustar]

What do you want it to look like?

[gameBole]

Hey @yaustar , thanks for reaching out.
Notice any difference between pic 1 and 2? the highlighted part. I wanted to achieve the pic 2 result but without changing the scale or let’s say the position of the y-axis (they both will give the same result as they are on the ground). But before I change only the position of the Y-axis of grass that way grass in the environment doesn’t look like grass but more like a plain green field.

Now, I placed boundaries around the grass field (this grass field is what that is in pic 2,4) and for boundaries. I increase the y position of boundaries to 1. Like in pic 3.
This is what it looks like now.

In your opinion, does this looks good? As for me, I think I achieved the task.

[yaustar]

@gameBole

Now, I placed boundaries around the grass field (this grass field is what that is in pic 2,4) and for boundaries. I increase the y position of boundaries to 1. Like in pic 3.

This was the route I was thinking off although there’s a glitch on the boundary depending on the camera angle:

I managed to get around it by using layers to ensure that the grass field that isn’t masked to be rendered after the rest of the world and doesn’t write to the depth buffer (setting on material).

Then have the player render afterwards (note the grass is black because I used a box with front faces culled to quickly test. Really you should have an open top box instead or to just have walls)

Project: PlayCanvas 3D HTML5 Game Engine

[gameBole]

That’s Great! I really appreciate this
That solves issue 1 but issue 2 still remains. I apologize for not explaining that part correctly but now that I have implemented the model, it’s more clear now. Have a look at this

What I want is, not to have this outside part of the circle from grass. I have implemented this model in your project.
Here is the forked project:
https://playcanvas.com/project/966301/overview/yauster-stencil-solution

[yaustar]

Sorry, I still don’t understand what you want from 2?

[gameBole]

It’s okay, look at this

What I want is to not take this highlighted part of the circle in short as it will look odd.

On trigger, the circle is enabled and half part is inside the field while the other half is outside.I want to remove this outside part somehow in order to make it realistic.

Once again, Thank you so much for your time and effort. Really means a lot.

[yaustar]

The way I was thinking of is to use a second stencil that to mask objects in the circle area like this

But I’m running into issues (see red area) that I unfortunately don’t have time to really work through

Here’s the project if you want to try to dig further.

https://playcanvas.com/project/966312

It’s not a perfect solution as it doesn’t cater for mixed areas (eg grass and sand)

[gameBole]

Its look’s amazing @yaustar

This is more than enough for now. I will dig deep into this tomorrow and hopefully, make it look better. And if you have time later on, then I will be grateful if you look into this. But I think I will solve this tomorrow.
And as always. Thanks for solving this.