-
Notifications
You must be signed in to change notification settings - Fork 333
/
index.html
303 lines (245 loc) · 10.6 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
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
<html>
<head>
<title>Three.js and AR.js - examples</title>
<link rel=stylesheet href="css/index.css"/>
</head>
<body>
<div class="bigTitle">Three.js and AR.js Examples</div>
<hr>
The goal of this collection is to provide a set of basic and instructive examples that introduce the various features in the Javascript-based Augmented Reality (AR) library,
<a class="toc" href="https://github.com/jeromeetienne/AR.js">AR.js</a>. Advanced <a class="toc" href="https://threejs.org/">three.js</a> examples are also included.
<br/><br/>
Viewing the AR examples will require a device with a camera and one or both of the <a class="toc" href="markers/hiro.png">Hiro</a> and <a class="toc" href="markers/kanji.png">Kanji</a> marker patterns (either printed or displayed on a second device).
<br/><br/>
Source code hosted at <a class="toc" href="https://github.com/stemkoski/AR-Examples">GitHub</a>.
<hr/>
<div class="fancy">
<a href="hello-cube.html">
<img src="images/demo/hello-cube.png" class="superImage" />
<br/>Basic Cube</a>
<p class ="superText">A basic scene that superimposes a cube on a Hiro marker.
</p>
</div>
<hr>
<div class="fancy">
<a href="custom-patterns.html">
<img src="images/demo/custom-patterns.png" class="superImage" />
<br/>Many Cubes</a>
<p class ="superText">A scene that superimposes different colored cubes on a Hiro, Kanji, and letter markers.
</p>
</div>
<hr>
<div class="fancy">
<a href="smoothed-controls.html">
<img src="images/demo/hello-cube.png" class="superImage" />
<br/>Smoothed Controls</a>
<p class ="superText">The basic scene, recreated using "smoothed controls", which interpolates the marker location from frame to frame at an adjustable rate.
</p>
</div>
<hr>
<div class="fancy">
<a href="texture.html">
<img src="images/demo/texture.png" class="superImage" />
<br/>Image Texture</a>
<p class ="superText">An image is positioned to cover a Hiro marker.
</p>
</div>
<hr>
<div class="fancy">
<a href="globe.html">
<img src="images/demo/globe.png" class="superImage" />
<br/>Rotating Globe</a>
<p class ="superText">A rotating globe (illuminated by a point light) is positioned above a Hiro marker.
</p>
</div>
<hr>
<div class="fancy">
<a href="video.html">
<img src="images/demo/video.png" class="superImage" />
<br/>Video Texture</a>
<p class ="superText">A flat plane, with a video for a texture, is positioned to cover a Hiro marker.
</p>
</div>
<hr>
<div class="fancy">
<a href="shader.html">
<img src="images/demo/shader.png" class="superImage" />
<br/>Shader</a>
<p class ="superText">A flat plane moves up and down above a Hiro marker; position and tint color are controlled by vertex and fragment shaders.
</p>
</div>
<hr>
<div class="fancy">
<a href="model.html">
<img src="images/demo/model.png" class="superImage" />
<br/>Loading 3D Models</a>
<p class ="superText">A 3D model (obj and mtl files) are loaded and displayed above a Hiro marker.
</p>
</div>
<hr>
<div class="fancy">
<a href="hole-box.html">
<img src="images/demo/hole-box.png" class="superImage" />
<br/>Hole in the Floor (Box)</a>
<p class ="superText">A "hole in the floor" effect. Uses a box geometry to mask the hidden parts of the hole.
</p>
</div>
<hr>
<div class="fancy">
<a href="hole-plane.html">
<img src="images/demo/hole-box.png" class="superImage" />
<br/>Hole in the Floor (Plane)</a>
<p class ="superText">Another "hole in the floor" effect, using a plane geometry to mask the hidden parts of the hole.
</p>
</div>
<hr>
<div class="fancy">
<a href="hole-ring.html">
<img src="images/demo/hole-ring.png" class="superImage" />
<br/>Hole in the Floor (Ring)</a>
<p class ="superText">A cylindrical "hole in the floor" effect, using a ring geometry to mask the hidden parts of the hole.
</p>
</div>
<hr>
<div class="fancy">
<a href="basic-scene.html" target="_blank">
<img src="images/demo/basic-scene.png" class="superImage" />
<br/>Basic Scene</a>
<p class ="superText"> A basic scene created with only Three.js (no AR), useful for prototyping ideas before adding in AR components. </p>
</div>
<hr>
<div class="fancy">
<a href="water-effect.html" target="_blank">
<img src="images/demo/water-effect.png" class="superImage" />
<br/>Water Effect (no AR)</a>
<p class ="superText"> An animated effect (using shaders) that looks like water flowing
out from a central point and being absorbed into the floor. (No AR.)</p>
</div>
<hr>
<div class="fancy">
<a href="water-effect-AR.html" target="_blank">
<img src="images/demo/water-effect-AR.png" class="superImage" />
<br/>Water Effect (AR version)</a>
<p class ="superText"> An animated effect (using shaders) that looks like water flowing
out from a cylindrical hole (displayed above a Hiro marker), and being absorbed into the floor.
<br/>Video preview <a class="toc" href="https://www.youtube.com/watch?v=3DfcD5APnEU">here</a>. </p>
</div>
<hr>
<div class="fancy">
<a href="keyboard-mesh-move.html" target="_blank">
<img src="images/demo/mesh-movement.png" class="superImage" />
<br/>Keyboard-Based Object Movement</a>
<p class ="superText"> Move a cube around the screen with the keyboard. Controls (<a href="images/movement-controls.png">image</a>): <br>W/A/S/D -- move Forward/Left/Backward/Right (standard), <br>Q/E -- rotate Left/Right, <br>R/F -- move Up/Down (think: <b>R</b>ise/<b>F</b>all), <br>T/G -- tilt Up/Down (think: look at <b>T</b>ower/<b>G</b>round).</p>
</div>
<hr>
<div class="fancy">
<a href="keyboard-camera-move.html" target="_blank">
<img src="images/demo/camera-movement.png" class="superImage" />
<br/>Keyboard-Based Camera Movement</a>
<p class ="superText"> Move a camera around the screen with the keyboard. <br>Uses same controls as Object Movement example. </p>
</div>
<hr>
<div class="fancy">
<a href="portal-half-keyboard-test.html" target="_blank">
<img src="images/demo/portal-half-keyboard-test.png" class="superImage" />
<br/>Portal Test</a>
<p class ="superText"> Creating a "portal to another world" effect. Camera moves using same controls as Object Movement example. Only visible from one side.
<br/>Not very robust -- see the following portal examples instead.</p>
</div>
<hr>
<div class="fancy">
<a href="stencil-test.html" target="_blank">
<img src="images/demo/stencil-test.png" class="superImage" />
<br/>Stencil Buffer Test</a>
<p class ="superText"> A simple example that uses layers and the stencil buffer to render part of the scene
onto a plane in the scene. Camera moves using same controls as Object Movement example. Useful for understanding portal view example. </p>
</div>
<hr>
<div class="fancy">
<a href="clipping-planes.html" target="_blank">
<img src="images/demo/clipping-planes.png" class="superImage" />
<br/>Clipping Planes</a>
<p class ="superText"> A simple example that sets up a clipping plane (aligned with a plane mesh) to limit the volume of the scene that is rendered. Useful for understanding portal view example. </p>
</div>
<hr>
<div class="fancy">
<a href="portal-view.html" target="_blank">
<img src="images/demo/portal-view.png" class="superImage" />
<br/>Portal View</a>
<p class ="superText"> A "portal to another world" effect. Portal visible through both sides.
<br/>Camera moves using same controls as Object Movement example; also, press 1, 2, or 3 to see the view from different cameras.
<br/>Uses stencil buffer and clipping planes for accurate rendering.
</p>
</div>
<hr>
<div class="fancy">
<a href="portal-view-AR.html" target="_blank">
<img src="images/demo/portal-view-AR.png" class="superImage" />
<br/>Portal View (AR Version)</a>
<p class ="superText"> An augmented reality version of the "portal to another world" effect. Portal renders above a Kanji marker.
<br/>Video preview <a class="toc" href="https://www.youtube.com/watch?v=-gZ3Kv9juYg">here</a>. </p>
</div>
<hr>
<div class="fancy">
<a href="magic-cube.html" target="_blank">
<img src="images/demo/magic-cube.png" class="superImage" />
<br/>Magic Cube Effect</a>
<p class ="superText"> Creates a "magic cube effect" that overlays a cube covered with six AR markers <a class="toc" href="markers/cube.png">in this pattern</a>.
<br/>Video preview <a class="toc" href="https://www.youtube.com/watch?v=ZI6oJJFgACM">here</a>. </p>
</div>
<hr>
<div class="fancy">
<a href="globe-multi-marker.html" target="_blank">
<img src="images/demo/globe-multi-marker.png" class="superImage" />
<br/>Globe with Multiple Markers</a>
<p class ="superText"> Similar to the Rotating Globe example: places a globe over a Kanji marker. If Kanji marker is blocked, uses other markers (<a class="toc" href="markers/letterA.png">letter A</a> and <a class="toc" href="markers/letterB.png">letter B</a>) to position the globe. </p>
</div>
<hr>
<div class="fancy">
<a href="refraction.html" target="_blank">
<img src="images/demo/refraction.png" class="superImage" />
<br/>Refraction</a>
<p class ="superText"> Creates a rotating torus knot above a Kanji marker. The surface of the knot refracts the scene behind it.
<br/>Video preview <a class="toc" href="https://www.youtube.com/watch?v=8-YnBk1LL-8">here</a>.
</p>
</div>
<hr>
<div class="fancy">
<a href="shadow.html" target="_blank">
<img src="images/demo/shadow.png" class="superImage" />
<br/>Shadow</a>
<p class ="superText"> Creates a rotating torus knot above a Kanji marker. The knot casts a shadow onto the plane containing the marker. </p>
</div>
<hr>
<div class="fancy">
<a href="shadow-balls.html" target="_blank">
<img src="images/demo/shadow-balls.png" class="superImage" />
<br/>Shadow Balls</a>
<p class ="superText"> Creates four colored bouncing basketballs around a Kanji marker. The balls cast shadows onto the plane containing the marker. </p>
</div>
<hr>
<div class="fancy">
<a href="parabolic-path.html" target="_blank">
<img src="images/demo/parabolic-path.png" class="superImage" />
<br/>Parabolic Path</a>
<p class ="superText"> A basketball launches from a <a class="toc" href="markers/letterA.png">Letter-A</a> marker and falls towards a <a class="toc" href="markers/letterB.png">Letter-B</a> marker, following a parabolic path. The ball casts shadows, and a clipping plane (see above example) is used
to make the ball disappear into the marker. </p>
</div>
<!--
<div class="fancy">
<a href="screen-hole.html" target="_blank">
<img src="images/demo/screen-hole.png" class="superImage" />
<br/>Screen Hole with Multiple Markers</a>
<p class ="superText"> Simulating a "hole-in-the-wall" effect; uses <a href="markers/kanji-abcd.png">Kanji-ABCD</a> pattern. For simplicity, open <a href="screen-hole-QR.png">this image</a> and scan the QR code with your phone/tablet to be brought directly to the example (idea from Jerome Etienne). </p>
</div>
-->
<!--
<div class="fancy">
<a href="zzzz.html" target="_blank">
<img src="images/demo/zzzz.png" class="superImage" />
<br/>zzzz</a>
<p class ="superText"> ... </p>
</div>
-->
</body>
</html>