zincjs 2.4.1-beta.3 → 2.4.1-beta.5

package/src/renderer.js

@@ -1,6 +1,8 @@
 import * as THREE from 'three/webgpu';
 import { ResizeSensor } from 'css-element-queries';
 import { Scene } from './scene';
+import { onRenderRequest, offRenderRequest } from './renderRequests';
+import { setTextPixelsPerUnit } from './textSprite';
 /**
  * Create a Zinc 3D renderer in the container provided.
  * The primary function of a Zinc 3D renderer is to display the current
@@ -48,6 +50,15 @@ const Renderer = function (containerIn) {
 	const _this = this;
 	const currentSize = [0, 0];
 	const currentOffset = [0, 0];
+	//Render on demand is opt-in, when enabled the scene is only drawn when
+	//something has changed.
+	let renderOnDemand = false;
+	let needsRender = true;
+	const requestRender = () => {
+		needsRender = true;
+	}
+	//Camera of the current scene shared with additional active scenes
+	const sharedCamera = { controls: undefined, updated: false };
 
 	this.getDrawingWidth = () => {
 		if (container) {
@@ -75,6 +86,7 @@ const Renderer = function (containerIn) {
 	 * Call this to resize the renderer, this is normally call automatically.
 	 */
 	this.onWindowResize = () => {
+		needsRender = true;
 		currentScene.onWindowResize();
 		//Give it a miniumum size of 1 x 1
 		const width = this.getDrawingWidth() || 1;
@@ -103,6 +115,12 @@ const Renderer = function (containerIn) {
 			renderer.getSize(target);
 			currentSize[0] = target.x;
 			currentSize[1] = target.y;
+			//Text sprites are drawn at the resolution they occupy on screen
+			const fov = currentScene?.camera?.fov;
+			if (fov) {
+				setTextPixelsPerUnit(currentSize[1] * renderer.getPixelRatio() /
+					(2 * Math.tan(fov * Math.PI / 360)));
+			}
 		}
 	}
 
@@ -172,6 +190,7 @@ const Renderer = function (containerIn) {
 			renderer.autoClear = false;
 			const scene = this.createScene("default");
 			this.setCurrentScene(scene);
+			onRenderRequest(requestRender);
 			isInitialised = true;
 		}
 	}
@@ -218,6 +237,7 @@ const Renderer = function (containerIn) {
 			}
 			currentScene.setInteractiveControlEnable(true);
 			currentScene.setAdditionalScenesGroup(scenesGroup);
+			needsRender = true;
 			this.onWindowResize();
 		}
 	}
@@ -377,6 +397,7 @@ const Renderer = function (containerIn) {
     if (!isRendering) {
       clock.reset();
       isRendering = true;
+      needsRender = true;
       runAnimation();
     }
 	}
@@ -486,6 +507,41 @@ const Renderer = function (containerIn) {
 	 */
 	this.setPlayRate = playRateIn => {
 		playRate = playRateIn;
+		needsRender = true;
+	}
+
+	/**
+	 * Enable or disable render on demand, it is disabled by default.
+	 * When enabled, the scenes are only drawn when something has changed,
+	 * e.g. camera movement, animation, loading and changes made through
+	 * the Zinc APIs. Call {@link Renderer#invalidate} after modifying
+	 * THREE.js objects directly or after changing the THREE.js renderer,
+	 * e.g. setClearColor.
+	 * Pre-render callbacks are called on every frame, post-render callbacks
+	 * are only called when the scenes are drawn.
+	 *
+	 * @param {Boolean} flag - Enable or disable render on demand.
+	 */
+	this.setRenderOnDemand = flag => {
+		renderOnDemand = flag ? true : false;
+		needsRender = true;
+	}
+
+	/**
+	 * Check if render on demand is enabled.
+	 *
+	 * @return {Boolean}
+	 */
+	this.isRenderOnDemand = () => {
+		return renderOnDemand;
+	}
+
+	/**
+	 * Request the scenes to be drawn on the next frame, this is only
+	 * required when render on demand is enabled.
+	 */
+	this.invalidate = () => {
+		needsRender = true;
 	}
 
 	this.getCurrentTime = () => {
@@ -534,6 +590,7 @@ const Renderer = function (containerIn) {
 			cameraOrtho.position.z = 10;
 		}
 		sceneOrtho.add(object)
+		needsRender = true;
 	}
 
 	const createHUDSprites = logoSprite => {
@@ -575,22 +632,33 @@ const Renderer = function (containerIn) {
 		}
     clock.update();
 		const delta = clock.getDelta();
-		currentScene.renderGeometries(playRate, delta, this.playAnimation);
+		let changed = currentScene.renderGeometries(playRate, delta, this.playAnimation);
+		if (additionalActiveScenes.length > 0) {
+			//Additional scenes are displayed with the current scene's camera
+			sharedCamera.controls = currentScene.getZincCameraControls();
+			sharedCamera.updated = currentScene.isCameraUpdated();
+		}
 	    for(let i = 0; i < additionalActiveScenes.length; i++) {
 	        const sceneItem = additionalActiveScenes[i];
-	        sceneItem.renderGeometries(playRate, delta, this.playAnimation);
+	        if (sceneItem.renderGeometries(playRate, delta, this.playAnimation, sharedCamera))
+	          changed = true;
 	    }
-		if (cameraOrtho != undefined && sceneOrtho != undefined) {
-			renderer.clearDepth();
-			renderer.render( sceneOrtho, cameraOrtho );
-		}
-    for (let key of Object.keys(preRenderCallbackFunctions)) {
+    for (let key in preRenderCallbackFunctions) {
       if (preRenderCallbackFunctions.hasOwnProperty(key)) {
         preRenderCallbackFunctions[key].call();
       }
     }
+		//Pre-render callbacks may have requested a frame
+		if (renderOnDemand && !changed && !needsRender) {
+			return;
+		}
+		needsRender = false;
     currentScene.render(renderer);
-    for (let key of Object.keys(postRenderCallbackFunctions)) {
+		if (cameraOrtho != undefined && sceneOrtho != undefined) {
+			renderer.clearDepth();
+			renderer.render( sceneOrtho, cameraOrtho );
+		}
+    for (let key in postRenderCallbackFunctions) {
       if (postRenderCallbackFunctions.hasOwnProperty(key)) {
         postRenderCallbackFunctions[key].call();
       }
@@ -639,6 +707,7 @@ const Renderer = function (containerIn) {
 		if (!this.isSceneActive(additionalScene)) {
 			additionalActiveScenes.push(additionalScene);
 			scenesGroup.add(additionalScene.getThreeJSScene());
+			needsRender = true;
 		}
 	}
 
@@ -653,6 +722,7 @@ const Renderer = function (containerIn) {
 			if (sceneItem === additionalScene) {
 				additionalActiveScenes.splice(i, 1);
 				scenesGroup.remove(additionalScene.getThreeJSScene());
+				needsRender = true;
 				return;
 			}
 		}
@@ -666,6 +736,7 @@ const Renderer = function (containerIn) {
 			scenesGroup.remove(additionalActiveScenes[i].getThreeJSScene());
 		}
 		additionalActiveScenes.splice(0,additionalActiveScenes.length);
+		needsRender = true;
 	}
 
   /**
@@ -686,7 +757,7 @@ const Renderer = function (containerIn) {
     preRenderCallbackFunctions = {};
     preRenderCallbackFunctions_id = 0;
     postRenderCallbackFunctions = {};
-    postRenderCallbackFunctions = 0;
+    postRenderCallbackFunctions_id = 0;
     contextLostCallbackFunctions = {};
     contextLostCallbackFunctions_id = 0;
     contextRestoredCallbackFunctions = {};
@@ -697,6 +768,7 @@ const Renderer = function (containerIn) {
     const scene = this.createScene("default");
     this.setCurrentScene(scene);
     sensor = undefined;
+    offRenderRequest(requestRender);
     renderer?.dispose();
   }
 

package/src/scene.js

@@ -47,6 +47,21 @@ const Scene = function (containerIn, rendererIn) {
   const container = containerIn;
   let cameraHelper = undefined;
   let videoHandler = undefined;
+  //Set when something has changed and the scene needs to be drawn,
+  //used for render on demand.
+  let needsRender = true;
+  //Set when the camera has been updated on the current frame
+  let cameraUpdated = false;
+  //Options passed to the objects on every frame
+  const renderOptions = {};
+  //Values of the display properties on the last frame, changing them
+  //requires the scene to be drawn.
+  const lastDisplayState = {
+    displayMarkers: undefined,
+    displayMinimap: undefined,
+    displayMiniAxes: undefined,
+    playAnimation: undefined,
+  };
   let sceneLoader = new SceneLoader(this);
   let minimap = undefined;
   let zincObjectAddedCallbacks = {};
@@ -130,6 +145,7 @@ const Scene = function (containerIn, rendererIn) {
 
   //called from Renderer when panel has been resized
   this.onWindowResize = () => {
+    needsRender = true;
     const wHeight = getDrawingHeight();
     this.camera.aspect = getDrawingWidth() / wHeight;
     this.camera.updateProjectionMatrix();
@@ -142,6 +158,7 @@ const Scene = function (containerIn, rendererIn) {
    * Reset the viewport of this scene to its original state.
    */
   this.resetView = () => {
+    needsRender = true;
     this.onWindowResize();
     zincCameraControls.resetView();
   }
@@ -150,6 +167,7 @@ const Scene = function (containerIn, rendererIn) {
    * Set the zoom level by unit scroll rate
    */
   this.changeZoomByScrollRateUnit = unit => {
+    needsRender = true;
     zincCameraControls.changeZoomByScrollRateUnit(unit);
   }
 
@@ -178,6 +196,7 @@ const Scene = function (containerIn, rendererIn) {
    * @param {Zinc.Viewport} viewData - Viewport data to be loaded.
    */
   this.loadView = settings => {
+    needsRender = true;
     const viewPort = new Viewport();
     viewPort.setFromObject(settings);
     zincCameraControls.setCurrentCameraSettings(viewPort);
@@ -214,6 +233,7 @@ const Scene = function (containerIn, rendererIn) {
    * which we the viewport should be displaying.
    */
   this.viewAllWithBoundingBox = boundingBox => {
+    needsRender = true;
     if (boundingBox) {
       const viewport = zincCameraControls.getViewportFromBoundingBox(boundingBox, 1.0);
       zincCameraControls.setCurrentCameraSettings(viewport);
@@ -226,6 +246,7 @@ const Scene = function (containerIn, rendererIn) {
    * Adjust zoom distance to include all primitives in scene only.
    */
   this.viewAll = () => {
+    needsRender = true;
     const boundingBox = this.getBoundingBox();
     this.viewAllWithBoundingBox(boundingBox);
     markerCluster.markerUpdateRequired = true;
@@ -400,6 +421,7 @@ const Scene = function (containerIn, rendererIn) {
    * @returns {THREE.Vector3}
    */
   this.addZincObject = zincObject => {
+    needsRender = true;
     if (zincObject) {
       rootRegion.addZincObject(zincObject);
       if (zincCameraControls)
@@ -530,6 +552,7 @@ const Scene = function (containerIn, rendererIn) {
 
   //Update the directional light for this scene.
   this.updateDirectionalLight = () => {
+    needsRender = true;
     zincCameraControls.updateDirectionalLight();
   }
 
@@ -538,6 +561,7 @@ const Scene = function (containerIn, rendererIn) {
    * @param {THREE.Object} object - to be addded into this scene.
    */
   this.addObject = object => {
+    needsRender = true;
     scene.add(object);
   }
 
@@ -546,6 +570,7 @@ const Scene = function (containerIn, rendererIn) {
    * @param {THREE.Object} object - to be removed from this scene.
    */
   this.removeObject = object => {
+    needsRender = true;
     scene.remove(object);
   }
 
@@ -569,6 +594,7 @@ const Scene = function (containerIn, rendererIn) {
    * @param {Number} time  - Value to set the time to.
    */
   this.setMorphsTime = (time) => {
+    needsRender = true;
     if (videoHandler != undefined) {
       videoHandler.setMorphTime(time, duration);
     }
@@ -591,16 +617,22 @@ const Scene = function (containerIn, rendererIn) {
    * Update geometries and glyphsets based on the calculated time.
    * @private
    */
-  this.renderGeometries = (playRate, delta, playAnimation) => {
-    // Let video dictates the progress if one is present
-    let options = {};
-    options.camera = zincCameraControls;
+  this.renderGeometries = (playRate, delta, playAnimation, sharedCamera) => {
+    //Anything requested since the last frame
+    let changed = needsRender;
+    needsRender = false;
+    cameraUpdated = false;
+    //Additional active scenes are displayed with the current scene's camera
+    const cameraControls = sharedCamera ? sharedCamera.controls : zincCameraControls;
+    //Reused on every frame to avoid allocations
+    const options = renderOptions;
+    options.camera = cameraControls;
     //Global markers flag, marker can be set at individual zinc object level
     //overriding this flag.
     options.displayMarkers =  this.displayMarkers;
     options.markerCluster = markerCluster;
     options.markersList = markerCluster.markers;
-    options.ndcToBeUpdated = false;
+    options.ndcToBeUpdated = sharedCamera ? sharedCamera.updated : false;
     //Always set marker cluster update required when playAnimation is true
     //to make sure it is updated when it stops
     if (playAnimation) {
@@ -616,29 +648,90 @@ const Scene = function (containerIn, rendererIn) {
         const currentTime = videoHandler.video.currentTime /
           videoHandler.getVideoDuration() * duration;
 			  if (0 == sceneLoader.toBeDownloaded) {
-				  zincCameraControls.setTime(currentTime);
-				  options.ndcToBeUpdated = zincCameraControls.update(0);
-          if (options.ndcToBeUpdated) {
-            zincCameraControls.calculateHeightPerPixelAtZeroDepth(getDrawingHeight());
+				  if (!sharedCamera) {
+				    zincCameraControls.setTime(currentTime);
+				    options.ndcToBeUpdated = zincCameraControls.update(0);
+            if (options.ndcToBeUpdated) {
+              zincCameraControls.calculateHeightPerPixelAtZeroDepth(getDrawingHeight());
+            }
           }
           rootRegion.setMorphTime(currentTime, true);
-          rootRegion.renderGeometries(0, 0, playAnimation, zincCameraControls, options, true);
-			  } else {
-				  zincCameraControls.update(0);
+          rootRegion.renderGeometries(0, 0, playAnimation, cameraControls, options, true);
+			  } else if (!sharedCamera && zincCameraControls.update(0)) {
+				  changed = true;
+				  cameraUpdated = true;
 			  }
 			  //console.log(videoHandler.video.currentTime / videoHandler.getVideoDuration() * 6000);
 		  }
+		  //The video texture changes while playing or loading
+		  if (playAnimation || !videoHandler.isReadyToPlay())
+		    changed = true;
 	  } else {
 		  if (0 == sceneLoader.toBeDownloaded) {
-        options.ndcToBeUpdated = zincCameraControls.update(delta);
-        if (options.ndcToBeUpdated) {
-          zincCameraControls.calculateHeightPerPixelAtZeroDepth(getDrawingHeight());
+        if (!sharedCamera) {
+          options.ndcToBeUpdated = zincCameraControls.update(delta);
+          if (options.ndcToBeUpdated) {
+            zincCameraControls.calculateHeightPerPixelAtZeroDepth(getDrawingHeight());
+          }
         }
-        rootRegion.renderGeometries(playRate, delta, playAnimation, zincCameraControls, options, true);
-		  } else {
-			  zincCameraControls.update(0);
+        rootRegion.renderGeometries(playRate, delta, playAnimation, cameraControls, options, true);
+		  } else if (!sharedCamera && zincCameraControls.update(0)) {
+			  changed = true;
+			  cameraUpdated = true;
 		  }
     }
+    //These are plain properties, check if they have changed
+    if (lastDisplayState.displayMarkers !== this.displayMarkers ||
+      lastDisplayState.displayMinimap !== this.displayMinimap ||
+      lastDisplayState.displayMiniAxes !== this.displayMiniAxes ||
+      lastDisplayState.playAnimation !== playAnimation) {
+      lastDisplayState.displayMarkers = this.displayMarkers;
+      lastDisplayState.displayMinimap = this.displayMinimap;
+      lastDisplayState.displayMiniAxes = this.displayMiniAxes;
+      lastDisplayState.playAnimation = playAnimation;
+      changed = true;
+    }
+    //The flag is only cleared when the minimap is drawn
+    if (this.minimapScissor.updateRequired &&
+      (this.displayMinimap || this.displayMiniAxes)) {
+      changed = true;
+    }
+    if (!sharedCamera && options.ndcToBeUpdated)
+      cameraUpdated = true;
+    if (options.ndcToBeUpdated ||
+      (playAnimation && this.isTimeVarying()) ||
+      //Objects appear as they are loaded
+      sceneLoader.toBeDownloaded > 0 ||
+      //Clusters are recalculated on a later frame
+      (markerCluster.isEnabled() && markerCluster.markerUpdateRequired)) {
+      changed = true;
+    }
+    //Changes made during this frame, e.g. LOD switching
+    if (needsRender) {
+      changed = true;
+      needsRender = false;
+    }
+    return changed;
+  }
+
+  /**
+   * Request this scene to be drawn on the next frame, this is only
+   * required when render on demand is enabled on the renderer.
+   * See {@link Renderer#setRenderOnDemand}.
+   */
+  this.invalidate = () => {
+    needsRender = true;
+  }
+
+  /**
+   * Check if the camera of this scene has been updated during the last
+   * call to renderGeometries.
+   *
+   * @return {Boolean}
+   * @private
+   */
+  this.isCameraUpdated = () => {
+    return cameraUpdated;
   }
 
   /**
@@ -650,6 +743,7 @@ const Scene = function (containerIn, rendererIn) {
   }
 
   this.setVideoHandler = (videoHandlerIn) => {
+    needsRender = true;
     if (!videoHandler)
       videoHandler = videoHandlerIn;
   }
@@ -770,6 +864,7 @@ const Scene = function (containerIn, rendererIn) {
    * @param {Number} durationIn - duration of the scene.
    */
   this.setDuration = durationIn => {
+    needsRender = true;
     rootRegion.setDuration(durationIn);
     duration = durationIn;
     zincCameraControls.setPathDuration(durationIn);
@@ -790,6 +885,7 @@ const Scene = function (containerIn, rendererIn) {
    * should be enabled or disabled.
    */
   this.setStereoEffectEnable = stereoFlag => {
+    needsRender = true;
     if (stereoFlag == true) {
       if (!stereoEffect) {
         stereoEffect = new StereoEffect(rendererIn);
@@ -819,6 +915,7 @@ const Scene = function (containerIn, rendererIn) {
    * @param {Number} transitionTime - Duration to perform the transition.
    */
   this.alignBoundingBoxToCameraView = (boundingBox, transitionTime) => {
+    needsRender = true;
     if (boundingBox) {
       boundingBox.getCenter(_v3);
       const viewport = this.getZincCameraControls().getCurrentViewport();
@@ -886,6 +983,7 @@ const Scene = function (containerIn, rendererIn) {
    * @param {ZincObject} zincObject - the bounding box to target
    */
   this.setCameraTargetToObject = zincObject => {
+    needsRender = true;
     if (this.objectIsInScene(zincObject)) {
       const boundingBox = zincObject.getBoundingBox();
       const viewport = this.getZincCameraControls().getCurrentViewport();
@@ -923,6 +1021,7 @@ const Scene = function (containerIn, rendererIn) {
    * @param {Zinc.Object} zincObject - object to be removed from this scene.
    */
   this.removeZincObject = zincObject => {
+    needsRender = true;
     rootRegion.removeZincObject(zincObject);
     if (zincCameraControls) {
       zincCameraControls.calculateMaxAllowedDistance(this);
@@ -1021,11 +1120,12 @@ const Scene = function (containerIn, rendererIn) {
    * This does not remove obejcts that are added using the addObject APIs.
    */
   this.clearAll = () => {
+    needsRender = true;
     markerCluster.clear();
     rootRegion.clear(true);
     this.clearZincObjectAddedCallbacks();
     this.clearZincObjectRemovedCallbacks();
-    sceneLoader.toBeDwonloaded = 0;
+    sceneLoader.cancelPendingLoads();
     if (zincCameraControls) {
       zincCameraControls.calculateMaxAllowedDistance(this);
     }
@@ -1259,6 +1359,7 @@ const Scene = function (containerIn, rendererIn) {
    * with clearTemporaryPrimitives method.
 	 */
   this.addTemporaryPoints = (coords, colour) => {
+    needsRender = true;
     const geometry = createPointQuadGeometry(coords.length);
     const material = createInstancedPointsMaterial(getCircularTexture());
     material.color.set(colour);
@@ -1266,13 +1367,11 @@ const Scene = function (containerIn, rendererIn) {
     material.userData.uniforms.pointSize.value = 15;
     material.alphaTest = 0.5;
     const point = new InstancedPoints(geometry, material, coords.length);
-    point.pointPositions = new Float32Array(coords.length * 3);
     const instancePosition = geometry.getAttribute('instancePosition');
+    //Share the array with the instance positions
+    point.pointPositions = instancePosition.array;
     coords.forEach((coord, index) => {
       instancePosition.setXYZ(index, coord[0], coord[1], coord[2]);
-      point.pointPositions[index * 3] = coord[0];
-      point.pointPositions[index * 3 + 1] = coord[1];
-      point.pointPositions[index * 3 + 2] = coord[2];
     });
     instancePosition.needsUpdate = true;
     tempGroup.add(point);
@@ -1284,6 +1383,7 @@ const Scene = function (containerIn, rendererIn) {
    * with clearTemporaryPrimitives method.
 	 */
   this.addTemporaryLines = (coords, colour) => {
+    needsRender = true;
     const geometry = createBufferGeometry(coords.length, coords);
     const material = new THREE.LineBasicMaterial({color:colour});
     const line = new LineSegments(geometry, material);
@@ -1296,6 +1396,7 @@ const Scene = function (containerIn, rendererIn) {
 	 * Display frustum
 	 */
   this.enableFrustumDisplay = () => {
+    needsRender = true;
     if (this.camera && !cameraHelper) {
       cameraHelper = new THREE.CameraHelper(this.camera);
       scene.add(cameraHelper);
@@ -1306,6 +1407,7 @@ const Scene = function (containerIn, rendererIn) {
 	 * Hide frustum
 	 */
   this.disableFrustumDisplay = () => {
+    needsRender = true;
     if (cameraHelper) {
       scene.remove(cameraHelper);
       cameraHelper.dispose();
@@ -1317,6 +1419,7 @@ const Scene = function (containerIn, rendererIn) {
 	 * Remove object from temporary objects list
 	 */
   this.removeTemporaryPrimitive = (object) => {
+    needsRender = true;
     tempGroup.remove(object);
     object.geometry.dispose();
     object.material.dispose();
@@ -1327,6 +1430,7 @@ const Scene = function (containerIn, rendererIn) {
    * Return number of primitives removed;
 	 */
   this.clearTemporaryPrimitives = () => {
+    needsRender = true;
     let i = 0;
     const children = tempGroup.children;
     children.forEach(child => {
@@ -1344,6 +1448,7 @@ const Scene = function (containerIn, rendererIn) {
 	 */
   this.addBoundingBoxPrimitive = (regionPath, group, colour, opacity,
     visibility, boundingBox = undefined) => {
+    needsRender = true;
     let region = rootRegion.findChildFromPath(regionPath);
     if (region === undefined) {
       region = rootRegion.createChildFromPath(regionPath);
@@ -1365,6 +1470,7 @@ const Scene = function (containerIn, rendererIn) {
 	 */
   this.addSlicesPrimitive = (regionPath, groups, colours, opacity,
     visibility, boundingBox = undefined) => {
+    needsRender = true;
     if (groups && groups.length >= 3 &&
       colours && colours.length >= 3) {
       let region = rootRegion.findChildFromPath(regionPath);
@@ -1418,6 +1524,7 @@ const Scene = function (containerIn, rendererIn) {
 	 * Enable marker cluster to work with markers
 	 */
   this.enableMarkerCluster = (flag) => {
+    needsRender = true;
     if (flag) {
       markerCluster.markerUpdateRequired = true;
       markerCluster.enable();
@@ -1432,6 +1539,7 @@ const Scene = function (containerIn, rendererIn) {
 	 * Destory static axis display object
 	 */
   this.destroyAxisDisplay = () => {
+    needsRender = true;
     this.displayMiniAxes = false;
     if (axisDisplay.main) {
       this.enableAxisDisplay(false, false);
@@ -1459,6 +1567,7 @@ const Scene = function (containerIn, rendererIn) {
 	 * Create static axis display object
 	 */
   this.createAxisDisplay = (fitBoundingBox = false) => {
+    needsRender = true;
     this.destroyAxisDisplay();
     const XYZ = [
       {
@@ -1511,6 +1620,7 @@ const Scene = function (containerIn, rendererIn) {
    * before the axis can be display.
 	 */
   this.enableAxisDisplay = (enable, miniaxes = false) => {
+    needsRender = true;
     if (miniaxes && axisDisplay?.mini?.length) {
       this.displayMiniAxes = enable;
       axisDisplay.mini.forEach(axis => {

package/src/sceneExporter.js

@@ -1,5 +1,6 @@
 import { BufferAttribute } from 'three/webgpu';
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter';
+import { useStandardIndexType } from './utilities';
 
 /*
  * GLTFExporter only writes POSITION and NORMAL morph targets. glTF allows
@@ -89,6 +90,8 @@ const SceneExporter = function (sceneIn) {
         glyphsetsToRestore.push(zincObject);
       }
     }
+    //GLTFExporter only accepts plain typed arrays
+    const restoreIndexType = useStandardIndexType(scene.getThreeJSScene());
     const exporter = new GLTFExporter();
     exporter.register(writer => new GLTFMorphColourPlugin(writer));
     const options = { binary, animations, onlyVisible: true };
@@ -106,6 +109,7 @@ const SceneExporter = function (sceneIn) {
           options );
       });
     } finally {
+      restoreIndexType();
       glyphsetsToRestore.forEach(zincObject => zincObject.clearColorExportState());
     }
 	}