Panduan ini menunjukkan cara menggunakan Cardboard SDK untuk iOS untuk membuat pengalaman Realitas Virtual (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 kapan pengguna menekan tombol penampil.
Untuk memulai, Anda akan menggunakan HelloCardboard, game demo yang menunjukkan fitur inti dari Cardboard SDK. Dalam game, pengguna melihat-lihat dunia virtual untuk menemukan dan mengumpulkan objek. Ini menunjukkan kepada Anda cara:
- Menyiapkan lingkungan pengembangan
- Mendownload dan membuat aplikasi demo
- Pindai kode QR penampil Cardboard untuk menyimpan parameternya
- Melacak gerakan kepala pengguna
- Merender gambar stereoskopis dengan mengatur distorsi yang benar untuk setiap mata
Menyiapkan lingkungan pengembangan
Persyaratan hardware:
- iPhone yang menjalankan iOS versi 12.0 atau yang lebih tinggi
- Penampil kardus
Persyaratan perangkat lunak:
- Xcode 12.5 atau yang lebih baru
- CocoaPods 1.9 atau yang lebih baru
Mendownload dan membuat aplikasi demo
Cardboard SDK dibuat menggunakan file sumber C++ Buffering Protokol yang telah dikompilasi sebelumnya. Langkah-langkah untuk mem-build file sumber dari awal dapat ditemukan di sini.
Clone SDK Cardboard dan aplikasi demo Hello Cardboard dari GitHub dengan menjalankan perintah ini:
git clone https://github.com/googlevr/cardboard.git
Instal dependensi Protocol Buffers ke dalam project Xcode dengan menjalankan perintah ini di root repositori:
pod install
Buka ruang kerja Cardboard (
Cardboard.xcworkspace) di Xcode.Ubah ID paket aplikasi agar Anda dapat menandatangani aplikasi dengan tim.
Buka SDK > Build Phases > Link Binary With Libraries
- Hapus
libPods-sdk.adari daftar dengan memilihnya lalu mengklik tombol '-'. - Tambahkan
libProtobuf-C++.ake daftar dengan mengklik tombol '+' lalu memilihnya. Jika muncul pesan yang menyarankan penggunaan XCFramework, klik "Add Anyway".
- Hapus
Klik Run.
Pindai kode QR
Untuk menyimpan parameter perangkat, pindai kode QR pada penampil Cardboard:
Coba demo
Di HelloCardboard, Anda akan mencari dan mengumpulkan bola geodesi dalam ruang 3D.
Untuk menemukan dan mengumpulkan bola dunia:
Gerakkan kepala ke segala arah sampai Anda melihat bola mengambang.
Lihat langsung bola dunia. Hal ini menyebabkannya berubah warna.
Tekan tombol penampil Cardboard untuk "mengumpulkan" bola.
Mengonfigurasi perangkat
Ketika pengguna mengetuk ikon roda gigi untuk beralih 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 pengguna. 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 satu kali dalam metode viewDidLoad dari HelloCardboardViewController:
_cardboardHeadTracker = CardboardHeadTracker_create();
Menjeda dan melanjutkan pelacak kepala
Metode pauseCardboard dan resumeCardboard di
class HelloCardboardViewController masing-masing menjeda dan melanjutkan
pelacak head. resumeCardboard juga menetapkan tanda _updateParams, yang menyebabkan
parameter perangkat diperbarui 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 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 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 pada tekstur, yang dibagi menjadi beberapa bagian untuk mata kiri dan kanan.
Bagian ini masing-masing diinisialisasi di _leftEyeTexture dan _rightEyeTexture.
Aplikasi contoh menggunakan tekstur tunggal 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.
Mendapatkan 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]);
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 hanya perlu diinisialisasi 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 menyusun matriks proyeksi tampilan, dan gunakan 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 koreksi
distorsi pada konten, dan merender konten ke layar.
CardboardDistortionRenderer_renderEyeToDisplay(_distortionRenderer, renderTarget, /*x=*/0,
/*y=*/0, _width, _height, &_leftEyeTexture,
&_rightEyeTexture);