Thursday, 2 January, 2020 UTC
Summary
One of the design principles of Virtual Reality is to create smooth transitions or movement and not have any abrupt changes.
This article is in succession to my earlier article on creating a Virtual Reality Tour using A-frame. That article has received a very good response in design and developer community with enthusiasts reaching out to me on integrating new features in it. The article helps to create a scalable virtual reality tour using A-frame. The transition from one point to another was however abrupt. Also the fuse animation was little weird.
Check the output here
Trending AR VR Articles:
1. Ready Player One : How Close Are We?
2. Augmented Reality — with React-Native
3. Five Augmented Reality Uses That Solve Real-Life Problems
4. Virtual Reality Headsets: What are the Options? Which is Right For You?
VR UI Design principles
Having worked on multiple Virtual Reality projects on mobile VR, Oculus GO, HTC Vive and reading research papers I have come to devise some VR UI Design principles. Some of those principles are
- Natural and Smooth Transition between 2 different states — Teleportation
- Visual affordance of interactivity and activity
- Decision making time before final action in Gaze based interaction
I have tried to incorporate these principles in the new Virtual Reality Tour. The output can be seen here.
Gaze based interaction
For achieving Visual affordance and Decision time before final action, I used cursor component of a-frame.
Cursor component has an attribute fuse which allows to specify if we want some time before the click event is fired. Along with fuse we can specify time duration to wait before the event is fired. Just specifying these 2 attributes will take care of the decision time before final action.
For giving a visual affordance of interaction and also show status of the time duration before the final event trigger, I used an entity having geometry of ring a layer/depth below main cursor. And added an animation component to main cursor. The animation event will be fired on two events, mouse enter and mouse leave giving an option when to start the animation of completing a circle and when to stop (in case the gaze leaves before the wait time duration). Look animation component documentation to get details on how it can be used to animate geometry, material, color, transparency etc.
Natural and Smooth transition
Normally we have eyes open when we more in real world. With this we have constant visibility of the world as we transition in physical space. However, when the movement is fast we tend to focus in certain zone before us and ignore rest. And when the movement is real fast we tend to close our eyes to avoid motion sickness.
Movement
One of the movement techniques in VR is to Teleport. That’s gaze at a distant point and instantly move to it. That’s what we did in Virtual tour earlier. However, it was abrupt and didn’t give feeling of movement, rather appear at the new point instantly.
So to achieve movement effect, I used FoV (field of view) property of camera. Lesser the FoV, nearer the objects will look and more will show the surrounding far. So make user feel as if they are moving towards a point, I animatedly decrease the FoV.
Camera with FoV 80 degreeCamera with FoV 50 degreeTransition
For transition I added a plane infront of the camera and as a child entity of camera and made it transparent by changing the opacity parameter of material attribute to 0. Whenever there is transition/movement I would animate the opacity to go from 0 to 1 and once the skybox source is changed to new space, animating the opacity to 0 again.
Dummy plane infront of camera to give a transition effect of eye blinkThe code sequence
0. Animation setup
- Movement Event trigger — changing FoV
2. Transition Event trigger — changing front plane opacity. In this animation the skybox is still not changed
Triggering animation when a hotspot is gazed over3. Changing the skybox. When the movement and transition effect is complete change the skybox
4. Trigger end animation sequence
The final output and code
https://medium.com/media/d5d0892d8c776e183ba7ca97f827fce7/hrefKumar Ahir is an independent consultant working in the field of Immersive Technologies, Product Design, Design Leadership, and Strategy. He is evangelizing Design for Immersive Technologies and UX by actively doing workshops on Design Thinking, Design for AR and VR, Prototyping for Mixed Reality technologies.
He aims to create a better Design Ecosystem for Immersive Technologies.
Know more about him at KumarAhir.com, LinkedIn and Twitter
Don’t forget to give us your 👏 !
https://medium.com/media/1e1f2ee7654748bb938735cbca6f0fd3/hrefSmooth camera movement in Virtual Reality tour using A-frame was originally published in AR/VR Journey: Augmented & Virtual Reality Magazine on Medium, where people are continuing the conversation by highlighting and responding to this story.