Storytelling
using
AR and VR
Kumar Ahir
Nov 18
Design4India
Twitter: @kernel_kumar
Medium: @kumar.ahir

Kumar Ahir
Twitter: @kernel_kumar
Interaction Design, IIT Bombay
MahaWar - Funskool
CISCO, Microsoft, Symantec
OoBI - Out of Box Interactions -
oobi.in
Exit to NewsCorp, Rupert Murdoch
9 month old startup, exit
Consulting ...

OoBI
Surface

Tanishq
Jewellery Browser

Interior
Designer

4dview
Interactive property browsing

Why are you here?
Your expectations

Experienced VR
Own VR headset
Actively working on VR project

Workshop objectives
The workshop will help you know about Immersive Technology space and what it
takes to conceptualize, design and built an immersive experience
We are going to take a glance at AR and VR technologies from different angles
● Hardware
● Industry where it’s actively being used
● Different tools and solutions developed for deploying AR and VR
● Critical choices in deploying Immersive tech
● Design
Develop an Immersive experience using both AR and VR

Workshop schedule
Part 1 - General, Managers, Strategy
Difference between AR and VR and XR
Devices - Hardware
Applications - Consumer and Business
Part 2 - Designers, Developers
Technology standards
Product and Design strategy
Design fundamentals
Part 3 - Hands on - Team
Build An Immersive App for Tourism

Virtual
Immersive
Block the real world
Teleport to a new world and time
Part of simulation
Augmented
Overlay information
View the real world
Present in time and space
Part of real world

Why you should pay attention ?
if you currently own a smartphone
chances are,
you are already carrying a virtual reality
device in your pocket
And am going to tell you how you can create
Memorable Experiences

Design for VR - hardware dependent
DoF - Degrees of Freedom
Input/Interaction
FOV
Latency

Degree of Freedom - DOF
3 DOF
6 DOF
Extended reality

3 DoF
Orientation
tracking

6 DoF
Orientation +
Position
tracking

Extended Reality

Input - Interaction
Headset
Gaze
Controller - 3 DoF
Controller - 6 DoF

FOV - Field of view

FOV - Field of view

Latency / Video lag
Expected: 7 ms
Current: 50 ms
Oculus: 30-40 ms
Mobile VR: 40-90 ms
Vive: 8-10 ms

Mobile
3 DoF
High latency
Low FoV
Gaze
Standalone
3 DoF
Low latency
100 FoV
3 DoF controller
Roomscale
6 DoF
Perceptive
latency
110 FoC
6 DoF controller
cardboard daydream Gear VR
Oculus GO Vive Focus Mirage Solo Lenovo MR
Oculus Rift HTC Vive Pro
VR headsets

VR Technology standards
Tools
Unity
Unreal
A-Frame
WebVR
Hardware
Mobile based
Standalone
Roomscale
Body suit

Design for AR - mobile
Design for Real Environment
Augment the world
Take care of user nuances
Interaction with Virtual Assets

Real
Environment
Designing for AR means
designing for many different
environments
Clear understanding of the
amount of space needed for
the task at hand

Augment real
world
Guide on how to interact
Visual affordance
Interactable surfaces/environment

User Nuances
User phases
User movement
Accessibility & ease of access

Interaction
patterns
Selection
Translation
Rotation
Scaling
Gestures and Proximity

AR and MR headsets

AR Technology standards
Unity
ARCore
ARKit
SLAM
Vuforia
8th Wall
8i
Marker based
Markerless
2D Image Tracking
Environment scanning
3d Object perception
Face AR
Body AR

Business
applications
Manufacturing
Education - Learning
Industrial Design
Automotive, Engineering and
Construction
Healthcare
Quality inspection
Games

$$ Business $$
Games
Real Estate
Training
Quality inspection
Designing

Product Strategy
Understand the technology capabilities
Address 2-3 Major pain points and make solid use case
Identify audience - niche/scale/single user
What’s the current end to end process
VR or AR or MR
Design in context
Content creation - 360 photo/video/3d

Use case
Tourism Safety training

Critical choices
Evaluate the current processes and medium
What alternatives available that people are used to?
Understand the nature of medium
Understand the context of use

How to ?!?
Location of use
Hardware
Storyboard and UX
3d Content development
UI patterns - Mapping interactions to controllers
User testing

Context Users Goals
Design Process
Experience
Immersion
Learning
Explore
Media
Gamers
Enterprise
Entertainment
Gaming
Healthcare
Automotive
Manufacturing
Design
user personas, conceptual flows, wireframes, an interaction model

Mimic the real space and behaviour

Design Fundamentals
Not pixels but cm, m, feet
Peripheral vision
Interactions attached to world UI
Skybox
Spatial sound
Modes of interactions
Design for Collaboration
Text with Background - solid or translucent

Units
https://virtualrealitypop.com/practical-vr-ce80427e8e9d
Reticle > Head > Body
They are in cm, m, in, ft and degrees
NOT PIXELS
Screens are fixed distance and area
Immersive world has depth

Peripheral Vision
Space Layout

Prototype of a tool to check
layout of elements in VR

Skybox
The secondary world
Background
Scene elements and depth of layers

Environment
Skybox
3d objects

Audio/Sound Spatial audio is a key ingredient for true immersion,
making the design process around sound absolutely essential

Seated vs Standing vs Movement

Design for Collaboration

Tools
A-frame
Unity - ProBuilder
Blender
Paper Prototyping - VR Sketch sheets

Popsicle based
handheld characters for
real life prototyping and
quick user feedback

VR Sketch sheets

Collaboration with Developers
Create a standard visual vocabulary
Guidelines for elements layout - back, middle, foreground
User Test everything
Test with Physical models - buy some cardboards and sheets

StoryTelling
Imagineering
Improvisation
Presence
Point of View
Set and Setting
Space is Dynamic
Inspiration from Theatre
Plot in 360
Character and Dialogue
Style

https://youtu.be/JxVVNm35rJE

Let’s get started

Experience a
Monument
An XR experience to view a
monument from birds eye view and
get a real close 360 view of different
points

Unity and Vuforia Image target and database
Unity Android platform
Vuforia - AR Camera - Configuration
Image Target
Monument Model setup
Test
Story and interactions
Add some sound
Test
Publish app
https://goo.gl/68bRPw

VR setup
Surround
Upload 360 image
http://surround.infivr.com

VR setup
A-frame
https://glitch.me/~aframe
Resume coding
Add 360 image
Assets

Thank You
Kumar Ahir
www.kumarahir.com
+91 9980452567
Twitter
@kernel_kumar
LinkedIn
/in/kumarahir
kumar.ahir@gmail.com