Panduan Memulai untuk Google Cardboard untuk iOS

Panduan ini menunjukkan cara menggunakan Cardboard SDK untuk iOS guna menciptakan pengalaman Virtual Reality (VR) Anda sendiri.

Anda dapat menggunakan Cardboard SDK untuk mengubah smartphone menjadi platform VR. Smartphone dapat menampilkan adegan 3D dengan rendering stereoskopis, melacak dan bereaksi terhadap gerakan kepala, serta berinteraksi dengan aplikasi dengan mendeteksi saat pengguna menekan tombol penampil.

Untuk memulai, Anda akan menggunakan Hello Cardboard, game demo yang menunjukkan fitur inti Cardboard SDK. Dalam game, pengguna melihat-lihat dunia virtual untuk menemukan dan mengumpulkan objek. Halaman ini menunjukkan cara:

  • Menyiapkan lingkungan pengembangan
  • Mendownload dan mem-build aplikasi demo
  • Pindai kode QR penampil Cardboard untuk menyimpan parameternya
  • Melacak gerakan kepala pengguna
  • Merender gambar stereoskopis dengan menetapkan distorsi yang benar untuk setiap mata

Menyiapkan lingkungan pengembangan

Persyaratan hardware:

Persyaratan software:

Mendownload dan mem-build aplikasi demo

Cardboard SDK dibuat menggunakan file sumber C++ Protocol Buffers yang telah dikompilasi sebelumnya. Langkah-langkah untuk membuat file sumber dari awal dapat ditemukan di sini.

  1. Clone Cardboard SDK dan aplikasi demo Hello Cardboard dari GitHub dengan menjalankan perintah ini:

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

  2. Instal dependensi Protocol Buffers ke dalam project Xcode dengan menjalankan perintah ini di root repositori:

    pod install

  3. Buka ruang kerja Cardboard (Cardboard.xcworkspace) di Xcode.

  4. Ubah ID paket aplikasi agar Anda dapat menandatangani aplikasi dengan tim.

  5. Buka SDK > Fase Build > Tautkan Biner Dengan Library

    1. Hapus libPods-sdk.a dari daftar dengan memilihnya dan mengklik tombol '-'.
    2. Tambahkan libProtobuf-C++.a ke daftar dengan mengklik tombol '+' dan memilihnya. Jika muncul pesan yang menyarankan penggunaan XCFramework, klik "Tambahkan Saja".

  6. Klik Run.

Pindai kode QR

Untuk menyimpan parameter perangkat, pindai kode QR di penampil Cardboard:

Coba demo

Di Hello Cardboard, Anda akan mencari dan mengumpulkan bola geodesi dalam ruang 3D.

Untuk menemukan dan mengumpulkan bola dunia:

  1. Gerakkan kepala ke segala arah sampai Anda melihat bola dunia mengambang.

  2. Lihat langsung bola dunia. Hal ini menyebabkan warna berubah.

  3. Tekan tombol penampil Cardboard untuk "mengumpulkan" bola.

Mengonfigurasi perangkat

Saat pengguna mengetuk ikon roda gigi untuk mengalihkan penampil Cardboard, metode didTapSwitchButton akan dipanggil di HelloCardboardOverlayView.

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

Tindakan ini akan memanggil CardboardQrCode_scanQrCodeAndSaveDeviceParams, yang membuka jendela untuk memindai kode QR penampil. Saat pengguna memindai kode QR, parameter distorsi perangkat akan diperbarui.

- (void)switchViewer {
  CardboardQrCode_scanQrCodeAndSaveDeviceParams();
}

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

Pelacakan gerak kepala

Buat pelacak kepala

Pelacak kepala dibuat sekali dalam metode viewDidLoad HelloCardboardViewController:

_cardboardHeadTracker = CardboardHeadTracker_create();

Menjeda dan melanjutkan pelacak kepala

Metode pauseCardboard dan resumeCardboard di class HelloCardboardViewController akan menjeda dan melanjutkan pelacak kepala. resumeCardboard juga menyetel flag _updateParams, yang menyebabkan parameter perangkat diperbarui dalam panggilan gambar berikutnya.

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

Distorsi lensa

Setiap kali Cardboard memindai kode QR baru, kode berikut akan membaca parameter yang disimpan dan menggunakannya untuk membuat objek distorsi lensa, yang akan menerapkan distorsi lensa yang tepat ke konten yang dirender:

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

Rendering

Rendering konten di Cardboard meliputi hal-hal berikut:

  • Membuat tekstur
  • Mendapatkan matriks proyeksi dan tampilan untuk mata kiri dan kanan
  • Membuat perender dan menyetel mesh distorsi
  • Merender setiap frame

Membuat tekstur

Konten digambar pada tekstur, yang dibagi menjadi beberapa bagian untuk mata kiri dan kanan. Bagian ini masing-masing diinisialisasi di _leftEyeTexture dan _rightEyeTexture. Aplikasi contoh menggunakan satu tekstur untuk kedua mata, tetapi juga dapat membuat tekstur terpisah untuk setiap mata.

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

Tekstur ini diteruskan sebagai parameter ke CardboardDistortionRenderer_renderEyeToDisplay.

Dapatkan matriks tampilan dan proyeksi untuk mata kiri dan kanan

Pertama-tama, ambil matriks mata untuk mata kiri dan kanan:

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

Selanjutnya, dapatkan mesh distorsi untuk setiap mata dan teruskan ke perender distorsi:

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

Membuat perender dan menyetel mesh distorsi yang benar

Perender perlu diinisialisasi hanya sekali. Setelah perender dibuat, setel mesh distorsi baru untuk mata kiri dan kanan sesuai dengan nilai mesh yang ditampilkan dari fungsi CardboardLensDistortion_getDistortionMesh.

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

Merender konten

Ambil orientasi kepala saat ini dari CardboardHeadTracker_getPose:

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

Gunakan orientasi kepala saat ini dengan matriks tampilan dan proyeksi untuk membuat matriks proyeksi tampilan, lalu gunakan untuk merender konten dunia untuk masing-masing mata:

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

Gunakan CardboardDistortionRenderer_renderEyeToDisplay untuk menerapkan koreksi distorsi pada konten, dan merender konten ke layar.

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