شروع سریع برای Google Cardboard برای iOS

این راهنما به شما نشان می دهد که چگونه از Cardboard SDK برای iOS برای ایجاد تجربیات واقعیت مجازی (VR) خود استفاده کنید.

می توانید از Cardboard SDK برای تبدیل گوشی هوشمند به پلتفرم VR استفاده کنید. یک گوشی هوشمند می‌تواند صحنه‌های سه بعدی را با رندر استریوسکوپیک نمایش دهد، حرکات سر را ردیابی کند و به آن واکنش نشان دهد، و با تشخیص زمانی که کاربر دکمه بیننده را فشار می‌دهد، با برنامه‌ها تعامل داشته باشد.

برای شروع، از HelloCardboard، یک بازی آزمایشی که ویژگی های اصلی Cardboard SDK را نشان می دهد، استفاده خواهید کرد. در این بازی، کاربران برای یافتن و جمع آوری اشیاء به دنیای مجازی نگاه می کنند. به شما نشان می دهد که چگونه:

  • محیط توسعه خود را تنظیم کنید
  • برنامه دمو را دانلود و بسازید
  • کد QR یک نمایشگر Cardboard را اسکن کنید تا پارامترهای آن ذخیره شود
  • ردیابی حرکات سر کاربر
  • با تنظیم اعوجاج صحیح برای هر چشم، تصاویر استریوسکوپی را ارائه دهید

محیط توسعه خود را تنظیم کنید

الزامات سخت افزاری:

نرم افزار مورد نیاز:

برنامه دمو را دانلود و بسازید

Cardboard SDK با استفاده از فایل های منبع از پیش کامپایل شده Protocol Buffers C++ ساخته شده است. مراحل ساخت فایل های منبع از ابتدا را می توانید در اینجا بیابید.

  1. با اجرای این دستور، Cardboard SDK و برنامه آزمایشی Hello Cardboard را از GitHub کلون کنید:

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

  2. با اجرای این دستور در ریشه مخزن، وابستگی Protocol Buffers را در پروژه Xcode نصب کنید:

    pod install

  3. فضای کاری Cardboard ( Cardboard.xcworkspace ) را در Xcode باز کنید.

  4. شناسه بسته نرم افزاری را تغییر دهید تا بتوانید برنامه را با تیم خود امضا کنید.

  5. به SDK > Build Phases > Link Binary With Libraries بروید

    1. libPods-sdk.a با انتخاب آن و کلیک بر روی دکمه '-' از لیست حذف کنید.
    2. libProtobuf-C++.a با کلیک بر روی دکمه '+' و انتخاب آن به لیست اضافه کنید. در صورتی که پیامی مبنی بر استفاده از XCFramework ظاهر شد، بر روی "Add Anyway" کلیک کنید.

  6. روی Run کلیک کنید.

کد QR را اسکن کنید

برای ذخیره پارامترهای دستگاه، کد QR را در نمایشگر Cardboard اسکن کنید:

نسخه ی نمایشی را امتحان کنید

در HelloCardboard، کره های ژئودزیکی را در فضای سه بعدی جستجو و جمع آوری خواهید کرد.

برای پیدا کردن و جمع آوری یک کره:

  1. سر خود را به هر جهتی حرکت دهید تا زمانی که یک کره شناور ببینید.

  2. به طور مستقیم به کره نگاه کنید. این باعث تغییر رنگ آن می شود.

  3. دکمه نمایشگر Cardboard را برای "جمع آوری" کره فشار دهید.

دستگاه را پیکربندی کنید

هنگامی که کاربر برای تغییر بینندگان Cardboard روی نماد چرخ‌دنده ضربه می‌زند، روش didTapSwitchButton در HelloCardboardOverlayView فراخوانی می‌شود.

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

ردیابی سر

ایجاد ردیاب سر

ردیاب سر یک بار در روش viewDidLoad HelloCardboardViewController ایجاد می شود:

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

اعوجاج لنز

هر بار که Cardboard یک کد 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));

رندرینگ

ارائه محتوا در Cardboard شامل موارد زیر است:

  • ایجاد بافت
  • دریافت ماتریس های دید و طرح ریزی برای چشم چپ و راست
  • ایجاد رندر و تنظیم مش اعوجاج
  • رندر کردن هر فریم

بافت ایجاد کنید

محتوا روی یک بافت کشیده می شود که به بخش هایی برای چشم چپ و راست تقسیم می شود. این بخش ها به ترتیب در _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);