fix: replace sharp

Author: dudewheresmycode

package-lock.json

@@ -71,6 +71,7 @@
     "georaster": "^1.6.0",
     "georaster-layer-for-leaflet": "^4.1.2",
     "got": "^14.6.6",
+    "jpeg-js": "^0.4.4",
     "konva": "^10.2.1",
     "ktx2-encoder": "^0.5.3",
     "leaflet": "^1.9.4",
@@ -90,7 +91,6 @@
     "react-dom": "^19.2.3",
     "react-konva": "^19.2.3",
     "react-router": "^7.13.1",
-    "sharp": "^0.34.5",
     "stackblur-canvas": "^2.7.0",
     "svg-path-properties": "^1.3.0",
     "svg-transform-parser": "^0.0.1",

package.json

@@ -18,7 +18,6 @@ import {
   EXTMeshGPUInstancing,
 } from '@gltf-transform/extensions';
 import { PNG } from 'pngjs';
-import sharp from 'sharp';
 
 import { hexToRGB01 } from '../colors';
 import { TEXTURE_MAP } from '../textures';
@@ -297,41 +296,6 @@ export async function write(filePath, project, meshData, imageData) {
   // Deduplicate any identical textures/materials/meshes
   await doc.transform(dedup());
 
-  // let textureCount = 0;
-  // let totalTextures = 0;
-
-  // // Count first
-  // doc.getRoot().listTextures().forEach(t => totalTextures++);
-
-  // await doc.transform(
-  //   ktx2({
-  //     // isUASTC: false,
-  //     isUASTC: true,
-  //     generateMipmap: true,  // try without mipmaps first — halves encoding time
-
-  //     imageDecoder: async (data) => {
-  //       const start = Date.now();
-  //       const { info, data: raw } = await sharp(Buffer.from(data))
-  //         .ensureAlpha()
-  //         .raw()
-  //         .toBuffer({ resolveWithObject: true });
-
-  //       console.log(`[KTX2] Decoded ${++textureCount}/${totalTextures}: ${info.width}x${info.height} (${Date.now() - start}ms)`, info);
-  //       // Copy to a clean ArrayBuffer — don't use raw.buffer which is pooled
-  //       const pixels = new Uint8Array(raw.length);
-  //       pixels.set(raw);
-        
-  //       return {
-  //         width: info.width,
-  //         height: info.height,
-  //         // channels: 4,
-  //         // channels: info.channels,
-  //         data: pixels // new Uint8Array(raw.buffer, raw.byteOffset, raw.byteLength),
-  //       };
-  //     }
-  //   })
-  // );  
-
 
   const { sky } = openProject.scene;
 

src/lib/export/gltf.js

@@ -4,7 +4,9 @@ import { Observable } from "observable-fns"
 import { Document, NodeIO } from '@gltf-transform/core';
 import { KHRTextureBasisu } from '@gltf-transform/extensions';
 import { ktx2 } from 'ktx2-encoder/gltf-transform';
-import sharp from 'sharp';
+// import sharp from 'sharp';
+import { PNG } from 'pngjs';
+import jpeg from 'jpeg-js';
 
 import fs from "node:fs";
 import path from "node:path";
@@ -13,6 +15,17 @@ import { addOBJ } from "../../trees/lib/obj.js";
 import { addGLB } from "../../trees/lib/gltf.js";
 
 
+function decodeImage(data) {
+  const buf = Buffer.from(data);
+  // JPEG magic bytes: 0xFF 0xD8
+  if (buf[0] === 0xFF && buf[1] === 0xD8) {
+    const { width, height, data: pixels } = jpeg.decode(buf, { useTArray: true });
+    return { width, height, data: new Uint8Array(pixels) };
+  }
+  const png = PNG.sync.read(buf);
+  return { width: png.width, height: png.height, data: new Uint8Array(png.data) };
+}
+
 const EXTENSIONS = [KHRTextureBasisu];
 
 async function compressTextures(glbBuffer) {
@@ -34,13 +47,15 @@ async function compressTextures(glbBuffer) {
       ktx2({
         isUASTC: true,
         generateMipmap: true,
-        imageDecoder: async (data) => {
-          const { info, data: raw } = await sharp(Buffer.from(data))
-            .ensureAlpha()
-            .raw()
-            .toBuffer({ resolveWithObject: true });
-          const pixels = new Uint8Array(raw.length);
-          pixels.set(raw);
+        imageDecoder: decodeImage
+        // imageDecoder: async (data) => {
+          // return decodeImage(data);
+          // const { info, data: raw } = await sharp(Buffer.from(data))
+          //   .ensureAlpha()
+          //   .raw()
+          //   .toBuffer({ resolveWithObject: true });
+          // const pixels = new Uint8Array(raw.length);
+          // pixels.set(raw);
 
           // observer.next({
           //   type: 'progress',
@@ -49,8 +64,8 @@ async function compressTextures(glbBuffer) {
           //     current: ++textureCount
           //   }
           // });
-          return { width: info.width, height: info.height, data: pixels };
-        }
+          // return { width: info.width, height: info.height, data: pixels };
+        // }
       })
     );
 
@@ -115,15 +130,16 @@ export async function exportTreePackage(inputFiles, outputFile) {
     ktx2({
       isUASTC: true,
       generateMipmap: true,
-      imageDecoder: async (data) => {
-        const { info, data: raw } = await sharp(Buffer.from(data))
-          .ensureAlpha()
-          .raw()
-          .toBuffer({ resolveWithObject: true });
-        const pixels = new Uint8Array(raw.length);
-        pixels.set(raw);
-        return { width: info.width, height: info.height, data: pixels };
-      }
+      imageDecoder: decodeImage
+      // imageDecoder: async (data) => {
+        // const { info, data: raw } = await sharp(Buffer.from(data))
+        //   .ensureAlpha()
+        //   .raw()
+        //   .toBuffer({ resolveWithObject: true });
+        // const pixels = new Uint8Array(raw.length);
+        // pixels.set(raw);
+        // return { width: info.width, height: info.height, data: pixels };
+      // }
     })
   );