转载

ARKit如何将太阳系装进iPhone（二）

转载请注明原作者miliPolo

上篇文章我们介绍如何创建一个ARKit项目，并且创建太阳、地球这些球体，接下来我们来谈一谈如何让它们动起来。

ARSolarPlay.gif

天文科普

首先科普下太阳系的结构，太阳系共有八大行星，水星、金星、地球、火星、木星、土星、天王星、海王星，还有颗矮行星冥王星。木星体积最大，且自转周期最快，它和土星、天王星都自带行星环，地球卫星是月球，金星和水星是太阳系中唯二不带卫星的行星。太阳作为恒星本身会自转，而行星除了自转外还会围绕它的恒心公转，由于行星轨道多是椭圆，为了简化难度（偷懒）我们假定他们的公转轨道都是圆形，而地球的自转轨道也是斜的，这些细节后面会进一步完善。

ARKit如何将太阳系装进iPhone（二）

圣斗士星矢.jpg

3D模型创建--SceneKit

AR工程中有一个ARSCNView，它用来加载3D模型的AR视图的，它继承于SCNView，相对的加载2D视图的就是ARSKView，视图中的那些模型的创建运动就需要用到本章所说的SceneKit和SpriteKit。它们是iOS中用来开发3D模型和2D模型的引擎，由于没用过Unity3D开发，所以此处不介绍。

Sprite是用来创建2D模型，在游戏开发中，指的是以图像方式呈现在屏幕上的一个图像。这个图像也许可以移动，用户可以与其交互，也有可能仅只是游戏的一个静止的背景图。而在AR中，2D模型会随着手机的远近放大缩小，而不能像3D模型那样可以从侧面观察。

SceneKit 建立在 OpenGL 的基础上，包含了如光照、模型、材质、摄像机等高级引擎特性，我们可以基于它做出很多逼真的3D物理模型。

ARKit如何将太阳系装进iPhone（二）

SCeneKit结构图.jpg

SCNScene & SCNNode

每个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，你看整个太阳系尽在我的掌中，说吧，你想要哪颗？简直撩妹/汉神器有木有。