Mixed Reality Design Labs

Buscando referências no portal do Time de Design em Realidade Mista da Microsoft das 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 aqui 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 post 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, você pode conferir as ultimas versões disponíveis em https://github.com/Microsoft/MRDesignLabs_Unity/releases

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 nosso já conhecido HoloToolkit MixedRealityToolkit-Unity e possui submódulos git para o projeto https://github.com/Microsoft/MRDesignLabs_Unity_tools, logo, é necessário atualizar o repositório local com estes submodulos que contém elementos de tooling essenciais. Para baixá-los utilize os comandos:

1
2
3
4

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 apps 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 ou na wiki do mesmo você pode conferir toda a documentação disponível para sair utilizando 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 Event System que um botão deve ter.
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.
Ao clicar no holograma, uma interface para rotacionar e redimensionar 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 camera, audio 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 audio para eventos de click, hold, release e etc.

Deixei o botão localizado a 2 metros da camera, e 30 centímetros a 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 camera.

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.

Eu 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 extender:

OnFocusEnter
OnFocusExit
OnNavigationStarted
OnNavigationUpdated
OnNavigationCompleted
OnNavigationCanceled
OnTapped
OnDoubleTapped
OnHoldStarted
OnHoldCompleted
OnHoldCanceled
OnManipulationStarted
OnManipulationUpdated
OnManipulationCompleted
OnManipulationCanceled

Para o nosso cenário, precisamos extender 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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 em https://github.com/lazarofl/MRDL-Demo

Bônus - Exemplos de apps

Se você deseja analisar mais a fundo bons projetos, existem duas apps 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

Por enquanto é isso pessoal, até mais.