Hướng dẫn nhanh về Google Cardboard dành cho iOS

Hướng dẫn này chỉ cho bạn cách sử dụng Cardboard SDK dành cho iOS để tạo Ứng dụng ảo của riêng bạn Trải nghiệm thực tế (VR).

Lưu ý: Hãy nhớ xem lại Nguyên tắc sử dụng thương hiệu Cardboard trước khi phân phối ứng dụng đến nhiều đối tượng hơn.

Bạn có thể sử dụng SDK của Cardboard để biến điện thoại thông minh thành nền tảng thực tế ảo. Một chiếc điện thoại thông minh có thể hiển thị cảnh 3D bằng kết xuất lập thể, theo dõi và phản ứng với chuyển động của đầu, và tương tác với ứng dụng bằng cách phát hiện thời điểm người dùng nhấn nút trình xem.

Để bắt đầu, bạn sẽ sử dụng HelloCardboard, một trò chơi minh hoạ thể hiện các tính năng cốt lõi của Cardboard SDK. Trong trò chơi, người dùng nhìn quanh thế giới ảo để tìm và thu thập . Hướng dẫn cách:

• Thiết lập môi trường phát triển
• Tải xuống và tạo ứng dụng minh hoạ
• Quét mã QR của thiết bị xem Cardboard để lưu các tham số của thiết bị này
• Theo dõi cử động đầu của người dùng
• Kết xuất hình ảnh lập thể bằng cách đặt độ méo chính xác cho mỗi mắt

Thiết lập môi trường phát triển

Yêu cầu về phần cứng:

• iPhone chạy iOS 12.0 trở lên
• Thiết bị xem bìa các tông

Yêu cầu về phần mềm:

• Xcode 12.5 trở lên
• CocoaPods 1.9 trở lên

Tải xuống và tạo ứng dụng minh hoạ

SDK của Cardboard được xây dựng bằng Vùng đệm giao thức được biên dịch trước Tệp nguồn C++. Bạn có thể tìm thấy các bước tạo tệp nguồn từ đầu tại đây.

1. Sao chép SDK của Cardboard và ứng dụng minh hoạ Hello Cardboard trên GitHub bằng cách chạy lệnh này:

   git clone https://github.com/googlevr/cardboard.git

2. Cài đặt phần phụ thuộc Bộ đệm giao thức vào dự án Xcode bằng cách chạy lệnh này tại thư mục gốc của kho lưu trữ:

   pod install

3. Mở không gian làm việc của Cardboard (Cardboard.xcworkspace) trong Xcode.

4. Hãy thay đổi mã nhận dạng gói của ứng dụng để bạn có thể ký ứng dụng với nhóm của mình.

5. Chuyển đến SDK > Tạo giai đoạn > Liên kết tệp nhị phân với thư viện

   1. Xoá libPods-sdk.a khỏi danh sách bằng cách chọn tên này rồi nhấp vào "-" .
   2. Thêm libProtobuf-C++.a vào danh sách bằng cách nhấp vào dấu "+" và chọn nút đó. Trong trường hợp thông báo đề xuất sử dụng XCFramework bật lên, hãy nhấp vào "Add Anyway".

6. Nhấp vào Chạy.

Quét mã QR

Để lưu các thông số của thiết bị, hãy quét mã QR trên thiết bị xem Cardboard:

Xem bản minh hoạ

Trong HelloCardboard, bạn sẽ tìm và thu thập các hình cầu trắc địa trong không gian 3D.

Cách tìm và thu thập một hình cầu:

1. Di chuyển đầu theo bất kỳ hướng nào cho đến khi bạn nhìn thấy một quả cầu lơ lửng.

2. Nhìn thẳng vào hình cầu. Thao tác này sẽ khiến nút thay đổi màu sắc.

3. Nhấn nút thiết bị xem Cardboard để "thu thập" hình cầu đó.

Định cấu hình thiết bị

Khi người dùng nhấn vào biểu tượng bánh răng để chuyển đổi giữa các thiết bị xem Cardboard, didTapSwitchButton được gọi trong HelloCardboardOverlayView.

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

Thao tác này sẽ gọi CardboardQrCode_scanQrCodeAndSaveDeviceParams, thao tác này sẽ mở ra cửa sổ để quét mã QR của người xem. Khi người dùng quét mã QR, thông số biến dạng được cập nhật.

- (void)switchViewer {
  CardboardQrCode_scanQrCodeAndSaveDeviceParams();
}

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

Theo dõi chuyển động của đầu

Tạo thiết bị theo dõi chuyển động của đầu

Công cụ theo dõi chuyển động đầu được tạo một lần trong phương thức viewDidLoad của HelloCardboardViewController:

_cardboardHeadTracker = CardboardHeadTracker_create();

Tạm dừng và tiếp tục thiết bị theo dõi chuyển động của đầu

Phương thức pauseCardboard và resumeCardboard trong lớp HelloCardboardViewController tạm dừng và tiếp tục theo dõi chuyển động của đầu, . resumeCardboard cũng đặt cờ _updateParams, điều này khiến tham số thiết bị sẽ được cập nhật trong hàm gọi vẽ tiếp theo.

- (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;
}

Lưu ý: Mỗi lần Cardboard quét mã QR từ một thiết bị xem khác, Phương thức pauseCardboard và resumeCardboard được gọi, gây ra lỗi thông số thiết bị cần cập nhật.

Biến dạng ống kính

Mỗi lần Cardboard quét một mã QR mới, mã sau đây sẽ đọc các thông số đã lưu và sử dụng chúng để tạo đối tượng méo ống kính, áp dụng độ méo ống kính thích hợp cho nội dung được kết xuất:

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));

Kết xuất

Kết xuất nội dung trong Cardboard bao gồm những việc sau:

• Tạo hoạ tiết
• Tải ma trận chế độ xem và ma trận chiếu cho mắt trái và mắt phải
• Tạo trình kết xuất và thiết lập lưới biến dạng
• Kết xuất từng khung hình

Tạo hoạ tiết

Nội dung được vẽ theo hoạ tiết, được chia thành nhiều phần cho mắt trái và mắt phải. Các phần này được khởi tạo lần lượt trong _leftEyeTexture và _rightEyeTexture. Ứng dụng mẫu sử dụng một kết cấu duy nhất cho cả hai mắt, nhưng cũng có thể tạo một kết cấu riêng kết cấu cho mỗi mắt.

// 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");

Các hoạ tiết này được truyền dưới dạng tham số đến CardboardDistortionRenderer_renderEyeToDisplay.

Xem ma trận chiếu và ma trận chiếu cho mắt trái và mắt phải

Trước tiên, hãy truy xuất ma trận mắt cho mắt trái và mắt phải:

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]);

Tiếp theo, hãy lấy lưới méo cho mỗi mắt và truyền lưới đó đến trình kết xuất méo:

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

Tạo trình kết xuất và thiết lập đúng lưới méo

Trình kết xuất chỉ cần được khởi động một lần. Sau khi tạo trình kết xuất, hãy đặt lưới méo cho mắt trái và phải theo các giá trị lưới được trả về từ Hàm CardboardLensDistortion_getDistortionMesh.

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

Kết xuất nội dung

Truy xuất hướng đầu hiện tại từ CardboardHeadTracker_getPose:

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

Sử dụng hướng đầu hiện tại với ma trận khung hiển thị và ma trận chiếu để tạo khung hiển thị ma trận chiếu và sử dụng chúng để kết xuất nội dung thế giới cho mỗi mắt:

// 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]));

Dùng CardboardDistortionRenderer_renderEyeToDisplay để áp dụng hiệu ứng méo sửa nội dung và hiển thị nội dung lên màn hình.

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