DEV Community

Apoorv Darshan
Apoorv Darshan

Posted on

Rendering a VRM avatar with lip sync on iOS using three-vrm

The "face" in Scowld isn't a video or a canned animation loop. It's a real-time 3D VRM character.

Scowld bundles an Amica/Arbius frontend that renders the avatar with Three.js and three-vrm. That gives you:

  • Lip sync driven by the companion's speech output
  • Idle animations so the character feels alive between turns
  • Expressions the model can shift through while it talks

VRM is a nice format choice for this. It's a humanoid avatar standard built on glTF, so the rigs, blendshapes, and expression presets are standardized. three-vrm handles loading the model and exposing the expression and lip-sync controls, and Three.js does the actual rendering.

Because the avatars are VRM assets, they're swappable. Scowld ships with Aria, Bella, and Ciel, and you can set a custom avatar and name. The character settings also let you set a system prompt, so the personality and the face can be tuned together.

The whole thing is open source under MIT, so if you've ever wanted to see how a VRM companion gets wired into a shipped iOS app, the code is all there to read.

Clone it and dig in.

https://github.com/apoorvdarshan/scowld

Top comments (0)