-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathindex.html
245 lines (235 loc) · 13.3 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
<!DOCTYPE html>
<html lang="en_US">
<head>
<title>ForgeJS Samples</title>
<link rel="stylesheet" href="./css/bootstrap.min.css" media="screen,projection" charset="utf-8" />
</head>
<body>
<div class="container">
<h2 class="display-1">ForgeJS Features Samples</h2>
<p class="lead">Click on a project link to try it! Learn from these samples.</p>
<table class="table table-striped table-hover">
<thead class="thead-inverse">
<tr>
<th>name</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="projects/simple-project/" target="_blank">Simple project</a></td>
<td>It is the simpliest possible project : a very tiny webpage, a tiny configuration, and only one image to display. This is an example of the minimum required to run a project.</td>
</tr>
<tr>
<td><a href="projects/littleplanet/" target="_blank">Littleplanet view</a></td>
<td>A simple project with a little planet view. This project uses the GoPro view that is between a rectilinear and a little planet effect depending on your zoom factor.</td>
</tr>
<tr>
<td><a href="projects/view-flat/" target="_blank">Flat view</a></td>
<td>This project demonstrates the flat view and its options.</td>
</tr>
<tr>
<td><a href="projects/multiple-scenes/" target="_blank">Multiple scenes</a></td>
<td>A simple example showing how to navigate through scenes.</td>
</tr>
<tr>
<td><a href="projects/video/" target="_blank">Simple video</a></td>
<td>A very simple example with a video playing.</td>
</tr>
<tr>
<td><a href="projects/media-grid/" target="_blank">Media grid</a></td>
<td>Demonstration of media grid.</td>
</tr>
<tr>
<td><a href="projects/multiresolution/" target="_blank">Multiresolution</a></td>
<td>An example to demonstrate the ForgeJS ability to handle any kind of panoramic-image size through multiresolution image processing.</td>
</tr>
<tr>
<td><a href="projects/multiple-media/" target="_blank">Multiple media</a></td>
<td>Many scenes, each with a different media type definition.</td>
</tr>
<tr>
<td><a href="projects/multiple-locales/" target="_blank">Multiple locales</a></td>
<td>Using the <em>LocaleSelector</em> plugin, it is possible to switch between the multiple locales present in this project.</td>
</tr>
<tr>
<td><a href="projects/change-view/" target="_blank">Changing the view</a></td>
<td>Change the view in realtime, going to Rectilinear to Little Planet, without stopping the playing video and without changing the orientation of the camera.</td>
</tr>
<tr>
<td><a href="projects/special-effects/" target="_blank">Special effects</a></td>
<td>Apply a special effect on a scene, and toggle it to view how it affects the scene.</td>
</tr>
<tr>
<td><a href="projects/audio-playlists/" target="_blank">Audio playlists</a></td>
<td>Using playlists, it's possible to apply a background sound track to each scene.</td>
</tr>
<tr>
<td><a href="projects/ambisonic/" target="_blank">Ambisonics</a></td>
<td>Using first-order ambisonics into a scene.</td>
</tr>
<tr>
<td><a href="projects/directors-cut/" target="_blank">Director's cut</a></td>
<td>Change the orientation of the camera in realtime according to waypoints.</td>
</tr>
<tr>
<td><a href="projects/scene-sync/" target="_blank">Scene synchronization</a></td>
<td>Navigate through videos and while keeping the video current time.</td>
</tr>
<tr>
<td><a href="projects/mpeg-dash/" target="_blank">MPEG-DASH videos</a></td>
<td>Video player based on MPEG-DASH streaming technology.</td>
</tr>
<tr>
<td><a href="projects/hotspots/" target="_blank">Hotspots</a></td>
<td>Add hotspots to a scene.</td>
</tr>
<tr>
<td><a href="projects/hotspots-actions/" target="_blank">Hotspots with actions</a></td>
<td>Add actions to hotspots.</td>
</tr>
<tr>
<td><a href="projects/hotspots-animation/" target="_blank">Moving hotspots</a></td>
<td>Apply animation transformations to hotspots.</td>
</tr>
<tr>
<td><a href="projects/hotspots-sounds/" target="_blank">Hotspots with spatialized sounds</a></td>
<td>Add hotspots with spatialized sounds to a scene.</td>
</tr>
<tr>
<td><a href="projects/hotspots-geometry/" target="_blank">Hotspots geometry</a></td>
<td>Add hotspots with 3D geometries such as a sphere or a box.</td>
</tr>
<tr>
<td><a href="projects/hotspots-scale/" target="_blank">Hotspots scale</a></td>
<td>Hotspots that are keeping the same aspect whatever the fov is.</td>
</tr>
<tr>
<td><a href="projects/hotspots-states/" target="_blank">Hotspots states</a></td>
<td>Hotspots states allows you to change the material on mouse over or setup a toggle system like checkboxes.</td>
</tr>
<tr>
<td><a href="projects/hotspots-states-sound/" target="_blank">Hotspots states sound</a></td>
<td>Hotspots states allows you to emit a sound on mouse over.</td>
</tr>
<tr>
<td><a href="projects/hotspots-states-animation/" target="_blank">Hotspots states animation</a></td>
<td>This sample show how to setup different animations for different states.</td>
</tr>
<tr>
<td><a href="projects/hotspots-sprite/" target="_blank">Hotspots animated sprite</a></td>
<td>Hotspots that have an animated sprite as texture.</td>
</tr>
<tr>
<td><a href="projects/hotspots-video/" target="_blank">Hotspots video</a></td>
<td>Hotspots that have a video as texture.</td>
</tr>
<tr>
<td><a href="projects/hotspots-dom/" target="_blank">Hotspots DOM</a></td>
<td>Hotspots that are not 3D objects but are DOM elements positionned in 2D space over the media.</td>
</tr>
<tr>
<td><a href="projects/controller-gamepad/" target="_blank">Gamepad controller</a></td>
<td>Sample to demonstrate and test the usage of gamepad controllers with ForgeJS. The plugin used to monitor the Gamepad only works on Chrome at the moment.</td>
</tr>
<tr>
<td><a href="projects/controller-pointer/" target="_blank">Pointer controller</a></td>
<td>Sample to demonstrate and test the settings of a pointer controller.</td>
</tr>
<tr>
<td><a href="projects/multiple-viewers/" target="_blank">Multiple Viewers</a></td>
<td>A test case for multiple FORGE.Viewer in the same page.</td>
</tr>
<tr>
<td><a href="projects/camera-limits/" target="_blank">Camera limitation</a></td>
<td>Apply direction and limits to the orientation and the field of view of the camera.</td>
</tr>
<tr>
<td><a href="projects/camera-parallax/" target="_blank">Camera parallax</a></td>
<td>Apply a camera parallax effect on the hotspots layer.</td>
</tr>
<tr>
<td><a href="projects/camera-events/" target="_blank">Camera events</a></td>
<td>This projects logs in the console the differents camera events available in the API.</td>
</tr>
<tr>
<td><a href="projects/media-video-events/" target="_blank">Media video events</a></td>
<td>Bind event handlers on a video media directly on the json configuration.</td>
</tr>
<tr>
<td><a href="projects/story-events/" target="_blank">Story events</a></td>
<td>Bind events handler to the story directly on the json configuration. Events are logged in the console in this sample.</td>
</tr>
</tbody>
</table>
<h2 class="display-1">ForgeJS Plugins Samples</h2>
<p class="lead">Click on a sample link to try the plugin!</p>
<table class="table table-striped table-hover">
<thead class="thead-inverse">
<tr>
<th>name</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="projects/video-controls/" target="_blank">Video controls</a></td>
<td>Plugin to allow users to have full control of the video player through buttons and widgets.</td>
</tr>
<tr>
<td><a href="projects/googlemaps/" target="_blank">Google maps</a></td>
<td>Plugin that displays a GPS track on a Google map.</td>
</tr>
<tr>
<td><a href="projects/thumbnail-bar/" target="_blank">Thumbnail bar</a></td>
<td>A plugin which allow to add a bar at the bottom of the screen, containing thumbnails relative of each scene.</td>
</tr>
<tr>
<td><a href="projects/performance-monitor/" target="_blank">Performance Monitor</a></td>
<td>A plugin which allow to monitor performance: fps, ms, mb.</td>
</tr>
<tr>
<td><a href="projects/toolbox/" target="_blank">Toolbox</a></td>
<td>A plugin that displays a GUI to interact with camera values, the current scene or the view type.</td>
</tr>
<tr>
<td><a href="projects/editor/" target="_blank">Editor</a></td>
<td>The very first version of a hotspot editor plugin (WIP).</td>
</tr>
<tr>
<td><a href="projects/telemetry/" target="_blank">Telemetry</a></td>
<td>A project displaying multiple plugins, each being fed with data coming from the telemetry gathered by a GoPro camera. The plugins used in this project are speedometer, accelerometer, compass and altimeter. These plugins can be used as hotspots' texture or be displayed in screen space</td>
</tr>
<tr>
<td><a href="projects/share/" target="_blank">Share a view</a></td>
<td>A plugin allowing the user to share the current view type and camera orientation (yaw, pitch, roll and fov). The plugin keeps the url updated with those parameters.</td>
</tr>
</tbody>
</table>
<h2 class="display-1">ForgeJS Projects</h2>
<p class="lead">These are bigger projects.</p>
<table class="table table-striped table-hover">
<thead class="thead-inverse">
<tr>
<th>name</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="projects/vrrroom/" target="_blank">Vrrroom</a></td>
<td>This is the project that has been presented at the IVRPA 2016 in Quebec.</td>
</tr>
<tr>
<td><a href="projects/immersive-and-narrative/" target="_blank">Combining immersive<br/>and narrative content</a></td>
<td>A sample highlighting the powerful storytelling capabilities of ForgeJS combining narrative and immersive scenes.</td>
</tr>
<tr>
<td><a href="projects/paris26g/" target="_blank">Paris 26 Gigapixels</a></td>
<td>A sample highlighting the power of the tiles management and look at navigation with ForgeJS.</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>