@zappar/zappar-babylonjs - npm Package Compare versions

Comparing version 0.3.26 to 0.3.27

CHANGELOG.md

 # Changelog
 
+## [0.3.28] - 2021-07-05
+
+### Added
+
+- Realtime Camera-based environment map. This is exported as `CameraEnvironmentMap`.
+- `Realtime Camera-based Reflections` section to `README.md`
+- `CameraEnvironmentMap` tests.
+
 ## [0.3.26] - 2021-06-21
@@ -4,0 +12,0 @@

lib/src/camera.js

@@ -98,3 +98,3 @@ "use strict";
         this.backgroundTexture = new BABYLON.Texture("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", scene);
-        this.backgroundTexture.level = 0;
+        // this.backgroundTexture.level = 0;
         this.layer = new BABYLON.Layer("zapparCameraBackgroundLayer", null, scene);
@@ -101,0 +101,0 @@ this.layer.texture = this.backgroundTexture;

lib/src/index.d.ts

@@ -12,3 +12,4 @@ export { default as skipVersionLog } from "./version";
 export { default as ImageTrackerLoader } from "./loaders/imageTracker";
+export { default as CameraEnvironmentMap } from "./cameraEnvironmentTexture";
 export { ImageAnchor, BarcodeFinderFound, BarcodeFormat, FaceAnchor, FaceMesh, FaceLandmark, FaceLandmarkName, Pipeline, permissionDenied, permissionGranted, permissionRequest, permissionDeniedUI, permissionRequestUI, browserIncompatible, browserIncompatibleUI, setLogLevel, LogLevel, } from "@zappar/zappar";
 export { ImageTracker, InstantWorldTracker, BarcodeFinder, FaceTracker, CameraSource, HTMLElementSource, onFrameUpdate, glContextSet, } from "./defaultpipeline";

lib/src/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.glContextSet = exports.onFrameUpdate = exports.HTMLElementSource = exports.CameraSource = exports.FaceTracker = exports.BarcodeFinder = exports.InstantWorldTracker = exports.ImageTracker = exports.LogLevel = exports.setLogLevel = exports.browserIncompatibleUI = exports.browserIncompatible = exports.permissionRequestUI = exports.permissionDeniedUI = exports.permissionRequest = exports.permissionGranted = exports.permissionDenied = exports.Pipeline = exports.FaceLandmarkName = exports.FaceLandmark = exports.FaceMesh = exports.ImageTrackerLoader = exports.HeadMaskMeshLoader = exports.FaceMeshLoader = exports.FaceMeshGeometry = exports.ImageAnchorTransformNode = exports.InstantWorldAnchorTransformNode = exports.FaceAnchorTransformNode = exports.FaceTrackerTransformNode = exports.FaceTrackerLoader = exports.CameraMirrorMode = exports.CameraPoseMode = exports.Camera = exports.skipVersionLog = void 0;
+exports.glContextSet = exports.onFrameUpdate = exports.HTMLElementSource = exports.CameraSource = exports.FaceTracker = exports.BarcodeFinder = exports.InstantWorldTracker = exports.ImageTracker = exports.LogLevel = exports.setLogLevel = exports.browserIncompatibleUI = exports.browserIncompatible = exports.permissionRequestUI = exports.permissionDeniedUI = exports.permissionRequest = exports.permissionGranted = exports.permissionDenied = exports.Pipeline = exports.FaceLandmarkName = exports.FaceLandmark = exports.FaceMesh = exports.CameraEnvironmentMap = exports.ImageTrackerLoader = exports.HeadMaskMeshLoader = exports.FaceMeshLoader = exports.FaceMeshGeometry = exports.ImageAnchorTransformNode = exports.InstantWorldAnchorTransformNode = exports.FaceAnchorTransformNode = exports.FaceTrackerTransformNode = exports.FaceTrackerLoader = exports.CameraMirrorMode = exports.CameraPoseMode = exports.Camera = exports.skipVersionLog = void 0;
 /* eslint-disable import/prefer-default-export */
@@ -31,2 +31,4 @@ /* eslint-disable import/no-unresolved */
 Object.defineProperty(exports, "ImageTrackerLoader", { enumerable: true, get: function () { return imageTracker_1.default; } });
+var cameraEnvironmentTexture_1 = require("./cameraEnvironmentTexture");
+Object.defineProperty(exports, "CameraEnvironmentMap", { enumerable: true, get: function () { return cameraEnvironmentTexture_1.default; } });
 var zappar_1 = require("@zappar/zappar");
@@ -33,0 +35,0 @@ Object.defineProperty(exports, "FaceMesh", { enumerable: true, get: function () { return zappar_1.FaceMesh; } });

lib/src/version.d.ts

 /**
  * SDK version.
  */
-declare const VERSION = "0.3.26";
+declare const VERSION = "0.3.27";
 export default VERSION;

lib/src/version.js

@@ -6,4 +6,4 @@ "use strict";
  */
-const VERSION = "0.3.26";
+const VERSION = "0.3.27";
 console.log(`Zappar for BabylonJS v${VERSION}`);
 exports.default = VERSION;

package.json

 {
   "name": "@zappar/zappar-babylonjs",
-  "version": "0.3.26",
+  "version": "0.3.27",
   "description": "BabylonJS wrappers for Zappar's computer vision library",
@@ -5,0 +5,0 @@ "main": "lib/src/index.js",

README.md

@@ -1,4 +0,4 @@
-# Zappar for BabylonJS
+# Zappar for Babylon.js
 
-This library allows you use Zappar's best-in-class AR technology with content built using the 3D rendering platform BabylonJS.
+This library allows you use Zappar's best-in-class AR technology with content built using the 3D rendering platform Babylon.js.
 
@@ -24,3 +24,3 @@ It provides high performance (30 frames-per-second) face, image and world tracking, in the browsers already installed on your users' mobile phones.
 <!--ts-->
-   * [Zappar for BabylonJS](#zappar-for-babylonjs)
+   * [Zappar for Babylon.js](#zappar-for-babylonjs)
       * [Table Of Contents](#table-of-contents)
@@ -46,2 +46,3 @@ * [Getting Started](#getting-started)
          * [Processing Camera Frames](#processing-camera-frames)
+         * [Realtime Camera-based Reflections](#realtime-camera-based-reflections)
          * [Permissions](#permissions)
@@ -65,3 +66,3 @@ * [Starting the Camera](#starting-the-camera)
 
-<!-- Added by: zapparadmin, at: Mon Jun 21 15:17:28 BST 2021 -->
+<!-- Added by: zapparadmin, at: Tue Jul 13 15:40:23 BST 2021 -->
 
@@ -106,3 +107,3 @@ <!--te-->
 ```html
-<script src="https://libs.zappar.com/zappar-babylon/0.3.26/zappar-babylon.js"></script>
+<script src="https://libs.zappar.com/zappar-babylon/0.3.27/zappar-babylon.js"></script>
 ```
@@ -145,3 +146,3 @@
 
-You can integrate the Zappar library with the existing `runRenderLoop` loop of your BabylonJS project. A typical project may look like this. The remainder of this document goes into more detail about each of the component elements of this example.
+You can integrate the Zappar library with the existing `runRenderLoop` loop of your Babylon.js project. A typical project may look like this. The remainder of this document goes into more detail about each of the component elements of this example.
 
@@ -154,3 +155,3 @@ ```ts
 
-// Setup BabylonJS in the usual way.
+// Setup Babylon.js in the usual way.
 const canvasHolder = document.querySelector('#canvas-holder') || document.createElement('div');
@@ -317,2 +318,29 @@ const canvas = document.createElement('canvas');
 
+### Realtime Camera-based Reflections
+
+The SDK provides an automatically generated environment map that's useful if you're using materials that support reflections (e.g. `PBRMetallicRoughnessMaterial`, `StandardMaterial`). The map uses the camera feed to create an approximate environment that can add some realism to your scene.
+
+To use the map, first construct an instance:
+```ts
+const env = new ZapparBabylon.CameraEnvironmentMap(camera, engine);
+```
+
+Attach the map to your scene to affect all relevant materials:
+```ts
+scene.environmentTexture = envMap.environmentMap;
+```
+
+Or attach it to specific materials, if you prefer:
+```ts
+material.environmentTexture = envMap.environmentMap;
+```
+
+Finally, call `update()` on the map each frame, between updating the camera and rendering the scene:
+```ts
+engine.runRenderLoop(() => {
+  env.update();
+  scene.render();
+});
+```
+
 ### Permissions
@@ -381,3 +409,3 @@
 
-The Zappar library provides multiple modes for the camera to move around in the BabylonJS scene. You can set this mode with the `poseMode` parameter of your camera object. There are the following options:
+The Zappar library provides multiple modes for the camera to move around in the Babylon.js scene. You can set this mode with the `poseMode` parameter of your camera object. There are the following options:
 
@@ -444,3 +472,3 @@ - `ZapparBabylon.CameraPoseMode.Default`: in this mode the camera stays at the origin of the scene, pointing down the negative Z axis. Any tracked anchors will move around in your scene as the user moves the physical camera and real-world tracked objects.
 
-To attach 3D content (e.g. BabylonJS objects or models) to an `ImageTracker` or an `ImageAnchor`, the library provides `ImageAnchorTransformNode`. It's a BabylonJS TransformNode that will follow the supplied anchor (or, in the case of a supplied `ImageTracker`, the anchor most recently visible in that tracker) in the 3D view:
+To attach 3D content (e.g. Babylon.js objects or models) to an `ImageTracker` or an `ImageAnchor`, the library provides `ImageAnchorTransformNode`. It's a Babylon.js TransformNode that will follow the supplied anchor (or, in the case of a supplied `ImageTracker`, the anchor most recently visible in that tracker) in the 3D view:
 
@@ -525,3 +553,3 @@ ```ts
 
-To attach 3D content (e.g. BabylonJS objects or models) to a `FaceTracker` or a `FaceAnchor`, the library provides `FaceAnchorTransformNode`. It's a BabylonJS TransformNode that will follow the supplied anchor (or, in the case of a supplied `FaceTracker`, the anchor most recently visible in that tracker) in the 3D view:
+To attach 3D content (e.g. Babylon.js objects or models) to a `FaceTracker` or a `FaceAnchor`, the library provides `FaceAnchorTransformNode`. It's a Babylon.js TransformNode that will follow the supplied anchor (or, in the case of a supplied `FaceTracker`, the anchor most recently visible in that tracker) in the 3D view:
 
@@ -599,3 +627,3 @@ ```ts
 
-While the `faceMesh` object lets you access the raw vertex, UV, normal and indices data for the face mesh, you may wish to use the library's `FaceMeshGeometry` object which wraps the data as a BabylonJS Mesh. This Mesh object must still be childed to a `FaceAnchorTransformNode` to appear in the correct place on-screen:
+While the `faceMesh` object lets you access the raw vertex, UV, normal and indices data for the face mesh, you may wish to use the library's `FaceMeshGeometry` object which wraps the data as a Babylon.js Mesh. This Mesh object must still be childed to a `FaceAnchorTransformNode` to appear in the correct place on-screen:
 
@@ -681,3 +709,3 @@ ```ts
 
-To attach 3D content (e.g. BabylonJS objects or models) to an `InstantWorldTracker`, the library provides `InstantWorldAnchorTransformNode`. It's a BabylonJS TransformNode that will follow the anchor in the supplied `InstantWorldTracker` in the 3D view:
+To attach 3D content (e.g. Babylon.js objects or models) to an `InstantWorldTracker`, the library provides `InstantWorldAnchorTransformNode`. It's a Babylon.js TransformNode that will follow the anchor in the supplied `InstantWorldTracker` in the 3D view:
 
@@ -684,0 +712,0 @@ ```ts

No alert changes

Improved metrics

Total package byte prevSize

6392418

increased by0.11%

Number of package files

40

increased by5.26%

Lines of code

1679

increased by6.06%

Number of lines in readme file

740

increased by3.93%

No dependency changes