以前 Cradboard 也是支持在 iOS 上使用的,依靠 Unity 来实现,所以你需要用 C# 来编写 iOS app(听起来很奇怪对不对?) 而今天在 GDG China 看见 全新 VR 视图:让你的应用和网站嵌入沉浸式内容 当然迫不及待的想尝试一下,于是翻译了最新的文档,大家一起来体验一下在 iOS 上实现虚拟现实的新方式吧。
Cardboard 是 Google 一款能够很方便让你的手机变身 VR 设备的产品,如果你还没有拥有它,可以去某宝买一个 ;)
这个 Cardboard SDK 可以让你很方便的控制音频的空间感(例如左右声道),也可以控制响度,所以你可以让一段对话在一个小飞船中或者一个很大的地下洞穴中表现得很不一样。
在这个示例程序中我们完成了一个寻宝游戏,他演示了 Cardboard 的核心功能。玩家将会在一个虚拟的世界中寻找宝物。你将会学习如何使用光照、空间运动和着色等基本功能如果玩家看见了他要找的东西,将会触发空间音效和视差效果。
基本要求
为了能够运行这个示例程序,你至少需要满足以下条件:
- Xcode 7.1 或更高版本
- CocoaPods, 访问 CocoaPods 来安装。
- 一部运行 iOS 7.0 或更高版本的 iPhone。
下载并构建 app
- 首先将项目 clone 到本地:
1git clone https://github.com/googlesamples/cardboard-ios.git - 在你的命令行中,进入到
CardboardSamples
里的TreasureHunt
文件夹然后执行:
1pod update
- 这将会安装项目所有的依赖。(注:因为众所周知的原因,这个步骤可能会非常缓慢)
tips:CardboardSDK
在https://www.gstatic.com/cpdc/97ceadc125bddf66-CardboardSDK-0.7.0.tar.gz
现在你应该能看见TreasureHunt.xcworkspace
文件了,用 Xcode 运行起来应该像这个样子:
开始游戏
现在戴上你的耳机,来在这个虚拟现实的空间里搜寻宝物吧!
寻找宝物
- 四处移动你的方向,直到宝物进入你的视野:
- 直视这个宝物,他将会变成橘色:
- 激活开关就可以收集宝物(根据 Cradboard 的不同,可能是拨动物理按钮也可能是触碰屏幕之类的):
代码概览
这个寻宝游戏(TreasureHunt
)通过 OpenGL
来为你的双眼呈现不同的讯息,他们是这样工作的:
- 一个
UIViewController
拥有一个GCSCardboardView
对象 - 一个渲染器遵循
GCSCardboardViewDelegate
协议 - 通过
CADisplayLink
对象添加一个渲染循环 - 捕获输入
让 UIViewController
拥有一个 GCSCardboardView
这个寻宝游戏定义了一个 UIViewController
,也就是 TreasureHuntViewController
,他拥有一个 GCSCardboardView
,并且有一个遵循 GCSCardboardViewDelegate
协议的 TreasureHuntRenderer
的实例来成为 GCSCardboardView
的代理。 此外,这个应用有一个渲染循环,TreasureHuntRenderLoop
这个类,他有一个 - render
方法来GCSCardboardView
。
1 2 3 4 5 6 7 8 9 10 11 |
- (void)loadView { _treasureHuntRenderer = [[TreasureHuntRenderer alloc] init]; _treasureHuntRenderer.delegate = self; _cardboardView = [[GCSCardboardView alloc] initWithFrame:CGRectZero]; _cardboardView.delegate = _treasureHuntRenderer; ... _cardboardView.vrModeEnabled = YES; ... self.view = _cardboardView; } |
定义一个遵循 GCSCardboardViewDelegate
协议的渲染器
GCSCardboardView
将会用于向你展示内容,他通过 GCSCardboardViewDelegate
协议来完成这些工作,所以 TreasureHuntRenderer
将会遵循 GCSCardboardViewDelegate
协议:
1 2 3 4 5 6 |
#import "GCSCardboardView.h" /** TreasureHunt renderer. */ @interface TreasureHuntRenderer : NSObject<GCSCardboardViewDelegate> @end |
声明 GCSCardboardViewDelegate
协议中的内容
为了在 GCSCardboardView
显示内容,TreasureHuntRenderer
需要遵循 GCSCardboardViewDelegate
的这些协议:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@protocol GCSCardboardViewDelegate<NSObject> - (void)cardboardView:(GCSCardboardView *)cardboardView didFireEvent:(GCSUserEvent)event; - (void)cardboardView:(GCSCardboardView *)cardboardView willStartDrawing:(GCSHeadTransform *)headTransform; - (void)cardboardView:(GCSCardboardView *)cardboardView prepareDrawFrame:(GCSHeadTransform *)headTransform; - (void)cardboardView:(GCSCardboardView *)cardboardView drawEye:(GCSEye)eye withHeadTransform:(GCSHeadTransform *)headTransform; - (void)cardboardView:(GCSCardboardView *)cardboardView shouldPauseDrawing:(BOOL)pause; @end |
接下来我们将实现 willStartDrawing
,prepareDrawFrame
,和 drawEye
方法。
实现 willStartDrawing
方法
要执行 GL(Graphics Library) 一次性初始化,实现 - cardboardView:willStartDrawing:
方法,并在其中来加载着色器初始化集合场景并添加到 GL 的参数中,并且还初始化了一个 GCSCardboardAudioEngine
实例:
1 |
git clone https://github.com/googlesamples/cardboard-ios.git |
CardboardSamples
里的 TreasureHunt
文件夹然后执行:
1 |
pod update |
tips:
CardboardSDK
在 https://www.gstatic.com/cpdc/97ceadc125bddf66-CardboardSDK-0.7.0.tar.gz
现在你应该能看见
TreasureHunt.xcworkspace
文件了,用 Xcode 运行起来应该像这个样子:
开始游戏
现在戴上你的耳机,来在这个虚拟现实的空间里搜寻宝物吧!
寻找宝物
- 四处移动你的方向,直到宝物进入你的视野:
- 直视这个宝物,他将会变成橘色:
- 激活开关就可以收集宝物(根据 Cradboard 的不同,可能是拨动物理按钮也可能是触碰屏幕之类的):
代码概览
这个寻宝游戏(TreasureHunt
)通过 OpenGL
来为你的双眼呈现不同的讯息,他们是这样工作的:
- 一个
UIViewController
拥有一个GCSCardboardView
对象 - 一个渲染器遵循
GCSCardboardViewDelegate
协议 - 通过
CADisplayLink
对象添加一个渲染循环 - 捕获输入
让 UIViewController
拥有一个 GCSCardboardView
这个寻宝游戏定义了一个 UIViewController
,也就是 TreasureHuntViewController
,他拥有一个 GCSCardboardView
,并且有一个遵循 GCSCardboardViewDelegate
协议的 TreasureHuntRenderer
的实例来成为 GCSCardboardView
的代理。 此外,这个应用有一个渲染循环,TreasureHuntRenderLoop
这个类,他有一个 - render
方法来GCSCardboardView
。
1 2 3 4 5 6 7 8 9 10 11 |
- (void)loadView { _treasureHuntRenderer = [[TreasureHuntRenderer alloc] init]; _treasureHuntRenderer.delegate = self; _cardboardView = [[GCSCardboardView alloc] initWithFrame:CGRectZero]; _cardboardView.delegate = _treasureHuntRenderer; ... _cardboardView.vrModeEnabled = YES; ... self.view = _cardboardView; } |
定义一个遵循 GCSCardboardViewDelegate
协议的渲染器
GCSCardboardView
将会用于向你展示内容,他通过 GCSCardboardViewDelegate
协议来完成这些工作,所以 TreasureHuntRenderer
将会遵循 GCSCardboardViewDelegate
协议:
1 2 3 4 5 6 |
#import "GCSCardboardView.h" /** TreasureHunt renderer. */ @interface TreasureHuntRenderer : NSObject<GCSCardboardViewDelegate> @end |
声明 GCSCardboardViewDelegate
协议中的内容
为了在 GCSCardboardView
显示内容,TreasureHuntRenderer
需要遵循 GCSCardboardViewDelegate
的这些协议:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@protocol GCSCardboardViewDelegate<NSObject> - (void)cardboardView:(GCSCardboardView *)cardboardView didFireEvent:(GCSUserEvent)event; - (void)cardboardView:(GCSCardboardView *)cardboardView willStartDrawing:(GCSHeadTransform *)headTransform; - (void)cardboardView:(GCSCardboardView *)cardboardView prepareDrawFrame:(GCSHeadTransform *)headTransform; - (void)cardboardView:(GCSCardboardView *)cardboardView drawEye:(GCSEye)eye withHeadTransform:(GCSHeadTransform *)headTransform; - (void)cardboardView:(GCSCardboardView *)cardboardView shouldPauseDrawing:(BOOL)pause; @end |
接下来我们将实现 willStartDrawing
,prepareDrawFrame
,和 drawEye
方法。
实现 willStartDrawing
方法
要执行 GL(Graphics Library) 一次性初始化,实现 - cardboardView:willStartDrawing:
方法,并在其中来加载着色器初始化集合场景并添加到 GL 的参数中,并且还初始化了一个 GCSCardboardAudioEngine
实例: