-
Notifications
You must be signed in to change notification settings - Fork 96
/
Copy pathindex.html
198 lines (182 loc) · 10.7 KB
/
index.html
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="WebVR">
<meta name="twitter:description" content="Bringing Virtual Reality to the Web">
<meta name="twitter:image" content="https://webvr.info/images/webvr-logo-square.png">
<link rel="stylesheet" href="stylesheets/stylesheet.css">
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>WebVR - Bringing Virtual Reality to the Web</title>
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
</head>
<body>
<div class="container" id="container">
<header class="header">
<div id="nav">
<a href="./" class="selected">About</a>
<a href="./developers">Developers</a>
</div>
<h1><a href="" class="wordmark"><span>WebVR</span></a></h1>
<h2 class="tagline">Not the thing you should be using any more!</h2>
</header>
<main class="main" id="main">
<h3 style='color: #880000; font-size: 1.5em;'>
<a id="webvr-is-dead" class="anchor" href="#webvr-is-dead" aria-hidden="true"><span class="octicon octicon-link"></span></a>
WebVR is Deprecated!
</h3>
<p style='color: #880000; font-size: 1.1em;'>
WebVR has been replaced by the <a href="https://www.w3.org/TR/webxr/">WebXR Device API</a>, which has wider support, more features, better performance, and supports both VR and AR.
This page is preserved as a historical reference, but the information on it is no longer relevant and you almost certainly want to be looking at <a href="https://immersiveweb.dev/">immersiveweb.dev</a> instead!
</p>
<h3>
<a id="what-is-webvr" class="anchor" href="#what-is-webvr" aria-hidden="true"><span class="octicon octicon-link"></span></a>
What is WebVR?
</h3>
<p>
WebVR is an open specification that makes it possible to experience VR in your browser.
The goal is to make it easier for everyone to get into VR experiences, no matter what device you have.
</p>
<h3>
<a id="how-do-i-experience-webvr" class="anchor" href="#how-do-i-experience-webvr" aria-hidden="true"><span class="octicon octicon-link"></span></a>
How do I experience WebVR?
</h3>
<p>
You need two things to experience WebVR: a headset and a compatible browser.
</p>
<h3>
<a id="got-a-headset" class="anchor" href="#got-a-headset" aria-hidden="true"><span class="octicon octicon-link"></span></a>
I’ve already got a headset.
</h3>
<p>
Select your headset below to find out which browsers work best for you.
</p>
<p>
<div class="devices">
<div class="device-col">
<div class="device-box" onclick="this.classList.toggle('open');">
<img src="images/Google%20Cardboard.png" alt="Google Cardboard">
<span class="carrot"></span>
<div class="device-box-header">Google Cardboard</div>
<span>
Works best with <a href="https://play.google.com/store/apps/details?id=com.android.chrome">Chrome</a> on Android devices.
</span>
<span>
You can still experience WebVR content in other browsers on Android and iOS, but it might not be as smooth since those browsers don’t fully support WebVR.
</span>
</div>
<div class="device-box" onclick="this.classList.toggle('open');">
<img src="images/DayDream.png" alt="Daydream">
<span class="carrot"></span>
<div class="device-box-header">Daydream</div>
<span>
Works with <a href="https://play.google.com/store/apps/details?id=com.android.chrome">Chrome</a> and <a href="https://play.google.com/store/apps/details?id=org.mozilla.vrbrowser">Firefox Reality</a> on Daydream-ready Android devices.
</span>
</div>
<div class="device-box" onclick="this.classList.toggle('open');">
<img src="images/GearVR.png" alt="Gear VR">
<span class="carrot"></span>
<div class="device-box-header">Samsung Gear VR</div>
<span>
Works with <a href="https://www.oculus.com/experiences/gear-vr/1257988667656584/">Oculus Browser</a> and <a href="https://www.oculus.com/experiences/gear-vr/849609821813454/">Samsung Internet</a>.
</span>
</div>
<div class="device-box" onclick="this.classList.toggle('open');">
<img src="images/Oculus.png" alt="Oculus">
<span class="carrot"></span>
<div class="device-box-header">Oculus Rift</div>
<span>
Works with <a href="https://webvr.rocks/firefox">Firefox</a> and
<a href="https://www.supermedium.com">Supermedium</a>
on Windows.
</span>
</div>
<div class="device-box" onclick="this.classList.toggle('open');">
<img src="images/Oculus.png" alt="Oculus">
<span class="carrot"></span>
<div class="device-box-header">Oculus Go</div>
<span>
Works with <a href="https://www.oculus.com/experiences/gear-vr/1257988667656584/">Oculus Browser</a> and <a href="https://www.oculus.com/experiences/go/2208418715853974/">Firefox Reality</a>.
</span>
</div>
</div>
<div class="device-col">
<div class="device-box" onclick="this.classList.toggle('open');">
<img src="images/HTC%20Vive.png" alt="HTC VIVE">
<span class="carrot"></span>
<div class="device-box-header">HTC VIVE</div>
<span>
Works with <a href="https://webvr.rocks/firefox">Firefox</a>,
<a href="https://webvr.rocks/servo">Servo</a>, and
<a href="https://www.supermedium.com">Supermedium</a>
on Windows.
</span>
<span>
On macOS, you can use <a href="https://nightly.mozilla.org/">Firefox Nightly</a>.
</span>
</div>
<div class="device-box" onclick="this.classList.toggle('open');">
<img src="images/HTC%20Vive.png" alt="VIVEPORT">
<span class="carrot"></span>
<div class="device-box-header">VIVEPORT</div>
<span>
Works with <a href="https://mixedreality.mozilla.org/firefox-reality/">Firefox Reality</a>.
</span>
</div>
<div class="device-box" onclick="this.classList.toggle('open');">
<img src="images/Playstation%20VR.png" alt="PlayStation VR">
<span class="carrot"></span>
<div class="device-box-header">PlayStation VR</div>
<span>
Does not currently support WebVR.
</span>
</div>
<div class="device-box" onclick="this.classList.toggle('open');">
<img src="images/Microsoft.png" alt="Microsoft Windows">
<span class="carrot"></span>
<div class="device-box-header">Windows Mixed Reality headsets</div>
<span>
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/webvr/">WebVR v1.1</a> is supported by <a href="https://docs.microsoft.com/en-us/microsoft-edge/webvr/webvr-with-edge">Microsoft Edge on Windows</a>.
</span>
<span>
<a href="https://webvr.rocks/firefox">Firefox</a> and <a href="https://www.supermedium.com">Supermedium</a> are also supported with <a href="https://docs.microsoft.com/en-us/windows/mixed-reality/enthusiast-guide/using-steamvr-with-windows-mixed-reality">SteamVR</a>.
</span>
</div>
</div>
</div>
</p>
<h3>
<a id="no-headset" class="anchor" href="#no-headset" aria-hidden="true"><span class="octicon octicon-link"></span></a>
I don’t have a headset.
</h3>
<p class="no-headset">
<img src="images/mobile.png" alt="Mobile Phone">
The easiest way to get started is with a basic headset like <a href="https://vr.google.com/cardboard/">Google Cardboard</a>.
Just drop your phone in, and you’re ready to go. You can also use your phone with more advanced headsets like
<a href="https://www.samsung.com/global/galaxy/gear-vr/">Samsung Gear VR</a> and
<a href="https://vr.google.com/daydream/">Google Daydream</a>.
</p>
<p class="no-headset">
<img src="images/pc.png" alt="PC">
For the best performance and most features, you can use a VR headset connected to a computer, like
<a href="https://www.oculus.com/rift/">Oculus Rift</a> or <a href="https://www.vive.com/">HTC VIVE</a>.
Those will allow for higher framerates, higher resolutions, and even let you walk around in VR.
</p>
<p class="no-headset">
<img src="images/laptop.png" alt="Laptop or phone">
Or, on some sites, you can just use your computer or phone without a headset.
You won’t be able to see in 3D or interact as fully in most VR worlds, but you can still look around in 360 degrees.
</p>
</main>
<footer class="footer">
</footer>
</div>
</body>
</html>