10 Draw Order - inanevin/LinaVG GitHub Wiki

You can use the drawOrder argument sent in all drawing functions to determine the z-sorting of the rendered vertices. Internally, LinaVG has a shape-based sorting on vertices:

  • Any vertex associated with a Drop Shadow is drawn first.
  • Any vertex associated with a Shape (including lines and texts) are drawn second.
  • Any vertex associated with an outline (except SDF text outlines) are drawn third.
  • Any vertex drawn as an AA border is drawn last, on top of everything else.

This logic applies in per-draw-order basis. So, if you draw two rectangles intersecting each other, and if they have the same draw order, this will happen:

StyleOptions opts;
opts.isFilled =true;
opts.color = Vec4(1,0,0,1);
lvgDrawer.DrawRect(Vec2(300, 300), Vec2(500, 500), opts);
opts.color = Vec4(0,0,1,1);
lvgDrawer.DrawRect(Vec2(400, 300), Vec2(600, 500), opts);

image

As you can see, blue one is rendered on top because eventhough they share the same draw order, it was drawn last (function-call wise). However, there is a slight red line intersecting with it. That's the AA border of the red triangle. This is expected, as they share the same draw order and AA's are always drawn on top.

We can fix this by setting a manual draw order:

StyleOptions opts;
opts.isFilled =true;
opts.color = Vec4(1,0,0,1);
lvgDrawer.DrawRect(Vec2(300, 300), Vec2(500, 500), opts, 0.0f, 0);
opts.color = Vec4(0,0,1,1);
lvgDrawer.DrawRect(Vec2(400, 300), Vec2(600, 500), opts, 0.0f, 1);

image

As you can see, we supplied 0 for the red rectangle and 1 for the blue one. The system draws the shapes with the higher draw order on top.

One thing worth noting regarding draw orders is that their effect on performance. Shapes with different draw orders can not be batched into a single draw call, so usually introducing a new draw order to the system will mean at least 1 additional draw call. So try to use the same order on shapes that doesn't overlap. Or even when overlapping, you can get away by drawing some shapes first, such as a static big background.

Regardless, draw orders are easy an intuitive way to support z-sorting in your applications, use them to best fit your needs.

image