Zappar for ThreeJS v2.4.0

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [3.0.0] - 2023-06-12
+
+### Changed
+
+- `TargetImagePreviewMesh` returns `sRGB` material by default.
+- Fixed an issue with washed out camera feed r152+
+
 ## [2.1.1] - 2023-03-27
 
 ### Fixed

README.md

@@ -68,7 +68,7 @@ You may also be interested in:
          * [Instant World Tracking](#instant-world-tracking)
       * [Links and Resources](#links-and-resources)
 
-<!-- Added by: zapparadmin, at: Fri May 19 15:03:43 BST 2023 -->
+<!-- Added by: zapparadmin, at: Tue Jun 13 14:29:23 BST 2023 -->
 
 <!--te-->
 </details>
@@ -99,7 +99,7 @@ You can use this library by downloading a standalone zip containing the necessar
 ### Standalone Download
 
 Download the bundle from:
-<https://libs.zappar.com/zappar-threejs/2.3.0/zappar-threejs.zip>
+<https://libs.zappar.com/zappar-threejs/2.4.0/zappar-threejs.zip>
 
 Unzip into your web project and reference from your HTML like this:
 
@@ -112,7 +112,7 @@ Unzip into your web project and reference from your HTML like this:
 Reference the zappar.js library from your HTML like this:
 
 ```html
-<script src="https://libs.zappar.com/zappar-threejs/2.3.0/zappar-threejs.js"></script>
+<script src="https://libs.zappar.com/zappar-threejs/2.4.0/zappar-threejs.js"></script>
 ```
 
 ### NPM Webpack Package

latest.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.3.0",
-  "cdn": "https://libs.zappar.com/zappar-threejs/2.3.0/zappar-threejs.js",
-  "zip": "https://libs.zappar.com/zappar-threejs/2.3.0/zappar-threejs.zip"
+  "version": "2.4.0",
+  "cdn": "https://libs.zappar.com/zappar-threejs/2.4.0/zappar-threejs.js",
+  "zip": "https://libs.zappar.com/zappar-threejs/2.4.0/zappar-threejs.zip"
 }

package.json

@@ -40,7 +40,7 @@
     "@types/jest-environment-puppeteer": "5.0.0",
     "@types/jest-image-snapshot": "4.3.1",
     "@types/node": "17.0.16",
-    "@types/three": "0.151.0",
+    "@types/three": "^0.152.1",
     "@typescript-eslint/eslint-plugin": "5.11.0",
     "@typescript-eslint/parser": "5.11.0",
     "@zappar/jest-console-logs": "1.0.4",
@@ -62,7 +62,7 @@
     "node-fetch": "2.6.1",
     "prettier": "2.5.1",
     "puppeteer": "13.2.0",
-    "three": "0.150.1",
+    "three": "^0.153.0",
     "ts-jest": "27.1.3",
     "ts-loader": "9.2.6",
     "ts-node": "10.5.0",
@@ -75,7 +75,7 @@
     "worker-loader": "3.0.8"
   },
   "peerDependencies": {
-    "three": "0.118.0 - 0.150.1"
+    "three": "0.118.0 - 0.153.0"
   },
   "dependencies": {
     "@zappar/zappar": "2.2.0"

src/camera.ts

@@ -1,9 +1,10 @@
+/* eslint-disable no-underscore-dangle */
 import * as Zappar from "@zappar/zappar";
 import { InstantWorldAnchor } from "@zappar/zappar/lib/instantworldtracker";
+
 import { THREE } from "./three";
 import { getDefaultPipeline, CameraSource } from "./defaultpipeline";
-import { CameraTexture } from "./cameraTexture";
-
+import { CameraTexture, InlineDecoder } from "./cameraTexture";
 /**
  * The pose modes that determine how the camera moves around in the scene.
  */
@@ -191,11 +192,14 @@ export class Camera extends THREE.Camera {
     this.pipeline = opts instanceof Zappar.Pipeline ? opts : opts?.pipeline || getDefaultPipeline();
     this.rawPose = this.pipeline.cameraPoseDefault();
 
+    // SRGBColorSpace was introduced in r152
+
     if (opts && !(opts instanceof Zappar.Pipeline)) {
       this.zNear = opts.zNear ? opts.zNear : 0.1;
       this.zFar = opts.zFar ? opts.zFar : 100;
       this.rearCameraSource = this.cameraSourceFromOpts(opts.rearCameraSource);
       this.userCameraSource = this.cameraSourceFromOpts(opts.userCameraSource, true);
+
       this.backgroundTexture = opts.backgroundTexture ? opts.backgroundTexture : new CameraTexture();
     } else {
       this.rearCameraSource = new CameraSource(Zappar.cameraDefaultDeviceID(), this.pipeline);
@@ -283,6 +287,33 @@ export class Camera extends THREE.Camera {
     return this._currentMirrorMode;
   }
 
+  private inlineDecoder?: InlineDecoder;
+
+  public handleColorSpace(renderer: THREE.WebGLRenderer) {
+    // Casting renderer and THREE to any to bypass type checking
+    const rendererAny = renderer as any;
+    const THREEAny = THREE as any;
+
+    // Check if decoder is required based on outputColorSpace
+    let decoderRequired = false;
+    if (rendererAny?.outputColorSpace && THREEAny?.SRGBColorSpace) {
+      decoderRequired = rendererAny?.outputColorSpace === THREEAny?.SRGBColorSpace;
+    }
+
+    if (!decoderRequired) {
+      // If THREE's revision is less than 152, assign the outputEncoding to backgroundTexture's encoding
+      if (parseInt(THREE.REVISION, 10) < 152) {
+        (this as any).backgroundTexture.encoding = rendererAny.outputEncoding;
+      } else {
+        // If THREE's revision is greater than or equal to 152, assign the outputColorSpace to backgroundTexture's colorSpace
+        (this.backgroundTexture as any).colorSpace = rendererAny.outputColorSpace;
+      }
+    } else if (!this.inlineDecoder) {
+      // If decoder is required and inlineDecoder does not exist, create a new InlineDecoder with backgroundTexture
+      this.inlineDecoder = new InlineDecoder(this.backgroundTexture);
+    }
+  }
+
   /**
    * Processes camera frames and updates `backgroundTexture`.
    * Call this function on your pipeline once an animation frame (e.g. during your `requestAnimationFrame` function).
@@ -331,6 +362,7 @@ export class Camera extends THREE.Camera {
     this.matrixWorldNeedsUpdate = true;
     this.backgroundTexture.MirrorMode = this.currentMirrorMode;
     this.backgroundTexture.updateFromPipeline(renderer, this.pipeline);
+    this.handleColorSpace(renderer);
   }
 
   // eslint-disable-next-line no-underscore-dangle