Por que você deve fazer Realidade Aumentada se você é um desenvolvedor JavaScript – e como começar

Evaristo Caraballo Blocked Unblock Seguir Seguindo 11 de janeiro Foto de Patrick Schneider no Unsplash

Se você é um programador de JavaScript que ainda está atrasado para criar uma lista definitiva de resoluções para 2019, deixe-me dar uma mão: Comece a descobrir como entrar em realidade aumentada (AR).

A combinação Realidade Aumentada / Mista / Virtual (AR / RM / RV) teve um crescimento frenético desde 2016, vindo de um valor de mercado marginal de pouco mais de US $ 6 bilhões para um que pode alcançar US $ 210 bilhões em vendas (incluindo hardware) até 2022 Acima de tudo, a Realidade Aumentada é a que experimenta um crescimento estável.

No início, um desenvolvedor de JavaScript (web) que queira entrar no barco AR pode se sentir desestimulado ao encontrar as habilidades habituais necessárias ; e depois há quem pergunte Machine Learning ou Internet of Things. No entanto, se você é principalmente um desenvolvedor de JavaScript, considere-se abençoado: a linguagem é recorrentemente mencionada como uma que você deve saber para entrar neste setor. O motivo? Neste momento, muito desenvolvimento de RA está na web . E é aí que o JavaScript reina.

Mobile e Web foram os últimos a obter recursos de AR e ainda estão sendo desenvolvidos (extraídos de uma apresentação do buildAR )

Empregos Aumentados para o fã de JavaScript – Realmente?

Talvez não seja muito rápido. Há muitos exemplos em que o AR / MR / VR brilha sozinho, especialmente em nichos de mercado, mas a indústria ainda não descobriu completamente o valor total da tecnologia para o consumidor em geral. Uma vez resolvido, a indústria certamente estaria fabricando mais produtos AR / RM / VR, o que se traduziria em mais empregos.

Para alguns analistas, espera-se que o AR tenha o impacto mais difundido, em parte porque não requer dispositivos e condições específicos a serem implementados como a RV faz.

O AR tem utilidade para quase tudo, sobrepondo informações úteis e relevantes sobre o mundo ao seu redor. AR pode ser difundido de uma forma que a RV não pode.

– David McQueen – Strategy Analytics – de uma entrevista em duas vezes

Cabe ao setor descobrir como tornar o AR mais tecnológico de todos os dias. De acordo com algumas empresas, particularmente no âmbito do telefone móvel, a exploração de um potencial melhor do AR reduz-se a uma regra bem conhecida: SIMPLICIDADE .

Embora o Unity tenha se tornado o caminho padrão para a criação de aplicativos de AR, um número cada vez maior precisa apenas de um pouco de AR.

– de um artigo de Benjamin Devine , Homestory AR

Em muitos casos, a mobilização de recursos para as principais ferramentas de AR pode ser um exagero. Em vez disso, um monte de bons recursos orientados a UX sobre alguns ativos 2D / 3D pode ser mais do que suficiente para fazer produtos impressionantes. Algo que um desenvolvedor de JavaScript faz regularmente.

É possível, então, que qualquer desenvolvedor de JavaScript esteja incorporando recursos de AR / VR (não) padrão como uma extensão de suas funções tradicionais no futuro. E, se necessário, o JavaScript é robusto o suficiente para tarefas mais complexas. O céu é o limite.

Tornando-se aumentada em JavaScript

Antes de começar, sugiro dar uma olhada nas diversas plataformas e padrões de AR. As mesmas restrições técnicas que afetam a indústria também estão refletidas no mundo da AR.

Por exemplo, existem várias plataformas, uma para cada Big Tech (Google = ARCode , Apple = ARKit , MS = ChakraCore , Facebook = AR Studio , Reagir 360 , Mozilla = aframe ).

Depois de dar uma olhada rápida nas opções, iniciar projetos de Realidade Aumentada totalmente JavaScript é relativamente fácil. Você pode começar usando qualquer estrutura de desenvolvimento web / aplicativo como Cordova , Ionic , React Native ou Vue Native para incorporar a estrutura AR de sua escolha – e implantar recursos 3D no mundo real.

Se o que você deseja é implantar na Web usando principalmente AR baseada em marcadores, você pode usar os repositórios do GitHub como AR.js (grátis), argon.js (grátis, mas limitado) ou awe.js (paga PaaS, mas com um antigo GitHub repositório ainda disponível). Há alguns que são mais difíceis para o novato, muitos deles focados em coisas como reconhecimento facial / de cabeça (como o tracking.js e o headtrackr ).

Ou você pode aumentar os recursos do seu projeto se conseguir portar SDKs disponíveis feitos por empresas relacionadas a AR . Existem muitas APIs que são renderizadas como AR no navegador também. Por exemplo, o Mapbox segue esse caminho e é desenvolvido em JavaScript.

Eu sugiro que você mantenha isso simples, mas interativo.

No entanto, se suas ambições apontam para também dominar o design e a animação em JavaScript, você definitivamente precisa aprender pelo menos um pacote Javascript em 3D , e THREE.js é o mais popular. Espere, no entanto, até obter uma boa base de JavaScript e OpenGl , além de geometria, trigonometria, álgebra linear ou física. E não espere mais ajuda das GUIs 3D JS existentes; em particular, THREE.js não tem nenhum. Desafiante mas emocionante!

Exemplo de bônus

Eu queria preparar uma demonstração rápida apenas para explorar a tecnologia, então peguei um CodePen legal e o modifiquei para se adaptar a uma animação AR renderizada na web baseada em marcadores portada dentro de um clone do excelente trabalho de Stemkoski com AR.js.

Para você ver o exemplo, você precisa de um dispositivo móvel com câmera e internet (telefone ou tablet) e uma cópia impressa do marcador ou de outro dispositivo para mostrá-lo na tela.

Pronto? Agora abra este link usando um navegador no seu dispositivo móvel:

https://evaristoc.github.io/ARexample/

Dê autorização para usar sua câmera e aponte a câmera para um marcador como abaixo , seja impresso ou em outra tela.

OBSERVAÇÃO: funciona no Android e no Chrome – pode não funcionar para outros dispositivos e navegadores ?.

A animação original pode ser encontrada aqui .

Feliz Ano Novo!

Espero que você ache essa tecnologia tão fascinante quanto eu. Se assim for, não fique só: entre em contato conosco no fórum freeCodeCamp e compartilhe suas dúvidas e ideias.

E se você gostou deste artigo, não se esqueça de dar um ? e compartilhá-lo nas mídias sociais.

Obrigado pela leitura, aproveite AR e Happy Coding !!