Render lines on TOP of Panel UI element.

Hello,

I am trying to use a Line Renderer to draw a tree diagram on top of a UI Panel. The line shows up both in the Scene and Game views but it renders -behind- the Panel in the Game view. Adjusting z values and sorting layer didn’t seem to help but I could be doing it wrong.

Is there a good way to do this?

Thank you!

1 Like

what type of canvas are you using. a screen space overlay gets drawn on top of everything no matter what

2 Likes

Thank you very much for your reply. I am indeed using a screen space overlay because it is a rather convenient way of ensuring the UI is the correct size for different devices/resolutions. I didn’t realize there was no way to override the draw order of such a canvas, thanks! Even then so I thought that since the lines I am rendering are children of the canvas that the typical rules for draw order based on their order in the Hierarchy would still apply.

It seems that using a Canvas - World Space fixes the draw order problem such that I can now see my rendered lines on top of the UI. It also seems that if I can somehow get the camera size and orientation to fit exactly on top of my canvas that it will work just fine for other resolutions but I am having a hard time doing this. The UI I have built should take up the whole screen on a device with an arbitrary resolution. Is there a way to do this quickly or do I have to manually adjust the size, location, and scale?

Use Screen Space - Camera. Set up the Canvas Scaler component on the canvas to scale with screen size, and use anchors to anchor elements to appropriate corners and so on.

–Eric

1 Like

That does now, again, allow the UI to take up the entire game window despite resolution changes, thanks. However, the rendered lines don’t show up.

Did you assign the camera when using Screen Space - Camera? Otherwise it just acts like Overlay.

–Eric

1 Like

That was it, hah, thanks!

Hello to the both of you !

I know this post is quite old, but I can’t figure out how to draw a line on top of a panel … I’ve tried to use the LineRenderer component, but nothing work, it is always displayed behind the Canvas and panel, even with your solution …
Do you think this solution still work ?
Thank you really much, and have a nice day !

1 Like

Hi @Jamy4000 , I managed to make the lines visible by giving the z coordinate of the line renderer positions a small negative value. Have you tried that?

3 Likes

hi, i have same problem then use additive shader & LineRenderer.
i want to rendering order by distance.

In canvas selecting Screen space - Camera, then assigning camera to Render Camera and then in 3d line component, the sorting order in layer if made as 1, it is appearing over panel

1 Like

So, this stupid thing is not written anywhere and im trying to render something overlayed on top of this canvas for hours.
The canvas should atleast Show some respect for overlay shaders in the future!!

3 Likes