minerender 2.1.0-alpha.30 → 2.1.0-alpha.31

package/dist/browser/index.mjs

@@ -5431,17 +5431,17 @@ var baseSkinCoordinates = {
     },
     up: {
       uv: [
-        4,
-        36,
         8,
+        36,
+        4,
         32
       ]
     },
     down: {
       uv: [
-        8,
-        32,
         12,
+        32,
+        8,
         36
       ],
       rotation: 180
@@ -5497,13 +5497,13 @@ var slimSkinTextureCoordinates = {
 
 // src/skin/SkinGeometries.ts
 var box8inner = [8, 8, 8];
-var box8outer = [8.504, 8.504, 8.504];
+var box8outer = [9, 9, 9];
 var box8_12_4inner = [8, 12, 4];
-var box8_12_4outer = [8.504, 12.504, 4.504];
+var box8_12_4outer = [8.5, 12.5, 4.5];
 var box4_12_4inner = [4, 12, 4];
-var box4_12_4outer = [4.504, 12.504, 4.504];
+var box4_12_4outer = [4.5, 12.5, 4.5];
 var box3_12_4inner = [3, 12, 4];
-var box3_12_4outer = [3.504, 12.504, 4.504];
+var box3_12_4outer = [3.5, 12.5, 4.5];
 var box10_16_1 = [10, 16, 1];
 var baseSkinGeometries = {
   head: box8inner,
@@ -5537,9 +5537,54 @@ var import_ts_deepmerge7 = __toESM(require_dist());
 
 // src/skin/SkinTextures.ts
 import { DataTexture, DoubleSide as DoubleSide2, FrontSide as FrontSide2, MeshBasicMaterial as MeshBasicMaterial3, SRGBColorSpace as SRGBColorSpace3 } from "three";
+
+// src/skin/SkinImage.ts
+var SkinImage = class {
+  static async getData(src) {
+    const key = serializeImageKey({ src });
+    return await Caching.imageDataCache.get(`skin:${key}`, async () => {
+      const info = await ImageLoader.getInfo(src);
+      if (info.type !== "png") return ImageLoader.getData(src);
+      try {
+        return await this.decodePng(info.data);
+      } catch (error) {
+        Caching.rawImageCache.invalidate(key);
+        throw error;
+      }
+    });
+  }
+  static async decodePng(bytes) {
+    const { decode, convertIndexedToRgb } = await import("fast-png");
+    const png = decode(bytes);
+    let { data, channels, depth } = png;
+    if (channels === 1 && (png.palette || depth < 8)) {
+      const max = (1 << depth) - 1;
+      const palette = png.palette ?? Array.from({ length: max + 1 }, (_, value) => {
+        const gray = value * 255 / max;
+        return [gray, gray, gray, png.transparency?.[0] === value ? 0 : 255];
+      });
+      data = convertIndexedToRgb({ ...png, palette });
+      channels = palette[0].length;
+      depth = 8;
+    }
+    const pixels = new Uint8ClampedArray(png.width * png.height * 4);
+    for (let pixel = 0; pixel < png.width * png.height; pixel++) {
+      const source = pixel * channels;
+      const target = pixel * 4;
+      const sample = (channel) => depth === 16 ? data[source + channel] >>> 8 : data[source + channel];
+      pixels[target] = sample(0);
+      pixels[target + 1] = sample(channels < 3 ? 0 : 1);
+      pixels[target + 2] = sample(channels < 3 ? 0 : 2);
+      pixels[target + 3] = channels % 2 === 0 ? sample(channels - 1) : png.transparency?.every((value, channel) => data[source + channel] === value) ? 0 : 255;
+    }
+    return { width: png.width, height: png.height, data: pixels, colorSpace: "srgb" };
+  }
+};
+
+// src/skin/SkinTextures.ts
 var SkinTextures = class {
   static async get(src, legacy) {
-    const image = await ImageLoader.getData(src);
+    const image = await SkinImage.getData(src);
     const scale = image.width / 64;
     if (!Number.isInteger(scale) || scale < 1 || image.height !== image.width && image.height !== image.width / 2) {
       throw new MineRenderError(`Invalid skin dimensions ${image.width}x${image.height}; expected 64x64 or 64x32, or an integer-scaled equivalent`);
@@ -5552,12 +5597,13 @@ var SkinTextures = class {
     const key = `skin:${serializeImageKey({ src })}:${isLegacy}`;
     const material = Caching.materialCache.get(key, () => {
       const pixels = isLegacy ? this.normalizeLegacy(image, scale) : new Uint8Array(image.data);
+      this.makeBaseOpaque(pixels, image.width, scale);
       return this.createMaterial(pixels, image.width, image.width);
     });
     return { material, slim, legacy: isLegacy };
   }
   static async getCape(src, layout = "minecraft") {
-    const image = await ImageLoader.getData(src);
+    const image = await SkinImage.getData(src);
     const scale = image.width / 64;
     if (layout === "minecraft" && (!Number.isInteger(scale) || scale < 1 || image.height !== image.width / 2)) {
       throw new MineRenderError(`Invalid cape dimensions ${image.width}x${image.height}; expected 64x32 or an integer-scaled equivalent`);
@@ -5571,7 +5617,7 @@ var SkinTextures = class {
     texture.colorSpace = SRGBColorSpace3;
     texture.flipY = true;
     texture.needsUpdate = true;
-    return new MeshBasicMaterial3({ map: texture, transparent, side: transparent ? DoubleSide2 : FrontSide2, alphaTest: transparent ? 0.5 : 0 });
+    return new MeshBasicMaterial3({ map: texture, transparent, side: transparent ? DoubleSide2 : FrontSide2, alphaTest: transparent ? 0.1 : 0 });
   }
   static isSlim(image, scale) {
     for (const [x, y] of [[46, 52], [54, 20]]) {
@@ -5614,18 +5660,22 @@ var SkinTextures = class {
         if (pixels[(y * image.width + x) * 4 + 3] < 128) clearHat = false;
       }
     }
-    for (let y = 0; y < image.width; y++) {
-      for (let x = 0; x < image.width; x++) {
-        const alpha = (y * image.width + x) * 4 + 3;
-        if (x < 32 * scale && y < 16 * scale || y >= 16 * scale && y < 32 * scale || x >= 16 * scale && x < 48 * scale && y >= 48 * scale) {
-          pixels[alpha] = 255;
-        } else if (clearHat && x >= 32 * scale && y < 32 * scale) {
-          pixels[alpha] = 0;
+    if (clearHat) {
+      for (let y = 0; y < 32 * scale; y++) {
+        for (let x = 32 * scale; x < image.width; x++) {
+          pixels[(y * image.width + x) * 4 + 3] = 0;
         }
       }
     }
     return pixels;
   }
+  static makeBaseOpaque(pixels, width, scale) {
+    for (const [x0, y0, x1, y1] of [[0, 0, 32, 16], [0, 16, 64, 32], [16, 48, 48, 64]]) {
+      for (let y = y0 * scale; y < y1 * scale; y++) {
+        for (let x = x0 * scale; x < x1 * scale; x++) pixels[(y * width + x) * 4 + 3] = 255;
+      }
+    }
+  }
 };
 
 // src/skin/CapeLayout.ts
@@ -5647,12 +5697,13 @@ var SkinObject = class extends SceneObject {
     this.slim = this.options.slim ?? false;
   }
   async init() {
+    const cape = this.getGroupByName("cape" /* CAPE */);
     this.createMeshes();
+    if (cape) this.getGroupByName("body" /* BODY */).attach(cape);
   }
   removeMeshes() {
   }
   createMeshes() {
-    console.log("#createMeshes");
     const mat = this.skinMaterial ?? Materials.MISSING_TEXTURE;
     {
       const headGroup = this.createAndAddGroup("head", 0, 28, 0, "y" /* Y */, -4);
@@ -5662,45 +5713,48 @@ var SkinObject = class extends SceneObject {
       const hat = this.createAndAddMesh("hat", headGroup, hatGeo, mat, "y" /* Y */, 4);
     }
     {
-      const bodyGroup = this.createAndAddGroup("body", 0, 18, 0);
+      const bodyGroup = this.createAndAddGroup("body", 0, 24, 0);
       const bodyGeo = this.getBoxGeometry("body" /* BODY */);
-      const body = this.createAndAddMesh("body", bodyGroup, bodyGeo, mat);
+      const body = this.createAndAddMesh("body", bodyGroup, bodyGeo, mat, "y" /* Y */, -6);
       const jacketGeo = this.getBoxGeometry("jacket" /* JACKET */);
-      const jacket = this.createAndAddMesh("jacket", bodyGroup, jacketGeo, mat);
+      const jacket = this.createAndAddMesh("jacket", bodyGroup, jacketGeo, mat, "y" /* Y */, -6);
     }
     {
       {
-        const leftArmGroup = this.createAndAddGroup("leftArm", this.slim ? -5.5 : -6, 18, 0, "y" /* Y */, 4);
+        const leftArmGroup = this.createAndAddGroup("leftArm", -5, 22, 0);
         const leftArmGeo = this.getBoxGeometry("leftArm" /* LEFT_ARM */);
         const leftArm = this.createAndAddMesh("leftArm", leftArmGroup, leftArmGeo, mat, "y" /* Y */, -4);
+        leftArm.position.x = this.slim ? -0.5 : -1;
         const leftSleeveGeo = this.getBoxGeometry("leftSleeve" /* LEFT_SLEEVE */);
         const leftSleeve = this.createAndAddMesh("leftSleeve", leftArmGroup, leftSleeveGeo, mat, "y" /* Y */, -4);
+        leftSleeve.position.x = this.slim ? -0.5 : -1;
       }
       {
-        const rightArmGroup = this.createAndAddGroup("rightArm", this.slim ? 5.5 : 6, 18, 0, "y" /* Y */, 4);
+        const rightArmGroup = this.createAndAddGroup("rightArm", 5, 22, 0);
         const rightArmGeo = this.getBoxGeometry("rightArm" /* RIGHT_ARM */);
         const rightArm = this.createAndAddMesh("rightArm", rightArmGroup, rightArmGeo, mat, "y" /* Y */, -4);
+        rightArm.position.x = this.slim ? 0.5 : 1;
         const rightSleeveGeo = this.getBoxGeometry("rightSleeve" /* RIGHT_SLEEVE */);
         const rightSleeve = this.createAndAddMesh("rightSleeve", rightArmGroup, rightSleeveGeo, mat, "y" /* Y */, -4);
+        rightSleeve.position.x = this.slim ? 0.5 : 1;
       }
     }
     {
       {
-        const leftLegGroup = this.createAndAddGroup("leftLeg", -2, 6, 0, "y" /* Y */, 4);
+        const leftLegGroup = this.createAndAddGroup("leftLeg", -1.9, 12, 0);
         const leftLegGeo = this.getBoxGeometry("leftLeg" /* LEFT_LEG */);
-        const leftLeg = this.createAndAddMesh("leftLeg", leftLegGroup, leftLegGeo, mat, "y" /* Y */, -4);
+        const leftLeg = this.createAndAddMesh("leftLeg", leftLegGroup, leftLegGeo, mat, "y" /* Y */, -6);
         const leftTrousersGeo = this.getBoxGeometry("leftTrousers" /* LEFT_TROUSERS */);
-        const leftTrousers = this.createAndAddMesh("leftTrousers", leftLegGroup, leftTrousersGeo, mat, "y" /* Y */, -4);
+        const leftTrousers = this.createAndAddMesh("leftTrousers", leftLegGroup, leftTrousersGeo, mat, "y" /* Y */, -6);
       }
       {
-        const rightLegGroup = this.createAndAddGroup("rightLeg", 2, 6, 0, "y" /* Y */, 4);
+        const rightLegGroup = this.createAndAddGroup("rightLeg", 1.9, 12, 0);
         const rightLegGeo = this.getBoxGeometry("rightLeg" /* RIGHT_LEG */);
-        const rightLeg = this.createAndAddMesh("rightLeg", rightLegGroup, rightLegGeo, mat, "y" /* Y */, -4);
+        const rightLeg = this.createAndAddMesh("rightLeg", rightLegGroup, rightLegGeo, mat, "y" /* Y */, -6);
         const rightTrousersGeo = this.getBoxGeometry("rightTrousers" /* RIGHT_TROUSERS */);
-        const rightTrousers = this.createAndAddMesh("rightTrousers", rightLegGroup, rightTrousersGeo, mat, "y" /* Y */, -4);
+        const rightTrousers = this.createAndAddMesh("rightTrousers", rightLegGroup, rightTrousersGeo, mat, "y" /* Y */, -6);
       }
     }
-    console.log("#createMeshes done");
   }
   async setSkinTexture(src) {
     if (typeof src === "undefined") return;
@@ -5725,7 +5779,7 @@ var SkinObject = class extends SceneObject {
     const load = ++this.capeLoad;
     if (src === void 0) {
       const group = this.getGroupByName("cape" /* CAPE */);
-      if (group) this.remove(group);
+      group?.removeFromParent();
       this.notifyDirty();
       return;
     }
@@ -5743,7 +5797,9 @@ var SkinObject = class extends SceneObject {
       mesh.material = material;
       mesh.geometry = geometry;
     } else {
-      const group = this.createAndAddGroup("cape" /* CAPE */, 0, 24, 2);
+      const body = this.getGroupByName("body" /* BODY */);
+      const group = this.createGroup("cape" /* CAPE */, 0, body ? 0 : 24, 2);
+      (body ?? this).add(group);
       group.rotation.set(toRadians(-6), Math.PI, 0);
       const cape = this.createAndAddMesh("cape" /* CAPE */, group, geometry, material);
       cape.position.set(0, -8, -0.5);
@@ -5758,15 +5814,14 @@ var SkinObject = class extends SceneObject {
   updateSlim(slim) {
     if (slim === this.slim) return;
     this.slim = slim;
+    const offset = slim ? 0.5 : -0.5;
     for (const part of ["leftArm" /* LEFT_ARM */, "leftSleeve" /* LEFT_SLEEVE */, "rightArm" /* RIGHT_ARM */, "rightSleeve" /* RIGHT_SLEEVE */]) {
       const mesh = this.getMeshByName(part);
-      if (mesh) mesh.geometry = this.getBoxGeometry(part);
+      if (mesh) {
+        mesh.geometry = this.getBoxGeometry(part);
+        mesh.position.x += part === "leftArm" /* LEFT_ARM */ || part === "leftSleeve" /* LEFT_SLEEVE */ ? offset : -offset;
+      }
     }
-    const offset = slim ? 0.5 : -0.5;
-    const leftArm = this.getGroupByName("leftArm" /* LEFT_ARM */);
-    const rightArm = this.getGroupByName("rightArm" /* RIGHT_ARM */);
-    if (leftArm) leftArm.position.x += offset;
-    if (rightArm) rightArm.position.x -= offset;
     this.notifyDirty();
   }
   /** Select the texture layout, or pass undefined to detect it from image dimensions. */
@@ -5782,7 +5837,6 @@ var SkinObject = class extends SceneObject {
   }
   //TODO: layer toggles
   getBoxGeometry(part) {
-    console.log("slim", this.slim);
     const coordinates = this.slim ? slimSkinTextureCoordinates : classicSkinTextureCoordinates;
     const geometries = this.slim ? slimSkinGeometries : classicSkinGeometries;
     return this._getBoxGeometryFromDimensions(geometries[part], coordinates[part], [64, 64], [64, 64]);
@@ -7365,6 +7419,7 @@ export {
   SceneStats,
   SceneStatsDisplay,
   SchematicParser,
+  SkinImage,
   SkinObject,
   SkinPart,
   SkinTextures,