text outline/shadow/gradient

[david-vanderson]

ryuukk on discord asked if we had text outline/shadow/gradient and gave this example:

The primary usecase is to make text legible when on top of arbitrary colors. Secondary is to give more visual options.

Outline means that every glyph appears surrounded by a halo of black (hopefully any color, but at least black). Shadow is similar, but only in a single direction (most likely bottom-right, but hopefully any direction).

ryuukk gave an implementation strategy where we bake the outline/shadow into the text rasterization process. We can do that, but I'm worried about thick outlines overlapping the previously drawn character.

The first strategy ("copy triangles") I want to try is having renderText first render all the characters (in a single line) in the outline color multiple times offset in each direction (is up, down, left, right enough?). Then render the normal characters on top.
Upsides:

• not having a separate rasterization
• can independently color the outline/font at render time
• optionally keep the character spacing the same (so the outlines can all run together)
• can dynamically change the shadow direction
  Downsides:
• might not look good, because multiple outlines on top of each other can kill antialiasing
• thick outlines might require even more copies offset by different amounts in each direction

Text gradient is somewhat orthogonal, and is the ability to have a vertical gradient from the top of the text line (not each individual glyph) to the bottom. I don't think a non-vertical gradient makes sense?

Right now we should be able to do this by manipulating the colors assigned to each vertex when rendering text. If the "copy triangles" approach for outlines/shadows works, we could also have a separate vertical gradient on the outline/shadow, although I'm not sure how useful that would be.