Nos cinco anos em que estou na Mozilla, vi alguns projetos incríveis. Alguns deles são muito populares, outros são de nicho, mas nenhum deles me inspirou como o trabalho da equipe do MozVR com o WebVR e o A-Frame O projeto tem.
O A-Frame é um projeto comunitário que tem como objetivo ser “blocos de construção para a Web de realidade virtual”, uma biblioteca para criar experiências de RV no navegador usando marcação ou JavaScript. Começar a usar um projeto como esse pode ser muito complicado, então vamos começar de forma simples: criando uma demonstração de imagem panorâmica interativa como esta aqui!
Obtendo uma imagem 3D
A maneira mais fácil de tirar uma imagem que satisfaça o requisito do efeito panorama (conhecido como formato equirretangular) é usando seu telefone. Dan Zajdband’s Guri VR: Realidade virtual para o resto de nós identifica aplicativos para iOS (Google Street View) e Android (Esfera de fotos ou Câmera de papelão). O incrível artigo de Dan também aponta uma Grupo equirretangular no Flickr se o senhor preferir simplesmente pegar uma imagem existente para fazer suas experiências.
Tirar uma imagem de qualidade com o telefone pode ser um pouco desafiador – o senhor precisará de uma mão firme para evitar bordas irregulares ao girar o telefone para tirar imagens em cada posição.
Observação rápida: para a demonstração, estou usando a imagem de amostra fornecida pela A-Frame porque a imagem do Google Street View gerou uma imagem de 10 MB e servi-la para o senhor seria uma tarefa árdua. Se quiser ver o que eu fiz usando o aplicativo GSV, o senhor pode encontrar o aqui. A imagem foi tirada do meu ponto de vista, no meio do beco sem saída em que moro.
Criando o efeito panorâmico com A-Frame
Acredite ou não, tirar uma boa imagem é a parte mais difícil, porque o A-Frame torna incrivelmente fácil transformar a imagem em uma visualização 3D. O <a-sky> dentro do A-Frame será usado para criar o efeito de panorama:
<a-scene> <a-sky src="https://davidwalsh.name/demo/3d-image.jpg" rotation="0 -130 0"></a-sky> </a-scene>
O código acima é o uso declarativo (escrito em HTML) do A-Frame; em vez disso, o senhor poderia usar JavaScript programático para criar o elemento:
// Create the scene
var scene = document.createElement('a-scene');
// Create the sky
var sky = document.createElement('a-sky');
sky.src="https://davidwalsh.name/3d-image.jpg";
sky.setAttribute('rotation', { x: 0, y: -130, y: 0 });
// Inject into page
scene.appendChild(sky);
document.body.appendChild(scene);
O rotation atributo aceita separações por espaço x, y, e z os valores de rotação do eixo; o senhor pode brincar com eles para personalizar o posicionamento do ponto de vista.
O A-Frame permite que o senhor clique, mantenha pressionado e arraste o componente para girar em torno da imagem. Também é possível clicar na imagem do óculos de realidade virtual para visualizar a imagem em 3D no telefone (o papelão é um ótimo acessório!) ou no navegador habilitado para WebVR.
A-Frame torna o 3D fácil!
Eu não estava exagerando quando disse que tirar a foto era a parte difícil; a quantidade de marcação necessária para criar um efeito de panorama 3D é mínima quando o senhor aproveita o poder do A-Frame. Embora a criação de imagens panorâmicas seja um caso de uso popular, o efeito é apenas uma simples utilização do A-Frame. Quer ver o que mais o A-Frame pode fazer? Dê uma olhada no demos no site do A-Frame e esperamos ver mais sobre WebVR em toda a Web – é a próxima grande novidade!
