threeify - npm Package Compare versions

Comparing version 1.76.0 to 1.87.0

CHANGELOG.md

@@ -0,1 +1,166 @@
+## [1.79.2](https://github.com/threeify/threeify/compare/v1.79.1...v1.79.2) (2020-12-10)
+
+
+### Bug Fixes
+
+* better Safari support ([9be6bfe](https://github.com/threeify/threeify/commit/9be6bfe990e5e7e0202b3743b3d7c60371109d1a))
+
+## [1.79.1](https://github.com/threeify/threeify/compare/v1.79.0...v1.79.1) (2020-11-09)
+
+
+### Bug Fixes
+
+* promise order in layer compositor ([207b899](https://github.com/threeify/threeify/commit/207b89936778c6ddb67b10a2279454f02485753f))
+
+# [1.79.0](https://github.com/threeify/threeify/compare/v1.78.0...v1.79.0) (2020-11-07)
+
+
+### Features
+
+* allow for non-leaking concurrent loads ([41ea58a](https://github.com/threeify/threeify/commit/41ea58a5173b6dbb26b22ae88a563bbd84f04711))
+
+# [1.78.0](https://github.com/threeify/threeify/compare/v1.77.1...v1.78.0) (2020-11-03)
+
+
+### Features
+
+* auto discard feature on layer compositor ([64ef9f0](https://github.com/threeify/threeify/commit/64ef9f0f04c9c6d86fcbb0302a2a1c1a9955371d))
+
+## [1.77.1](https://github.com/threeify/threeify/compare/v1.77.0...v1.77.1) (2020-10-31)
+
+
+### Bug Fixes
+
+* work around PNG loading bug on Chrome? ([02fb217](https://github.com/threeify/threeify/commit/02fb217f98e4a5a93e0fcc21e2ecfa6e0d64a0f9))
+
+# [1.77.0](https://github.com/threeify/threeify/compare/v1.76.3...v1.77.0) (2020-10-30)
+
+
+### Bug Fixes
+
+* spelling mistake in comments ([049724c](https://github.com/threeify/threeify/commit/049724c277b72498e42140959418a8d15da3e283))
+
+
+### Features
+
+* add ability to discard layer data (images + WebGL memory allocations) ([0d61826](https://github.com/threeify/threeify/commit/0d61826ee763764d727501a8173b2f717e9b4cc6))
+
+## [1.76.3](https://github.com/threeify/threeify/compare/v1.76.2...v1.76.3) (2020-10-28)
+
+
+### Bug Fixes
+
+* adjust pan position based on pixelDisplayRatio ([630a7fc](https://github.com/threeify/threeify/commit/630a7fc4d164af11314af1f694b53f74f7582d66))
+
+## [1.76.2](https://github.com/threeify/threeify/compare/v1.76.1...v1.76.2) (2020-10-27)
+
+
+### Bug Fixes
+
+* fix black fringes: V-Ray PNGs are actually premultipled alpha against PNG spec. ([e74490d](https://github.com/threeify/threeify/commit/e74490d297cf34bb815a11189f7e0f5322d5d1cd))
+
+## [1.76.1](https://github.com/threeify/threeify/compare/v1.76.0...v1.76.1) (2020-10-22)
+
+
+### Bug Fixes
+
+* support clearState properly, avoid black fringes. ([8e77d45](https://github.com/threeify/threeify/commit/8e77d451d86568c612995d19b2148e823a898f28))
+
+# [1.76.0](https://github.com/threeify/threeify/compare/v1.75.2...v1.76.0) (2020-10-13)
+
+
+### Features
+
+* add support for layerCompositor.snapshot() ([324ec31](https://github.com/threeify/threeify/commit/324ec310123bcfe0e322ce6e0626f6a90866af38))
+
+## [1.75.2](https://github.com/threeify/threeify/compare/v1.75.1...v1.75.2) (2020-10-08)
+
+
+### Bug Fixes
+
+* fill height on compositor. ([b069acd](https://github.com/threeify/threeify/commit/b069acd8bf4f93487f8a899720a79e6122919d18))
+
+## [1.75.1](https://github.com/threeify/threeify/compare/v1.75.0...v1.75.1) (2020-09-15)
+
+
+### Bug Fixes
+
+* fix imports of images for examples. ([932d2cc](https://github.com/threeify/threeify/commit/932d2cce60319d80b1880ee869f1d0978c1601d0))
+
+# [1.75.0](https://github.com/threeify/threeify/compare/v1.74.0...v1.75.0) (2020-09-15)
+
+
+### Bug Fixes
+
+* proper npm names for compiled lib ([17979d3](https://github.com/threeify/threeify/commit/17979d3604666d497d843fb34eec15bab8273f6e))
+
+
+### Features
+
+* adopt proper index.ts imports for the whole library ([2af4131](https://github.com/threeify/threeify/commit/2af4131fea2106b076781f20718fc16f18df7e42))
+
+# [1.74.0](https://github.com/threeify/threeify/compare/v1.73.0...v1.74.0) (2020-09-15)
+
+
+### Features
+
+* add .npmignore ([9540b1b](https://github.com/threeify/threeify/commit/9540b1b8a5634f2d839efa8882c9c44043d6f0b9))
+* proper npm publishing ([a296b2a](https://github.com/threeify/threeify/commit/a296b2a436a4e9b162ab2fda2da276b6c545ac7d))
+
+# [1.73.0](https://github.com/threeify/threeify/compare/v1.72.0...v1.73.0) (2020-09-15)
+
+
+### Features
+
+* cache offscreen composite, update only when layers change. ([10638be](https://github.com/threeify/threeify/commit/10638be577c112aea2b4af41da97d0aa0035aa9a))
+
+# [1.72.0](https://github.com/threeify/threeify/compare/v1.71.0...v1.72.0) (2020-09-14)
+
+
+### Bug Fixes
+
+* makeMatrix4OrthographicSimple zoom. ([2f55ecf](https://github.com/threeify/threeify/commit/2f55ecfe00bdd1c68ef77667240a06c162e4f10f))
+
+
+### Features
+
+* centered zoom for layer compositor. ([38b0b8a](https://github.com/threeify/threeify/commit/38b0b8abac65bb7278d58378400b4a930edca4ea))
+
+# [1.71.0](https://github.com/threeify/threeify/compare/v1.70.2...v1.71.0) (2020-09-14)
+
+
+### Features
+
+* add switching between black and white bg. ([78bacd1](https://github.com/threeify/threeify/commit/78bacd1427c49999244e66cdd8dcf6acd1e8cb07))
+
+## [1.70.2](https://github.com/threeify/threeify/compare/v1.70.1...v1.70.2) (2020-09-13)
+
+
+### Bug Fixes
+
+* make macOS Safari and Ubuntu Chrome behave the same in LayerCompositor ([a98b954](https://github.com/threeify/threeify/commit/a98b954a99d079c09ba696c1a85a928d0624fe93))
+* premultipled alpha works the same as non-premultipled alpha in blend states ([504383d](https://github.com/threeify/threeify/commit/504383de7f713372a994a7a8e1ba5eaf77f29679))
+
+## [1.70.1](https://github.com/threeify/threeify/compare/v1.70.0...v1.70.1) (2020-09-13)
+
+
+### Bug Fixes
+
+* fix blending bug for Add mode in non-premultiplied Alpha. ([23bd048](https://github.com/threeify/threeify/commit/23bd0482f431cf73796fe0509d91b11ad0b0c0af))
+
+# [1.70.0](https://github.com/threeify/threeify/compare/v1.69.0...v1.70.0) (2020-09-13)
+
+
+### Features
+
+* add blend-state & premultiplied alpha example ([816fb25](https://github.com/threeify/threeify/commit/816fb25b8553c63975ea288704c2b41fb618884e))
+
+# [1.69.0](https://github.com/threeify/threeify/compare/v1.68.0...v1.69.0) (2020-09-09)
+
+
+### Features
+
+* add support for texture sizes of svgs ([322479f](https://github.com/threeify/threeify/commit/322479f69c392ac32396bc0355b0b7c290445ec4))
+* support for SVG texture loading. ([5189b44](https://github.com/threeify/threeify/commit/5189b44cfda5327b4d5be87db5494f5f27699ed7))
+
 # [1.68.0](https://github.com/threeify/threeify/compare/v1.67.0...v1.68.0) (2020-09-09)
@@ -2,0 +167,0 @@

dist/lib/engines/layerCompositor/fragment.glsl.js

@@ -0,1 +1,2 @@
+import _lib_shaders_includes_math_math_glsl from '../../shaders/includes/math/math.glsl.js'
 import _lib_shaders_includes_color_spaces_srgb_glsl from '../../shaders/includes/color/spaces/srgb.glsl.js'
@@ -8,3 +9,3 @@
 uniform float mipmapBias;
-uniform int premultipliedAlpha;
+uniform int convertToPremultipliedAlpha;
 
@@ -19,2 +20,3 @@ uniform vec2 layerUVScale;
 
+${_lib_shaders_includes_math_math_glsl}
 ${_lib_shaders_includes_color_spaces_srgb_glsl}
@@ -25,10 +27,10 @@
   vec2 texelUv = ( uvToTexture * vec3( v_uv, 1.0 ) ).xy;
+
   vec4 layerColor = texture2D( layerMap, texelUv, mipmapBias );
-  outputColor += sRGBToLinear( layerColor.rgb );
 
-  gl_FragColor.rgb = linearTosRGB( outputColor );
-  if( premultipliedAlpha == 1 ) {
-    gl_FragColor.rgb *= layerColor.a;
+  // premultiply alpha in output as the source PNG is not premultiplied
+  if( convertToPremultipliedAlpha == 1 ) {
+    layerColor.rgb *= layerColor.a;
   }
-  gl_FragColor.a = layerColor.a;
+  gl_FragColor = layerColor;
 
@@ -35,0 +37,0 @@ }

dist/lib/engines/layerCompositor/Layer.d.ts

@@ -13,8 +13,7 @@ import { Matrix3 } from "../../math/Matrix3";
     uvOffset: Vector2;
-    premultipliedAlpha: boolean;
     disposed: boolean;
     planeToImage: Matrix4;
     uvToTexture: Matrix3;
-    constructor(compositor: LayerCompositor, url: string, texImage2D: TexImage2D, offset: Vector2, uvScaleFactor?: Vector2, uvOffset?: Vector2, premultipliedAlpha?: boolean);
+    constructor(compositor: LayerCompositor, url: string, texImage2D: TexImage2D, offset: Vector2, uvScaleFactor?: Vector2, uvOffset?: Vector2);
 }
 //# sourceMappingURL=Layer.d.ts.map

dist/lib/engines/layerCompositor/Layer.js

@@ -6,3 +6,3 @@ import { makeMatrix3Concatenation, makeMatrix3Scale, makeMatrix3Translation } from "../../math/Matrix3.Functions";
 export class Layer {
-    constructor(compositor, url, texImage2D, offset, uvScaleFactor = new Vector2(1, -1), uvOffset = new Vector2(0, 1), premultipliedAlpha = true) {
+    constructor(compositor, url, texImage2D, offset, uvScaleFactor = new Vector2(1, -1), uvOffset = new Vector2(0, 1)) {
         this.compositor = compositor;
@@ -14,3 +14,2 @@ this.url = url;
         this.uvOffset = uvOffset;
-        this.premultipliedAlpha = premultipliedAlpha;
         this.disposed = false;
@@ -17,0 +16,0 @@ const planeToLayer = makeMatrix4Scale(new Vector3(this.texImage2D.size.width, this.texImage2D.size.height, 1.0));

dist/lib/engines/layerCompositor/LayerCompositor.d.ts

@@ -0,1 +1,2 @@
+import { IDisposable } from "../../core/types";
 import { Vector2 } from "../../math/Vector2";
@@ -8,11 +9,29 @@ import { ClearState } from "../../renderers/webgl/ClearState";
 import { Layer } from "./Layer";
-export declare type TexImage2DMap = {
-    [key: string]: TexImage2D | undefined;
+export declare class LayerImage implements IDisposable {
+    readonly url: string;
+    texImage2D: TexImage2D;
+    image: ImageBitmap | HTMLImageElement | undefined;
+    disposed: boolean;
+    renderId: number;
+    constructor(url: string, texImage2D: TexImage2D, image: ImageBitmap | HTMLImageElement | undefined);
+    dispose(): void;
+}
+export declare type LayerImageMap = {
+    [key: string]: LayerImage | undefined;
 };
+export declare type TexImage2DPromiseMap = {
+    [key: string]: Promise<TexImage2D> | undefined;
+};
 export declare function makeColorMipmapAttachment(context: RenderingContext, size: Vector2, dataType?: DataType | undefined): TexImage2D;
+export declare enum ImageFitMode {
+    FitWidth = 0,
+    FitHeight = 1
+}
 export declare class LayerCompositor {
     #private;
     context: RenderingContext;
-    texImage2DCache: TexImage2DMap;
+    layerImageCache: LayerImageMap;
+    texImage2DPromiseCache: TexImage2DPromiseMap;
     imageSize: Vector2;
+    imageFitMode: ImageFitMode;
     zoomScale: number;
@@ -25,6 +44,10 @@ panPosition: Vector2;
     offscreenColorAttachment: TexImage2D | undefined;
+    renderId: number;
+    autoDiscard: boolean;
     constructor(canvas: HTMLCanvasElement);
+    snapshot(mimeFormat?: string, quality?: number): string;
     set layers(layers: Layer[]);
     updateOffscreen(): void;
     loadTexImage2D(url: string, image?: HTMLImageElement | ImageBitmap | undefined): Promise<TexImage2D>;
+    discardTexImage2D(url: string): boolean;
     render(): void;
@@ -31,0 +54,0 @@ renderLayersToFramebuffer(): void;

dist/lib/engines/layerCompositor/LayerCompositor.js

@@ -24,4 +24,4 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
 import { Vector2 } from "../../math/Vector2";
-import { makeVector2Fit } from "../../math/Vector2.Functions";
 import { Vector3 } from "../../math/Vector3";
+import { isFirefox, isiOS, isMacOS } from "../../platform/Detection";
 import { blendModeToBlendState } from "../../renderers/webgl/BlendState";
@@ -43,6 +43,28 @@ import { makeBufferGeometryFromGeometry } from "../../renderers/webgl/buffers/BufferGeometry";
 import { TextureWrap } from "../../renderers/webgl/textures/TextureWrap";
-import { fetchImage } from "../../textures/loaders/Image";
+import { fetchImage, isImageBitmapSupported } from "../../textures/loaders/Image";
 import { Texture } from "../../textures/Texture";
 import fragmentSource from "./fragment.glsl";
 import vertexSource from "./vertex.glsl";
+function releaseImage(image) {
+    if (isImageBitmapSupported() && image instanceof ImageBitmap) {
+        image.close();
+    }
+}
+export class LayerImage {
+    constructor(url, texImage2D, image) {
+        this.url = url;
+        this.texImage2D = texImage2D;
+        this.image = image;
+        this.disposed = false;
+        this.renderId = -1;
+    }
+    dispose() {
+        if (!this.disposed) {
+            this.texImage2D.dispose();
+            releaseImage(this.image);
+            this.image = undefined;
+            this.disposed = true;
+        }
+    }
+}
 export function makeColorMipmapAttachment(context, size, dataType = undefined) {
@@ -58,8 +80,15 @@ const texParams = new TexParameters();
 }
+export var ImageFitMode;
+(function (ImageFitMode) {
+    ImageFitMode[ImageFitMode["FitWidth"] = 0] = "FitWidth";
+    ImageFitMode[ImageFitMode["FitHeight"] = 1] = "FitHeight";
+})(ImageFitMode || (ImageFitMode = {}));
 export class LayerCompositor {
     constructor(canvas) {
-        this.texImage2DCache = {};
+        this.layerImageCache = {};
+        this.texImage2DPromiseCache = {};
         _bufferGeometry.set(this, void 0);
         _program.set(this, void 0);
         this.imageSize = new Vector2(0, 0);
+        this.imageFitMode = ImageFitMode.FitHeight;
         this.zoomScale = 1.0;
@@ -71,4 +100,6 @@ this.panPosition = new Vector2(0.5, 0.5);
         this.firstRender = true;
-        this.clearState = new ClearState(new Vector3(1, 1, 1), 1.0);
+        this.clearState = new ClearState(new Vector3(1, 1, 1), 0.0);
         this.offscreenSize = new Vector2(0, 0);
+        this.renderId = 0;
+        this.autoDiscard = false;
         this.context = new RenderingContext(canvas, {
@@ -80,2 +111,3 @@ alpha: true,
             stencil: false,
+            preserveDrawingBuffer: true,
         });
@@ -89,2 +121,9 @@ this.context.canvasFramebuffer.devicePixelRatio = window.devicePixelRatio;
     }
+    snapshot(mimeFormat = "image/jpeg", quality = 1.0) {
+        const canvas = this.context.canvasFramebuffer.canvas;
+        if (canvas instanceof HTMLCanvasElement) {
+            return canvas.toDataURL(mimeFormat, quality);
+        }
+        throw new Error("snapshot not supported");
+    }
     set layers(layers) {
@@ -108,6 +147,11 @@ __classPrivateFieldSet(this, _layers, layers);
     loadTexImage2D(url, image = undefined) {
-        return new Promise((resolve) => {
-            const cachedTexImage2D = this.texImage2DCache[url];
-            if (cachedTexImage2D !== undefined && !cachedTexImage2D.disposed) {
-                return resolve(cachedTexImage2D);
+        const layerImagePromise = this.texImage2DPromiseCache[url];
+        if (layerImagePromise !== undefined) {
+            console.log(`loading: ${url} (reusing promise)`);
+            return layerImagePromise;
+        }
+        return (this.texImage2DPromiseCache[url] = new Promise((resolve) => {
+            const layerImage = this.layerImageCache[url];
+            if (layerImage !== undefined) {
+                return resolve(layerImage.texImage2D);
             }
@@ -122,5 +166,6 @@ function createTexture(compositor, image) {
                 texture.name = url;
+                console.log(`loading: ${url}`);
                 const texImage2D = makeTexImage2DFromTexture(compositor.context, texture);
-                compositor.texImage2DCache[url] = texImage2D;
-                return texImage2D;
+                delete compositor.texImage2DPromiseCache[url];
+                return (compositor.layerImageCache[url] = new LayerImage(url, texImage2D, image)).texImage2D;
             }
@@ -135,17 +180,37 @@ if (image === undefined) {
             }
+        })).then((texImage2D) => {
+            delete this.texImage2DPromiseCache[url];
+            return texImage2D;
         });
     }
+    discardTexImage2D(url) {
+        const layerImage = this.layerImageCache[url];
+        if (layerImage !== undefined) {
+            console.log(`discarding: ${url}`);
+            layerImage.dispose();
+            delete this.layerImageCache[url];
+            return true;
+        }
+        return false;
+    }
     render() {
+        this.renderId++;
         const canvasFramebuffer = this.context.canvasFramebuffer;
         const canvasSize = canvasFramebuffer.size;
         const canvasAspectRatio = canvasSize.width / canvasSize.height;
-        const canvasImageSize = makeVector2Fit(canvasSize, this.imageSize);
+        const imageToCanvasScale = this.imageFitMode === ImageFitMode.FitWidth
+            ? canvasSize.width / this.imageSize.width
+            : canvasSize.height / this.imageSize.height;
+        const canvasImageSize = this.imageSize.clone().multiplyByScalar(imageToCanvasScale);
         const canvasImageCenter = canvasImageSize.clone().multiplyByScalar(0.5);
         if (this.zoomScale > 1.0) {
-            const imagePanPosition = this.panPosition.clone().multiplyByScalar(this.imageSize.width / canvasImageSize.width);
-            const imageCanvasSize = canvasSize.clone().multiplyByScalar(this.imageSize.width / canvasImageSize.width);
+            const imagePanPosition = this.panPosition
+                .clone()
+                .multiplyByScalar(1 / imageToCanvasScale)
+                .multiplyByScalar(this.context.canvasFramebuffer.devicePixelRatio);
+            const imageCanvasSize = canvasSize.clone().multiplyByScalar(1 / imageToCanvasScale);
             const imagePanOffset = imagePanPosition.clone().sub(imageCanvasSize.clone().multiplyByScalar(0.5));
             imagePanOffset.x = Math.sign(imagePanOffset.x) * Math.min(Math.abs(imagePanOffset.x), this.imageSize.x * 0.5);
             imagePanOffset.y = Math.sign(imagePanOffset.y) * Math.min(Math.abs(imagePanOffset.y), this.imageSize.y * 0.5);
-            const canvasPanOffset = imagePanOffset.clone().multiplyByScalar(canvasImageSize.width / this.imageSize.width);
+            const canvasPanOffset = imagePanOffset.clone().multiplyByScalar(imageToCanvasScale);
             const centeredCanvasPanOffset = canvasPanOffset.clone().multiplyByScalar(1 - 1 / this.zoomScale);
@@ -175,7 +240,15 @@ canvasImageCenter.add(centeredCanvasPanOffset);
             uvToTexture: uvToTexture,
-            mipmapBias: 0.25,
-            premultipliedAlpha: 0,
+            mipmapBias: 0.0,
+            convertToPremultipliedAlpha: 0,
         };
         const blendState = blendModeToBlendState(Blending.Over, true);
         renderBufferGeometry(canvasFramebuffer, __classPrivateFieldGet(this, _program), uniforms, __classPrivateFieldGet(this, _bufferGeometry), undefined, blendState);
+        if (this.autoDiscard) {
+            for (const url in this.layerImageCache) {
+                const layerImage = this.layerImageCache[url];
+                if (layerImage !== undefined && layerImage.renderId < this.renderId) {
+                    this.discardTexImage2D(url);
+                }
+            }
+        }
     }
@@ -196,3 +269,8 @@ renderLayersToFramebuffer() {
         const offscreenToImage = makeMatrix4Inverse(imageToOffscreen);
+        const convertToPremultipliedAlpha = !(isMacOS() || isiOS() || isFirefox()) ? 0 : 1;
         __classPrivateFieldGet(this, _layers).forEach((layer) => {
+            const layerImage = this.layerImageCache[layer.url];
+            if (layerImage !== undefined) {
+                layerImage.renderId = this.renderId;
+            }
             const uniforms = {
@@ -206,5 +284,5 @@ viewToScreen: imageToOffscreen,
                 mipmapBias: 0,
-                premultipliedAlpha: layer.premultipliedAlpha ? 1 : 0,
+                convertToPremultipliedAlpha,
             };
-            const blendState = blendModeToBlendState(Blending.Over, layer.premultipliedAlpha);
+            const blendState = blendModeToBlendState(Blending.Over, true);
             renderBufferGeometry(offscreenFramebuffer, __classPrivateFieldGet(this, _program), uniforms, __classPrivateFieldGet(this, _bufferGeometry), undefined, blendState);
@@ -211,0 +289,0 @@ });

dist/lib/math/Vector2.Functions.d.ts

@@ -5,3 +5,4 @@ import { Vector2 } from "./Vector2";
 export declare function makeVector2Fit(frame: Vector2, target: Vector2, result?: Vector2): Vector2;
+export declare function makeVector2FillHeight(frame: Vector2, target: Vector2, result?: Vector2): Vector2;
 export declare function makeVector2Fill(frame: Vector2, target: Vector2, result?: Vector2): Vector2;
 //# sourceMappingURL=Vector2.Functions.d.ts.map

dist/lib/math/Vector2.Functions.js

@@ -12,2 +12,8 @@ import { Vector2 } from "./Vector2";
 }
+export function makeVector2FillHeight(frame, target, result = new Vector2()) {
+    result.copy(target);
+    const fitScale = frame.height / result.height;
+    result.multiplyByScalar(fitScale);
+    return result;
+}
 export function makeVector2Fill(frame, target, result = new Vector2()) {
@@ -14,0 +20,0 @@ result.copy(target);

dist/lib/renderers/webgl/framebuffers/VirtualFramebuffer.js

@@ -28,3 +28,3 @@ import { Box2 } from "../../../math/Box2";
         }
-        this.context.render(node, camera);
+        throw new Error("Not implemented");
     }
@@ -83,4 +83,4 @@ flush() {
     context.viewport = new Box2(new Vector2(), framebuffer.size);
-    context.renderPass(program, uniforms);
+    throw new Error("Not implemented");
 }
 //# sourceMappingURL=VirtualFramebuffer.js.map

dist/lib/renderers/webgl/RenderingContext.d.ts

 import { Box2 } from "../../math/Box2";
-import { Camera } from "../../nodes/cameras/Camera";
-import { Node } from "../../nodes/Node";
 import { BlendState } from "./BlendState";
@@ -16,3 +14,2 @@ import { Buffer } from "./buffers/Buffer";
 import { Program } from "./programs/Program";
-import { UniformValueMap } from "./programs/ProgramUniform";
 import { Renderbuffer } from "./Renderbuffer";
@@ -58,5 +55,3 @@ import { Shader } from "./shaders/Shader";
     set cullingState(cs: CullingState);
-    renderPass(program: Program, uniforms: UniformValueMap): void;
-    render(node: Node, camera: Camera): void;
 }
 //# sourceMappingURL=RenderingContext.d.ts.map

dist/lib/renderers/webgl/RenderingContext.js

@@ -188,10 +188,4 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
     }
-    renderPass(program, uniforms) {
-        throw new Error("not implemented");
-    }
-    render(node, camera) {
-        throw new Error("not implemented");
-    }
 }
 _program = new WeakMap(), _framebuffer = new WeakMap(), _scissor = new WeakMap(), _viewport = new WeakMap(), _depthTestState = new WeakMap(), _blendState = new WeakMap(), _clearState = new WeakMap(), _maskState = new WeakMap(), _cullingState = new WeakMap();
 //# sourceMappingURL=RenderingContext.js.map

dist/lib/shaders/includes/math/sampling/random.glsl.js

@@ -5,3 +5,3 @@ export default /* glsl */ `
 
-Could not resolve "#pragma include "math"" - current directory /home/bhouston/Work/threeify/src/lib/shaders/includes/math/sampling, attempts: /home/bhouston/Work/threeify/src/lib/shaders/includes/math/sampling/math.glsl,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/sampling/math.frag,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/sampling/math.vert,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/sampling/math,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/sampling/math.glsl.ts,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/sampling/math.glsl.jss,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/sampling/math.frag.ts,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/sampling/math.frag.jss,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/sampling/math.vert.ts,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/sampling/math.vert.jss,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/sampling/math.ts,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/sampling/math.jss
+Could not resolve "#pragma include "math"" - current directory /home/dan/work/threeify/src/lib/shaders/includes/math/sampling, attempts: /home/dan/work/threeify/src/lib/shaders/includes/math/sampling/math.glsl,/home/dan/work/threeify/src/lib/shaders/includes/math/sampling/math.frag,/home/dan/work/threeify/src/lib/shaders/includes/math/sampling/math.vert,/home/dan/work/threeify/src/lib/shaders/includes/math/sampling/math,/home/dan/work/threeify/src/lib/shaders/includes/math/sampling/math.glsl.ts,/home/dan/work/threeify/src/lib/shaders/includes/math/sampling/math.glsl.jss,/home/dan/work/threeify/src/lib/shaders/includes/math/sampling/math.frag.ts,/home/dan/work/threeify/src/lib/shaders/includes/math/sampling/math.frag.jss,/home/dan/work/threeify/src/lib/shaders/includes/math/sampling/math.vert.ts,/home/dan/work/threeify/src/lib/shaders/includes/math/sampling/math.vert.jss,/home/dan/work/threeify/src/lib/shaders/includes/math/sampling/math.ts,/home/dan/work/threeify/src/lib/shaders/includes/math/sampling/math.jss
 
@@ -8,0 +8,0 @@ // expects values in the range of [0,1]x[0,1], returns values in the [0,1] range.

dist/lib/shaders/includes/operations/dithering.glsl.js

@@ -5,3 +5,3 @@ export default /* glsl */ `
 
-Could not resolve "#pragma include <math/random>" - current directory /home/bhouston/Work/threeify/src/lib/shaders/includes/operations, attempts: /home/bhouston/Work/threeify/src/lib/shaders/includes/math/random.glsl,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/random.frag,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/random.vert,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/random,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/random.glsl.ts,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/random.glsl.jss,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/random.frag.ts,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/random.frag.jss,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/random.vert.ts,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/random.vert.jss,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/random.ts,/home/bhouston/Work/threeify/src/lib/shaders/includes/math/random.jss
+Could not resolve "#pragma include <math/random>" - current directory /home/dan/work/threeify/src/lib/shaders/includes/operations, attempts: /home/dan/work/threeify/src/lib/shaders/includes/math/random.glsl,/home/dan/work/threeify/src/lib/shaders/includes/math/random.frag,/home/dan/work/threeify/src/lib/shaders/includes/math/random.vert,/home/dan/work/threeify/src/lib/shaders/includes/math/random,/home/dan/work/threeify/src/lib/shaders/includes/math/random.glsl.ts,/home/dan/work/threeify/src/lib/shaders/includes/math/random.glsl.jss,/home/dan/work/threeify/src/lib/shaders/includes/math/random.frag.ts,/home/dan/work/threeify/src/lib/shaders/includes/math/random.frag.jss,/home/dan/work/threeify/src/lib/shaders/includes/math/random.vert.ts,/home/dan/work/threeify/src/lib/shaders/includes/math/random.vert.jss,/home/dan/work/threeify/src/lib/shaders/includes/math/random.ts,/home/dan/work/threeify/src/lib/shaders/includes/math/random.jss
 
@@ -8,0 +8,0 @@ // based on https://www.shadertoy.com/view/MslGR8

package.json

 {
   "name": "threeify",
-  "version": "1.76.0",
+  "version": "1.87.0",
   "description": "Typescript 3D Library loosely based on three.js",
@@ -5,0 +5,0 @@ "keywords": [

src/lib/engines/layerCompositor/Layer.ts

@@ -22,3 +22,2 @@ import { Matrix3 } from "../../math/Matrix3";
     public uvOffset = new Vector2(0, 1),
-    public premultipliedAlpha = true,
   ) {
@@ -25,0 +24,0 @@ // console.log(`Layer: size ( ${texImage2D.size.x}, ${texImage2D.size.y} ) `);

src/lib/engines/layerCompositor/LayerCompositor.ts

@@ -0,1 +1,2 @@
+import { IDisposable } from "../../core/types";
 import { transformGeometry } from "../../geometry/Geometry.Functions";
@@ -16,4 +17,5 @@ import { planeGeometry } from "../../geometry/primitives/planeGeometry";
 import { Vector2 } from "../../math/Vector2";
-import { makeVector2Fit } from "../../math/Vector2.Functions";
+import { makeVector2FillHeight } from "../../math/Vector2.Functions";
 import { Vector3 } from "../../math/Vector3";
+import { isFirefox, isiOS, isMacOS } from "../../platform/Detection";
 import { blendModeToBlendState } from "../../renderers/webgl/BlendState";
@@ -35,3 +37,3 @@ import { BufferGeometry, makeBufferGeometryFromGeometry } from "../../renderers/webgl/buffers/BufferGeometry";
 import { TextureWrap } from "../../renderers/webgl/textures/TextureWrap";
-import { fetchImage } from "../../textures/loaders/Image";
+import { fetchImage, isImageBitmapSupported } from "../../textures/loaders/Image";
 import { Texture } from "../../textures/Texture";
@@ -42,4 +44,34 @@ import fragmentSource from "./fragment.glsl";
 
-export type TexImage2DMap = { [key: string]: TexImage2D | undefined };
+function releaseImage(image: ImageBitmap | HTMLImageElement | undefined): void {
+  if (isImageBitmapSupported() && image instanceof ImageBitmap) {
+    image.close();
+  }
+  // if HTMLImageElement do nothing, just ensure there are no references to it.
+}
+export class LayerImage implements IDisposable {
+  disposed = false;
+  renderId = -1;
 
+  constructor(
+    readonly url: string,
+    public texImage2D: TexImage2D,
+    public image: ImageBitmap | HTMLImageElement | undefined,
+  ) {
+    // console.log(`layerImage.load: ${this.url}`);
+  }
+
+  dispose(): void {
+    if (!this.disposed) {
+      this.texImage2D.dispose();
+      releaseImage(this.image);
+      this.image = undefined;
+      this.disposed = true;
+      // console.log(`layerImage.dispose: ${this.url}`);
+    }
+  }
+}
+
+export type LayerImageMap = { [key: string]: LayerImage | undefined };
+export type TexImage2DPromiseMap = { [key: string]: Promise<TexImage2D> | undefined };
+
 export function makeColorMipmapAttachment(
@@ -68,8 +100,15 @@ context: RenderingContext,
 
+export enum ImageFitMode {
+  FitWidth,
+  FitHeight,
+}
+
 export class LayerCompositor {
   context: RenderingContext;
-  texImage2DCache: TexImage2DMap = {};
+  layerImageCache: LayerImageMap = {};
+  texImage2DPromiseCache: TexImage2DPromiseMap = {};
   #bufferGeometry: BufferGeometry;
   #program: Program;
   imageSize = new Vector2(0, 0);
+  imageFitMode: ImageFitMode = ImageFitMode.FitHeight;
   zoomScale = 1.0; // no zoom
@@ -81,6 +120,8 @@ panPosition: Vector2 = new Vector2(0.5, 0.5); // center
   firstRender = true;
-  clearState = new ClearState(new Vector3(1, 1, 1), 1.0);
+  clearState = new ClearState(new Vector3(1, 1, 1), 0.0);
   offscreenFramebuffer: Framebuffer | undefined;
   offscreenSize = new Vector2(0, 0);
   offscreenColorAttachment: TexImage2D | undefined;
+  renderId = 0;
+  autoDiscard = false;
 
@@ -94,2 +135,3 @@ constructor(canvas: HTMLCanvasElement) {
       stencil: false,
+      preserveDrawingBuffer: true,
     });
@@ -104,2 +146,9 @@ this.context.canvasFramebuffer.devicePixelRatio = window.devicePixelRatio;
 
+  snapshot(mimeFormat = "image/jpeg", quality = 1.0): string {
+    const canvas = this.context.canvasFramebuffer.canvas;
+    if (canvas instanceof HTMLCanvasElement) {
+      return canvas.toDataURL(mimeFormat, quality);
+    }
+    throw new Error("snapshot not supported");
+  }
   set layers(layers: Layer[]) {
@@ -131,7 +180,13 @@ this.#layers = layers;
   loadTexImage2D(url: string, image: HTMLImageElement | ImageBitmap | undefined = undefined): Promise<TexImage2D> {
-    return new Promise<TexImage2D>((resolve) => {
+    const layerImagePromise = this.texImage2DPromiseCache[url];
+    if (layerImagePromise !== undefined) {
+      console.log(`loading: ${url} (reusing promise)`);
+      return layerImagePromise;
+    }
+
+    return (this.texImage2DPromiseCache[url] = new Promise<TexImage2D>((resolve) => {
       // check for texture in cache.
-      const cachedTexImage2D = this.texImage2DCache[url];
-      if (cachedTexImage2D !== undefined && !cachedTexImage2D.disposed) {
-        return resolve(cachedTexImage2D);
+      const layerImage = this.layerImageCache[url];
+      if (layerImage !== undefined) {
+        return resolve(layerImage.texImage2D);
       }
@@ -141,2 +196,3 @@
         // console.log(image, key);
+
         // create texture
@@ -151,9 +207,9 @@ const texture = new Texture(image);
 
-        // console.log(texture);
+        console.log(`loading: ${url}`);
         // load texture onto the GPU
         const texImage2D = makeTexImage2DFromTexture(compositor.context, texture);
-        compositor.texImage2DCache[url] = texImage2D;
-        // console.log(texImage2D);
-        return texImage2D;
+        delete compositor.texImage2DPromiseCache[url];
+        return (compositor.layerImageCache[url] = new LayerImage(url, texImage2D, image)).texImage2D;
       }
+
       if (image === undefined) {
@@ -166,5 +222,20 @@ fetchImage(url).then((image: HTMLImageElement | ImageBitmap) => {
       }
+    })).then((texImage2D) => {
+      delete this.texImage2DPromiseCache[url];
+      return texImage2D;
     });
   }
 
+  discardTexImage2D(url: string): boolean {
+    // check for texture in cache.
+    const layerImage = this.layerImageCache[url];
+    if (layerImage !== undefined) {
+      console.log(`discarding: ${url}`);
+      layerImage.dispose();
+      delete this.layerImageCache[url];
+      return true;
+    }
+    return false;
+  }
+
   // ask how much memory is used
@@ -174,2 +245,5 @@ // set max size
   render(): void {
+    this.renderId++;
+    // console.log(`render id: ${this.renderId}`);
+
     const canvasFramebuffer = this.context.canvasFramebuffer;
@@ -179,3 +253,8 @@ const canvasSize = canvasFramebuffer.size;
 
-    const canvasImageSize = makeVector2Fit(canvasSize, this.imageSize);
+    const imageToCanvasScale =
+      this.imageFitMode === ImageFitMode.FitWidth
+        ? canvasSize.width / this.imageSize.width
+        : canvasSize.height / this.imageSize.height;
+
+    const canvasImageSize = this.imageSize.clone().multiplyByScalar(imageToCanvasScale);
     const canvasImageCenter = canvasImageSize.clone().multiplyByScalar(0.5);
@@ -185,4 +264,7 @@
       // convert from canvas space to image space
-      const imagePanPosition = this.panPosition.clone().multiplyByScalar(this.imageSize.width / canvasImageSize.width);
-      const imageCanvasSize = canvasSize.clone().multiplyByScalar(this.imageSize.width / canvasImageSize.width);
+      const imagePanPosition = this.panPosition
+        .clone()
+        .multiplyByScalar(1 / imageToCanvasScale)
+        .multiplyByScalar(this.context.canvasFramebuffer.devicePixelRatio);
+      const imageCanvasSize = canvasSize.clone().multiplyByScalar(1 / imageToCanvasScale);
 
@@ -196,3 +278,3 @@ // center pan
       // convert back to
-      const canvasPanOffset = imagePanOffset.clone().multiplyByScalar(canvasImageSize.width / this.imageSize.width);
+      const canvasPanOffset = imagePanOffset.clone().multiplyByScalar(imageToCanvasScale);
 
@@ -248,4 +330,4 @@ // ensure zoom is at point of contact, not center of screen.
       uvToTexture: uvToTexture,
-      mipmapBias: 0.25,
-      premultipliedAlpha: 0,
+      mipmapBias: 0.0,
+      convertToPremultipliedAlpha: 0,
     };
@@ -257,2 +339,11 @@
     renderBufferGeometry(canvasFramebuffer, this.#program, uniforms, this.#bufferGeometry, undefined, blendState);
+
+    if (this.autoDiscard) {
+      for (const url in this.layerImageCache) {
+        const layerImage = this.layerImageCache[url];
+        if (layerImage !== undefined && layerImage.renderId < this.renderId) {
+          this.discardTexImage2D(url);
+        }
+      }
+    }
   }
@@ -283,3 +374,13 @@
 
+    // Ben on 2020-10-31
+    // - does not understand why this is necessary.
+    // - this means it may be working around a bug, and thus this will break in the future.
+    // - the bug would be in chrome as it seems to be the inverse of the current query
+    const convertToPremultipliedAlpha = !(isMacOS() || isiOS() || isFirefox()) ? 0 : 1;
+
     this.#layers.forEach((layer) => {
+      const layerImage = this.layerImageCache[layer.url];
+      if (layerImage !== undefined) {
+        layerImage.renderId = this.renderId;
+      }
       const uniforms = {
@@ -293,6 +394,6 @@ viewToScreen: imageToOffscreen,
         mipmapBias: 0,
-        premultipliedAlpha: layer.premultipliedAlpha ? 1 : 0,
+        convertToPremultipliedAlpha,
       };
 
-      const blendState = blendModeToBlendState(Blending.Over, layer.premultipliedAlpha);
+      const blendState = blendModeToBlendState(Blending.Over, true);
 
@@ -299,0 +400,0 @@ // console.log(`drawing layer #${index}: ${layer.url} at ${layer.offset.x}, ${layer.offset.y}`);

src/lib/math/Vector2.Functions.ts

@@ -22,2 +22,9 @@ import { Vector2 } from "./Vector2";
 
+export function makeVector2FillHeight(frame: Vector2, target: Vector2, result = new Vector2()): Vector2 {
+  result.copy(target);
+  const fitScale = frame.height / result.height;
+  result.multiplyByScalar(fitScale);
+  return result;
+}
+
 export function makeVector2Fill(frame: Vector2, target: Vector2, result = new Vector2()): Vector2 {
@@ -24,0 +31,0 @@ result.copy(target);

src/lib/renderers/webgl/BlendState.ts

@@ -93,3 +93,3 @@ //
 export class BlendState implements ICloneable<BlendState>, IEquatable<BlendState> {
-  // TODO: Should be intialized to default WebGL states
+  // TODO: Should be initialized to default WebGL states
   constructor(
@@ -96,0 +96,0 @@ public sourceRGBFactor = BlendFunc.One,

src/lib/renderers/webgl/framebuffers/VirtualFramebuffer.ts

@@ -57,3 +57,4 @@ //
     }
-    this.context.render(node, camera);
+    throw new Error("Not implemented");
+    //    this.context.render(node, camera);
   }
@@ -149,3 +150,4 @@
 
-  context.renderPass(program, uniforms); // just executes a pre-determined node and camera setup.
+  throw new Error("Not implemented");
+  // context.renderPass(program, uniforms); // just executes a pre-determined node and camera setup.
 }

src/lib/renderers/webgl/RenderingContext.ts

@@ -9,4 +9,2 @@ //
 import { Box2 } from "../../math/Box2";
-import { Camera } from "../../nodes/cameras/Camera";
-import { Node } from "../../nodes/Node";
 import { BlendState } from "./BlendState";
@@ -26,3 +24,2 @@ import { Buffer } from "./buffers/Buffer";
 import { Program } from "./programs/Program";
-import { UniformValueMap } from "./programs/ProgramUniform";
 import { Renderbuffer } from "./Renderbuffer";
@@ -165,2 +162,7 @@ import { Shader } from "./shaders/Shader";
       this.gl.blendFuncSeparate(bs.sourceRGBFactor, bs.destRGBFactor, bs.sourceAlphaFactor, bs.destAlphaFactor);
+      /* console.log(
+        `Blend ${BlendEquation[bs.equation]} srcRGB ${BlendFunc[bs.sourceRGBFactor]} destRGB ${
+          BlendFunc[bs.destRGBFactor]
+        } srcA ${BlendFunc[bs.sourceAlphaFactor]} destA ${BlendFunc[bs.destAlphaFactor]}`,
+      );*/
       this.#blendState.copy(bs);
@@ -224,11 +226,2 @@ }
   }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  renderPass(program: Program, uniforms: UniformValueMap): void {
-    throw new Error("not implemented");
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render(node: Node, camera: Camera): void {
-    throw new Error("not implemented");
-  }
 }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6432001

increased by20.95%

Number of package files

1433

increased by3.77%

Worsened metrics

Lines of code

22815

decreased by-0.72%

Number of medium supply chain risk alerts

4

increased by33.33%

No dependency changes