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

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

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

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

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

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

हार्डवेयर की ज़रूरतें:

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

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

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

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

  1. GitHub से, Cardboard SDK टूल और Hello Cardboard डेमो ऐप्लिकेशन का क्लोन बनाएं इस निर्देश को चलाकर देखें:

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

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

    pod install

  3. Xcode में कार्डबोर्ड वर्कस्पेस (Cardboard.xcworkspace) खोलें.

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

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

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

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

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

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

डेमो आज़माएं

हैलोकार्डबोर्ड में आपको 3D स्पेस में जियोडेसिक स्फ़ीयर खोजना और इकट्ठा करना होगा.

कोई स्फ़ीयर ढूंढने और उसे इकट्ठा करने के लिए:

  1. अपने सिर को तब तक किसी भी दिशा में हिलाएं, जब तक कि आपको तैरता हुआ गोला दिखाई न दे.

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

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

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

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

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

हेड ट्रैकर को रोकें और फिर से चालू करें

इसमें pauseCardboard और resumeCardboard तरीके HelloCardboardViewController क्लास को रोकें और हेड ट्रैकर को फिर से चालू करें, क्रम से. 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;
}

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

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

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