-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
350 lines (334 loc) · 16.2 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
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
<!doctype html>
<!--#region page background --------------------------------------------------------------------------------------------------------->
<html lang="en" class="background-dark-lighter">
<!--#endregion page background ------------------------------------------------------------------------------------------------------>
<head>
<!--#region copypasta head -->
<!-- copypasta head [Felewin Website Template] --><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="images/Icon.png"><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/animate.css"><link rel="stylesheet" href="css/hover-min.css"><link rel="stylesheet" href="css/starfield.css"><link rel="stylesheet" href="css/Felewin-baseline.css"><link rel="stylesheet" href="css/custom/colors.css"><link rel="stylesheet" href="css/custom/elements.css"><link rel="stylesheet" href="css/custom/classes.css"><link rel="stylesheet" href="css/custom/identifiers.css"><script src="https://kit.fontawesome.com/4d6df66743.js" crossorigin="anonymous"></script>
<!--#endregion copypasta head -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --->
<!--#region page metadata - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --->
<meta name="description" content="Free and open source toolkit for VR locomotion"> <!-- description (shown on searchengine result) -->
<meta name="keywords" content="Moon, Motion, Project, Toolkit, free, open, source, toolkit, VR, locomotion"> <!-- keywords for searchengine optimization -->
<meta name="author" content="Moon Motion Project"> <!-- author name -->
<meta name="theme-color" content="#0073ad"> <!-- Android Chrome bar color -->
<title>Moon Motion Toolkit</title> <!-- title -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --->
<!--#endregion page metadata - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --->
</head>
<!---------------------------------------------------------------------------------------------------------------------------------->
<!--#region page content ----------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------->
<body>
<!-- cover -->
<div class="relative unselectable">
<!-- logo - icon only (for mobile) -->
<div class="absolute">
<a href="index.html">
<img src="images/Icon.png" class="logo unselectable wow fadeIn display-only-below-tablet-landscape-dimensions"/>
</a>
</div>
<!-- logo (for tablet+) -->
<div class="absolute">
<a href="index.html">
<img src="images/Logo.png" class="logo unselectable wow fadeIn display-only-by-tablet-landscape-dimensions"/>
</a>
</div>
<!-- modified Git Hub Corner (https://github.com/tholman/github-corners); original � Tim Holman 2016 -->
<div>
<a href="https://github.com/MoonMotionProject/MoonMotion" class="git-hub-corner" aria-label="Access the repository"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--color-main); color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.git-hub-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.git-hub-corner:hover .octo-arm{animation:none}.git-hub-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
</div>
<!-- buttons -->
<div class="absolute" id="Moon-Motion-cover-buttons-grid-positioner">
<div class="relative">
<div class="grid unselectable wow fadeIn" id="Moon-Motion-buttons-grid">
<div class="cell cell-flex-centered">
<button class="Moon-Motion-button" id="Moon-Motion-button-Features">Features</button>
</div>
<div class="cell cell-flex-centered">
<button class="Moon-Motion-button" id="Moon-Motion-button-Git-Started">Git Started</button>
</div>
<div class="cell cell-flex-centered">
<button class="Moon-Motion-button" id="Moon-Motion-button-Documentation">View Docs</button>
</div>
</div>
</div>
</div>
<!-- image - desktop -->
<img src="images/Moon Motion Cover - desktop.jpg" class="fullwidth undraggable display-only-at-desktop-dimensions"/>
<!-- image - tablet -->
<img src="images/Moon Motion Cover - tablet.jpg" class="fullwidth undraggable display-only-at-tablet-landscape-dimensions"/>
<!-- image - mobile -->
<img src="images/Moon Motion Cover - mobile.jpg" class="fullwidth undraggable display-only-below-tablet-landscape-dimensions"/>
</div>
<!-- Create Moving Experiences -->
<div class="pad background-dark-lighter" id="Features">
<br>
<!-- header -->
<h2 class="weight-heavy wow fadeIn">
Create Moving Experiences
</h2>
<!-- divider -->
<div class="pad-divider wow fadeIn"></div>
<br>
<!-- mediad features -->
<div class="grid media-grid align-center" id="Create-Moving-Experiences-media">
<!-- Locomotions -->
<div class="cell media-cell hvr-grow wow fadeIn">
<a href="Locomotions.html">
<video width="100%" height="auto" no-controls autoplay muted loop>
<source src="videos/Locomotions.mp4" type="video/mp4"/>
Your browser does not support the video tag.
</video>
<h4>
Locomotions
</h4>
<p>
Ready to fly in virtual reality? Equip your VR player with booster jet, skiing, treading, and more locomotions. Mix and match loadouts to find the ideal movement experience.
</p>
</a>
</div>
<!-- Player -->
<div class="cell media-cell hvr-grow wow fadeIn">
<a href="Player.html">
<video width="100%" height="auto" no-controls autoplay muted loop>
<source src="videos/Player.mp4" type="video/mp4"/>
Your browser does not support the video tag.
</video>
<h4>
Player
</h4>
<p>
Utilize a SteamVR Interaction System Player, now extended to support key features such as dynamic body colliders, terrain detection, wind feedback, and camera motion smoothing.
</p>
</a>
</div>
<!-- Cycling -->
<div class="cell media-cell hvr-grow wow fadeIn">
<a href="Player.html">
<video width="100%" height="auto" no-controls autoplay muted loop>
<source src="videos/Booster Aesthetics Cycling.mp4" type="video/mp4"/>
Your browser does not support the video tag.
</video>
<h4>
Cycling
</h4>
<p>
With many locomotions comes a need for motion between locomotions. Cycle through locomotions, control schemes, hand models, or booster aesthetics – separately or in parallel.
</p>
</a>
</div>
</div>
</div>
<!-- Tweak and Customize -->
<div class="pad background-dark">
<br>
<!-- header -->
<h2 class="weight-heavy wow fadeIn">
Tweak and Customize
</h2>
<!-- divider -->
<div class="pad-divider wow fadeIn"></div>
<br>
<br>
<!-- article -->
<div class="article-padding align-left">
<!-- Alter the Physics -->
<div class="wow fadeIn">
<h4 class="wow fadeIn">
<i class="fas fa-sliders-h"></i>Alter the Physics
</h4>
<p class="wow fadeIn">
Multiply gravity. Dampen inertia. Apply curves to forces and sensitivities. Enable jumping to work in midair. Direct treading via the headset instead of the hand. Modulate booster fuel. Diminish boosting forces as they raycast terrain from farther away – or cause certain terrain layers to pull the player instead. Devise new movement mechanics!
</p>
</div>
<br>
<br>
<!-- Assign Controls -->
<div class="wow fadeIn">
<h4 class="wow fadeIn">
<i class="fas fa-shapes"></i>Assign Controls
</h4>
<p class="wow fadeIn">
Do you prefer to fly with the trigger or touchpad? Or perhaps both? Define a set of recognized controller inputs for each locomotion, cycler, and module.
</p>
</div>
<br>
<br>
<!-- Combine Locomotions -->
<div class="wow fadeIn">
<h4 class="wow fadeIn">
<i class="fa fa-flask"></i>Combine Locomotions
</h4>
<p class="wow fadeIn">
Drag-and-drop locomotions into sets. Mix the treading, turning, and jumping locomotions together to realize the Skyrim VR movement scheme. Fuse boosting and skiing together and you have Tribes Ascend in VR. Discover tandem interactions between previously separate locomotions. What permutations have yet to emerge?
</p>
</div>
<br>
<br>
<!-- Choose Procedural Audio -->
<div class="wow fadeIn">
<h4 class="wow fadeIn">
<i class="fas fa-random"></i>Choose Procedural Audio
</h4>
<p class="wow fadeIn">
Audio components play procedurally according to movement and context, from footstep foley to gravity zone entry; these audio assets can all be swapped out.
</p>
</div>
<br>
<br>
<!-- Create Your Own Motion -->
<div class="wow fadeIn">
<h4 class="wow fadeIn">
<i class="fas fa-running"></i>Create Your Own Motion
</h4>
<p class="wow fadeIn">
Extend the base Locomotion classes to write your own. Hand locomotions have direct access to the relevant hand and its inputs. Cycle your locomotion along with the vanilla ones. Better yet, <a href="https://github.com/MoonMotionProject/MoonMotion">contribute to the repo</a> to make yours become vanilla!
</p>
</div>
</div>
<br>
</div>
<!-- Git Started -->
<div class="pad background-dark-lighter" id="Git-Started">
<br>
<!-- header -->
<h2 class="weight-heavy">
Git Started
</h2>
<!-- divider -->
<div class="pad-divider wow fadeIn"></div>
<br>
<!-- launchers -->
<div class="grid launchers-grid">
<!-- Play the Demo -->
<div class="cell launcher-cell wow fadeIn">
<a href="https://hunter-bobeck.itch.io/the-moon-motion-zone" target="blank" class="hvr-grow">
<i class="fas fa-rocket fa-4x"></i>
<p>
Play the<br>Demo
</p>
</a>
</div>
<!-- GitHub -->
<div class="cell launcher-cell wow fadeIn">
<a href="https://github.com/MoonMotionProject/MoonMotion" target="blank" class="hvr-grow">
<i class="fab fa-github fa-4x"></i>
<p>
Access<br>the Repo
</p>
</a>
</div>
<!-- Documentation -->
<div class="cell launcher-cell wow fadeIn">
<a href="Starting.html" class="hvr-grow">
<i class="fa fa-book fa-4x"></i>
<p>
Read the<br>Starting Guide
</p>
</a>
</div>
<!-- Discord -->
<div class="cell launcher-cell wow fadeIn">
<a href="https://discord.gg/4FW7hfr" target="blank" class="hvr-grow">
<i class="fab fa-discord fa-4x"></i>
<p>
Join the Discord
</p>
</a>
</div>
</div>
</div>
<!-- Out of the Box -->
<div class="pad background-dark">
<br>
<!-- header -->
<h2 class="weight-heavy wow fadeIn">
Out of the Box
</h2>
<!-- divider -->
<div class="pad-divider wow fadeIn"></div>
<br>
<!-- brace - downward -->
<div class="align-center">
<img src="images/Brace - Small.png" class="brace-small wow fadeIn"/>
</div>
<!-- article -->
<div class="article-padding align-center">
<!-- linked features -->
<div class="linked-features">
<a class="hvr-grow" href="Scenes.html">
<h4 class="wow fadeIn">
Scenes
</h4>
</a>
<br>
<a class="hvr-grow" href="Prefabs.html">
<h4 class="wow fadeIn" style="padding-left: .16em;">
Prefabs
</h4>
</a>
<br>
<a class="hvr-grow" href="Utilities.html">
<h4 class="wow fadeIn">
Utilities
</h4>
</a>
<h4 class="wow fadeIn linked-feature-antibudging-placeholder">
</h4>
</div>
</div>
<!-- brace - upward -->
<div class="align-center">
<img src="images/Brace - Small.png" class="brace-small flipped-vertically wow fadeIn"/>
</div>
</div>
<!-- Platforms Support -->
<div class="pad background-dark" id="Platforms-Support">
<!-- brands image -->
<div class="align-center wow fadeIn">
<img src="images/Platforms Support Brands Image - without WMR.png" class="platforms-support-brands-image display-only-below-tablet-landscape-dimensions"/>
<img src="images/Platforms Support Brands Image.png" class="platforms-support-brands-image display-only-by-tablet-landscape-dimensions"/>
</div>
<!-- article -->
<div class="article-padding" id="Unity-compatibility-statement-padding">
<!-- Unity compatibility statement -->
<p class="wow fadeIn" id="Unity-compatibility-statement">
Tested to work with Unity version 2018.1.0f2.
</p>
</div>
</div>
<!-- footer -->
<div class="pad background-dark-lighter" id="footer">
<!-- text -->
<div class="align-center wow fadeIn" id="footer-text">
<p>
© 2018<script>new Date().getFullYear()>2018&&document.write("-"+new Date().getFullYear());</script> <a href="https://github.com/MoonMotionProject" target="blank">Moon Motion Project</a>.<br class="display-only-below-tablet-landscape-dimensions"><span class="display-only-by-tablet-landscape-dimensions"> </span>Development by <a href="https://github.com/MoonMotionProject/MoonMotion/graphs/contributors" target="blank">Moon Motion contributors</a>.<br class="display-only-below-tablet-landscape-dimensions"><span class="display-only-by-tablet-landscape-dimensions"> </span>Funded on <a href="https://www.patreon.com/moonmotionproject" target="blank" class="link-white">Patreon</a>.<br class="display-only-below-tablet-landscape-dimensions"><span class="display-only-by-tablet-landscape-dimensions"> </span>Website created by <a href="http://hunterbobeck.com/" target="blank" class="link-Felewin">Hunter Bobeck</a>.
</p>
</div>
</div>
<!--#region postJS -->
<!-- postJS [Felewin Website Template] --><script src="js/jquery-3.3.1.js"></script><script src="js/bootstrap.min.js"></script><script src="js/wow.min.js"></script><script>new WOW().init();</script><script src="js/animate.js"></script><script src="js/starfield.js"></script><script src="js/Felewin-baseline.js"></script><script src="js/Felewin-subpage-titling.js"></script>
<!-- button clicks -->
<script>
$("#Moon-Motion-button-Features").click(function()
{
smoothlyScrollTo("Features", 300);
});
$("#Moon-Motion-button-Git-Started").click(function()
{
smoothlyScrollTo("Git-Started", 400);
});
$("#Moon-Motion-button-Documentation").click(function()
{
window.location.href = "Documentation.html";
});
</script>
<!--#endregion postJS -->
</body>
<!---------------------------------------------------------------------------------------------------------------------------------->
<!--#endregion page content -------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------->
</html>