ReactNative を使用したモバイル アプリでの AR アプリの構築: ReactNative での AR 開発エコシステムを理解する

情報 2023-09-30 14:23:35 訪問数: null

著者: 禅とコンピュータープログラミングの芸術

1 はじめに

ここ数年、VR、AR、モバイルインターネットなどのテクノロジーの継続的な革新により、人々はますます新しいライフスタイルを経験しています。そして、それに不可欠な部分はデジタル現実世界です。現代人の生活は携帯電話、タブレット、テレビと切り離せないものであるため、デジタル現実世界のアプリケーションはかけがえのないものです。では、これらのテクノロジーをどのように使用して、より興味深く有意義な仮想現実体験を作成できるのでしょうか? たとえば、AR テクノロジーを使用して、拡張現実機能を備えたゲームを実装できます。この記事では、React Native を使用して AR 機能を備えたモバイル アプリケーションを構築する方法を説明します。

React Native は、iOS および Android システムをサポートするモバイル アプリケーションを開発するために Facebook によって開始されたクロスプラットフォームのオープンソース フレームワークです。React Native を使用すると、Objective-C、Swift、Java などの他の言語を学ぶ必要がなく、JavaScript 言語を使用してモバイル アプリケーションを開発できます。React Native は豊富なコンポーネント ライブラリを提供し、開発者が高性能、高品質のユーザー インターフェイスを迅速に開発できるようにします。現在、React Native はモバイル アプリケーションを構築するためのフレームワークとして推奨されています。

この記事の著者は、Huagong Robotics の創設者兼 CEO である Li Bin です。彼はかつてファーウェイに勤務し、スマートフォン、タブレット、テレビの製品研究開発を担当していました。Li Bin は河南大学コンピューター科学技術学部を卒業し、コンピューター グラフィックス、アニメーション、デジタル メディア、プログラミングなどの分野に強い関心を持っています。その研究の方向性は主に AR (拡張現実)、VR (仮想現実)、複合現実技術およびアプリケーションの実践に焦点を当てています。

2.AR開発プロセス

まず、拡張現実 (AR) とは何かを理解する必要があります。ARとは、仮想環境内のオブジェクト、画像、音などの要素を現実世界と統合し、ユーザーがリアルで現実的な3次元環境効果を得ることができるようにすることを指します。ユーザーが物理世界をより直観的に感じ、その中で興味深く意味のあるものを生み出すのに役立ちます。

次に、ARの開発プロセスを見てみましょう。ここでは、簡単な AR の例、つまり顔認識 AR プロジェクトを例として、このプロジェクトの開発プロセスを説明します。

  1. AR撮影機材の選択：プロジェクトのニーズに応じて、Apple製品ラインのiPhone XS Maxの使用、Microsoft製品ラインのSurface Proシリーズの使用など、適切なAR撮影機材を選択します。
  2. テクノロジーの選択: React Native、Unity など、AR 開発に適したオープンソース フレームワークを選択します。
  3. モデルの構築: 適切なツールでシーン モデルを構築し、シーン内で認識する必要がある顔を追加します。
  4. 認識アルゴリズムの選択: 深層学習に基づく顔認識技術など、顔を認識するためのアルゴリズムを決定します。
  5. プロセスの最適化: プロセス全体を最適化して、正確さと流暢性を確保します。
  6. UIの設計と開発: プロジェクトの要件に基づいて、UI設計ツールと組み合わせて、ユーザーの認知を満たすユーザーインターフェイスを設計します。
  7. アプリのリリース: AR アプリケーションを公開します。

以上が最も基本的なAR開発プロセスです。この例は比較的単純ですが、実際の開発プロセスはさらに複雑になります。

3. React Native の AR 開発エコシステム

React Native は、豊富なコンポーネント ライブラリを提供するクロスプラットフォームのオープン ソース フレームワークであり、開発者が高性能で高品質のユーザー インターフェイスを迅速に開発できることを前述しました。その中でも、React VR、React AR、React VR Explorer はすべて React Native エコシステムの重要な部分です。

React VR は、VR アプリケーションを開発するためのコンポーネント ライブラリです。VR ビュー、レンダリング、カメラ制御、コントローラー トラッキングなど、いくつかの基本的な VR 機能がカプセル化されています。したがって、簡単な設定を行うだけで VR 開発を開始できます。

React AR は、AR アプリケーションを開発するためのコンポーネント ライブラリです。AR ビュー、コード スキャン、ターゲット検出、測位など、いくつかの基本的な AR 機能を提供します。React VR が提供するいくつかのコンポーネントを使用し、ARKit や Vuforia SDK と連携して、より複雑な AR 機能を実装することもできます。

React VR Explorer は、React VR をベースにした VR 開発者ツールです。これは、VR アプリケーションの作成、テスト、デバッグに役立ちます。さらに、VR サンプルのセットも組み込まれているため、コンポーネントの使用方法にすぐに慣れることができます。

要約すると、React Native は、React VR、React AR、React VR Explorer の 3 つのコンポーネントを含む豊富な AR 開発機能を提供します。これらのコンポーネントは、AR 機能をより簡単に実装するのに役立ちます。

4. React Native プロジェクトを作成する

React Native プロジェクトを作成するには、まず Node.js、Watchman、React Native CLI などのツールをインストールする必要があります。インストールされていない場合は、ターミナルで次のコマンドを実行してインストールできます。

npm install -g node react-native-cli watchman

次に、プロジェクトのルート ディレクトリとして新しいディレクトリを作成し、次のコマンドを実行してプロジェクトを初期化します。

react-native init MyARProject
cd MyARProject/ios && pod install

次に、Xcode エディターを起動し、メニュー バーで [製品] > [実行] をクリックして、シミュレーターまたは実際のマシンでの実行結果を確認します。

5. ARKit を React Native に統合する

ARKit を統合するには、少なくとも次の手順が必要です。

  1. CocoaPods をインストールする: CocoaPods が Mac システムにまだインストールされていない場合は、最初にそれをインストールする必要があります。CocoaPods は、npm と同様に、サードパーティのライブラリを管理するためのツールです。次のコマンドを実行してインストールできます。

    sudo gem install cocoapods

  2. Podfile ファイルを作成する: プロジェクトのルート ディレクトリに Podfile という名前のファイルを作成し、次の内容を書き込みます。

    platform :ios, '9.0'

target 'MyARProject' do
  use_frameworks!
  
  # React Native modules
  rn_path = '../node_modules/react-native'
  pod 'React', path: rn_path, subspecs: [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinking',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
  ]
  pod 'yoga', path: "#{
        
        rn_path}/ReactCommon/yoga"
  pod 'DoubleConversion', podspec: "#{
        
        rn_path}/third-party-podspecs/DoubleConversion.podspec"
  pod 'glog', podspec: "#{
        
        rn_path}/third-party-podspecs/glog.podspec"
  pod 'Folly', podspec: "#{
        
        rn_path}/third-party-podspecs/Folly.podspec"

  # Other dependencies
  pod 'Arkit', '~> 2.0'
end

  3. ポッドの依存関係をインストールする: プロジェクト ディレクトリに入り、次のコマンドを実行してすべての依存関係をインストールします。

    cd ios
pod install
cd..

  4. AppDelegate.m にヘッダー ファイルをインポートします。Xcode プロジェクトを開き、AppDelegate.m ファイルを見つけて、先頭に ARKit フレームワークを導入します。

    #import <UIKit/UIKit.h>
#import "AppDelegate.h"
#import <SceneKit/SceneKit.h> // Import SCNView class for Augmented reality view rendering
#if __has_include(<ARKit/ARKit.h>)
#import <ARKit/ARKit.h> // Required for AR functionality
#endif

@interface AppDelegate () <RCTBridgeDelegate>
@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
      
      

  NSURL *jsCodeLocation;
 
 #ifdef DEBUG
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
 #else
  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
 #endif

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                moduleName:@"MyARProject"
                                         initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootVC = [UIViewController new];
  rootVC.view = rootView;
  self.window.rootViewController = rootVC;
  [self.window makeKeyAndVisible];

 return YES;
}

#pragma mark - AR Renderer and Camera configuration

- (void)session:(ARSession *)session didFailWithError:(NSError *)error {
      
      
  NSLog(@"Failed to create session with error %@", error);
}

- (void)renderer:(id<SCNAccelerationSceneRenderer>)renderer updateAtTime:(double)time {
      
      
  [_arView setNeedsDisplay];
}

- (void)viewDidLoad {
      
      
  [super viewDidLoad];

  _scene = [[SCNScene alloc] init];
  _scene.rootNode.position = SCNVector3Make(0, -10, 0);
  SCNMaterial *material = [_scene.rootNode firstMaterial];
  material.lightingModelName = SCNCullFaceLightingModel;

 // Create a ARSCNView which is the object that displays content in AR
  _arView = [[ARSCNView alloc] initWithFrame:self.view.frame scene:_scene options:@{
      
      }];

  _arView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
  _arView.debugOptions = ARSCNDebugOptionShowFeaturePoints |
                          ARSCNDebugOptionShowWorldOrigin |
                          ARSCNDebugOptionShowBoundingBoxes;

 // Enable auto focus on this view so it starts looking for surfaces in real-time
  _arView.camera.automaticallyAdjustsFocusRange = true;
  _arView.camera.allowsCameraControl = false;

  if (@available(iOS 12.0, *)) {
      
      
      self.view.safeAreaInsets = UIEdgeInsetsZero;
      _statusBar = [[UIStatusBarManager alloc] statusBarManager];
      [_statusBar hideSimulatedStatusBarWithAnimation:NO];
  } else {
      
      
      UIApplication *app = [UIApplication sharedApplication];
      app.setStatusBarHidden:(BOOL)[UIApplication instanceMethodSignatureForSelector:@selector(_isStatusBarHidden)]
                           arguments:(NSArray *)&YES];
  }

 // Set delegate for renderer updates
  _arView.delegate = self;

  // Add our arView as a subview of the current view controller's view
  [self.view addSubview:_arView];
}

#pragma mark - Expose internal functions to JavaScript layer

- (NSString*)getName {
      
      
  NSString* name = @"Alex";
  return name;
}

-(void) helloFromJS{
      
      
 NSLog(@"Hello From JS");
}

-(void) sayNameToJS:(NSString*)name {
      
      
 [_bridge.eventDispatcher sendEventWithName:@"onReceiveName" body:@{
      
      @"name": name}];
}

-(void) toggleDeviceOrientation{
      
      
  switch (_arView.deviceOrientation) {
      
      
     case UIInterfaceOrientationPortrait:
        _arView.preferredFramesPerSecond = 30; // Default value for iOS Simulator
        break;
     case UIInterfaceOrientationLandscapeLeft:
        _arView.preferredFramesPerSecond = 30; // Default value for iOS Simulator
        break;
     case UIInterfaceOrientationLandscapeRight:
        _arView.preferredFramesPerSecond = 30; // Default value for iOS Simulator
        break;
     default:
        break;
  }
}

@end

この時点で、ARKit を統合した React Native プロジェクトの基本設定が完了しました。これは、拡張現実アプリケーションの開発に使用できます。次に、その後の開発のために以前の AR 開発プロセスを引き続き実行できます。

6.多読

この記事には、React Native コンポーネント、JavaScript、React コンポーネント、React Native ルーティングなど、関連する多くの知識ポイントが含まれています。読者には十分に理解していただくことをお勧めします。さらに、ARKit の詳細については、Apple の公式ドキュメントにアクセスするか、他のリソースを参照してください。

おすすめ

転載: blog.csdn.net/universsky2015/article/details/131887459
おすすめ
NetBSD は AI によって生成されたコードの提出を禁止します
ランキング
C＃の変数インスタンス、クレジット・カードケース
通过uniCloud白捡一个在线图库管理工具
Linuxのいくつかの基本的なコマンドに関する洞察（20ベース）
vueエントリーの基礎知識、コア知識をマスターするならこの記事で十分
食品化学クエスチョンバンク
CentOSの7制御システムは、ファイルを占めます
単一の el-form 内の el-form-item テキストの左揃えを解決する方法
ノードJSベースノート
関数にSQL Serverの文字列：
sparksql_相関分析
アーカイブ
もっと
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)

コードワールド

© 2018 codetd.com