AR相册 Photo Album For AR

Overview

HeavenMemoirs - AR相册

线上地址 https://itunes.apple.com/cn/app/weare/id1304227680?mt=8

image

HeavenMemoirs

技术点

AR初始化 在新建项目时可以直接创建 AR 项目, xcode 会创造一个 AR 项目的模板.

也可以创建普通的项目,在需要实现 AR 功能的控制器中实现如下代码进行初始化.

      import ARKit
      let sceneView = ARSCNView()
    
    override func viewDidLoad() {
         super.viewDidLoad()
         sceneView.frame = view.bounds
         view.addSubview(sceneView)

         sceneView.delegate = self
         sceneView.showsStatistics = true
      
         // 创建一个场景,系统默认是没有的
         let scene = SCNScene()
         sceneView.scene = scene

          //不允许用户操作摄像机
         sceneView.allowsCameraControl = false
          //抗锯齿
         sceneView.antialiasingMode = .multisampling4X

    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        let configuration = ARWorldTrackingConfiguration()
        sceneView.session.run(configuration)
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        sceneView.session.pause()
    }

添加节点

      //我使用的是 SCNPlane 来充当相框,也可以使用"厚度"很小的 SCNBox
      let photo = SCNPlane(width: 1, height: 1)
      //photo.cornerRadius = 0.01
      let image = UIImage(named: "0")
      //纹路可以使图片,也可以是颜色
      photo.firstMaterial?.diffuse.contents = image
      //photo.firstMaterial?.diffuse.contents = UIColor.red
      let photoNode = SCNNode(geometry: photo)
      //节点的位置
      let vector3 = SCNVector3Make(-1, -1, -1) 
      photoNode.position = vector3
      sceneView.scene.rootNode.addChildNode(photoNode)
      let text = SCNText(string: "文字", extrusionDepth: 0.1)
      text.font = UIFont.systemFont(ofSize: 0.4)
      let textNode = SCNNode(geometry: text)
      textNode.position = SCNVector3Make(0, 0, -1)
      //文字的图片/颜色
      text.firstMaterial?.diffuse.contents = UIImage(named: color)
      sceneView.scene.rootNode.addChildNode(textNode)
可供选择的几何图形
      SCNText 文字  
      SCNPlane 平面  
      SCNBox 盒子  
      SCNPyramid 锥形  
      SCNSphere 球  
      SCNCylinder 圆柱  
      SCNCone 圆锥  
      SCNTube 圆筒  
      SCNCapsule 胶囊  
      SCNTorus 圆环  
      SCNFloor 地板  
      SCNShape 自定义

全景图实现

      想象自己站在一个球的球心处,球的内表面涂着壁画,那么是不是就实现了全景图.
      所以用一个Sphere 节点包裹着相机节点(也就是0位置节点),再设置Sphere节点的内表面纹理,就实现了功能.

      let sphere = SCNSphere(radius: 15)
      let sphereNode = SCNNode(geometry: sphere)
      sphere.firstMaterial?.isDoubleSided = true
      sphere.firstMaterial?.diffuse.contents = image
      sphereNode.position = SCNVector3Zero
      scene.rootNode.addChildNode(sphereNode)

播放视频

      let height:CGFloat = CGFloat(width) * videoSize.height/videoSize.width
      let box = SCNBox(width: width, height: height, length: 0.3, chamferRadius: 0)
      boxNode.geometry = box
      boxNode.geometry?.firstMaterial?.isDoubleSided = true
      boxNode.position = SCNVector3Make(0, 0, -5)
      box.firstMaterial?.diffuse.contents = UIColor.red
      self.scene.rootNode.addChildNode(boxNode)
            
      let avplayer = AVPlayer(url: url)
      avplayer.volume = rescoucceConfiguration.video_isSilence ? 0.0 : 3.0
      videoPlayer = avplayer
      let videoNode = SKVideoNode(avPlayer: avplayer)
      NotificationCenter.default.addObserver(self, selector: #selector(playEnd(notify: )), name: NSNotification.Name.AVPlayerItemDidPlayToEndTime, object: nil)
            
      videoNode.size = CGSize(width: 1600, height: 900)
      videoNode.position = CGPoint(x: videoNode.size.width/2, y: videoNode.size.height/2)
            videoNode.zRotation = CGFloat(Float.pi)
      let skScene = SKScene()
      skScene.addChild(videoNode)
      skScene.size = videoNode.size
      box.firstMaterial?.diffuse.contents = skScene
      videoNode.play()

粒子效果

      /*
        particleName = "bokeh.scnp"
        particleName = "rain.scnp"
        particleName = "confetti.scnp"
        **/
      particleSytem = SCNParticleSystem(named: particleName, inDirectory: nil){
      particleNode.addParticleSystem(particleSytem)
      particleNode.position = SCNVector3Make(0, Y, 0)
      self.scene.rootNode.addChildNode(particleNode)

节点点击事件

      //给 场景视图sceneView 添加点击事件
      let tap = UITapGestureRecognizer(target: self, action: #selector(tapHandle(gesture:)))
      sceneView.addGestureRecognizer(tap)
  @objc func tapHandle(gesture:UITapGestureRecognizer) {
      let results:[SCNHitTestResult] = (self.sceneView?.hitTest(gesture.location(ofTouch: 0, in: self.sceneView), options: nil))!
      guard let firstNode  = results.first else{
            return
      }
        // 这就是点击到的节点 可以对他做一些事情 或者根据这个节点的某些属性执行不同的方法
      let node = firstNode.node.copy() as! SCNNode
      if firstNode.node == self.selectNode {
            ...推远照片...
          } else {
            ...拉近照片...
            selectNode = node
      }
}

节点动画 我的另一篇文章中有详细记录ARKit-动画 //拉近(推远)照片

      //这只是其中一种方法
      let newPosition  = SCNVector3Make(firstNode.node.worldPosition.x*2, firstNode.node.worldPosition.y*2, firstNode.node.worldPosition.z*2)
      let comeOut = SCNAction.move(to: newPosition, duration: 1.2)
      firstNode.node.runAction(comeOut)

自传/公转

      //自转
      let box = SCNBox(width: boxW, height: boxW, length: boxW, chamferRadius: 0)
      let boxNode = SCNNode(geometry: box)
      boxNode.position = vector3
      let emptyNode = SCNNode()
      emptyNode.position = SCNVector3Zero
      emptyNode.rotation = SCNVector4Make(0, 1, 0, Float.pi/Float(L/2) * Float(index))
      emptyNode.addChildNode(boxNode)
      photoRingNode.addChildNode(emptyNode)
      let ringAction = SCNAction.repeatForever(SCNAction.rotateBy(x: 0, y: right, z: 0, duration: 2))
      boxNode.runAction(ringAction)
      //公转 把节点加到一个正在自传的节点上就可以了

录屏 录屏是使用ReplayKit完成的 开始录屏

      协议      
      RPScreenRecorderDelegate,RPPreviewViewControllerDelegate

      RPScreenRecorder.shared().startRecording(handler: nil)
      RPScreenRecorder.shared().delegate = self

录制代理

func screenRecorder(_ screenRecorder: RPScreenRecorder, didStopRecordingWith previewViewController: RPPreviewViewController?, error: Error?) {
        if error != nil {
            DispatchQueue.main.async {
                let string = error?.localizedDescription
                ITTPromptView .showMessage(string, andFrameY: 0)
                //录制期间失败
                self.showFailReplay()
            }
        }
    }
    //录制失败
    func showFailReplay() {
        let sb = UIStoryboard(name: "Main", bundle: nil)
        let vc = sb.instantiateViewController(withIdentifier: "HKExplainViewController")
        self.navigationController?.pushViewController(vc, animated: true)
        self.replayButtonRight.constant = 85;
        for button in self.smailButtons {
            button.alpha = 1
        }
        self.mainButton.alpha = 1
        UIView.animate(withDuration: 2.5) {
            self.stopReplayButton.alpha = 0
            self.view.layoutIfNeeded()
        }
    }

结束并弹出预览控制器

     RPScreenRecorder.shared().stopRecording { (vc, error) in
            if error != nil {
            vc?.previewControllerDelegate = self
            vc?.title = "We Are"
            self.present(vc!, animated: true, completion: nil)
            }
        }

预览控制器的代理

    func previewController(_ previewController: RPPreviewViewController, didFinishWithActivityTypes activityTypes: Set<String>) {
        print(activityTypes)
        //取消
        if activityTypes.count == 0 {
            previewController.dismiss(animated: true, completion: nil)
        }
        //保存
        if activityTypes.contains("com.apple.UIKit.activity.SaveToCameraRoll") {
            ITTPromptView .showMessage("视频已保存在相册", andFrameY: 0)
            previewController.dismiss(animated: true, completion: nil)
            //检测到您刚刚保存了视频 是否想要分享
            let delay = DispatchTime.now() + .seconds(2)
            DispatchQueue.main.asyncAfter(deadline: delay) {
                self.outputVideo()
            }
        }
    }

作者简书

联系作者 [email protected]

You might also like...
Easily take a photo or video or choose from library

FDTake Easily take a photo or video or choose from library 🍺 Author's tip jar: https://amazon.com/hz/wishlist/ls/EE78A23EEGQB Usage To run the exampl

Instagram-like photo browser and a camera feature with a few line of code in Swift.
Instagram-like photo browser and a camera feature with a few line of code in Swift.

Fusuma is a Swift library that provides an Instagram-like photo browser with a camera feature using only a few lines of code.

An iOS/tvOS photo gallery viewer, useful for viewing a large (or small!) number of photos.
An iOS/tvOS photo gallery viewer, useful for viewing a large (or small!) number of photos.

This project is unmaintained. Alex passed away in an accident in late 2019. His love of iOS development will always be remembered. AXPhotoViewer AXPho

FMPhotoPicker is a modern, simple and zero-dependency photo picker with an elegant and customizable image editor
FMPhotoPicker is a modern, simple and zero-dependency photo picker with an elegant and customizable image editor

FMPhotoPicker is a modern, simple and zero-dependency photo picker with an elegant and customizable image editor Quick demo Batch select/deselect Smoo

🏞 A simple iOS photo and video browser with optional grid view, captions and selections written in Swift5.0
🏞 A simple iOS photo and video browser with optional grid view, captions and selections written in Swift5.0

Introduction 🏞 MediaBrowser can display one or more images or videos by providing either UIImage objects, PHAsset objects, or URLs to library assets,

Simple PhotoBrowser/Viewer inspired by facebook, twitter photo browsers written by swift
Simple PhotoBrowser/Viewer inspired by facebook, twitter photo browsers written by swift

SKPhotoBrowser Simple PhotoBrowser/Viewer inspired by facebook, twitter photo browsers written by swift features Display one or more images by providi

Instagram-like photo browser and a camera feature with a few line of code in Swift.
Instagram-like photo browser and a camera feature with a few line of code in Swift.

NOTE: This project is no longer maintained. We highly recommend YPImagePicker. Fusuma Fusuma is a Swift library that provides an Instagram-like photo

Easily take a photo or video or choose from library

FDTake Easily take a photo or video or choose from library 🍺 Author's tip jar: https://amazon.com/hz/wishlist/ls/EE78A23EEGQB Usage To run the exampl

TripUp is an open source, photo storage and sharing app made for privacy conscious users.
TripUp is an open source, photo storage and sharing app made for privacy conscious users.

TripUp is an open source, photo storage and sharing app made for privacy conscious users.

PhotoSlider is a simple photo slider and can delete slider with swiping.
PhotoSlider is a simple photo slider and can delete slider with swiping.

PhotoSlider is a simple photo slider and can delete slider with swiping.

This is a sample app to create a photo selection classifier using CreateML on an iOS Device.
This is a sample app to create a photo selection classifier using CreateML on an iOS Device.

PhotoSelectionClassifier This is a sample app to create a photo selection classifier using CreateML on an iOS Device. Demo In the demo video below, we

A SwiftUI dynamic property wrapper for fetching media from your photo library. (iOS, tvOS, macOS)

Media Also available as a part of my SwiftUI+ Collection – just add it to Xcode 13+ A package for simplifying the user of the camera and the user's ph

Lightweight iOS Photo Blur App

Blurry Blurry is the go-to image blurring tool to help you apply beautiful blurs for your photos. It is perfect for creating wallpapers, backgrounds,

PixPic, a Photo Editing App
PixPic, a Photo Editing App

PixPic PixPic, a Photo Editing App Built by Our iOS Interns What's the best way to teach interns how to write an iOS app? Just let them do it! This ap

FYPhoto is a photo/video picker and image browser library for iOS written in pure Swift. It is feature-rich and highly customizable to match your App's requirements.
FYPhoto is a photo/video picker and image browser library for iOS written in pure Swift. It is feature-rich and highly customizable to match your App's requirements.

FYPhoto is a photo/video picker and image browser library for iOS written in pure Swift. It is feature-rich and highly customizable to match your App's requirements.

Generates a random photo after you click the button

Swift Random Photo Generator Generates a random photo after you click the button! Things you need to do 📖 clone this repository git clone https://git

Lightweight iOS Photo Blur App

Blurry Blurry is the go-to image blurring tool to help you apply beautiful blurs for your photos. It is perfect for creating wallpapers, backgrounds,

Turn a photo of your food into a face
Turn a photo of your food into a face

Megabite Megabite is a mobile app that automatically turns a photo of your food into a face. Read more about it here. Installation This project uses C

PixPic, a Photo Editing App
PixPic, a Photo Editing App

PixPic PixPic, a Photo Editing App Built by Our iOS Interns What's the best way to teach interns how to write an iOS app? Just let them do it! This ap

Owner
Heikki
Heikki
FacebookImagePicker is Facebook album photo picker written in Swift.

Features • Installation • Usage • Translation • License GBHFacebookImagePicker is Facebook's album photo picker written in Swift, built to provide a s

Florian Gabach 231 Dec 17, 2022
DTPhotoViewerController - A fully customizable photo viewer ViewController to display single photo or collection of photos, inspired by Facebook photo viewer.

DTPhotoViewerController Example Demo video: https://youtu.be/aTLx4M4zsKk DTPhotoViewerController is very simple to use, if you want to display only on

Tung Vo 277 Dec 17, 2022
Jogendra 113 Nov 28, 2022
A simple application display album artwork from the iTunes API

iTunesTestApp In the test task, you need to develop a simple application for the iPhone. The application should display album artwork from the iTunes

Valery Veselov 1 Nov 2, 2021
The application display album artwork with detailed information from the iTunes API.

Music-Info The application display album artwork with detailed information from the iTunes API. UIKit, CoreData, Foundation Navigation (TabBarControll

Andrey Alymov 0 Nov 5, 2021
A framework that lists all photos in the album that contain faces.

FaceCollectionViewKit A framework that lists all photos in the album that contain faces. Features It uses the detection features of CIDetectorTypeFace

Serhat Akalın 2 Aug 30, 2022
A photo gallery for iOS with a modern feature set. Similar features as the Facebook photo browser.

EBPhotoPages ”A photo gallery can become a pretty complex component of an app very quickly. The EBPhotoPages project demonstrates how a developer coul

Eddy Borja 1.7k Dec 8, 2022
React-native-photo-editor - Photo editor using native modules for iOS and Android

?? Image editor using native modules for iOS and Android. Inherit from 2 available libraries, ZLImageEditor (iOS) and PhotoEditor (Android)

Baron Ha. 244 Jan 5, 2023
DGCropImage - A photo cropping tool which mimics Photo.app written by Swift

DGCropImage A photo cropping tool which mimics Photo.app written by Swift. This

donggyu 11 Jul 14, 2022
Photo-Sharing-App - Photo Sharing App With Swift

Photo Sharing App You can register and log in to this application and share your

Yağız Savran 2 Jun 14, 2022