This repository has been archived by the owner on Jul 22, 2024. It is now read-only.
forked from immersive-web/immersiveweb.dev
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
207 lines (205 loc) · 10.2 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
---
---
<!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" 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"</code> is requred.</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://mixedreality.mozilla.org/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://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://www.with.in/watch/what-you-dont-know" class="img-a">
<img src="./images/wydk.png">
</a>
<figcaption>
<h3>What You Don't Know</h3>
<p><small>Jono & Mr. Doob</small></p>
<p>
Dive into the creative process of avant-pop artist Matthew Dear from his new single of the same name. Floating above you is a magic eight-ball reciting lyrics. In the distance planetary objects orbit around you to the beat. And directly ahead is an elastic donut which bounces, bulges, and twists to the complex melodies.
</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://blog.mozvr.com/webxr-emulator-extension/" class="img-a">
<img src="./images/wbxrapiemulator.png">
</a>
<figcaption>
<h3>WebXR API Emulator</h3>
<p><small>Mozilla Mixed Reality</small></p>
WebXR Emulator extension, for Chrome and Firefox enables users and developers to run and test WebXR content in desktop browsers without using a real XR device.
The extension will emulate the WebXR API on browsers that don’t support it yet and also provide a list of XR devices with their controllers to emulate.
</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>