Construindo aplicativos AR em aplicativos móveis com ReactNative: Compreendendo o ecossistema de desenvolvimento AR em ReactNative

Autor: Zen e a arte da programação de computadores

1. Introdução

Nos últimos anos, com a inovação contínua da VR, AR, Internet móvel e outras tecnologias, as pessoas estão cada vez mais experimentando um novo estilo de vida. E uma parte integrante disso é o mundo digital real. Como a vida das pessoas contemporâneas é inseparável dos telemóveis, tablets e televisões, as aplicações digitais do mundo real são insubstituíveis. Então, como podemos usar essas tecnologias para criar experiências de realidade virtual mais interessantes e significativas? Por exemplo, podemos usar a tecnologia AR para implementar um jogo com funções de realidade aumentada. Neste artigo, mostrarei como usar o React Native para construir um aplicativo móvel com funcionalidade AR.

React Native é uma estrutura de código aberto multiplataforma lançada pelo Facebook para o desenvolvimento de aplicativos móveis que suportam sistemas iOS e Android. Com React Native, podemos desenvolver aplicações móveis utilizando a linguagem JavaScript sem a necessidade de aprender outras linguagens como Objective-C, Swift ou Java. React Native fornece uma rica biblioteca de componentes, permitindo que os desenvolvedores desenvolvam rapidamente interfaces de usuário de alto desempenho e qualidade. Atualmente, React Native se tornou a estrutura preferida para a construção de aplicativos móveis.

O autor deste artigo é Li Bin, fundador e CEO da Huagong Robotics. Ele já trabalhou para a Huawei e foi responsável pela pesquisa e desenvolvimento de produtos de smartphones, tablets e TVs. Li Bin se formou na Escola de Ciência e Tecnologia da Computação da Universidade de Henan e tem grande interesse em computação gráfica, animação, mídia digital, programação e outras áreas. Suas direções de pesquisa concentram-se principalmente em AR (realidade aumentada), VR (realidade virtual), tecnologia de realidade mista e prática de aplicação.

2. Processo de desenvolvimento de AR

Primeiro, precisamos entender o que é realidade aumentada (AR). AR refere-se à integração de objetos, imagens, sons e outros elementos do ambiente virtual com o mundo real, permitindo aos usuários obter efeitos ambientais tridimensionais reais e realistas. Pode ajudar os usuários a sentir o mundo físico de forma mais intuitiva e a criar coisas interessantes e significativas nele.

A seguir, vamos dar uma olhada no processo de desenvolvimento de AR. Aqui tomamos um exemplo simples de AR - o projeto AR de reconhecimento facial como exemplo para descrever o processo de desenvolvimento deste projeto.

Seleção de equipamento de filmagem AR: De acordo com as necessidades do projeto, selecione um equipamento de filmagem AR adequado, como usar o iPhone XS Max da linha de produtos Apple, usar a série Surface Pro da linha de produtos Microsoft, etc.
Seleção de tecnologia: Escolha uma estrutura de código aberto adequada para desenvolvimento de AR, como React Native, Unity, etc.
Construção de modelo: construa um modelo de cena com ferramentas apropriadas e adicione os rostos que precisamos reconhecer na cena.
Seleção de algoritmo de reconhecimento: Determine o algoritmo para reconhecimento de rostos, como tecnologia de reconhecimento facial baseada em aprendizado profundo.
Otimização de processos: Otimize todo o processo para garantir precisão e fluência.
Design e desenvolvimento de UI: Com base nos requisitos do projeto, combinados com ferramentas de design de UI, projete uma interface de usuário que atenda à cognição do usuário.
Lançamento do APP: Publique nosso aplicativo AR.

O acima é o processo de desenvolvimento de AR mais básico. Embora este exemplo seja relativamente simples, o processo de desenvolvimento real será muito mais complexo.

3. Ecossistema de desenvolvimento de AR do React Native

Mencionamos anteriormente que React Native é uma estrutura de código aberto multiplataforma que fornece uma rica biblioteca de componentes, permitindo que os desenvolvedores desenvolvam rapidamente interfaces de usuário de alto desempenho e alta qualidade. Entre eles, React VR, React AR e React VR Explorer são partes importantes do ecossistema React Native.

React VR é uma biblioteca de componentes para desenvolvimento de aplicativos VR. Ele encapsula algumas funções básicas de VR, incluindo visualização de VR, renderização, controle de câmera, rastreamento de controlador, etc. Portanto, só precisamos configurá-lo brevemente para iniciar o desenvolvimento de VR.

React AR é uma biblioteca de componentes para desenvolvimento de aplicativos AR. Ele fornece algumas funções básicas de AR, incluindo visualização de AR, digitalização de código, detecção de alvo, posicionamento, etc. Também podemos usar alguns componentes fornecidos pelo React VR e cooperar com ARKit ou Vuforia SDK para implementar funções AR mais complexas.

React VR Explorer é uma ferramenta de desenvolvedor de VR baseada em React VR. Pode nos ajudar a criar, testar e depurar aplicativos de RV. Além disso, ele também possui um conjunto de amostras de VR integradas, para que você possa se familiarizar rapidamente com o uso dos componentes.

Resumindo, React Native oferece recursos avançados de desenvolvimento de AR, incluindo três componentes: React VR, React AR e React VR Explorer. Esses componentes podem nos ajudar a implementar funções AR com mais facilidade.

4. Crie um projeto React Native

Para criar um projeto React Native, precisamos primeiro instalar Node.js, Watchman, React Native CLI e outras ferramentas. Caso não o tenha instalado, você pode instalá-lo executando o seguinte comando no terminal:

npm install -g node react-native-cli watchman

Em seguida, crie um novo diretório como diretório raiz do projeto e execute o seguinte comando para inicializar o projeto:

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

Em seguida, inicie o editor Xcode e clique em Produto > Executar na barra de menu para ver os resultados da execução no simulador ou na máquina real.

5. Integre o ARKit no React Native

A integração do ARKit requer pelo menos as seguintes etapas:

Instale CocoaPods: Se o CocoaPods ainda não estiver instalado em seu sistema Mac, você precisará instalá-lo primeiro. CocoaPods é uma ferramenta para gerenciamento de bibliotecas de terceiros, semelhante ao npm. Podemos instalá-lo executando o seguinte comando:
```
sudo gem install cocoapods
```

Crie um arquivo Podfile: Crie um arquivo chamado Podfile no diretório raiz do projeto e escreva o seguinte conteúdo:

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

Instalar dependências do Pod: Entramos no diretório do projeto e executamos o seguinte comando para instalar todas as dependências:
```
cd ios
pod install
cd..
```

Importe o arquivo de cabeçalho em AppDelegate.m: Abra o projeto Xcode, encontre o arquivo AppDelegate.m e introduza a estrutura ARKit na parte superior:

#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

Neste ponto, concluímos as configurações básicas de um projeto React Native integrando ARKit, que pode ser usado para desenvolver aplicações de realidade aumentada. A seguir, podemos continuar a seguir o processo anterior de desenvolvimento de AR para desenvolvimento subsequente.

6.Leitura estendida

Este artigo envolve muitos pontos de conhecimento relacionados, como componentes React Native, JavaScript, componentes React, roteamento React Native, etc. Além disso, para obter mais informações sobre o ARKit, você pode visitar a documentação oficial da Apple ou consultar outros recursos.