-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (85 loc) · 5.45 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
<html>
<head>
<title>Performs</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="https://cdn.skypack.dev/[email protected]/build/lexgui.css">
<link rel="stylesheet" href="./style.css">
<script src="./external/jquery-3.6.0.min.js"></script>
<script async src="./external/es-module-shims.js"></script>
<script src="./external/jszip.min.js"></script>
<script type="importmap">
{
"imports": {
"three": "./external/three/build/three.module.js",
"three/addons/": "./external/three/jsm/",
"lexgui": "https://cdn.skypack.dev/[email protected]/build/lexgui.module.js",
"lexgui/components/": "https://cdn.skypack.dev/[email protected]/build/components/"
}
}
</script>
<!-- <link rel="stylesheet" href="external/lexgui/build/lexgui.css">
<script src="external/lexgui/build/lexgui.js"></script>
<script src="external/lexgui/build/components/codeeditor.js"></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="guide-modal">
<div class="container" id="modal0">
<span class="fa fa-xmark"></span>
<h2>Visualize animations on any character to create your perfect scene</h2>
<img src="https://iili.io/2foZgS4.gif">
<p>Performs is designed to visualize and synthesize humanoid animations for customized avatars. You can play animation files or synthesize them in real-time from instructions. Select whether to use the <strong>Keyframe mode</strong> or the <strong>Script mode</strong>.</p>
<button>Next</button>
</div>
<div class="container hidden" id="modal1">
<span class="fa fa-xmark"></span>
<h2>Keyframe mode</h2>
<img src="https://iili.io/2q9u8Mb.gif">
<p>Performs uses <a href="https://github.com/upf-gti/retargeting-threejs" target="_blank">retargeting-threejs</a>. Just drag and drop your own .GLB, .GLTF or .BVH files to add your animations and adjust the retargeting configuration in <i>Settings</i>. You can use <a href="https://webglstudio.org/projects/signon/animics" target="_blank">Animics</a> for generate the animations.</p>
<button>Back</button>
<button>Next</button>
</div>
<div class="container hidden" id="modal2">
<span class="fa fa-xmark"></span>
<h2>Script mode</h2>
<img src="https://iili.io/2qHjqYB.gif">
<p>Performs works with BML (Behavior Markup Language) instructions, extended to create cohesive animations in real-time, which are explained in detail <a href="https://github.com/upf-gti/performs/blob/main/docs/InstructionsBML.md" target="_blank">here</a>. It also supports SiGML (Signing Gesture Markup Language) and NGT glosses. </p>
<p>This mode allows you to synthesize MF (Manual) and NMF (Non-Manual) features, which is essential for enhancing the realism of sign language animations. Just go to <i>Settings</i> to see the options. </p>
<p>To apply these actions, a configuration file is needed for your character, which can be created in <a href="https://webglstudio.org/projects/signon/performs-atelier" target="_blank">Atelier</a>.</p>
<button>Back</button>
<button>Next</button>
</div>
<div class="container hidden" id="modal3">
<span class="fa fa-xmark"></span>
<h2>Choose your avatar</h2>
<p>Performs works with any rigged 3D character. Just drag and drop your .GLB or .GLTF or go to <i>Avatars</i>, select <i>Upload yours</i> and put the link of your file.</p>
<p>Use the <a href="https://webglstudio.org/projects/signon/performs-atelier" target="_blank">Atelier</a> tool to configure all the parameters needed for the <strong>Script mode</strong>. This will generate a configuration .JSON file containing all the needed information.</p>
<button>Back</button>
<button>Next</button>
</div>
<div class="container hidden" id="modal4">
<span class="fa fa-xmark"></span>
<h2>Customize Your Experience</h2>
<img src="https://iili.io/2BeAGwb.gif">
<p>Choose the avatar, change the colors, setup the background, modify the illumination... and export the configuration to use it in your app! You can include Performs using an <i>iframe</i> or downloading the build version from <a href="https://github.com/upf-gti/performs" type="_blank">Github</a>.</p>
<button>Back</button>
<button>Finish</button>
</div>
</div>
<div id="bubble" class="bubble">Copied!</div>
<script type="module">
import {Performs} from './js/Performs.js'
const performs = new Performs();
performs.init();
window.global = {app: performs};
</script>
</body>
</html>