การเริ่มต้นใช้งาน Google Cardboard สำหรับ iOS อย่างรวดเร็ว

คู่มือนี้แสดงวิธีใช้ Cardboard SDK สำหรับ iOS เพื่อสร้างอุปกรณ์เสมือนของคุณเอง ประสบการณ์เรียลลิตี้ (VR)

คุณใช้ Cardboard SDK เปลี่ยนสมาร์ทโฟนให้เป็นแพลตฟอร์ม VR ได้ สมาร์ทโฟน สามารถแสดงฉาก 3 มิติที่มีการแสดงภาพสามมิติ ติดตามและตอบสนองต่อการเคลื่อนไหวของศีรษะ และ โต้ตอบกับแอปโดยการตรวจจับเมื่อผู้ใช้กดปุ่มบนแว่น

ในการเริ่มต้น คุณจะใช้ HelloCardboard ซึ่งเป็นเกมสาธิตที่แสดงฟีเจอร์หลักๆ ของ Cardboard SDK ในเกม ผู้ใช้จะมองไปรอบโลกเสมือนเพื่อค้นหาและเก็บสะสม ออบเจ็กต์ ซึ่งจะแสดงวิธีการต่างๆ ดังนี้

  • ตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์
  • ดาวน์โหลดและสร้างแอปเดโม
  • สแกนคิวอาร์โค้ดของแว่น Cardboard เพื่อบันทึกพารามิเตอร์
  • ติดตามการเคลื่อนไหวศีรษะของผู้ใช้
  • แสดงภาพสามมิติโดยการตั้งค่าความผิดเพี้ยนที่ถูกต้องสำหรับดวงตาแต่ละข้าง

ตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์

ข้อกำหนดของฮาร์ดแวร์

ข้อกำหนดของซอฟต์แวร์

ดาวน์โหลดและสร้างแอปเดโม

Cardboard SDK สร้างโดยใช้บัฟเฟอร์โปรโตคอลที่คอมไพล์ไว้ล่วงหน้า ไฟล์ต้นฉบับ C++ ดูขั้นตอนการสร้างไฟล์ต้นฉบับได้ตั้งแต่ต้น ที่นี่

  1. โคลน SDK ของ Cardboard และแอปเดโม Hello Cardboard จาก GitHub โดย ที่เรียกใช้คำสั่งนี้

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

  2. ติดตั้งทรัพยากร Dependency ของ Protocol Buffers ลงในโปรเจ็กต์ Xcode โดยเรียกใช้คำสั่งนี้ที่รูทของที่เก็บ

    pod install

  3. เปิดพื้นที่ทำงานของ Cardboard (Cardboard.xcworkspace) ใน Xcode

  4. เปลี่ยนรหัสชุดของแอปเพื่อให้คุณสามารถลงนามแอปกับทีมของคุณ

  5. ไปที่ SDK > สร้างระยะ > ลิงก์ไบนารีกับไลบรารี

    1. ให้นำ libPods-sdk.a ออกจากรายการโดยเลือกรายการดังกล่าวและคลิก "-"
    2. เพิ่ม libProtobuf-C++.a ลงในรายการโดยคลิกที่เครื่องหมาย "+" แล้วเลือกปุ่มนั้น ในกรณีที่มีข้อความแนะนำให้ใช้ XCFramework ปรากฏขึ้น ให้คลิก "Add Anyway"

  6. คลิกเรียกใช้

สแกนคิวอาร์โค้ด

หากต้องการบันทึกพารามิเตอร์อุปกรณ์ ให้สแกนคิวอาร์โค้ดบนแว่น Cardboard ดังนี้

ลองใช้

ใน HelloCardboard คุณจะค้นหาและเก็บภาพทรงกลมทรงกลมในพื้นที่ 3 มิติ

วิธีค้นหาและรวบรวมทรงกลม

  1. ขยับศีรษะไปในทิศทางใดก็ได้จนกว่าจะเห็นทรงกลมที่ลอยอยู่

  2. มองตรงไปที่ทรงกลม ซึ่งจะทำให้สีเปลี่ยนสี

  3. กดปุ่มแว่น Cardboard เพื่อ "รวบรวม" ทรงกลม

กำหนดค่าอุปกรณ์

เมื่อผู้ใช้แตะไอคอนรูปเฟืองเพื่อเปลี่ยนแว่น Cardboard didTapSwitchButton มีการเรียกใช้ใน HelloCardboardOverlayView

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

การติดตามการเคลื่อนไหวของศีรษะ

สร้างเครื่องติดตามการเคลื่อนไหวศีรษะ

อุปกรณ์ติดตามศีรษะสร้างขึ้นครั้งเดียวในเมธอด viewDidLoad ของ HelloCardboardViewController:

_cardboardHeadTracker = CardboardHeadTracker_create();

หยุดเครื่องติดตามการเคลื่อนไหวศีรษะชั่วคราวและเล่นต่อ

เมธอด pauseCardboard และ resumeCardboard ในเมธอด HelloCardboardViewController ชั้นเรียนหยุดชั่วคราวและนำเครื่องติดตามการเคลื่อนไหวศีรษะต่อ ตามลำดับ 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;
}

การบิดเบี้ยวของเลนส์

ทุกครั้งที่ Cardboard สแกนคิวอาร์โค้ดใหม่ โค้ดต่อไปนี้จะอ่านพารามิเตอร์ที่บันทึกไว้ และใช้เพื่อสร้างวัตถุบิดเบี้ยวของเลนส์ ซึ่งจะทำให้เกิดการบิดเบี้ยวของเลนส์ที่เหมาะสม กับเนื้อหาที่แสดงผล

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 ตามลำดับ แอปตัวอย่างใช้พื้นผิวเดียวสำหรับตาทั้ง 2 ข้าง แต่ก็สามารถสร้างแยก ของดวงตาแต่ละข้าง

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

สร้างโหมดแสดงภาพและตั้งค่า Mesh ของการบิดเบี้ยวที่ถูกต้อง

โหมดแสดงภาพต้องเริ่มต้นเพียงครั้งเดียว เมื่อสร้างโหมดแสดงภาพแล้ว ให้ตั้งค่า ตาข่ายที่บิดเบี้ยวของตาซ้ายและขวาตามค่า Mesh ที่แสดงผลจาก 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);