-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
245 lines (224 loc) · 8.46 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Getting started with WebXR</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section data-background="#229ed4">
<h1>Getting started with WebXR</h1>
</section>
<section>
<section data-background="assets/my-name-is.jpg">
<h2>Let's start with the basics</h2>
<p>Who am I?</p>
</section>
<section data-background="#D4145A">
<h2>My name is Boris Budini</h2>
<h3 class="fragment">I come from Albania</h3>
<p class="fragment">And I'm really excited to attend my first FOSSCOMM</ p>
</section>
<section data-background="assets/lego.jpg">
<h1>I am a part of</h1>
<h3 class="fragment">Open Labs Hackerspace</h3>
<h3 class="fragment">Collective 68</h3>
<h3 class="fragment">Mozilla Tech Speakers</h3>
</section>
<section data-background="#D4145A">
<h1>And the most important thing about me is..</h1>
</section>
<section data-background="assets/topkek.gif">
<h2>I love cats</h2>
<h4>Her name's TopKek</h4>
</section>
</section>
<section>
<section data-background="assets/story.jpg">
<h2>Let me tell you a <em>story</em></h2>
</section>
<section data-background="#229ed4">
<h2>Between 1920-1940</h2>
<p>The animation industry exploded</p>
<p class="fragment">And a man that went by the name of Max Fleischer</p>
<p class="fragment">Pioneered today's animation</p>
</section>
<section data-background="assets/fleischer.jpg">
<h2>He was the mastermind behind Popeye & Betty Boop</h2>
<p class="fragment">But more importantly he created rotoscoping</p>
</section>
<section data-background="assets/rotoscoping.gif">
<h2 style="color:#000">Rotoscoping allowed artists to trace over live action footage</h2>
<p style="color:#000">Which not only helped to develop animations faster, but could be used in a very interesting way</p>
</section>
<section data-background="assets/inkwell.gif">
<h2 style="-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: black;">It allowed Max to bring characters to life</h2>
<p style="-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: black;">And make them interact with real life objects</p>
<p style="-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: black;">This is very reminiscent of today's Augmented Reality</p>
</section>
</section>
<section>
<section data-background="#229ed4">
<h2>Starting with the basics</h2>
<p class="fragment">What is XR</p>
<p class="fragment">What is WebXR</p>
</section>
<section data-background="#229ed4">
<h2>How did this all start?</h2>
<p class="fragment">The technology for VR goes as back as 1968</p>
<p class="fragment">And with the advancement of technology</p>
<p class="fragment">It entered the mainstream</p>
</section>
<section data-background="#229ed4">
<h2>Some statistics</h2>
<p>In 2016</p>
<ul>
<li class="fragment">84M Cardboards were sold</li>
<li class="fragment">2.3M Samsung Gear VR</li>
<li class="fragment">1.8M other VR devices</li>
</ul>
<p class="fragment">That's over <em>88'000'000</em> devices</p>
</section>
</section>
<section>
<section data-background="#D4145A">
<h2>It's fair to say</h2>
<p>VR is popular</p>
<p class="fragment">But there are some issues with it</p>
</section>
<section data-background="#229ed4">
<h2>Gatekeepers</h2>
</section>
<section data-background="#229ed4">
<h2>Install times</h2>
</section>
<section data-background="#229ed4">
<h2>Closed</h2>
</section>
</section>
<section>
<section data-background="#D4145A">
<h2>However</h2>
<p>This issues aren't present on the WebXR community</p>
<p class="fragment">And this has to do with the way the web operates </p>
</section>
<section data-background="#229ed4">
<h2>Open</h2>
</section>
<section data-background="#229ed4">
<h2>Connected</h2>
</section>
<section data-background="#229ed4">
<h2>Instant</h2>
</section>
<section data-background="#229ed4">
<h2>Accessible</h2>
</section>
</section>
<section>
<section data-background="#D4145A">
<h2>But how do you create WebXR?</h2>
<ul>
<li>A-Frame</li>
<li>AR.js</li>
</ul>
</section>
<section data-background="#229ed4">
<h2>A-Frame</h2>
</section>
<section data-background="#229ed4">
<h2>Wide support</h2>
<ul>
<li>Firefox</li>
<li>Chrome</li>
<li>Microsoft Edge</li>
<li>Samsung Web Browser</li>
<li>And more</li>
</ul>
</section>
<section data-background="#229ed4">
<h2>Easy code</h2>
<pre><code class="hljs" data-line-numbers="3,6-12"><html>
<head>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
</code></pre>
</section>
<section data-background-iframe="demo.html" data-background-interactive>
</section>
<section data-background="#229ed4">
<h2> Anybody miss the 80s?</h2>
</section>
<section data-background-iframe="vapor.html" data-background-interactive>
</section>
</section>
<section data-background="#229ed4">
<h2>Want to check out more?</h2>
<p>Head over to hubs.mozilla.com</p>
</section>
<section data-background="#D4145A">
<h2>And with that</h2>
<p class="fragment"> I want to give all of you a big thank you</p>
<p class="fragment"> And if you have any questions, now's your chance</p>
</section>
<section data-background="assets/qa.jpg">
<h2>Q&A</h2>
<p>Don't be shy</p>
</section>
</div>
</div>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true },
{ src: 'plugin/search/search.js', async: true },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>