Challenge: Text follows a curve/spiral & decreases in font size

I know this is asking a lot of threejs, but I’ve been incredibly impressed with things like three-bmfont-text and troika-three-text lately. I’m wondering if anyone has implementation ideas for the following challenge:

At first I thought, wouldn’t it be cool if you could make a troika-three-text geometry and then bend it in a circle and shrink it down as it approaches the center. But it doesn’t look to me like that’s how troika-three-text works (for several reasons, including optimization).

Another idea is to write each letter out individually, measure its glyph width & height, and then manually plot along a bezier path. I think this has the highest chance of succeeding (and is perhaps easiest) but is probably not “as fast” as instancing.

A third idea is to implement instancing with more control over position, size, and rotation. For example, troika-three-text currently takes a parameter, curveRadius that allows text to follow a simple radial curve in the Z direction (convex or concave). A more general abstraction could be to follow a bezier curve.

Does anyone have other ideas to make this easy/fast/possible?


Something like this maybe:

This is a simplified version of that:

Thank you, that looks like a cool idea.

The author of Troika had some additional ideas here: [troika-three-text] Glyphs following a curve? · Issue #151 · protectwise/troika · GitHub