-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathchapter0.html
More file actions
182 lines (158 loc) · 8.15 KB
/
chapter0.html
File metadata and controls
182 lines (158 loc) · 8.15 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Reality Media - Chapter 0: Introduction</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<!-- Navigation/Table of Contents -->
<nav class="black" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="index.html" class="brand-logo white-text"><strong>reality</strong>media</a>
<ul id="nav-mobile" class="sidenav">
<li><div class="user-view">
<div class="background">
<img src="/assets/background1.jpg">
</div>
<span class="white-text">Table of Contents</span>
</div></li>
<li><a class="waves-effect" href="chapter0.html">0. Introduction</a></li>
<li><a href="#">1. What are VR & AR?</a></li>
<li><a href="#">2. History of Reality Media</a></li>
<li><a href="#">3. 3D Graphics</a></li>
<li><a href="#">4. Tracking & Sensing</a></li>
<li><a href="#">5. Presence</a></li>
<li><a href="#">6. Genres of VR & AR</a></li>
<li><a href="#">7. Mirror Worlds & AR Cloud</a></li>
<li><a href="#">8. The Metaverse</a></li>
<li><a href="#">9. Privacy, Ethics, and Society</a></li>
<li><a href="chapter10.html">10. The Future</a></li>
</ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons white-text">menu</i></a>
</div>
</nav>
<div id="index-banner" class="parallax-container">
<div class="section no-pad-bot">
<div id="titlecontainer" class="container" style="background-color: rgba(0,0,0,0.65); margin-top: 5%">
<div class="row">
<div class="col m12 center-align" >
<h1 class="header center white-text">0. Introduction</h1>
</div>
</div>
<div class="row">
<div class="col m12 center-align" >
<a href="#" class="btn grey darken-1" style="margin-bottom: 5%;">Enter VR</a>
</div>
</div>
</div>
<div class="parallax"><img src="/assets/laciotat-train.gif" alt="La Ciotat Train"></div>
</div>
</div>
<!--Text-->
<div class="container">
<div class="section">
<div class="row">
<div class="col s10 offset-s1">
<br>
<br>
<p class="flow-text" style="font-style: italic;">
In January 1896 an audience in a basement room of the Grand Café in Paris attended one of the first public demonstrations of the Lumière brothers’ all-in-one camera and projector: the cinématographe. One of the films shown was The Arrival of the Train at la Ciotat Station. All that happens in the approximately 50-second film is that a steam engine and several passenger cars pull into the station and glide to a stop. As the train comes closer, some in the audience panic. Imagining that the train is going to burst out of the screen into the room, they leave their seats and rush for the door. </p>
</div>
</div>
</div>
<div class="section" >
<div class="row">
<div class="col s12 center-align">
<img src="/assets/laciotat-train.gif" alt="La Ciotat Train" >
</div>
</div>
</div>
<div class="section" >
<div class="row">
<div class="col s10 offset-s1">
<p class="flow-text">
It is a great story but almost certainly apocryphal. The sophisticated Parisian audience were astonished, not fooled, and what astonished them was that moving images could seem so real (Gunning [1989] 2009; 1986). They were astonished not by reality, but by a reality medium. Film became one of the most important reality media of the twentieth century, and in some ways, it is a forerunner of Virtual Reality. Let’s reimagine that scene in VR.
</p>
</div>
</div>
</div>
<div class="section" >
<div class="row">
<div class="col s10 offset-s1">
<p class="flow-text" style="font-style: italic;">
Seated in your living room at home, you put on your VR headset and are transported back to that hall in the Grand Café. You can look all around you at the other spectators. You can turn all the way around and see the back of the hall. All of these are rendered in realistic 3D graphics. The Arrival of the Train at La Ciotat Station begins to play on the screen. When the train approaches, the shiny engine bursts through the screen into the hall and comes to a stop among scattered chairs. The 3D spectators jump up and have managed to get out of the way.
</p>
</div>
</div>
</div>
<div class="section" >
<div class="row">
<div class="col s10 offset-s1">
<h4 style="font-weight:600;">
What are reality media?</h4>
<p class="flow-text">
Reality media redefine reality also in two ways. Reality media do not get us closer to some absolute definition of the real world; instead, they work by comparison. When the screening of La Ciotat announced film as a new reality medium in 1896, the audience was comparing what they saw on the screen to other media that they knew, particularly photography. The film was photography in motion, and so it looked more like a moving train than any medium they had seen before. From that moment on, their reality was redefined because a new reality medium now existed that gave them a new perspective on the real. We call this the La Ciotat effect, and it is the effect that each reality medium has. Each offers us a new representation of the world that we implicitly compare to our experience of the world in itself and through other media.
</p>
</div>
</div>
</div>
<div class = "section">
<div class="row">
<div class="col m12 center-align" >
<a href="chapter10.html" class="btn grey darken-1" style="margin-bottom: 5%;">Read Book</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="section">
</div>
</div>
<!--Footer-->
<footer class="page-footer black accent-1">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">About</h5>
<p class="grey-text text-lighten-4">
Reality Media Website from Augmented Environments Team at Georgia Tech
</p>
</div>
<h5 class="white-text">Content</h5>
<div class="col l3 s12">
<ul>
<li><a class="white-text" href="#!">Chapter 1</a></li>
<li><a class="white-text" href="#!">Chapter 2</a></li>
<li><a class="white-text" href="#!">Chapter 3</a></li>
<li><a class="white-text" href="#!">Chapter 4</a></li>
<li><a class="white-text" href="#!">Chapter 5</a></li>
</ul>
</div>
<div class="col l3 s12">
<ul>
<li><a class="white-text" href="#!">Chapter 6</a></li>
<li><a class="white-text" href="#!">Chapter 7</a></li>
<li><a class="white-text" href="#!">Chapter 8</a></li>
<li><a class="white-text" href="#!">Chapter 9</a></li>
<li><a class="white-text" href="chapter10.html">Chapter 10</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="brown-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>