-
-
Notifications
You must be signed in to change notification settings - Fork 22
/
index.html
119 lines (109 loc) · 5.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebXR - Hand Tracking Examples</title>
<link rel="stylesheet" href="css/style.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41295198-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-41295198-5');
</script>
</head>
<body>
<main>
<div class="title">
<h1>
WebXR - Hand Tracking Examples 👐
<a class="github-button" href="https://github.com/marlon360/webxr-handtracking" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star marlon360/webxr-handtracking on GitHub">Star</a>
<a class="github-button" href="https://github.com/sponsors/marlon360" data-icon="octicon-heart" data-size="large" aria-label="Sponsor @marlon360 on GitHub">Sponsor</a>
</h1>
<h4>by Marlon Lückert (<a href="https://marlon-lueckert.de">https://marlon-lueckert.de</a>)</h4>
</div>
<h2>How to run? 🔧</h2>
<ol>
<li>Use a supported device (e.g. Oculus Quest)</li>
<li>Enable the experimental feature in the browser (Oculus Browser 11)</li>
<ol>
<li>Visit <a href="chrome://flags/">chrome://flags/</a></li>
<li>Enable <em>WebXR experiences with joints tracking (#webxr-hands)</em></li>
</ol>
<li>Enable "Auto Enable Hands or Controllers" (Quest Settings (Gear Icon) -> Device -> Hands and Controllers)</li>
<li>Open an example from below</li>
<li>Enter the VR experience</li>
<ol>
<li>If you have <em>WebXR experiences with hands tracking (#webxr-hands-tracking)</em> enabled, you can start the VR experience with your hands</li>
<li>If you have <em>WebXR experiences with hands tracking (#webxr-hands-tracking)</em> disabled, use your controllers (not your hand) to enter the VR experience after that put the controllers down</li>
</ol>
<li>Enjoy ☺️</li>
</ol>
<div class="example">
<h2>Basic Example</h2>
<ul>
<li>visualize hands</li>
<li>grab object by pinching with thumb and index finger</li>
</ul>
<a href="basic.html">Open Example</a>
<a class="video" target="_blank" href="https://twitter.com/Marlon360/status/1285914208429842433?s=20">Show Video</a>
</div>
<div class="example">
<h2>Improved Hand Mesh Example</h2>
<ul>
<li>hand mesh similar to the leap motion model</li>
</ul>
<a href="hand-model-leap-motion.html">Open Example</a>
<a class="video" target="_blank" href="https://twitter.com/Marlon360/status/1286446817366990848?s=20">Show Video</a>
</div>
<div class="example">
<h2>A-Frame Integration</h2>
<ul>
<li>A-Frame framework integration</li>
<li>slider interaction</li>
<li>toggle interaction</li>
</ul>
<a href="aframe.html">Open Example</a>
<a class="video" target="_blank" href="https://twitter.com/Marlon360/status/1286821414683717632?s=20">Show Video</a>
</div>
<div class="example">
<h2>A-Frame Physics Test</h2>
<ul>
<li>A-Frame physics system</li>
</ul>
<a href="aframe-physics.html">Open Example</a>
<a class="video" target="_blank" href="https://twitter.com/Marlon360/status/1287146189574545410?s=20">Show Video</a>
</div>
<div class="example">
<h2>A-Frame Hand Mesh</h2>
<ul>
<li>skinned mesh hand model</li>
<li>ui slider elements to change color</li>
<li>ui toggle to change wireframe mode</li>
</ul>
<a href="aframe-hand-mesh.html">Open Example</a>
<a class="video" target="_blank" href="https://twitter.com/Marlon360/status/1287488821400133634?s=20">Show Video</a>
</div>
<div class="example">
<h2>A-Frame Networked Hand Tracking</h2>
<ul>
<li>multi user room</li>
<li>synchronize hands over the network</li>
</ul>
<a href="https://webxr-networked-handtracking.glitch.me/">Open Example</a>
</div>
<div class="example">
<h2>3D Drawing</h2>
<ul>
<li>draw in the air by pinching with you right hand</li>
<li>tap on your left arm to change the color</li>
</ul>
<a href="3d-drawing.html">Open Example</a>
<a class="video" target="_blank" href="https://twitter.com/Marlon360/status/1302717938307403780?s=20">Show Video</a>
</div>
</main>
</body>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</html>