Panduan Memulai untuk Google Cardboard untuk iOS

Panduan ini menunjukkan cara menggunakan Cardboard SDK untuk iOS untuk membuat kampanye Virtual Anda sendiri Pengalaman realitas (VR).

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

Untuk memulai, Anda akan menggunakan HelloCardboard, yakni game demo yang mendemonstrasikan fitur inti dari Cardboard SDK. Dalam game, pengguna berkeliling dunia virtual untuk menemukan dan mengumpulkan objek terstruktur dalam jumlah besar. Laporan ini menunjukkan cara:

  • Menyiapkan lingkungan pengembangan
  • Mendownload dan membangun aplikasi demo
  • Pindai kode QR penampil Cardboard untuk menyimpan parameternya
  • Lacak gerakan kepala pengguna
  • Merender gambar stereoskopis dengan mengatur distorsi yang benar untuk setiap mata

Menyiapkan lingkungan pengembangan

Persyaratan hardware:

Persyaratan software:

Mendownload dan membangun aplikasi demo

Cardboard SDK dibuat menggunakan Buffering Protokol yang telah dikompilasi sebelumnya File sumber C++. Langkah-langkah untuk membangun file sumber dari awal dapat ditemukan di sini.

  1. Buat 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 Anda.

  5. Buka SDK > Fase Build > Menautkan 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 untuk menggunakan XCFramework, klik "Add Anyway".

  6. Klik Run.

Pindai kode QR

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

Coba demo

Di HelloCardboard, Anda akan mencari dan mengumpulkan bola geodesi di ruang 3D.

Untuk menemukan dan mengumpulkan bola dunia:

  1. Gerakkan kepala Anda ke mana saja sampai Anda melihat bola mengambang.

  2. Lihat tepat ke bola dunia. Ini menyebabkannya berubah warna.

  3. Tekan tombol penampil Cardboard untuk "mengumpulkan" lingkup bisnis.

Mengonfigurasi perangkat

Ketika pengguna mengetuk ikon roda gigi untuk beralih penampil Cardboard, didTapSwitchButton dipanggil di HelloCardboardOverlayView.

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

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

- (void)switchViewer {
  CardboardQrCode_scanQrCodeAndSaveDeviceParams();
}

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

Pelacakan gerak kepala

Membuat pelacak kepala

Pelacak kepala dibuat satu kali dalam metode viewDidLoad HelloCardboardViewController:

_cardboardHeadTracker = CardboardHeadTracker_create();

Menjeda dan melanjutkan pelacak kepala

Metode pauseCardboard dan resumeCardboard di HelloCardboardViewController menjeda kelas dan melanjutkan pelacak kepala, secara berurutan. resumeCardboard juga menetapkan flag _updateParams, yang menyebabkan parameter perangkat yang akan diupdate pada 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 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

Merender konten di Cardboard melibatkan hal-hal berikut:

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

Membuat tekstur

Konten digambar ke tekstur, yang dibagi menjadi beberapa bagian untuk mata kiri dan kanan. Bagian ini masing-masing diinisialisasi dalam _leftEyeTexture dan _rightEyeTexture. Aplikasi contoh menggunakan satu tekstur untuk kedua mata, tetapi Anda juga dapat membuat tekstur terpisah tekstur 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, 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]);

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

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

Buat perender dan setel mesh distorsi yang benar

Perender hanya perlu diinisialisasi sekali. Setelah perender dibuat, setel 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)));

Menggunakan orientasi head saat ini dengan matriks tampilan dan proyeksi untuk membuat tampilan dan menggunakannya untuk merender konten dunia untuk setiap 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 distorsi pada konten, dan merender konten ke layar.

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