Depth sorting problem when deforming vertices in Node Material Editor

I’m attempting to create a material using NME that deforms a triangle mesh’s vertices so that it looks like a billowing sail. However, when I deform the vertices it can result in depth sorting issues. I’m seeking advice on how to fix this.

The images below illustrate the problem. Both images are of the same two-sided “MainSail” model spinning clockwise via the turntable option in the NME preview. The camera is positioned slightly above the sail in both images. The sail model has faces pointed in both directions (so that it’s truly two-sided.)

Deforming along the negative X axis == Good depth sorting:
Depth Sorting Good

Deforming along the positive X axis == Bad depth sorting
Depth Sorting Bad

Here’s the NME composition for you to examine. Be sure to load in the “MainSail_DoubleSided.glb” model available here for best effect.

Any help is greatly appreciated!

The windings of the faces are inverted in the second case: you should invert the windings by changing the sideOrientation property of the material. You can’t do this in the NME, you have to do it in the playground (or in your own project).

However, when the object is loaded from a glb/gltf, the side orientation is overriden by the mesh and the property can be found in mesh.overrideMaterialSideOrientation instead of material.sideOrientation. So, you will need something like mesh.overrideMaterialSideOrientation = BABYLON.Material.CounterClockWiseSideOrientation;

1 Like

Thanks for the insight. But both “sides” are a part of a single mesh (two triangles sandwiched back-to-back inside a single mesh), so won’t changing the “sideOrientation” of the material just invert the problem so that it impacts the opposite side?

Is there a way in Blender I can adjust the problematic faces to fix their winding order so I don’t need to do any manipulation of the mesh rendering in code?

I don’t know Blender so I can’t tell, but you would need to invert the windings of the faces on which you apply DeformAmount=+1.