3D Content in iOS & visionOS apps with Spline (Xcode & SwiftUI)

  Переглядів 22,773

Sean Allen

Sean Allen

День тому

Check out Spline at spline.design/
In this video I walk you through building an animated 3D onboard screen using Spline.
Spline is a no-code workflow to create 3D content for the Apple Ecosystem. It's an easy way to get 3D content into your iOS, iPadOS, macOS and visionOS apps by exporting SwiftUI code you can copy and paste into Xcode.
Spline's metal-based renderer takes advantage of all the graphics acceleration on Apple devices to maintain the best performance.
Learning to work with 3D designs will be important for iOS developers moving forward into the world of spatial computing on the Apple Vision Pro.
Spline Keynote Video - • Spline Event - Unfoldi...
Check Spline at spline.design/
Join the Spline community:
Instagram: / splinetool
Twitter / X : / splinetool
TikTok: / splinedesign
Discord Community: / discord
Discover, remix and showcase 3D creations #MadeInSpline at community.spline.design/
My iOS Dev Courses:
seanallen.teachable.com/
My Source Code:
seanallen.teachable.com/p/sou...
X (Twitter):
Sean Allen - / seanallen_dev
Hired.com:
hired.com/x/1n01g
Book and learning recommendations that help out the channel if you decide to purchase (Affiliate Links):
Mark Moeyken’s SwiftUI Books:
www.bigmountainstudio.com/a/f...
Paul Hudson's Hacking With Swift:
gumroad.com/a/762098803
RocketSim - Enhance Your Xcode Simulator:
gumroad.com/a/51797971/ftvbh
Objc.io Books (Thinking in SwiftUI & Advanced Swift):
gumroad.com/a/656585843
Timestamps:
0:00 - 3D content with Spline
0:33 - Starter project & Spline
1:25 - How to get 3D content
4:05 - Exporting a design to Xcode & SwiftUI (cloud)
7:49 - Changing the design for our needs (live updates)
11:13 - Disable user interaction
11:47 - Animating the design
14:39 - Exporting design to use locally
15:54 - Minimum specifications
#swift #softwaredeveloper #iosdeveloper

КОМЕНТАРІ: 63
@seanallen
@seanallen 2 місяці тому
Check out Spline at spline.design
@perrygupta
@perrygupta 2 місяці тому
i was trying using spline. i had someone made design for me on fiverr but scaletofit was not working, now i know how it will work. thank you for the video.
@TE_-.-
@TE_-.- 2 місяці тому
When I do the key combination, spotlight comes up. but not a bar like that. 😭
@seanallen
@seanallen 2 місяці тому
Happy to help!
@perrygupta
@perrygupta 2 місяці тому
Spline if you are reading this comment, create a marketplace for 3d objects please.
@Lalvarez1223
@Lalvarez1223 2 місяці тому
It's like you are reading my mind Sean, was interested in adding this into one of my apps soon. Appreciate the constant uploads. Cheers
@seanallen
@seanallen 2 місяці тому
Happy to help! Give it a try. I really enjoyed playing around with it.
@KiranUttarkarAwsome
@KiranUttarkarAwsome 2 місяці тому
Thank you! I’d love to see more visionOS and 3D content from you.
@seanallen
@seanallen 2 місяці тому
More on the way!
@KiranUttarkarAwsome
@KiranUttarkarAwsome 2 місяці тому
@@seanallen thank you! You’re awesome!😎
@Decatilinae
@Decatilinae 2 місяці тому
Thanks for sharing...hope to see more videos like this showing another use case with Slipe, especially with Vision OS
@seanallen
@seanallen 2 місяці тому
I appreciate that feedback - I think a visionOS video would be cool too
@themediaphilechannel
@themediaphilechannel 2 місяці тому
Thank you so much for sharing this!!
@seanallen
@seanallen 2 місяці тому
Glad you liked it!
@Ukr_sunflower
@Ukr_sunflower Місяць тому
Really helpful! Thanks for keeping us updated about new technologies in Apple ecosystem world!
@seanallen
@seanallen Місяць тому
Happy to help!
@mario_luis_dev
@mario_luis_dev 2 місяці тому
Spline is awesome indeed. Great video as always Sean!
@seanallen
@seanallen 2 місяці тому
It really is!
@DonnyWalsdev
@DonnyWalsdev 2 місяці тому
Definitely going to have to give this a go! 😍
@seanallen
@seanallen 2 місяці тому
Would love to hear what you think, Donny
@mnarlioglu
@mnarlioglu 2 місяці тому
Thank you Sean.
@seanallen
@seanallen 2 місяці тому
Happy to help
@brianclear363
@brianclear363 2 місяці тому
yes I saw this recently and though it was good halfway house to bring 3d into 2D apps. For devs who dont have time to learn unity. The api to control the animation from Swift still needs work but they have a lot of upcoming changes so theyre investing a lot of time in iOS/visionOS etc.
@seanallen
@seanallen 2 місяці тому
I agree, it was a lot simpler to learn than I expected (not saying I'm a pro at it, but I felt good with it after a day of tinkering). I'm a big fan and think this will be very nice for volumes and spaces in visionOS.
@williambrandin1396
@williambrandin1396 2 місяці тому
This is so cool, thank you!
@seanallen
@seanallen 2 місяці тому
Glad you like it!
@kianavila1698
@kianavila1698 2 місяці тому
That's great 😍
@seanallen
@seanallen 2 місяці тому
Glad you liked it!
@samtr4439
@samtr4439 2 місяці тому
Thanks, Sean.
@seanallen
@seanallen 2 місяці тому
Glad you liked it
@bryceellis112
@bryceellis112 2 місяці тому
Wow so cool. I’ll have to check Spline out I do wonder how this would work in a watchOS app - just out of curiosity mostly
@seanallen
@seanallen 2 місяці тому
I don't believe watchOS is supported at this time.
@mahmudcikrik9796
@mahmudcikrik9796 2 місяці тому
Hi Sean, thanks for the tutorial. 3D objects look very cool. I'm thinking of using it in my app, but I have doubts about performance. Does it affect battery consumption much? Or maybe there are other problems that we didn't anticipate?
@seanallen
@seanallen 2 місяці тому
I'm not sure about battery performance, but Spline uses the latest metal renderers for optimal performance. Sure, no 3D content would be more performant than having 3D content, but if you're gonna have it, Spline seems very well optimized. Maybe @splinetool can chime in.
@duyhuynhnguyentuan6266
@duyhuynhnguyentuan6266 2 місяці тому
For anyone having the "Spline scene file is in an unknown format."", just create a new spline project and copy all the content to it. Create new "camera" object in the viewport if needed
@JasonMitchellAZ
@JasonMitchellAZ 2 місяці тому
This looks cool. Thanks for the intro video!
@seanallen
@seanallen 2 місяці тому
Give it a shot. It was a ton of fun to play around with and gave me a bunch of ideas.
@w0mblemania
@w0mblemania 2 місяці тому
Very interesting, Sean. A couple of questions: - I noticed you resized the asset in the editor, rather than dynamically resize it in SwiftUI. That doesn' seem like it's going to scale across different devices. Is it possible to do the scene scaling, to fit the SwiftUI scene, in SwiftUI? - do we get callbacks for when the scene is loaded? So we can do nice transitions when the scene appears, instead of just plonking it onscreen after it's loaded. Cheers.
@splinetool
@splinetool 2 місяці тому
Hi! Auto-zoom support for orthographic cameras is coming very soon. This already works with perspective cameras (the video is using orthographic camera). Callbacks for when the scene is loaded will also be supported soon 🙌
@seanallen
@seanallen 2 місяці тому
Good to know!
@iknowcoati
@iknowcoati 2 місяці тому
Amazing!!! This is a dream come true since RealityKit's Model3D and RealityView aren't supported on iOS, and Scenekit 3D models aren't supported on visionOS. If I understand correctly, you currently wouldn't be able to build this app on visionOS yet - but spline is working towards that feature, is that right?
@seanallen
@seanallen 2 місяці тому
They are currently working on a lot of visionOS stuff. You can see some of their roadmap in the documentation on their site. But you can also export 3D stuff as a USDZ file from Spline, which you can use in visionOS.
@iknowcoati
@iknowcoati 2 місяці тому
Hell yeah, thanks Sean this is incredibly helpful
@splinetool
@splinetool 2 місяці тому
Hi! Actually we recently enable 3d embeds for VisionOS as well (including all content types: Windows, Volumes, and Inmersive views). The embedding approach is the same as the one for iOS. You just need to copy the embed code into your SwiftUI code for VisionOS.
@iknowcoati
@iknowcoati 2 місяці тому
​@@splinetoolNO WAY!!! My life just got so much better. I might cry a little
@seanallen
@seanallen 2 місяці тому
@@splinetool very nice!
@Echaront
@Echaront 2 місяці тому
Great video Sean! I did try it but my simulator and preview in Xcode keep giving me this error: "Spline scene file is in an unknown format." I tried to load my Spline scene both locally and remotely. No success.
@Echaront
@Echaront 2 місяці тому
UPDATE: It keeps giving that error with every single scene (from the Spline online library) I try to work. I am on Xcode 15.2 and my app is targeting iOS 17.0
@seanallen
@seanallen 2 місяці тому
I got this error and I needed to make sure I was using my newly created "camera" object (the camera we added for the animation) as the "viewport" (over on the right panel). And not the "personal camera". That fixed it for me.
@Echaront
@Echaront 2 місяці тому
@@seanallen Thanks! I still get the error with a new camera. Creating a whole new scene and copy-paste the content solved the issue for me!
@devclones8937
@devclones8937 2 місяці тому
this worked for me thank you!@@seanallen
@seregashteiman5459
@seregashteiman5459 2 місяці тому
Can I have problems with the copyright holder if I upload works from the spline to my application?
@TE_-.-
@TE_-.- 2 місяці тому
how did you open this bar? which short cut is that? 6:01
@seanallen
@seanallen 2 місяці тому
CMD + Tab
@onlydstn
@onlydstn 2 місяці тому
When I try to recreate this, I get "Spline scene file is in an unknown format." inside of where the 3D model should be displayed. any solution for this?
@KalebZimmerman
@KalebZimmerman 2 місяці тому
I am getting the same error and I haven't found a solution yet.
@duyhuynhnguyentuan6266
@duyhuynhnguyentuan6266 2 місяці тому
me too
@Echaront
@Echaront 2 місяці тому
@@KalebZimmerman To resolve the issue you need to create a completely new scene and then copy and paste all the content from an existing onee. This should help in resolving the problem. However, even if it works perfectly fine in the preview, there is still a possibility that may crash on the simulator or device.
@seanallen
@seanallen 2 місяці тому
I got this error and I needed to make sure I was using my newly created "camera" object as the "viewport" (over on the right panel). And not the "personal camera". That fixed it for me.
@user-un4tr7vc4j
@user-un4tr7vc4j 2 місяці тому
@@seanallen Thanks for your up-to-date episode first, but I got same issue when I did as you said before (using newly created "camera" object) I hope anyone can help us later.
@mujtabakhan1992
@mujtabakhan1992 2 місяці тому
Showing me error "Spline scene file is in an unknown format."
@seanallen
@seanallen 2 місяці тому
A few people have ran into this. I'm not sure of the issue. Maybe @splinetool can chime in?
@ikeybhatnagar9569
@ikeybhatnagar9569 Місяць тому
😒 *promosm*
I built an Apple Vision Pro app... visionOS tutorial
9:19
Beyond Fireship
Переглядів 521 тис.
Can You Draw The PERFECT Circle?
00:57
Stokes Twins
Переглядів 41 млн
Top 2024 Web Design Trends
5:32
Codex Community
Переглядів 403 тис.
Bring 3D Content Into iOS/visionOS App (+ Animations)
21:39
iOS Academy
Переглядів 3,4 тис.
WWDC23: Design for spatial user interfaces | Apple
22:42
Apple Developer
Переглядів 227 тис.
iPadOS 17 is AWESOME! Try these 8 things FIRST!
15:06
Proper Honest Tech
Переглядів 459 тис.
OpenAI "SHOCKED" Everyone! Voice, Vision, & Free?!
8:58
Theoretically Media
Переглядів 1,5 тис.
visionOS Fundamentals - Watch before you build for Vision Pro
7:44
Sean Allen
Переглядів 86 тис.
INSANE OpenAI News: GPT-4o and your own AI partner
28:48
AI Search
Переглядів 5 тис.
STOP using MVVM for SwiftUI | Clean iOS Architecture
18:58
Rebeloper - Rebel Developer
Переглядів 28 тис.
Learn 3D with Spline Under 15 Minutes
14:24
Levi Magony
Переглядів 53 тис.
Компьютерная мышь за 50 рублей
0:28
dizzi
Переглядів 2,2 млн
#Shorts Good idea for testing to show.
0:17
RAIN Gadgets
Переглядів 3,2 млн
How much charging is in your phone right now? 📱➡️ 🔋VS 🪫
0:11
🤯Самая КРУТАЯ Функция #shorts
0:58
YOLODROID
Переглядів 3,3 млн