Capítulo
1
Projeto e Desenvolvimento de Aplicações de RV
Responsivas com WebVR BoilerPlate
Maria Amelia Eliseo e Luciano Silva
Laboratório de Processamento Gráfico e Mídias Digitais
Faculdade de Computação e Informática, Universidade Mackenzie
Abstract
Responsive design and development correspond to a set of techniques that allow applications to automatically adapt to different devices, especially visualization tasks such as resizing and scrolling. With the proliferation of numerous visualization in Virtual Relity (VR), for instance 3D glasses, the responsive design and development become a necessity to meet the various requirements of these devices. Within this context, this chapter presents the basis for design and development of RV responsive applications. In addition, as a practical motivation, it is also presented the complete development of a responsive application using the frameworks Three.js and WebVR Boilerplate for eyeglass RV Rift and Cardboard.
Keywords: Responsive Virtual Reality, Oculus Rift, Cardboard, Responsive Design, Responsive
Development.
Resumo
Projeto e desenvolvimento responsivos correspondem a um conjunto de técnicas que permitem que aplicações possam se adaptar automaticamente a diferentes dispositivos, principalmente em tarefas típicas de visualização como redimensionamento e scrolling. Com a proliferação de inúmeros dispositivos de visualização para sistemas de Realidade Virtual (RV) como, por exemplo, óculos 3D, o projeto e desenvolvimento responsivos tornaram-se uma necessidade atender aos diversos requisitos destes dispositivos. Dentro deste contexto, este capítulo apresenta as bases de projeto e desenvolvimento de aplicações de RV responsivas. Além disto, como motivação prática, apresenta o desenvolvimento completo de uma aplicação responsiva com frameworks Three.js e WebVR Boilerplate para os óculos de RV Rift e Google Cardboard.
Palavras-chave: Realidade Virtual Responsiva, Oculus Rift, Google Cardboard, Projeto
1.1 Introdução
Com proliferação de inúmeros dispositivos de visualização para sistemas de Realidade Virtual (RV) como, por exemplo, Oculus Rift, Google Cardboard, Samsung GearVR, surgem novas alternativas para a experiência do usuário. Além disso, os dispositivos móveis também se tornaram aliados dos sistemas de RV ao oferecer interação com giroscópio, abrindo outras possibilidades de interação. Diante deste cenário, o projeto e desenvolvimento de sistemas responsivos tornaram-se uma necessidade para atender aos diversos requisitos destes dispositivos.
Os sistemas responsivos são elaborados para serem adaptados e reproduzidos nestes vários dispositivos respeitando as suas particularidades e especificidades e mantendo a mesma experiência em todos eles. O desenvolvimento deve observar vários quesitos, como os aspectos técnicos e as características de visualização e interação de cada dispositivo, a seleção do conteúdo a ser disponibilizado nos diferentes dispositivos, a forma como o usuário percebe o mundo virtual e interage com ele, a navegação, que varia conforme o ambiente mobile ou desktop.
Dentro deste contexto, este capítulo apresenta as bases de projeto e desenvolvimento de aplicações de RV responsivas. Mostra os desafios no tratamento do conteúdo de forma a se adaptar aos diferentes dispositivos. Além disto, como motivação prática, apresenta o desenvolvimento completo de uma aplicação responsiva com frameworks Three.js e WebVR Boilerplate para os óculos de RV Rift e Google Cardboard.
Este capítulo está dividido da seguinte forma: a seção 1.2 apresenta conceitos e exemplos de interfaces responsivas em RV; a seção 1.3 mostra exemplos de sistemas RV baseados em web, bem como apresenta alguns frameworks de desenvolvimento; a seção 1.4 apresenta o framework WebVR Boilerplate, concebido para o desenvolvimento de sistemas RV responsivos e mostra exemplos de aplicação; por último, a seção 1.5 apresenta as considerações finais.
1.2 Interfaces Responsivas em RV
Com a variedade de dispositivos capazes de acessar aplicações de RV torna-se cada vez mais difícil a concepção de interfaces que atenda às características especiais dos diferentes recursos. Isso leva a uma mudança de paradigma no processo de criação de interfaces que consideram estas diferenças sem prejuízos para os usuários. Uma interface responsiva sugere que o projeto e desenvolvimento deve responder não apenas ao comportamento do usuário, mas também ao ambiente com base na resolução, orientação e plataforma de visualização. Com esta abordagem, esta seção mostra os conceitos e técnicas de projeto de interfaces responsivas, além de apresentar exemplos de sistemas de RV responsivos.
4.2.1 Conceito e exemplos de responsividade em interfaces
A responsividade em interfaces surge da necessidade em se criar páginas web que apresentem o mesmo conteúdo nos diferentes dispositivos, como desktop, tablets e smatphones. Nesta abordagem, a apresentação do conteúdo é flexível e se adapta a cada resolução de tela sem perdas de compreensão e legibilidade, conforme mostra a Figura 1. O termo “Responsive Web Design”, definido por Marcotte (2010), vem de “responsive architecture” (arquitetura responsiva), onde o ambiente físico responde à presença das pessoas que passam por ele. Um exemplo, é o uso de sensores de movimento que podem ser combinados com sistemas de controle climático para ajustar a temperatura e iluminação ambiente de uma sala conforme a quantidade de pessoas presentes. Embora a arquitetura responsiva remeta ao mundo físico, fica a ideia da adaptabilidade, que de forma mais abstrata está presente no desenvolvimento de uma interface responsiva.
Figura 1. Exemplo de interfaces responsivas.
Fonte: http://www.vrsfoto.com/wp-content/uploads/2014/08/Responsive-Web-Design.png.
Uma interface web responsiva responde ou se adapta a tamanhos diferentes de tela, sem ter que definir um domínio ou subdomínio específico para usuários que utilizam dispositivos móveis (Firdaus, 2015). O conteúdo do site pode ser mantido para que os usuários tenham experiências semelhantes em diferentes tamanhos de dispositivos, eliminando a necessidade de se elaborar novas interfaces para cada um deles. Embora existam algumas técnicas de projeto, seu desenvolvimento, basicamente, leva em consideração uma mistura de grids e layouts flexíveis, imagens adaptáveis e uso inteligente de CSS (Cascading Style Sheets) para formatação das páginas.
4.2.2 Técnicas de projeto de interfaces responsivas
O projeto de interfaces responsivas não trata apenas a adaptação do conteúdo às diferentes resoluções de tela e imagens automaticamente redimensionáveis, mas envolve uma nova forma de pensar a interface (Knight, 2011). Além dos diferentes tamanhos de tela, os dispositivos ainda podem alternar sua orientação de visualização entre e retrato, conforme se observa na Figura 2.
Figura 2. Modos de visualização retrato (portrait) e paisagem (landscape).
Fonte: Knight (2011)
Quando a interface se adapta para diferentes dispositivos, a navegação e a arquitetura da informação devem ser pensadas para cada situação. Não são apenas os diferentes tamanhos de tela que são levados em consideração, mas a forma como os usuários utilizam e navegam através do conteúdo, que varia conforme o dispositivo utilizado. Um usuário que entra num website através de seu dispositivo móvel, navega de uma forma diferente comparado a um desktop. No primeiro caso, não há um mouse para a interação e o conteúdo deve ser entregue de forma mais objetiva e consequentemente, mais rápida. Neste caso, o usuário não tem tempo para visualizar muitos vídeos ou conteúdos detalhados. Por isso, os elementos e funcionalidades que aparecem na tela variam a cada resolução, sendo pensados cuidadosamente na fase de projeto para cada tamanho de tela.
A imagens presentes na tela também devem se adaptar. Nem sempre reduzi-las é a melhor solução. É preciso considerar seu conteúdo e dependendo do caso, pode, inclusive, ser substituída.
Outro fator a ser pensado é o carregamento da página, que pode ser progressivo, ou seja, carrega apenas os módulos essenciais para o dispositivo no qual o usuário está navegando. Neste caso, as requisições de carregamento dependem da resolução do tela.
Em termos práticos, uma interface responsiva leva em consideração dois componentes: media queries e breakpoints. Media Queries são um tipo de regra CSS que limita o escopo de um estilo baseado em fatores definidos pela query. Cada media query especifica um tipo de mídia e um conjunto de expressões que são checadas pelo navegador. O tipo de mídia define um screen para telas
digitais, um print para páginas impressas ou all para todos os tipos de mídia. As expressões são mais detalhadas e incluem instruções como max-width e
orientation, para definir uma largura máxima e a orientação, respectivamente
(Carver, 2014). A Figura 3 mostra um exemplo de código CSS que utiliza uma media query. Este código declara o tipo de mídia como screen com largura máxima de 768px, ideal para tablets no formato retrato.
Figura 3. Exemplo de código CSS que utiliza media query. @media inicializa a media
query que declara o tipo de mídia como screen com largura máxima de 768px.
Breakpoints são as larguras da tela em pixels. Identificam limites para que
a alteração do layout se adapte às necessidades de cada contexto. Pode-se utilizar medidas padrão para representar as variações de cada dispositivo, otimizando o desenvolvimento da interface. A Figura 4 ilustra diferentes breakpoints numa página web para representar as larguras de cada dispositivo ao qual esta página poderá ser acessada.
Figura 4. Representações de breakpoints aplicados numa página web. As diferentes
larguras dos breakpoints representam cada dispositivo. Fonte: Carver (2014)
Para facilitar a implementação de interfaces web responsivas o uso de
frameworks pode ser uma opção. Ajudam a reduzir o tempo de implementação,
pois já trazem estilos e regras predefinidos para larguras do conteúdo, botões de interação, estilos de fonte, etc. Geralmente, possuem uma comunidade ativa que estende as funcionalidades do framework. Assegura a compatibilidade de exibição nos diferentes navegadores (Firdaus, 2015). Há várias opções de
frameworks para desenvolvimento de interfaces web responsivas, sendo os mais
utilizados o Skeleton (http://www.getskeleton.com/), Bootstrap
(http://twitter.github.com/bootstrap/) e Foundation (http://foundation.zurb.com). A diferença entre cada um deles está nas funcionalidades oferecidas. Em linhas gerais, o Skeleton oferece um conteúdo baseado em grid, o Bootstrap e o Foundation trazem outros recursos de formatação além da responsividade.
4.2.3 Responsividade em Sistemas de RV
Com a melhoria da performance dos diversos dispositivos, da transmissão de dados via Internet e dos recursos oferecidos pelos navegadores, os sistemas de RV vem cada vez mais ganhando espaço na web. Da mesma forma que há uma preocupação no desenvolvimento de páginas web flexíveis, a responsividade em sistemas de RV leva em consideração mais um agravante além das diferentes resoluções de tela: os diversos dispositivos de interação e visualização como os óculos 3D e os HMDs (Head Mounted Display). Se um sistema de RV é também web, a experiência do usuário não deve ficar limitada ao uso de um dispositivo específico de visualização ou interação.
A responsividade está na elaboração de um único sistema de RV que pode ser reproduzido em vários dispositivos como desktop sem hardware específico para RV ou com uso de Oculus Rift, ou smartphones dentro Google Cardboard ou Samsung GearVR mantendo a mesma experiência em todos eles. Cada dispositivo tem características e particularidades próprias, por isso, o desenvolvimento de um sistema de RV responsivo deve respeitar e responder a cada uma delas. Ainda, no caso da execução em um desktop sem equipamentos de RV, é necessário emular o rastreamento da cabeça do usuário, sem que ele esteja utilizando um dispositivo de visualização. Em smartphones, pode-se utilizar o giroscópio para uma experiência mais imersiva. No desktop pode-se utilizar o mouse ou teclado para a interação. (Smus, 2015). A Figura 5 mostra um usuário interagindo com um sistema de RV através de seu smartphone, usando o Samsung GearVR.
Figura 5. Usuário interagindo com um sistema de RV através do smartphone com o
4.2.4 Projeto de Sistemas de RV Responsivos
O projeto de Sistemas de RV responsivos são baseadas em HTML e JavaScript e possuem o desafio de funcionar tanto com Oculus Rift quanto Google Cardboard ou Samsung GearVR, bem como sem dispositivo de VR num desktop, ou utilizando o giroscópio de um dispositivo móvel. O desenvolvimento de tais sistemas ainda está bastante incipiente e cheio de desafios, os quais serão discutidos nesta subseção.
Um sistema de RV envolve a construção de cenas 3D, áudio, navegação e interação. Para um sistema responsivo as cenas 3D integradas com recursos de áudio precisam ser visualizadas adequadamente em cada tipo de dispositivo, mantendo a experiência do usuário. Nem sempre todos os elementos de uma mesma cena exibida num desktop, deverão compor a cena exibida num smartphone, sendo, para isso, necessário um projeto que determine o que será apresentado considerando características inerentes de interação e visualização em cada situação na qual o sistema deverá se adaptar.
Outro desafio é manter uma navegação que funcione adequadamente em dispositivos muito diferentes. Um desktop utiliza um mouse. Já o smartphone tem um giroscópio que permite aos usuários inclinar a tela para explorar os mundos virtuais. E ainda há smartphones equipados com Cardboard ou Samsung GearVR, além do Oculus Rift utilizado num desktop, que proporcionam uma experiência mais imersiva ao gerar imagens estereoscópicas, ou seja, gera duas imagens uma para cada olho com o objetivo de criar a profundidade em visualizações tridimensionais.
Além da configuração de cada cena, a posição da câmera também deve ser alterada conforme a orientação ou a direção do olhar do usuário. Isso varia conforme o dispositivo utilizado (Paracuellos, 2015). A Figura 6 mostra os diferentes pontos de vista (FOV – Field of View) e as diferentes configurações que foram adaptados num sistema de RV responsivo para se adequar a cada dispositivo.
Figura 6. Cena de Inspirit, um sistema de RV responsivo com as diferentes
configurações para adaptação a cada dispositivo. Fonte: Paracuellos (2015)
Por se tratar de um ambiente tridimensional imersivo que cria a ilusão de realidade, muitas vezes um sistema de RV pode provocar tontura ou mal-estar nos usuários, principalmente quando os elementos das cenas se movem muito rápido ou as modificações do ponto de vista da câmera são realizadas automaticamente, sem a ação do usuário. Como os usuários são agentes no sistema, para uma concepção eficiente é preciso compreender a percepção humana e as formas de interação para que situações como estas sejam evitadas, principalmente nos dispositivos que emulam a imersão.
Pode-se perceber que são muitos os desafios para o projeto de sistemas de RV responsivos, que envolve desde aspectos técnicos de cada dispositivo para o qual o sistema irá se adaptar, até a observação do conteúdo, considerando as ações humanas e sua adaptação para cada realidade. Além disso, deve-se considerar que a interação e navegação do usuário no ambiente virtual depende dos diferentes dispositivos utilizados.
1.3 Sistemas de RV baseados em WEB
Com o suporte do WebGL para renderização de conteúdos 3D nos navegadores web, aliado à popularidade de óculos como o Rift e o Google Cardboard, os sistemas de RV baseados em Web estão ganhando cada vez mais espaço. Tratam-se de sistemas que pretendem fazer com que o usuário Tratam-se sinta “dentro” da experiência, provocando a sensação de imersão através dos recursos web. Na maioria das vezes, os dispositivos de interação e visualização são os responsáveis por esta sensação de imersão. Atualmente, para realizar uma experiência imersiva em sistemas de RV baseados em web utiliza-se desktop com óculos Rift ou smartphones equipados com Google Cardboard ou Samsung GearVR, que tiram partido da estereoscopia para criar uma visualização 3D das cenas. Neste sentido, esta seção mostra o desenvolvimento de projetos de sistemas de RV baseados em web, os frameworks disponíveis para tal finalidade, além de estudos de caso.
Desde os primórdios da web, a criação de ambientes virtuais 3D foi possível através de linguagens com VRML (Virtual Reality Markup Language), que originou a X3D (eXtensible 3D). Esta última pode se tornar um padrão para desenvolvimento 3D na HTML 5 juntamente com a linguagem JavaScript. Com estes recursos, foram desenvolvidos APIs (Application Programming Interface) e frameworks para o desenvolvimento de sistemas de RV baseados em Web, que serão apresentados nesta seção.
1.3.1 Frameworks para Desenvolvimento RV sob Web
Para otimizar o desenvolvimento de sistemas RV baseados em web, existem frameworks capazes de descrever mundos 3D com suporte à plataforma web. Dentre eles, citam-se o X3DOM, A-Frame e o WebVR Boilerplate.
O framework X3DOM, escrito em JavaScript, faz a inclusão de elementos X3D como parte da árvore DOM (Document Object Model) da HTML5. Permite manipular o conteúdo 3D adicionando, alterando ou removendo os elementos
DOM HTML, dispensando o uso de plug-ins externos para visualizar o conteúdo 3D a partir de um navegador web, graças ao suporte do WebGL (Behr et al., 2009). Um exemplo de aplicação desenvolvida em X3DOM é a reconstrução digital tridimensional do Edifício Mackenzie, concebida de forma que o usuário realize um passeio espaço-temporal, percorrendo o interior do edifício num determinado período no tempo, de forma que o sistema conte a história do edifício (Eliseo et al.,2015).
O A-Frame é um framework desenvolvido por MozVR para a criação de objetos 3D e experiências de RV na web. Assim como X3DOM, também se aproveita da árvore DOM HTML para a inclusão dos elementos HTML personalizados e sustentados por three.js. Permite criar cenas para ambientes
mobile, desktop e Oculus Rift usando código HTML. (A-Frame, 2016).
WebVR Boilerplate é um framework desenvolvido por Smus (2015), baseado em three.js para criação de sistemas de RV responsivos. Possui controladores para adaptação do conteúdo nos diferentes dispositivos de RV, além dos ambientes desktop e mobile. Este framework é mostrado em detalhes mais adiante.
1.3.2 Estudo de Caso I: Óculos Rift com apps Web
Um exemplo de aplicação com Oculus Rift é a visita virtual 3D do Museu Santa Maria dela Scala em Siena na Itália, apresentado por Fineschi e Pozzebon (2015). Trata-se de um antigo hospital que virou museu para abrigar várias coleções arqueológicas e históricas. A visita virtual permite aos usuários se moverem livremente através das salas de exposição de forma imersiva, através do Oculus Rift. O processo de criação da visita virtual 3D foi estruturado em três fases:
• captura de imagem, onde foram coletados um conjunto de imagens dos ambientes para ser virtualizado;
• elaboração de imagem, onde as imagens coletadas foram combinadas para criar panoramas 3D com 360 graus (os "estágios");
• criação do caminho de visita 3D, onde os panoramas foram combinados e organizados para criar um caminho interativo de visita através do museu (o "mapa").
Para criar a estereoscopia, a captura das imagens foi feita com duas câmeras dispostas lado a lado, simulando o olha humano. Assim, foram geradas duas imagens, uma para cada olho. Os panoramas 3D foram construídos a partir da fusão das imagens capturadas no museu. O desafio foi combinar as imagens da esquerda e direita (tiradas, respectivamente, com a câmera esquerda e direita) e acertar as diferenças de luzes, sombras e angulação.
A Figura 7 mostra o resultado final do panorama 3D de uma das salas do museu.
Figura 7. Panorama 3D de uma das salas do Museu Santa Maria dela Scala.
Fonte: Fineschi e Pozzebon (2015)
Os panoramas forma organizados de forma a permitir a navegação dos usuários através das salas usando o Oculus Rift. A aplicação foi desenvolvida usando Unity3D, um software para a gestão e criação de ambientes 3D, com suporte ao Oculus. Com o Unity3D foram construídas duas esferas para cada estágio, onde os panoramas foram anexados como texturas internas (com algumas pequenas medidas).
Para o deslocamento do usuário entre as salas, um ponto vermelho foi adicionado para mostrar a ele como alcançar as outras salas. Este ponto vermelho pode ser ativado e desativado a qualquer momento. As esferas foram sobrepostas dando a impressão de existir apenas duas delas. Foi desenvolvido um script para gerenciar estas esferas de forma que, quando o usuário entrar em um novo ambiente, o anterior (e as esferas correspondentes) é desativado e o novo é então selecionado.
1.3.3 Estudo de Caso II: Google Cardboard com apps Web
Um exemplo de sistema RV baseado em web com Google Cardboard é o app da visita guiada pela Catedral de St. Andrews, localizada na Escócia e apresentada por Fabola, Miller e Fawcett (2015). O app utiliza mídia tradicional, como áudio, imagens, panoramas, vídeo 3D e vídeo 360° para o usuário experimentar um passeio virtual pela catedral escocesa através de um smartphone equipado com Google Cardboard. Para uma experiência imersiva, foram incorporadas imagens estereoscópicas.
A elaboração do sistema contou com a seleção de dez locais ao redor e no interior da catedral para orientar o passeio do usuário. Cada local foi representado com imagens estereoscópicas 360° e panoramas. Os panoramas estão interligados para formar um tour virtual pela Catedral. Para enriquecer o sistema, cada panorama está associado a narrativas de áudio, que contém informações sobre o local. Além das imagens, vídeos do modelo 3D da Catedral também estão presentes no sistema. Existem dois tipos de vídeos: vídeos que fornecem uma ilusão de profundidade com interação limitada (pause e play) e
vídeos que proporcionam uma experiência imersiva com vista panorâmica de 360°.
A interação com o app aproveita recursos de head-tracking através do giroscópio, implementados por meio de um seletor situado na frente da câmera, sempre na visão do usuário. Assim, a interação se dá conforme a direção do seu olhar. Uma outra forma de interação foi feita através do modo baseado em localização, que utiliza o recurso de GPS do dispositivo móvel. Neste modo, o sistema busca as coordenadas latitude/longitude do dispositivo do usuário e os compara com os valores dos diferentes locais presentes no sistema, disparando um efeito de navegação quando o usuário estiver no alcance de um local.
Para a implementação do sistema, os panoramas, que usaram uma abordagem cúbida para sua representação (a partir de seis imagens na proporção de 1:1 mapeadas para cada um dos lados de um cubo, onde o usuário se posiciona no centro) foram desenvolvidos através do three.js. A estereoscopia foi incorporada à visualização do panorama, fornecendo duas vistas dispostas lado-a-lado (um para cada olho), conforme mostra a Figura 8. Através da propriedade CSS 3D transform foi produzido um deslocamento nas imagens para simular a distância interpupilar, ou seja, a distância entre o centro dos dois olhos.
Figura 8. Menu para iniciar o passeio virtual para Catedral de St. Andrews.
Fonte: Fabola, Miller e Fawcett (2015)
Após o desenvolvimento do sistema escrito em HTML5, JavaScript e CSS, foi utilizado o framework PhoneGap para compilar o código baseado em web em código nativo para plataformas mobile, como Android, iOS, Windows Mobile, etc.
1.4 Framework WebVR Boilerplate
O framework WebVR Boilerplate (Smus, 2015) permite construir aplicações responsivas de RV, tendo como suporte o ambiente Web. A responsividade vem do fato deste framework implementar a especificação WebVR (Vukicevic et al., 2016).
A WebVR especifica uma interface chamada VRDisplay, que deve ser implementada por cada dispositivo que queira expor as suas capacidades de visualização e interação. A Figura 9 exibe parte da definição desta interface:
Figura 9. Interface VRDisplay, que permite a declaração de capacidades de visualização e
interação de cada dispositivo.
Fonte: Vukicevic et al. (2016).
Assim, a primeira parte do framework WebVR Boilerplate é implementar esta interface. Isto é feito para cada dispositivo que queira seguir o padrão WebVR. A WebVR-PolyFill (Smus, 2016), por exemplo, disponibiliza uma implementação responsiva da WebVR para:
§ o dispositivo Google Cardboard (através da classe
CardboardHMDDevice)
§ para dispositivos móveis (através da classe
GyroPositionSensorVRDevice)
§ para PCs em geral (através da classe
MouseKeyboardPositionSensorVRDevice)
Quando a aplicação é carregada, o dispositivo (Cardboard, dispositivo móvel ou PC) é detectado e sua configuração é carregada, expondo as capacidades de visualização e interação do dispositivo.
A Figura 10 mostra um exemplo de parte desta configuração para uma aplicação sendo executada em um dispositivo do tipo PC:
Figura 10. Exemplo de configuração detectada pela WebVR-Polyfill.
Fonte: Smus (2016).
Como exemplo de aplicação, será considerada a interface mostrada na Figura 11, que exibe uma série de cubos texturizados e onde se pode alterar o ponto de visão, através de processos de rotação:
Figura 11. Ambiente virtual composto de cubos texturizados, com alteração de ponto de visão e
processos de rotação.
A população da cena em 3D é feita, normalmente, via framework Threnodes.js. O acesso às funcionalidades da WebVR é feita dentro do marcador <script> da Linguagem HTML. A Figura 12 mostra a parte específica da WebVR dentro deste marcador:
Figura 12. Detecção dos dispositivos suportados pelo navegador e escolha do primeiro.
Fonte: Smus (2016).
Neste trecho de código, foram detectados todos os displays (dispositivos) suportados pelo navegador. Com a atribuição vrDisplay=displays[0], foram carregadas todas as configurações do primeiro dispositivo e, a tela de exibição, ajusta-se conforme as especificações do dispositivo, permitindo uma visualização responsiva.
1.5 Considerações Finais
Este capítulo apresentou as bases para implementação de aplicações de RV responsivas com WebRV Boilerplate. Mostrou as novas formas de pensar o projeto e os desafios de desenvolvimento de tais sistemas, que envolve a adaptação do conteúdo de RV para interação tanto em dispositivos móveis equipados com ou não com Google Cardboard ou Samsung GearVR, ambientes desktop com uso ou não de Oculus Rift. Além de controladores para a adaptação nos diversos ambientes, o sistema de RV responsivo deve considerar os aspectos da percepção humana para decidir formas de apresentação do conteúdo. A interação e navegação também deve ser pensada conforme a experiência que cada dispositivo oferece.
A criação de sistemas de RV responsivos contribui para que os usuários possam realizar experiências de RV independente do dispositivo, gerando novas
possibilidades de interagir com o conteúdo. Diversas áreas do conhecimento, como educação, entretenimento, patrimônio cultural, dentre outras, podem aproveitar desses benefícios para proporcionar uma melhor experiência e facilitar a comunicação com seu público.
Referências Bibliográficas
A-Frame. (2016) Overview. Disponível em: https://aframe.io/docs/guide/. Acesso em: 13/05/2016.
Behr, J., Eschler, P., Jung, Y. e Zöllner, M. X3DOM – A DOM-based HTML5/ X3D
Integration Model, In: 14th International Conference on 3D Web Technology,
Darmstadt. Proceedings… New York: ACM, 2009, pp.127-135.
Carver, M. The Responsive Web. New York: Manning Publications, 2014.
Chan, M. Virtual Reality: Representations in Contemporary Media. New York: Bloomsbury Academic, 2015.
Clifton, I. G. Android Interface Design. 2.ed. New York: Addison-Wesley, 2015. Eliseo, M. A., Falavigna, L. H., Delmondes, D. S. A., Garcia, J. H. Uma Experiência
Espaço-temporal num Edifício Arquitetônico através da Realidade Misturada.
In: Tendências e Técnicas em Realidade Virtual e Aumentada, v. 5, 2015, p.87-101. Fabola, A. Miller, A. e Fawcett, R. (2015) Exploring the Past with Google
Cardboard. IEEE Digital Heritage, v. 1, p. 277-224.
Fineschi, A. e Pozzebon, A. A 3D virtual tour of the Santa Maria della Scala
Museum Complex in Siena, Italy, based on the use of Oculus Rift HMD. In:
International Conference on 3D Imaging (IC3D), Liege, 2015, p. 1-5.
Firdaus, T. Responsive Web Design by Example.2.ed. New York: Packt Publishing, 2015.
Jerald, J. The VR Book: Human-Centered Design for Virtual Reality. New York: Morgan & Claypool Publishers, 2015.
Knight, K. (2011) Responsive Web Design: What It Is and How to Use It. Disponível em: https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/. Acesso em: 06/05/2016.
Marcotte, E. (2010) Responsive Web Design. Disponível em: http://alistapart.com/article/responsive-web-design. Acesso em: 09/05/2016.
Paracuellos, A. (2015) Case Study: INSPIRIT - How to make an interactive VR story for everyone. Disponível em: http://unboring.net/cases/inspirit.html. Acesso em: 10/05/2016.
Ruiz, D.C., Goransson, A. Professional Android Wearables. New York: Wrox, 2015. Smus, B. (2016) WebVR-Polyfill. Disponível em:
https://github.com/borismus/webvr-polyfill. Acesso em: 22/04/2016.
Smus, B. (2015) Responsive WebVR. Disponível em: http://smus.com/responsive-vr/. Acesso em: 11/04/2016.
Vukicevic, V., Jones, B., Gilbert, K., Wiemeersch, C.V. WebVR. Disponível em: https://mozvr.com/webvr-spec/. Acesso em: 11/04/2016.
