ARKit如何将太阳系装进iPhone(二)

转载请注明原作者

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

演示视频

ARSolarPlay.gif


天文科普

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

圣斗士星矢.jpg

3D模型创建--SceneKit

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

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

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

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

代码见同性交友网站:https://github.com/miliPolo/ARSolarPlay(OC实现)
                    https://github.com/miliPolo/ARSolarPlaySwift(Swift实现)

上一篇文章:如何用ARKit将太阳系装进iPhone(一)


如果您觉得有价值,请在github赏个star,不胜感激。
如果有什么想交流的,欢迎私信。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容