Manipulação direta com as mãosDirect manipulation with hands

Botão

A manipulação direta é um modelo de entrada que envolve tocar hologramas diretamente com suas mãos.Direct manipulation is an input model that involves touching holograms directly with your hands. A ideia por trás desse conceito é que os objetos se comportem exatamente como no mundo real.The idea behind this concept is that objects behave just as they would in the real world. Os botões podem ser ativados simplesmente pressionando-os, os objetos podem ser pegados e o conteúdo 2D se comporta como uma tela de toque virtual.Buttons can be activated simply by pressing them, objects can be picked up by grabbing them, and 2D content behaves like a virtual touchscreen. A manipulação direta é baseada em funcionalidade, o que significa que é amigável ao usuário.Direct manipulation is affordance-based, meaning it's user-friendly. Não há nenhum gesto simbólico para ensinar aos usuários.There are no symbolic gestures to teach users. Todas as interações são criadas em torno de um elemento visual que você pode tocar ou pegar.All interactions are built around a visual element that you can touch or grab. Ela é considerada um modelo de entrada "próximo", ou seja, é mais adequado para interagir com o conteúdo que está no alcance dos braços.It's considered a "near" input model in that it's best used for interacting with content within arms reach.

Suporte a dispositivosDevice support

Modelo de entradaInput model HoloLens (1ª geração)HoloLens (1st gen) HoloLens 2HoloLens 2 Headsets imersivosImmersive headsets
Manipulação direta com as mãosDirect manipulation with hands ❌ Sem suporte❌ Not supported ✔️ Recomendado✔️ Recommended ➕ Com suporte.➕ Supported. Para a interface do usuário, recomendamos apontar e confirmar com as mãos.For UI, we recommend point and commit with hands instead.

A manipulação direta é um modelo de entrada primário no HoloLens 2, que usa o novo sistema articulado de acompanhamento com as mãos.Direct manipulation is a primary input model on HoloLens 2, which uses the new articulated hand-tracking system. O modelo de entrada também está disponível nos headsets imersivos com o uso de controladores de movimentos, mas não é recomendado como o principal meio de interação além da manipulação de objetos.The input model is also available on immersive headsets by using motion controllers, but isn't recommended as a primary means of interaction outside of object manipulation. A manipulação direta não está disponível no HoloLens (1ª geração).Direct manipulation isn't available on HoloLens (1st gen).



Ponta do dedo colidenteCollidable fingertip

No HoloLens 2, as mãos do usuário são reconhecidas e interpretadas como modelos estruturais esquerdo e direito.On HoloLens 2, the user's hands are recognized and interpreted as left and right-hand skeletal models. Para implementar a ideia de tocar hologramas diretamente com mãos, idealmente, cinco colisores podem ser anexados às pontas dos cinco dedos de cada modelo estrutural de mão.To implement the idea of touching holograms directly with hands, ideally, five colliders could be attached to the five fingertips of each hand skeletal model. No entanto, devido à falta de retorno tátil, dez pontas de dedo colidentes podem causar colisões inesperadas e imprevisíveis com os hologramas.However, because of the lack of tactile feedback, 10 collidable fingertips can cause unexpected and unpredictable collisions with holograms.

Sugerimos colocar apenas um colisor em cada dedo indicador.We suggest only putting a collider on each index finger. As pontas de dedo indicador colidentes ainda podem servir como pontos de toque ativos para diversos gestos de toque que envolvam outros dedos.The collidable index fingertips can still serve as active touch points for diverse touch gestures involving other fingers. Os gestos de toque incluem pressionar com um dedo, tocar com um dedo, pressionar com dois dedos e pressionar com cinco dedos, conforme mostrado abaixo:Touch gestures include One-finger press, One-finger tap, Two-finger press, and Five-finger press, as shown below:

ponta do dedo colidentecollidable fingertip
Ponta do dedo colidenteCollidable fingertip

Pressionar com um dedoOne-finger press
Pressionar com um dedoOne-finger press

Tocar com um dedoOne-finger tap
Tocar com um dedoOne-finger tap

Pressionar com cinco dedosFive-finger press
Pressionar com cinco dedosFive-finger press



Colisor esféricoSphere collider

Em vez de usar uma forma genérica aleatória, sugerimos que você use um colisor esférico.Instead of using a random generic shape, we suggest you use a sphere collider. Em seguida, você pode renderizá-lo visualmente para fornecer indicações melhores para direcionamento próximo.Then you can visually render it to provide better cues for near targeting. O diâmetro da esfera deve corresponder à espessura do dedo indicador para aumentar a precisão do toque.The sphere's diameter should match the thickness of the index finger to increase touch accuracy. É mais fácil recuperar a variável de espessura do dedo chamando a API da mão.It's easier to retrieve the variable of finger thickness by calling the hand API.

Cursor de ponta do dedoFingertip cursor

Além de renderizar uma esfera colidente na ponta do dedo indicador, criamos um cursor avançado de ponta do dedo para obter uma melhor experiência de direcionamento próximo.In addition to rendering a collidable sphere on the index fingertip, we've created an advanced fingertip cursor to achieve a better near-targeting experience. É um cursor em forma de rosca anexado à ponta do dedo indicador.It's a donut-shaped cursor attached to the index fingertip. De acordo com a proximidade, ele reage dinamicamente a um alvo em relação à orientação e ao tamanho, conforme detalhado abaixo:According to proximity, it dynamically reacts to a target for orientation and size as detailed below:

  • Quando um dedo indicador se move em direção a um holograma, o cursor sempre fica paralelo à superfície do holograma e diminui gradualmente o tamanho.When an index finger moves toward a hologram, the cursor is always parallel to the hologram's surface and gradually shrinks its size.
  • Assim que o dedo toca a superfície, o cursor é reduzido a um ponto e emite um evento de toque.As soon as the finger touches the surface, the cursor shrinks into a dot and emits a touch event.

Com o retorno interativo, os usuários podem realizar tarefas de direcionamento próximo com alta precisão, como disparar um hiperlink ou pressionar um botão, conforme mostrado abaixo.With interactive feedback, users can achieve high precision near-targeting tasks, such as triggering a hyperlink or pressing a button as shown below.

Cursor de ponta do dedo distanteFingertip cursor far
Cursor de ponta do dedo distanteFingertip cursor far

Cursor de ponta do dedo próximoFingertip cursor near
Cursor de ponta do dedo próximoFingertip cursor near

Cursor de ponta do dedo com contatoFingertip cursor contact
Cursor de ponta do dedo com contatoFingertip cursor contact


Caixa delimitadora com o sombreador de proximidadeBounding box with proximity shader

O holograma em si também requer a capacidade de fornecer retorno visual e sonoro para compensar a falta do retorno tátil.The hologram itself also requires the ability to provide both visual and audio feedback to compensate the lack of tactile feedback. Para isso, criamos o conceito de uma caixa delimitadora com um sombreador de proximidade.For that, we generate the concept of a bounding box with a proximity shader. Uma caixa delimitadora é uma área volumétrica mínima que inclui um objeto 3D.A bounding box is a minimum volumetric area that encloses a 3D object. A caixa delimitadora tem um mecanismo de renderização interativo chamado de sombreador de proximidade.The bounding box has an interactive rendering mechanism called a proximity shader. O sombreador de proximidade se comporta da seguinte maneira:The proximity shader behaves:

Focalizar (distante) com comentários visuaisHover (far) with visual feedback
Focalizar (distante)Hover (far)
Quando o dedo indicador está em um intervalo, um destaque da ponta do dedo é mostrado na superfície da caixa delimitadora.When the index finger is within a range, a fingertip spotlight is cast on the surface of the bounding box.

Focalizar (próximo) com comentários visuaisHover (near) with visual feedback
Focalizar (próximo)Hover (near)
Quando a ponta do dedo se aproxima da superfície, o destaque é reduzido.When the fingertip gets closer to the surface, the spotlight shrinks.

O contato começaContact begins
O contato começaContact begins
Quando a ponta do dedo toca a superfície, toda a caixa delimitadora tem sua cor alterada ou gera efeitos visuais para refletir o estado de toque.As soon as the fingertip touches the surface, the entire bounding box changes color or generates visual effects to reflect the touch state.

O contato terminaContact ends
O contato terminaContact ends
Um efeito sonoro pode ser ativado para aprimorar o retorno visual do toque.A sound effect can also be activated to enhance the visual touch feedback.



Botão de pressãoPressable button

Com uma ponta do dedo colidente, os usuários podem interagir com um componente holográfico da interface do usuário fundamental, como o botão de pressionar.With a collidable fingertip, users are now ready to interact with a fundamental holographic UI component, such as a pressable button. Um botão de pressão é um botão holográfico adaptado para o pressionar direto do dedo.A pressable button is a holographic button tailored for a direct finger press. Novamente, devido à falta de retorno tátil, um botão de pressão ativa alguns mecanismos para lidar com os problemas relacionados ao retorno tátil.Again, because of the lack of tactile feedback, a pressable button equips a couple mechanisms to tackle tactile feedback-related issues.

  • O primeiro mecanismo é uma caixa delimitadora com um sombreador de proximidade, o qual é detalhado na seção anterior.The first mechanism is a bounding box with a proximity shader, which is detailed in the previous section. Ele fornece aos usuários uma melhor sensação de proximidade quando eles se aproximam e fazem contato com um botão.It gives users a better sense of proximity when they approach and make contact with a button.
  • O segundo mecanismo é o de liberação.The second mechanism is depression. A liberação cria uma ideia de pressionar para baixo depois da ponta de um dedo entrar em contato com um botão.Depression creates a sense of pressing down after a fingertip contacts a button. O mecanismo verifica se o botão se move intimamente com a ponta do dedo ao longo do eixo de profundidade.The mechanism ensures that the button tightly moves with the fingertip along the depth axis. O botão pode ser disparado quando atinge uma profundidade escolhida (ao ser pressionado) ou deixa a profundidade (ao ser liberado) depois de passar por ela.The button can be triggered when it reaches a chosen depth (on press) or leaves the depth (on release) after passing through it.
  • O efeito sonoro deve ser adicionado para melhorar o retorno quando o botão é disparado.The sound effect should be added to enhance feedback when the button is triggered.

botão de pressionar a distânciapressable button far
O dedo está longeFinger is far away

botão de pressionar próximopressable button near
O dedo se aproximaFinger approaches

o contato com o botão de pressionar começapressable button contact begins
O contato começaContact begins

pressionar o botão de pressionarpressable button press
PressionePress down



Interação do slate 2D2D slate interaction

Um slate 2D é um contêiner holográfico usado para hospedar o conteúdo do aplicativo 2D, assim como um navegador da Web.A 2D slate is a holographic container used to host 2D app content, such as a web browser. O conceito de design para interagir com um slate 2D por meio da manipulação direta é o mesmo que interagir com uma tela touch física.The design concept for interacting with a 2D slate via direct manipulation is the same as interacting with a physical touch screen.

Para interagir com o contato do slateTo interact with the slate contact

TocarTouch
TocarTouch
Use o dedo indicador para pressionar um botão ou hiperlink.Use an index finger to press a hyperlink or a button.

RolarScroll
RolarScroll
Use o dedo indicador para rolar um slate de conteúdo para cima e para baixo.Use an index finger to scroll a slate content up and down.

Aplicar zoomZoom
Aplicar zoomZoom
O usuário usa os dois dedos indicadores para aumentar e diminuir o zoom no conteúdo do slate, de acordo com o movimento relativo dos dedos.The user's two index fingers are used to zoom in and out of the slate content, according to the relative motion of the fingers.

Para manipular o slate 2D em siFor manipulating the 2D slate itself

Gráfico mostrando o recurso segurar e arrastarGraphic showing grab and drag feature
MoverMove
Movimente suas mãos para os cantos e bordas para revelar as funcionalidades de manipulação mais próximas.Move your hands toward corners and edges to reveal the closest manipulation affordances. Segure a barra holográfica na parte superior do slate 2D, o que permite mover todo o slate.Grab the Holobar at the top of the 2D slate, which lets you move the whole slate.

Gráfico mostrando o recurso de escalaGraphic showing scale feature
DimensionarScale
Segure as funcionalidades de manipulação e faça um dimensionamento uniforme utilizando as funcionalidades de canto.Grab the manipulation affordances and do uniform scaling through the corner affordances.

RefluxoReflow
RefluxoReflow
Segure as funcionalidades de manipulação e faça um refluxo por meio das funcionalidades de borda.Grab the manipulation affordances and do reflow via the edge affordances.



Manipulação de objetos 3D3D object manipulation

O HoloLens 2 permite que os usuários habilitem suas mãos para orientar e manipular objetos holográficos 3D, aplicando uma caixa delimitadora a cada objeto 3D.HoloLens 2 lets users enable their hands to direct and manipulate 3D holographic objects by applying a bounding box to each 3D object. A caixa delimitadora fornece uma melhor percepção da profundidade por meio do sombreador de proximidade.The bounding box provides better depth perception through its proximity shader. Com a caixa delimitadora, há duas abordagens de design para a manipulação de objetos 3D.With the bounding box, there are two design approaches for 3D object manipulation.

Manipulação baseada em funcionalidadeAffordance-based manipulation

A manipulação com base em funcionalidade permite manipular o objeto 3D por meio de uma caixa delimitadora, junto com as funcionalidades de manipulação em torno dela.Affordance-base manipulation lets you manipulate the 3D object through a bounding box along with the manipulation affordances around it.

Gráfico mostrando uma caixa delimitadora de objetos e o recurso moverGraphic showing an objects bounding box and move feature
MoverMove
Quando a mão de um usuário está próxima a um objeto 3D, a caixa delimitadora e a funcionalidade mais próxima são reveladas.As soon as a user's hand is close to a 3D object, the bounding box, and the nearest affordance are revealed. Os usuários podem segurar a caixa delimitadora para mover todo o objeto.Users can grab the bounding box to move the whole object.

Gráfico mostrando o usuário segurando a borda de um objeto para girá-loGraphic showing user grabbing an objects edge to rotate
GirarRotate
Os usuários podem segurar as funcionalidades de borda para girar.Users can grab the edge affordances to rotate.

Gráfico mostrando o usuário segurando o canto de um objeto para dimensioná-loGraphic showing user grabbing an objects corner to scale
DimensionarScale
Os usuários podem segurar as funcionalidades de borda para dimensionar uniformemente.Users can grab the corner affordances to scale uniformly.


Manipulação não baseada em funcionalidadeNon-affordance-based manipulation

A manipulação que não é baseada em funcionalidade não anexa a funcionalidade à caixa delimitadora.Non-affordance-based manipulation doesn't attach affordance to the bounding box. Os usuários podem revelar apenas a caixa delimitadora e interagir diretamente com ela.Users can only reveal the bounding box, then directly interact with it. Se a caixa delimitadora for pega com uma mão, a translação e rotação do objeto estarão associadas ao movimento e à orientação da mão.If the bounding box is grabbed with one hand, the translation and rotation of the object are associated to motion and orientation of the hand. Quando o objeto é pego com as duas mãos, os usuários podem transladá-lo, dimensioná-lo e girá-lo de acordo com os movimentos relativos das duas mãos.When the object is grabbed with two hands, users can translate, scale, and rotate it according to relative motions of two hands.

A manipulação específica requer precisão.Specific manipulation requires precision. Recomendamos usar a manipulação baseada em funcionalidade, pois ela fornece um alto nível de granularidade.We recommend that you use affordance-based manipulation because it provides a high level of granularity. Para a manipulação flexível, recomendamos usar a manipulação não baseada em funcionalidade, pois ela permite experiências instantâneas e divertidas.For flexible manipulation, we recommend you use non-affordance manipulation as it allows for instant and playful experiences.



Gestos instintuaisInstinctual gestures

Com o HoloLens (1ª geração), ensinamos aos usuários alguns gestos predefinidos, como abrir a mão e fechar e abrir dedos indicador e polegar.With HoloLens (1st gen), we taught users a couple of predefined gestures, such as bloom and air tap. Para o HoloLens 2, não pedimos para os usuários memorizarem gestos simbólicos.For HoloLens 2, we don't ask users to memorize any symbolic gestures. Todos os gestos exigidos do usuário, em que os usuários precisam interagir com os hologramas e o conteúdo, são instintivos.All required user gestures, where users need to interact with holograms and content, are instinctual. A forma de atingir gestos instintuais é ajudar os usuários a realizar os gestos por meio do design de funcionalidades da interface do usuário.The way to achieve instinctual gestures is to help users perform gestures through the design of UI affordances.

Por exemplo, se nós incentivarmos o usuário a segurar um objeto ou um ponto de controle com uma pinçagem de dois dedos, o objeto ou o ponto de controle deverá ser pequeno.For example, if we encourage the user to grab an object or a control point with a two finger pinch, the object or the control point should be small. Se quisermos que o usuário o segure com cinco dedos, o objeto ou o ponto de controle deverá ser relativamente grande.If we want the user to do a five finger grab, the object or the control point should be relatively large. Como acontece com os botões, um botão pequeno limitará os usuários a pressioná-lo com um dedo.Similar to buttons, a tiny button would limit users to press it with a single finger. Um botão grande encorajará os usuários a pressioná-lo com a palma da mão.A large button would encourage users to press it with their palms.

Gráfico mostrando o usuário segurando um objeto pequeno para movê-loGraphic showing user grabbing small object to move
Objeto pequenoSmall object

Gráfico mostrando o usuário segurando um objeto médio para movê-loGraphic showing user grabbing medium object to move
Objeto médioMedium object

Gráfico mostrando o usuário segurando um objeto grande para movê-loGraphic showing user grabbing large object to move
Objeto grandeLarge object




Design simétrico entre os controladores de mão e DoF 6Symmetric design between hands and 6 DoF controllers

Talvez você tenha observado que há interações paralelas que podemos utilizar entre as mãos em controladores de RA e de movimento na VR.You may have noticed that there are interaction parallels we can draw between hands in AR and motion controllers in VR. Ambas as entradas podem ser usadas para disparar manipulações diretas em seus respectivos ambientes.Both inputs can be used to trigger direct manipulations in their respective environments. No HoloLens 2, os movimentos de segurar e arrastar com mãos em distância próxima funcionam da mesma maneira que o botão para segurar nos controladores de movimentos do WMR.In HoloLens 2, grabbing and dragging with hands at a close distance works much the same way as the grab button does on WMR motion controllers. Isso proporciona aos usuários uma familiaridade de interação entre as duas plataformas, o que poderá ser útil se você decidir portar seu aplicativo entre plataformas.This provides users with interaction familiarity between the two platforms, which might prove useful if you ever decide to port your application between platforms.



Otimizar com acompanhamento ocularOptimize with eye tracking

A manipulação direta poderá proporcionar uma sensação mágica se funcionar conforme o esperado.Direct manipulation can feel magical if it works as intended. No entanto, ela também poderá se tornar frustrante se você não puder mover sua mão para algum lugar sem disparar inadvertidamente um holograma.But it can also become frustrating if you can’t move your hand anywhere without unintentionally triggering a hologram. O acompanhamento ocular ajuda potencialmente a identificar melhor qual é a intenção do usuário.Eye tracking potentially helps to better identify what the user’s intent is.

  • Quando: reduzir o disparo involuntário de uma resposta de manipulação.When: Reduce unintentionally triggering a manipulation response. O acompanhamento ocular permite entender melhor o que um usuário realmente deseja fazer.Eye tracking allows for better understanding what a user is currently engaged with. Por exemplo, imagine que você esteja lendo um texto (instrutivo) holográfico e se aproxime para pegar uma ferramenta de trabalho do mundo real.For example, imagine you're reading through a holographic (instructional) text when reaching over to grab you real-world work tool.

Ao fazer isso, você move acidentalmente sua mão sobre alguns botões holográficos interativos que não tinha observado antes.By doing so, you accidentally move your hand across some interactive holographic buttons that you hadn't even noticed before. Por exemplo, ela pode estar fora do FoV (campo de visão) do usuário.For example, it may be outside the user's field-of-view (FoV).

Se o usuário não olhar um holograma por um tempo, mas um evento de toque ou aperto tiver sido detectado para ele, provavelmente, a interação não será intencional.If the user hasn't looked at a hologram for a while, yet a touch or grasp event has been detected for it, the interaction is likely unintentional.

  • Qual deles: além de lidar com ativações falso-positivas, outro exemplo inclui a melhor identificação dos hologramas a serem segurados ou tocados, já que o ponto de interseção preciso pode não ser claro da sua perspectiva, especialmente se vários hologramas estão posicionados próximos uns dos outros.Which one: Aside from addressing false positive activations, another example includes better identifying which holograms to grab or poke as the precise intersection point may not be clear from your perspective, especially if several holograms are positioned close to each other.

    Embora o acompanhamento ocular no HoloLens 2 tenha limitações com base na precisão com a que ele pode determinar seu foco com o olhar, isso ainda pode ser muito útil para interações próximas devido à disparidade de profundidade ao interagir com a entrada de mão.While eye tracking on HoloLens 2 has limitations based on how accurately it can determine your eye gaze, this can still be helpful for near interactions because of depth disparity when interacting with hand input. Isso significa que, às vezes, é difícil determinar se a sua mão está atrás ou na frente de um holograma para segurar precisamente um widget de manipulação, por exemplo.This means it's sometimes difficult to determine whether your hand is behind or in front of a hologram to precisely grab a manipulation widget, for example.

  • Onde: usar informações sobre o que um usuário está vendo com gestos de lançamento rápido.Where to: Use information about what a user is looking at with quick-throwing gestures. Segure um holograma e lance-o para seu destino pretendido.Grab a hologram and roughly toss it toward your intended destination.

    Embora isso geralmente funcione bem, gestos de mão muito rápidos podem resultar em destinos altamente imprecisos.While this sometimes works, quickly doing hand gestures may result in highly inaccurate destinations. No entanto, o acompanhamento ocular poderia melhorar a precisão do gesto.However, eye tracking could improve the accuracy of the gesture.



Manipulação no MRTK (Kit de Ferramentas de Realidade Misturada) para o UnityManipulation in MRTK (Mixed Reality Toolkit) for Unity

Com o MRTK , você pode alcançar facilmente o comportamento de manipulação comum usando o script ObjectManipulator.With MRTK, you can easily achieve common manipulation behavior using the script ObjectManipulator. Com o ObjectManipulator, você pode pegar e mover objetos diretamente com mãos ou com o raio de mão.With ObjectManipulator, you can grab and move objects directly with hands or with hand ray. Ele também dá suporte à manipulação com as duas mãos para dimensionar e girar um objeto.It also supports two-handed manipulation for scaling and rotating an object.


Veja tambémSee also