forked from toji/webvr.info
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (149 loc) · 8.16 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
<!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">Bringing Virtual Reality to the Web</h2>
</header>
<main class="main" id="main">
<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 what browsers work best.
</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> 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/1290985657630933/">Oculus Carmel</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 Nightly</a> on Windows
</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 Nightly</a>,
<a href="https://blog.mozvr.com/webvr-servo-architecture-and-latency-optimizations/">Servo</a>
on Windows
</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://docs.microsoft.com/en-us/microsoft-edge/webvr/webvr-with-edge/">Microsoft Edge supports WebVR</a>. <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/webvr/">Status: "The WebVR 1.1 API is fully supported."</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>