Squircle / Superellipse for UI / Gizmos / Mesh

[Bcompartment]

What problem does this solve or what need does it fill?

Squircles have long been an integral part of design both 2d and 3d. Based on the superellipse.
2D example:

3D example:

What solution would you like?

• UI (mostly corners)
• Gizmos
• Mesh primitive

What alternative(s) have you considered?

Not that important to implement.

Additional context

https://en.wikipedia.org/wiki/Squircle
https://mathworld.wolfram.com/Squircle.html
https://dev.to/ndesmic/how-to-draw-squircles-and-superellipses-3d14
https://arxiv.org/ftp/arxiv/papers/1604/1604.02174.pdf
https://www.figma.com/blog/desperately-seeking-squircles/

[alice-i-cecile]

Is the existing border radius implemented in #12500 sufficient for your needs with respect to UI?

[Bcompartment]

Is the existing border radius implemented in #12500 sufficient for your needs with respect to UI?

Let me explain my motivation.
Math explanation of "Squircular Calculations" https://arxiv.org/ftp/arxiv/papers/1604/1604.02174.pdf

A “squircle” is a sort of compromise between a square and circle, but one that differs from a square with rounded corners. ...
To get a smoother transition from the corners to the flat sides, designers use what mathematicians would call Lp. 1 article

For a rounded square, the curvature would be zero over the flat sides and jump to some constant value over the circular caps, this creates visible "edge in curvature". IMO squircles can add some subtle softness and "refined look" to UI designs.
Its mostly aesthetics, but some fruit corp. with market cap of $2.9 T (may 2024) using it in its all new products (for good reason I guess). More info here 2 article.
The discovery of the shape goes back to Gabriel Lamé in 1818. (so it patent free?)
Most of UI solutions in game engines don't have this build in.
Recent findings suggest that the visual system may encode contours as sets of connected constant curvature segments. More info here: 3 article.
Garrigan & Kellman found psychophysical evidence for the use of constant curvature primitives in contour representation 4 article.

In simple terms smoother transition from the corners to the flat sides makes human brain uwu .

Comparison:

[alice-i-cecile]

Got it, so for the UI part you'd like a way to toggle between traditional rounded corners and squircle-ified corners presumable 🤔 Really not sure about the best API for that.

Well, I think that primitive shapes / meshes / gizmos for both rounded polygons and squircles would be a straightforward enough addition at least.

[IQuick143]

I wonder, how does this work for rectangles and such.

ie: With rounded corners, one has a 9-slice with round circular corners, edge segments and a middle segment, and is free to scale the middle as they please to fit the content.

Since a squircle is a single geometrical shape the most obvious idea is to just stretch it, but that doesn't seem desirable now. But cutting it up into a 9-slice sounds like it would also create corners of some sort at the connections between squircle-segments and straight line segments.

[sidenote: L^p is a norm for a vector space, the reason they mention L^p balls is that a ball is a shape with a constant distance from the center, L^p then defines the form of distance we mean [and it just so happens to agree with the equation for a lamé curve squircle]]

[mweatherley]

There is a pretty Figma blog article about these and some of their challenges (although if memory serves, this is more specifically about trying to replicate Apple's).

Also maybe worth throwing in the phrase "G2 continuity" here (continuity of the second-degree Gauss map), which is the precise condition that these satisfy that rounded corners don't. One notable related fact is that G2 continuity (or rather, its absence) can be pretty clearly seen in specular highlights and reflections on extruded shapes.

[viridia]

For UI, I suspect only a very small niche of Bevy users cares about the distinction between CSS-style rounded corners and "squircles". Rounded corners are mainly useful for editors, where we need some quick and dirty way to do lots of widgets and don't want to spend the extra effort needed to do a nine-patch or a custom shader. For folks writing editors, being able to simply leverage their existing CSS experience is probably all they want.

Most games, on the other hand, will likely want to have fancy animated buttons that don't easily fit within the rounded-corner paradigm.

Bear in mind that rounded corners has a cost: due to the way the UI pipeline works, the border radius parameters have to be specified as vertex data rather than as uniforms. This means that additional parameters increase the vertex buffer size. We need to be careful about adding new features like this, because every user pays the cost even if they don't use that feature.

Also bear in mind that for most editor design mocks, the typical border radius is around 5px, where the difference between the two corner types is virtually indistinguishable.

For people who want interesting shapes for their widgets, it's not that difficult to write a custom shader/UiMaterial that does this.

(This is also why I'm also opposed to adding shadows - their use is extremely rare, and can be easily implemented in a custom UiMaterial.)

[lynn-lumen]

We need to be careful when adding this since there are atleast two shapes known as squircles.

• There is the superellipse $(\frac{x}{a})^p + (\frac{y}{b})^p = 1$ and
• the squircle $(\frac{x}{a})^2 + (\frac{y}{b})^2 + (\frac{s \cdot x \cdot y}{a \cdot b})^2=1$
• as well as many more with some using bezier curves or clothoids? / the euler spiral.

Please note that these two shapes are not identical except for the case that $p = 2, s = 0$ (circles) or $p \rightarrow \infty, s = 1$ (squares).
The superellipse is more common in mathematics, while the squircle seems to be more popular in design spaces where you regularly see the $s$ parameter in $(0, 1)$ used to describe the 'squareness' of the shape.