-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
executable file
·123 lines (120 loc) · 5.18 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
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TCPENR6D4K"></script>
<script>
window.dataLayer = window.dataLayer || []
function gtag(){ dataLayer.push( arguments )}
gtag( 'js', new Date())
gtag( 'config', 'G-TCPENR6D4K' )
</script>
<title>Handy.js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description" content="Handy makes defining and recognizing custom hand poses in WebXR a snap.">
<meta name="author" content="Stewart Smith https://stewartsmith.io">
<meta name="copyright" content="Stewart Smith 2020–2021">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@stew_rtsmith">
<meta name="twitter:creator" content="@stew_rtsmith">
<meta name="twitter:title" content="Handy.js">
<meta name="twitter:description" content="Handy makes defining and recognizing custom hand poses in WebXR a snap.">
<meta name="twitter:image" content="https://stewartsmith.io/handy/media/vr-hands.jpg">
<meta name="twitter:url" content="https://stewartsmith.io/handy/">
<meta property="og:type" content="website">
<meta property="og:title" content="Handy.js">
<meta property="og:description" content="Handy makes defining and recognizing custom hand poses in WebXR a snap.">
<meta property="og:image" content="https://stewartsmith.io/handy/media/vr-hands.jpg">
<meta property="og:url" content="https://stewartsmith.io/handy/">
<link type="text/css" rel="stylesheet" href="styles/base.css">
<script type="module" src="scripts/main.min.esm.js"></script>
</head>
<body>
<div id="three"></div>
<section>
<h1>👉 Handy.js 👈</h1>
<br>
<strong>Handy</strong> makes defining and recognizing custom hand poses in WebXR a snap.
Why use hand-held controllers when you can use your bare hands? 👋
<strong>Handy</strong> recognizes over 100 hand poses
right out of the box—including the
<a href="https://en.wikipedia.org/wiki/American_Sign_Language" target="_blank">American Sign Language (ASL) alphabet</a>.
Are you a developer?
Recording and adding new pose definitions is easy.
Want more efficiency?
Slimming down the number of poses to detect is even easier.
Here’s the
<a href="https://github.com/stewdio/handy.js" target="_blank">Handy.js source code</a>.
<br>
<br>
<strong>Demo</strong>.
👉 Make your hand into a “finger gun” pose,
then tap your thumb down onto your middle finger
to shoot lasers from your hand.
✊ Make a fist to cycle through different hand model visual styles.
✌️ Make a “peace sign” to toggle the hand-specific colors—red for right, green for left.
<br>
<br>
<strong>Requirements</strong>.
This code has been designed for the
<a href="https://www.oculus.com/quest/" target="_blank">Oculus Quest</a>
headset, though device support
will expand as more devices implement the
<a hrref="https://immersive-web.github.io/webxr-hand-input/">WebXR hand tracking API</a>.
Be sure your Oculus Quest has all of the latest software updates
installed, including Oculus Browser 15.3.0 or later, then
follow these steps to experience the demo for yourself:
<br>
<ol>
<li>
In the main <strong>Settings</strong> menu
navigate to Device → Hands and Controllers.
Enable both <strong>Hand Tracking</strong>
and <strong>Auto Enable Hands or Controllers</strong>.
</li>
<li>
In <strong>Oculus Browser</strong>
visit <a href="chrome://flags/" taget="_blank">chrome://flags/</a>.
and search for “hands” in the flags search box.
</li>
<li>
Within the flags page, <strong>enable</strong>
the “WebXR experiences with joints tracking” flag
(<code>#webxr-hands</code>).
</li>
<li>
Again, within this flags page,
set the “WebXR experiences with joints tracking” flag
(<code>#webxr-hands</code>)
to <strong>Enabled</strong>.
</li>
<li>
Restart Oculus Browser
and visit this site again.
Use your hand controllers
to click the “Enter VR” button.
Once you are inside the experience put your controllers down,
hold your hands out in front of you
so that the headset can see them,
and enjoy! 👍
</li>
</ol>
<br>
<br>
I’m <a href="https://stewartsmith.io" target="_blank">Stewart</a>.
This demo illustrates the use of the
<a href="https://github.com/immersive-web/webxr-hand-input/blob/master/explainer.md" target="_blank">WebXR device hand input API</a>
for hand and finger tracking,
as tested on an
<a href="https://www.oculus.com/quest/" target="_blank">Oculus Quest</a>
stand-alone headset.
This experience is live at
<a href="https://stewartsmith.io/handy/">https://stewartsmith.io/handy/</a>.
This code is open-source and available at
<a href="https://github.com/stewdio/handy.js" target="_blank">https://github.com/stewdio/handy.js</a>.
<br>
<br>
<br>
</section>
</body>
</html>