@ikijs/editor 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -1609,11 +1609,12 @@ var ROLE_TABLE = {
   // the turn through its own part warp (bakeHairBackTurnWarp) and swings its
   // ends on the hair-sway warps.
   hair_back: { deformer: "headDeformer", order: 0, mesh: true },
-  // The torso. Alone among the roles it hangs from NO deformer: the head turns
-  // about the neck pivot while the shoulders stay put, which is what keeps the
-  // character from reading as a floating head. Drawn over the back hair so long
-  // hair falls behind the shoulders.
-  body: { deformer: "none", order: 5, mesh: false },
+  // The torso. It rides its own rigid deformer, not the head's: the head turns
+  // about the neck pivot while the shoulders follow at BODY_TURN_FOLLOW and
+  // follow the head's breath bob, which is what keeps the character from
+  // reading as a floating head. Drawn over the back hair so long hair falls
+  // behind the shoulders.
+  body: { deformer: "bodyDeformer", order: 5, mesh: false },
   face: { deformer: "faceWarp", order: 10, mesh: true },
   nose: { deformer: "faceWarp", order: 15, mesh: true },
   blush_L: { deformer: "faceWarp", order: 20, mesh: true },
@@ -1774,28 +1775,39 @@ function createPixelGridMesh(cols, rows, w, h) {
   }
   return { vertices, uvs, indices };
 }
+var MESH_CELL_PX = 64;
+var MESH_CELLS_MIN = 4;
+var MESH_CELLS_MAX = 8;
+function meshCellsFor(w, h) {
+  const cells = (px) => Math.max(
+    MESH_CELLS_MIN,
+    Math.min(MESH_CELLS_MAX, Math.round(px / MESH_CELL_PX))
+  );
+  return { cols: cells(w), rows: cells(h) };
+}
+var FACE_GRID_CELLS = 6;
 var HEAD_CYLINDER_RADIUS_FACTOR = 0.6 / 0.5;
 var HEAD_TURN_MAX_DEG = 30;
+var HEAD_TURN_STOPS = [-30, -15, 0, 15, 30];
 function headTurnParallaxUnit(gridHalfWidth) {
   return gridHalfWidth * HEAD_CYLINDER_RADIUS_FACTOR * Math.sin(HEAD_TURN_MAX_DEG * (Math.PI / 180));
 }
+function gridReach(grid, axis, center) {
+  let reach = 0;
+  for (let i = axis; i < grid.points.length; i += 2) {
+    reach = Math.max(reach, Math.abs(grid.points[i] - center));
+  }
+  return reach;
+}
 function pinnedCylinderBend(local, radius, theta) {
   const alpha = Math.asin(Math.max(-1, Math.min(1, local / radius)));
   return radius * Math.sin(alpha + theta) - local - radius * Math.sin(theta);
 }
 function bakeHeadTurnGridWarp2DCentered(grid, parameterX, parameterY, centerX, centerY) {
-  const STOPS = [-HEAD_TURN_MAX_DEG, 0, HEAD_TURN_MAX_DEG];
-  const halfWidth = (grid.points[grid.cols * 2] - grid.points[0]) / 2;
-  const RADIUS_X = halfWidth * HEAD_CYLINDER_RADIUS_FACTOR;
+  const STOPS = [...HEAD_TURN_STOPS];
+  const RADIUS_X = gridReach(grid, 0, centerX) * HEAD_CYLINDER_RADIUS_FACTOR;
+  const RADIUS_Y = gridReach(grid, 1, centerY) * HEAD_CYLINDER_RADIUS_FACTOR;
   const pointCount = grid.points.length / 2;
-  let halfHeight = 0;
-  for (let i = 0; i < pointCount; i++) {
-    halfHeight = Math.max(
-      halfHeight,
-      Math.abs(grid.points[i * 2 + 1] - centerY)
-    );
-  }
-  const RADIUS_Y = halfHeight * HEAD_CYLINDER_RADIUS_FACTOR;
   const DEG_TO_RAD = Math.PI / 180;
   const keyforms2d = [];
   for (const angleY of STOPS) {
@@ -1932,16 +1944,17 @@ function bindingsForRole(spec, role, cropW, cropH, options = {}) {
   }
   if (role === "hair_front" || role === "hair_back") {
     const isFront = role === "hair_front";
-    const depth = isFront ? HAIR_FRONT_DEPTH : HAIR_BACK_DEPTH;
     const parallax = [];
-    const shiftX = depth * (options.parallaxUnit ?? 0);
-    if (shiftX !== 0) {
-      parallax.push({
-        parameter: StandardParameter.AngleX,
-        channel: "translateX",
-        from: -shiftX,
-        to: shiftX
-      });
+    if (!isFront) {
+      const shiftX = HAIR_BACK_DEPTH * (options.parallaxUnit ?? 0);
+      if (shiftX !== 0) {
+        parallax.push({
+          parameter: StandardParameter.AngleX,
+          channel: "translateX",
+          from: -shiftX,
+          to: shiftX
+        });
+      }
     }
     const shiftY = (isFront ? 0 : HAIR_BACK_NOD_DEPTH) * (options.parallaxUnitY ?? 0);
     if (shiftY !== 0) {
@@ -2004,6 +2017,7 @@ function bakeHairBackTurnWarp(mesh, parameter) {
 var HAIR_SWAY_TIP_FRACTION = 0.09;
 var HAIR_SWAY_CURL = 1.5;
 var HAIR_SWAY_RANGE = 20;
+var HAIR_SWAY_PEAK_FRACTION = 0.56;
 function bakeHairSwayWarp(mesh, parameter, tipShift, range) {
   let top = -Infinity;
   let bottom = Infinity;
@@ -2026,10 +2040,15 @@ function bakeHairSwayWarp(mesh, parameter, tipShift, range) {
     ]
   };
 }
+var HEAD_TURN_TRAVEL = 50;
+var BODY_TURN_FOLLOW = 0.3;
+var HEAD_BREATH_BOB = -12;
+var BODY_BREATH_FOLLOW = 0.5;
 function generateIkiFromLayerSet(layers, canvas) {
   validateLayerInputs(layers, canvas);
   const hasHair = layers.some((l) => l.role === "hair_front");
   const hasMouthOpen = layers.some((l) => l.role === "mouth_open");
+  const bodyLayer = layers.find((l) => l.role === "body");
   const parameters = [
     {
       id: StandardParameter.MouthOpen,
@@ -2193,11 +2212,11 @@ function generateIkiFromLayerSet(layers, canvas) {
   const faceGridMinX = faceCenterX - halfW;
   const faceGridMaxX = faceCenterX + halfW;
   const faceGrid = {
-    cols: 4,
-    rows: 4,
+    cols: FACE_GRID_CELLS,
+    rows: FACE_GRID_CELLS,
     points: generateGridPoints(
-      4,
-      4,
+      FACE_GRID_CELLS,
+      FACE_GRID_CELLS,
       faceGridMinX,
       faceGridMaxX,
       unionMinY,
@@ -2228,21 +2247,20 @@ function generateIkiFromLayerSet(layers, canvas) {
       id: "headDeformer",
       pivot: neckPivot,
       bindings: [
-        {
-          parameter: StandardParameter.AngleX,
-          channel: "rotate",
-          from: 6,
-          to: -6
-        },
+        // The turn is a pure yaw: no roll rides on AngleX. The sample model's
+        // ±6° "lean into the turn" was tried here and dropped — rotating about
+        // the neck pivot swings the crown (~500px above it) far more than the
+        // chin, so the top of the head appeared to lunge ahead of the face on
+        // every turn. Roll is AngleZ's job, below.
         {
           parameter: StandardParameter.AngleX,
           channel: "translateX",
-          from: -50,
-          to: 50
+          from: -HEAD_TURN_TRAVEL,
+          to: HEAD_TURN_TRAVEL
         },
         // Nod: a vertical translate only. No rotate — a pitch expressed as a
-        // rigid rotation would sum with the roll below at diagonal poses,
-        // collapsing pitch into roll.
+        // rigid rotation would sum with the AngleZ roll below at diagonal
+        // poses, collapsing pitch into roll.
         {
           parameter: StandardParameter.AngleY,
           channel: "translateY",
@@ -2251,10 +2269,10 @@ function generateIkiFromLayerSet(layers, canvas) {
         },
         // Tilt: the whole head rolls about the neck pivot, one degree per
         // degree. Positive AngleZ is clockwise on screen (engine rotate is
-        // CCW-positive, hence the flipped from/to) — Live2D's convention, and
-        // the same sense as the lean above: in Live2D's own sample motions
-        // AngleZ carries the sign of AngleX 214 times out of 222. The two
-        // rotations sum, which is correct for two rolls about one pivot.
+        // CCW-positive, hence the flipped from/to) — Live2D's convention: in
+        // its own sample motions AngleZ carries the sign of AngleX 214 times
+        // out of 222, i.e. a head that leans into its turn tilts clockwise on
+        // a turn to the viewer's right. The only rotate binding on the head.
         {
           parameter: StandardParameter.AngleZ,
           channel: "rotate",
@@ -2265,7 +2283,7 @@ function generateIkiFromLayerSet(layers, canvas) {
           parameter: StandardParameter.Breath,
           channel: "translateY",
           from: 0,
-          to: -12
+          to: HEAD_BREATH_BOB
         }
       ]
     },
@@ -2281,6 +2299,34 @@ function generateIkiFromLayerSet(layers, canvas) {
       warp2d: faceWarp2d
     }
   ];
+  if (bodyLayer) {
+    const bt = bboxToTransform(
+      bodyLayer.bbox,
+      bodyLayer.canvasW,
+      bodyLayer.canvasH,
+      "body"
+    );
+    deformers.push({
+      id: "bodyDeformer",
+      pivot: { x: bt.x, y: bt.y - bodyLayer.cropH / 2 },
+      bindings: [
+        // Low-weight follow of the turn, same direction as the head.
+        {
+          parameter: StandardParameter.AngleX,
+          channel: "translateX",
+          from: -BODY_TURN_FOLLOW * HEAD_TURN_TRAVEL,
+          to: BODY_TURN_FOLLOW * HEAD_TURN_TRAVEL
+        },
+        // Breath: follow the head's bob, same direction, half amplitude.
+        {
+          parameter: StandardParameter.Breath,
+          channel: "translateY",
+          from: 0,
+          to: BODY_BREATH_FOLLOW * HEAD_BREATH_BOB
+        }
+      ]
+    });
+  }
   const eyeCreaseBySide = {};
   for (const layer of layers) {
     const side = ROLE_TABLE[layer.role].eyeSide;
@@ -2305,7 +2351,8 @@ function generateIkiFromLayerSet(layers, canvas) {
     });
     const deformerId = spec.deformer === "none" ? void 0 : spec.deformer;
     if (spec.mesh) {
-      const mesh = createPixelGridMesh(4, 4, cropW, cropH);
+      const { cols, rows } = meshCellsFor(cropW, cropH);
+      const mesh = createPixelGridMesh(cols, rows, cropW, cropH);
       const part = {
         id: role,
         color: [1, 1, 1, 1],
@@ -2320,7 +2367,25 @@ function generateIkiFromLayerSet(layers, canvas) {
         part.bindings = roleBindings;
       }
       if ((role === "hair_front" || role === "hair_back") && hasHair) {
-        const tipShift = HAIR_SWAY_TIP_FRACTION * cropH;
+        let tipShift = HAIR_SWAY_TIP_FRACTION * cropH;
+        let leadWarp;
+        if (role === "hair_front") {
+          const shift = HAIR_FRONT_DEPTH * parallaxUnit;
+          const headroom = Math.min(
+            faceGridMaxX - (t.x + cropW / 2),
+            t.x - cropW / 2 - faceGridMinX
+          ) - shift;
+          tipShift = Math.min(
+            tipShift,
+            Math.max(0, headroom) / HAIR_SWAY_PEAK_FRACTION
+          );
+          leadWarp = bakeHairSwayWarp(
+            mesh,
+            StandardParameter.AngleX,
+            shift,
+            HEAD_TURN_MAX_DEG
+          );
+        }
         part.warps = [
           bakeHairSwayWarp(
             mesh,
@@ -2333,7 +2398,8 @@ function generateIkiFromLayerSet(layers, canvas) {
             StandardParameter.HairSwayZ,
             tipShift,
             HAIR_SWAY_RANGE
-          )
+          ),
+          ...leadWarp ? [leadWarp] : []
         ];
       }
       if (role === "hair_back") {