Your avatar, as a character in your own game

How it works

1. Make an avatar on Generato from a photo or a text prompt, and make it animatable (rigging is automatic).
2. Download it from your library and pick a format. For the web you get a ZIP with the avatar (a 3D Gaussian splat), its skeleton and a README. For Unity and VRChat you get an FBX, and for Blender, Godot, Unreal and web engines a GLB: the same standard rigged mesh (see Game engines). Downloads come with any plan.
3. Put the files next to your page, keeping them in one folder: rig.json, weights.bin and the .ply.
4. Load it with the code below, then play any animation by name.

Quick start

One HTML file, no build step. three.js and Spark (the splat renderer) come from a CDN, and the SDK from generato.io.

<!doctype html>
<html>
<body style="margin:0">
<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/",
    "@sparkjsdev/spark": "https://cdn.jsdelivr.net/npm/@sparkjsdev/spark@2.4.0/dist/spark.module.js"
  }
}
</script>
<script type="module">
  import * as THREE from 'three';
  import { GeneratoAvatar } from 'https://generato.io/sdk/generato-avatar.js';

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(innerWidth, innerHeight);
  document.body.appendChild(renderer.domElement);
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.05, 100);
  camera.position.set(0, 1.4, 3.6);
  camera.lookAt(0, 0.9, 0);

  // The rig.json from your ZIP; weights.bin and the .ply sit next to it.
  const avatar = await GeneratoAvatar.load({ url: './my-avatar/rig.json', renderer, scene });
  scene.add(avatar.object);
  avatar.play('walk');

  const clock = new THREE.Clock();
  renderer.setAnimationLoop(() => {
    avatar.update(clock.getDelta());
    renderer.render(scene, camera);
  });
</script>
</body>
</html>

With a bundler (Vite, webpack, Next.js)

Install three.js and the exact Spark version, then save generato-avatar.js into your project and import it like any other module. An npm package is on the way.

npm install three@^0.180.0 @sparkjsdev/spark@2.4.0

import { GeneratoAvatar } from './generato-avatar.js';

Examples

Each example is one HTML file. Open it and view the page source to copy it.

Move it like a game character

Walks and runs play on the spot by default, so your game decides where the character goes. Move and turn avatar.object yourself, and switch the animation when the speed changes:

// Each frame: dir is the direction you want to move in (a THREE.Vector3), running is a boolean.
const moving = dir.lengthSq() > 0;
const want = !moving ? 'idle' : running ? 'jog' : 'walk';
if (avatar.animation !== want) avatar.play(want);   // crossfades for you

if (moving) {
  dir.normalize();
  avatar.object.rotation.y = Math.atan2(dir.x, dir.z); // the avatar faces +Z
  avatar.object.position.addScaledVector(dir, (running ? 3.6 : 1.4) * dt);
}
avatar.update(dt);

WebXR (Meta Quest, Vision Pro, phones)

The avatar is a normal three.js object, so WebXR works the usual way. Place it in front of the viewer:

import { VRButton } from 'three/addons/webxr/VRButton.js';

renderer.xr.enabled = true;
document.body.appendChild(VRButton.createButton(renderer));
avatar.object.position.set(0, 0, -1.5);
avatar.object.rotation.y = 0;   // already faces the viewer (+Z)

React Three Fiber

Load it once and hand the object to <primitive>:

import { useEffect, useState } from 'react';
import { useThree, useFrame } from '@react-three/fiber';
import { GeneratoAvatar } from './generato-avatar.js';

export function Avatar({ url, animation = 'idle' }) {
  const { gl, scene } = useThree();
  const [avatar, setAvatar] = useState(null);

  useEffect(() => {
    let current;
    GeneratoAvatar.load({ url, renderer: gl, scene }).then((a) => { current = a; setAvatar(a); });
    return () => current?.dispose();
  }, [url, gl, scene]);

  useEffect(() => { avatar?.play(animation); }, [avatar, animation]);
  useFrame((_, dt) => avatar?.update(dt));

  return avatar ? <primitive object={avatar.object} /> : null;
}

Animations

Every avatar can play all of these. Click a name to copy it, then call avatar.play('name'). They load on demand from generato.io and are free to use (CC0, from Mesh2Motion).

API

What's in your download

Good to know

• Versions: use Spark 2.4.0 exactly and three.js 0.180 or newer.
• Lighting: the avatar's light is baked in from the photo, so scene lights don't change it. Pick a background that suits it.
• Fog: scene.fog hides splats with Spark 2.4, so leave it off.
• Collisions: the avatar has no physics shape. Use a capsule about 0.3 m wide and as tall as the avatar.
• Performance: each avatar is drawn as roughly 110,000–150,000 splats. Start with a few avatars and test on your target devices before adding more.
• Hosting: serve the files from your own site or any CDN. If they're on another domain, that server must send CORS headers.

Game engines and 3D tools (GLB)

When you download, choose FBX for Unity and VRChat, or GLB for Blender, Godot, Unreal, Babylon.js and PlayCanvas. Both are the same avatar; the first export takes about a minute. Each file contains:

• A textured mesh, about 60,000 triangles with a 2048×2048 texture, built from your avatar's own 3D shape and colours.
• A skeleton with Mixamo bone names (Hips, Spine, LeftArm, LeftUpLeg…), plus a twist bone in each forearm so wrists turn smoothly.
• 12 animations: idle, idle-talking, walk, walk-backwards, jog, sprint, strafe-left, strafe-right, greeting, cheering-two-hands, dance-charleston and salute. The file opens standing still in its A-pose (a static first clip named A-Pose), and each animation is its own clip.
• Real-world scale (1.7 m tall), feet on the ground at the origin, facing +Z.

VRChat and Quest (10k triangles)

Choose For VRChat on Quest (FBX, 10k) for the same avatar at 10,000 triangles. That is VRChat's "Good" rank on Quest, so it shows for everyone (Quest hides avatars ranked below Medium by default). It has one material and 24 bones. The texture is painted from the full-detail shape, so up close it looks almost the same as the 60k version.

To upload it: import the free Generato Avatar Tools package into a VRChat avatar project (Creator Companion), drag in the .fbx, click Add to Scene and Set Up for VRChat in the Generato Avatars window that opens (or Tools › Generato › Avatars), then Build & Publish from the VRChat SDK control panel (Windows, Android or both). The tool sets the Humanoid rig, the import settings the SDK checks, a Quest-safe VRChat/Mobile/Toon Lit material and the view position. The full walkthrough is on the VRChat avatar page.

The texture already contains the lighting from the photo, so an unlit or toon shader looks the most like your avatar. Lip sync and blinking aren't set up yet.

The texture has the avatar's lighting baked in, and the material is marked unlit so engines show it as captured. If your engine ignores that, set the material to unlit yourself. Fingers are not rigged separately: each hand moves as one piece.

Splat or mesh? The splat (the web download) is the photo-real version. The mesh is a little softer up close, but it runs anywhere a normal 3D model does.

Platforms

Need another format? Tell us at hello@zoync.com.

Licence

Your avatar: use it in your own personal and commercial projects, such as games, apps, simulations and videos. Don't resell or redistribute the avatar files themselves, and don't use an avatar of a real person without their consent.

The SDK is free to use with your Generato avatars. The animations are CC0. Spark is MIT-licensed.