|
<!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> |
