Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: Ana on December 20, 2013, 02:02:24 PM

Title: Custom mesh drawing in between GUI elements
Post by: Ana on December 20, 2013, 02:02:24 PM
I need to draw a runtime generated plane that is not just a quad in the middle of my NGUI GUI. When I say in the middle, I mean it needs to be in front of some UI elements and behind others. The plane needs a transparency enabled shader, I don't care which one, I can use the same shader NGUI is using.
How do I go about doing this?
When I use the same shader as NGUI on the plane, it is always behind the NGUI even in the scene view.
Title: Re: Custom mesh drawing in between GUI elements
Post by: ArenMook on December 21, 2013, 02:41:15 AM
To draw a mesh in between of UI, you need to separate the background and foreground elements into different panels, and set up render queues on those panels. For example if your 3D object was using a render queue of 3000, you would want to have your background panel use a lower render queue (such as 2900) and your foreground panel to use a higher render queue (such as 3100).
Title: Re: Custom mesh drawing in between GUI elements
Post by: Ana on December 21, 2013, 06:19:00 AM
All of the panels are ordered as they should be in the render queue, but the plane doesn't use the render queue because it isn't being drawn by the panel. It's just a regular mesh with a mesh renderer.
How do I make it drawn with a panel?
Should I edit my UI camera from 2D to 3D?
Title: Re: Custom mesh drawing in between GUI elements
Post by: Nicki on December 21, 2013, 08:24:38 AM
You can set renderqueue in the shader you use for the 3d object. Alternatively, you have to do it with 3 cameras and 3 layers: 2d, 3d, 2doverlay.
Title: Re: Custom mesh drawing in between GUI elements
Post by: Ana on December 22, 2013, 10:54:33 AM
Thank you, I hard coded the render queue in the shader so it is drawn in the middle, it works for current set up. But in the future if my UI changes I'll have to change it. Is there any other way? Having 3 cameras isn't a good solution. :(
Title: Re: Custom mesh drawing in between GUI elements
Post by: ArenMook on December 22, 2013, 11:55:17 AM
Yes. I'll create a helper script to do this automatically.
Title: Re: Custom mesh drawing in between GUI elements
Post by: Nicki on December 27, 2013, 10:21:46 PM
Looking forward to that helper script, as I'm just going the multiple camera route so far. ;)
Title: Re: Custom mesh drawing in between GUI elements
Post by: Ana on December 29, 2013, 03:19:57 PM
Any luck with the helper script?
I thought I made it work, but it works in Unity Editor and not  when I build it for my phone.
Title: Re: Custom mesh drawing in between GUI elements
Post by: zazery on December 29, 2013, 03:46:43 PM
It was posted in the Useful stuff (http://www.tasharen.com/forum/index.php?topic=776.msg34546#msg34546) thread I believe.
Title: Re: Custom mesh drawing in between GUI elements
Post by: Nicki on December 29, 2013, 05:38:45 PM
http://www.tasharen.com/forum/index.php?topic=776.msg34546#msg34546
Title: Re: Custom mesh drawing in between GUI elements
Post by: Ana on December 30, 2013, 04:21:37 AM
That's the promised helper script?
It's not all that helpful because it is still "hardcoding" the render queue instead of changing it dynamically based on a panel for example.
I am working on a script that changes the render queue dynamically based on a panel it is supposed to be behind. I'll post it when I'm done (if I succeed).
Title: Re: Custom mesh drawing in between GUI elements
Post by: Ana on December 30, 2013, 05:32:44 AM
Here is what I'm doing in my code to put custom object in between UI draw calls. You just need to specify the UIPanel that needs to be on top of this object.
It will then determine at runtime which render queue it should have so it always stays one render queue behind given panel.
You can call it OnEnable if you'd like, that way when the object with the script is enabled it adjusts itself to draw correctly.

I hope it helps.

  1. /// <summary>
  2. /// Panel drawing UI elements that are supposed to be in front of this
  3. /// </summary>
  4. public UIPanel PanelOfFrontUILayer;
  5.  
  6. void SetUpRenderQueue()
  7.     {
  8.         // find the first draw call this needs to be in front of
  9.         UIDrawCall lastDrawCall = null;
  10.         for (int i = 0; i < UIDrawCall.list.size; i++)
  11.             if (UIDrawCall.list[i].panel == PanelOfFrontUILayer)
  12.                 lastDrawCall = UIDrawCall.list[i];
  13.  
  14.         if(lastDrawCall != null)
  15.             renderer.material.renderQueue = lastDrawCall.finalRenderQueue - 1;
  16.     }
  17.  
  18.