Displaying the mouse ring on the ground and encountering z-fighting issues when using multimaterial

Questions
1

I refer to https://playground.babylonjs.com/#UIVCZ3#5 I encountered a problem with implementing a mouse pointer ring on the ground to display the current position of the mouse on the ground. I wanted the mouse ring to be able to be attached to the existing material on the ground, and I implemented it using multimaterial. However, due to the use of submesh, Z-fighting occurred. I was wondering how to handle this issue and whether it could be implemented through the EffectLayer. I have been looking at the code of the EffectLayer for a long time and tried, but ultimately it was not implemented.

Demo code：

3

Mix materials don’t support code injection, so you can’t use CustomMaterial or material plugins for that.

@PirateJC has made an excellent node material to achieve what you want to do, maybe you can use it / adapt it for your project :

4

Thank you for your help. I think this is a very good method. I will try it out and use Spotlight’s projectTexture to handle it. I wonder if it can achieve the same way of building roads as Cities, where auxiliary lines are built on the ground, as shown in the following pictures.

WX20250203-205202@2x
WX20250203-205202@2x1356×1226 56 KB

WX20250203-205318@2x
WX20250203-205318@2x1920×1327 104 KB

WX20250203-205352@2x
WX20250203-205352@2x1882×928 91.8 KB

What I need to achieve is the contour line of the ground

5

Yes, you can project anything, it’s a simple texture (not necessarily a procedural texture, as in PG above).