-
Notifications
You must be signed in to change notification settings - Fork 3
/
02_intro_to_webVR.Rmd
108 lines (78 loc) · 4.14 KB
/
02_intro_to_webVR.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
# Intro to WebVR
## Questions
* What is WebVR?
* What are people using WebVR for?
* How can I access WebVR content?
* How do I create WebVR content?
## Overview
Teaching: 5 min
Exercises: 5 min
## What is WebVR?
The home of WebVR is: https://www.webvr.rocks where it says
> WebVR is a JavaScript API for creating immersive 3D, Virtual Reality experiences in your browser.
WebVR is a standard. If you make an experience that complies with this standard,
it is guaranteed to work across a wide variety of devices including phones, VR
headsets, and personal computer browsers.
This is an example of a WebVR experience:
http://graphics.latimes.com/mars-gale-crater-vr/
It is a guided tour of the area of Mars where the Curiosity rover landed.
A fact relevant to this workshop is that it is a piece of scientific
storytelling involving spatial data.
If you access it from your browser you will be guided to control the app with
mouse and keyboard, if you access it from a phone, the gaze will controlled by
the phone's accelerometer. With a full VR rig you can use the hand controllers
to pilot the 'ship'.
## Creating WebVR Applications
There are a number of ways to build WebVR applications. As you might guess to do it from scratch involves writing lots of JavaScript. To avoid writing too much JS, tools and frameworks have emerged to make WebVR easier to program.
The main contenders in this space are:
* [WebVR export functionality built into Unity](https://unity3d.com/unity/features/multiplatform/vr-ar)
- You're a games developer who wants to make WebVR
* [Amazon Sumerian](https://aws.amazon.com/sumerian/)
- You're an eLearning developer who wants to make WebVR
* [Facebook React 360](https://facebook.github.io/react-360/)
- You're a JavaScript developer who wants to make WebVR
* [Mozilla A-Frame](https://aframe.io)
- You're anyone who wants to make WebVR
Mozilla's A-Frame has the largest and most active group of users.
A-Frame shares features in common with an older framework called
[X3dom](https://www.x3dom.org/) which is successor to [VRML](https://en.wikipedia.org/wiki/VRML), the original
declarative framework for VR on the web from the 90's. However, [an important architectural difference makes A-Frame more flexible](http://ngokevin.com/blog/aframe-vs-3dml/).
## Check out A-Frame {.exercise}
1. On your laptop, Navigate your browser to https://aframe.io
2. Try some of the 'Examples' from the left had list
3. Try navigating to an example with your phone browser.
## Why A-Frame is Awesome
Let us consider the A-Frame 'Hello WebVR' Example:
https://aframe.io/examples/showcase/helloworld/
A-Frame generalises the idea of a Web page to VR. Instead of a page, you construct a
**scene**. The premise of the framework is that you define the static
scaffolding of your scene using special HTML syntax. By static scaffolding, we
mean all the geometric objects, 3D models, their positions, rotations, and
colours etc. Dynamism is handled with JavaScript.
The twist is that rather than writing JS yourself, you can attach behaviours or
properties to items in your scene implemented in JS by other people. Much like R's
library of packages there is a growing library of A-Frame **components** to add
all kinds of behaviour into your scenes. Behaviours can be simple, like making
things move on a pre-programmed path, and also complex, like making an object behave as if acted on by gravity.
This flexible approach is called 'Entity-Component Architecture'. We'll be
discussing it further as we dive into A-Frame.
## The A-Frame Stack
The A-Framework is built on top of a JS 3D visualisation framework called
[three.js](https://threejs.org/). three.js itself builds on top of the WebGL API
meaning the stack looks like this:
```
----------
| A-Frame |
| |
-----------
| three.js |
| |
----------
| WebGL |
| |
----------
```
The abstraction is leaky in the sense that there are some things that can only
be achieved with knowledge of the lower level frameworks. When we place R on top
of that stack the same thing remains true, that is why we are spending time
building knowledge of A-Frame.