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

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

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

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

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

HelloCardboard, Android NDK का इस्तेमाल करता है. हर नेटिव तरीका:

  • HelloCardboardApp क्लास के किसी खास तरीके से जुड़ा हो या
  • इस क्लास का कोई इंस्टेंस बनाता है या मिटाता है

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

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

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

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

  • Android Studio का 2024.1.2 "Koala Feature Drop" या इसके बाद का वर्शन
  • Android SDK 15.0 "Vanilla Ice Cream" (एपीआई लेवल 35) या इसके बाद का वर्शन

  • Android NDK फ़्रेमवर्क का नया वर्शन

    इंस्टॉल किए गए एसडीके की समीक्षा करने या उन्हें अपडेट करने के लिए, Preferences > Appearance and Behavior पर जाएं

    Android Studio में सिस्टम सेटिंग > Android SDK पर जाएं.

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

Cardboard SDK को, हर शेडर के लिए पहले से कंपाइल की गई Vulkan हेडर फ़ाइल का इस्तेमाल करके बनाया गया है. हेडर फ़ाइलें शुरू से बनाने का तरीका यहां दिया गया है.

  1. GitHub से Cardboard SDK और HelloCardboard डेमो ऐप्लिकेशन को क्लोन करने के लिए, यह कमांड चलाएं:

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

  2. Android Studio में, Open an existing Android Studio Project को चुनें. इसके बाद, उस डायरेक्ट्री को चुनें जिसमें Cardboard SDK और HelloCardboard डेमो ऐप्लिकेशन को क्लोन किया गया था.

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

  3. Cardboard SDK को असेंबल करने के लिए, Gradle टैब (व्यू > टूल विंडो > Gradle) में cardboard/:sdk/Tasks/build फ़ोल्डर में मौजूद assemble विकल्प पर डबल-क्लिक करें.

  4. अपने फ़ोन पर HelloCardboard डेमो ऐप्लिकेशन चलाएं. इसके लिए, चलाएं > चलाएं... को चुनें. इसके बाद, hellocardboard-android टारगेट को चुनें.

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

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

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

डेमो आज़माएं

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

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

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

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

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

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

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

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

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

Android Studio x86 एम्युलेटर के लिए बनाने के लिए, SDK और Sample में मौजूद build.gradle फ़ाइलों से यह लाइन हटाएं:

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

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

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

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

हेड ट्रैकर को 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;
}

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

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

CardboardQrCode_getSavedDeviceParams(&buffer, &size);

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

CardboardQrCode_destroy(buffer);

रेंडरिंग

Cardboard में कॉन्टेंट रेंडर करने के लिए, यह तरीका अपनाएं:

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

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

पूरे कॉन्टेंट को एक टेक्सचर पर बनाया जाता है. इसे बाईं और दाईं आंखों के लिए अलग-अलग सेक्शन में बांटा जाता है. इन सेक्शन को क्रमशः _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_);