bluebey-studio: 髪の色をマテリアル側に持たせ、iOSでのHairPlateの色ずれを解消

頭の模様は白いマスクとして描き、色はハートと同じくマテリアルのcolorで持たせる。体の色と同じ色管理になり、iPhoneでも色が変わらない。

2 files changed, 7 insertions, 2 deletions

diff --git a/public/bluebey-studio/src/face.js b/public/bluebey-studio/src/face.js
index 3d21022..7de7c8d 100644
--- a/public/bluebey-studio/src/face.js
+++ b/public/bluebey-studio/src/face.js
@@ -289,6 +289,9 @@ export class Face {
         // `overEyes` decides the draw order: the hair plate sits in front of the
         // eyes (bangs over the face) or behind them.
         this.hairMesh.renderOrder = p.eyes.headMark?.overEyes === false ? 0 : 3;
+        // The colour lives on the material (the texture is a white mask), so it
+        // follows the same colour management as the body on every platform.
+        this.hairMesh.material.color.set(p.eyes.headMark?.color ?? '#8a4fe0');
         const layout = this.hairLayout;
         const ctx = this.hairCtx;
         ctx.setTransform(1, 0, 0, 1, 0, 0);
diff --git a/public/bluebey-studio/src/faceArt.js b/public/bluebey-studio/src/faceArt.js
index e63f197..11319c1 100644
--- a/public/bluebey-studio/src/faceArt.js
+++ b/public/bluebey-studio/src/faceArt.js
@@ -954,7 +954,6 @@ export function drawHeadCoverWrap(ctx, spec, layout) {
   const base = HAIR_WRAP_LAYOUT.base
     + (size - 1) * HAIR_WRAP_LAYOUT.reach
     + clamp(spec.offsetY ?? 0, -600, 600) * HAIR_WRAP_LAYOUT.offsetScale;
-  const color = spec.color ?? '#8a4fe0';
 
   ctx.save();
   ctx.beginPath();
@@ -995,7 +994,10 @@ export function drawHeadCoverWrap(ctx, spec, layout) {
   }
   ctx.lineTo(W, 0);
   ctx.closePath();
-  ctx.fillStyle = color;
+  // A white mask: the colour is applied by the hair plate's material, so it goes
+  // through the same colour path as the body instead of being baked into the
+  // canvas (which shaded differently on iOS).
+  ctx.fillStyle = '#ffffff';
   ctx.fill();
   ctx.restore();
 }