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

Bu kılavuzda, kendi Sanal Gerçeklik (VR) deneyimlerinizi oluşturmak amacıyla iOS için Cardboard SDK'sının nasıl kullanılacağı gösterilmektedir.

Not: Uygulamanızı daha geniş bir kitleye dağıtmadan önce Cardboard marka bilinci oluşturma yönergelerini incelediğinizden emin olun.

Bir akıllı telefonu sanal gerçeklik platformuna dönüştürmek için Cardboard SDK'sını kullanabilirsiniz. Akıllı telefonlar, stereoskopik görüntü oluşturma, kafa hareketlerini takip etme ve bunlara tepki verme gibi 3D sahnelere sahip olmanın yanı sıra kullanıcının görüntüleyici düğmesine bastığını algılayarak uygulamalarla etkileşim kurabiliyor.

Başlamak için, Cardboard SDK'sının temel özelliklerini gösteren bir demo oyun olan HelloCardboard'u kullanacaksınız. Oyunda kullanıcılar, nesneleri bulup toplamak için sanal bir dünyayı dolaşıyor. Bu kılavuzda aşağıdakileri nasıl yapacağınız gösterilmektedir:

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

Geliştirme ortamınızı ayarlama

Donanım gereksinimleri:

• iOS 12.0 veya sonraki sürümleri çalıştıran iPhone
• Cardboard gözlüğü

Yazılım gereksinimleri:

• Xcode 12.5 veya sonraki sürümler
• CocoaPods 1.9 veya sonraki sürümler

Demo uygulamayı indirme ve oluşturma

Cardboard SDK, önceden derlenmiş Protokol Arabellekleri C++ kaynak dosyaları kullanılarak geliştirilmiştir. Kaynak dosyaları sıfırdan oluşturma adımlarını burada bulabilirsiniz.

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

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

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

   pod install

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

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

5. SDK > Derleme Aşamaları > İkili Programı Kitaplıklara Bağla bölümüne gidin

   1. libPods-sdk.a öğesini seçip "-" düğmesini tıklayarak listeden kaldırın.
   2. libProtobuf-C++.a öğesini, "+" düğmesini tıklayıp seçerek listeye ekleyin. XCFramework kullanmayı öneren bir mesaj görüntülenirse "Yine de Ekle"yi tıklayın.

6. Run'ı (Çalıştır) tıklayın.

QR kodunu tarayın

Cihaz parametrelerini kaydetmek için Cardboard görüntüleyicide QR kodunu tarayın:

Demoyu deneyin

HelloCardboard'da, 3D uzayda jeodezik küreler arayıp toplayabilirsiniz.

Bir küreyi bulmak ve toplamak için:

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

2. Doğrudan küreye bakın. Bu da URL'nin renklerinin değişmesine neden olur.

3. Küreyi "toplama" için Cardboard gözlüğü düğmesine basın.

Cihazı yapılandırma

Kullanıcı, Cardboard gözlüklerini değiştirmek için dişli simgesine dokunduğunda didTapSwitchButton yöntemi HelloCardboardOverlayView ürününde ç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 işlevini çağırır. Bu işlem, izleyicinin QR kodunu taramak için pencereyi açar. Kullanıcı QR kodunu taradığında, cihazın distorsiyon parametreleri güncellenir.

- (void)switchViewer {
  CardboardQrCode_scanQrCodeAndSaveDeviceParams();
}

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

Kafa hareketi izleme

Takip izleme aracı oluşturun

Ana izleyici, HelloCardboardViewController kapsamındaki viewDidLoad yönteminde bir kez oluşturulur:

_cardboardHeadTracker = CardboardHeadTracker_create();

Takip cihazını duraklatma ve devam ettirme

HelloCardboardViewController sınıfındaki pauseCardboard ve resumeCardboard yöntemleri sırasıyla ana izleyiciyi duraklatır ve devam ettirir. resumeCardboard, _updateParams işaretini de ayarlar. Bu, cihaz parametrelerinin bir sonraki çizim çağrısında güncellenmesine neden olur.

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

Not: Cardboard, farklı bir görüntüleyiciden QR kodu her taradığında, pauseCardboard ve resumeCardboard yöntemleri çağrılır ve bu da cihaz parametrelerinin güncellenmesine neden olur.

Mercek bozulması

Cardboard yeni bir QR kodunu her taradığında, aşağıdaki kod kayıtlı parametreleri okur ve bunları kullanarak lens bozulması nesnesini oluşturur. Böylece, oluşturulan içeriğe uygun lens bozulması uygulanır:

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 aşağıdakileri içerir:

• Doku oluşturma
• Sol ve sağ gözler için görünüm ve projeksiyon matrisleri alma
• Oluşturucu 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 içinde başlatılır. Örnek uygulama her iki göz için tek bir doku kullanır ancak her göz için ayrı bir doku oluşturmak da mümkündü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ünüm ve projeksiyon matrislerini alma

İlk olarak, sol ve sağ gözler için 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 bunu distorsiyon oluşturucuya iletin:

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

Oluşturucuyu oluşturun ve doğru distorsiyon ağını ayarlayın

Oluşturucunun yalnızca bir kez başlatılması gerekir. Oluşturucu oluşturulduktan sonra, sol ve sağ gözler için yeni distorsiyon ağını CardboardLensDistortion_getDistortionMesh işlevinden döndürülen örgü değerlerine göre ayarlayın.

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

İçeriği oluşturma

CardboardHeadTracker_getPose kaynağından mevcut kafa yönünü al:

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

Bir görünüm projeksiyon matrisi oluşturmak için görünüm ve projeksiyon matrisleriyle mevcut baş yönünü kullanın ve bunları gözlerin her biri için dünya içeriği oluşturmak amacıyla kullanın:

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

Bozulma düzeltmesini içeriğe uygulamak ve içeriği ekrana oluşturmak için CardboardDistortionRenderer_renderEyeToDisplay kullanın.

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