UI Batch Groups - Need help with Draworder

Help & Support
1

Hey guys :slight_smile:
We are currently trying to improve our UI by using batch groups and we ran into an issue which we are not really sure how to fix.

We are creating quite a few ui elements dynamically. Of those elements, the item we are trying to display can not be batched. They are colored differently from each other (Red and Blue), so each of them internally has their own material, so even though their sprite assets share the same texture atlas, they cannot be batched.

Then we also want to show highlights (Yellow) on top of them. Those are not colored, always the same and the various highlights are in the same atlas, so they can be in the same batchgroup.

What we want to see is the following:
image

But what we actually see is this:
image

This is because of the number of drawcalls, which we want to reduce, and our hierarchy.
image

The first image has 5 draw calls

  1. Background
  2. Red
  3. Highlight
  4. Blue
  5. Highlight

The second image has 4 draw calls because of the batch group on the highlights

  1. Background
  2. Red
  3. Batch group with both highlights
  4. Blue

We tried fixing this by adding another layer for the highlights and rendering the batchgroup in there. Under other circumstances this would work, but our elements are all inside a scrollView. It seems like inside a scrollview only the ui layer can be rendered? We are very confused about this behaviour.

Could you please give us an idea of how to fix the rendering order? Or can you give us insight on how to render other layers than the ui layer inside a scroll view? Here is a sample project with a setup similar to our project.

Thanks

1 Like
2

UI batch groups are buggy at the moment, to the point where I wouldn’t recommend using them unless you really need them. See ticket: Batching UI elements should easier to do correctly · Issue #2778 · playcanvas/engine · GitHub

TLDR, you have to setup the layers in the order that they are rendered for the UI. For some layouts, this is relatively straightforward until they overlap which is the case here.

1 Like
3

Example: https://playcanvas.com/editor/scene/1210088 (only the yellow on red)

image

The layer Top needs to be changed so that he drawing order is manual (this ensures that the rendering order is defined by the hierarchy order)

image
image854×334 14 KB

In the hierarchy, the mask (Viewport) for the elements also needs to the Top layer to be added

image
image866×1440 53 KB

1 Like
4

Thanks, that was the missing information that I needed.

Now that I set the sorting to manual and added the layer to the viewport, I can use different layers to work around our issue, thanks.

1 Like