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

package/src/primitives/pointset.js

@@ -2,7 +2,7 @@ import * as THREE from 'three/webgpu';
 import { Label } from './label';
 import { InstancedPoints } from '../three/InstancedPoints';
 import { ZincObject } from './zincObject';
-import { getCircularTexture, toBufferGeometry } from '../utilities';
+import { getCircularTexture, toBufferGeometry, updateWorldMatrixFromAncestors } from '../utilities';
 import { createInstancedPointsMaterial } from '../tsl/pointsMaterial';
 
 //Maximum number of points a programmatically built (addPoints) Pointset can
@@ -124,27 +124,26 @@ const Pointset = function () {
     if (morphVertices) {
       const bottomPositions = positionFrames[bottomFrame];
       const topPositions = positionFrames[topFrame];
+      //pointPositions shares its array with instancePosition
       const positions = mesh.pointPositions;
       const length = activeCount * 3;
       for (let i = 0; i < length; i++) {
         positions[i] = proportion * bottomPositions[i] + (1 - proportion) * topPositions[i];
       }
-      const instancePosition = mesh.geometry.getAttribute('instancePosition');
-      instancePosition.array.set(positions.subarray(0, length));
-      instancePosition.needsUpdate = true;
+      mesh.geometry.getAttribute('instancePosition').needsUpdate = true;
       this.boundingBoxUpdateRequired = true;
     }
     if (morphColours && colorFrames) {
       const bottomColors = colorFrames[Math.min(bottomFrame, colorFrames.length - 1)];
       const topColors = colorFrames[Math.min(topFrame, colorFrames.length - 1)];
-      for (let i = 0; i < activeCount; i++) {
-        const index = i * 3;
-        _tempColor.setRGB(
-          proportion * bottomColors[index] + (1 - proportion) * topColors[index],
-          proportion * bottomColors[index + 1] + (1 - proportion) * topColors[index + 1],
-          proportion * bottomColors[index + 2] + (1 - proportion) * topColors[index + 2],
-        );
-        mesh.setColorAt(i, _tempColor);
+      if (!mesh.instanceColor) {
+        mesh.setColorAt(0, _tempColor);
+      }
+      //Write the blended colours straight into the instance colours
+      const colors = mesh.instanceColor.array;
+      const length = activeCount * 3;
+      for (let i = 0; i < length; i++) {
+        colors[i] = proportion * bottomColors[i] + (1 - proportion) * topColors[i];
       }
       mesh.instanceColor.needsUpdate = true;
     }
@@ -188,14 +187,13 @@ const Pointset = function () {
 
     const mesh = new InstancedPoints(quadGeometry, material, numberOfPoints);
     mesh.count = numberOfPoints;
-    mesh.pointPositions = new Float32Array(numberOfPoints * 3);
-    mesh.pointPositions.set(positionFrames[0]);
-    mesh.userData = this;
-    this.drawRange = numberOfPoints;
-
     const instancePosition = quadGeometry.getAttribute('instancePosition');
     instancePosition.array.set(positionFrames[0]);
     instancePosition.needsUpdate = true;
+    //Share the array to avoid keeping and updating two copies
+    mesh.pointPositions = instancePosition.array;
+    mesh.userData = this;
+    this.drawRange = numberOfPoints;
 
     const initialColorFrame = colorFrames ? colorFrames[0] : extractStaticColorFrame(geometry);
     if (initialColorFrame) {
@@ -230,7 +228,8 @@ const Pointset = function () {
       label.setPosition(coord[0], coord[1], coord[2]);
       const sprite = label.getSprite();
       sprite.material.sizeAttenuation = false;
-      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;
       sprite.material.depthTest = labelDepthTest;
@@ -261,6 +260,7 @@ const Pointset = function () {
    * @param {Number} colour - A hex value of the colour for the points
    */
   this.addPoints = (coords, labels, colour) => {
+    this.requestRender();
     if (coords && coords.length > 0) {
       let mesh = this.getMorph();
       let current = this.drawRange;
@@ -272,7 +272,7 @@ const Pointset = function () {
         material.color.set(colour);
         material.alphaTest = 0.5;
         mesh = new InstancedPoints(quadGeometry, material, DEFAULT_CAPACITY);
-        mesh.pointPositions = new Float32Array(DEFAULT_CAPACITY * 3);
+        mesh.pointPositions = quadGeometry.getAttribute('instancePosition').array;
         mesh.count = 0;
         mesh.userData = this;
         this.setMorph(mesh);
@@ -281,9 +281,6 @@ const Pointset = function () {
       coords.forEach(coord => {
         if (this.drawRange < DEFAULT_CAPACITY) {
           instancePosition.setXYZ(this.drawRange, coord[0], coord[1], coord[2]);
-          mesh.pointPositions[this.drawRange * 3] = coord[0];
-          mesh.pointPositions[this.drawRange * 3 + 1] = coord[1];
-          mesh.pointPositions[this.drawRange * 3 + 2] = coord[2];
           this.drawRange++;
         }
       });
@@ -311,6 +308,7 @@ const Pointset = function () {
    * @param {Number} hex - hex value of color to be set
    */
   this.setColourHex = function(hex) {
+    this.requestRender();
     this._lod._material.color.setHex(hex);
     if (this._lod._secondaryMaterial) {
       this._lod._secondaryMaterial.color.setHex(hex);
@@ -328,6 +326,7 @@ const Pointset = function () {
    * @param {THREE.Color} colour - colour to be set
    */
   this.setColour = (colour) => {
+    this.requestRender();
     this._lod.setColour(colour);
     for (let i = 0; i < labelSets.length; i++) {
       if (labelSets[i]) {
@@ -343,6 +342,7 @@ const Pointset = function () {
    * should be on or off.
    */
   this.setLabelDepthTest = (flag) => {
+    this.requestRender();
     labelDepthTest = flag;
     for (let i = 0; i < labelSets.length; i++) {
       if (labelSets[i]) {
@@ -357,6 +357,7 @@ const Pointset = function () {
    * @param {Number} fontWeightIn - Default value is 700
    */
   this.setLabelFontWeight = (fontWeightIn) => {
+    this.requestRender();
     fontWeight = fontWeightIn;
     for (let i = 0; i < labelSets.length; i++) {
       if (labelSets[i]) {
@@ -372,6 +373,7 @@ const Pointset = function () {
    * value is 1.
    */
   this.setLabelSize = (size) => {
+    this.requestRender();
     labelSize = size;
     for (let i = 0; i < labelSets.length; i++) {
       if (labelSets[i]) {
@@ -386,6 +388,7 @@ const Pointset = function () {
    * @param {boolean} flag - default value is true
    */
     this.displayLabels = (flag) => {
+      this.requestRender();
       labelVisibility = flag;
       for (let i = 0; i < labelSets.length; i++) {
         if (labelSets[i]) {
@@ -399,6 +402,7 @@ const Pointset = function () {
    * @param {Number} size - size to be set.
    */
   this.setSize = size => {
+    this.requestRender();
     if (this.morph && this.morph.material) {
       this.morph.material.size = size;
       this.morph.material.userData.uniforms.pointSize.value = size;
@@ -413,6 +417,7 @@ const Pointset = function () {
    * should be on or off.
    */
   this.setSizeAttenuation = flag => {
+    this.requestRender();
     if (this.morph && this.morph.material) {
       this.morph.material.sizeAttenuation = flag;
       this.morph.material.userData.uniforms.sizeAttenuation.value = flag ? 1 : 0;
@@ -438,6 +443,7 @@ const Pointset = function () {
    * Edit Vertice in index.
    */
   this.editVertices = function(coords, i) {
+    this.requestRender();
     if (coords && coords.length) {
       const mesh = this.getMorph();
       const maxIndex = i + coords.length - 1;
@@ -452,9 +458,6 @@ const Pointset = function () {
             label.setPosition(coord[0], coord[1], coord[2]);
           }
           instancePosition.setXYZ(index, coord[0], coord[1], coord[2]);
-          mesh.pointPositions[index * 3] = coord[0];
-          mesh.pointPositions[index * 3 + 1] = coord[1];
-          mesh.pointPositions[index * 3 + 2] = coord[2];
           //Keep the base frame consistent for any pointset that also
           //happens to be time varying.
           if (positionFrames[0]) {
@@ -474,6 +477,7 @@ const Pointset = function () {
    * Delete a vertex in index.
    */
     this.deleteVertices = function(index) {
+      this.requestRender();
       const mesh = this.getMorph();
       if (!mesh || 0 > index || index >= this.drawRange) {
         return this.drawRange;
@@ -481,7 +485,8 @@ const Pointset = function () {
       const instancePosition = mesh.geometry.getAttribute('instancePosition');
       const end = this.drawRange - 1;
       instancePosition.array.copyWithin(index * 3, (index + 1) * 3, this.drawRange * 3);
-      mesh.pointPositions.copyWithin(index * 3, (index + 1) * 3, this.drawRange * 3);
+      if (mesh.pointPositions !== instancePosition.array)
+        mesh.pointPositions.copyWithin(index * 3, (index + 1) * 3, this.drawRange * 3);
       if (mesh.instanceColor) {
         mesh.instanceColor.array.copyWithin(index * 3, (index + 1) * 3, this.drawRange * 3);
         mesh.instanceColor.needsUpdate = true;
@@ -560,8 +565,7 @@ const Pointset = function () {
       if (this.boundingBoxUpdateRequired) {
         this._b1.setFromArray(mesh.pointPositions.subarray(0, this.drawRange * 3));
         this.cachedBoundingBox.copy(this._b1);
-        mesh.updateWorldMatrix(true, true);
-        this.cachedBoundingBox.applyMatrix4(mesh.matrixWorld);
+        this.cachedBoundingBox.applyMatrix4(updateWorldMatrixFromAncestors(mesh));
         this.cachedBoundingBox.getCenter(this.center);
         this.radius = this.center.distanceTo(this.cachedBoundingBox.max);
         this.boundingBoxUpdateRequired = false;
@@ -586,6 +590,7 @@ const Pointset = function () {
    * @param {Number} time - Can be any value between 0 to duration.
    */
   this.setMorphTime = time => {
+    this.requestRender();
     if (time > this.duration) {
       this.inbuildTime = this.duration;
     } else if (0 > time) {

package/src/primitives/textureSlides.js

@@ -2,6 +2,7 @@ import * as THREE from 'three/webgpu';
 //import * as shader from '../shaders/textureSlide.js';
 import { createWebGPUMaterial } from '../tsl/textureSlides.js';
 import { TexturePrimitive } from './texturePrimitive';
+import { updateWorldMatrixFromAncestors } from '../utilities';
 
 
 const cloneData3DTexture = (sourceTex) => {
@@ -73,6 +74,7 @@ const TextureSlides = function (textureIn) {
    * @param {SLIDE_SETTINGS} slideSettings - An array to each slide settings.
    */
   this.createSlides = slideSettings => {
+    this.requestRender();
     slideSettings.forEach(slide => this.createSlide(slide));
   }
 
@@ -123,6 +125,7 @@ const TextureSlides = function (textureIn) {
    * @param {SLIDE_SETTINGS} settings - s.
    */
   this.modifySlideSettings = (settings) => {
+    this.requestRender();
     if (settings && settings.id &&
       settings.id in idTextureMap &&
       idTextureMap[settings.id]) {
@@ -139,6 +142,7 @@ const TextureSlides = function (textureIn) {
    * created mesh's id.
    */
   this.createSlide = settings => {
+    this.requestRender();
     if (this.texture && this.texture.isTextureArray && this.texture.isReady()) {
       if (settings && settings.direction && settings.value !== undefined) {
         const geometry = new THREE.PlaneGeometry(1, 1);
@@ -238,6 +242,7 @@ const TextureSlides = function (textureIn) {
    * @param {Slide} slide - Slide to be remvoed
    */
   this.removeSlide = slide => {
+    this.requestRender();
     if (slide) {
       this.removeSlideWithId(slide.id);
     }
@@ -249,6 +254,7 @@ const TextureSlides = function (textureIn) {
     * @param {Number} id - id of slide to be remvoed
     */
   this.removeSlideWithId = id => {
+    this.requestRender();
     if (this.morph && id in idTextureMap && idTextureMap[id]) {
       if (this.morph.getObjectById(id)) {
         const slide = idTextureMap[id];
@@ -333,14 +339,14 @@ const TextureSlides = function (textureIn) {
         expandBoxWithSettings(this.cachedBoundingBox, slide.material.userData.uniforms,
           vector);
       });
-      this.morph.updateMatrixWorld (true, true);
-      this.cachedBoundingBox.applyMatrix4(this.morph.matrixWorld);
+      this.cachedBoundingBox.applyMatrix4(updateWorldMatrixFromAncestors(this.morph));
       this.boundingBoxUpdateRequired = false;
     }
     return this.cachedBoundingBox;
   }
 
   this.applyTransformation = (rotation, position, scale) => {
+    this.requestRender();
     const matrix = new THREE.Matrix4();
     matrix.set(
       rotation[0],
@@ -369,6 +375,7 @@ const TextureSlides = function (textureIn) {
   }
 
   this.setRenderOrder = (order) => {
+    this.requestRender();
     //multiilayers
     this.morph.renderOrder = order;
   }
@@ -394,6 +401,7 @@ const TextureSlides = function (textureIn) {
   }
 
   this.showEdges = (color) => {
+    this.requestRender();
     if (!edgesLine) {
       const geometry = new THREE.BoxGeometry( 1, 1, 1 );
       geometry.translate(0.5, 0.5, 0.5);
@@ -408,6 +416,7 @@ const TextureSlides = function (textureIn) {
 
 
   this.setUniformsValue = (name, val) => {
+    this.requestRender();
     this.morph.children.forEach((mesh) => {
       const material = mesh.material;
       if (material.userData.uniforms) {
@@ -422,6 +431,7 @@ const TextureSlides = function (textureIn) {
   }
 
   this.discardAlphaPixel = (flag) => {
+    this.requestRender();
     discardAlpha = flag;
     this.setUniformsValue("discardAlpha", discardAlpha);
   }
@@ -431,6 +441,7 @@ const TextureSlides = function (textureIn) {
   }
 
   this.setBrightness = (brightnessIn) => {
+    this.requestRender();
     brightness = brightnessIn;
     this.setUniformsValue("brightness", brightness);
   }
@@ -440,6 +451,7 @@ const TextureSlides = function (textureIn) {
   }
 
   this.setContrast = (contrastIn) => {
+    this.requestRender();
     if (contrast >= 0 ) {
       contrast = contrastIn;
       this.setUniformsValue("contrast", contrast);
@@ -451,6 +463,7 @@ const TextureSlides = function (textureIn) {
   }
 
   this.setNumberOfChannels = (numbersIn) => {
+    this.requestRender();
     nChannels = numbersIn;
     this.setUniformsValue("nChannels", nChannels);
   }
@@ -460,6 +473,7 @@ const TextureSlides = function (textureIn) {
   }
 
   this.setMask = (maskTextureIn) => {
+    this.requestRender();
     maskTexture = maskTextureIn;
     maskEnabled = maskTexture ? true : false;
     this.morph.children.forEach((mesh) => {
@@ -475,6 +489,7 @@ const TextureSlides = function (textureIn) {
   }
 
   this.hideEdges = () => {
+    this.requestRender();
     if (edgesLine) {
       edgesLine.visible = false;
     }
@@ -513,6 +528,7 @@ const TextureSlides = function (textureIn) {
    * Update the glyphsets if required the render.
    */
   this.setMorphTime = (time) => {
+    this.requestRender();
     let newTime = time;
     if (time > this.duration)
       newTime = this.duration;
@@ -529,7 +545,7 @@ const TextureSlides = function (textureIn) {
   /**
    * Update the glyphsets if required the render.
    */
-  this.render = (delta, playAnimation, options) => {
+  this.render = (delta, playAnimation, cameraControls, options) => {
    //console.log("render", delta, playAnimation, this.textureList)
     if (playAnimation == true && this.timeEnabled &&
         this.textureList.length > 1) {

package/src/primitives/textureVolume.js

@@ -17,6 +17,8 @@ const TextureSlides = function (textureIn) {
   TexturePrimitive.call(this, textureIn);
   this.isTextureVolume = true;
   const textureSettings = [];
+  //Map of mesh id to slide mesh
+  const idTextureMap = {};
   this.morph = new THREE.Group();
   this.group = this.morph;
   this.morph.userData = this;

package/src/primitives/tubeLines.js

@@ -44,6 +44,7 @@ const TubeLines = function () {
    * @param {Number} width - Width of the lines.
    */
 	this.setWidth = width => {
+		this.requestRender();
 		if (this.morph && this.morph.material) {
 			this.morph.material.linewidth = width;
 			this.morph.material.needsUpdate = true;
@@ -58,6 +59,7 @@ const TubeLines = function () {
      * can be any value between from 0 to 1.0.
      */
     this.setAlpha = function (alpha) {
+        this.requestRender();
         let mesh = this.getMorph();
         mesh.material.opacity = alpha;
         mesh.material.transparent = alpha < 1.0;
@@ -69,6 +71,7 @@ const TubeLines = function () {
      * @param {Boolean} wireframe
      */
     this.setWireframe = (wireframe) => {
+        this.requestRender();
         let mesh = this.getMorph();
         mesh.material.wireframe = wireframe;
     }
@@ -80,6 +83,7 @@ const TubeLines = function () {
      * @param {Integer} radialSegments The number of segments that make up the cross-section.
      */
     this.setTubeLines = (radius, radialSegments) => {
+        this.requestRender();
         if (radius && radialSegments) {
             const { geometryIn } = dataIn;
             let mesh = this.getMorph();

package/src/primitives/zincObject.js

@@ -115,7 +115,15 @@ ZincObject.prototype.getRegion = function() {
  *
  * @return {Object}
  */
- ZincObject.prototype.getMorph = function() {
+ /**
+ * Request the scene to draw the next frame, this is used when render on
+ * demand is enabled. See {@link Renderer#setRenderOnDemand}.
+ */
+ZincObject.prototype.requestRender = function() {
+  this.region?.getScene?.()?.invalidate?.();
+}
+
+ZincObject.prototype.getMorph = function() {
   const morph =  this._lod.getCurrentMorph();
   return morph ? morph : this.morph;
 }
@@ -159,6 +167,7 @@ ZincObject.prototype.checkTransparentMesh = function() {
  * time dependent.
  */
 ZincObject.prototype.setMesh = function(mesh, localTimeEnabled, localMorphColour) {
+  this.requestRender();
   //Note: we assume all layers are consistent with time frame
   //Thus adding them to the same animation group should work.
   //This step is only required for the primary (level 0) mesh.
@@ -267,6 +276,7 @@ ZincObject.prototype.getCurrentTime = function() {
  * @param {Number} time - Can be any value between 0 to duration.
  */
 ZincObject.prototype.setMorphTime = function(time) {
+  this.requestRender();
   let timeChanged = false;
   if (this.clipAction) {
     const ratio = time / this.duration;
@@ -293,7 +303,8 @@ ZincObject.prototype.setMorphTime = function(time) {
     }
   }
   if (timeChanged) {
-    this.boundingBoxUpdateRequired = true;
+    if (this.hasMorphPositions())
+      this.boundingBoxUpdateRequired = true;
     this._lod.updateMorphColorAttribute(true);
     if (this.timeEnabled)
       this.markerUpdateRequired = true;
@@ -325,6 +336,7 @@ ZincObject.prototype.getVisibility = function() {
  * @param {Boolean} visible - a boolean flag indicate the visibility to be set
  */
 ZincObject.prototype.setVisibility = function(visible) {
+  this.requestRender();
   if (visible !== this.visible) {
     this.visible = visible;
     this.group.visible = visible;
@@ -340,6 +352,7 @@ ZincObject.prototype.setVisibility = function(visible) {
  * can be any value between from 0 to 1.0.
  */
 ZincObject.prototype.setAlpha = function(alpha) {
+  this.requestRender();
   const material = this._lod._material;
   let isTransparent = false;
   if (alpha  < 1.0)
@@ -357,6 +370,7 @@ ZincObject.prototype.setAlpha = function(alpha) {
  * @param {Boolean} flag - Set frustrum culling on/off based on this flag.
  */
 ZincObject.prototype.setFrustumCulled = function(flag) {
+  this.requestRender();
   //multilayers - set for all layers
   this._lod.setFrustumCulled(flag);
 }
@@ -368,6 +382,7 @@ ZincObject.prototype.setFrustumCulled = function(flag) {
  * @param {Boolean} vertexColors - Set display with vertex color on/off.
  */
 ZincObject.prototype.setVertexColors = function(vertexColors) {
+  this.requestRender();
   //multilayers - set for all
   this._lod.setVertexColors(vertexColors);
 
@@ -390,6 +405,7 @@ ZincObject.prototype.getColour = function() {
  * @param {THREE.Color} colour - Colour to be set for this geometry.
  */
 ZincObject.prototype.setColour = function(colour) {
+  this.requestRender();
   this._lod.setColour(colour);
 }
 
@@ -399,6 +415,7 @@ ZincObject.prototype.setColour = function(colour) {
  * @param {THREE.Color} colour - Colour to be set for this geometry.
  */
 ZincObject.prototype.setGreyScale = function(flag) {
+  this.requestRender();
   if (flag) {
     if (!this.origColour) {
       if (this._lod._material) {
@@ -439,6 +456,7 @@ ZincObject.prototype.getColourHex = function() {
  * @param {String} hex - The colour value in hex form.
  */
 ZincObject.prototype.setColourHex = function(hex) {
+  this.requestRender();
   this._lod._material.color.setHex(hex);
   if (this._lod._secondaryMaterial) {
     this._lod._secondaryMaterial.color.setHex(hex);
@@ -451,6 +469,7 @@ ZincObject.prototype.setColourHex = function(hex) {
  * @param {String} colour - The colour value in rgb form.
  */
 ZincObject.prototype.setEmissiveRGB = function(colour) {
+  this.requestRender();
   if (this._lod._material && this._lod._material.emissive) {
     this._lod._material.emissive.setRGB(...colour);
   }
@@ -466,6 +485,7 @@ ZincObject.prototype.setEmissiveRGB = function(colour) {
  * @param {THREE.Material} material - Material to be set for this geometry.
  */
 ZincObject.prototype.setMaterial = function(material) {
+  this.requestRender();
   this._lod.setMaterial(material);
 }
 
@@ -486,10 +506,8 @@ ZincObject.prototype.getClosestVertexIndex = function() {
       let currentDistance = 0;
       for (let i = 0; i < position.count; i++) {
         this._v2.fromArray(position.array, i * 3);
-        currentDistance = this._v2.distanceTo(this._v1);
-        if (distance == -1)
-          distance = currentDistance;
-        else if (distance > (currentDistance)) {
+        currentDistance = this._v2.distanceToSquared(this._v1);
+        if ((distance == -1) || (distance > currentDistance)) {
           distance = currentDistance;
           closestIndex = i;
         }
@@ -592,6 +610,44 @@ ZincObject.prototype.markerIsRequired = function(options) {
   return false;
 }
 
+//geometry -> whether its morph targets move the vertices
+const morphPositionsCache = new WeakMap();
+
+/**
+ * Check if the vertices positions change over time, only then will
+ * the bounding box change during playback.
+ *
+ * @return {Boolean}
+ */
+ZincObject.prototype.hasMorphPositions = function() {
+  const geometry = this.getMorph()?.geometry;
+  const morphPositions = geometry?.morphAttributes?.position;
+  if (!morphPositions || morphPositions.length === 0)
+    return false;
+  const cached = morphPositionsCache.get(geometry);
+  if (cached && cached.morphPositions === morphPositions)
+    return cached.result;
+  //Colour only morphs use placeholder targets identical to the base
+  //positions, these never move the vertices.
+  const basePositions = geometry.getAttribute('position')?.array;
+  let result = false;
+  for (let i = 0; i < morphPositions.length && !result; i++) {
+    const array = morphPositions[i].array;
+    if (!basePositions || array.length !== basePositions.length) {
+      result = true;
+    } else if (array !== basePositions) {
+      for (let j = 0; j < array.length; j++) {
+        if (array[j] !== basePositions[j]) {
+          result = true;
+          break;
+        }
+      }
+    }
+  }
+  morphPositionsCache.set(geometry, { morphPositions, result });
+  return result;
+}
+
 /**
  * Update the marker's position and size based on current viewport.
  */
@@ -610,6 +666,7 @@ ZincObject.prototype.updateMarker = function(playAnimation, options) {
         if (position) {
           this.marker.setPosition(position.x, position.y, position.z);
           this.markerUpdateRequired = false;
+          ndcToBeUpdated = true;
         }
       }
       if (!this.marker.isEnabled()) {
@@ -627,8 +684,9 @@ ZincObject.prototype.updateMarker = function(playAnimation, options) {
       } else {
         this.marker.setDefaultSprite();
       }
-      if (options && options.camera && (ndcToBeUpdated ||
-        options.markerCluster.markerUpdateRequired)) {
+      //Only update the screen position when the camera or the
+      //marker has moved, or the marker has just been enabled.
+      if (options && options.camera && ndcToBeUpdated) {
         this.marker.updateNDC(options.camera.cameraObject);
         options.markerCluster.markerUpdateRequired = true;
       }
@@ -637,7 +695,7 @@ ZincObject.prototype.updateMarker = function(playAnimation, options) {
     if (this.marker && this.marker.isEnabled()) {
       this.marker.disable();
       this.group.remove(this.marker.morph);
-      if (options.markersList &&
+      if (options?.markersList &&
         (this.marker.uuid in options.markersList)) {
         options.markerCluster.markerUpdateRequired = true;
         delete options.markersList[this.marker.uuid];
@@ -661,6 +719,7 @@ ZincObject.prototype.initiateMorphColor = function() {
 }
 
 ZincObject.prototype.setRenderOrder = function(renderOrder) {
+  this.requestRender();
   //multiilayers
   this._lod.setRenderOrder(renderOrder);
 }
@@ -699,6 +758,7 @@ ZincObject.prototype.getClosestVertexDOMElementCoords = function(scene) {
  * @return {Boolean}
  */
  ZincObject.prototype.setMarkerMode = function(mode, options) {
+  this.requestRender();
   if (mode !== this.markerMode) {
     if (mode === "on" || mode === "off") {
       this.markerMode = mode;
@@ -733,7 +793,9 @@ ZincObject.prototype.render = function(delta, playAnimation,
     }
     //multilayers
     if (this.visible && delta != 0) {
-      this.boundingBoxUpdateRequired = true;
+      //Only vertices morphing can change the bounding box
+      if (this.hasMorphPositions())
+        this.boundingBoxUpdateRequired = true;
       if (this.morphColour == 1) {
         this._lod.updateMorphColorAttribute(true);
       }
@@ -753,6 +815,7 @@ ZincObject.prototype.addLOD = function(loader, level, url, index, preload) {
  * Add lod from an url into the lod object.
  */
 ZincObject.prototype.addVertices = function(coords) {
+  this.requestRender();
   let mesh = this.getMorph();
   let geometry = undefined;
   if (!mesh) {
@@ -780,6 +843,7 @@ ZincObject.prototype.addVertices = function(coords) {
  * Add lod from an url into the lod object.
  */
 ZincObject.prototype.deleteVertices = function(index) {
+  this.requestRender();
   let mesh = this.getMorph();
   if (mesh?.geometry && this.drawRange >= index) {
     if (removeVertexAtIndex(mesh.geometry, index, true)) {
@@ -798,6 +862,7 @@ ZincObject.prototype.deleteVertices = function(index) {
  * Set the objects position.
  */
 ZincObject.prototype.setPosition = function(x, y, z) {
+  this.requestRender();
   const group = this.getGroup();
   if (group) {
     group.position.set(x, y, z);
@@ -817,6 +882,7 @@ ZincObject.prototype.loadAdditionalSources = function(primitivesLoader, sources)
  * Set the objects scale.
  */
 ZincObject.prototype.setScaleAll = function(scale) {
+  this.requestRender();
   const group = this.getGroup();
   if (group) {
     group.scale.set(scale, scale, scale);