Journal de bord · logiciel VTuber

VTrix

De la toute première scène Live2D à aujourd'hui : 102 commits en un peu plus de 24 heures. Voici ce qui a été construit, dans l'ordre et à l'heure près.

Nom de code Onyx · renommé VTrix le 13 octobre à 00 h 34
102commits
24 h 27du premier au dernier
3étapes du plan bouclées
4maquettes devenues écrans
un commitun jalonpause
Jour 1 · dimanche 12 octobre

Le point de départ

Une alternative à VTube Studio, pensée pour les modèles Cubism 5.3 et pour une interface qu'on comprend sans tuto.

12:58 → 13:07
12:58
12/10 · 12:58

Première version11 000 lignes

Une scène éditable qui accueille des avatars Live2D et PNGTuber, servie à OBS en source navigateur. Électron, React, le SDK Cubism 5 et MediaPipe pour le visage.

Judy, le modèle de test, sur le fond de studio « Brume de prune ».
13:07
12/10 · 13:07

La feuille de route

Cinq étapes jusqu'au jalon « Démo Live2D », la version à envoyer à Live2D pour la licence.

Étape 1

Le tracking sous le capot

Voir et régler ce que ton visage pilote, lien par lien.

15:56 → 18:52
15:56
12/10 · 15:56

La maquette d'abord

Chaque écran commence par une maquette HTML cliquable, avec ses quatre thèmes et ses états. Celle-ci ajoute une calibration qui détecte toute seule les poses.

Maquette « Tracking v1 » : les liens à gauche, l'avatar au centre, la courbe du lien choisi à droite.
16:29
12/10 · 16:29

L'écran Tracking

La maquette devient un vrai écran. Chaque lien affiche sa valeur en direct, et les liens que tu as modifiés sont repérés.

Liens · 17
Chaque mouvement du visage relié à un paramètre de l'avatar, rangé par groupe, avec sa valeur en direct.
Entrées · 83
Tout ce que le tracking capte, entrées calculées en tête, et combien de liens chacune pilote.
17:26
12/10 · 17:26

50 détails du visage

Tout ce que MediaPipe détecte devient une entrée utilisable. Celles que la webcam ne voit pas (langue, joues) sont signalées.

18:07
12/10 · 18:07

Adieu les listes Windows

Les menus déroulants du système cassaient l'ambiance. Ils sont remplacés par un sélecteur en verre, qui devient la règle pour toute l'appli.

Avant
Après
La version finale (13 octobre), avec recherche et choix en cours.
18:37
12/10 · 18:37

Courbe de réponse à points

À la place des deux plages linéaires de VTS : une courbe où l'on ajoute, supprime et arrondit des points. La trace grise montre ton vrai visage.

Préréglages Linéaire, Douce, Nerveuse, Seuil.
18:44
12/10 · 18:44

Performances

VTrix choisit la carte graphique la plus puissante, et une page Performances arrive dans les paramètres.

18:52
12/10 · 18:52

Calibration guidéeétape 1 validée

Un carillon doux à chaque pose captée, et à la fin. Le son peut se couper.

Étape 1 bis

L'iPhone sans VBridger

Le tracking de l'iPhone et les entrées calculées, directement dans VTrix.

19:02 → 21:28
19:02
12/10 · 19:02

Tracking iPhone

VTrix reçoit iFacialMocap. On choisit sa source, Webcam ou iPhone, et la marche à suivre tient en trois lignes.

Visage détecté à 61 i/s depuis l'iPhone.
19:20
12/10 · 19:20

Entrées calculées

Des formules sur les entrées du tracking, avec plage, courbe, retard et lissage. Les fichiers VBridger s'importent tels quels.

L'autocomplétion des noms, filtrée par catégorie (19:44).
19:57
12/10 · 19:57

Paliers comme dans VBridger

Le moteur, l'import et l'éditeur gèrent les paliers.

21:25
12/10 · 21:25

Entrées par défaut

Sourire des yeux, entrées voix et visage de VTS, mouvements du corps façon VBridger : tout est prêt à l'emploi.

Pause · 3 h
Jour 2 · lundi 13 octobre · Étape 2

Expressions, animations et raccourcis

Tout ce qu'on déclenche pendant un live, au même endroit.

00:34 → 03:26
00:34
13/10 · 00:34

Onyx devient VTrixnom du produit

Aucun conflit trouvé dans l'univers VTuber et stream. Onyx reste le nom de code.

00:51
13/10 · 00:51

Moteur des actions

Expressions, animations et raccourcis globaux, qui marchent même quand VTrix est en arrière-plan.

02:10
13/10 · 02:10

Un écran Actions pour toute la scène

Toutes les actions de tous les avatars au même endroit, avec recherche et une hotbar commune. La même touche peut servir sur deux avatars.

Maquette « Actions v2 » : la scène entière, deux avatars, une hotbar.
02:31
13/10 · 02:31

Un son par action

Un fichier tiré au hasard parmi plusieurs, avec son volume, qui s'arrête avec l'action. Une page Audio arrive dans les paramètres.

03:26
13/10 · 03:26

Éditeur d'expression

Créer une expression vide, y ajouter des paramètres, ou « Prendre la pose » avec son visage. Les fichiers de l'artiste restent intacts.

Maquette « Actions v3 » : une expression vide, deux façons de commencer.
Nuit · 5 h 28
Retours de test

Une scène qu'on manipule comme dans Photoshop

Étape 2 validée au réveil, puis une série de retours sur la scène elle-même.

08:54 → 11:56
09:23
13/10 · 09:23

L'inspecteur s'écarte tout seul

Il se replie en languette, et glisse hors du chemin quand un geste sur la scène s'approche de lui.

11:09
13/10 · 11:09

Magnétisme

La sélection se colle aux bords et au centre de la sortie et des autres éléments. La rotation s'accroche tous les 45°. Ctrl le suspend.

11:23
13/10 · 11:23

Sélection par zone et boîte de groupe

Glisser dans le vide sélectionne. Plusieurs éléments se redimensionnent et tournent ensemble, proportions libres avec Maj.

11:41
13/10 · 11:41

Le cadre de la sortie

Il apparaît en fondu pendant un geste et assombrit ce qui sera hors champ dans OBS.

11:51
13/10 · 11:51

Les calques

Ils s'ouvrent avec la sélection et se replient en languette. Ctrl + ↑ / ↓ fait monter ou descendre d'un cran.

Chantier en cinq phases

L'édition de la scène

Un plan en cinq phases, livré en moins de quarante minutes.

12:03 → 13:25
12:22
13/10 · 12:22

Dupliquer, copier, collerphase 01

Ctrl + D, le presse-papiers, et Alt + glisser pour emporter une copie.

12:25
13/10 · 12:25

Aligner et répartirphase 02

Sur la sortie ou sur la sélection, horizontalement ou verticalement.

12:32
13/10 · 12:32

Grouperphase 03

Ctrl + G. Un clic prend tout le groupe, un double-clic entre dedans. L'opacité du groupe passe aussi dans OBS.

Le panneau Calques.
12:33
13/10 · 12:33

Modes de fusionphase 04

Écran, Addition, Incrustation, Produit… pour les éléments comme pour les groupes, dans VTrix et dans OBS.

12:39
13/10 · 12:39

Recadrerphase 05

Tous les éléments, avatars compris : touche C ou double-clic, huit poignées, et le contenu se déplace dans son cadre.

La barre Annuler / Valider (13:21).
13:25
13/10 · 13:25

Renommer

Double-clic sur un nom dans les calques, ou champ nom en tête de l'inspecteur.

Chantier « Créer sur la scène »

L'inventaire, le clic droit et les calques

Deux phases du nouveau chantier, et une série de retours faits en direct.

14:23 → 16:14
14:23
13/10 · 14:23

Supprimer et ranger l'inventairephase 06

Supprimer va dans la corbeille de Windows, renommer se fait sur la tuile. Une image glissée sur la scène y reste ; « Ajouter à l'inventaire » la garde pour plus tard.

L'inventaire et ses trois boutons d'import : modèle, images et vidéos, sons.
14:53
13/10 · 14:53

Les sons dans l'inventaire

Importés comme le reste, écoutés d'un clic sur le bouton lecture. Supprimer un son dit quelles actions le jouent.

15:07
13/10 · 15:07

La scène se pousse pour l'inventaire

Inventaire ouvert, la scène glisse dans la place libre à côté. Tout le panneau accepte les fichiers qu'on y lâche.

Inventaire ouvert : la scène entière reste visible à côté, bord gauche compris.
15:13
13/10 · 15:13

La sortie toujours visible

Un liseré pointillé discret montre en permanence ce qu'OBS reçoit.

15:18
13/10 · 15:18

Plus de fenêtre d'import

Chaque fichier va où son type le dit, sans question.

15:34
13/10 · 15:34

Clic droit et panneau Détailsphase 14

Toutes les actions au clic droit, rangées en sous-menus. L'inspecteur devient un panneau Détails flottant, ouvert à la demande.

Le menu clic droit, ses raccourcis et ses sous-menus.
15:38
13/10 · 15:38

L'aide des gestes et la touche ?

Une bande en bas rappelle les touches du geste en cours. La touche ? ouvre tous les raccourcis.

16:05
13/10 · 16:05

Fusion et opacité, comme dans Photoshop

En haut des calques. L'opacité est une jauge : on clique ou on glisse, plus besoin de taper. Chaque calque affiche son type.

Le mode de fusion et la jauge d'opacité (16:20).
16:14
13/10 · 16:14

Zoomer sur la scène

Ctrl + molette autour du curseur, Espace pour déplacer la vue. Une puce rappelle le zoom et le remet à 100 %.

Faire les choses bien

Des outils, puis le format de la sortie

D'abord de quoi tester et piloter VTrix sans toucher aux vraies données, puis la sortie verticale demandée pour TikTok.

16:52 → 17:49
16:52
13/10 · 16:52

L'outillagephase 17

Chaque décision est écrite avec son pourquoi. Des tests tournent sur la vraie appli, dans une copie isolée qu'on pilote à distance, et des journaux racontent chaque séance.

17:04
13/10 · 17:04

Horizontale, verticale ou carréephase 16

La résolution se choisit sur des cartes dessinées à la bonne forme. La scène s'adapte comme avec les ancres de Photoshop : ce qui touche un bord y reste, et tout revient à l'identique en repassant en horizontal.

En 1080 × 1920 : la vidéo reste centrée, les deux avatars restent posés au bas du cadre, chacun dans son coin.
17:24
13/10 · 17:24

Des clics qui tombent juste

Cliquer dans le vide à côté d'une case ne la coche plus. Et Espace déplace la scène sans rouvrir le dernier bouton cliqué.

17:29
13/10 · 17:29

Le sélecteur de couleur en verre

Celui de Windows s'en va. Carré, teintes, code à taper, couleurs récentes : le même servira pour les formes et le texte.

Le fond de scène se règle en direct, d'un glissement.
17:49
13/10 · 17:49

Des ancres comme dans Photoshop

En vertical, un avatar posé au bas du cadre flottait au-dessus. Désormais ce qui touche un bord y reste, et un groupe bouge d'un bloc.

Retours en direct

La scène trouve sa place

Plus rien de Windows dans l'interface, un dock plus discret, et une scène qui se cadre toute seule dans l'espace libre.

17:57 → 18:18
17:57
13/10 · 17:57

Adieu les cases à cocher

Les dernières cases de Windows deviennent des interrupteurs VTrix. On ne clique plus que sur ce qu'on voit.

Le fond de scène : sélecteur de couleur et interrupteurs VTrix.
18:07
13/10 · 18:07

Un dock plus discret

Plus fin et plus près du bord : la bande qu'il occupe passe de 84 à 62 pixels, et tout ce qui se range au-dessus de lui suit.

18:18
13/10 · 18:18

« Ajuster », au centre de l'espace libre

Quel que soit le format, la scène remplit la place au-dessus du dock et le zoom tourne autour de son centre. Changer de format revient à « Ajuster ». Un réglage laisse choisir toute la fenêtre.

« Ajuster » : la scène entière au-dessus du dock, centrée.
Le réglage, dans Paramètres → Apparence.
Phase 15

Les vidéos se règlent

Une vidéo posée sur la scène se lit en boucle, une fois ou en aller-retour, sur l'extrait choisi, à la vitesse et au volume voulus. Et elle se pilote en live.

18:59 → 20:54
19:18
13/10 · 19:18

Une vidéo qui se règle sans taper de chiffres

Dans Détails : lecture, pause, « depuis le début », le mode de lecture, une frise de miniatures avec deux poignées pour l'extrait, la vitesse et le son en jauges. Pendant qu'on tire une poignée, la scène montre l'image visée.

La section Vidéo du panneau Détails, sur une vraie scène.
De près : l'extrait se choisit sur la frise.
19:18
13/10 · 19:18

En live : clic droit et raccourcis

Le clic droit a son sous-menu « Vidéo ». L'écran Actions gagne un groupe « Vidéos » : lancer depuis le début, lecture / pause, chacune avec sa touche et sa place dans la hotbar. VTrix et OBS jouent ensemble.

Le sous-menu « Vidéo » du clic droit.
Le groupe « Vidéos » de l'écran Actions.
20:50
13/10 · 20:50

Rien ne saute pendant qu'on règle

Retour de Geekness : en montant le son, le panneau bougeait sous la souris. Désormais tout reste en place, ce qui ne sert pas encore se grise au lieu de disparaître.

Phase 24

Afficher, cacher, en fondu

Chaque objet de la scène, avatars compris, apparaît et disparaît d'une touche, en fondu, après un délai, et peut se cacher tout seul au bout d'un temps.

01:43 → 02:02
01:50
14/10 · 01:50

Une touche pour faire apparaître un objetphase 24

L'écran Actions gagne le groupe « Objets de la scène ». « Afficher / cacher » se règle avec trois jauges : fondu, délai, « se cache au bout de ». Une vidéo cachée se met en pause, continue ou repart du début. Le même fondu dans VTrix et dans OBS, et Ctrl+Z ne fait pas réapparaître ce qu'on a caché en live.

L'action « Afficher / cacher » d'une vidéo, dans l'écran Actions.
En plein fondu de 2 s : la vidéo s'efface, les avatars restent.
Depuis Détails, un clic mène à l'action.
Phase 23

Quand tu n'es plus là

Ton avatar réagit quand la caméra ne te voit plus : une expression ou une animation se lance au bout de quelques secondes, et se retire à ton retour.

04:30 → 12:24
04:37
14/10 · 04:37

« Quand ton visage n'est plus suivi »phase 23

Chaque expression et chaque animation gagne « Autres déclencheurs » : elle part quand tu quittes la caméra, après un délai réglable, et peut couper le balancement de la tête pendant ce temps. En tête de chaque avatar, une ligne réunit le balancement (amplitude, vitesse) et tout ce qui se lance. À ton retour, VTrix ne retire que ce qu'il a lancé.

Le tracking est éteint : « Toggle - Crying » s'est lancée toute seule, la tête ne se balance plus.
Dans l'expression, sous sa touche.
10:42
14/10 · 10:42

Le raccourci tient dans sa case

Retour de Geekness : sous la hotbar, « Ctrl Maj 1 » débordait sur la case voisine. Il s'écrit désormais en court, « C+M+1 », toujours dans sa case ; le raccourci entier reste dans l'infobulle.

Même un raccourci à quatre touches reste dans sa case.
11:21
14/10 · 11:21

Aussi quand le tracking est éteint

Demande de Geekness : un interrupteur par avatar fait partir ces actions même webcam coupée ou iPhone déconnecté, pas seulement quand la caméra ne te voit plus.

11:49
14/10 · 11:49

Les avertissements, là où tu regardes

Retour de Geekness : un message caché dans l'aperçu de la webcam, on ne le voit pas. Désormais l'avertissement s'écrit sous le champ qu'on remplit, et la pastille du haut dit quand le tracking ne tourne pas vraiment. L'adresse de l'iPhone est vérifiée, et un iPhone coupé est signalé au bout de 5 secondes.

L'iPhone est éteint : la pastille en haut, l'aide, et quoi vérifier juste sous l'adresse.
12:24
14/10 · 12:24

L'écran Actions montre tous les avatars

Retours de Geekness : en venant de Tracking, la vue zoomait sur un seul avatar et le second sortait du cadre. Elle cadre maintenant tous les avatars de la scène. Le contour de la sortie OBS suit enfin la vue quand on zoome, et une liste ouverte vers le haut ne recouvre plus la barre de titre.

Arrivée depuis le Tracking de Hiyori : Mao reste dans le cadre.
Aujourd'hui

VTrix, en ce moment

L'inventaire ouvert : la scène se centre dans l'espace libre à côté, au-dessus du dock.

La suite du plan :