Aplicativo 360 VR em 10 minutos com unidade: 8 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:37

Como estamos construindo este aplicativo?

Ao contrário do vídeo normal que tem um quadro retangular, o vídeo 360 tem a forma de uma esfera. Então, primeiro precisamos criar uma tela esférica para projetar nosso vídeo 360. O jogador (ou visualizador) estará localizado dentro desta esfera e poderá assistir ao vídeo em qualquer direção. As etapas abaixo devem fazer você se sentir autorizado a fazer suas próprias alterações, explicando como tudo funciona nos bastidores. Para obter instruções passo a passo

Etapa 1: O que você precisa

Um telefone Android com um giroscópio para detectar os movimentos da cabeça, rodando no KitKat ou sistema operacional mais recente.

Um fone de ouvido Cardboard. Se você não possui um, pode encontrar muitos na Amazon por menos de 10 dólares.

Unity3D, um mecanismo de jogo de plataforma cruzada, que você precisa instalar no seu computador, versão 5.6 ou mais recente. Usaremos este software para construir todo o nosso projeto.

O SDK do GoogleVR para Unity, que você pode baixar com antecedência.

Um vídeo 360. Grave um com uma câmera 360 ou você pode encontrar um vídeo 360 no Youtube, Facebook ou Any 360 Video Website

Etapa 2: construir uma esfera

Primeiro, vamos abrir um novo projeto do Unity se você estiver começando do zero (ou uma nova cena se quiser integrar o player de vídeo 360 em um projeto existente). Pense em uma cena como um nível de um videogame, e um projeto como um jogo completo.

Em seguida, adicione um objeto de esfera na Cena, colocado em seu centro (Posição = 0, 0, 0), com um raio de 50 (Escala = 50, 50, 50). A posição da câmera também deve ser definida como 0, 0, 0. A câmera são os olhos do jogador / visualizador, por isso a queremos no centro da esfera. Colocá-lo em outro lugar faria com que o vídeo parecesse distorcido. Uma vez que a câmera é colocada dentro da esfera, esta não é mais visível na cena. Não se preocupe, há uma explicação para isso! Na verdade, a maioria dos motores de jogo não renderiza, por padrão, o lado interno de objetos 3D. Isso ocorre porque raramente precisamos vê-los, seria um desperdício de recursos renderizá-los. Vamos consertar isso a seguir.

Etapa 3: Inverta os normais da esfera

Em nosso caso, precisamos ver nossa esfera por dentro. Esse é o objetivo do aplicativo, então vamos transformá-lo do avesso.

No Unity, as esferas não são realmente esferas (o quê? Nós sempre mentimos!), Elas são polígonos feitos com milhares de minúsculas facetas. Os lados externos das facetas são visíveis, mas não os internos. Por esse motivo, vamos fazer um programa para virar essas pequenas facetas como panquecas. Na geometria 3D, chamamos essa transformação de «invertendo normais» ou «invertendo normais». Usaremos um programa chamado Shader, que aplicaremos ao Material da Esfera. Os materiais controlam a aparência dos objetos no Unity. Shaders são pequenos scripts que calculam a cor de cada pixel renderizado, com base na iluminação e nas informações obtidas de seus materiais. Portanto, crie um novo Material para a Esfera e, em seguida, um novo Shader aplicado a este Material. Precisamos escrever um código personalizado para o Shader … mas não tenha medo, você pode copiar e colar o código abaixo:

Clique neste link para obter o link do código

Este pequeno Shader vai virar cada pixel da esfera do avesso. Agora nossa esfera aparece como uma grande bola branca, vista de dentro, dentro de nossa cena. A próxima etapa é transformar essa esfera branca em um reprodutor de vídeo.

Etapa 4: projete seu vídeo 360 dentro da esfera

Aqui você precisa ter um vídeo de 360 mp4 disponível. Importe-o no projeto e arraste-o para a esfera. E é aí que a mágica acontece: um componente ‘Video Player’ aparece e bum, o vídeo está pronto para ser reproduzido. Você pode brincar com configurações como loops e áudio. Ele também suporta streaming!

Etapa 5: Configurar o Google Cardboard?

Nesta etapa, faremos com que a experiência seja realmente envolvente. É por isso que queremos visualizá-lo em um fone de ouvido VR, aqui um Google Cardboard.

Vamos criar uma visão “estereoscópica” (a tela será dividida em duas, com alguns efeitos fisheye em ambos os lados - um lado para cada olho), usando o SDK do GoogleVR. O efeito olho de peixe em cada olho, combinado com a distorção das lentes de plástico do Cardboard, é o que lhe dá a ilusão de profundidade e imersão.

Para adicionar o SDK do GoogleVR ao nosso projeto, baixe e importe o plug-in, então ajustaremos várias configurações do Android:

• Vá para o menu da barra superior> Arquivo> Configurações de compilação. Adicione sua cena aberta, se ainda não tiver sido adicionada, e selecione Android na lista de plataformas suportadas.
• Clique em Switch Platform. Deve demorar um pouco na primeira vez que você fizer a troca.
• Clique em Configurações do jogador. Os componentes aparecem no painel do instrutor.

No Player Settings’Instructor, na seção‘Other Settings’:

• Verifique a realidade virtual suportada. Em SDKs de realidade virtual, selecione o ícone + e, em seguida, selecione Cardboard para adicioná-lo à lista.
• Insira um nome de pacote no campo Identificador de pacote (por exemplo, com.yourdomain.demo360). Ele deve ser único e é usado para diferenciar nosso aplicativo de outros na Google Play Store.
• Defina o menu suspenso Nível mínimo de API para “Android 4.4‘Kit Kat’(API de nível 19)”.

Depois, pegue o elemento ‘GvrViewerMain’ da pasta GoogleVR / Prefabs no Navegador de projeto e arraste-o para a cena. No Inspetor, dê a ele a mesma posição do centro da esfera - (0, 0, 0).

O pré-fabricado GvrViewerMain controla todas as configurações do modo VR, como a adaptação da tela às lentes do cartão. Ele também se comunica com o giroscópio do seu telefone para rastrear os movimentos da cabeça. Quando você vira a cabeça, a câmera e o que você vê também giram dentro do player de vídeo 360º. Agora você pode olhar em todas as direções quando o vídeo está ligado e a tela está dividida em duas, para acomodar as duas lentes do Cardboard.

Etapa 6: Executar o aplicativo no Android?

Para nossa etapa final, vamos executar o aplicativo em um telefone Android e compartilhá-lo com amigos! Existem duas maneiras de fazer isso: Volte para Arquivo> Configurações de compilação. Você pode conectar um telefone Android com um cabo USB ao computador e clicar em Build & Run. Isso instala o aplicativo diretamente no seu telefone. A outra opção é clicar em Build only. Isso não o instala em um telefone, mas gera um arquivo APK. Você pode compartilhar o APK por e-mail com qualquer pessoa que quiser experimentar a obra-prima que acabou de construir. Eles precisam tocar duas vezes no anexo do APK para instalá-lo em seus telefones. Durante o processo de construção, pode ser solicitado que você selecione a pasta raiz do Android SDK. Se for esse o caso, baixe o Android SDK e selecione o local da pasta. Abra o aplicativo, coloque seu telefone em um fone de ouvido Cardboard, está pronto para ir! Você pode substituir o vídeo por qualquer coisa no formato 360 e experimentar a imersão VR 360 em casa.

Indo além

Parabéns, você criou um aplicativo de vídeo 360 e está a um passo de criar um aplicativo de vídeo VR! Embora os termos sejam frequentemente usados da mesma forma, 360 e VR definem duas experiências diferentes: o vídeo 360 é gravado de todos os ângulos, com uma câmera especial ou uma montagem de vários. O usuário pode assistir em qualquer direção desejada, mas não há interatividade na experiência. VR geralmente se refere a um ambiente gerado por computador no qual o usuário está imerso. É uma experiência interativa: o jogador pode se movimentar e controlar objetos, além de olhar em todas as direções.

Etapa 7:

Seu novo aplicativo pode servir como um ponto de partida para construir uma experiência de RV mais rica. O Unity tem muitos recursos que você pode aproveitar, como adicionar elementos 3D ou efeitos interessantes de partículas ✨ para sobrepor e aprimorar seu vídeo ou adicionar alguns elementos interativos.

Etapa 8: Não é um script de caminhada de etapas (opcional)

Você também pode colocar um ambiente totalmente 3D dentro do player de vídeo 360 e usar o último como uma skybox. O usuário pode navegar no cenário, usando este script de caminhada bacana.