@davi-ai/vanilla-bodyengine-three

Installation du paquet

Nécessite threejs pour fonctionner

npm install @davi-ai/vanilla-bodyengine-three

Configuration

declare interface CharacterProps_2 extends SpeechSynthesisOptions {
    url: string;
    gender?: "male" | "female";
    animationsUrl?: string;
    type: CreationTool;
    camera: THREE.Camera;
    breathing?: boolean;
    autoLookAt?: boolean;
    license?: string;
}

declare enum CreationTool {
    cc3 = 1,
    avatarsdk = 3,
    avaturn = 4
}

• camera: THREE.PerspectiveCamera (Camera de la scene)

• url: Chemin du modèle 3D correspondant au personnage

• gender: Sexe du personnage

• animationsUrl: Chemin du dossier contenant les animations

• type: Type de modèle du personnage

• breathing: Si le personnage doit jouer l'animation de respiration

• autoLookAt: Si le personnage doit suivre la caméra du regard

• license: Clé de license

Voici comment instancier le personnage :

let character = new Character({
        camera: camera,
        url: './Alicia/Alicia.glb',
        gender: "female" ,
        type: CreationTool.avaturn,
        animationsUrl: "./standing/",
        autoLookAt: true,
        license: "a"
    });
await character.init();


// IMPORTANT dans la boucle de rendu
character.update();

Rendu

IMPORTANT : la scène doit être rendue avec un THREE.RenderPipeline (three/webgpu), et non directement avec renderer.render(scene, camera).

Certains matériaux du personnage (la cornée par exemple) écrivent dans plusieurs cibles de rendu (MRT) et sont prévus pour être dessinés dans une passe de scène d'un RenderPipeline. Un rendu direct avec renderer.render(scene, camera) provoque des erreurs sur ces matériaux.

Exemple minimal :

import * as THREE from "three/webgpu";
import { pass, mrt, output, velocity } from "three/tsl";

const renderer = new THREE.WebGPURenderer();
await renderer.init();

const renderPipeline = new THREE.RenderPipeline(renderer);
const scenePass = pass(scene, camera);
scenePass.setMRT(mrt({ output, velocity }));
renderPipeline.outputNode = scenePass.getTextureNode("output");

renderer.setAnimationLoop(() => {
    character.update();
    renderPipeline.render(); // et non renderer.render(scene, camera)
});

Un pipeline complet (SSGI, TRAA...) est disponible dans example/index.ts.

Animation

enum AnimationProvider {
  none = "none",
  mixamo = "mixamo",
  actorcore = "actorcore",
  cc4 = "cc4",
}

Les animations doivent être contenus dans un dossier contenant un fichier list.json.

Ce fichier list.json doit déclarer toutes les animations que le personnage va utiliser.

• La première valeur du tableau est l'url du fichier d'animation. Cette valeur doit contenir idle ou explain en prefixe. Cela permet de déterminer quelle animation sont joués quand le personnage est au repos ou quand il parle

• La seconde valeur est une valeur du type AnimationProvider

[
    ["./idle1.glb", "mixamo"],
    ["./idle2.glb", "mixamo"],
    ["./idle3.glb", "mixamo"],
    ["./idle4.glb", "mixamo"],
    ["./idle5.glb", "mixamo"],
    ["./idle6.glb", "mixamo"],
    ["./idle7.glb", "mixamo"],
    ["./idle8.glb", "mixamo"],
    ["./idle9.glb", "mixamo"],
    ["./explain1.glb", "mixamo"],
    ["./explain2.glb", "mixamo"],
    ["./explain3.glb", "mixamo"],
    ["./explain4.glb", "mixamo"],
    ["./explain5.glb", "mixamo"],
    ["./explain6.glb", "mixamo"]
]