-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathxr.html
224 lines (218 loc) · 12.1 KB
/
xr.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lifescope-xr</title>
<link rel="stylesheet" href="https://stackedit.io/style.css" />
</head>
<body class="stackedit">
<div class="stackedit__left">
<div class="stackedit__toc">
<ul>
<li><a href="#lifescope-xr">LIFESCOPE-XR</a>
<ul>
<li><a href="#repository">Repository</a></li>
</ul>
</li>
<li><a href="#demos">Demos</a></li>
<li><a href="#augmented-reality">Augmented Reality</a>
<ul>
<li><a href="#ar-floor-topography-map-development-phase-medium-priority">1. AR Floor Topography Map (development phase, medium priority)</a></li>
<li><a href="#phone-ar-gateways-concept-phase-low-priority">2. Phone AR Gateways (concept phase, low priority)</a></li>
<li><a href="#facial-recognition-concept-phase-low-priority">3. Facial recognition (concept phase, low priority)</a></li>
<li><a href="#requirements-2">Requirements</a></li>
</ul>
</li>
<li><a href="#virtual-reality">Virtual Reality</a>
<ul>
<li><a href="#globe-of-lifescope-trails-development-phase-medium-priority">1. Globe of LIFESCOPE trails (development phase, medium priority)</a></li>
<li><a href="#infinite-procedural-walls-concept-phase-low-priority">2. Infinite procedural walls (concept phase, low priority)</a></li>
<li><a href="#memory-palace-concept-phase-low-priority">3. Memory palace (concept phase, low priority)</a></li>
</ul>
</li>
<li><a href="#bitscoop-webxr-examples">BitScoop WebXR Examples</a>
<ul>
<li><a href="#bitscoop-vr-social-login-demo">BitScoop VR Social Login Demo</a></li>
<li><a href="#bitscoop-ar-marker">BitScoop AR Marker</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="stackedit__right">
<div class="stackedit__html">
<h1 id="lifescope-xr"><a href="https://github.com/LifeScopeLabs/lifescope-xr">LIFESCOPE-XR</a></h1>
<h2 id="repository"><a href="https://github.com/LifeScopeLabs/lifescope-xr">Repository</a></h2>
<p>(development phase, medium priority)</p>
<p>The LIFESCOPE API allows anyone to create a shared virtual space to access their memory and tell their stories.</p>
<p>This repo contains a series of AR/VR Views written to extend lifescope-app codebase as JS/Vue/Nuxt plugins.</p>
<h1 id="demos">Demos</h1>
<ul>
<li><a href="https://cdn.rawgit.com/LifeScopeLabs/lifescope-xr/adc7a0a4d042e838cf85327bd1ca4d5ef44536fb/vrgallery.html">VR Gallery</a></li>
<li><a href="https://cdn.rawgit.com/LifeScopeLabs/lifescope-xr/adc7a0a4d042e838cf85327bd1ca4d5ef44536fb/armap.html">AR Map</a></li>
<li><a href="https://cdn.rawgit.com/LifeScopeLabs/lifescope-xr/adc7a0a4d042e838cf85327bd1ca4d5ef44536fb/vrmap.html">VR Map</a></li>
<li><a href="https://cdn.rawgit.com/LifeScopeLabs/lifescope-xr/adc7a0a4d042e838cf85327bd1ca4d5ef44536fb/index.html">VR Portal</a></li>
</ul>
<h1 id="augmented-reality">Augmented Reality</h1>
<p><strong>LIFESCOPE AR Marker</strong></p>
<p><img src="https://lifescopelabs.github.io/assets/xr/marker.png" alt="marker"></p>
<p><strong>LIFESCOPE AR Marker Pattern file.</strong></p>
<p><strong>Notice how the pattern encodes the variance of the bitmap</strong></p>
<p><img src="https://lifescopelabs.github.io/assets/xr/marker-patt-file.png" alt="patternar"></p>
<h2 id="ar-floor-topography-map-development-phase-medium-priority">1. AR Floor Topography Map (development phase, medium priority)</h2>
<p><strong>Marker based AR.JS Mapbox trail wireframes.</strong></p>
<p><img src="https://lifescopelabs.github.io/assets/maps/ar-phone-topo-mapbox.jpg" alt="armap"><br>
<img src="https://lifescopelabs.github.io/assets/maps/ar-phone-topo-mapbox2.jpg" alt="armap"></p>
<h3 id="requirements">Requirements</h3>
<ul>
<li><strong>MVP</strong>: See a trail of gateways left behind from LIFESCOPE location objects.</li>
<li>Shows the current location (GPS) tile and database LIFESCOPE objects using markers.</li>
<li>See location of other lifLIFESCOPEescope objects.</li>
<li>See geo-polygons drawn from LIFESCOPE places objects.</li>
<li>Able to select locations, zoom, objects</li>
<li>Ability to see AR Globe (See VR Globe)</li>
<li>Able to work without marker. Using compass, accelerometer, gyroscope, camera (slam), etc…</li>
<li>Able to see other LIFESCOPE users with permissions.</li>
</ul>
<h3 id="dependencies">Dependencies</h3>
<ul>
<li>Vue/Nuxt compatible</li>
<li><a href="https://github.com/jeromeetienne/AR.js/tree/master/aframe/demos/demo-mapbox">AR.JS</a></li>
<li><a href="https://aframe.io/">AFrame (0.8+)</a></li>
<li><a href="https://www.mapbox.com/mapbox-gl-js/api/">Mapbox (0.44.1+)</a></li>
</ul>
<h3 id="examples">Examples</h3>
<ul>
<li><a href="https://github.com/jeromeetienne/AR.js/tree/master/aframe/demos/demo-mapbox">AR.JS Mapbox with marker</a></li>
<li><a href="https://github.com/1d10t/test">AR.JS markerless</a></li>
<li><a href="https://github.com/Esri/html5-geolocation-tool-js/blob/master/js/GeolocationHelper.js">Web Geo adapter (De-noise web GPS data</a></li>
<li><a href="https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html">Marker Maker</a></li>
<li><a href="https://github.com/LifeScopeLabs/lifescopelabs.github.io/tree/master/assets/xr">BitScoop Marker</a></li>
<li><a href="https://github.com/networked-aframe/networked-aframe#more-examples">Networked AFrame</a></li>
</ul>
<h2 id="phone-ar-gateways-concept-phase-low-priority">2. Phone AR Gateways (concept phase, low priority)</h2>
<p><img src="https://lifescopelabs.github.io/assets/wireframes/ar-phone-gateway.png" alt="argateway"></p>
<h3 id="requirements-1">Requirements</h3>
<ul>
<li><strong>MVP</strong>: Shows AR gateways around the current location (GPS) from the LIFESCOPE database</li>
<li>Able to select gateways, zoom, objects</li>
<li>Able to see friends</li>
</ul>
<h3 id="dependencies-1">Dependencies</h3>
<ul>
<li>Vue/Nuxt compatible</li>
<li><a href="https://github.com/jeromeetienne/AR.js/tree/master/aframe/demos/demo-mapbox">AR.JS</a></li>
<li><a href="https://aframe.io/">AFrame (0.8+)</a></li>
<li><a href="https://www.mapbox.com/mapbox-gl-js/api/">Mapbox (0.44.1+)</a></li>
<li>chrome://flags/#enable-gamepad-extensions</li>
</ul>
<h3 id="examples-1">Examples</h3>
<ul>
<li><a href="https://github.com/1d10t/test">AR.JS markerless</a></li>
<li><a href="https://github.com/frederic-schwarz/aframe-vuejs-3dio">aframe vuejs 3dio</a></li>
<li><a href="https://github.com/Esri/html5-geolocation-tool-js/blob/master/js/GeolocationHelper.js">Web Geo adapter (De-noise web GPS data</a></li>
<li><a href="https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html">Marker Maker</a></li>
<li><a href="https://github.com/LifeScopeLabs/lifescopelabs.github.io/tree/master/assets/xr">BitScoop Marker</a></li>
<li><a href="https://github.com/networked-aframe/networked-aframe#more-examples">Networked AFrame</a></li>
<li><a href="https://github.com/jeromeetienne/aframe-ar">https://github.com/jeromeetienne/aframe-ar</a></li>
<li><a href="https://immersive-web.github.io/webxr/">https://immersive-web.github.io/webxr/</a></li>
</ul>
<h2 id="facial-recognition-concept-phase-low-priority">3. Facial recognition (concept phase, low priority)</h2>
<h2 id="requirements-2">Requirements</h2>
<ul>
<li><strong>MVP</strong>: Able to recognize faces from LIFESCOPE data</li>
<li>Capture store photo/video/location/speech of “AR encounter” in LIFESCOPE api<br>
Dependencies</li>
<li>Vue/Nuxt compatible<br>
Examples</li>
<li><a href="https://tastenkunst.github.io/brfv4_javascript_examples/">JS Facial tracking experiment</a></li>
</ul>
<h1 id="virtual-reality">Virtual Reality</h1>
<h2 id="globe-of-lifescope-trails-development-phase-medium-priority">1. Globe of LIFESCOPE trails (development phase, medium priority)</h2>
<p><strong>Aframe Earth wireframe.</strong></p>
<p><img src="https://lifescopelabs.github.io/assets/xr/arglobe.gif" alt="vrglobe"></p>
<p><strong>Mapbox trail wireframe.</strong></p>
<p><img src="https://lifescopelabs.github.io/assets/wireframes/vr-maps-aframe-mapbox.png" alt="vrmapbox"></p>
<h3 id="requirements-3">Requirements</h3>
<ul>
<li>MVP: Shows the current location (GPS) on globe and database LIFESCOPE objects using marker</li>
<li>Able to select locations, zoom, objects</li>
<li>Able to see friends</li>
</ul>
<h3 id="dependencies-2">Dependencies</h3>
<ul>
<li>Vue/Nuxt compatible</li>
<li><a href="https://github.com/jeromeetienne/AR.js/tree/master/aframe/demos/demo-mapbox">AR.JS</a></li>
<li><a href="https://aframe.io/">AFrame (0.8+)</a></li>
<li><a href="https://www.mapbox.com/mapbox-gl-js/api/">Mapbox (0.44.1+)</a></li>
</ul>
<h3 id="examples-2">Examples</h3>
<ul>
<li><a href="https://github.com/leemark/aframe-earth">Aframe Earth</a></li>
<li><a href="https://github.com/networked-aframe/networked-aframe#more-examples">Networked AFrame</a></li>
</ul>
<h2 id="infinite-procedural-walls-concept-phase-low-priority">2. Infinite procedural walls (concept phase, low priority)</h2>
<p><strong>LifeScope Gallery Mockup</strong></p>
<p><img src="https://lifescopelabs.github.io/assets/wireframes/PlayCanvasLifeScopeGalleryWireframes.png" alt="infinitewalls"></p>
<h3 id="requirements-4">Requirements</h3>
<ul>
<li><strong>MVP</strong>: Show an infinite “gallery” of content from your lifescope data.</li>
<li>Able to sort, search, curate, modify content shown.</li>
<li>Able to draw in the gallery.</li>
<li>Able to see friends.</li>
</ul>
<h3 id="dependencies-3">Dependencies</h3>
<ul>
<li>Vue/Nuxt compatible</li>
<li><a href="https://github.com/jeromeetienne/AR.js/tree/master/aframe/demos/demo-mapbox">AR.JS</a></li>
<li><a href="https://aframe.io/">AFrame (0.8+)</a></li>
<li><a href="https://gurivr.com/">GURI VR</a></li>
</ul>
<h3 id="examples-3">Examples</h3>
<ul>
<li><a href="https://github.com/omgitsraven/aframe-room-component">AFrame Room Component</a></li>
<li><a href="https://3d.io/docs/api/1/aframe-components.html">3d.io Room Objects</a></li>
<li><a href="https://github.com/networked-aframe/networked-aframe#more-examples">Networked AFrame</a></li>
</ul>
<h2 id="memory-palace-concept-phase-low-priority">3. Memory palace (concept phase, low priority)</h2>
<p><strong>AFrame generated rooms.</strong></p>
<p><img src="https://lifescopelabs.github.io/assets/wireframes/ProceduralAFrame1.png" alt="proceduralvr1"></p>
<p><strong>AFrame generated media content frames for HTML Shader.</strong></p>
<p><img src="https://lifescopelabs.github.io/assets/wireframes/ProceduralAFrame2.png" alt="proceduralvr2"></p>
<h3 id="requirements-5">Requirements</h3>
<ul>
<li><strong>MVP</strong>: Show an infinite “gallery” of content from your lifescope data.
<ul>
<li><a href="https://en.wikipedia.org/wiki/Method_of_loci">Method_of_loci</a> <a href="https://www.wikihow.com/Build-a-Memory-Palace">Learn more on how to build-a-memory-palace</a></li>
</ul>
</li>
<li>Able to sort, search, curate, modify content shown.</li>
<li>Able to draw in the gallery.</li>
<li>Able to see friends.</li>
</ul>
<h3 id="dependencies-4">Dependencies</h3>
<ul>
<li>Vue/Nuxt compatible</li>
<li><a href="https://github.com/jeromeetienne/AR.js/tree/master/aframe/demos/demo-mapbox">AR.JS</a></li>
<li><a href="https://github.com/frederic-schwarz/aframe-vuejs-3dio">aframe vuejs 3dio</a></li>
<li><a href="https://aframe.io/">AFrame (0.8+)</a></li>
<li><a href="https://gurivr.com/">GURI VR</a></li>
</ul>
<h3 id="examples-4">Examples</h3>
<ul>
<li><a href="https://github.com/omgitsraven/aframe-room-component">AFrame Room Component</a></li>
<li><a href="https://3d.io/docs/api/1/aframe-components.html">3d.io Room Objects</a></li>
<li><a href="https://github.com/networked-aframe/networked-aframe#more-examples">Networked AFrame</a></li>
</ul>
<h1 id="bitscoop-webxr-examples">BitScoop WebXR Examples</h1>
<h2 id="bitscoop-vr-social-login-demo"><a href="https://github.com/mrhegemon/bitscoop-vr-demo">BitScoop VR Social Login Demo</a></h2>
<p>Social Wars in React VR. A VR demo using the BitScoop Platform for Social Login. Filled with demo data.</p>
<h2 id="bitscoop-ar-marker">BitScoop AR Marker</h2>
<p><img src="https://lifescopelabs.github.io/assets/xr/bitscoop-marker.png" alt="markerbs"></p>
<p><strong>BitScoop Marker Pattern File. Notice how the bitmap matches the file.</strong></p>
<p><img src="https://lifescopelabs.github.io/assets/xr/bitscoop-marker-patt-file.png" alt="patternarbs"></p>
</div>
</div>
</body>
</html>