zincjs 2.4.1-beta.4 → 2.4.1-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zincjs",
-  "version": "2.4.1-beta.4",
+  "version": "2.4.1-beta.5",
   "description": "ZincJS (Web-based-Zinc-Visualisation)",
   "type": "module",
   "main": "build/zinc.js",

package/src/controls.js

@@ -259,6 +259,7 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
   }
 
 	this.onResize = () => {
+		hasUpdated = true;
 		if (rect)
 			rect = undefined;
     if (ndcControl)
@@ -355,6 +356,7 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
   }
 
   const translateViewport = translation => {
+		hasUpdated = true;
     _tempEye.copy(this.cameraObject.position).add(translation);
     if (checkTravelDistance()) {
       this.cameraObject.target.add(translation);
@@ -486,14 +488,17 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
 	}
 
 	const onDocumentTouchEnd = event => {
-		const len = event.touches.length;
+		const previousState = this._state;
 		this.touchZoomDistanceStart = this.touchZoomDistanceEnd = 0;
 		this.targetTouchId = -1;
 		this._state = STATE.NONE;
-		if (len == 1) {
+		//A single finger tap, the lifted touch is in changedTouches
+		if (previousState === STATE.TOUCH_ROTATE && event.touches.length === 0 &&
+			event.changedTouches && event.changedTouches.length === 1 && rect) {
 			if (zincRayCaster !== undefined) {
-				if (this.pointer_x_start==(event.touches[0].clientX- rect.left) && this.pointer_y_start==(event.touches[0].clientY- rect.top)) {
-					zincRayCaster.pick(this.cameraObject, event.touches[0].clientX, event.touches[0].clientY, this.renderer);
+				const touch = event.changedTouches[0];
+				if (this.pointer_x_start==(touch.clientX- rect.left) && this.pointer_y_start==(touch.clientY- rect.top)) {
+					zincRayCaster.pick(this, touch.clientX, touch.clientY, this.renderer);
 				}
 			}
 		}
@@ -663,6 +668,7 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
    * @param {Number} Angle - Specify how much the camera shoudl rotate by.
    */
 	this.rotateAboutLookAtpoint = (axis, angle) => {
+		hasUpdated = true;
 	  const returned_values = this.getVectorsFromRotateAboutLookAtPoints(axis, angle);
 	  this.cameraObject.position.copy(returned_values.position);
 	  this.updateDirectionalLight();
@@ -743,7 +749,7 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
 		if (typeof this.cameraObject !== "undefined")
 		{
       const height = rect.height;
-			const a = this.cameraObject.position.clone();
+			const a = _v.copy(this.cameraObject.position);
 			a.sub(this.cameraObject.target);
 			const dist = a.length();
 			const dy = 1.5 * delta_y/height;
@@ -786,6 +792,7 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
    * Force an update to the position of the directional light.
    */
 	this.updateDirectionalLight = () => {
+		hasUpdated = true;
 		if (this.directionalLight != 0) {
 			this.directionalLight.position.set(this.cameraObject.position.x,
 					this.cameraObject.position.y,
@@ -820,6 +827,7 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
    */
 	this.disable = function () {
 		enabled = false;
+    this._state = STATE.NONE;
 		if (this.domElement && this.domElement.removeEventListener) {
 			this.domElement.removeEventListener( 'mousedown', onDocumentMouseDown, false );
 			this.domElement.removeEventListener( 'mousemove', onDocumentMouseMove, false );
@@ -984,6 +992,7 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
    * @param {Number} targetTimeFrame - bottom frame, top frame and the proportion.
    */
 	this.setCurrentTimeFrame = targetTimeFrame => {
+		hasUpdated = true;
 	   if (numberOfCameraPoint > 2) {
   		inbuildTime = duration * targetTimeFrame / (numberOfCameraPoint - 1);
   		if (inbuildTime < 0.0)
@@ -1006,19 +1015,19 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
 				const bottom_frame = time_frame[0];
 				const top_frame = time_frame[1];
 				const proportion = time_frame[2];
-				const bot_pos = [cameraPath[bottom_frame*3], cameraPath[bottom_frame*3+1], cameraPath[bottom_frame*3+2]];
-				const top_pos = [cameraPath[top_frame*3], cameraPath[top_frame*3+1], cameraPath[top_frame*3+2]];
-				const current_positions = [];
-				for (let i = 0; i < bot_pos.length; i++) {
-					current_positions.push(proportion * bot_pos[i] + (1.0 - proportion) * top_pos[i]);
-				}
-				this.cameraObject.position.set(current_positions[0], current_positions[1], current_positions[2]);
-				this.cameraObject.target.set(top_pos[0], top_pos[1], top_pos[2]);
+				const bottom = bottom_frame * 3;
+				const top = top_frame * 3;
+				const x = proportion * cameraPath[bottom] + (1.0 - proportion) * cameraPath[top];
+				const y = proportion * cameraPath[bottom + 1] + (1.0 - proportion) * cameraPath[top + 1];
+				const z = proportion * cameraPath[bottom + 2] + (1.0 - proportion) * cameraPath[top + 2];
+				this.cameraObject.position.set(x, y, z);
+				this.cameraObject.target.set(cameraPath[top], cameraPath[top + 1], cameraPath[top + 2]);
 				if (deviceOrientationControl)
 					this.cameraObject.lookAt( this.cameraObject.target );
 				if (updateLightWithPathFlag) {
-					this.directionalLight.position.set(current_positions[0], current_positions[1], current_positions[2]);
-					this.directionalLight.target.position.set(top_pos[0], top_pos[1], top_pos[2]);
+					this.directionalLight.position.set(x, y, z);
+					this.directionalLight.target.position.set(cameraPath[top], cameraPath[top + 1],
+						cameraPath[top + 2]);
 				}
 			}
 		}
@@ -1028,6 +1037,7 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
    * Force recalculation of the current path.
    */
 	this.calculatePathNow = () => {
+		hasUpdated = true;
 	  updatePath(0.0);
 	}
 
@@ -1065,14 +1075,14 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
 		} else if (currentMode === MODE.SMOOTH_CAMERA_TRANSITION && smoothCameraTransitionObject) {
 			smoothCameraTransitionObject.update(delta);
 			if (smoothCameraTransitionObject.isTransitionCompleted()) {
-				smoothCameraTransitionObject == undefined;
+				smoothCameraTransitionObject = undefined;
 				currentMode = MODE.DEFAULT;
 			}
 			controlEnabled = false;
-		} else if (currentMode === MODE.ROTATE_CAMERA_TRANSITION && rotateCameraTransitionObject) {
+		} else if (currentMode === MODE.ROTATE_TRANSITION && rotateCameraTransitionObject) {
 			rotateCameraTransitionObject.update(delta);
 			if (rotateCameraTransitionObject.isTransitionCompleted()) {
-				rotateCameraTransitionObject == undefined;
+				rotateCameraTransitionObject = undefined;
 				currentMode = MODE.DEFAULT;
 			}
 			controlEnabled = false;
@@ -1183,6 +1193,7 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
    * Reset the viewport settings to the one provided by default viewport.
    */
 	this.resetView = () => {
+		hasUpdated = true;
     const viewport = viewports[defaultViewport];
 		this.cameraObject.near = viewport.nearPlane;
 		this.cameraObject.far = viewport.farPlane;
@@ -1354,7 +1365,7 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
 	  if (smoothCameraTransitionObject)
 	    currentMode = MODE.SMOOTH_CAMERA_TRANSITION;
 	  if (rotateCameraTransitionObject)
-	    currentMode = MODE.ROTATE_CAMERA_TRANSITION;
+	    currentMode = MODE.ROTATE_TRANSITION;
 	}
 
   /**
@@ -1379,7 +1390,7 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
    */
 	this.isTransitioningCamera = () => {
 		return (currentMode === MODE.SMOOTH_CAMERA_TRANSITION ||
-		    currentMode === MODE.ROTATE_CAMERA_TRANSITION);
+		    currentMode === MODE.ROTATE_TRANSITION);
 	}
 
   /**
@@ -1488,10 +1499,8 @@ const CameraControls = function ( object, domElement, renderer, scene ) {
 const SmoothCameraTransition = function(startingViewport, endingViewport, targetCameraIn, durationIn) {
 	const startingEyePosition = startingViewport.eyePosition;
 	const startingTargetPosition = startingViewport.targetPosition;
-	const startingUp = startingViewport.upVector;
 	const endingEyePosition = endingViewport.eyePosition;
 	const endingTargetPosition = endingViewport.targetPosition;
-	const endingUp = endingViewport.upVector;
 	const targetCamera = targetCameraIn;
 	let duration = durationIn;
 	let inbuildTime = 0;
@@ -1516,17 +1525,15 @@ const SmoothCameraTransition = function(startingViewport, endingViewport, target
 
 	const updateCameraSettings = () => {
 		const ratio = inbuildTime / duration;
-		const eyePosition = [startingEyePosition[0] * (1.0 - ratio) + endingEyePosition[0] * ratio,
-		                   startingEyePosition[1] * (1.0 - ratio) + endingEyePosition[1] * ratio,
-		                   startingEyePosition[2] * (1.0 - ratio) + endingEyePosition[2] * ratio];
-		const targetPosition = [startingTargetPosition[0] * (1.0 - ratio) + endingTargetPosition[0] * ratio,
-		                      startingTargetPosition[1] * (1.0 - ratio) + endingTargetPosition[1] * ratio,
-		                      startingTargetPosition[2] * (1.0 - ratio) + endingTargetPosition[2] * ratio];
-    const upVector = [startingUp[0] * (1.0 - ratio) + endingUp[0] * ratio,
-      startingUp[1] * (1.0 - ratio) + endingUp[1] * ratio,
-      startingUp[2] * (1.0 - ratio) + endingUp[2] * ratio];
-		targetCamera.cameraObject.position.set( eyePosition[0], eyePosition[1], eyePosition[2]);
-		targetCamera.cameraObject.target.set( targetPosition[0], targetPosition[1], targetPosition[2]  );
+		const start = 1.0 - ratio;
+		targetCamera.cameraObject.position.set(
+			startingEyePosition[0] * start + endingEyePosition[0] * ratio,
+			startingEyePosition[1] * start + endingEyePosition[1] * ratio,
+			startingEyePosition[2] * start + endingEyePosition[2] * ratio);
+		targetCamera.cameraObject.target.set(
+			startingTargetPosition[0] * start + endingTargetPosition[0] * ratio,
+			startingTargetPosition[1] * start + endingTargetPosition[1] * ratio,
+			startingTargetPosition[2] * start + endingTargetPosition[2] * ratio);
 	};
 
 	this.update = delta => {
@@ -1609,6 +1616,7 @@ const RayCaster = function (sceneIn, hostSceneIn, callbackFunctionIn, hoverCallb
   let timeDiff = 0;
   let pickedObjects = new Array();
   let lastPosition = { zincCamera: undefined, x: -1 ,y: -1};
+  let hoverFrameRequested = false;
 	let pickableObjects = undefined;
 
 	this.enable = () => {
@@ -1621,8 +1629,8 @@ const RayCaster = function (sceneIn, hostSceneIn, callbackFunctionIn, hoverCallb
 
 	this.getIntersectsObject = (zincCamera) => {
     if (hostScene !== scene) {
-      const threejsScene = scene.getThreeJSScene();
-      renderer.render(threejsScene, zincCamera.cameraObject);
+      //Only the world matrices need to be up to date for raycasting
+      scene.getThreeJSScene().updateMatrixWorld();
     }
     let objects = pickableObjects ? pickableObjects : scene.getPickableThreeJSObjects();
     //Reset pickedObjects array
@@ -1669,6 +1677,8 @@ const RayCaster = function (sceneIn, hostSceneIn, callbackFunctionIn, hoverCallb
 				}
 			}
 			callbackFunction(pickedObjects, x, y);
+			//The callback may have changed what is displayed
+			hostScene?.invalidate?.();
 		}
   }
 
@@ -1685,24 +1695,36 @@ const RayCaster = function (sceneIn, hostSceneIn, callbackFunctionIn, hoverCallb
         lastHoveredEmpty = false;
       }
       hoverCallbackFunction(pickedObjects, x, y);
+      //The callback may have changed what is displayed
+      hostScene?.invalidate?.();
     }
   }
 
 	this.move = (zincCamera, x, y) => {
     if (enabled && renderer && scene && zincCamera && hoverCallbackFunction) {
+      lastPosition.zincCamera = zincCamera;
+      lastPosition.x = x;
+      lastPosition.y = y;
       if (scene.displayMarkers) {
-        hovered(zincCamera, x, y);
+        //Markers need responsive hovering, but there is no need to
+        //raycast more than once per frame.
+        if (typeof requestAnimationFrame !== 'function') {
+          hovered(zincCamera, x, y);
+        } else if (!hoverFrameRequested) {
+          hoverFrameRequested = true;
+          requestAnimationFrame(() => {
+            hoverFrameRequested = false;
+            hovered(lastPosition.zincCamera, lastPosition.x, lastPosition.y);
+          });
+        }
       } else {
-        lastPosition.zincCamera = zincCamera;
-        lastPosition.x = x;
-        lastPosition.y = y;
         if (!awaiting) {
           timeDiff = lastHoveredDate ? Date.now() - lastHoveredDate.getTime() : 250;
           if (timeDiff >= 250) {
             hovered(zincCamera, x, y);
           } else {
             awaiting = true;
-            setTimeout(awaitMove(lastPosition), timeDiff);
+            setTimeout(awaitMove(lastPosition), 250 - timeDiff);
           }
         }
       }
@@ -1825,7 +1847,7 @@ Object.assign( StereoCameraZoomFixed.prototype, {
 				const projectionMatrix = camera.projectionMatrix.clone();
 				const eyeSep = 0.064 / 2;
 				const eyeSepOnProjection = eyeSep * near / focus;
-				const ymax = near * Math.tan( THREE.Math.DEG2RAD * fov * 0.5 ) / camera.zoom;
+				const ymax = near * Math.tan( THREE.MathUtils.DEG2RAD * fov * 0.5 ) / camera.zoom;
 				let xmin, xmax;
 
 				// translate xOffset
@@ -1953,16 +1975,16 @@ const ModifiedDeviceOrientationControls = function ( object ) {
 
 		const q1 = new THREE.Quaternion( - Math.sqrt( 0.5 ), 0, 0, Math.sqrt( 0.5 ) ); // - PI/2 around the x-axis
 
-		return (cameraObject, alpha, beta, gamma, orient) => {
+		const vector = new THREE.Vector3();
+
+		const quaternion = new THREE.Quaternion();
 
-			const vector = new THREE.Vector3(0, 0, 1);
+		return (cameraObject, alpha, beta, gamma, orient) => {
 
 			vector.subVectors(cameraObject.target, cameraObject.position);
 
 			euler.set( beta, alpha, - gamma, 'YXZ' );                       // 'ZXY' for the device, but 'YXZ' for us
 
-			const quaternion = new THREE.Quaternion();
-
 			quaternion.setFromEuler( euler );                               // orient the device
 
 			quaternion.multiply( q1 );                                      // camera looks out the back of the device, not the top
@@ -2003,10 +2025,10 @@ const ModifiedDeviceOrientationControls = function ( object ) {
 
 		if ( scope.enabled === false ) return;
 
-		const alpha  = scope.deviceOrientation.alpha ? THREE.Math.degToRad( scope.deviceOrientation.alpha ) : 0; // Z
-		const beta   = scope.deviceOrientation.beta  ? THREE.Math.degToRad( scope.deviceOrientation.beta  ) : 0; // X'
-		const gamma  = scope.deviceOrientation.gamma ? THREE.Math.degToRad( scope.deviceOrientation.gamma ) : 0; // Y''
-		const orient = scope.screenOrientation       ? THREE.Math.degToRad( scope.screenOrientation       ) : 0; // O
+		const alpha  = scope.deviceOrientation.alpha ? THREE.MathUtils.degToRad( scope.deviceOrientation.alpha ) : 0; // Z
+		const beta   = scope.deviceOrientation.beta  ? THREE.MathUtils.degToRad( scope.deviceOrientation.beta  ) : 0; // X'
+		const gamma  = scope.deviceOrientation.gamma ? THREE.MathUtils.degToRad( scope.deviceOrientation.gamma ) : 0; // Y''
+		const orient = scope.screenOrientation       ? THREE.MathUtils.degToRad( scope.screenOrientation       ) : 0; // O
 
 		setObjectQuaternion( scope.object, alpha, beta, gamma, orient );
 

package/src/loaders/primitivesLoader.js

@@ -6,8 +6,11 @@ const FileLoader = THREE.FileLoader;
 const mergeGlyphData = (glyphData) => {
   const merge = (glyphData1, glyphData2) => {
     glyphData1.metadata.number_of_vertices += glyphData2.metadata.number_of_vertices;
-    if ('labels' in glyphData1) {
-      glyphData1.labels.push(...glyphData1.labels);
+    if ('labels' in glyphData1 && glyphData2.labels) {
+      const labels = glyphData2.labels;
+      for (let i = 0; i < labels.length; i++) {
+        glyphData1.labels.push(labels[i]);
+      }
     }
     const fields = ['axis1', 'axis2', 'axis3', 'colors', 'positions', 'scale'];
     fields.forEach(field => {
@@ -42,12 +45,13 @@ const mergeGeometries = (geometries) => {
   return undefined;
 }
 
-const IndexedSourcesHandler = function(urlIn, crossOrigin, onDownloadedCallback) {
+const IndexedSourcesHandler = function(urlIn, crossOrigin, onDownloadedCallback, onErrorCallback) {
   const fileLoader = new FileLoader();
   const jsonLoader = new JSONLoader();
   fileLoader.crossOrigin = crossOrigin;
   const url = urlIn;
   const onDownloaded = onDownloadedCallback;
+  const onDownloadError = onErrorCallback;
   let data = undefined;
   let downloading = false;
   let finished = false;
@@ -100,6 +104,9 @@ const IndexedSourcesHandler = function(urlIn, crossOrigin, onDownloadedCallback)
       items.forEach((item) => {
         processItemError(item);
       });
+      if (onDownloadError) {
+        onDownloadError(xhr);
+      }
     }
   }
 
@@ -132,32 +139,62 @@ const IndexedSourcesHandler = function(urlIn, crossOrigin, onDownloadedCallback)
     } else {
       items.push(item);
       downloading = true;
-      fileLoader.load(url, onDownloaded, progressHandling, errorHandling);
+      fileLoader.load(url, onDownloaded, progressHandling(), errorHandling());
     }
   }
 }
 
-const MultiSourcesHandler = function(numberIn, onLoadCallback, options) {
+const MultiSourcesHandler = function(numberIn, onLoadCallback, onErrorCallback, options) {
   const allData = [];
   const number = numberIn;
   const onLoad = onLoadCallback;
+  const onError = onErrorCallback;
   let totalDownloaded = 0;
-  const isGlyphData = options.isGlyphsets;
+  let failure = undefined;
+  const isGlyphData = options?.isGlyphsets;
+
+  //Release whatever was downloaded successfully and report the first failure
+  const reportFailure = () => {
+    if (!isGlyphData) {
+      allData.forEach((data) => {
+        if (data) {
+          data[0]?.dispose?.();
+          data[1]?.forEach((material) => material.dispose());
+        }
+      });
+    }
+    if (onError) {
+      onError(...failure);
+    }
+  }
+
+  this.itemFailed = (order, args) => {
+    if (!failure) {
+      failure = args;
+    }
+    totalDownloaded++;
+    if (totalDownloaded == number) {
+      reportFailure();
+    }
+  }
 
   this.itemDownloaded = (order, args) => {
     allData[order]= args;
     totalDownloaded++;
     if (totalDownloaded == number) {
-      if (allData.length > 0) {
+      if (failure) {
+        reportFailure();
+      } else if (allData.length > 0) {
         //Assume when item length is one then it is a glyphset otherwise geometry
         if (!isGlyphData) {
           const materials = allData[0][1];
           const geometries = allData.map((data) => data[0]);
           //All geometries will be merged into the first one
           const geometry = mergeGeometries(geometries);
+          //mergeGeometries has disposed the source geometries,
+          //only the first set of materials is kept
           for (let i = 1; i < number; i++) {
-            allData[order][0].dispose();
-            allData[order][1].forEach((material) => material.dispose());
+            allData[i][1]?.forEach((material) => material.dispose());
           }
           onLoad(geometry, materials);
         } else {
@@ -186,7 +223,7 @@ const PrimitivesLoader = function () {
   //Load the first file then the rest will be handled separately
   const loadFromMultipleSources = (urls, onLoad, onProgress, onError, options) => {
     const number = urls.length;
-    const msHandler = new MultiSourcesHandler(number, onLoad, options);
+    const msHandler = new MultiSourcesHandler(number, onLoad, onError, options);
     //The order here will give us hint on the sequence on merging the primitives
     let order = 0;
     urls.forEach((url) => {
@@ -204,8 +241,10 @@ const PrimitivesLoader = function () {
     if (!indexedLoader) {
       if (MAX_DOWNLOAD > concurrentDownloads) {
         const onLoadCallback = new onFinally(undefined, this, newOptions);
+        const onErrorCallback = new onFinally(undefined, this, {});
         ++concurrentDownloads;
-        indexedLoader = new IndexedSourcesHandler(url, this.crossOrigin, onLoadCallback);
+        indexedLoader = new IndexedSourcesHandler(url, this.crossOrigin, onLoadCallback,
+          onErrorCallback);
         indexedLoaders[url] = indexedLoader;
       } else {
         waitingList.push({
@@ -231,8 +270,8 @@ const PrimitivesLoader = function () {
       if (MAX_DOWNLOAD > concurrentDownloads) {
         ++concurrentDownloads;
         const onLoadCallback = new onFinally(onLoad, this, options);
-        const onErrorCallback = new onFinally(onError, this, options);
-        if (!options.isGlyphsets) {
+        const onErrorCallback = new onFinally(onError, this, options, true);
+        if (!options?.isGlyphsets) {
           jsonloader.crossOrigin = this.crossOrigin;
           jsonloader.load(url, onLoadCallback, onProgress, onErrorCallback);
         } else {
@@ -279,11 +318,15 @@ const PrimitivesLoader = function () {
     }
   }
 
-  const onFinally = function(callback, loader, options) {
+  const onFinally = function(callback, loader, options, isError = false) {
     return (...args) => {
       --concurrentDownloads;
       if (options?.msHandler) {
-        options.msHandler.itemDownloaded(options.order, args);
+        if (isError) {
+          options.msHandler.itemFailed(options.order, args);
+        } else {
+          options.msHandler.itemDownloaded(options.order, args);
+        }
       } else if (options?.isHandler) {
         options.isHandler.downloadCompleted(args);
       } else {
@@ -297,7 +340,7 @@ const PrimitivesLoader = function () {
   }
 
   this.parse = data => {
-    return loader.parse(data);
+    return jsonloader.parse(data);
   }
 
 }

package/src/minimap.js

@@ -33,12 +33,34 @@ const Minimap = function (sceneIn) {
   this.mask = new THREE.Mesh( geometry, material );
   let _box = new THREE.Box3();
   let _center = new THREE.Vector3();
+  const _coord = new THREE.Vector3();
+  const _lookAt = new THREE.Vector3();
+  const _target = new THREE.Vector3();
+  const _corners = [new THREE.Vector3(), new THREE.Vector3(),
+    new THREE.Vector3(), new THREE.Vector3()];
+  const _boundaryVertices = [_corners[0], _corners[1], _corners[2],
+    _corners[2], _corners[3], _corners[0]];
+  //State the minimap was last computed from, it only needs to be updated
+  //when the scene or the main camera changes.
+  const _lastBoundingBox = new THREE.Box3();
+  const _lastMatrixWorld = new THREE.Matrix4();
+  const _lastProjectionMatrix = new THREE.Matrix4();
+  let _lastNear = undefined;
+  let _cameraUpdated = false;
+  //Matrix4.equals treats NaN as different, e.g. with a zero sized canvas
+  const matrixEquals = (a, b) => {
+    for (let i = 0; i < 16; i++) {
+      if (!Object.is(a.elements[i], b.elements[i]))
+        return false;
+    }
+    return true;
+  }
 
   this.getDiffFromNormalised = (x, y) => {
     _box.setFromBufferAttribute(positionAttributes).getCenter(_center);
-    let coord = _center.clone().project(this.camera);
-    let new_coord = new THREE.Vector3(x, y, coord.z).unproject(this.camera);
-    return new_coord.sub(_center);
+    _coord.copy(_center).project(this.camera);
+    //Returns a new vector, the caller may keep it
+    return new THREE.Vector3(x, y, _coord.z).unproject(this.camera).sub(_center);
   }
 
   let setCurrentCameraSettings = (diameter, newViewport)  => {
@@ -53,28 +75,41 @@ const Minimap = function (sceneIn) {
       this.camera.up.set(newViewport.upVector[0], newViewport.upVector[1],
         newViewport.upVector[2]);
     if (newViewport.targetPosition)
-      this.camera.lookAt(new THREE.Vector3(newViewport.targetPosition[0],
+      this.camera.lookAt(_lookAt.set(newViewport.targetPosition[0],
         newViewport.targetPosition[1], newViewport.targetPosition[2]));
     this.camera.zoom = 1 / diameter;
     this.camera.updateProjectionMatrix();
   }
 
   this.getBoundary = () => {
-    let target = new THREE.Vector3().copy(
-      targetScene.camera.target).project(targetScene.camera);
-    let v1 = new THREE.Vector3(-1, -1, target.z).unproject(targetScene.camera);
-    let v2 = new THREE.Vector3(1, -1, target.z).unproject(targetScene.camera);
-    let v3 = new THREE.Vector3(1, 1, target.z).unproject(targetScene.camera);
-    let v4 = new THREE.Vector3(-1, 1, target.z).unproject(targetScene.camera);
-    let array = [v1, v2, v3, v3, v4, v1];
-    copyVector3sArray(positionAttributes, array);
+    const camera = targetScene.camera;
+    _target.copy(camera.target).project(camera);
+    _corners[0].set(-1, -1, _target.z).unproject(camera);
+    _corners[1].set(1, -1, _target.z).unproject(camera);
+    _corners[2].set(1, 1, _target.z).unproject(camera);
+    _corners[3].set(-1, 1, _target.z).unproject(camera);
+    copyVector3sArray(positionAttributes, _boundaryVertices);
   }
 
   this.updateCamera = () => {
+    const camera = targetScene.camera;
+    let boundingBox = targetScene.getBoundingBox();
+    //Nothing has changed since the last update
+    if (_cameraUpdated && boundingBox && boundingBox.equals(_lastBoundingBox) &&
+      _lastNear === camera.near &&
+      matrixEquals(_lastMatrixWorld, camera.matrixWorld) &&
+      matrixEquals(_lastProjectionMatrix, camera.projectionMatrix)) {
+      return;
+    }
     this.getBoundary();
+    _lastMatrixWorld.copy(camera.matrixWorld);
+    _lastProjectionMatrix.copy(camera.projectionMatrix);
+    _lastNear = camera.near;
+    _cameraUpdated = false;
     let cameraControl = targetScene.getZincCameraControls();
-    let boundingBox = targetScene.getBoundingBox();
     if (boundingBox) {
+      _lastBoundingBox.copy(boundingBox);
+      _cameraUpdated = true;
       // enlarge radius to keep image within edge of window
       const diameter = boundingBox.min.distanceTo(boundingBox.max);
       const radius = diameter / 2.0;

package/src/primitives/geometry.js

@@ -99,6 +99,7 @@ const Geometry = function () {
 	 * @param {Boolean} wireframe - Flag to turn on/off wireframe display.
 	 */
 	this.setWireframe = wireframe => {
+		this.requestRender();
 		this.morph.material.wireframe = wireframe;
 	}
 
@@ -106,6 +107,7 @@ const Geometry = function () {
    * Edit Vertice in index.
    */
   this.editVertices = function(coords, i) {
+    this.requestRender();
     if (coords && coords.length) {
       let mesh = this.getMorph();
       const attribute = mesh.geometry.getAttribute("position");

package/src/primitives/glyph.js

@@ -63,6 +63,7 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
    * @param   {String} text - Label to be set for this instance
    */
   this.setLabel = text => {
+    parent?.requestRender?.();
     if (text && (typeof text === 'string' || text instanceof String)) {
       labelString = text;
       if (this.morph)
@@ -78,6 +79,7 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
    * getColour()) - e.g. genuinely no colour data at all for this glyphset.
    */
   this.showLabel = (colour) => {
+    parent?.requestRender?.();
     if (label) {
       _position = label.getPosition();
       this.group.remove(label.getSprite());
@@ -88,7 +90,8 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
       label = new Label(labelString, _colour || colour);
       label.setPosition(_position[0], _position[1], _position[2]);
       const sprite = label.getSprite();
-      sprite.material.alphaTest = 0.5;
+      //Only discard fully transparent pixels to keep the smooth edges
+      sprite.material.alphaTest = 0.05;
       sprite.material.transparent = true;
       sprite.material.depthWrite = false;
       this.group.add(label.getSprite());
@@ -99,6 +102,7 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
    * Hide label with the choosen colour.
    */
   this.hideLabel = () => {
+    parent?.requestRender?.();
     if (label) {
       _position = label.getPosition();
       this.group.remove(label.getSprite());
@@ -135,6 +139,7 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
    * transformation.
    */
   this.setTransformation = (position, axis1, axis2, axis3) => {
+    parent?.requestRender?.();
     if (this.morph) {
       this.morph.matrix.elements[0] = axis1[0];
       this.morph.matrix.elements[1] = axis1[1];
@@ -170,6 +175,7 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
    * @param {THREE.Color} color - Colour to be set.
    */
   this.setColour = (color) => {
+    parent?.requestRender?.();
     _colour = color ? color.clone() : undefined;
     if (label)
       label.setColour(color);
@@ -190,6 +196,10 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
    * Clear and free its memory.
    */
   this.dispose = () => {
+    if (label) {
+      label.dispose();
+      label = undefined;
+    }
     if (this.material)
       this.material.dispose();
     this.morph = undefined;