<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: zhen cai</title>
    <description>The latest articles on DEV Community by zhen cai (@zhen_cai_b9dd0986ba3a50b5).</description>
    <link>https://dev.to/zhen_cai_b9dd0986ba3a50b5</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4119064%2F9ffb831b-3d1a-4412-833c-d77cb4b41e46.jpg</url>
      <title>DEV Community: zhen cai</title>
      <link>https://dev.to/zhen_cai_b9dd0986ba3a50b5</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/zhen_cai_b9dd0986ba3a50b5"/>
    <language>en</language>
    <item>
      <title>Building Virmii: From a Character Image to a Browser-Tracked VTuber</title>
      <dc:creator>zhen cai</dc:creator>
      <pubDate>Thu, 10 Sep 2026 10:05:25 +0000</pubDate>
      <link>https://dev.to/zhen_cai_b9dd0986ba3a50b5/building-virmii-from-a-character-image-to-a-browser-tracked-vtuber-4bji</link>
      <guid>https://dev.to/zhen_cai_b9dd0986ba3a50b5/building-virmii-from-a-character-image-to-a-browser-tracked-vtuber-4bji</guid>
      <description>&lt;p&gt;You have a character design. You want to see it move, react, and appear on stream.&lt;/p&gt;

&lt;p&gt;Getting there involves several separate jobs: creating a 3D model, preparing its rig and expressions, setting up tracking, and connecting the result to OBS.&lt;/p&gt;

&lt;p&gt;I’m building &lt;strong&gt;&lt;a href="https://virmii.com" rel="noopener noreferrer"&gt;Virmii&lt;/a&gt;&lt;/strong&gt;, an AI VTuber avatar studio that brings those steps into one workspace.&lt;/p&gt;

&lt;p&gt;The goal is to give creators a more direct path from a character reference to an avatar they can actually use.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5lo2109in0f1aqvejwed.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5lo2109in0f1aqvejwed.webp" alt="Full-body character artwork featured on Virmii, showing a pink-haired catgirl with blue eyes and a brown cape" width="800" height="1000"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Character artwork featured on Virmii.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Watch the demo
&lt;/h2&gt;

&lt;p&gt;Here’s a look at Virmii in action:&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/7kShlUzpr2g" width="710" height="399"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Start with an image—or bring your own avatar
&lt;/h2&gt;

&lt;p&gt;Virmii connects five stages of the avatar workflow:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Upload a character reference.&lt;/strong&gt; Start with a clear image of the character you want to create.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Generate a 3D model.&lt;/strong&gt; Use AI to turn the reference into a textured model.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Prepare the avatar.&lt;/strong&gt; Follow rigging and VRM preparation, then preview the result.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Try browser face tracking.&lt;/strong&gt; Use your camera to test supported movement and expressions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Connect to OBS.&lt;/strong&gt; Add the private live-stage URL to your streaming setup.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;If you already have a compatible VRM, you can upload it and start with previewing and tracking.&lt;/p&gt;

&lt;p&gt;You can also keep the completed VRM for compatible external tools.&lt;/p&gt;

&lt;h2&gt;
  
  
  Expressions depend on the model
&lt;/h2&gt;

&lt;p&gt;A character’s personality often comes through in small details: a blink, a glance, or the way its mouth moves while you speak.&lt;/p&gt;

&lt;p&gt;Those movements need support in the avatar itself. Facial tracking cannot make every model behave identically.&lt;/p&gt;

&lt;p&gt;Virmii checks the model’s capabilities so you can understand what it supports. Avatars with a suitable facial setup can support blinking and lip-sync; more limited models have a different range of movement.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ft6qr4wclbzbnqbde2x11.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ft6qr4wclbzbnqbde2x11.webp" alt="Winking character artwork featured on Virmii" width="800" height="1000"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;An expression illustration from the Virmii website. Actual tracking capability depends on the avatar’s facial setup.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  How the browser connects to OBS
&lt;/h2&gt;

&lt;p&gt;For developers, one interesting part of the project is the connection between tracking and rendering.&lt;/p&gt;

&lt;p&gt;The tracking pipeline uses &lt;strong&gt;MediaPipe&lt;/strong&gt;. Where browser support allows it, camera frames are processed in a dedicated worker, allowing inference to run independently of the page’s animation loop. A main-thread fallback handles other environments.&lt;/p&gt;

&lt;p&gt;The tracking page sends compact face-motion packets to the OBS stage over a &lt;strong&gt;WebRTC DataChannel&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The connection prefers a direct peer-to-peer route. When network conditions prevent that, TURN provides a fallback.&lt;/p&gt;

&lt;p&gt;This lets the tracking page focus on reading motion while the OBS stage renders the character.&lt;/p&gt;

&lt;h2&gt;
  
  
  A generated model still needs preparation
&lt;/h2&gt;

&lt;p&gt;Image-to-3D generation is one stage in a larger pipeline.&lt;/p&gt;

&lt;p&gt;The result needs a usable rig, facial preparation, output validation, and a way to reach the renderer. Behind Virmii’s interface:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Convex&lt;/strong&gt; manages backend state and asynchronous job progress.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cloudflare R2&lt;/strong&gt; stores model files and related assets.&lt;/li&gt;
&lt;li&gt;A &lt;strong&gt;Blender-based pipeline&lt;/strong&gt; handles avatar preparation.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;MediaPipe and WebRTC&lt;/strong&gt; connect camera-driven motion to the live stage.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;One engineering concern is defining what “complete” means.&lt;/p&gt;

&lt;p&gt;A job returning a file does not tell us whether that file is ready to become an avatar. The pipeline checks the model’s structure and validates the output before recording a completed version.&lt;/p&gt;

&lt;p&gt;That work is less visible than generation, but it matters every time someone opens an avatar and expects it to move.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it with your own character
&lt;/h2&gt;

&lt;p&gt;If you’re exploring a virtual identity for a coding stream, developing an original character, or looking for a browser workflow for an existing VRM, I’d love for you to try Virmii.&lt;/p&gt;

&lt;p&gt;Bring a clear character reference or a compatible avatar, explore the workflow, and tell me where you get stuck.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://virmii.com" rel="noopener noreferrer"&gt;Try Virmii →&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Which part of setting up a VTuber has been hardest for you: creating the model, getting expressions working, or connecting everything to your stream?&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>webdev</category>
      <category>ai</category>
      <category>vtuber</category>
    </item>
  </channel>
</rss>
