Buscando referências no portal do Time de Design em Realidade Mista, da Microsoft nas quais eu pudesse me basear para padronizar diversos comportamentos, interações e até mesmo acelerar o desenvolvimento de apps holográficas em alguns projetos que estão iniciando na Lambda3, me deparei com o Mixed Reality Design Labs, ou apenas MRDL, projeto que visa compartilhar exemplos, ideias e aprendizados deste time, demonstrando como criar ou reutilizar controles e padrões visuais para os seus aplicativos holográficos.
Neste artigo, falo brevemente sobre o projeto e como você pode criar excelentes experiências de apps para Hololens com um esforço menor e maior padronização da experiência de uso.
O projeto
Todo o projeto é open source, sugestões de melhorias e report de bugs são discutidos abertamente e de forma bem proativa no repositório, que vai completar três meses de vida.
A versão oficial do Unity suportada pelo projeto é a Unity 2017, mas existe uma release com suporte ao Unity 5.6, onde você pode conferir as últimas versões disponíveis no GitHub da Microsoft.
Utilizando o projeto
Para utilizar o projeto, faça um fork para a sua conta no Github e clone o repositório.
O MRDL utiliza o projeto HoloToolkit MixedRealityToolkit-Unity – anteriormente conhecido como HoloToolkit, e possui sub módulos git para o projeto, logo, é necessário atualizar o repositório local com estes sub módulos que contém elementos de tooling essenciais. Para baixá-los, utilize os comandos:
cd MRDesignLabs_Unity git submodule init git submodule update git submodule foreach git pull origin master
Abra o projeto pelo Unity e crie uma versão do pacote através do menu Assets > Export Package.
Assim, ao criar um novo projeto, basta importar a asset com a versão desejada do MRDL.
Prefabs e exemplos disponíveis
Os prefabs disponíveis foram criados para disponibilizar as ações mais comuns dentro de aplicações holográficas, como:
- Menus e Toolbars
- Botões interativos
- Barras de progresso
- Caixas de diálogo
- Suporte para alterar a escala e a rotação dos objetos
Existem também prefabs como o Object Collection que adicionam capacidades de modificação da visualização de objetos em diferentes tipos de agrupamento 3D.
Na página inicial do projeto e na wiki, você pode conferir toda a documentação disponível para utilizar estes prefabs.
App Bar e Bounding Box
Alguns dos componentes mais simples e úteis do MRDL são as App Bars e os Bounding Boxes. App Bars são prefabs que criam botões de interação na interface, com todo o sistema de eventos que um botão deve conter. Bounding Boxes são scripts que adicionam a capacidade de alterarmos a escala e rotação de objetos, além de dar suporte a drag and drop.
Vamos criar uma aplicação para utilizar o Bounding Box e conhecer um pouco do sistema de eventos.
Nossa aplicação terá uma interface contendo:
- 1 botão
- 1 holograma com opções de alteração de escala, rotação e também o suporte a drag and drop.
Ao clicar no botão, o holograma será exibido. Enquanto ao clicar no holograma, uma interface para rotacionar e redimensionar o objeto serão exibidas.
Essa é a ideia, agora, vamos a prática.
- Crie um novo projeto e importe a asset do MRDL
- Remova todos os elementos padrões e adicione o prefab Hololens, localizado em MRDesignLab > HUX > Prefabs > Interface.
Este prefab contém as configurações de câmera, áudio e todo o event system suportado pelos scripts e prefabs do MRDL. Se preferir, você também pode adicionar este prefab pelo menu, através dos itens de menu HUX > Interface > Hololens.
Botões
Iremos utilizar um dos prefabs de botões do MRDL, neste caso, eu adicionei o CircleButton, localizado em MRDesignLab > HUX > Prefabs > Buttons, ou através do menu HUX > Buttons > Add Compound Button (Circle).
Os botões disponibilizados pelo MRDL já possuem seletores para ícones, cores para mudança de estado e áudio para eventos de click, hold, release, entre outros. Deixei o botão localizado a 2 metros da câmera, e 30 centímetros à esquerda.
Modelo 3D
- Crie um GameObject para que possamos adicionar o holograma e renomeie-o para Objetos;
- Configure-o para ficar a 2 metros da câmera;
- Importe um modelo 3d de sua preferência para dentro do elemento Objetos;
- Eu utilizei o modelo 3d de um barril de metal obtido na Unity Asset Store, este modelo é gratuito, possui boa textura e esta bem otimizado;
- Renomeei o modelo para Barril e alterei a rotação para 130′ em X, desta forma o logotipo de material tóxico será exibido de frente para a camera.
Sua cena ficará com a seguinte configuração:
Bounding Boxes
Bounding Boxes são mecanismos que descrevem a área de um objeto, podendo permitir a sua manipulação. Iremos utilizar scripts do MRDL que adicionam dinamicamente o suporte a Bounding Box ao barril de metal em nosso projeto..
- Adicione o script Bounding Box Target ao elemento Objetos;
- Este script possui uma dependência explícita com o script Compound Button, logo, ele também será adicionado ao elemento;
- Configure o Bounding Box Target para permitir as operações desejadas;
- Eu selecionei todas as opções de rotação e também o suporte a drag and drop e alteração de escala uniforme.
Exibindo os objetos após o clique no botão
Ao rodar o projeto no estado atual o objeto 3D já terá suporte ao Bounding Box, basta clicar sobre o barril para que as opções sejam exibidas, mas ainda precisamos conhecer o sistema de eventos do MRDL, que estão vinculados aos Interactable Objects. Para isso, vamos desabilitar o elemento Objetos e exibí-lo somente após o clique no botão.
- Crie um novo GameObject e renomeie para Receivers, iremos concentrar todos os scripts que efetuam ações dentro desse GameObject.
InteractionReceiver
InteractionReceiver é uma classe abstrata do MRDL que possui a implementação básica de diversos eventos, algo muito parecido com as interfaces que utilizamos no MixedRealityToolkit-Unity.
Alguns métodos que podemos estender:
OnFocusEnter OnFocusExit OnNavigationStarted OnNavigationUpdated OnNavigationCompleted OnNavigationCanceled OnTapped OnDoubleTapped OnHoldStarted OnHoldCompleted OnHoldCanceled OnManipulationStarted OnManipulationUpdated OnManipulationCompleted OnManipulationCanceled
Para o nosso cenário, precisamos estender o método OnTapped, que manipula o click no botão, para isso iremos criar um script que irá simplesmente habilitar ou desabilitar objetos.
- Crie um script dentro do elemento Receivers com o nome de ToggleReceiver.
using HUX.Interaction; using HUX.Receivers; using UnityEngine; public class ToggleReceiver : InteractionReceiver { private bool _toggled; protected override void OnTapped(GameObject obj, InteractionManager.InteractionEventArgs eventArgs) { _toggled = !_toggled; for (int i = 0; i < Targets.Count; i++) Targets[i].SetActive(_toggled); } }
Ao voltar ao Unity, podemos associar elementos que irão gerar e receber as interações, no MRDL eles são chamados de Interactibles e Targets, respectivamente.
- Associe o elemento CircleButton ao primeiro Interactible e em seguida associe o elemento Objetos ao primeiro Target. Basta arrastar os objetos a partir do painel Hierarchy.
Resultado
O código fonte deste projeto está disponível no meu GitHub.
Bônus – exemplos de apps
Se você deseja analisar mais a fundo bons projetos, existem duas aplicações com código fonte disponível em repositórios separados e que fazem uso de componentes reaproveitados do MRDL. Estes exemplos foram desenvolvidos pelo time do MRDL.
Os projetos atuais são:
- https://github.com/Microsoft/MRDesignLabs_Unity_PeriodicTable
- https://github.com/Microsoft/MRDesignLabs_Unity_LunarModule
***
Este artigo foi produzido em parceria com a Lambda3. Leia outros conteúdos no blog da empresa: blog.lambda3.com.br