ARKit如何将太阳系装进iPhone

傷城~ 2022-06-02 20:14 199阅读 0赞

本文转自：http://www.code4app.com/blog-847095-1590.html

关注AR/VR也有一段时间了，从一开始微软的HoloLens，谷歌眼镜，到苹果上次在WWDC上向开发者们展示他们的AR方面的成果，微软HoloLens高昂的价格让人望而却步，而谷歌眼镜无疾而终，相较于前两者，苹果的AR技术只需要一台iPhone，成本降低了许多，开发者大会上苹果展示的几个Demo效果也着实令我惊艳，于是闲暇时间就在网上找了些资料，写了个小东西。

![400][]

先上最终效果图：

[![104422x4kstius8iranqj5.gif][]][104422x4kstius8iranqj5.gif 1]

![Image 1][]

最终效果图

1.开发前准备

手机需要先安装证书文件，不安装无法获取iOS beta版操作系统

![662][]

证书文件

手机系统iOS 11 beta版

XCode 9 beta版

上述安装包的下载地址：[https://developer.apple.com/download/][https_developer.apple.com_download]

2.接下来我们进入Code阶段

开发一个AR项目，你需要用到ARKit和SceneKit这两个库，ARKit用来捕捉现实场景参数，SceneKit则用来在AR视图中加载显示3D模型。

AR场景中使用的是3维坐标系如图，你可以通过调节z轴的参数来调节物体距离远近。

![580][]

AR的三维坐标系

1) 首先我们需要使用初始化ARSCNView，ARSCNView是用来加载AR的3D场景视图

> \- (ARSCNView\*)arSCNView
> 
> \{
> 
> if(\_arSCNView!=nil) \{
> 
> return\_arSCNView;
> 
> \}
> 
> \_arSCNView= \[\[ARSCNViewalloc\]initWithFrame:self.view.bounds\];
> 
> //绑定SCNView的session
> 
> \_arSCNView.session=self.arSession;
> 
> //自适应环境光照度，过渡更平滑
> 
> \_arSCNView.automaticallyUpdatesLighting=YES;
> 
> //初始化节点，
> 
> \[self initNode\];
> 
> return\_arSCNView;
> 
> \}

2) ARSession通过管理ARSessionConfiguration实现场景的追踪并且返回一个ARFrame

> \- (ARSession\*)arSession  
> 
> 
> \{
> 
> if(\_arSession!=nil)
> 
> \{
> 
> return\_arSession;
> 
> \}
> 
> \_arSession= \[\[ARSessionalloc\]init\];
> 
> return\_arSession;
> 
> \}

3) ARSessionConfiguration(会话追踪配置)主要目的就是负责追踪相机在3D世界中的位置以及一些特征场景的捕捉，需要配置一些参数

> \- (ARSessionConfiguration\*)arSessionConfiguration  
> 
> 
> \{
> 
> if(\_arSessionConfiguration!=nil) \{
> 
> return\_arSessionConfiguration;
> 
> \}
> 
> //1.创建世界追踪会话配置（使用ARWorldTrackingSessionConfiguration效果更加好），需要A9芯片支持
> 
> ARWorldTrackingSessionConfiguration\*configuration = \[\[ARWorldTrackingSessionConfigurationalloc\]init\];
> 
> //2.设置追踪方向（追踪平面，后面会用到）
> 
> configuration.planeDetection = ARPlaneDetectionHorizontal;
> 
> \_arSessionConfiguration= configuration;
> 
> //3.自适应灯光（相机从暗到强光快速过渡效果会平缓一些）
> 
> \_arSessionConfiguration.lightEstimationEnabled=YES;
> 
> return\_arSessionConfiguration;
> 
> \}

4) SCNScene是AR场景中的场景，场景中是由许多SCNNode节点组成，SCNNode是一个个3D模型。

例如我们这个例子中需要用到的节点有太阳、地球、月球，可以new三个SCNNode

> \_sunNode = \[SCNNodenew\];
> 
> \_sunNode.geometry= \[SCNSpheresphereWithRadius:2.5\];

为了使太阳更加逼真，我们需要给sunNode增加纹理

> //太阳贴图  
> 
> 
> \_sunNode.geometry.firstMaterial.multiply.contents=@"art.scnassets/earth/sun.jpg";
> 
> \_sunNode.geometry.firstMaterial.diffuse.contents=@"art.scnassets/earth/sun.jpg";
> 
> \_sunNode.geometry.firstMaterial.multiply.intensity=0.5;
> 
> \_sunNode.geometry.firstMaterial.lightingModelName=SCNLightingModelConstant;
> 
> \_sunNode.geometry.firstMaterial.multiply.wrapS=
> 
> \_sunNode.geometry.firstMaterial.diffuse.wrapS=
> 
> \_sunNode.geometry.firstMaterial.multiply.wrapT=
> 
> \_sunNode.geometry.firstMaterial.diffuse.wrapT=SCNWrapModeRepeat;

同时地球，月球都同太阳的创建方法。接下来我们将sunNode节点添加到Scene中

> //设置Node的三维坐标
> 
> \[\_sunNode setPosition:SCNVector3Make(0,5, -20)\];  
> 
> 
> //将sunNode节点添加到scene中
> 
> \[self.arSCNView.scene.rootNodeaddChildNode:\_sunNode\];

5) 初始化工作做好之后，接下来开启场景捕捉

> //开启AR会话，相机开始捕捉
> 
> \[self.arSessionrunWithConfiguration:self.arSessionConfiguration\];  
>

6) 创建工作基本完成，接下来就是如何让这些模型动起来了，动画效果会在下一章讲解。

代码实现：[https://github.com/miliPolo/ARSolarPlay][https_github.com_miliPolo_ARSolarPlay]

天文科普 首先科普下太阳系的结构，太阳系共有八大行星，水星、金星、地球、火星、木星、土星、天王星、海王星，还有颗矮行星冥王星。木星体积最大，且自转周期最快，它和土星、天王星都自带行星环，地球卫星是月球，金星和水星是太阳系中唯二不带卫星的行星。太阳作为恒星本身会自转，而行星除了自转外还会围绕它的恒心公转，由于行星轨道多是椭圆，为了简化难度（偷懒）我们假定他们的公转轨道都是圆形，而地球的自转轨道也是斜的，这些细节后面会进一步完善。 AR工程中有一个ARSCNView，它用来加载3D模型的AR视图的，它继承于SCNView，相对的加载2D视图的就是ARSKView，视图中的那些模型的创建运动就需要用到本章所说的SceneKit和SpriteKit。它们是iOS中用来开发3D模型和2D模型的引擎，由于没用过Unity3D开发，所以此处不介绍。 
     Sprite是用来创建2D模型，在游戏开发中，指的是以图像方式呈现在屏幕上的一个图像。这个图像也许可以移动，用户可以与其交互，也有可能仅只是游戏的一个静止的背景图。而在AR中，2D模型会随着手机的远近放大缩小，而不能像3D模型那样可以从侧面观察。 
     SceneKit 建立在 OpenGL 的基础上，包含了如光照、模型、材质、摄像机等高级引擎特性，我们可以基于它做出很多逼真的3D物理模型。 每个ARSCNView中都带有一个场景SCNScene，它用来承载那些带有几何结构、光度、相机以及其他属性的节点SCNNode，一个完整的3D场景就这么展现出来了。一个SCNScene可以包含多个SCNNode子节点，它们一般都是呈树状结构，一个子节点SCNNode可以有多个childNode，而SCNNode只有一个parentNode，rootNode作为根节点，我们通过rootNode添加自己的子节点SCNNode。
    
    SCNNode的常用方法： 
     addChildNode(_:)
    insertChildNode(_: atIndex:)
    removeFromParentNode()
     接下来介绍下SCNNode的几种常用的属性对象
    ** 1. SCNGeometry **
      SceneNode提供几种几何模型，例如六面体(SCNBox)、平面(SCNPlane，只有一面)、无限平面(SCNFloor，沿着x-z平面无限延伸)、球体(SCNSphere)等等。
    例如我们创建一个半径为0.25的球体 SCNNode *sunNode = [SCNNode new];
    sunNode.geometry = [SCNSphere sphereWithRadius:0.25];
     为了突出行星运动轨迹，我们给每颗星星添加了轨道，一开始我使用的是SCNPlane后来发现它只有一个平面，你从反面是看不到的，于是我使用的是SCNBox SCNNode *mercuryOrbit = [SCNNode node];
    //设置不透明度
    mercuryOrbit.opacity = 0.4;
    //设置轨道的结构体，height为0
    mercuryOrbit.geometry = [SCNBox boxWithWidth:0.86 height:0 length:0.86 chamferRadius:0];
    mercuryOrbit.geometry.firstMaterial.diffuse.contents = @"art.scnassets/solar/orbit.png";
    //纹理滤波
    mercuryOrbit.geometry.firstMaterial.diffuse.mipFilter = SCNFilterModeLinear;
    mercuryOrbit.rotation = SCNVector4Make(0, 1, 0, M_PI_2);
    //光照模式
    mercuryOrbit.geometry.firstMaterial.lightingModelName = SCNLightingModelConstant; // no lighting
    [_sunNode addChildNode:mercuryOrbit];
     补充一下纹理滤波这个属性有什么用?
    当材料表面的部分出现较大或小于原来的纹理图像时，纹理过滤决定了材料属性的内容的外观 @property(nonatomic) SCNFilterMode minificationFilter
    可选项
    typedef enum : NSInteger { 
    SCNFilterModeNone = 0, // 当这个位置没有纹理颜色时，会采样离他最近的颜色值 
    SCNFilterModeNearest = 1, //当这个位置没有纹理颜色时,线性插值颜色作为自己的颜色
    SCNFilterModeLinear = 2, } SCNFilterMode;
    默认值为 SCNFilterModeLinear
     ** 2. SCNMaterial **
    SceneNode提供8种属性用来设置模型材质 
     
      
       Diffuse 漫发射属性表示光和颜色在各个方向上的反射量 
       Ambient  环境光以固定的强度和固定的颜色从表面上的所有点反射出来。如果场景中没有环境光对象，这个属性对节点没有影响 
       Specular 镜面反射是直接反射到使用者身上的光线，类似于镜子反射光线的方式。此属性默认为黑色，这将导致材料显得呆滞 
       Normal 正常照明是一种用于制造材料表面光反射的技术，基本上，它试图找出材料的颠簸和凹痕，以提供更现实发光效果 
       Reflective 反射光属性是一个镜像表面反射环境。表面不会真实地反映场景中的其他物体 
       Emission 该属性是由模型表面发出的颜色。默认情况下，此属性设置为黑色。如果你提供了一个颜色，这个颜色就会体现出来，你可以提供一个图像。SceneKit将使用此图像提供“基于材料的发光效应”。 
       Transparent 用来设置材质的透明度 
       Multiply 通过计算其他所有属性的因素生成最终的合成的颜色 
      // 地球贴图
        _earthNode.geometry.firstMaterial.diffuse.contents = @"art.scnassets/solar/earth-diffuse-mini.jpg";
        _earthNode.geometry.firstMaterial.emission.contents = @"art.scnassets/solar/earth-emissive-mini.jpg";
        _earthNode.geometry.firstMaterial.specular.contents = @"art.scnassets/solar/earth-specular-mini.jpg";
     另外我们对SCNNode进行copy时，其属性SCNMaterial并不会执行深拷贝，也就是说被拷贝对象属性只是对原来属性的引用而已。
    **3. SCNLight **
    SceneNode中完全都是动态光照，提供四种类型的光照 
     
      
       SCNLightTypeAmbient 环境光 
       SCNLightTypeOmni 聚光灯 
       SCNLightTypeDirectional 定向光源 
       SCNLightTypeSpot 点光源
    由于太阳作为太阳系的光源，所以我们需要能从各个角度看到它发光，所以它的type = SCNLightTypeOmni，也就是聚光灯 
      //给sunNode添加光照
    SCNNode *lightNode = [SCNNode node];
    lightNode.light = [SCNLight light];
    lightNode.light.color = [UIColor blackColor]; // initially switched off
    lightNode.light.type = SCNLightTypeOmni;
    [_sunNode addChildNode:lightNode];
        
     // Configure attenuation distances because we don't want to light the floor
    lightNode.light.attenuationEndDistance = 19;
    lightNode.light.attenuationStartDistance = 21;
     
     
      添加动画--CoreAnimation 地球自转动画 //earthNode以y轴不停的旋转，每次旋转的周期为1s。
    [_earthNoderunAction:[SCNActionrepeatActionForever:[SCNActionrotateByX:0y:2z:0duration:1]]];
     月球自转动画 CABasicAnimation*animation = [CABasicAnimationanimationWithKeyPath:@"rotation"];//月球自转
    animation.duration=1.5; //自转周期1.5s
    animation.toValue= [NSValuevalueWithSCNVector4:SCNVector4Make(0,1,0,M_PI*2)];//此处的意思是围绕y轴([0,0,0]->[0,1,0])旋转360°
    animation.repeatCount=FLT_MAX;//重复次数，此处无限次
    [_moonNode addAnimation:animation forKey:@"moon rotation"];//将动画添加至moonNode节点
     接下来我们来实现月球随着地球公转
      moonRotationNode添加moonNode，moonNode由于与原点有偏移，moonRotation自转后就实现了moonNode围绕原点公转了，然后再加moonRotationNode添加至earthGroupNode即可。 _moonNode.position=SCNVector3Make(0.1,0,0);//设置moon的位置
    SCNNode*moonRotationNode = [SCNNodenode];
    [moonRotationNodeaddChildNode:_moonNode];
    // Rotate the moon around the Earth
    CABasicAnimation*moonRotationAnimation = [CABasicAnimationanimationWithKeyPath:@"rotation"];
    moonRotationAnimation.duration=15.0;
    moonRotationAnimation.toValue= [NSValuevalueWithSCNVector4:SCNVector4Make(0,1,0,M_PI*2)];
    moonRotationAnimation.repeatCount=FLT_MAX;
    [moonRotationNodeaddAnimation:animationforKey:@"moon rotation around earth"];
    [_earthGroupNodeaddChildNode:moonRotationNode];//将moonRotationNode添加至earthGroupNode节点
     如何实现地球子系统围绕太阳公转 SCNNode*earthRotationNode = [SCNNodenode];
    [_sunNodeaddChildNode:earthRotationNode];
    // Earth-group (will contain the Earth, and the Moon)
    [earthRotationNodeaddChildNode:_earthGroupNode];
    // Rotate the Earth around the Sun
    animation = [CABasicAnimationanimationWithKeyPath:@"rotation"];
    animation.duration=30.0;
    animation.toValue= [NSValuevalueWithSCNVector4:SCNVector4Make(0,1,0,M_PI*2)];
    animation.repeatCount=FLT_MAX;
    [earthRotationNodeaddAnimation:animationforKey:@"earth rotation around sun"];
     同理其他几颗星体也可以如此，由于土星自带行星环，需要额外处理一下。 CABasicAnimation*animation = [CABasicAnimationanimationWithKeyPath:@"rotation"];//月球自转
    animation.duration=1.5; //自转周期1.5s
    animation.toValue= [NSValuevalueWithSCNVector4:SCNVector4Make(0,1,0,M_PI*2)];//此处的意思是围绕y轴([0,0,0]->[0,1,0])旋转360°
    animation.repeatCount=FLT_MAX;//重复次数，此处无限次
    [_moonNode addAnimation:animation forKey:@"moon rotation"];//将动画添加至moonNode节点
     为了让太阳的效果更佳逼真，我们给它增加了光环     // Add a halo to the Sun (a simple textured plane that does not write to depth)
        _sunHaloNode = [SCNNode node];
        _sunHaloNode.geometry = [SCNPlane planeWithWidth:2.5 height:2.5];
        _sunHaloNode.rotation = SCNVector4Make(1, 0, 0, 0 * M_PI / 180.0);
        _sunHaloNode.geometry.firstMaterial.diffuse.contents = @"art.scnassets/solar/sun-halo.png";
        _sunHaloNode.geometry.firstMaterial.lightingModelName = SCNLightingModelConstant; // no lighting
        _sunHaloNode.geometry.firstMaterial.writesToDepthBuffer = NO; // do not write to depth
        _sunHaloNode.opacity = 0.2;
        [_sunNode addChildNode:_sunHaloNode];
     我们还给地球增加云层 SCNNode *cloudsNode = [SCNNode node];
        cloudsNode.geometry = [SCNSphere sphereWithRadius:0.06];
        [_earthNode addChildNode:cloudsNode];
        
        cloudsNode.opacity = 0.5;
        // This effect can also be achieved with an image with some transparency set as the contents of the 'diffuse' property
        cloudsNode.geometry.firstMaterial.transparent.contents = @"art.scnassets/solar/cloudsTransparency.png";
        cloudsNode.geometry.firstMaterial.transparencyMode = SCNTransparencyModeRGBZero;
     以上我们就实现了太阳系的模型创建以及行星的自转并周期的围绕太阳公转，但是如何才能有更好的观看效果呢，于是我们记起了上章讲到的ARKit，通过ARSession的一个Delegate函数 //pragma mark -ARSessionDelegate
    //会话位置更新
    -- (void)session:(ARSession *)session didUpdateFrame:(ARFrame *)frame
    {
        //监听手机的移动，实现近距离查看太阳系细节，为了凸显效果变化值*3
        [_sunNode setPosition:SCNVector3Make(
                              -3 * frame.camera.transform.columns[3].x, 
                              -0.1 - 3 * frame.camera.transform.columns[3].y, 
                              -2 - 3 * frame.camera.transform.columns[3].z)];
    }
     
     
      小结 这样我们就完成了一个通过ARKit+SceneKit实现将太阳系装进iPhone的梦想了，女朋友说我想要天上的星星，于是我打开了ARSolarPlay抓住了Solar，你看整个太阳系尽在我的掌中，说吧，你想要哪颗？简直撩妹/汉神器有木有。

![Image 1][]

[400]: /images/20220603/c841ef65bf8c46e893920b94a320927e.png
[104422x4kstius8iranqj5.gif]: /images/20220603/c5f43e960a0d434f8f09cb9facd64e2e.png
[104422x4kstius8iranqj5.gif 1]: /images/20220603/c5f43e960a0d434f8f09cb9facd64e2e.png%5C%22+target=%5C%22_blank%5C%22+target=%5C%22_blank%5C%22+target=%5C%22_blank
[Image 1]: 
[662]: /images/20220603/32347f8d959a48dda1c6c3409d2ef7a8.png
[https_developer.apple.com_download]: https://link.jianshu.com/?t=https://developer.apple.com/download/%5C%22+target=%5C%22_blank%5C%22+rel=%5C%22nofollow%5C%22+target=%5C%22_blank%5C%22+target=%5C%22_blank%5C%22+target=%5C%22_blank
[580]: /images/20220603/05d296f88b68400db691cf29645304fb.png
[https_github.com_miliPolo_ARSolarPlay]: https://link.jianshu.com/?t=https://github.com/miliPolo/ARSolarPlay%5C%22+target=%5C%22_blank%5C%22+rel=%5C%22nofollow%5C%22+target=%5C%22_blank%5C%22+target=%5C%22_blank%5C%22+target=%5C%22_blank