Realidade Aumentada com React Native e iOS ARKit
Realidade aumentada pode não ser um tema novo, mas sem dúvida alguma, ultimamente, tem despertado a atenção de muita gente. Neste artigo mostro uma abordagem prática e bem didática sobre o mercado e como você pode explorá-lo com javascript através da plataforma React Native.
Neste artigo você verá:
- Os motivos pelos quais você deveria aprender mais sobre AR/VR
- O que é ARKit e o seu potencial para mudar o mercado
- Sobre React Native e como ele entra nessa jogada
- Quick Start: Construindo e rodando seu primeiro projeto
O Mercado
É bem comum encontrarmos notícias de previsões de mercado colocando os investimentos e lucros em realidade aumentada e virtual na grandeza de alguns milhares de dólares.
A receita total para a realidade virtual (VR) e a realidade aumentada (AR) deverá aumentar de US $ 5,2 bilhões em 2016 para mais de US $ 162 bilhões em 2020, de acordo com o IDC.
Um recente relatório da GreenLight sobre este mercado mostra de forma bem clara este comportamento de expansão da realidade aumentada na indústria.
Este gráfico só vem a corroborar com o fato de que, se você deseja ter bons resultados na indústria, mas ainda não está dominando esta tecnologia, é melhor se apressar.
No link abaixo você poderá encontrar uma seleção de 15 oportunidades de negócios para o mercado de Realidade Aumentada.
WWDC 2017: ARKit Framework
Em outro artigo fiz uma abordagem completa sobre o CoreML framework, lançado no WWDC 2017 para proporcionar a execução de modelos de Machine Learning embarcados nos dispositivos Apple.
Além do CoreML, umas das novidades deste evento foi o anúncio do ARKit, uma biblioteca completa para a construção de aplicações com realidade aumentada de forma bastante prática e facilitada.
Diversos aplicativos famosos como Instagram e Snap tem investido muito em filtros diferenciados e que caem facilmente no gosto dos usuários.
Basicamente, com a facilidade de construir aplicações com esta tecnologia, o maior desafia fica por conta da criatividade!
E o que o React Native tem com isso?
React Native é uma plataforma que a cada dia ganha mais adeptos e que possui resultados comprovados de projetos que, produção, tiveram ótimos desempenhos, não poderia ficar de fora desta festa! Logo, ao longo desses poucos meses, do lançamento até hoje, diversas propostas foram feitas, para integrar essas duas tecnologias AR + React Native.
A mais promissora, sem sombra de dúvidas, é da Expo https://expo.io. Veja abaixo um projeto de referência chamado “Dire Dire Ducks” https://expo.io/@nikki/dire-dire-ducks.
Está convencido? Então vamos colocar a mão na massa e iniciar nosso primeiro projeto com React Native e Realidade Aumentada!
Quick Start — Iniciando seu primeiro projeto
Este exemplo é uma releitura da divulgação oficial do ExpoAR, que pode ser lido na íntegra em https://goo.gl/vJcqCN.
Você precisará atualizar sua versão do expo para a 21.0.2 ou superior. Caso não tenha certeza se está com a última versão, o comando abaixo pode lhe ajudar:
npm update expoDe qualquer forma, se sua versão não está atualizada, não precisa se preocupar, um Warning será lançado caso o recurso não seja encontrado.
Primeiramente vamos importar as dependências fundamentais que são o expo e o react.
import Expo from ‘expo’;
import React from ‘react’;Agora vamos importar as bibliotecas que nos ajudarão a renderizar os componentes gráficos do nosso exemplo.
npm i -S three expo-threeA famosa biblioteca Three.js responsável por renderizar fantásticos gráficos 3D através do browser. Neste link https://threejs.org/docs/ você encontrará diversas informações muito valiosas sobre esta biblioteca.
import * as THREE from ‘three’; // 0.87.1
import ExpoTHREE from ‘expo-three’; // 2.0.2Seu cabeçalho e a estrutura base do seu app será assim:
Obs: o console.disableYellowBox=true desabilita os alertas na tela, mas você ainda poderá vê-los no console ou através da ferramenta Expo XDE.
import Expo from ‘expo’;
import React from ‘react’;import * as THREE from ‘three’; // 0.87.1
import ExpoTHREE from ‘expo-three’; // 2.0.2console.disableYellowBox = true;export default class App extends React.Component {}
O Expo.GLView será nosso container, uma extensão do componente View com a capacidade de renderizar os componentes gráficos 3D. O style flex:1 configura para que esse container ocupe toda a tela. O componente terá a referência this._glView para manipulação posterior via código. Ao ser "montado" o componente irá iniciar a função onContextCreate, que por sua vez irá invocar a função this._onGLContextCreate.
<Expo.GLView ref={(ref) => this._glView = ref} style={{ flex: 1 }}
onContextCreate={this._onGLContextCreate} />Esta função, quando invocada, recebe o atributo gl representa o contexto de nossa biblioteca gráfica.
_onGLContextCreate = async (gl) => { }Primeiramente vamos pegar as dimensões de nossa cena.
const width = gl.drawingBufferWidth;
const height = gl.drawingBufferHeight;Iniciar o ARSession é o passo fundamental para iniciar o suporte ao AR dentro do seu app React Native. Por ser assíncrono, precisamos garantir que a construção dos componentes seja feita apenas com o ARSession iniciado, por isso colocamos a palavra reservada await.
const arSession = await this._glView.startARSessionAsync();Vamos iniciar a cena do Three.js sobre o suporte da biblioteca Expo, repassando a Sessão, altura e largura, near e far. Essa configuração definirá como a câmera será inicada.
const scene = new THREE.Scene();
const camera = ExpoTHREE.createARCamera(arSession, width, height, 0.01, 1000);
const renderer = ExpoTHREE.createRenderer({ gl });
renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);Pronto! Chegamos a uma das partes mais fundamentais da utilização do AR com React Native através do Expo, vamos definir a renderização dos componentes sobre uma cena. Um box é construído e colorizado, em seguida é definida uma profundidade (eixo z) e por fim é adicionado à cena.
scene.background = ExpoTHREE.createARBackgroundTexture(arSession, renderer);const geometry = new THREE.BoxGeometry(0.07, 0.07, 0.07);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.position.z = -0.4;
scene.add(cube);
Perfeito! Nosso aplicativo já está quase pronto, você conseguirá ver um cubo flutuando através da sua câmera, mas o que você acha de aplicarmos uma animação? Para isso, vamos usar o comando abaixo, invocando recursivamente uma função animate, que irá mudar os eixos y e x, incrementando-os em 0.07 e 0.04 respectivamente.
const animate = () => {
requestAnimationFrame(animate); cube.rotation.x += 0.07;
cube.rotation.y += 0.04; renderer.render(scene, camera);
gl.endFrameEXP();
}
//
animate();
Agora veja abaixo o código completo: (https://snack.expo.io/Hk1C_YqjW)
import Expo from ‘expo’;
import React from ‘react’;import * as THREE from ‘three’; // 0.87.1
import ExpoTHREE from ‘expo-three’; // 2.0.2console.disableYellowBox = true;export default class App extends React.Component {
render() {
return (
<Expo.GLView ref={(ref) => this._glView = ref} style={{ flex: 1 }} onContextCreate={this._onGLContextCreate} />
);
}_onGLContextCreate = async (gl) => {
const width = gl.drawingBufferWidth;
const height = gl.drawingBufferHeight; const arSession = await this._glView.startARSessionAsync();
const scene = new THREE.Scene();
const camera = ExpoTHREE.createARCamera(arSession, width, height, 0.01, 1000);
const renderer = ExpoTHREE.createRenderer({ gl });
renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight); scene.background= ExpoTHREE.createARBackgroundTexture(arSession, renderer); const geometry = new THREE.BoxGeometry(0.07, 0.07, 0.07);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.position.z = -0.4;
scene.add(cube);const animate = () => {
requestAnimationFrame(animate); cube.rotation.x += 0.07;
cube.rotation.y += 0.04; renderer.render(scene, camera);
gl.endFrameEXP();
}
animate();
}
}
O resultado final é muito interessante! Com poucas linhas de código você será capaz de criar apps muito interessantes.
Para chegar a esses resultados você precisa ter um dispositivo que suporte essa tecnologia, aqui você poderá encontrar uma lista completa: http://www.redmondpie.com/ios-11-arkit-compatibility-check-if-your-device-is-compatible-with-apples-new-ar-platform/
Considerações finais
Deixo aqui um agradecimento especial ao amigo Carlos Natalino (https://www.linkedin.com/in/carlosnatalino/) pela ajuda na construção desde post.
Você quer entender mais sobre o tema? Fale comigo, através dos comentários ou pelas redes sociais Twitter (@jgabriel_lima) ou Linkedin (https://www.linkedin.com/in/joaogabriellima/) e vamos trocar uma idéia. Terei grande satisfação em lhe ajudar a explorar mais este conhecimento.
