forked from lisa-wolfgang/vrEmbed
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
241 lines (218 loc) · 12.1 KB
/
index.html
File metadata and controls
241 lines (218 loc) · 12.1 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
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
<!--
Copyright 2015 Bhautik J Joshi
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>vrEmbed</title>
<meta name="description" content="lisa-wolfgang.github.io/vrEmbed">
<meta name="author" content="Bhautik Joshi">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- Stop page loading and launch editor first if URL params are specified
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<vrEditor></vrEditor>
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/custom.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
</head>
<script src="vrEmbed.min.js"></script>
<script src="vrLoader.min.js"></script>
<!-- <script src="./bin/vrEmbed.js"></script> -->
<!-- <script src="./bin/vrLoader.js"></script> -->
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<br/>
<div class="container">
<div class="row">
<div class="twelve columns">
<div class="header-wrap"><div>
<story noGui="true">
<scene>
<photo src="src/assets/yerba_buena.jpg" isStereo="false" sphereParams="360,180,15,0"/>
</scene>
</story><script async src="vrEmbed.min.js" charset="utf-8"></script>
</div></div>
<div class="logoOverlay"><img src="src/assets/vrEmbedLogo.png" width=100%/></div>
</div>
</div>
</div>
<div class="container">
<div class="row headerbar">
<div class="twelve columns">
<a href="https://lisa-wolfgang.github.io/vrEmbed/create" target="_blank">Create</a> |
<a href="https://lisa-wolfgang.github.io/vrEmbed/docs" target="_blank">Docs</a> |
<a href="https://github.com/lisa-wolfgang/vrEmbed" target="_blank">Github</a> |
<a href="https://twitter.com/vrEmbed" target="_blank">Twitter</a> |
<a href="https://www.facebook.com/vrembed/" target="_blank">Facebook</a>
</div>
</div>
<div class="row">
<div class="twelve columns alignright">
(c) Bhautik Joshi 2016, republished 2020 by <a href="https://scratch.mit.edu/users/lisa_wolfgang">lisa_wolfgang</a>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="row">
<div class="one-half column">
<h4>Simple web Virtual Reality embeds - take any images and turn them into a VR experience.</h4>
<a href="create/index.html" class="button button-primary" target="_blank"><h5>Click here to get started!</h5></a>
</div>
<div class="one-half column">
<img src="src/assets/headsets.png" width=60%/>
</div>
</div>
<div class="row">
<br/>
</div>
<div class="row">
<div class="twelve columns"><h3>Example VR Embeds</h3><br>In order for this mode to work on iOS, you need to use an XR-enabled browser. <a href="https://apps.apple.com/us/app/webxr-viewer/id1295998056">This one is free</a>.</div>
</div>
<div class="row">
<div class="one-third column"><a href="docs/example_missionbay.html" target="_blank"><img src="src/assets/example_missionbay.png" width=100%></a></div>
<div class="one-third column"><a href="docs/example_stereo.html" target="_blank"><img src="src/assets/example_stereo.png" width=100%></a></div>
<div class="one-third column"><a href="docs/example_hwsf.html" target="_blank"><img src="src/assets/example_hwsf.png" width=100%></a></div>
</div>
<div class="row">
<div class="one-third column"><a href="docs/example_fleetweek.html" target="_blank"><img src="src/assets/example_fleetweek.png" width=100%></a></div>
<div class="one-third column"><a href="docs/example_sambaxe.html" target="_blank"><img src="src/assets/example_sambaxe.png" width=100%></a></div>
<div class="one-third column"><a href="docs/example_batkid.html" target="_blank"><img src="src/assets/example_batkid.png" width=100%></a></div>
</div>
<div class="row"><br/></div>
<div class="row">
<div class="twelve columns"><h4><a href="docs">How to Use</a></h4></div>
</div>
</div>
</div>
<div class="section values">
<div class="container">
<div class="row">
<div class="one-third column value">
<h2 class="value-multiplier">Simple</h2>
<h5 class="value-heading">Does one job well</h5>
<p class="value-description">It's not a game engine - vrEmbed is optimized to just take your 2D and 3D images and give you versatile options to display them in VR.</p>
</div>
<div class="one-third column value">
<h2 class="value-multiplier">No apps</h2>
<h5 class="value-heading">Use anywhere</h5>
<p class="value-description">No need for a native app - works in mobile and desktop browsers, and loads <i>fast</i> - the JavaScript is less than <i>150kb</i></p>
</div>
<div class="one-third column value">
<h2 class="value-multiplier">Easy</h2>
<h5 class="value-heading">Build embeds fast</h5>
<p class="value-description">Simple embed codes to create a vrEmbed from <i>any</i> image - these can be chained together to make entire VR stories!</p>
</div>
</div>
<div class="row">
<div class="one-third column value">
<h3 class="value-multiplier">Accessible</h3>
<h5 class="value-heading">Stereo blindness</h5>
<p class="value-description">At least 10% of the population can't use VR headsets or see 3D - vrEmbed won't leave these users behind.</p>
</div>
<div class="one-third column value">
<h2 class="value-multiplier">Free</h2>
<h5 class="value-heading">Open Source</h5>
<p class="value-description">vrEmbed is <a href="https://github.com/lisa-wolfgang/vrEmbed/" target="_blank">open source</a>!</p>
</div>
<div class="one-third column value">
<h3 class="value-multiplier">Compatible</h3>
<h5 class="value-heading">Headset support</h5>
<p class="value-description">vrEmbed has a support for an ever-growing range of viewing modes, from red-blue glasses to Google Cardboard and beyond.</p>
</div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="row">
<div class="one-half column"><h2>One-line embed example</h2><br>In order for this mode to work on iOS, you need to use an XR-enabled browser. <a href="https://apps.apple.com/us/app/webxr-viewer/id1295998056">This one is free</a>.</div>
<div class="one-half column">
<div class="code"><a class="vrEmbedPhoto" src="src/assets/embarcadero_center.jpg" isStereo="false" sphereParams="360,180,0,0"></a><script async src="//lisa-wolfgang.github.io/vrEmbed/vrEmbed.min.js" charset="utf-8"></script></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="twelve columns">
<p><a class="vrEmbedPhoto" src="src/assets/embarcadero_center.jpg" isStereo="false" sphereParams="360,180,0,0"></a><script async src="vrEmbed.min.js" charset="utf-8"></script></p>
</div>
</div>
</div>
<div class="container">
<div class="row headerbar">
<br/>
</div>
<br/><br/>
<div class="row">
<div class="one-third column">
<h2>Who is vrEmbed for?</h2>
</div>
<div class="two-thirds column">
<ul>
<li><i>Artists</i> and <i>storytellers</i> who want to experiment with narratives in VR.
<li><i>Photographers</i> who want to add a sense of immersion to their existing photos.
<li>Folks with <i>3D-stereo</i> images who need an up-to-date medium to showcase their work.
<li><i>Academics</i> and <i>researchers</i> who want an easy, extensible platform to experiment with storytelling and interaction techniques in VR.
</li>
</div>
</div>
<div class="row">
<div class="one-half column">
<h2>Open-source goodness</h2>
</div>
<div class="one-half column">vrEmbed is build using the tiny-but-fast <a href="http://twgljs.org/" target="_blank">twgl</a> and <a href="http://browserify.org/" target="_blank">browserify</a>. These pages are laid out using <a href="http://getskeleton.com/" target="_blank">skeleton</a>.</div>
</div>
</div>
</div>
<div class="section values">
<div class="row">
<div class="two-thirds column value tenPxPad">
<h4 class="value-multiplier">About Bhautik</h4>
I’ve specialized in not specializing and I’ve worked on: broad and deep realtime data analysis at web-scale, developing tools for stereoscopy for feature films, motion capture, virtual reality, previsualization for TV, game development, real-time computing, signal analysis, surgical simulation, medical imaging and one memorable summer neatly folding menswear in chain retail. I have a PhD in and Masters in Biomedical Engineering from the University of New South Wales which I completed in 2006. In my spare time I’m a semi-professional photographer which has led me on all sorts of adventures; I’m also an active advocate for art and the narrative it provides in the local community.
<br/>
[ <a href="https://www.linkedin.com/in/bhautik" target="_blank">linkedIn</a> | <a href="https://www.flickr.com/photos/captin_nod" target="_blank">flickr</a> | <a href="https://twitter.com/bhautikj" target="_blank">twitter</a> ]
</div>
<div class="one-third column value tenPxPad">
<h4 class="value-multiplier">Collaborations</h4>
Got an awesome VR art or technical idea and want to collaborate? Email me at <a href="mailto:bjoshi@vrembed.org?Subject=vrEmbed%20shenanigans" target="_top">bjoshi@vrembed.org</a>!
</div>
</div>
<br/><br/>
<div class="row">
<div class="twelve columns">
vrEmbed is (c) Bhautik Joshi 2015-16 and available under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache 2.0</a> Open Source license.
Republished 2020 by <a href="https://scratch.mit.edu/users/lisa_wolfgang">lisa_wolfgang</a>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>