@vectojs/three 0.1.4 → 0.1.5

package/dist/ThreeRenderer.d.ts

@@ -51,6 +51,16 @@ export declare class ThreeRenderer implements IRenderer {
     closePath(): void;
     arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
     roundRect(x: number, y: number, width: number, height: number, radii: number | number[]): void;
+    /**
+     * Textures cached per drawImage source (identity-keyed). A frame that
+     * redraws the same image no longer re-uploads it. Mutable sources (a canvas
+     * you repaint) must call {@link invalidateImage} after changing pixels.
+     * Entries are skipped by the per-frame disposer and released on
+     * invalidation or {@link dispose}.
+     */
+    private imageTextureCache;
+    /** Drop the cached texture for a source whose pixels changed. */
+    invalidateImage(source: CanvasImageSource): void;
     drawImage(source: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void;
     fill(colorOrGradient: string | any): void;
     private fillSolidShape;

package/dist/index.js

@@ -310,15 +310,35 @@ var ThreeRenderer = class {
     this.currentPath.lineTo(x, y + r_tl);
     this.currentPath.arc(x + r_tl, y + r_tl, r_tl, Math.PI, -Math.PI / 2, false);
   }
+  /**
+   * Textures cached per drawImage source (identity-keyed). A frame that
+   * redraws the same image no longer re-uploads it. Mutable sources (a canvas
+   * you repaint) must call {@link invalidateImage} after changing pixels.
+   * Entries are skipped by the per-frame disposer and released on
+   * invalidation or {@link dispose}.
+   */
+  imageTextureCache = /* @__PURE__ */ new Map();
+  /** Drop the cached texture for a source whose pixels changed. */
+  invalidateImage(source) {
+    const cached = this.imageTextureCache.get(source);
+    if (cached) {
+      cached.dispose();
+      this.imageTextureCache.delete(source);
+    }
+  }
   drawImage(source, dx, dy, dw, dh) {
-    let texture;
-    if (source instanceof HTMLImageElement || source instanceof HTMLCanvasElement || typeof ImageBitmap !== "undefined" && source instanceof ImageBitmap) {
-      texture = new THREE.CanvasTexture(source);
-    } else {
-      texture = new THREE.Texture(source);
-      texture.needsUpdate = true;
+    let texture = this.imageTextureCache.get(source);
+    if (!texture) {
+      if (source instanceof HTMLImageElement || source instanceof HTMLCanvasElement || typeof ImageBitmap !== "undefined" && source instanceof ImageBitmap) {
+        texture = new THREE.CanvasTexture(source);
+      } else {
+        texture = new THREE.Texture(source);
+        texture.needsUpdate = true;
+      }
+      texture.minFilter = THREE.LinearFilter;
+      texture.userData.vectoCached = true;
+      this.imageTextureCache.set(source, texture);
     }
-    texture.minFilter = THREE.LinearFilter;
     const material = new THREE.MeshBasicMaterial({
       map: texture,
       transparent: true,
@@ -616,6 +636,10 @@ var ThreeRenderer = class {
       entry.texture.dispose();
     }
     this.textTextureCache.clear();
+    for (const texture of this.imageTextureCache.values()) {
+      texture.dispose();
+    }
+    this.imageTextureCache.clear();
     this.currentPath = null;
     this.stack.length = 0;
     this.alphaStack.length = 0;

package/dist/index.mjs

@@ -272,15 +272,35 @@ var ThreeRenderer = class {
     this.currentPath.lineTo(x, y + r_tl);
     this.currentPath.arc(x + r_tl, y + r_tl, r_tl, Math.PI, -Math.PI / 2, false);
   }
+  /**
+   * Textures cached per drawImage source (identity-keyed). A frame that
+   * redraws the same image no longer re-uploads it. Mutable sources (a canvas
+   * you repaint) must call {@link invalidateImage} after changing pixels.
+   * Entries are skipped by the per-frame disposer and released on
+   * invalidation or {@link dispose}.
+   */
+  imageTextureCache = /* @__PURE__ */ new Map();
+  /** Drop the cached texture for a source whose pixels changed. */
+  invalidateImage(source) {
+    const cached = this.imageTextureCache.get(source);
+    if (cached) {
+      cached.dispose();
+      this.imageTextureCache.delete(source);
+    }
+  }
   drawImage(source, dx, dy, dw, dh) {
-    let texture;
-    if (source instanceof HTMLImageElement || source instanceof HTMLCanvasElement || typeof ImageBitmap !== "undefined" && source instanceof ImageBitmap) {
-      texture = new THREE.CanvasTexture(source);
-    } else {
-      texture = new THREE.Texture(source);
-      texture.needsUpdate = true;
+    let texture = this.imageTextureCache.get(source);
+    if (!texture) {
+      if (source instanceof HTMLImageElement || source instanceof HTMLCanvasElement || typeof ImageBitmap !== "undefined" && source instanceof ImageBitmap) {
+        texture = new THREE.CanvasTexture(source);
+      } else {
+        texture = new THREE.Texture(source);
+        texture.needsUpdate = true;
+      }
+      texture.minFilter = THREE.LinearFilter;
+      texture.userData.vectoCached = true;
+      this.imageTextureCache.set(source, texture);
     }
-    texture.minFilter = THREE.LinearFilter;
     const material = new THREE.MeshBasicMaterial({
       map: texture,
       transparent: true,
@@ -578,6 +598,10 @@ var ThreeRenderer = class {
       entry.texture.dispose();
     }
     this.textTextureCache.clear();
+    for (const texture of this.imageTextureCache.values()) {
+      texture.dispose();
+    }
+    this.imageTextureCache.clear();
     this.currentPath = null;
     this.stack.length = 0;
     this.alphaStack.length = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/three",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "publishConfig": {
     "access": "public"
   },