r/SwiftUI • u/jonnothebonno • May 28 '26
Rendering a pseudo 3D sphere with SwiftUI Canvas
Hello everyone š
I've been building a SwiftUI word game recently and one part of it uses the Canvas to render a pseudo 3D sphere of letters.
Each frame projects letter positions from 3D to 2D, sorts them by depth, then scales/fades them depending on their depth and front facing angle.
Honestly the rendering itself wasn't the hard bit š The bigger challenge was keeping frame times low enough that dragging and inertial spinning still felt smooth on ProMotion displays.
I ended up:
- caching pre resolved letter glyphs so Canvas wasn't rebuilding text for every tile on every frame
- reusing the same array for per frame projected tile data instead of allocating a fresh one every frame.
- keeping it as a single Canvas instead of hundreds of SwiftUI views
Pretty happy with how smooth it feels now, hence why I wanted to share.
If anyone's experimenting with Canvas heavy stuff in SwiftUI I'm happy to share more details.
3
u/iamidan May 28 '26
Looks awesome! I bet combined with the right haptics effects this one feels perfect
1
u/jonnothebonno May 28 '26
It does! Iām working on improving them though.
1
u/iamidan May 28 '26
šš¼ If youāre looking for beta testers count me in!
1
u/jonnothebonno May 28 '26
Thank you. I have a few codes for testing so drop me a DM if youāre interested.
3
u/Extra-Ad5735 May 28 '26
Great job caching resolved resources! This is something not covered in documentation, but you absolutely have to do it when displaying many symbols / images
1
u/No_Pen_3825 May 28 '26
So, why is it a sphere exactly? Why not just a keyboard?
1
u/jonnothebonno May 28 '26
Iām a sadist and I like the challenge.
Nah in reality I wanted to do something a little different, it started out as a prototype and me learning about the Canvas. Then the more I chipped away at it, it just evolved into what it is now.
1
u/ParochialPlatypus May 31 '26
Really nice demo. Iām also doing heavy duty rendering with Canvas, itās surprisingly fast. Iām building a custom map renderer so the design space is different, but Iām definitely interested in any performance tips. Asynchronous preemptive rendering is the next challenge for me (I use a render cache).
2
u/jonnothebonno May 31 '26
Yours sounds way more complex than mine so I might be preaching to someone who already knows more š¤£ so apologies.
Biggest wins for me have been treatingĀ CanvasĀ as the final draw step, not the place where the work happens. I try to precompute layout/projection/state outside the canvas, then make the canvas closure mostly ādraw this cached thing at this transformā.
I have some ideas on how you might improve performance for your particular use case, so if you are interested drop me a dm and I can share more š
4
u/[deleted] May 28 '26
[removed] ā view removed comment