;(function() { window.createMeasureObserver = (measureName) => { var markPrefix = `_uol-measure-${measureName}-${new Date().getTime()}`; performance.mark(`${markPrefix}-start`); return { end: function() { performance.mark(`${markPrefix}-end`); performance.measure(`uol-measure-${measureName}`, `${markPrefix}-start`, `${markPrefix}-end`); performance.clearMarks(`${markPrefix}-start`); performance.clearMarks(`${markPrefix}-end`); } } }; /** * Gerenciador de eventos */ window.gevent = { stack: [], RUN_ONCE: true, on: function(name, callback, once) { this.stack.push([name, callback, !!once]); }, emit: function(name, args) { for (var i = this.stack.length, item; i--;) { item = this.stack[i]; if (item[0] === name) { item[1](args); if (item[2]) { this.stack.splice(i, 1); } } } } }; var runningSearch = false; var hadAnEvent = true; var elementsToWatch = window.elementsToWatch = new Map(); var innerHeight = window.innerHeight; // timestamp da última rodada do requestAnimationFrame // É usado para limitar a procura por elementos visíveis. var lastAnimationTS = 0; // verifica se elemento está no viewport do usuário var isElementInViewport = function(el) { var rect = el.getBoundingClientRect(); var clientHeight = window.innerHeight || document.documentElement.clientHeight; // renderizando antes, evitando troca de conteúdo visível no chartbeat-related-content if(el.className.includes('related-content-front')) return true; // garante que usa ao mínimo 280px de margem para fazer o lazyload var margin = clientHeight + Math.max(280, clientHeight * 0.2); // se a base do componente está acima da altura da tela do usuário, está oculto if(rect.bottom < 0 && rect.bottom > margin * -1) { return false; } // se o topo do elemento está abaixo da altura da tela do usuário, está oculto if(rect.top > margin) { return false; } // se a posição do topo é negativa, verifica se a altura dele ainda // compensa o que já foi scrollado if(rect.top < 0 && rect.height + rect.top < 0) { return false; } return true; }; var asynxNextFreeTime = () => { return new Promise((resolve) => { if(window.requestIdleCallback) { window.requestIdleCallback(resolve, { timeout: 5000, }); } else { window.requestAnimationFrame(resolve); } }); }; var asyncValidateIfElIsInViewPort = function(promise, el) { return promise.then(() => { if(el) { if(isElementInViewport(el) == true) { const cb = elementsToWatch.get(el); // remove da lista para não ser disparado novamente elementsToWatch.delete(el); cb(); } } }).then(asynxNextFreeTime); }; // inicia o fluxo de procura de elementos procurados var look = function() { if(window.requestIdleCallback) { window.requestIdleCallback(findByVisibleElements, { timeout: 5000, }); } else { window.requestAnimationFrame(findByVisibleElements); } }; var findByVisibleElements = function(ts) { var elapsedSinceLast = ts - lastAnimationTS; // se não teve nenhum evento que possa alterar a página if(hadAnEvent == false) { return look(); } if(elementsToWatch.size == 0) { return look(); } if(runningSearch == true) { return look(); } // procura por elementos visíveis apenas 5x/seg if(elapsedSinceLast < 1000/5) { return look(); } // atualiza o último ts lastAnimationTS = ts; // reseta status de scroll para não entrar novamente aqui hadAnEvent = false; // indica que está rodando a procura por elementos no viewport runningSearch = true; const done = Array.from(elementsToWatch.keys()).reduce(asyncValidateIfElIsInViewPort, Promise.resolve()); // obtém todos os elementos que podem ter view contabilizados //elementsToWatch.forEach(function(cb, el) { // if(isElementInViewport(el) == true) { // // remove da lista para não ser disparado novamente // elementsToWatch.delete(el); // cb(el); // } //}); done.then(function() { runningSearch = false; }); // reinicia o fluxo de procura look(); }; /** * Quando o elemento `el` entrar no viewport (-20%), cb será disparado. */ window.lazyload = function(el, cb) { if(el.nodeType != Node.ELEMENT_NODE) { throw new Error("element parameter should be a Element Node"); } if(typeof cb !== 'function') { throw new Error("callback parameter should be a Function"); } elementsToWatch.set(el, cb); } var setEvent = function() { hadAnEvent = true; }; window.addEventListener('scroll', setEvent, { capture: true, ive: true }); window.addEventListener('click', setEvent, { ive: true }); window.addEventListener('resize', setEvent, { ive: true }); window.addEventListener('load', setEvent, { once: true, ive: true }); window.addEventListener('DOMContentLoaded', setEvent, { once: true, ive: true }); window.gevent.on('allJSLoadedAndCreated', setEvent, window.gevent.RUN_ONCE); // inicia a validação look(); })();
  • AssineUOL
Topo

Realidade aumentada: entenda o que é uma das tecnologias do metaverso

Getty Images/iStockphoto
Imagem: Getty Images/iStockphoto

Rosália Vasconcelos

Colaboração para Tilt, do Recife

18/06/2022 04h00

Os avanços na área de realidade aumentada (RA) ganharam o mundo da tecnologia há alguns anos, com o surgimento de aplicativos capazes de mesclar conteúdo virtual com imagens do mundo real. Com a recente popularidade da ideia de metaverso (ambiente virtual imersivo), essa proposta de inovação voltou a ficar em alta —junto a realidade virtual, 5G e hologramas.

E o segredo do mercado atual para fazer o metaverso a ter utilidade a pelas aplicações de RA, destaca o engenheiro de software Mateus Bueno. Para ele, essa tecnologia será capaz de dar um sentido mais prático e ível às experiências imersivas dos novos sistemas, engajando mais pessoas.

"A realidade aumentada é uma área do metaverso com mais potencial de tração no curto e médio prazo, pois é mais fácil [e barato] que usuários em conteúdos virtuais integrados ao mundo real do que depender dos dispositivos de realidade virtual [que são mais caros]", afirmou.

Além disso, as experiências com RA podem ser facilmente adas pelas câmeras de smartphones atuais. Já para experimentar ambientes de realidade virtual, é necessário adquirir óculos apropriados — o que exige mais investimento.

Hoje, por exemplo, já existem plataformas sendo utilizadas para criar experiências com RA, tanto em celulares quanto em navegadores de internet. A expectativa é que, no futuro breve, novos hardwares e softwares também deverão atender a essas demandas.

"No momento, nós estamos sempre com os olhos baixos, grudados nos nossos celulares. Com a realidade aumentada, vamos ver novamente o mundo real, mas com elementos do digital, informações que podem ser úteis e interessantes. Vamos levantar novamente as nossas cabeças", afirmou Peggy Johnson, a presidente da empresa de RA Magic Leap, sobre o real valor do metaverso.

Como a realidade aumentada funciona

Álvaro José Rodrigues de Lima, professor do departamento de Técnicas de Representação da UFRJ (Universidade Federal do Rio de Janeiro), explica que temos um ambiente de realidade aumentada quando filmamos um local, em tempo real, e inserimos objetos virtuais e as cenas formadas dão a impressão de que os objetos virtuais pertencem ao mundo real.

"Aquela atração antiga de parques de diversão, em que uma mulher se transforma em gorila, seria um tipo de realidade aumentada sem o uso de tecnologia sofisticada", acrescenta o professor Romero Tori, do Centro Universitário Senac.

Hoje, existem quatro formas principais de realidade aumentada.

  1. A câmera captura o mundo real, e o software inclui elementos virtuais sobre o vídeo.
  2. Com óculos de realidade virtual e câmeras acopladas, o usuário vê o ambiente à frente com elementos virtuais.
  3. Óculos com lentes semitransparentes misturam o ambiente com imagens.
  4. Técnicas de mapeamento de vídeo (video mapping) projetam imagens sobre fachadas de prédios.

Que setores devem explorar melhor a RA?

Entretenimento: a tecnologia tem sido bastante empregada em jogos. Há ainda aplicativos que sobrepõem informações sobre as obras de arte e também é possível manipular objetos virtuais de estudo como se esses estivessem sobre a mesa.

Saúde: para facilitar processos cirúrgicos. Antes do médico começar os procedimentos, ele pode usar a RA para fazer um planejamento de como será a intervenção no paciente.

Moda: empresas como Nike e Amazon também já estão se adiantando e vendendo peças de roupas e sapatos utilizando ferramentas imersivas, como avatares.

Hidrologia, ecologia e geologia: mostrando informações específicas e detalhadas sobre o terreno ou mapas tridimensionais.

Desafios da RA

Empresas e pesquisadores têm trabalhado para desenvolver mais aplicações com nessa área, mas alguns especialistas acreditam que ela não deve se popularizar de forma massiva tão rápido, mesmo com esse potencial de transformar a nossa relação com a tecnologia.

"Trabalhar com realidade aumentada pode ser muito difícil porque o device [dispositivo] precisa, basicamente, enganar seus olhos: mostrar algo para ele que não está naquele espaço. É preciso inserir conteúdo digital no espaço e este é um desafio óptico enorme que não vai ser resolvido magicamente, tanto que estamos nesse negócio há 10 anos", disse a presidente da Magic Leap.

Veja abaixo alguns exemplos de aplicativos que trabalham com realidade aumentada:

Flightradar24 - Divulgação - Divulgação
Imagem: Divulgação

Flightradar24 (iOS, Android)

O objetivo deste app é identificar e trazer dados sobre os aviões que estão ando naquele momento no céu. Para isso, basta apontar a câmera do seu celular.

Ingress - Divulgação - Divulgação
Imagem: Divulgação

Ingress Prime (iOS, Android)

Produzido pela mesma Niantic que criou o "Pokémon Go", o Ingress Prime é um jogo de ficção científica na qual você é envolvido em uma trama sobre uma energia misteriosa e portais que ela está abrindo no nosso mundo. Com o GPS ligado, o game reconhece as ruas onde você está e mostra os exatos pontos onde os portais se abrem; você deve ir lá e combater as fontes de energia.

Wikitude - Divulgação - Divulgação
Imagem: Divulgação

Wikitude (iOS, Android)

O Wikitude permite escanear imagens de revistas que foram criadas especificamente para o app e mostrar mais recursos multimídia, como fotos, textos e vídeos. Usado nas ruas, ele também acrescenta informações extras sobre locais públicos.

Toy Car RC - Divulgação - Divulgação
Imagem: Divulgação

Toy Car RC (iOS, Android)

Esse é simples e eficiente: baixe o app em um celular, imprima ou baixe em outro dispositivo a imagem marcadora aqui e depois é só soltar o carrinho em cima da imagem marcadora. Você pode dirigi-lo pela sala e também pelos cenários virtuais. Ótimo para crianças.

Layar - Divulgação - Divulgação
Imagem: Divulgação

Augment (iOS, Android)

Com o Augment você põe modelos 3D de diversas aplicações no mundo real. Dá para mudar de lugar, girar e até alterar o tamanho. Se uma loja de móveis disponibilizar pelo sistema do app um modelo de uma cadeira, você pode ver como ela ficaria em sua sala de estar antes de comprá-la de verdade.

Skyview - Divulgação - Divulgação
Imagem: Divulgação

Skyview (iOS, Android)

Apps de astronomia são relativamente comuns, e eles usam os sensores de movimento dos celulares para mostrar onde está cada estrela do céu. A diferença no Skyview é que ele abre a câmera e mescla o ambiente em que você está com as imagens das constelações, seja dia ou noite.

Aurasma - Divulgação - Divulgação
Imagem: Divulgação

Zookazam (iOS, Android)

App educativo que cria bichos e objetos em 3D quando combinados com imagens impressas no papel ou na tela do computador. Serve mais para as crianças entenderem como é a fisionomia de um tubarão sem ter que encostar nele, por exemplo.

Anatomy 4D - Divulgação - Divulgação
Imagem: Divulgação

Anatomy 4D (iOS, Android)

Outro voltado para o aprendizado. Imprima ou baixe em um tablet essas imagens para servirem de marcadores. Daí com o app você consegue moldes em 3D do corpo humano e pode fracioná-lo em todos os seus sistemas: circulatório, muscular, ósseo, etc. Há ainda um modelo específico do coração humano.

*Com matérias de Márcio Padrão e Natália Eiras.