-
Notifications
You must be signed in to change notification settings - Fork 52
/
Copy pathindex.html
284 lines (271 loc) · 12.8 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
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
---
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/highlight.css">
<title>Immersive Web Developer Home</title>
<meta property="og:title" content="Immersive Web Developer Home">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@ImmersiveWebW3C">
<meta name="twitter:creator" content="@ImmersiveWebW3C">
<meta property="og:url" content="https://immersiveweb.dev/">
<meta name="description" content="Get started building XR applications through the Web with the WebXR Device API, demos, docs, samples and more.">
<meta property="og:description" content="Get started building XR applications through the Web with the WebXR Device API, demos, docs, samples and more.">
<meta property="og:image" content="https://immersiveweb.dev/images/webxrlogo.png">
</head>
<body>
<main>
<img src="./webxr-logo.svg" style="grid-column: 1/-1;" alt="The WebXR Device API" />
<article style="grid-column: 2/-1;">
<p>The WebXR Device API provides access to input (pose information from headset and controllers) and output (hardware display) capabilities commonly associated with Virtual Reality (VR) and Augmented Reality (AR) devices. It allows you develop and host VR and AR experiences on the web.</p>
<p>You can read more about the goals of this standardisation effort by reading the <a href="https://github.com/immersive-web/webxr/blob/master/explainer.md">WebXR Explainer</a>.</p>
</article>
<h2>
What does this mean...
</h2>
<img src="./images/mr.jpg" style="width: 100%;align-self: stretch;object-fit: contain;">
<article style="grid-column: 2/-1;">
<h3>For phones:</h3>
<p>Enable VR by providing pose information and allowing the WebGL scene to be rendered side by side to be placed in a headset like the Cardboard</p>
<p>Enable AR by using the platforms AR capabilities such as ARCore to render the WebGL scene onto the users environment like a magic window.</p>
<h3>For Desktops:</h3>
<p>Desktop computers can make use of tethered VR hardware such as the Oculus Rift or HTC Vive to display the VR scene</p>
<h3>For standalone AR Headsets:</h3>
<p>Enable AR by using the platforms AR capabilities to render the WebGL scene immersively onto the users environment.</p>
<h3>For standalone VR Headsets:</h3>
<p>Enable VR by rendering the scene using the platforms VR capabilities.</p>
</article>
<h2>
Try out some Demos
</h2>
<figure style="grid-column:1/-1;">
<iframe allow="xr-spatial-tracking" allowfullscreen="" style="width: 100%; height: 60vh;" src="https://toji.github.io/webxr-particles/" frameborder="0"></iframe>
<figcaption><a href="https://toji.github.io/webxr-particles/">A demo of VR and AR</a> with the WebXR Device API, embedded with an iframe, for iframes <code>allow="xr-spatial-tracking"</code> is required.</figcaption>
</figure>
<p style="grid-column:1/-1;">
These are samples from the <a href="https://immersive-web.github.io/webxr-samples/">WebXR Samples from the Immersive Web Working Group</a>
They use a very minimal libary to show how one can make use of the WebXR Device API directly.
</p>
<figure>
<a href="https://immersive-web.github.io/webxr-samples/inline-session.html" class="img-a">
<img src="./images/inlinesession.png">
</a>
<figcaption>This sample demonstrates use of an 'inline' XRSession to present content on the page prior to entering XR presentation with an immersive session.</figcaption>
</figure>
<figure>
<a href="https://immersive-web.github.io/webxr-samples/input-tracking.html" class="img-a">
<img src="./images/inputtracking.png">
</a>
<figcaption>This sample demonstrates basic tracking and rendering of XRInputSources. It does not respond to button presses or other controller interactions. </figcaption>
</figure>
<figure>
<a href="https://immersive-web.github.io/webxr-samples/teleportation.html" class="img-a">
<img src="./images/teleportation.png">
</a>
<figcaption>This sample demonstrates teleporting the viewer by updating the XRSession reference space.</figcaption>
</figure>
<h2>
Benefits of doing XR on the Web
</h2>
<article style="grid-column:1/span 3;">
<ul>
<li>Instant deployment to every XR platform with a WebXR enabled Web Browser</li>
<li>Future proof experiences, new AR and VR hardware comes about regularly, your experience should continue working on new hardware without needing to push new code.</li>
<li>An experience can choose to target both VR and AR, Handheld and head mounted devices with a single release. Minimal code changes needed to support VR and AR together.</li>
<li>No app stores or large downloads required, users get immediate access to your experience without needing to leave your web site.</li>
<li>Since the rendering is handled by WebGL, which has been around since 2011, you gain the benefit of WebGL's rich development tool ecosystem and a large, active developer community.</li>
</ul>
</article>
<h2>
WebXR in the Real World
</h2>
<figure style="grid-column-end: span var(--imgcols);">
<a href="https://spatialfusion.io" class="img-a">
<img src="./images/spatial-fusion.png">
</a>
<figcaption>
<h3>Spatial Fusion</h3>
<p><small>Meta, Phoria, Lusion - AR</small></p>
<p>
Learn how to use a civilian-grade hand mounted stellarator in this polished AR demo.
</p>
</figcaption>
</figure>
<figure style="grid-column-end: span var(--imgcols);">
<a href="https://vanveer.com/products/original-custom-3d" class="img-a">
<img src="./images/vanveer.png">
</a>
<figcaption>
<h3>Vanveer Original Custom</h3>
<p><small>Vanveer</small></p>
<p>
A great example of WebXR using Model Viewer.
</p>
</figcaption>
</figure>
<figure style="grid-column-end: span var(--imgcols);">
<a href="https://aboveparadowski.com" class="img-a">
<img src="./images/par-adowski-webxr-mini-golf.png">
</a>
<figcaption>
<h3>Above Par-adowski WebXR Mini-Golf</h3>
<p><small>Paradowski Creative</small></p>
<p>
A WebXR mini-golf game made for virtual reality. This game began as a 40-hour prototype made for Paradowski Creative's putt putt tourney, but quickly took on a life of its own. Our aim is native-quality VR gameplay & design on the 3D open web.
</p>
</figcaption>
</figure>
<figure style="grid-column-end: span var(--imgcols);">
<a href="https://flowerbed.metademolab.com/" class="img-a">
<img src="./images/meta-flowerbed.png">
</a>
<figcaption>
<h3>Project Flowerbed</h3>
<p><small>Meta</small></p>
<p>
An immersive VR garden-building experience developed by Meta using WebXR. The goal of this project is to
demonstrate best practices for developers building high-quality WebXR experiences.
</p>
</figcaption>
</figure>
<figure style="grid-column-end: span var(--imgcols);">
<a href="https://www.xrdinosaurs.com/" class="img-a">
<img src="./images/xrdinosaurs.com.png">
</a>
<figcaption>
<h3>XR Dinosaurs</h3>
<p><small>Brandon Jones</small></p>
<p>
Welcome to the web's virtual Dinosaur Park!
<br />
<br /> We've used the magic of your browser to bring back a friendly pack of prehistoric pals.
<br />
<br /> Our dinosaurs can be viewed with a variety of Virtual Reality headsets, Augmented Reality headsets and phones, or directly in your browser.
</p>
</figcaption>
</figure>
<figure style="grid-column-end: span var(--imgcols);">
<a href="https://msub2.github.io/hello-webxr/" class="img-a">
<img src="./images/hello-webxr.jpg">
</a>
<figcaption>
<h3>Hello WebXR</h3>
<p><small>Mozilla Mixed Reality</small></p>
<p>
The demo is designed as a playground where you can try different experiences and interactions in VR, and introduce newcomers to the VR world and its special language in a smooth, easy and nice way.
</p>
</figcaption>
</figure>
<figure style="grid-column-end: span var(--imgcols);">
<a href="https://castle.needle.tools/" class="img-a">
<img src="./images/castle-builder.webp">
</a>
<figcaption>
<h3>Castle Builder</h3>
<p><small>Needle Tools</small></p>
<p>
Build your own castle! Drag 3D models from the various palettes onto the stage, and create your very own world.<br/>
Works on Desktop, Mobile, VR, AR, all right in your browser. Interactions are currently optimized for VR<br/>
<br/>
Invite your friends! Click Create Room to be put into a live, multi-user space
</p>
</figcaption>
</figure>
<figure style="grid-column-end: span var(--imgcols);">
<a href="https://wonderlandengine.com/dead-secret-circle-web/" class="img-a">
<img src="./images/dcs.webp">
</a>
<figcaption>
<h3>Dead Secret Circle Web</h3>
<p><small>Wonderland Engine</small></p>
<p>
Wonderland has achieved a significant breakthrough in WebXR technology by porting the native mystery horror VR game 'Dead Secret Circle' by Robot Invader to the web.<br/>
The project demonstrates WebXR can match native performance and quality on VR headsets.<br/><br/>
The game is also accessible on PC and mobile devices, showing how WebXR is cross-platform even to traditional media.
</p>
</figcaption>
</figure>
<h2>
Getting started building a WebXR Website
</h2>
<article style="grid-column:1/-1;">
<p>These are brief guides to building a site which uses and AR and VR.</p>
<p>The WebXR device API relies on graphics APIs like WebGL & WebGL2 to work, these graphics libraries and frameworks come with WebXR support built in.</p>
</article>
<nav role="tablist" id="gettingStartedTabs">
{% for page in site.pages %}
{% assign path = page.path | split: '/' %}
{% if path[0] == "getting-started" %}
<a href="#{{ page.title | downcase | handleize }}" aria-controls="{{ page.title | downcase | handleize }}" role="tab">
{{ page.title }}
</a>
{% endif %}{% endfor %}
</nav>
<section class="tabs" aria-live="polite" role="region">
{% for page in site.pages %}
{% assign path = page.path | split: '/' %}
{% if path[0] == "getting-started" %}
<article id="{{ page.title | downcase | handleize }}" role="tabpanel">
{{ page.content | markdownify }}
</article>
{% endif %}{% endfor %}
<article class="default-fallback" role="tabpanel">
<p>Click on a tab to begin.</p>
</article>
</section>
<h2>Tooling</h2>
<figure style="grid-column-end: span calc(var(--imgcols) * 2);">
<a href="https://chrome.google.com/webstore/detail/immersive-web-emulator/cgffilbpcibhmcfbgggfhfolhkfbhmik" class="img-a">
<img alt="screenshot of the Immersive Web Emualtor" src="images/immersivewebemulator.png">
</a>
<figcaption>
<h3>Immersive Web Emulator</h3>
<p><small>Meta</small></p>
The Immersive Web Emulator browser extension lets you test your WebXR enabled pages on emulated Meta Quest devices. It's very useful for approximating how your
experience works in a real device and to quickly test from within your browser.
</figcaption>
</figure>
<figure style="grid-column-end: span calc(var(--imgcols) * 2);">
<a href="https://immersive-web.github.io/webxr-input-profiles/packages/motion-controllers/" class="img-a">
<img src="./images/input-profiles.png">
</a>
<figcaption>
<h3>WebXR Input Profiles</h3>
<p><small>W3C Immersive Web Working Group</small></p>
<p>
This repo provides a javascript library for managing known motion controller profiles, loading the most ideal known profile for a supplied input source, and creating a MotionController object that binds them together. Developers can use this library to interact with the conceptual components of an input source, rather than each individual button or axis.
</p>
</figcaption>
</figure>
<h2 id="supporttable">
Support Table for the WebXR Device API
</h2>
<div class="compat-table">
{% include compat-table.html %}
</div>
<footer>
<p>CC0 Licensed, feel free to remix, Maintained by the <a href ="https://w3.org/immersive-web">W3C Immersive Web Working and Community Groups</a>
</p>
<p>
Request changes by <a href="https://github.com/adarosecannon/immersiveweb">making a pull request on github.</a>
</p>
</footer>
</main>
<script>
Array.from(document.querySelectorAll('main > h1,main > h2, main > h3')).forEach(el => {
const id = el.id || el.textContent.replace(/[^a-z0-9]/gi,'').toLocaleLowerCase();
el.setAttribute('id', id);
const linkEl = document.createElement('A');
linkEl.className = 'targetlink';
linkEl.setAttribute('href', '#' + id);
linkEl.innerHTML = '🔗︎';
el.insertAdjacentElement('afterbegin', linkEl);
});
</script>
</body>
</html>