iOS için Google Cardboard hızlı başlangıç kılavuzu

Bu kılavuzda, kendi Sanal Makinenizi oluşturmak üzere iOS için Cardboard SDK'sını nasıl kullanabileceğiniz gösterilmektedir Gerçeklik (VR) deneyimleri

Akıllı telefonları sanal gerçeklik platformuna dönüştürmek için Cardboard SDK'sını kullanabilirsiniz. Akıllı telefon Stereskopik oluşturma ile 3D sahneleri görüntüleyebilir, kafa hareketlerini izleyebilir, hareketlere tepki verebilir ve Kullanıcının görüntüleyici düğmesine ne zaman bastığını algılayarak uygulamalarla etkileşimde bulunma

Başlamak için temel özellikleri gösteren bir demo oyun olan HelloCardboard'u kullanacaksınız. kullanıma sunuyoruz. Kullanıcılar oyunda sanal bir dünyanın çevresini arayıp bularak nesneler'i tıklayın. Bu kılavuzda şunları nasıl yapacağınız gösterilmektedir:

  • Geliştirme ortamınızı ayarlama
  • Demo uygulamayı indirme ve oluşturma
  • Parametrelerini kaydetmek için bir Cardboard gözlüğünün QR kodunu tarayın
  • Kullanıcının kafa hareketlerini izleme
  • Her göz için doğru distorsiyonu ayarlayarak stereoskopik görüntüler oluşturun

Geliştirme ortamınızı ayarlama

Donanım gereksinimleri:

Yazılım gereksinimleri:

Demo uygulamayı indirme ve oluşturma

Cardboard SDK'sı, önceden derlenmiş Protokol Arabellekleri kullanılarak oluşturulmuştur. C++ kaynak dosyaları. Kaynak dosyaları sıfırdan derlemeyle ilgili adımları burada bulabilirsiniz burada bulabilirsiniz.

  1. GitHub'dan Cardboard SDK'sını ve Hello Cardboard demo uygulamasını şu komutu çalıştırarak:

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

  2. Depo kökünde aşağıdaki komutu çalıştırarak Xcode projesine Protokol Arabellekleri bağımlılığını yükleyin:

    pod install

  3. Cardboard çalışma alanını (Cardboard.xcworkspace) Xcode'da açın.

  4. Uygulamayı ekibinizle imzalayabilmek için uygulamanın paket kimliğini değiştirin.

  5. SDK'ya gidin > Derleme Aşamaları > İkili Program ile Kitaplıkları Bağlama

    1. libPods-sdk.a adlı kişiyi seçip '-' işaretini tıklayarak listeden kaldırın. düğmesini tıklayın.
    2. "+" işaretini tıklayarak libProtobuf-C++.a adlı yeri listeye ekleyin düğmesini seçip seçin. XCFramework kullanılmasını öneren bir mesaj açılırsa "Yine de Ekle"yi tıklayın.

  6. Çalıştır'ı tıklayın.

QR kodunu tarayın

Cihaz parametrelerini kaydetmek için Cardboard gözlüğündeki QR kodunu tarayın:

Demoyu deneyin

HelloCardboard'da 3D uzayda jeodezik küreler arayıp toplayacaksınız.

Bir küre bulmak ve toplamak için:

  1. Kayan bir küre görene kadar başınızı herhangi bir yöne hareket ettirin.

  2. Doğrudan küreye bakın. Bu, renk değişikliğine neden olur.

  3. "Toplama" için Cardboard gözlüğü düğmesine basın yer alır.

Cihazı yapılandırma

Kullanıcı Cardboard gözlüğünü değiştirmek için dişli simgesine dokunduğunda didTapSwitchButton yöntemi HelloCardboardOverlayView içinde çağrılır.

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

Bu işlem, CardboardQrCode_scanQrCodeAndSaveDeviceParams çağırarak şunu açar: izleyicinin QR kodunu tarama penceresi. Kullanıcı QR kodunu taradığında cihazın distorsiyon parametreleri güncellenir.

- (void)switchViewer {
  CardboardQrCode_scanQrCodeAndSaveDeviceParams();
}

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

Baş takibi

Baş takip cihazı oluştur

Ana takip cihazı, HelloCardboardViewController yönteminin viewDidLoad yönteminde bir kez oluşturulur:

_cardboardHeadTracker = CardboardHeadTracker_create();

Baş takip cihazını duraklat ve devam ettir

Şuradaki pauseCardboard ve resumeCardboard yöntemleri: HelloCardboardViewController sınıfını duraklatıp baş takip cihazını devam ettirebilir. tıklayın. resumeCardboard, _updateParams işaretini de ayarlar. Bu da bir sonraki çizim çağrısında güncellenecek cihaz parametrelerini belirtir.

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

Lens bozulması

Cardboard her yeni QR kodu taradığında aşağıdaki kod kayıtlı parametreleri okur bunları, uygun lens bozulmasını uygulayan lens distorsiyonu nesnesini oluşturmak için kullanır. ekleyin:

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

Oluşturma

Cardboard'da içerik oluşturma süreci şu şekildedir:

  • Doku oluşturma
  • Sol ve sağ gözler için görüntüleme ve projeksiyon matrislerini elde etme
  • Oluşturucuyu oluşturma ve distorsiyon ağını ayarlama
  • Her kare oluşturuluyor

Doku oluşturma

İçerik, sol ve sağ göz için bölümlere ayrılmış bir doku üzerine çizilir. Bu bölümler sırasıyla _leftEyeTexture ve _rightEyeTexture dillerinde başlatıldı. Örnek uygulama her iki göz için tek bir doku kullanır, ancak farklı bir doku oluşturmak da mümkündür dokusu vardır.

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

Bu dokular, CardboardDistortionRenderer_renderEyeToDisplay öğesine parametre olarak aktarılır.

Sol ve sağ göz için görüntüleme ve projeksiyon matrislerini öğrenin

İlk olarak, sol ve sağ gözlere ilişkin göz matrislerini alın:

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

Daha sonra, her bir göz için distorsiyon örgülerini alın ve distorsiyon oluşturucuya iletin:

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

Oluşturucuyu oluşturma ve doğru distorsiyon ağını ayarlama

Oluşturucunun yalnızca bir kez başlatılması gerekir. Oluşturucu oluşturulduktan sonra, yeni CardboardLensDistortion_getDistortionMesh işlevi.

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

İçeriği oluşturma

CardboardHeadTracker_getPose cihazından geçerli baş yönünü alın:

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

Görünüm oluşturmak için görünüm ve projeksiyon matrisleriyle mevcut baş yönünü kullanın ve bunları kullanarak her bir göz için dünya içeriğini oluşturur:

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

Bozulmayı uygulamak için CardboardDistortionRenderer_renderEyeToDisplay öğesini kullanın düzeltme ve içeriği ekrana görüntüleme.

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