Facial Blendshapes

import { OpenHuman } from "@openhuman/sdk"
 
const human = await OpenHuman.load("character.ohb", canvas)
 
// Set a single morph target weight (0.0 – 1.0)
human.morph.set("mouthSmileLeft", 0.7)
human.morph.set("mouthSmileRight", 0.7)
 
// Set multiple targets in one call
human.morph.setMany({
    jawOpen: 0.4,
    mouthFunnel: 0.3,
    browInnerUp: 0.5,
})
 
// Read current weight
const w = human.morph.get("jawOpen") // → 0.4
 
// Reset all targets to 0
human.morph.reset()

// Worried expression
human.morph.setMany({ browInnerUp: 0.7, browDownLeft: 0.2, browDownRight: 0.2 })
 
// Sceptical (one brow raised)
human.morph.setMany({ browOuterUpLeft: 0.8 })

// Full smile with cheek raise
human.morph.setMany({
    mouthSmileLeft: 0.9,
    mouthSmileRight: 0.9,
    cheekSquintLeft: 0.6,
    cheekSquintRight: 0.6,
})

// Natural blink
async function blink() {
    human.morph.set("eyeBlinkLeft", 1.0)
    human.morph.set("eyeBlinkRight", 1.0)
    await delay(80)
    human.morph.set("eyeBlinkLeft", 0.0)
    human.morph.set("eyeBlinkRight", 0.0)
}
 
// Look left
human.morph.setMany({
    eyeLookOutLeft: 0.6,
    eyeLookInRight: 0.6,
})

// Simulate speech jaw motion
function applyJaw(openAmount) {
    human.morph.set("jawOpen", Math.max(0, Math.min(1, openAmount)))
}

// Apply a named preset
human.morph.applyPreset("happy") // warm smile, cheek squint
human.morph.applyPreset("sad") // brow down, lip corners down
human.morph.applyPreset("surprised") // wide eyes, jaw open, brows up
human.morph.applyPreset("angry") // brow down, nose sneer, jaw tight
human.morph.applyPreset("disgusted") // nose sneer, upper lip raise
human.morph.applyPreset("fearful") // wide eyes, brow raise, lip stretch
human.morph.applyPreset("neutral") // reset all to 0.0
 
// Apply preset with intensity (0.0 – 1.0)
human.morph.applyPreset("happy", 0.5) // 50% happy blend
 
// Crossfade from current weights to preset over time (seconds)
human.morph.applyPreset("surprised", 1.0, { fadeDuration: 0.4 })

// Animate from current weights to target weights
await human.morph.animateTo({ mouthSmileLeft: 0.8, mouthSmileRight: 0.8, cheekSquintLeft: 0.5, cheekSquintRight: 0.5 }, { duration: 0.3, easing: "easeOutCubic" })
 
// Chain expressions
await human.morph.animateTo({ browInnerUp: 0.6, eyeWideLeft: 0.4, eyeWideRight: 0.4 }, { duration: 0.2 })
await delay(1000)
await human.morph.animateTo({}, { duration: 0.5 }) // fade back to neutral

// Called by your audio/TTS pipeline at ~30–60 fps
function onFacsFrame(weights) {
    // weights: Float32Array[52] - one value per FACS target in canonical order
    human.morph.setFromArray(weights)
}

import { VisemeMapper } from "@openhuman/sdk"
 
const mapper = new VisemeMapper()
 
// Map an ARPAbet phoneme to FACS weights and apply
function onPhoneme(phoneme, intensity = 1.0) {
    const weights = mapper.toFACS(phoneme, intensity)
    human.morph.setMany(weights)
}
 
// Example phoneme events from a TTS engine
onPhoneme("AH", 0.8) // open vowel  → jawOpen + mouthFunnel
onPhoneme("M", 1.0) // bilabial    → mouthClose
onPhoneme("S", 0.9) // sibilant    → mouthStretchLeft + mouthStretchRight
onPhoneme("OW", 0.7) // rounded     → mouthPucker + mouthFunnel

finalWeight = clamp(graphWeight + morphAPIWeight, 0.0, 1.0)

// Graph drives blink loop autonomously
human.animation.setLayer("blink", blinkClip, {
    additive: true,
    mask: "facial",
    loop: true,
})
 
// Morph API drives lip sync independently
function onFacsFrame(weights) {
    human.morph.setFromArray(weights) // blink weights from graph still apply on top
}

import { OpenHuman, VisemeMapper } from "@openhuman/sdk"
 
const human = await OpenHuman.load("character.ohb", canvas)
const mapper = new VisemeMapper()
 
// ── Autonomous blink (via Animation Graph layer) ──────────────
human.animation.setLayer("blink", human.animation.getClip("blink_idle"), {
    additive: true,
    mask: "facial",
    loop: true,
})
 
// ── Emotion state ─────────────────────────────────────────────
let currentEmotion = "neutral"
 
async function setEmotion(name, intensity = 1.0) {
    currentEmotion = name
    await human.morph.applyPreset(name, intensity, { fadeDuration: 0.35 })
}
 
// ── Lip sync (phoneme-driven) ─────────────────────────────────
let lipSyncActive = false
 
function startSpeech(emotion = "happy", intensity = 0.6) {
    lipSyncActive = true
    setEmotion(emotion, intensity)
}
 
function onPhoneme(phoneme, intensity) {
    if (!lipSyncActive) return
    const weights = mapper.toFACS(phoneme, intensity)
    human.morph.setMany(weights)
}
 
function stopSpeech() {
    lipSyncActive = false
    // Fade mouth back to emotion preset, keep brows / cheeks
    human.morph.animateTo({ jawOpen: 0, mouthFunnel: 0, mouthPucker: 0, tongueOut: 0 }, { duration: 0.15 })
}
 
// ── Reactive micro-expressions ────────────────────────────────
function raiseBrow(side = "both", amount = 0.4) {
    if (side === "left" || side === "both") human.morph.set("browOuterUpLeft", amount)
    if (side === "right" || side === "both") human.morph.set("browOuterUpRight", amount)
    setTimeout(() => {
        human.morph.animateTo({ browOuterUpLeft: 0, browOuterUpRight: 0 }, { duration: 0.4 })
    }, 600)
}
 
// ── Usage ─────────────────────────────────────────────────────
await setEmotion("neutral")
 
// Simulate a TTS speech event
startSpeech("happy", 0.7)
onPhoneme("HH", 0.5)
onPhoneme("EH", 0.9)
onPhoneme("L", 0.8)
onPhoneme("OW", 0.7)
stopSpeech()
 
// React to a user statement
raiseBrow("left", 0.5)