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

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

ध्यान दें: कार्डबोर्ड ब्रैंडिंग के दिशा-निर्देश को ज़रूर पढ़ें ज़्यादा ऑडियंस में अपना ऐप्लिकेशन उपलब्ध कराने से पहले.

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

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

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

Hellocardboard, Android के एनडीके का इस्तेमाल करता है. हर नेटिव तरीका ये है:

• खास तौर पर, HelloCardboardApp क्लास वाले तरीके से बाउंड है या
• इस क्लास का इंस्टेंस बनाता या मिटाता है

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

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

• Android 8.0 "Oreo" वाला Android डिवाइस (एपीआई लेवल 26) या उसके बाद का वर्शन
• कार्डबोर्ड व्यूअर

ध्यान दें: रेंडरिंग एपीआई के साथ काम करने की सेटिंग में बदलाव करने से, कम से कम एपीआई लेवल वाले फ़ोन का इस्तेमाल किया जा सकता है. ज़्यादा जानकारी के लिए, SDK टूल का build.gradle देखें.

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

• Android Studio का वर्शन 2022.1.1 "इलेक्ट्रिक Eel" या उससे ज़्यादा
• Android SDK 13.0 "तिरामिसु" (एपीआई लेवल 33) या उसके बाद का वर्शन

• Android एनडीके फ़्रेमवर्क का सबसे नया वर्शन

  इंस्टॉल किए गए SDK टूल की समीक्षा करने या उन्हें अपडेट करने के लिए, प्राथमिकताएं > दिखने का तरीका और व्यवहार

  सिस्टम सेटिंग > Android Studio में Android SDK टूल का इस्तेमाल करें.

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

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

1. कार्डबोर्ड SDK और Hellocardboard डेमो का क्लोन बनाने के लिए, नीचे दिया गया कमांड चलाएं GitHub से मिला ऐप्लिकेशन:

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

2. Android Studio में, मौजूदा Android Studio प्रोजेक्ट खोलें को चुनें. इसके बाद, वह डायरेक्ट्री जिसमें कार्डबोर्ड SDK और Hellocardboard के डेमो ऐप्लिकेशन को क्लोन किया गया था.

   आपका कोड, Android Studio की प्रोजेक्ट विंडो में दिखेगा.

3. कार्डबोर्ड SDK को असेंबल करने के लिए, उसके अंदर असेंबल करें विकल्प पर दो बार क्लिक करें cardboard/:sdk/Tasks/build फ़ोल्डर, Gradle टैब (देखें > टूल Windows > Gradle) में देखें.

4. अपने फ़ोन पर Hellocardboard डेमो ऐप्लिकेशन चलाने के लिए, Run > चलाएं... और टारगेट hellocardboard-android चुनें.

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

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

अगर उपयोगकर्ता "SKIP" दबाता है और पहले से कोई पैरामीटर सेव नहीं है, कार्डबोर्ड सेव किया गया है Google Cardboard v1 (Google I/O 2014 पर लॉन्च किया गया) पैरामीटर.

डेमो आज़माएं

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

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

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

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

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

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

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

// Called by JNI method
void HelloCardboardApp::SwitchViewer() {
  CardboardQrCode_scanQrCodeAndSaveDeviceParams();
}

Android Studio x86 एम्युलेटर चालू करें

Android Studio x86 एम्युलेटर का इस्तेमाल करने के लिए, नीचे दी गई लाइन को SDK टूल में मौजूद build.gradle फ़ाइलें और सैंपल:

abiFilters 'armeabi-v7a', 'arm64-v8a'

इससे सभी एबीआई चालू हो जाते हैं. साथ ही, इससे जनरेट होने वाले रेवेन्यू का साइज़ काफ़ी बढ़ जाता है .aar फ़ाइल. Android एबीआई देखें हमारा वीडियो देखें.

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

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

HelloCardboardApp के कंस्ट्रक्टर में, हेड ट्रैकर एक बार बनाया जाता है:

HelloCardboardApp::HelloCardboardApp(JavaVM* vm, jobject obj, jobject asset_mgr_obj) {
  Cardboard_initializeAndroid(vm, obj); // Must be called in constructor
  head_tracker_ = CardboardHeadTracker_create();
}

VrActivity बनाने पर, HelloCardboardApp क्लास का एक इंस्टेंस जनरेट होता है nativeOnCreate तरीके को कॉल करके:

public void onCreate(Bundle savedInstance) {
  super.onCreate(savedInstance);
  nativeApp = nativeOnCreate(getAssets());
  //...
}

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

हेड ट्रैकर को रोकने, फिर से शुरू करने, और नष्ट करने के लिए, CardboardHeadTracker_pause(head_tracker_), CardboardHeadTracker_resume(head_tracker_), और CardboardHeadTracker_destroy(head_tracker_) को क्रम से कॉल किया जाना चाहिए. इस "HelloCardboard" ऐप्लिकेशन डाउनलोड करते हैं, तो हम उन्हें nativeOnPause, nativeOnResume में कॉल करते हैं और nativeOnDestroy:

// Code to pause head tracker in hello_cardboard_app.cc

void HelloCardboardApp::OnPause() { CardboardHeadTracker_pause(head_tracker_); }

// Call nativeOnPause in VrActivity
@Override
protected void onPause() {
  super.onPause();
  nativeOnPause(nativeApp);
  //...
}

// Code to resume head tracker in hello_cardboard_app.cc
void HelloCardboardApp::onResume() {
  CardboardHeadTracker_resume(head_tracker_);
  //...
}

// Call nativeOnResume in VrActivity
@Override
protected void onResume() {
  super.onResume();
  //...
  nativeOnResume(nativeApp);
}

// Code to destroy head tracker in hello_cardboard_app.cc
HelloCardboardApp::~HelloCardboardApp() {
  CardboardHeadTracker_destroy(head_tracker_);
  //...
}

// Call nativeOnDestroy in VrActivity
@Override
protected void onDestroy() {
  super.onDestroy();
  nativeOnDestroy(nativeApp);
  nativeApp = 0;
}

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

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

CardboardQrCode_getSavedDeviceParams(&buffer, &size);

CardboardLensDistortion_destroy(lens_distortion_);
lens_distortion_ = CardboardLensDistortion_create(
    buffer, size, screen_width_, screen_height_);

CardboardQrCode_destroy(buffer);

रेंडरिंग

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

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

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

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

ध्यान दें: सैंपल ऐप्लिकेशन, दोनों आंखों के लिए एक ही टेक्सचर का इस्तेमाल करता है, लेकिन हर आंख के लिए अलग टेक्स्चर होता है.

void HelloCardboardApp::GlSetup() {
  LOGD("GL SETUP");

  if (framebuffer_ != 0) {
    GlTeardown();
  }

  // Create render texture.
  glGenTextures(1, &texture_);
  glBindTexture(GL_TEXTURE_2D, texture_);
  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, screen_width_, screen_height_, 0,
               GL_RGB, GL_UNSIGNED_BYTE, 0);

  left_eye_texture_description_.texture = texture_;
  left_eye_texture_description_.left_u = 0;
  left_eye_texture_description_.right_u = 0.5;
  left_eye_texture_description_.top_v = 1;
  left_eye_texture_description_.bottom_v = 0;

  right_eye_texture_description_.texture = texture_;
  right_eye_texture_description_.left_u = 0.5;
  right_eye_texture_description_.right_u = 1;
  right_eye_texture_description_.top_v = 1;
  right_eye_texture_description_.bottom_v = 0;

  //...
  CHECKGLERROR("GlSetup");
}

इन टेक्सचर को CardboardDistortionRenderer_renderEyeToDisplay में पैरामीटर के तौर पर पास किया जाता है.

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

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

CardboardLensDistortion_getEyeFromHeadMatrix(
    lens_distortion_, kLeft, eye_matrices_[0]);
CardboardLensDistortion_getEyeFromHeadMatrix(
    lens_distortion_, kRight, eye_matrices_[1]);
CardboardLensDistortion_getProjectionMatrix(
    lens_distortion_, kLeft, kZNear, kZFar, projection_matrices_[0]);
CardboardLensDistortion_getProjectionMatrix(
    lens_distortion_, kRight, kZNear, kZFar, projection_matrices_[1]);

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

CardboardLensDistortion_getDistortionMesh(lens_distortion_, kLeft, &left_mesh);
CardboardLensDistortion_getDistortionMesh(lens_distortion_, kRight, &right_mesh);

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

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

distortion_renderer_ = CardboardOpenGlEs2DistortionRenderer_create();
CardboardDistortionRenderer_setMesh(distortion_renderer_, &left_mesh, kLeft);
CardboardDistortionRenderer_setMesh(distortion_renderer_, &right_mesh, kRight);

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

हर फ़्रेम के लिए, CardboardHeadTracker_getPose से मौजूदा हेड ओरिएंटेशन वापस पाएं:

CardboardHeadTracker_getPose(head_tracker_, monotonic_time_nano, &out_position[0], &out_orientation[0]);

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

// Draw eyes views
for (int eye = 0; eye < 2; ++eye) {
  glViewport(eye == kLeft ? 0 : screen_width_ / 2, 0, screen_width_ / 2,
             screen_height_);

  Matrix4x4 eye_matrix = GetMatrixFromGlArray(eye_matrices_[eye]);
  Matrix4x4 eye_view = eye_matrix * head_view_;

  Matrix4x4 projection_matrix =
      GetMatrixFromGlArray(projection_matrices_[eye]);
  Matrix4x4 modelview_target = eye_view * model_target_;
  modelview_projection_target_ = projection_matrix * modelview_target;
  modelview_projection_room_ = projection_matrix * eye_view;

  // Draw room and target. Replace this to render your own content.
  DrawWorld();
}

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

// Render
CardboardDistortionRenderer_renderEyeToDisplay(
    distortion_renderer_, /* target_display = */ 0, /* x = */ 0, /* y = */ 0,
    screen_width_, screen_height_, &left_eye_texture_description_,
    &right_eye_texture_description_);