File size: 3,293 Bytes
c959593 c99696a c89fc88 c99696a 364c9a0 c99696a c89fc88 c99696a 18405a5 c99696a |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Character Controllers Using Motion VAEs</title>
<meta name="description" content="Character animation using reinforcement learning on top of learned VAE motion model.">
<meta property="og:title" content="Character Controllers Using Motion VAEs">
<meta property="og:description" content="Character animation using reinforcement learning on top of learned VAE motion model.">
<meta property="og:image" content="./static/og-mvae.jpg">
<meta name="twitter:card" content="./static/og-mvae.jpg">
<style>
:root {
--accent-color: rgb(6, 69, 173);
--fg-color: rgb(32, 33, 34);
--bg-color: #fff;
--max-content-width: 65vw;
}
body {
font-family: sans-serif;
font-size: calc(12px + 0.05vw);
color: var(--fg-color);
background-color: var(--bg-color);
-webkit-font-smoothing: antialiased;
}
main {
margin: 0 auto;
width: 90vw;
max-width: var(--max-content-width);
background-color: var(--bg-color);
min-height: 90vh;
}
h1 {
font-weight: 600;
margin-top: 1.3em;
font-size: 2.4em;
}
ul {
list-style-position: inside;
}
p, li {
font-size: 1.3em;
line-height: 1.6;
}
a {
text-decoration: none;
color: var(--accent-color);
}
a:hover {
text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
:root {
--accent-color: #e1b478;
--bg-color: #151515;
--fg-color: #ddd;
}
}
</style>
<script defer src="./static/demo.min.js"></script>
</head>
<body>
<main style="text-align: center;">
<h1 >Motion VAEs</h1>
<p>AI model generating controllable character motions</p>
<div id="demoContainer" style="position: relative; background-color: #282c34; padding-bottom: 56.25%;">
<button id="demoButton" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; cursor: pointer; padding: 0.375rem 0.75rem; font-size: 1.5em; background-color: #1080b5; border-width: 0; color: #fff; border-radius: 0.2rem; box-shadow: 0 0 2pt 2pt orange;">
Show Demo (8MB)
</button>
<div id="guiContainer" style="position: absolute; z-index: 1; width: 25%"></div>
<div id="mvaeScene" style="position: absolute; width: 100%; height: 100%"></div>
</div>
<ul>
<p>Try connecting a PlayStation or Xbox controller!</p>
<li><em>Left-drag</em> or <em>Right-stick</em> to rotate, and scroll to zoom</li>
<li>Place target or change direction: <em>Right-click</em> or <em>GamePad Left-stick</em></li>
</ul>
<div>
<hr>
<p>Created by <a href="https://hungyuling.com" target="_blank">Hung Yu Ling</a> et al.</p>
<p><a href="https://github.com/electronicarts/character-motion-vaes" target="_blank">GitHub</a> and <a href="https://hungyuling.com/projects/MVAE/" target="_blank">Project website</a></p>
</div>
</main>
</body>
</html> |