此页面由 Cloud Translation API 翻译。

Switch to English

iOS 版 Google Cardboard 快速入门

本指南介绍如何使用 Cardboard SDK for iOS 打造您自己的虚拟实境 (VR) 体验。

您可以使用 Cardboard SDK 将智能手机转变成 VR 平台。智能手机可以呈现立体呈现的 3D 场景、跟踪头部移动并做出反应，还能通过检测用户何时按观看者按钮来与应用互动。

首先，您将使用 HelloCardboard，这是一款演示 Cardboard SDK 核心功能的演示游戏。在游戏中，用户会环游虚拟世界寻找和收集物体。该指南介绍了如何执行以下操作：

设置您的开发环境
下载并构建演示版应用
扫描 Cardboard 观看器的二维码以保存其参数
跟踪用户的头部动作
为每只眼睛设置正确的失真值，以渲染立体图像

设置您的开发环境

硬件要求：

搭载 iOS 12.0 或更高版本的 iPhone
Cardboard 查看器

软件要求：

Xcode 12.5 或更高版本
CocoaPods 1.9 或更高版本

下载并构建演示版应用

Cardboard SDK 使用预编译的协议缓冲区 C++ 源文件构建而成。从头开始构建源代码文件的步骤如下：此处。

运行以下命令，从 GitHub 克隆 Cardboard SDK 和 Hello Cardboard 演示版应用：
```
git clone https://github.com/googlevr/cardboard.git
```
在代码库根目录中运行以下命令，将 Protocol Buffer 依赖项安装到 Xcode 项目中：
```
pod install
```
在 Xcode 中打开 Cardboard 工作区 (Cardboard.xcworkspace)。
更改应用的软件包 ID，以便与您的团队一起为应用签名。
依次转到 SDK &gt；Build Phases &gt Link Binary With Libraries
1. 选择“libPods-sdk.a”，然后点击 &-39; 按钮，即可从列表中移除它。
2. 点击 + '+' 按钮并选择 libProtobuf-C++.a 即可将其添加到列表。如果出现提示使用 XCFramework 的消息，请点击“Add Anyway”。
点击运行。

扫描二维码

如需保存设备参数，请扫描 Cardboard 观看器上的二维码：

试用演示

在 HelloCardboard 中，您将寻找并收集 3D 空间中的测地球体。

如需查找和收集球体，请执行以下操作：

头部朝任意方向移动，直至您看到漂浮的球体。
直接观察球体。这会导致其颜色发生变化。
按下 Cardboard 观看器按钮以“收集”球体。

配置设备

当用户点按齿轮图标切换 Cardboard 观看器时，系统会在 HelloCardboardOverlayView 中调用 didTapSwitchButton 方法。

- (void)didTapSwitchButton:(id)sender {
  if ([self.delegate respondsToSelector:@selector(didTapBackButton)]) {
    [self.delegate didChangeViewerProfile];
  }
  self.settingsBackgroundView.hidden = YES;
}

这将调用 CardboardQrCode_scanQrCodeAndSaveDeviceParams，这会打开用于扫描观看者的二维码的窗口。当用户扫描二维码时，设备的失真参数会更新。

- (void)switchViewer {
  CardboardQrCode_scanQrCodeAndSaveDeviceParams();
}

- (void)didChangeViewerProfile {
  [self pauseCardboard];
  [self switchViewer];
  [self resumeCardboard];
}

头部跟踪

创建头部智能设备

该头部跟踪器在 HelloCardboardViewController 的 viewDidLoad 方法中创建一次：

_cardboardHeadTracker = CardboardHeadTracker_create();

暂停和恢复头部智能设备

HelloCardboardViewController 类中的 pauseCardboard 和 resumeCardboard 方法分别暂停和恢复头部跟踪器。resumeCardboard 还会设置 _updateParams 标志，这会导致设备参数在下一次绘制调用中更新。

- (void)pauseCardboard {
  self.paused = true;
  CardboardHeadTracker_pause(_cardboardHeadTracker);
}

- (void)resumeCardboard {
  // Parameters may have changed.
  _updateParams = YES;

  // Check for device parameters existence in app storage. If they're missing,
  // we must scan a Cardboard QR code and save the obtained parameters.
  uint8_t *buffer;
  int size;
  CardboardQrCode_getSavedDeviceParams(&buffer, &size);
  if (size == 0) {
    [self switchViewer];
  }
  CardboardQrCode_destroy(buffer);

  CardboardHeadTracker_resume(_cardboardHeadTracker);
  self.paused = false;
}

镜头失真

每次扫描新的二维码时，以下代码都会读取已保存的参数，并使用这些参数创建镜头失真对象，该对象会将适当的镜头失真应用于渲染的内容：

CardboardQrCode_getSavedDeviceParams(&encodedDeviceParams, &size);

// Create CardboardLensDistortion.
CardboardLensDistortion_destroy(_cardboardLensDistortion);
_cardboardLensDistortion =
    CardboardLensDistortion_create(encodedDeviceParams, size, width, height);

// Initialize HelloCardboardRenderer.
_renderer.reset(new cardboard::hello_cardboard::HelloCardboardRenderer(
      _cardboardLensDistortion, _cardboardHeadTracker, width, height));

渲染

在 Cardboard 中呈现内容涉及以下内容：

创建纹理
获取左右眼的视图和投影矩阵
创建渲染程序并设置失真网格
渲染每一帧

创建纹理

内容绘制在纹理上，纹理拆分为左右眼部分。这两个部分分别在 _leftEyeTexture 和 _rightEyeTexture 中初始化。示例应用为双眼使用单一纹理，但您也可以为每只眼睛创建不同的纹理。

// Generate texture to render left and right eyes.
glGenTextures(1, &_eyeTexture);
glBindTexture(GL_TEXTURE_2D, _eyeTexture);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, _width, _height, 0, GL_RGB, GL_UNSIGNED_BYTE, 0);

_leftEyeTexture.texture = _eyeTexture;
_leftEyeTexture.left_u = 0;
_leftEyeTexture.right_u = 0.5;
_leftEyeTexture.top_v = 1;
_leftEyeTexture.bottom_v = 0;

_rightEyeTexture.texture = _eyeTexture;
_rightEyeTexture.left_u = 0.5;
_rightEyeTexture.right_u = 1;
_rightEyeTexture.top_v = 1;
_rightEyeTexture.bottom_v = 0;
CheckGLError("Create Eye textures");

这些纹理会作为参数传入 CardboardDistortionRenderer_renderEyeToDisplay。

获取左右眼的视图和投影矩阵

首先，检索左眼和右眼的眼矩阵

CardboardLensDistortion_getEyeFromHeadMatrix(_lensDistortion, kLeft, _eyeMatrices[kLeft]);
CardboardLensDistortion_getEyeFromHeadMatrix(_lensDistortion, kRight, _eyeMatrices[kRight]);
CardboardLensDistortion_getProjectionMatrix(_lensDistortion, kLeft, kZNear, kZFar,
                                            _projMatrices[kLeft]);
CardboardLensDistortion_getProjectionMatrix(_lensDistortion, kRight, kZNear, kZFar,
                                            _projMatrices[kRight]);

接下来，获取每只眼睛的失真网格，并将其传递给失真渲染程序：

CardboardLensDistortion_getDistortionMesh(_lensDistortion, kLeft, &leftMesh);
CardboardLensDistortion_getDistortionMesh(_lensDistortion, kRight, &rightMesh);

创建渲染程序并设置正确的失真网格

渲染程序只需初始化一次。渲染程序创建完毕后，根据 CardboardLensDistortion_getDistortionMesh 函数返回的网格值，为左眼和右眼设置新的失真网格。

_distortionRenderer = CardboardOpenGlEs2DistortionRenderer_create();
CardboardDistortionRenderer_setMesh(_distortionRenderer, &leftMesh, kLeft);
CardboardDistortionRenderer_setMesh(_distortionRenderer, &rightMesh, kRight);

呈现内容

从 CardboardHeadTracker_getPose 检索当前头部方向：

CardboardHeadTracker_getPose(_headTracker, targetTime, position, orientation);
_headView =
    GLKMatrix4Multiply(GLKMatrix4MakeTranslation(position[0], position[1], position[2]),
                       GLKMatrix4MakeWithQuaternion(GLKQuaternionMakeWithArray(orientation)));

使用当前的头部方向与视图和投影矩阵来组合视图投影矩阵，并用它们渲染每只眼睛的世界内容：

// Draw left eye.
glViewport(0, 0, _width / 2.0, _height);
glScissor(0, 0, _width / 2.0, _height);
DrawWorld(_leftEyeViewPose, GLKMatrix4MakeWithArray(_projMatrices[kLeft]));

// Draw right eye.
glViewport(_width / 2.0, 0, _width / 2.0, _height);
glScissor(_width / 2.0, 0, _width / 2.0, _height);
DrawWorld(_rightEyeViewPose, GLKMatrix4MakeWithArray(_projMatrices[kRight]));

使用 CardboardDistortionRenderer_renderEyeToDisplay 对内容应用失真校正，并将内容呈现到屏幕上。

CardboardDistortionRenderer_renderEyeToDisplay(_distortionRenderer, renderTarget, /*x=*/0,
                                               /*y=*/0, _width, _height, &_leftEyeTexture,
                                               &_rightEyeTexture);