-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (100 loc) · 5.61 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
<html>
<head>
<title>Performs Atelier</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./data/imgs/favicon.png">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdn.skypack.dev/lexgui/build/lexgui.css">
<style>
html, body { width:100%; height:100%; margin:0; padding:0; overflow:hidden; }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://cdn.skypack.dev/[email protected]/",
"three/addons/": "https://cdn.skypack.dev/[email protected]/examples/jsm/",
"lexgui": "https://cdn.skypack.dev/lexgui/build/lexgui.module.js",
"lexgui/components/": "https://cdn.skypack.dev/lexgui/build/components/"
}
}
</script>
</head>
<body>
<div id="loading" class="modal">
<div class="load-7">
<p>Loading, please wait</p>
<div class="square-holder">
<img class="loading-icon" src="data/imgs/monster.png" width="50" height="50"></div>
</div>
</div>
</div>
<div class="guide-modal hidden" id="atelier-guide-modal">
<!-- Modal 0: Introduction -->
<div class="container" id="atelier-modal0">
<span class="fa fa-xmark"></span>
<h2>Welcome to the Atelier!</h2>
<img src="https://iili.io/2BeAGwb.gif">
<p>Use Atelier to upload and configure your custom avatars. This tool helps you set up all the necessary parameters to create a configuration file that can be used with the Performs script animation system. </p>
<p>You can drag and drop your <strong>.GLB</strong> or <strong>.GLTF</strong> files or select <em>From URL</em>, and paste the link to your file.</p>
<button id="upload-avatar-button">Upload Avatar</button>
</div>
<!-- Modal 1: Retargeting Bone Mapping -->
<div class="container hidden" id="atelier-modal1">
<span class="fa fa-xmark"></span>
<h2>Retargeting Bone Mapping</h2>
<p>
Let's begin with bone mapping to ensure proper retargeting! The system automatically creates an initial mapping that you can adjust as needed.
</p>
<ul>
<li>The source skeleton appears in blue and the target skeleton in white, with unmapped bones highlighted in yellow.</li>
<li>Click a bone to highlight its match. Modify mappings by selecting a bone on one skeleton and assigning it to the other.</li>
<li>Adjustments can also be made via a dropdown menu.</li>
</ul>
<p>Once completed, click Next.</p>
<button id="bone-mapping-next-button">Got it!</button>
</div>
<!-- Modal 2: Body Locations -->
<div class="container hidden" id="atelier-modal2">
<span class="fa fa-xmark"></span>
<h2>Body Locations</h2>
<p>Hover over a point to see its name. Use <strong>Shift + Left-Click</strong> to move it and <strong>Alt + Left-Click</strong> to save its position.</p>
<ul>
<li>Select editing modes to snap to the mesh, use translation gizmos, or adjust arrow rotation.</li>
<li>Remove accessories to avoid interference with computations.</li>
</ul>
<p><strong>Warning: Changing the selection will erase your edits.</strong></p>
<p>Adjust bone mappings as needed before continuing.</p>
<button id="body-locations-next-button">Got it!</button>
</div>
<!-- Modal 3: Action Units -->
<div class="container hidden" id="atelier-modal3">
<span class="fa fa-xmark"></span>
<h2>Action Units</h2>
<p>Map facial expressions with Action Units (AU) supported by our tools. Automatic mapping occurs with BlendShapes (BS), but you can:</p>
<ul>
<li>Add or remove blendshapes.</li>
<li>Adjust weight factors for precise expressions.</li>
<li>Combine multiple blendshapes into a single Action Unit.</li>
</ul>
<p>A reference image is provided to guide you.</p>
<button id="au-next-button">Got it!</button>
</div>
<!-- Modal 4: Miscellaneous -->
<div class="container hidden" id="atelier-modal4">
<span class="fa fa-xmark"></span>
<h2>Miscellaneous Settings</h2>
<h3>Arm Angles</h3>
<p>Fine-tune the avatar's arm movement with custom angle adjustments:</p>
<ul>
<li><strong>Elbow Raise:</strong> Angle between the elbow and torso.</li>
<li><strong>Shoulder Raise & Hunch:</strong> Adjust the shoulder's default angle, negative offset (min angle), and positive offset (max angle).</li>
</ul>
<p>Once finished, click Export to save your configuration.</p>
<button id="miscellaneous-next-button">Got it!</button>
</div>
</div>
<script src="./App.js" type="module"></script>
</body>
</html>