iOS এর জন্য Google কার্ডবোর্ডের জন্য দ্রুত শুরু

আপনার নিজস্ব ভার্চুয়াল রিয়েলিটি (ভিআর) অভিজ্ঞতা তৈরি করতে iOS-এর জন্য কার্ডবোর্ড SDK কীভাবে ব্যবহার করবেন তা এই নির্দেশিকা আপনাকে দেখায়।

দ্রষ্টব্য: আপনার অ্যাপটি আরও বৃহত্তর দর্শকদের কাছে বিতরণ করার আগে কার্ডবোর্ড ব্র্যান্ডিং নির্দেশিকাগুলি পর্যালোচনা করা নিশ্চিত করুন৷

আপনি একটি স্মার্টফোনকে একটি VR প্ল্যাটফর্মে পরিণত করতে কার্ডবোর্ড SDK ব্যবহার করতে পারেন৷ একটি স্মার্টফোন স্টেরিওস্কোপিক রেন্ডারিং সহ 3D দৃশ্য প্রদর্শন করতে পারে, ট্র্যাক করতে পারে এবং মাথার নড়াচড়ায় প্রতিক্রিয়া জানাতে পারে এবং ব্যবহারকারী কখন দর্শক বোতাম টিপে তা সনাক্ত করে অ্যাপগুলির সাথে যোগাযোগ করতে পারে।

শুরু করার জন্য, আপনি HelloCardboard ব্যবহার করবেন, একটি ডেমো গেম যা কার্ডবোর্ড SDK-এর মূল বৈশিষ্ট্যগুলি প্রদর্শন করে৷ গেমটিতে, ব্যবহারকারীরা বস্তুগুলি খুঁজে পেতে এবং সংগ্রহ করতে একটি ভার্চুয়াল বিশ্বের চারপাশে তাকান। এটি আপনাকে দেখায় কিভাবে:

• আপনার উন্নয়ন পরিবেশ সেট আপ করুন
• ডেমো অ্যাপ ডাউনলোড করুন এবং তৈরি করুন
• একটি কার্ডবোর্ড ভিউয়ারের কিউআর কোড স্ক্যান করে এর প্যারামিটার সংরক্ষণ করুন
• ব্যবহারকারীর মাথার গতিবিধি ট্র্যাক করুন
• প্রতিটি চোখের জন্য সঠিক বিকৃতি সেট করে স্টেরিওস্কোপিক ছবি রেন্ডার করুন

আপনার উন্নয়ন পরিবেশ সেট আপ করুন

হার্ডওয়্যার প্রয়োজনীয়তা:

• iPhone চলমান iOS 12.0 বা উচ্চতর
• পিচবোর্ড ভিউয়ার

সফ্টওয়্যার প্রয়োজনীয়তা:

• Xcode 12.5 বা উচ্চতর
• CocoaPods 1.9 বা উচ্চতর

ডেমো অ্যাপ ডাউনলোড করুন এবং তৈরি করুন

কার্ডবোর্ড SDK প্রাক-কম্পাইল করা প্রোটোকল বাফার C++ সোর্স ফাইল ব্যবহার করে তৈরি করা হয়েছে। স্ক্র্যাচ থেকে সোর্স ফাইল তৈরি করার পদক্ষেপ এখানে পাওয়া যাবে।

1. এই কমান্ডটি চালিয়ে গিটহাব থেকে কার্ডবোর্ড 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. রান এ ক্লিক করুন।

QR কোড স্ক্যান করুন

ডিভাইস প্যারামিটার সংরক্ষণ করতে, কার্ডবোর্ড ভিউয়ারে QR কোড স্ক্যান করুন:

ডেমো চেষ্টা করুন

HelloCardboard-এ, আপনি 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 বলা হয়, যা দর্শকের QR কোড স্ক্যান করার জন্য উইন্ডোটি খোলে। যখন ব্যবহারকারী QR কোড স্ক্যান করে, তখন ডিভাইসের বিকৃতির পরামিতি আপডেট করা হয়।

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

দ্রষ্টব্য: প্রতিবার যখন কার্ডবোর্ড একটি ভিন্ন ভিউয়ার থেকে একটি QR কোড স্ক্যান করে, তখন pauseCardboard এবং resumeCardboard পদ্ধতিগুলি কল করা হয়, যার ফলে ডিভাইসের প্যারামিটারগুলি আপডেট করা হয়৷

লেন্স বিকৃতি

প্রতিবার কার্ডবোর্ড একটি নতুন QR কোড স্ক্যান করে, নিম্নলিখিত কোডটি সংরক্ষিত প্যারামিটারগুলি পড়ে এবং লেন্স বিকৃতি বস্তু তৈরি করতে ব্যবহার করে, যা রেন্ডার করা সামগ্রীতে সঠিক লেন্স বিকৃতি প্রয়োগ করে:

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