锚点射线交互视觉优化

1. surface-locking:锚点Cursor贴着虚拟物体表面,增强虚拟物体的立体感。

当你的 cursor 靠近可交互控件的时候,cursor 会被吸上去(系统告诉你:这个物体可以交互)。
截屏2021-06-24 下午5.00.38.png截屏2021-06-24 下午5.00.57.png
try-out-2 (1).gif
image.png
image.png
当 cursor 放在可交互的物体上时,整个物体被蓝色的泡泡包住。
image.png
图中的玩具鸭被选中时的 cursor ——前面那个白色四棱锥和圆环的组合。
image.png

3) oculus 上锚点在不同深度界面上的移动
oculus-cursormoving.gif

2. cursor 在特定时刻的隐藏和唤醒

cursor 的『显』和『隐』涉及了页面层级的变化。cursor 的缺点也显现出来了,那就是可能会有些遮挡全息的映像或者内容。比如我用mac的时候,光标在屏幕上停了一会儿没动,它就消失了,然后你摸摸Trackpad,它又出来了,你实在找不到它的时候搓一搓Trackpad或者晃一晃鼠标,cursor 就变大,告诉你它在哪。
所以,一个是不能让用户找不到,一个是不能打扰用户,两者综合考虑后得出 cursor 的视觉层级(即透明度)

Air:全屏幕观看的时候锚点无变化,仍在屏幕中,影响沉浸感
Hololens:当有视频的时候gaze一般会消失,以更大限度地呈现内容。但是这里又产生出一个问题,如果 gaze 消失了之后,用户又想操作界面怎么办呢?那就要另外设计一个方法来唤起 gaze 。
image.png

3. cursor的确认点击反馈

1)锚点圆圈缩放动效
image.png
当手微微捏合的时候,圆圈变小一点
image.png
当完全捏住的时候,cursor变成一个小点
image.png
松手时,圈圈变大。(松手瞬间触发『选中』)
image.png
2)Hololens 锚点点击确认动效果
undefined.undefined
https://www.youtube.com/watch?v=eXdlcrvqg40
截屏2021-06-24 下午7.37.15.png截屏2021-06-24 下午7.37.27.png
截屏2021-06-24 下午7.44.09.png
3) oculus点击应用卡片——图标变小,类似按下图标效果
oculus-click-cards.gif

4. 锚点选中物件的变化

捏住手指的瞬间,cursor变白(因为白色是hologram中最亮的颜色,此时在在它后面加上阴影,则cursor处于所有物体之上,或者最靠近你的眼睛,就是告诉你它被你激活了反之,它阴影消失逐渐变暗则退居到全息内容之后。),而被选中的页面变蓝
image.png
image.pngimage.png
image.png
image.png

5. 射线的阻尼和弯曲变化

undefined.undefined
https://www.youtube.com/watch?v=uPmenG6sk40
截屏2021-06-24 下午4.44.27.png
2) Leap Motion:我们还为代理碰撞器添加了逻辑程序, 一旦目标射线击中 远处物体的代理碰撞器,线渲染器会被直接吸附到物体的中心点。这一结果相当于切断目标 物周围区域外的线渲染器,使得这些物体能够被精确命中
xvZS-fyqwiqi5685685.gif

6. 不同状态下锚点的不同形态

1)不同速度锚点的小尾巴
undefined.undefined
https://www.youtube.com/watch?v=KDFQ1oroTBU截屏2021-06-24 下午5.36.04.png
截屏2021-06-24 下午5.36.21.png

2)oculus 锚点出可互动窗口范围后变小消失oculus-cursor-fading-away2.gif

7. 环境光效,增强反馈

1)Cursor像有个小型探照灯,提前点亮目标按键并按照z轴距离变化,提供纵深感
Hololens环境光效.gif

Hololens环境光效2.gif

2)类似大探照灯,点亮环境光,增强虚拟物体的视觉反馈
undefined.undefined
https://www.youtube.com/watch?v=k0eiUBTU_IE
截屏2021-06-24 下午6.38.24.png

3)cursor 完全像光打在地面上一样,会有很强的和环境融为一体的感觉。
image.png

8. 锚点射线的不同形态

1)移动web/3D模型的时候,cursor变成上下左右四个方向图标,提示可以进行移动
image.png
2)四角小三棱锥,可以定位不同大小形状的目标物品
image.png
image.png
image.png
image.png

3 Dof 射线交互优化

1. 3个自由度的名称定义。

3D pointer, raycast这种交互用到了IMU(加速度计、陀螺仪和地磁计三者数据的整合),虽然只有三自由度,但是已经够用了。
image.png

2. 连续motion(摆动手)

连续motion用到的更多是controller里的陀螺仪(gyroscope),传回来的只有角速度(angular speed)。因为它只有三自由度的方向追踪,而没有六自由度的位置跟踪,所以这个controller只能改变方向地摆啊摆。如果说触摸是适合2D平面的交互,那么motion则是适合3D立体的交互。
image.png
image.png
适用于:
1)摇晃
2)平移/推动
3)方向控制
4)倾斜

3. 离散motion(甩手)

离散motion主要用到的传感器是加速度计用来感知加速度。如果类比平面交互的话,这个操作有点像iOS上的快速滑动(flickr),有一种丢弃的感觉。比如iOS中的滑动就会根据你手指滑动速度的快慢来决定页面滚动的快慢。
image.png
适用于
1)击打
2)投掷

资料源

《如何评价 Google IO 2016 发布的 VR Daydream 及其遥控器的交互?》https://www.zhihu.com/question/46254124

The making of Designing Holograms

https://docs.microsoft.com/en-us/windows/mixed-reality/discover/designing-holograms

《如何评价Hololens使用gaze定位cursor的交互》

https://www.zhihu.com/question/41081637/answer/90386445

Hololens OS 交互 高清视频

(应该是hololens 1?)
https://www.youtube.com/watch?v=eXdlcrvqg40

《Leap Motion这三个实验 告诉你手势还能实现这些操作》

http://vr.sina.com.cn/news/yj/2018-01-23/doc-ifyqwiqi5700084.shtml

Cursors/MIcrosoft Mixed Reality Documents for Design

https://docs.microsoft.com/en-us/windows/mixed-reality/design/cursors

LITHO controller:The mouse was for the computer. The …….. is for Augmented Reality.

https://medium.com/litho/designing-an-input-device-for-the-real-world-a-process-of-elimination-c4685aed7d09

Why Your Mouse Cursor Looks The Way It Does

https://www.fastcompany.com/3026625/why-the-mouse-cursor-is-tilted-instead-of-vertical
The Optical Mouse, and an Architectural Methodology for Smart Digital Sensors by Richard F. Lyon
http://bitsavers.trailing-edge.com/pdf/xerox/parc/techReports/VLSI-81-1_The_Optical_Mouse.pdf