Skip to content

Commit 985a446

Browse files
bashzbashz
committed
presentation vr
1 parent 360bc94 commit 985a446

File tree

4 files changed

+150
-41
lines changed

4 files changed

+150
-41
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@ tmp/**
1010
node_modules/
1111
.sass-cache
1212
css/reveal.min.css
13-
js/reveal.min.js
13+
js/reveal.min.js
14+
/nbproject/private/

‎img/vr1.jpg

463 KB
Loading

‎img/vr2.png

34.7 KB
Loading

‎index.html

+148-40
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,157 @@
11
<!doctype html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
66

7-
<title>reveal.js</title>
7+
<title>VR Presentation</title>
88

9-
<link rel="stylesheet" href="css/reveal.css">
10-
<link rel="stylesheet" href="css/theme/black.css">
9+
<link rel="stylesheet" href="css/reveal.css">
10+
<link rel="stylesheet" href="css/theme/beige.css">
1111

12-
<!-- Theme used for syntax highlighting of code -->
13-
<link rel="stylesheet" href="lib/css/zenburn.css">
12+
<!-- Theme used for syntax highlighting of code -->
13+
<link rel="stylesheet" href="lib/css/zenburn.css">
1414

15-
<!-- Printing and PDF exports -->
16-
<script>
17-
var link = document.createElement( 'link' );
18-
link.rel = 'stylesheet';
19-
link.type = 'text/css';
20-
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
21-
document.getElementsByTagName( 'head' )[0].appendChild( link );
22-
</script>
23-
</head>
24-
<body>
25-
<div class="reveal">
26-
<div class="slides">
27-
<section>Slide 1</section>
28-
<section>Slide 2</section>
29-
</div>
30-
</div>
15+
<!-- Printing and PDF exports -->
16+
<script>
17+
var link = document.createElement('link');
18+
link.rel = 'stylesheet';
19+
link.type = 'text/css';
20+
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
21+
document.getElementsByTagName('head')[0].appendChild(link);
22+
</script>
23+
</head>
24+
<body>
25+
<div class="reveal">
26+
<div class="slides">
27+
<section>
28+
<h1>VR & Immersive Media</h1>
29+
<p>
30+
<small>By</small> <a href="https://twitter.com/bnemlaghi">Bechir Nemlaghi</a><small> with love!</small>
31+
</p>
32+
</section>
33+
<section>
34+
<h2>Disclaimer</h2>
35+
</section>
36+
<section>
37+
<h2>Introduction</h2>
38+
<p class="fragment">Since the invention of TV we consume flat based media.</p>
39+
<p class="fragment">Would the VR be the game changer?</p>
40+
</section>
41+
<section>
42+
<h2>VR AR MR</h2>
43+
<section>
44+
<p>Immersive Media is attached to many acronymes.</p>
45+
<p class="fragment">Due to those technologies being new, the following definitions are still a matter of debate.</p>
46+
</section>
47+
<section>
48+
<h3>Virtual reality (VR)</h3>
49+
<ul>
50+
<li class="fragment fade-up">Fully CG</li>
51+
<li class="fragment fade-up">Requires a special headset <small>for now</small></li>
52+
<li class="fragment fade-up">The user is inside the virtual world</li>
53+
<li class="fragment fade-up">VR apps & games</li>
54+
</ul>
55+
</section>
56+
<section>
57+
<h3>Augmented Reality (AR)</h3>
58+
<ul>
59+
<li class="fragment fade-up">Most of time it is CG elements projected in the real world</li>
60+
<li class="fragment fade-up">Requires sensors to constantly capture the environment</li>
61+
<li class="fragment fade-up">The user still can distinguish real world from virtual one</li>
62+
<li class="fragment fade-up">Pokemon GO</li>
63+
</ul>
64+
</section>
65+
<section>
66+
<h3>Mixed reality (MR)</h3>
67+
<ul>
68+
<li class="fragment fade-up">Real world and virtual world are tightly connected</li>
69+
<li class="fragment fade-up">Sensors are used on both sides</li>
70+
<li class="fragment fade-up">Real time interaction between both worlds</li>
71+
<li class="fragment fade-up">Hololens</li>
72+
</ul>
73+
</section>
74+
<section>
75+
<img src="img/vr1.jpg">
76+
</section>
77+
</section>
78+
<section>
79+
<h2>How it works</h2>
80+
<section>
81+
<p>The content is rendered twice, once per eye.</p>
82+
<p class="fragment">Using a perspective angle for each eye.</p>
83+
</section>
84+
<section>
85+
<img src="img/vr2.png">
86+
</section>
87+
</section>
88+
<section>
89+
<h2>VR Scope</h2>
90+
<section>
91+
<h3>Frameworks</h3>
92+
<ul>
93+
<li class="fragment fade-up">Unity & Unreal</li>
94+
<li class="fragment fade-up">Vulkan & VRPN</li>
95+
<li class="fragment fade-up">Aframe, PrimRose, React-vr & daydream</li>
96+
</ul>
97+
</section>
98+
<section>
99+
<h3>3D</h3>
100+
<ul>
101+
<li class="fragment fade-up">OpenGl</li>
102+
<li class="fragment fade-up">WebGl</li>
103+
</ul>
104+
</section>
105+
<section>
106+
<h3>Sensors</h3>
107+
<ul>
108+
<li class="fragment fade-up">Gyroscope</li>
109+
<li class="fragment fade-up">Cameras, including 360</li>
110+
<li class="fragment fade-up">Motion detection</li>
111+
</ul>
112+
</section>
113+
114+
<section>
115+
<h3>Hardware</h3>
116+
<ul>
117+
<li class="fragment fade-up">Mobile <small>HTC vive</small></li>
118+
<li class="fragment fade-up">Oculus Rift & cardboard</li>
119+
<li class="fragment fade-up">Leapmotion & Kinect</li>
120+
</ul>
121+
</section>
122+
</section>
123+
<section>
124+
<h2>How is the VR doing Now?</h2>
125+
</section>
126+
<section>
127+
<h1>Question Time !</h1>
128+
<p>Thank you :)</p>
129+
</section>
130+
</div>
131+
</div>
31132

32-
<script src="lib/js/head.min.js"></script>
33-
<script src="js/reveal.js"></script>
133+
<script src="lib/js/head.min.js"></script>
134+
<script src="js/reveal.js"></script>
34135

35-
<script>
36-
// More info about config & dependencies:
37-
// - https://github.com/hakimel/reveal.js#configuration
38-
// - https://github.com/hakimel/reveal.js#dependencies
39-
Reveal.initialize({
40-
dependencies: [
41-
{ src: 'plugin/markdown/marked.js' },
42-
{ src: 'plugin/markdown/markdown.js' },
43-
{ src: 'plugin/notes/notes.js', async: true },
44-
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
45-
]
46-
});
47-
</script>
48-
</body>
136+
<script>
137+
// More info about config & dependencies:
138+
// - https://github.com/hakimel/reveal.js#configuration
139+
// - https://github.com/hakimel/reveal.js#dependencies
140+
Reveal.initialize({
141+
controls: true,
142+
progress: true,
143+
history: true,
144+
center: true,
145+
transition: 'slide',
146+
dependencies: [
147+
{src: 'plugin/markdown/marked.js'},
148+
{src: 'plugin/markdown/markdown.js'},
149+
{src: 'plugin/notes/notes.js', async: true},
150+
{src: 'plugin/highlight/highlight.js', async: true, callback: function () {
151+
hljs.initHighlightingOnLoad();
152+
}}
153+
]
154+
});
155+
</script>
156+
</body>
49157
</html>

0 commit comments

Comments
 (0)