LineSystem not behaving on Ribbon

I made a simple math function using ribbons and i also want to display the lines parallel to x and y.
So something like this is what I want to achieve:

Here’s what I made so far: Babylon.js Playground
It’s not far but I don’t know why the lines have those gaps in all angles like some sort of reflection.
When i set ribbon material alpha to lower than 1 everything’s ok but that’s not what I want.
What am I doing wrong?

What you see is z fighting, meaning the depth z of the lines and the polygons are very close, and sometimes the one from the polygon is a little bit less than the one from the line, hiding the line.

You need to use the zOffset property of the material to shift the z values a bit. However, it does not work when drawing lines, so use it with the polygon material:


Nothing, there is z fighting going on. Try positioning the ribbon a fraction lower, 0.1, 0.01 see if this alleviates the issue.

You could try not drawing the lines and see if grid material works for you

1 Like

zOffset for material must remember that, better that setting .y

Thanks! That makes sense :slight_smile:
Also, do you know how I could make the lines distant apart from each other when zooming out so it doesn’t appear so black? I know that you can use LOD for meshes but I don’t know if I can apply it here.
Maybe I could set an update method to the object to set the detail based on camera.radius and update onViewMatrixChangedObservable (basically dispose and redraw all every time) but that would be pretty slow I think…

This is off the top of my head with no real thought, as camera moves out at certain distances enable or disable every other line using

You can use the color property of the LineMesh class to make the color fade to green with the distance:

1 Like

Thanks, that could work. But I don’t know how I can loop through LineSystem withouth modifying the paths array. Anyway… this is a more complex issue, for now maybe I should put my mind to work and if I can’t get anything I will post another topic regarding that :slight_smile:

1 Like