Page MenuHome

UI : Triangle Icon
Needs RevisionPublic

Authored by Harley Acheson (harley) on Dec 20 2019, 11:41 PM.



In the Blender UI we use some "triangle" icons in a number of places. The "more" in dropdown menus, to "open" and "close" Properties and Preference panels, for the Outliner tree, to indicate sort direction, and elsewhere. However we draw these things in two very different different ways, sometimes with a bitmap icon and sometimes with a vector graphic.

The bitmap icons works well in many cases. They are naturally antialiased and can be fully opaque, but they get fuzzy at larger sizes.

The vector routines draw a triangle that scales perfectly, but can never be fully opaque. This is because the technique we use to antialiase the edges, multidrawing with jitter) always results in some transparency. This becomes an issue when the background has high contrast.

This patch changes the triangle vector code so that it creates a triangle that is both antialiased and fully opaque (if desired), therefore we can use the same method for all usages of UI triangles. It does this by drawing the triangle with slightly more complexity, adding an outer ring that transitions from the desired color to fully transparent. Not only are the diagonals antialised, but the horizontal and vertical sections are perfectly crisp. And no need to draw it eight times.

Here is an example showing the edges:

While the following illustrates the root issue. The left shows the current Outliner using bitmaps. The middle shows what it would look like if we used the current triangle vector code. And the right shows the new opaque vector triangles.

Diff Detail

rB Blender

Event Timeline

Afaik one of the reasons behind the previous AA jittering method is that it works with all drivers and is very predictable. Adding @Clément Foucault (fclem) here to check this new implementation.

Just nitpicking about style.

This new method is better. Yes. It shouldn't have any issue with cross platform difference.

I still don't like that we are using imm for this but meh.... one day maybe we can get rid of it.


rename to aa_ofs.


Add some ascii diagram or clear explanation of what's the drawing pattern is.

This revision is now accepted and ready to land.Dec 21 2019, 2:38 AM

-(value + value) is more straightforward, suggest remove other 0 - ... as well.

Updated with changes suggested in review.

  • Replaced line comments with block comments.
  • Use of nicer "aa_ofs" identifier.
  • Clearer handling of negative values.
  • Added some pretty diagrams showing tri strip sequence order.
Clément Foucault (fclem) requested changes to this revision.Dec 21 2019, 2:41 PM
Clément Foucault (fclem) added inline comments.

What you can do here is to duplicate the 5th vertex to create a degenerate triangle to avoid doing 2 drawcalls.

To do this just remove the immEnd immBegin pair and change the first immBegin(GPU_PRIM_TRI_STRIP, 5);
to immBegin(GPU_PRIM_TRI_STRIP, 9);

This revision now requires changes to proceed.Dec 21 2019, 2:41 PM
Harley Acheson (harley) updated this revision to Diff 20453.EditedDec 21 2019, 8:01 PM

Changes requested by Clément.

@Clément Foucault (fclem) - duplicate the 5th vertex to create a degenerate triangle to avoid doing 2 drawcalls

Thanks! I spent far too much time trying to do it all within the required drawing order, and then didn't realize it was okay to use a degenerate triangle in that way.

This revision is now accepted and ready to land.Dec 22 2019, 1:24 AM

Using this new triangle code to draw the arrows above the popups.

Current arrows for popups are not AA at all - because we need to match to the color of menu inner, which is not jittered. But since these new arrows are drawn differently without jittering they can be used instead and give us AA here. Top is current, bottom is after patch is applied

Can something like D5873 be added here as well?

@Yevgeny Makarov (jenkm) - Can something like D5873 be added here as well?

This last version of this patch does use use this triangle for those used with popovers, so we gain AA for those (there is none now).

However, this wouldn't be as pretty as you do with that patch, drawing the outline around it, which I really like. There might be a combination that would work well. This triangle can definitely cover the bottom hidden outline better because of its opaqueness. Then maybe add those triangle outlines with something jittered. Could be fun to play with.

Julian Eisel (Severin) requested changes to this revision.EditedTue, Jan 7, 5:21 PM

Almost ready! Few things:

  • This scales triangles up a bit, e.g. on panels I find the triangles a bit too big now. For the outliner triangles I don't mind. Before/after:

I assume this is because we now add the aa_ofs which is a bit weird - callers pass in coordinates and the actually used coordinates differ quite a bit. I'd simply make aa_ofs be an input parameter to the function to make that clear. Could add a UI_TRIANGLE_AA_OFS define too. Callers (e.g. the panel draw code) can then adjust coordinates based on that.

  • aa_ofs does not account for pixel size, so I think this will result in different results on retina screens. The triangles may not appear as big there.
  • Given that transparency corrected now, the colors have much more contrast to the background. Again for the panel headers I find it too extreme. I'd suggest either blending/dimming the input color or just reducing its alpha again (easy to do).
This revision now requires changes to proceed.Tue, Jan 7, 5:21 PM

Thanks! All great comments, and will play with it when I get back after the 22nd.

However I’m fairly sure (okay never 100% sure of anything LOL) that the aa_ofs is one of the few things that should not change with pixel size. But will experiment with it.