前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >SceneKit - 打造全景+VR 播放框架

SceneKit - 打造全景+VR 播放框架

作者头像
酷走天涯
发布2018-09-14 15:08:08
2K0
发布2018-09-14 15:08:08
举报
文章被收录于专栏:每日一篇技术文章
功能介绍

1.全景模式和VR模式 2.支持滑动切换视角 3.支持捏合放大缩小 4.支持重力感应 5.包含头控功能(上一曲,下一曲,暂停和播放,以及音量键) 6.播放到指定的时间 7.播放时长缓冲以及总时间回调 8.视角恢复(当你手势移动视角发生变化时,想要恢复到初始视角时)

使用的核心技术

SceneKit SpriteKit

先来看一个头文件

代码语言:javascript
复制
#import <UIKit/UIKit.h>
#import <AVFoundation/AVFoundation.h>
/// 播放的类型
typedef enum : NSUInteger {
  Panorama, // 全景
  VR        // VR
} PlayerType;

typedef enum : NSUInteger {
    PlayerStatueLoading, // 加载中
    PlayerStatueLoadingAvailable // 可播放
} PlayerStatueType;
// 头控回调协议
@protocol ZBPlayerViewDelegate<NSObject>
@required
/*************以下是VR模式下头控开关回调的方式  *****************/
/// 播放下一个视频回调
-(void)next;
/// 播放上一个视频回调
-(void)previous;
/// 降低声音回调
-(void)lowVoice;
/// 增高声音回调
-(void)highVoice;
/// 全景模式下有手势滑动,此时显示恢复按钮,当用户点击恢复按钮后,可隐藏掉按钮,用户下次滑动后,仍然回调此方法
-(void)slideInPanoramaMode;
/// 是否可播状态检测 加载中 或者 可播放
-(void)playerStatusChange:(PlayerStatueType)status;
-(void)handleTapGesture:(UITapGestureRecognizer*)tapGesture;
/************* 以下是所有模式都会触发回调的方法 *****************/
@optional
// 播放完毕
-(void)stop;
/// 视频播放失败回调
-(void)failure;
/// 视频相关时间回调
-(void)currentTime:(double)currentTime cacheTime:(double)cacheTime duration:(double)duration;
@end
@interface ZBPlayerView : UIView
@property(nonatomic,weak) id<ZBPlayerViewDelegate> delegate;
/// 重力感应开关 默认为关闭
@property(nonatomic)BOOL enableMotion;
/// 视频总时长
@property(nonatomic,readonly)double duration;
/// 设置gif动画,元素可以为 xxx.png/jpg 或者UIImage 都可以
@property(nonatomic,strong)NSArray *gif;
@property(nonatomic,strong)AVPlayer *player;
@property(assign,nonatomic,readonly)bool     isPlaying; /// 播放器是否是正在播放的状态
/// 初始化设置 必须先执行这个
-(void)setup;
/// 播放视频本地/网络都可以
-(void)play:(NSURL*)url;
/// 播放当前视频
-(void)play;
/// 暂停
-(void)pause;
/// 设置播放类型  不设置默认为全景
-(void)setPlayerType:(PlayerType)type;
/// 滑动播放时使用这个方法
-(void)seekToTime:(double)time;
/// 当手势移动此视频时,使用此方法可定位到起始位置
-(void)reset;
/// 释放资源
-(void)releaseResource;
@end

运行效果如下

VR模式

全景模式

头控开关演示

技术难点分析

1.渲染全景的模型

1.其实是一个球体模型 2.模型渲染的时候, 一般会渲染两个面,我们需要进行优化,只让它渲染内变表面

2.如何将视频渲染到球体上

1.通过AVPlayer 获取视频流 2.通过SKVedioNode 渲染视频 3.将SKVedioNode添加到SKScene场景上 4.将场景作为球体渲染的对象渲染出来

3.头控技术

1.在球体中间创建一个头控根节点,通过控制其的角度,改变菜单的位置 2.头控节点的上面添加子节点,即每个功能节点

4.摄像机节点改变视角

1.创建一个节点绑定一个照相机,一定要放在场景的中心 2.改变照相机的视角来决定呈现出球体的那部分是可见的

...

更多技术细节

a.怎么实现分屏? b.重力感应怎么改变视角 c.滑动手势怎么改变视角 d.悬停动画怎么实现

完整代码以及详细讲解请前往App Store 搜索SceneKit

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.03.17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 功能介绍
  • 使用的核心技术
  • 技术难点分析
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档