{"id":74658,"date":"2025-09-02T11:37:40","date_gmt":"2025-09-02T06:07:40","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=74658"},"modified":"2025-09-09T14:49:25","modified_gmt":"2025-09-09T09:19:25","slug":"ios-arkit-with-swiftui","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/ios-arkit-with-swiftui\/","title":{"rendered":"iOS: The Power of ARKit: Face Points Capturing"},"content":{"rendered":"

Welcome to our The Power of ARKit blog series!<\/strong>
\nIn this series, we\u2019ll explore how to integrate ARKit<\/strong> into SwiftUI<\/strong> and unlock new possibilities for building immersive and innovative iOS applications.<\/p>\n

This first part will focus on the initial setup and configuration<\/strong> of ARKit within a SwiftUI project. We\u2019ll also walk through how to track face points on a physical device<\/strong>, setting the foundation for more advanced AR experiences in upcoming posts.<\/p>\n

Introduction<\/h2>\n

Why Use SwiftUI with ARKit?<\/strong><\/h2>\n

SwiftUI is Apple\u2019s newer way of building iPhone and iPad apps. It\u2019s popular because it\u2019s simple to use and shows live previews of your app while you design it.<\/p>\n

Now, when you combine SwiftUI with ARKit<\/strong>, you can take things further\u2014adding augmented reality (AR)<\/strong> to your apps. This means your phone isn\u2019t just for normal apps anymore\u2014it can turn into a tool that blends the digital world with the real one.<\/p>\n

With ARKit handling the AR magic<\/strong> (like tracking space, faces, and objects) and SwiftUI making the user interface easy to design<\/strong>, developers can create amazing apps where the digital and physical worlds work together.<\/p>\n

What is ARKit?<\/h2>\n

ARKit is Apple\u2019s tool that lets developers build augmented reality (AR) apps<\/strong> for iPhones and iPads. It uses the device\u2019s camera and sensors to mix digital objects with the real world in a very natural way.<\/p>\n

What ARKit Can Do:<\/strong><\/p>\n

    \n
  • World Tracking<\/strong> \u2013 Knows how your phone is moving in 3D space.<\/li>\n
  • Face Tracking<\/strong> \u2013 Detects and follows facial expressions.<\/li>\n
  • Plane Detection<\/strong> \u2013 Finds flat surfaces like tables, floors, or walls.<\/li>\n
  • People Occlusion<\/strong> \u2013 Lets virtual objects appear in front of or behind real people.<\/li>\n
  • LiDAR Support<\/strong> \u2013 Measures depth with high accuracy (on newer iPhones\/iPads).<\/li>\n
  • Motion Capture<\/strong> \u2013 Tracks body movement in real time.<\/li>\n
  • SwiftUI & RealityKit Integration<\/strong> \u2013 Makes it easier for developers to quickly build AR apps with modern Apple tools.<\/li>\n<\/ul>\n

    ARKit gives developers everything they need to create realistic, interactive AR experiences<\/strong>\u2014from games and learning apps to shopping tools and design apps\u2014directly on iOS devices.<\/p>\n

    Real-World Uses of AR & VR<\/strong>
    \nAugmented Reality (AR) and Virtual Reality (VR) are not just fancy future ideas anymore. They are being used today in many fields to solve real problems. By mixing digital visuals with real life, AR and VR are changing the way we learn, shop, work, travel, and even get medical treatment.<\/strong><\/p>\n

    1. Education & Training<\/strong><\/p>\n

      \n
    • Example:<\/strong> Medical students practicing surgery, pilots learning to fly, or workers learning to use machines.<\/li>\n
    • Benefit:<\/strong> People can train safely in a virtual setup, without the risks or costs of real-life mistakes.<\/li>\n<\/ul>\n

      2. Healthcare<\/strong><\/p>\n

        \n
      • Example<\/strong>: Doctors seeing a 3D model of a patient before surgery, therapists helping people overcome fears, or remote checkups using AR.<\/li>\n
      • Benefit<\/strong>: Improves accuracy in treatment, makes healthcare easier to access, and helps doctors and students learn better.<\/li>\n<\/ul>\n

        3. Shopping (Retail & Online Stores)<\/strong><\/p>\n

          \n
        • Example<\/strong>: Trying furniture in your living room using AR (like IKEA apps), or checking how clothes and makeup look before buying.<\/li>\n
        • Benefit<\/strong>: Reduces wrong purchases, builds trust, and makes shopping more fun and personal.<\/li>\n<\/ul>\n

          4. Property & Architecture<\/strong><\/p>\n

            \n
          • Example<\/strong>: Taking VR house tours without visiting, or architects showing 3D building designs on-site.<\/li>\n
          • Benefit<\/strong>: Saves time, helps buyers make faster decisions, and avoids confusion during planning.<\/li>\n<\/ul>\n

            5. Factories & Industry<\/strong><\/p>\n

              \n
            • Example<\/strong>: Workers wearing AR glasses to get step-by-step instructions, or experts guiding teams remotely.<\/li>\n
            • Benefit<\/strong>: Improves safety, speed, and accuracy while lowering training costs.<\/li>\n<\/ul>\n

              6. Fun & Entertainment<\/strong><\/p>\n

                \n
              • Example<\/strong>: Playing VR games, using AR filters on Instagram\/Snapchat, or watching concerts in VR.<\/li>\n
              • Benefit<\/strong>: Makes entertainment more engaging and interactive than normal screens.<\/li>\n<\/ul>\n

                7. Travel & Tourism<\/strong><\/p>\n

                  \n
                • Example<\/strong>: Virtual tours of famous places, AR guides in museums, or exploring destinations before booking a trip.<\/li>\n
                • Benefit<\/strong>: Lets people experience culture and travel even if they can\u2019t physically go.<\/li>\n<\/ul>\n

                  8. Teamwork & Remote Work<\/strong><\/p>\n

                    \n
                  • Example<\/strong>: Virtual meeting rooms with 3D avatars, or digital whiteboards for group ideas.<\/li>\n
                  • Benefit<\/strong>: Makes online meetings more natural and interactive, bringing the office feel to remote work.<\/li>\n<\/ul>\n

                    AR and VR are making life easier, safer, and more exciting. They save costs, improve learning, boost customer experience, and open up new ways to connect with the world<\/strong>. These technologies are shaping the future of how we live and work.<\/p>\n

                    Screen Design & UI<\/h2>\n

                    Getting Started in Xcode<\/strong>
                    \nNow it\u2019s time to set up our project. Open Xcode<\/strong> (Apple\u2019s app for making iOS apps) and create a new project<\/strong>. This will be the starting point where we connect ARKit<\/strong> and SwiftUI<\/strong> together.<\/p>\n

                    Follow the steps shown in the screenshot to guide you through the setup.<\/p>\n

                    \"Select<\/p>\n

                    Create a New App Project<\/strong>
                    \nIn the project setup window, select the App<\/strong> option under the iOS<\/strong> section. For this tutorial, we\u2019ll name the project ARKitWithSwiftUI<\/strong>.<\/p>\n

                    \"Project<\/p>\n

                    Auto-Generated Code<\/strong>
                    \nOnce the project is created, Xcode automatically generates some starter code<\/strong> to help you get up and running quickly. Refer to the screenshot below to see the default project structure.<\/p>\n

                    \"Auto<\/p>\n

                    Modifying the Default ContentView<\/strong>
                    \nNext, we\u2019ll update the pre-populated code<\/strong> in<\/strong> ContentView.swift<\/em> <\/span>to prepare it for ARKit integration. The modified code is shown below:<\/p>\n

                    \"Modified<\/p>\n

                    Designing the Landing Page<\/strong>
                    \nThe first screen of our app is the landing page. We kept it simple:<\/p>\n

                      \n
                    • A title at the top that says \u201cAR Face Points Tracking\u201d<\/strong><\/li>\n
                    • A button right below it labeled \u201cView in AR\u201d<\/strong>, which the user can tap to move into the AR experience<\/li>\n<\/ul>\n

                      Below, you\u2019ll see both the screen layout<\/strong> and the SwiftUI code<\/strong> that creates this design.<\/p>\n

                      \"Landing<\/p>\n

                      Creating the Camera Screen with ARKit<\/strong>
                      \nNext, we\u2019ll design the camera screen<\/strong>, where ARKit will be responsible for detecting face points in real time. To achieve this, let\u2019s create a new Swift file named FacePointsARView.swift<\/em><\/span><\/p>\n

                      \"Face<\/p>\n

                      Adding a Dismiss Button<\/strong>
                      \nAfter creating the FacePointsARView.swift<\/span><\/em> file, we\u2019ll add a dismiss button<\/strong> to the screen. This button will be placed at the top-right corner<\/strong>, allowing users to easily close the AR camera view and return to the landing page.<\/p>\n

                      \"Face<\/p>\n

                      Updating ContentView to Open the Face Points Screen<\/strong>
                      \nAfter creating the Face Points detection screen<\/strong> in SwiftUI, we need to connect it to the app\u2019s main file, ContentView.swift.<\/p>\n

                      This step makes sure that when the user taps the \u201cView in AR\u201d<\/strong> button on the landing page, the app will smoothly navigate to and show the FacePointsARView<\/span><\/em> (the AR screen).<\/p>\n

                      \"Updated<\/p>\n

                      Rendering the Camera View<\/strong>
                      \nNow we\u2019ll set up the code to show the camera feed on the screen. To keep things organized, we\u2019ll place this ARKit logic in a separate file.<\/p>\n

                      Create a new Swift file called FacePointsARViewContainer.swift<\/em><\/span>. This file will handle the ARKit camera rendering and link it with SwiftUI for our project.<\/p>\n

                      \"Face<\/p>\n

                      Face Points Tracking with Coordinator<\/strong>
                      \nIn this step, we\u2019ve implemented the code to track face points on the camera screen<\/strong>. To handle communication between SwiftUI and ARKit, we created a custom Coordinator<\/em><\/span> class. This class is responsible for:<\/p>\n

                        \n
                      • Passing data between the SwiftUI view and ARKit methods.<\/li>\n
                      • Rendering and updating the face tracking points<\/strong> inside ARKit\u2019s delegate callbacks.<\/li>\n<\/ul>\n

                        With that in place, the final step is to load our FacePointsARViewContainer<\/span><\/em> inside the FacePointsARView<\/span><\/em> screen<\/strong>, so the camera with real-time face point tracking is displayed.<\/p>\n

                        \"Updated<\/p>\n

                        Adding Camera Access Permission<\/strong>
                        \nSince ARKit relies on the device camera for face tracking, we must request camera access permission<\/strong> in the app\u2019s configuration. To do this, open the Info.plist<\/strong> file and add the following key-value pair:<\/p>\n

                        \r\n<key<\/span>>NSCameraUsageDescription<\/key<\/span>>\r\n<string<\/span>>This app requires camera access to track face points using ARKit.<\/string<\/span>>\r\n<\/strong><\/span>\r\n<\/pre>\n
                        This ensures the system prompts the user for permission when the app attempts to access the camera. Without it, the AR face tracking feature will not work.<\/p>\n
                        \"Add<\/p>\n
                        Running the Application<\/strong>
                        \nWith all the setup complete, it\u2019s time to run the app on a physical iOS device<\/strong>. Since ARKit requires access to the TrueDepth camera, this step cannot be tested on the simulator.<\/p>\n
                        When launched, the app will successfully detect and render face points<\/strong> in real time using ARKit.<\/p>\n
                        \ud83d\udcf8 Result: Below is the output showing face points being tracked on a physical device:<\/p>\n
                        \"Final \"Final \"Final<\/p>\n
                        Concluding we have covered in this first part of the series, we explored how to integrate ARKit with SwiftUI<\/strong> by building a sample project that demonstrates face point tracking<\/strong> on a physical device. This foundation sets the stage for more advanced AR experiences.<\/p>\n
                        In the next part of the series<\/strong>,, we\u2019ll dive deeper into additional ARKit features with step-by-step examples to expand your understanding and capabilities. Stay tuned!<\/p>\n","protected":false},"excerpt":{"rendered":"
                        Welcome to our The Power of ARKit blog series! In this series, we\u2019ll explore how to integrate ARKit into SwiftUI and unlock new possibilities for building immersive and innovative iOS applications. This first part will focus on the initial setup and configuration of ARKit within a SwiftUI project. We\u2019ll also walk through how to track […]<\/p>\n","protected":false},"author":1898,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":90},"categories":[1400],"tags":[3489,7944,3488,5460],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/74658"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1898"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=74658"}],"version-history":[{"count":25,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/74658\/revisions"}],"predecessor-version":[{"id":76130,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/74658\/revisions\/76130"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=74658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=74658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=74658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}