iOS के लिए Google Cardboard के लिए क्विकस्टार्ट

इस गाइड में बताया गया है कि iOS के लिए Cardboard SDK टूल का इस्तेमाल करके, वर्चुअल रिएलिटी (वीआर) अनुभव कैसे बनाए जा सकते हैं.

स्मार्टफ़ोन को वीआर प्लैटफ़ॉर्म में बदलने के लिए, कार्डबोर्ड SDK टूल का इस्तेमाल किया जा सकता है. स्मार्टफ़ोन स्टीरियोस्कोपिक रेंडरिंग के साथ 3D सीन दिखा सकता है और सिर के मूवमेंट को ट्रैक कर सकता है और उस पर प्रतिक्रिया दे सकता है. साथ ही, उपयोगकर्ता के व्यूअर बटन दबाने का पता लगाकर, ऐप्लिकेशन के साथ इंटरैक्ट कर सकता है.

शुरू करने के लिए, आपको Hellocardboard का इस्तेमाल करना होगा, जो एक ऐसा डेमो गेम है जो कार्डबोर्ड SDK की मुख्य सुविधाओं को दिखाता है. गेम में, उपयोगकर्ता चीज़ें खोजने और इकट्ठा करने के लिए वर्चुअल दुनिया को देखते हैं. इसमें आपको नीचे दिए गए काम करने का तरीका बताया गया है:

  • डेवलपमेंट एनवायरमेंट सेट अप करें
  • डेमो ऐप्लिकेशन को डाउनलोड करना और बनाना
  • कार्डबोर्ड व्यूअर के पैरामीटर सेव करने के लिए उसका क्यूआर कोड स्कैन करें
  • उपयोगकर्ता के सिर की गतिविधि को ट्रैक करना
  • हर आंख के लिए सही डिस्टॉर्शन सेट करके, स्टीरियोस्कोपिक इमेज बनाएं

डेवलपमेंट एनवायरमेंट सेट अप करें

हार्डवेयर से जुड़ी ज़रूरी शर्तें:

सॉफ़्टवेयर की ज़रूरतें:

  • Xcode 12.5 या इसके बाद का वर्शन
  • CocoaPods 1.9 या उसके बाद का वर्शन

डेमो ऐप्लिकेशन को डाउनलोड करना और बनाना

कार्डबोर्ड SDK टूल को पहले से कंपाइल किए गए प्रोटोकॉल बफ़र C++ सोर्स फ़ाइलों का इस्तेमाल करके बनाया गया है. सोर्स फ़ाइलों को नए सिरे से बनाने का तरीका यहां दिया गया है.

  1. यह निर्देश चलाकर GitHub से कार्डबोर्ड SDK और हैलो कार्डबोर्ड डेमो ऐप्लिकेशन को क्लोन करें:

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

  2. इस कमांड को रिपॉज़िटरी रूट पर चलाकर Xcode प्रोजेक्ट में प्रोटोकॉल बफ़र डिपेंडेंसी इंस्टॉल करें:

    pod install

  3. Xcode में कार्डबोर्ड फ़ाइल फ़ोल्डर (Cardboard.xcworkspace) खोलें.

  4. ऐप्लिकेशन का बंडल आईडी बदलें, ताकि आप अपनी टीम के साथ ऐप्लिकेशन पर हस्ताक्षर कर सकें.

  5. SDK टूल > फ़ेज़ बनाने के चरण > बाइनरी को लाइब्रेरी से लिंक करें पर जाएं

    1. libPods-sdk.a को चुनकर और '-' बटन पर क्लिक करके इसे सूची से हटाएं.
    2. libProtobuf-C++.a को सूची में जोड़ने के लिए, '+' बटन पर क्लिक करें और इसे चुनें. अगर आपको XCFramework के इस्तेमाल का सुझाव देने वाला कोई मैसेज दिखता है, तो "फिर भी जोड़ें" पर क्लिक करें.

  6. चलाएं पर क्लिक करें.

क्यूआर कोड को स्कैन करें

डिवाइस के पैरामीटर सेव करने के लिए, कार्डबोर्ड व्यूअर पर दिया गया क्यूआर कोड स्कैन करें:

डेमो आज़माएं

Hello Cardboard में, आपको 3D स्पेस में जियोडिसिक स्फ़ीर ढूंढकर इकट्ठा करने होंगे.

किसी स्फ़ीयर को खोजने और इकट्ठा करने के लिए:

  1. अपना सिर तब तक किसी भी दिशा में घुमाएं, जब तक आपको कोई फ़्लोटिंग स्फ़ीयर न दिखे.

  2. सीधे गोले की ओर देखें. इससे इसके रंग बदल जाते हैं.

  3. स्फ़ीयर को "इकट्ठा करने" के लिए कार्डबोर्ड व्यूअर बटन दबाएं.

डिवाइस कॉन्फ़िगर करें

जब लोग कार्डबोर्ड व्यूअर को स्विच करने के लिए गियर आइकॉन पर टैप करते हैं, तो HelloCardboardOverlayView में didTapSwitchButton तरीके को कॉल किया जाता है.

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

इससे CardboardQrCode_scanQrCodeAndSaveDeviceParams को कॉल किया जाता है, जो व्यूअर का क्यूआर कोड स्कैन करने के लिए विंडो खोलता है. जब उपयोगकर्ता क्यूआर कोड को स्कैन करता है, तो डिवाइस के डिस्टॉर्शन पैरामीटर अपडेट हो जाते हैं.

- (void)switchViewer {
  CardboardQrCode_scanQrCodeAndSaveDeviceParams();
}

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

सिर के हिलने को ट्रैक करें

हेड ट्रैकर बनाएं

हेड ट्रैकर, HelloCardboardViewController के viewDidLoad तरीके में एक बार बनाया जाता है:

_cardboardHeadTracker = CardboardHeadTracker_create();

हेड ट्रैकर को रोकें और फिर से शुरू करें

HelloCardboardViewController क्लास में pauseCardboard और resumeCardboard तरीके, हेड ट्रैकर को रोककर फिर से चालू करते हैं. resumeCardboard, _updateParams फ़्लैग भी सेट करता है, जिससे अगले ड्रॉ कॉल में डिवाइस पैरामीटर अपडेट हो जाते हैं.

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

लेंस डिस्टॉर्शन

जब भी Cardboard एक नए क्यूआर कोड को स्कैन करता है, यह कोड सेव किए गए पैरामीटर को पढ़ता है. साथ ही, उसका इस्तेमाल करके लेंस डिस्टॉर्शन ऑब्जेक्ट बनाता है, जिससे रेंडर किए गए कॉन्टेंट के लिए सही लेंस डिस्टॉर्शन लागू होता है:

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

रेंडर करना

कार्डबोर्ड में कॉन्टेंट रेंडर करने के लिए ये चीज़ें ज़रूरी हैं:

  • बनावट बनाना
  • बाईं और दाईं आंखों के लिए व्यू और प्रोजेक्शन आव्यूह पाना
  • रेंडरर बनाना और डिस्टॉर्शन मेश सेट करना
  • हर फ़्रेम रेंडर हो रहा है

टेक्सचर बनाएं

कॉन्टेंट को एक टेक्स्चर पर बनाया जाता है, जो बाईं और दाईं आंख के लिए सेक्शन में बंट जाता है. ये सेक्शन _leftEyeTexture और _rightEyeTexture में शुरू किए जाते हैं. सैंपल ऐप्लिकेशन, दोनों आंखों के लिए एक ही टेक्सचर का इस्तेमाल करता है, लेकिन दोनों आंखों के लिए अलग-अलग टेक्स्चर भी बनाया जा सकता है.

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

ये बनावट CardboardDistortionRenderer_renderEyeToDisplay में पैरामीटर के रूप में पास की जाती हैं.

बाईं और दाईं आंख के लिए व्यू और प्रोजेक्शन आव्यूह पाएं

सबसे पहले, बाईं और दाईं आंखों के लिए आंख के आव्यूह निकालें:

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

इसके बाद, हर आंख के लिए डिस्टॉर्शन मेश पाएं और उसे डिस्टॉर्शन रेंडरर को दें:

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

रेंडरर बनाएं और सही डिस्टॉर्शन मेश सेट करें

रेंडरर को सिर्फ़ एक बार शुरू करना ज़रूरी है. रेंडरर बनाने के बाद, CardboardLensDistortion_getDistortionMesh फ़ंक्शन से मिले मेश वैल्यू के मुताबिक, बाईं और दाईं आंखों के लिए नया डिस्टॉर्शन मेश सेट करें.

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

कॉन्टेंट रेंडर करना

CardboardHeadTracker_getPose से मौजूदा हेड ओरिएंटेशन वापस पाएं:

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

व्यू प्रोजेक्शन मैट्रिक्स लिखने के लिए, व्यू और प्रोजेक्शन मैट्रिक्स के साथ मौजूदा हेड ओरिएंटेशन का इस्तेमाल करें और हर एक के लिए दुनिया की सामग्री रेंडर करने के लिए उनका इस्तेमाल करें:

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

कॉन्टेंट में डिस्टॉर्शन लागू करने और कॉन्टेंट को स्क्रीन पर रेंडर करने के लिए, CardboardDistortionRenderer_renderEyeToDisplay का इस्तेमाल करें.

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