@zappar/zappar-babylonjs - npm Package Compare versions

Comparing version 0.0.15 to 0.0.20

lib/src/camera.d.ts

@@ -15,5 +15,17 @@ import * as Zappar from '@zappar/zappar';
 }
-declare class Camera extends BABYLON.TargetCamera {
-    private updateInternally;
+declare type HTMLSourceConstructor = {
     pipeline: Zappar.Pipeline;
+    rearCameraSource?: Zappar.HTMLElementSource;
+    userCameraSource?: Zappar.HTMLElementSource;
+};
+declare type VideoDeviceIDConstructor = {
+    pipeline?: Zappar.Pipeline;
+    rearCameraSource?: string;
+    userCameraSource?: string;
+};
+declare type Options = Partial<{
+    updateInternally: boolean;
+}> & (HTMLSourceConstructor | VideoDeviceIDConstructor);
+declare class Camera extends BABYLON.FreeCamera {
+    pipeline: Zappar.Pipeline;
     poseMode: CameraPoseMode;
@@ -25,4 +37,4 @@ poseAnchorOrigin: Zappar.ImageAnchor | Zappar.FaceAnchor | InstantWorldAnchor | undefined;
     rawPose: Float32Array;
-    rearCameraSource: CameraSource;
-    userCameraSource: CameraSource;
+    rearCameraSource: CameraSource | Zappar.HTMLElementSource;
+    userCameraSource: CameraSource | Zappar.HTMLElementSource;
     name: string;
@@ -36,4 +48,7 @@ private _engine;
     private _hasSetCSSScaleX;
-    private _zapparProjectionMatrix;
-    constructor(scene: BABYLON.Scene, updateInternally?: boolean);
+    backgroundTexture: BABYLON.Texture;
+    layer: BABYLON.Layer;
+    private updateInternally;
+    private ready;
+    constructor(scene: BABYLON.Scene, opts?: Zappar.Pipeline | Options);
     private _pause;
@@ -44,9 +59,8 @@ private _resume;
     get currentMirrorMode(): CameraMirrorMode;
-    private _updateBackgroundTexture;
+    private _updateLayerTexture;
     private _getOriginPose;
     dispose(): void;
     updateFrame(): void;
-    getWorldMatrix(): BABYLON.Matrix;
     getProjectionMatrix(): BABYLON.Matrix;
 }
 export default Camera;

lib/src/camera.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CameraMirrorMode = exports.CameraPoseMode = void 0;
+/* eslint-disable prefer-destructuring */
 /* eslint-disable no-underscore-dangle */
@@ -22,6 +23,5 @@ /* eslint-disable no-unused-expressions */
 })(CameraMirrorMode = exports.CameraMirrorMode || (exports.CameraMirrorMode = {}));
-class Camera extends BABYLON.TargetCamera {
-    constructor(scene, updateInternally = false) {
+class Camera extends BABYLON.FreeCamera {
+    constructor(scene, opts) {
         super('ZapparCamera', new BABYLON.Vector3(0, 0, 0), scene);
-        this.updateInternally = updateInternally;
         this.poseMode = CameraPoseMode.Default;
@@ -34,11 +34,29 @@ this.rearCameraMirrorMode = CameraMirrorMode.None;
         this._hasSetCSSScaleX = false;
-        this._zapparProjectionMatrix = new BABYLON.Matrix().copyFrom(this._projectionMatrix);
+        this.ready = false;
         this.__scene = scene;
         this._engine = scene.getEngine();
         this._gl = this._engine._gl;
-        this.pipeline = defaultpipeline_1.getDefaultPipeline();
+        // Shortest blank img uri
+        this.backgroundTexture = new BABYLON.Texture('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', scene);
+        this.backgroundTexture.level = 0;
+        this.layer = new BABYLON.Layer('zapparCameraBackgroundLayer', null, scene);
+        this.layer.texture = this.backgroundTexture;
+        this.layer.isBackground = true;
+        this.pipeline = opts instanceof Zappar.Pipeline ? opts : (opts === null || opts === void 0 ? void 0 : opts.pipeline) || defaultpipeline_1.getDefaultPipeline();
         this.pipeline.glContextSet(this._gl);
         this.rawPose = this.pipeline.cameraPoseDefault();
-        this.rearCameraSource = new defaultpipeline_1.CameraSource(Zappar.cameraDefaultDeviceID(), this.pipeline);
-        this.userCameraSource = new defaultpipeline_1.CameraSource(Zappar.cameraDefaultDeviceID(true), this.pipeline);
+        if (!(opts instanceof Zappar.Pipeline)) {
+            this.updateInternally = opts === null || opts === void 0 ? void 0 : opts.updateInternally;
+            // If supplied camera source is a string, construct source using provided video device ID.
+            // else if camera source is an object, use it.
+            // If neither of the above, default to constructing the sources ourselves.
+            /* eslint-disable max-len */
+            this.rearCameraSource = typeof (opts === null || opts === void 0 ? void 0 : opts.rearCameraSource) === 'string' ? new defaultpipeline_1.CameraSource(opts.rearCameraSource, this.pipeline) : (opts === null || opts === void 0 ? void 0 : opts.rearCameraSource) || new defaultpipeline_1.CameraSource(Zappar.cameraDefaultDeviceID(), this.pipeline);
+            this.userCameraSource = typeof (opts === null || opts === void 0 ? void 0 : opts.userCameraSource) === 'string' ? new defaultpipeline_1.CameraSource(opts.userCameraSource, this.pipeline) : (opts === null || opts === void 0 ? void 0 : opts.userCameraSource) || new defaultpipeline_1.CameraSource(Zappar.cameraDefaultDeviceID(true), this.pipeline);
+            /* eslint-enable max-len */
+        }
+        else { // No sources provided, construct defaults
+            this.rearCameraSource = new defaultpipeline_1.CameraSource(Zappar.cameraDefaultDeviceID(), this.pipeline);
+            this.userCameraSource = new defaultpipeline_1.CameraSource(Zappar.cameraDefaultDeviceID(true), this.pipeline);
+        }
         document.addEventListener('visibilitychange', () => {
@@ -49,4 +67,8 @@ document.visibilityState === 'visible' ? this._resume() : this._pause();
         this._emptyScene.detachControl();
-        const dummyCam = new BABYLON.Camera('cam', new BABYLON.Vector3(0, 5, -10), this._emptyScene);
+        // Need a dummy cam to render the empty scene at least once
+        const dummyCam = new BABYLON.Camera('cam', new BABYLON.Vector3(0, 0, 0), this._emptyScene);
         this._emptyTarget = new BABYLON.InternalTexture(this._engine, 2);
+        this.__scene.executeWhenReady(() => {
+            this.ready = true;
+        });
     }
@@ -73,3 +95,6 @@ _pause() {
     }
-    _updateBackgroundTexture() {
+    _updateLayerTexture() {
+        var _a;
+        if (!this.ready)
+            return;
         const target = this._engine._currentRenderTarget;
@@ -86,3 +111,9 @@ this._engine._currentRenderTarget = this._emptyTarget;
         this._engine.resetTextureCache();
-        this.pipeline.cameraFrameDrawGL(this._engine.getRenderWidth(), this._engine.getRenderHeight(), this._currentMirrorMode === CameraMirrorMode.Poses);
+        this.layer.texture._texture._webGLTexture = this.pipeline.cameraFrameTextureGL();
+        // eslint-disable-next-line max-len
+        const view = this.pipeline.cameraFrameTextureMatrix(this._engine.getRenderWidth(), this._engine.getRenderHeight(), this._currentMirrorMode === CameraMirrorMode.Poses);
+        const zapparViewMatrix = BABYLON.Matrix.FromArray(view);
+        zapparViewMatrix.m[8] = view[12];
+        zapparViewMatrix.m[9] = view[13];
+        (_a = this.layer.texture) === null || _a === void 0 ? void 0 : _a.getTextureMatrix().copyFrom(zapparViewMatrix);
     }
@@ -99,3 +130,3 @@ _getOriginPose() {
     updateFrame() {
-        this._updateBackgroundTexture();
+        this._updateLayerTexture();
         this._currentMirrorMode = this.pipeline.cameraFrameUserFacing() ? this.userCameraMirrorMode : this.rearCameraMirrorMode;
@@ -126,5 +157,2 @@ if (this._currentMirrorMode !== CameraMirrorMode.CSS && this._hasSetCSSScaleX) {
         }
-        this._zapparProjectionMatrix.copyFrom(projectionMatrix);
-    }
-    getWorldMatrix() {
         const sourceMatrix = BABYLON.Matrix.FromArray(this.rawPose);
@@ -134,5 +162,10 @@ const rotMatrix = sourceMatrix.getRotationMatrix();
         const pos = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0, 0, 0), sourceMatrix);
-        this.rotation = rotation.toEulerAngles();
-        this.position = pos;
-        return this._worldMatrix;
+        //! Convert to left hand
+        rotation.z *= -1;
+        rotation.w *= -1;
+        pos.z *= -1;
+        this.rotation.copyFrom(rotation.toEulerAngles());
+        this.position.copyFrom(pos);
+        projectionMatrix.setRow(2, new BABYLON.Vector4(0, 0, 1, 1));
+        this._projectionMatrix.copyFrom(projectionMatrix);
     }
@@ -143,5 +176,5 @@ getProjectionMatrix() {
         }
-        return this._zapparProjectionMatrix;
+        return this._projectionMatrix;
     }
 }
 exports.default = Camera;

lib/src/mesh/face.d.ts

@@ -6,6 +6,6 @@ import * as BABYLON from 'babylonjs';
 declare class FaceMesh extends BABYLON.Mesh {
-    _faceMesh: ZapparFaceMesh;
-    vertexData: BABYLON.VertexData;
+    private _faceMesh;
+    private vertexData;
     constructor(scene: BABYLON.Scene, faceMesh?: ZapparFaceMesh);
-    updateVertexData(): void;
+    update(): void;
     updateFromFaceTracker(faceTracker: FaceTracker): void;
@@ -12,0 +12,0 @@ updateFromFaceAnchor(anchor: FaceAnchor): void;

lib/src/mesh/face.js

@@ -14,2 +14,3 @@ "use strict";
         this._faceMesh = new zappar_1.FaceMesh();
+        this.rotation.z = Math.PI;
         if (!faceMesh) {
@@ -23,11 +24,23 @@ if (!faceMeshSingleton) {
     }
-    updateVertexData() {
+    update() {
         if (this._faceMesh.vertices.length === 0)
             return;
-        this.vertexData.positions = this._faceMesh.vertices;
-        this.vertexData.indices = this._faceMesh.indices;
-        this.vertexData.normals = this._faceMesh.normals;
-        this.vertexData.uvs = this._faceMesh.uvs;
-        BABYLON.VertexData.ComputeNormals(this._faceMesh.vertices, this._faceMesh.indices, this._faceMesh.normals);
-        this.vertexData.applyToMesh(this, true);
+        const { normals, uvs, indices, vertices, } = this._faceMesh;
+        for (let i = 0; i < vertices.length; i += 1) {
+            vertices[i] *= -1;
+        }
+        // TODO: More elegant solution of vertically inverting uvs
+        if (this.material) {
+            // eslint-disable-next-line no-restricted-syntax
+            for (const key in this.material) {
+                if (this.material[key] instanceof BABYLON.BaseTexture) {
+                    this.material[key].vScale = -1;
+                }
+            }
+        }
+        this.vertexData.positions = vertices;
+        this.vertexData.indices = indices;
+        this.vertexData.normals = normals;
+        this.vertexData.uvs = uvs;
+        this.vertexData.applyToMesh(this, this.isVertexBufferUpdatable(BABYLON.VertexBuffer.PositionKind));
     }
@@ -43,3 +56,3 @@ updateFromFaceTracker(faceTracker) {
         this._faceMesh.updateFromFaceAnchor(anchor);
-        this.updateVertexData();
+        this.update();
     }
@@ -46,0 +59,0 @@ updateFromFaceAnchorTransformNode(faceAnchorTransformNode) {

lib/src/mesh/headmask.d.ts

@@ -9,3 +9,3 @@ import * as BABYLON from 'babylonjs';
     private _faceBufferGeometry;
-    vertexData: BABYLON.VertexData;
+    private vertexData;
     constructor(scene: BABYLON.Scene, onLoad?: (() => void) | undefined, onError?: (() => void) | undefined);
@@ -12,0 +12,0 @@ updateFromFaceAnchorGroup(f: FaceAnchorGroup): void;

lib/src/mesh/headmask.js

@@ -19,3 +19,4 @@ "use strict";
         material.disableColorWrite = true;
-        material.zOffset = -0.9;
+        this.rotation.y = Math.PI;
+        material.zOffset = -0.8;
         this.renderingGroupId = 0;
@@ -28,11 +29,23 @@ material.backFaceCulling = false;
     updateFromFaceAnchorGroup(f) {
+        this._faceBufferGeometry.updateFromFaceAnchorTransformNode(f);
         if (this._faceMesh.vertices.length === 0)
             return;
-        this.vertexData.positions = this._faceMesh.vertices;
-        this.vertexData.indices = this._faceMesh.indices;
-        this.vertexData.normals = this._faceMesh.normals;
-        this.vertexData.uvs = this._faceMesh.uvs;
-        // BABYLON.VertexData.ComputeNormals(this._faceMesh.vertices, this._faceMesh.indices, this._faceMesh.normals);
-        this.vertexData.applyToMesh(this);
-        this._faceBufferGeometry.updateFromFaceAnchorTransformNode(f);
+        const { normals, uvs, indices, vertices, } = this._faceMesh;
+        for (let i = 0; i < vertices.length; i += 1) {
+            vertices[i] *= -1;
+        }
+        // TODO: More elegant solution of vertically inverting uvs
+        if (this.material) {
+            // eslint-disable-next-line no-restricted-syntax
+            for (const key in this.material) {
+                if (this.material[key] instanceof BABYLON.BaseTexture) {
+                    this.material[key].vScale = -1;
+                }
+            }
+        }
+        this.vertexData.positions = vertices;
+        this.vertexData.indices = indices;
+        this.vertexData.normals = normals;
+        this.vertexData.uvs = uvs;
+        this.vertexData.applyToMesh(this, this.isVertexBufferUpdatable(BABYLON.VertexBuffer.PositionKind));
     }
@@ -39,0 +52,0 @@ updateFromFaceAnchor(f) {

lib/src/nodes/faceAnchor.js

@@ -25,6 +25,8 @@ "use strict";
                 const sourceMatrix = BABYLON.Matrix.FromArray(sourcePose);
-                // Seems that world matrix is calculated FROM position/rotation/scale?
                 const rotMatrix = sourceMatrix.getRotationMatrix();
                 const rotation = new BABYLON.Quaternion().fromRotationMatrix(rotMatrix);
                 const pos = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0, 0, 0), sourceMatrix);
+                rotation.z *= -1;
+                rotation.w *= -1;
+                pos.z *= -1;
                 this.rotation = rotation.toEulerAngles();
@@ -31,0 +33,0 @@ this.setAbsolutePosition(pos);

lib/src/nodes/faceLandmark.js

@@ -30,2 +30,5 @@ "use strict";
                 const pos = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0, 0, 0), sourceMatrix);
+                rotation.z *= -1;
+                rotation.w *= -1;
+                pos.z *= -1;
                 this.rotation = rotation.toEulerAngles();
@@ -32,0 +35,0 @@ this.setAbsolutePosition(pos);

lib/src/nodes/imageAnchor.js

@@ -31,2 +31,5 @@ "use strict";
                 const pos = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0, 0, 0), sourceMatrix);
+                rotation.z *= -1;
+                rotation.w *= -1;
+                pos.z *= -1;
                 this.rotation = rotation.toEulerAngles();
@@ -33,0 +36,0 @@ this.setAbsolutePosition(pos);

lib/src/nodes/instantWorldAnchor.js

@@ -21,2 +21,5 @@ "use strict";
             const pos = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0, 0, 0), sourceMatrix);
+            rotation.z *= -1;
+            rotation.w *= -1;
+            pos.z *= -1;
             this.rotation = rotation.toEulerAngles();
@@ -23,0 +26,0 @@ this.setAbsolutePosition(pos);

lib/src/version.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const VERSION = '0.0.15';
+const VERSION = '0.0.20';
 let skipping = false;
@@ -5,0 +5,0 @@ const skipVersionLog = () => { skipping = true; };

package.json

 {
   "name": "@zappar/zappar-babylonjs",
-  "version": "0.0.15",
+  "version": "0.0.20",
   "description": "BabylonJS wrappers for Zappar's computer vision library",
@@ -30,18 +30,20 @@ "main": "lib/src/index.js",
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.14.0",
-    "@typescript-eslint/parser": "^4.14.0",
+    "@types/node": "^14.14.31",
+    "@typescript-eslint/eslint-plugin": "^4.15.2",
+    "@typescript-eslint/parser": "^4.15.2",
     "babylonjs": "^4.2.0",
     "babylonjs-loaders": "^4.2.0",
-    "eslint": "^7.18.0",
+    "eslint": "^7.20.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.22.1",
-    "html-webpack-plugin": "^4.5.1",
-    "ts-loader": "^8.0.13",
-    "typescript": "^4.1.3",
-    "webpack": "^5.17.0",
-    "webpack-cli": "^4.4.0",
+    "html-webpack-plugin": "^5.2.0",
+    "ts-loader": "^8.0.17",
+    "typescript": "^4.2.2",
+    "webpack": "^5.24.2",
+    "webpack-cli": "^4.5.0",
+    "babylonjs-gui": "^4.2.0",
     "webpack-dev-server": "^3.11.1"
   },
   "dependencies": {
-    "@zappar/zappar": "^0.3.5",
+    "@zappar/zappar": "^0.3.8",
     "gl-matrix": "^3.3.0"
@@ -48,0 +50,0 @@ },

README.md

@@ -7,2 +7,4 @@ # Zappar for BabylonJS
  - [Zappar for A-Frame](https://www.npmjs.com/package/@zappar/zappar-aframe) (@zappar/zappar-aframe)
+ - [Zappar for ThreeJS](https://www.npmjs.com/package/@zappar/zappar-threejs) (@zappar/zappar-threejs)
+ - [Zappar for React Three Fiber](https://www.npmjs.com/package/@zappar/zappar-react-three-fiber) (@zappar/zappar-react-three-fiber)
  - Zappar's library for Unity
@@ -51,3 +53,3 @@ - [Zappar for JavaScript](https://www.npmjs.com/package/@zappar/zappar) (@zappar/zappar), if you'd like to build content with a different 3D rendering platform
 
-<!-- Added by: runner, at: Tue Jan 26 13:04:37 UTC 2021 -->
+<!-- Added by: zapparadmin, at: Wed Mar  3 19:12:23 GMT 2021 -->
 
@@ -61,3 +63,3 @@ <!--te-->
 
-You can get started super-quickly using one of our bootstrap projects. They contain the basics of an AR experience for the different tracking types - no more, no less. 
+You can get started super-quickly using one of our bootstrap projects. They contain the basics of an AR experience for the different tracking types - no more, no less.
 
@@ -94,3 +96,3 @@
 ```html
-<script src="https://libs.zappar.com/zappar-babylon/0.0.15/zappar-babylon.js"></script>
+<script src="https://libs.zappar.com/zappar-babylon/0.0.20/zappar-babylon.js"></script>
 ```
@@ -188,3 +190,3 @@
 
-This library works well on the browsers that enjoy the vast majority of mobile market-share. That said, there are a number of web browsers available across the mobile and desktop device landscape. 
+This library works well on the browsers that enjoy the vast majority of mobile market-share. That said, there are a number of web browsers available across the mobile and desktop device landscape.
 
@@ -233,2 +235,13 @@ *Best support:*
 
+Custom video device IDs can be provided as options passed into `ZapparBabylon.Camera` constructor:
+```ts
+const camera = new ZapparBabylon.Camera(
+    scene,
+    {
+        rearCameraDeviceID:'csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=',
+        userCameraDeviceID: 'RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM='
+    }
+);
+```
+
 ### Processing Camera Frames
@@ -406,3 +419,3 @@
 The face tracking algorithm requires a model file of data in order to operate - you can call `loadDefaultModel()` to load the one that's included by default with the library. The function returns a promise that resolves when the model has been loaded successfully.
- 
+
 ```ts
@@ -409,0 +422,0 @@ const faceTracker = new ZapparBabylon.FaceTracker();

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6351381

increased by5421.21%

Number of lines in readme file

616

increased by2.16%

Worsened metrics

Dev dependency count

15

increased by15.38%

Number of package files

38

decreased by-22.45%

Number of low license alerts

1

increased byInfinity%

License quality

80

decreased by-20%

Lines of code

901

decreased by-15.56%

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

5

increased by400%

Number of medium supply chain risk alerts

13

increased byInfinity%

Dependency changes

• + Addedcaniuse-lite@1.0.30001695(transitive)

• - Removedcaniuse-lite@1.0.30001696(transitive)

• Updated@zappar/zappar@^0.3.8