forked from yeemachine/kalidokit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
94 lines (92 loc) · 3.35 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- HTML Meta Tags -->
<title>KalidoKit - Face and Body Rig Solver</title>
<meta
name="description"
content="Track face and body rigs just your browser webcam!"
/>
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="kit.kalidoface.com" />
<meta property="twitter:url" content="https://kit.kalidoface.com/" />
<meta name="twitter:title" content="KalidoKit - Face and Body Rig Solver" />
<meta
name="twitter:description"
content="Track face and body rigs just your browser webcam!"
/>
<meta
name="twitter:image"
content="https://cdn.glitch.com/239c5934-4d83-4c5c-bef6-44dcdb04c8fb%2Fkalidoface-meta.jpg?v=1630110302224"
/>
<meta
name="viewport"
content="viewport-fit=cover, user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"
/>
<link
rel="shortcut icon"
href="https://yeemachine.github.io/kalidoface-live2d-models/Icons/icon-circle.svg"
/>
<!-- Basic Three.js -->
<script src="https://unpkg.com/[email protected]/build/three.js"></script>
<!-- GLTF Loader for Three.js -->
<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
<!-- Orbit Controls for Three.js -->
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
<!-- VRM Loader for Three.js -->
<script src="https://unpkg.com/@pixiv/[email protected]/lib/three-vrm.js"></script>
<!-- Mediapipe or Tensorflow.js -->
<script
src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/holistic.js"
crossorigin="anonymous"
></script>
<!-- Mediapipe Drawing Tools -->
<script
src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"
crossorigin="anonymous"
></script>
<!-- Mediapipe Camera Tools -->
<script
src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="preview">
<video class="input_video" width="1280px" height="720px"></video>
<canvas class="guides"></canvas>
<section>
<a href="/live2d/"><p>Live2D</p></a>
<a class="current" href="/"><p>VRM</p></a>
</section>
</div>
<h1 class="notranslate">
<a href="https://3d.kalidoface.com">kalidoface</a>
</h1>
<nav>
<a href="https://www.npmjs.com/package/kalidokit">
<img
src="https://cdn.glitch.me/447b6603-7eae-4da6-957d-73ee30c8e731%2Fnpm.png?v=1635133318451"
/>
</a>
<a href="https://github.com/yeemachine/kalidokit">
<img
src="https://cdn.glitch.me/447b6603-7eae-4da6-957d-73ee30c8e731%2Fgithub.png?v=1635133310517"
/>
</a>
<a href="https://twitter.com/yeemachine">
<img
src="https://cdn.glitch.me/447b6603-7eae-4da6-957d-73ee30c8e731%2Ftwitter.png?v=1635133322561"
/>
</a>
</nav>
<p class="linkOut">
Visit
<a id="full" href="https://kalidoface.com">the full Vtuber App</a>!
</p>
<script src="./script.js" type="module" defer></script>
</body>
</html>