zincjs 2.4.1-beta.2 → 2.4.1-beta.4

package/src/primitives/lod.js

@@ -26,6 +26,8 @@ const LOD = function (parent) {
   this._loader = undefined;
   //The owning Zinc Object
   this._parent = parent;
+  //Levels loaded after dispose are discarded
+  this._disposed = false;
 
   /*
    * Add a level of LOD at the specified distance
@@ -182,6 +184,7 @@ const LOD = function (parent) {
   }
 
   this.dispose = () => {
+    this._disposed = true;
     this.levels.forEach((level) => {
       if (level.morph && level.morph.geometry) {
         level.morph.geometry.dispose();
@@ -212,6 +215,10 @@ const LOD = function (parent) {
  */
   this.lodLoader = function (distance) {
     return (geometryIn) => {
+      if (this._disposed) {
+        geometryIn.dispose();
+        return;
+      }
       const material = this._material;
       const options = {
         localTimeEnabled: this._parent.timeEnabled,

package/src/primitives/pointset.js

@@ -3,7 +3,7 @@ import { Label } from './label';
 import { InstancedPoints } from '../three/InstancedPoints';
 import { ZincObject } from './zincObject';
 import { getCircularTexture, toBufferGeometry } from '../utilities';
-import { createInstancedPointsMaterial } from '../tls/pointsMaterial';
+import { createInstancedPointsMaterial } from '../tsl/pointsMaterial';
 
 //Maximum number of points a programmatically built (addPoints) Pointset can
 //hold - the InstancedMesh backing it is allocated once with this capacity.
@@ -26,28 +26,26 @@ const createPointQuadGeometry = (capacity) => {
 
 /**
  * Extract the per time step, flat [x0, y0, z0, x1, y1, z1, ...] position
- * arrays from a (possibly time varying) BufferGeometry. Index 0 is always
- * the base frame, subsequent entries come from `morphAttributes.position`.
+ * arrays from a (possibly time varying) BufferGeometry.
+
  */
 const extractPositionFrames = (geometry, localTimeEnabled) => {
   const positionAttribute = geometry.getAttribute('position');
-  const frames = [Float32Array.from(positionAttribute.array)];
   const morphPositions = geometry.morphAttributes.position;
   if (localTimeEnabled && morphPositions && morphPositions.length > 0) {
     const relative = geometry.morphTargetsRelative;
-    morphPositions.forEach((attribute) => {
-      if (relative) {
-        const frame = new Float32Array(positionAttribute.array.length);
-        for (let i = 0; i < frame.length; i++) {
-          frame[i] = positionAttribute.array[i] + attribute.array[i];
-        }
-        frames.push(frame);
-      } else {
-        frames.push(Float32Array.from(attribute.array));
+    return morphPositions.map((attribute) => {
+      if (!relative) {
+        return Float32Array.from(attribute.array);
       }
+      const frame = new Float32Array(positionAttribute.array.length);
+      for (let i = 0; i < frame.length; i++) {
+        frame[i] = positionAttribute.array[i] + attribute.array[i];
+      }
+      return frame;
     });
   }
-  return frames;
+  return [Float32Array.from(positionAttribute.array)];
 }
 
 /**
@@ -59,14 +57,7 @@ const extractPositionFrames = (geometry, localTimeEnabled) => {
 const extractColorFrames = (geometry, localMorphColour) => {
   const morphColors = geometry.morphAttributes.color;
   if (localMorphColour && morphColors && morphColors.length > 0) {
-    const colorAttribute = geometry.getAttribute('color');
-    const frames = [];
-    frames.push(colorAttribute ? Float32Array.from(colorAttribute.array) :
-      new Float32Array(morphColors[0].array.length));
-    morphColors.forEach((attribute) => {
-      frames.push(Float32Array.from(attribute.array));
-    });
-    return frames;
+    return morphColors.map((attribute) => Float32Array.from(attribute.array));
   }
   return undefined;
 }

package/src/primitives/texturePrimitive.js

@@ -70,4 +70,16 @@ const TexturePrimitive = function (textureIn) {
 
 TexturePrimitive.prototype = Object.create(ZincObject.prototype);
 TexturePrimitive.prototype.constructor = TexturePrimitive;
+
+/**
+ * Free the textures and the other allocated memory.
+ */
+TexturePrimitive.prototype.dispose = function() {
+  const textures = new Set(this.textureList);
+  if (this.texture) textures.add(this.texture);
+  textures.forEach(texture => texture.dispose());
+  this.texture = undefined;
+  this.textureList = [];
+  ZincObject.prototype.dispose.call(this);
+}
 export { TexturePrimitive };

package/src/primitives/textureSlides.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three/webgpu';
 //import * as shader from '../shaders/textureSlide.js';
-import { createWebGPUMaterial } from '../tls/textureSlides.js';
+import { createWebGPUMaterial } from '../tsl/textureSlides.js';
 import { TexturePrimitive } from './texturePrimitive';
 
 
@@ -18,6 +18,8 @@ const cloneData3DTexture = (sourceTex) => {
   targetTex.wrapS = sourceTex.wrapS;
   targetTex.wrapT = sourceTex.wrapT;
   targetTex.wrapR = sourceTex.wrapR;
+  targetTex.colorSpace = sourceTex.colorSpace;
+  targetTex.anisotropy = sourceTex.anisotropy;
   targetTex.needsUpdate = true;
   return targetTex;
 }
@@ -275,6 +277,11 @@ const TextureSlides = function (textureIn) {
       if (slide.material)
         slide.material.dispose();
     });
+    if (maskTexture) {
+      maskTexture.dispose();
+      maskTexture = undefined;
+      maskEnabled = false;
+    }
     TexturePrimitive.prototype.dispose.call(this);
     this.boundingBoxUpdateRequired = true;
   }

package/src/primitives/zincObject.js

@@ -565,6 +565,10 @@ ZincObject.prototype.getBoundingBox = function() {
 ZincObject.prototype.dispose = function() {
   //multilayyers
   this._lod.dispose();
+  if (this.marker) {
+    this.marker.dispose();
+    this.marker = undefined;
+  }
   this.animationGroup = undefined;
   this.mixer = undefined;
   this.morph = undefined;

package/src/region.js

@@ -125,6 +125,15 @@ let Region = function (parentIn, sceneIn) {
     return parent;
   }
 
+  /**
+   * Get the {@link Scene} this region belongs to.
+   *
+   * @return {Scene}
+   */
+  this.getScene = () => {
+    return scene;
+  }
+
   /**
    * Get the array of each hierarachy from the root region to this region.
    *
@@ -436,13 +445,18 @@ let Region = function (parentIn, sceneIn) {
    */
   this.clear = transverse => {
     if (transverse) {
-      children.forEach(childRegion => childRegion.clear(transverse));
+      children.forEach(childRegion => {
+        childRegion.clear(transverse);
+        group.remove(childRegion.getGroup());
+      });
     }
     zincObjects.forEach(zincObject => {
       group.remove(zincObject.getGroup());
       zincObject.dispose();
     });
-    children = [];
+    if (transverse) {
+      children = [];
+    }
     zincObjects = [];
   }
 

package/src/renderer.js

@@ -133,14 +133,20 @@ const Renderer = function (containerIn) {
 			}
       //WebGPURenderer otherwise requests a device with the default
       //maxTextureArrayLayers (256 on many adapters), which is too low for
-      //some currnetly sypported scaffold. We will request the highest possible
-      //on the device
+      //some currnetly sypported scaffold, and the default
+      //maxStorageBuffersPerShaderStage (8 on many adapters), which is too
+      //low for compute passes like glyphset.js's GPU glyph-transform (11
+      //storage buffers). We will request the highest possible on the device
+      //for both.
       if (parameters.device === undefined && parameters.requiredLimits === undefined &&
         typeof navigator !== 'undefined' && navigator.gpu) {
         try {
           const adapter = await navigator.gpu.requestAdapter({ powerPreference: parameters.powerPreference });
           if (adapter) {
-            parameters.requiredLimits = { maxTextureArrayLayers: adapter.limits.maxTextureArrayLayers };
+            parameters.requiredLimits = {
+              maxTextureArrayLayers: adapter.limits.maxTextureArrayLayers,
+              maxStorageBuffersPerShaderStage: adapter.limits.maxStorageBuffersPerShaderStage,
+            };
           }
         } catch (err) {
           //Fall through and let WebGPURenderer's own adapter/device request
@@ -719,10 +725,23 @@ const Renderer = function (containerIn) {
 		}
 	}
 
+  /**
+   * Check if the renderer is running on the WebGL 2 fallback backend.
+   * WebGPURenderer never uses WebGL 1, so this is false when WebGPU is used.
+   *
+   * @return {Boolean}
+   */
   this.isWebGL2 = () => {
-    if (renderer)
-      return renderer.capabilities.isWebGL2;
-    return false;
+    return renderer?.backend?.isWebGLBackend === true;
+  }
+
+  /**
+   * Check if the renderer is running on the WebGPU backend.
+   *
+   * @return {Boolean}
+   */
+  this.isWebGPU = () => {
+    return renderer?.backend?.isWebGPUBackend === true;
   }
 };
 

package/src/scene.js

@@ -9,7 +9,7 @@ import { SceneExporter } from './sceneExporter';
 import { SceneLoader } from './sceneLoader';
 import { Viewport } from './controls';
 import { createPointQuadGeometry } from './primitives/pointset';
-import { createInstancedPointsMaterial } from './tls/pointsMaterial';
+import { createInstancedPointsMaterial } from './tsl/pointsMaterial';
 import {
   createBufferGeometry,
   createNewSpriteText,
@@ -988,8 +988,32 @@ const Scene = function (containerIn, rendererIn) {
     return undefined;
   }
 
+  /**
+   * Check if the renderer is running on the WebGL 2 fallback backend.
+   *
+   * @return {Boolean}
+   */
   this.isWebGL2 = () => {
-    return rendererIn.isWebGL2();
+    return rendererIn?.backend?.isWebGLBackend === true;
+  }
+
+  /**
+   * Check if the renderer is running on the WebGPU backend.
+   *
+   * @return {Boolean}
+   */
+  this.isWebGPU = () => {
+    return rendererIn?.backend?.isWebGPUBackend === true;
+  }
+
+  /**
+   * Get the THREE.WebGPURenderer this scene is being drawn with, for code
+   * that needs to dispatch its own GPU work (e.g. a TSL compute pass).
+   *
+   * @return {THREE.WebGPURenderer}
+   */
+  this.getRenderer = () => {
+    return rendererIn;
   }
 
   /**
@@ -1001,7 +1025,7 @@ const Scene = function (containerIn, rendererIn) {
     rootRegion.clear(true);
     this.clearZincObjectAddedCallbacks();
     this.clearZincObjectRemovedCallbacks();
-    sceneLoader.toBeDwonloaded = 0;
+    sceneLoader.cancelPendingLoads();
     if (zincCameraControls) {
       zincCameraControls.calculateMaxAllowedDistance(this);
     }

package/src/sceneExporter.js

@@ -1,4 +1,49 @@
-import { GLTFExporter } from './three/GLTFExporter';
+import { BufferAttribute } from 'three/webgpu';
+import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter';
+
+/*
+ * GLTFExporter only writes POSITION and NORMAL morph targets. glTF allows
+ * COLOR_n morph targets as well (GLTFLoader reads them), so add them to the
+ * targets the exporter has already written. Like other glTF morph targets
+ * they are stored relative to the base attribute.
+ */
+class GLTFMorphColourPlugin {
+  constructor(writer) {
+    this.writer = writer;
+    this.name = 'ZINC_morph_colour';
+  }
+
+  writeMesh(mesh, meshDef) {
+    const geometry = mesh.geometry;
+    const morphColours = geometry && geometry.morphAttributes ?
+      geometry.morphAttributes.color : undefined;
+    const baseColour = geometry ? geometry.attributes.color : undefined;
+    const primitive = meshDef.primitives ? meshDef.primitives[0] : undefined;
+    if (!morphColours || !baseColour || !primitive || !primitive.targets)
+      return;
+    // All primitives of a mesh share the same targets array.
+    const targets = primitive.targets;
+    const itemSize = baseColour.itemSize;
+    const count = baseColour.count;
+    for (let i = 0; i < targets.length && i < morphColours.length; i++) {
+      const attribute = morphColours[i];
+      if (attribute.itemSize !== itemSize || attribute.count < count) {
+        console.warn('GLTFExporter: Colour morph target does not match the base colour, skipped.');
+        return;
+      }
+      const array = new Float32Array(count * itemSize);
+      for (let j = 0; j < count; j++) {
+        for (let a = 0; a < itemSize; a++) {
+          const value = attribute.getComponent(j, a);
+          array[j * itemSize + a] = geometry.morphTargetsRelative ?
+            value : value - baseColour.getComponent(j, a);
+        }
+      }
+      targets[i].COLOR_0 = this.writer.processAccessor(
+        new BufferAttribute(array, itemSize), geometry);
+    }
+  }
+}
 
 /**
  * Provides an object which uses for exporting the scene
@@ -10,22 +55,59 @@ import { GLTFExporter } from './three/GLTFExporter';
 const SceneExporter = function (sceneIn) {
   const scene = sceneIn;
 
-	this.exportGLTF = (binary) => {
+  // Matches the exporter's onlyVisible pruning - animations targeting a
+  // hidden node would otherwise produce channels with no target node.
+  const isVisible = (object) => {
+    for (let current = object; current; current = current.parent) {
+      if (current.visible === false) return false;
+    }
+    return true;
+  };
+
+	this.exportGLTF = async (binary) => {
     const rootRegion = scene.getRootRegion();
     const zincObjects = rootRegion.getAllObjects(true);
     const animations = [];
-    zincObjects.forEach(zincObject => {
-      if (zincObject.animationClip) {
-        animations.push({clip: zincObject.animationClip[0], mesh: zincObject.getMorph()});
+    const glyphsetsToRestore = [];
+    for (const zincObject of zincObjects) {
+      if (zincObject.animationClip && zincObject.animationClip[0]) {
+        const mesh = zincObject.getMorph();
+        if (mesh && isVisible(mesh)) {
+          // The exporter resolves tracks against the scene root, but morph
+          // clips target '' (the mesh itself), so retarget them by uuid.
+          const clip = zincObject.animationClip[0].clone();
+          clip.tracks.forEach(track => { track.name = mesh.uuid + track.name; });
+          animations.push(clip);
+        }
+      }
+      // Glyphsets with GPU-compute-driven colour intentionally keep
+      // instanceColor null during normal rendering (see glyphset.js's
+      // prepareColorForExport() for why) - populate it just for this
+      // export, then undo it again afterwards.
+      if (zincObject.isGlyphset && zincObject.prepareColorForExport) {
+        await zincObject.prepareColorForExport();
+        glyphsetsToRestore.push(zincObject);
       }
-    });
+    }
     const exporter = new GLTFExporter();
-    const options = { binary, animations };
-    return new Promise((resolve, reject) => {
-      exporter.parse( scene.getThreeJSScene(), function ( gltf ) {
-        resolve(gltf);
-      }, options );
-    });
+    exporter.register(writer => new GLTFMorphColourPlugin(writer));
+    const options = { binary, animations, onlyVisible: true };
+    try {
+      return await new Promise((resolve, reject) => {
+        exporter.parse(
+          scene.getThreeJSScene(),
+          function ( gltf ) {
+            resolve(gltf);
+          },
+          function ( error ) {
+            console.error("Unable to export GLTF.", error);
+            reject(error);
+          },
+          options );
+      });
+    } finally {
+      glyphsetsToRestore.forEach(zincObject => zincObject.clearColorExportState());
+    }
 	}
 }
 

package/src/sceneLoader.js

@@ -27,7 +27,30 @@ const SceneLoader = function (sceneIn) {
   this.progressMap = {};
   let viewLoaded = false;
   let errorDownload = false;
+  //Incremented when pending loads are cancelled, loads requested
+  //before the increment are discarded once they complete.
+  let generation = 0;
   const primitivesLoader = new PrimitivesLoader();
+
+  /**
+   * Cancel all pending downloads, objects from the cancelled downloads
+   * will be discarded instead of being added into the scene once they
+   * arrive.
+   */
+  this.cancelPendingLoads = () => {
+    generation++;
+    this.toBeDownloaded = 0;
+    this.progressMap = {};
+    viewLoaded = false;
+    errorDownload = false;
+  }
+
+  //Return a function which returns true if the loads requested before
+  //this call have been cancelled.
+  const createStaleCheck = () => {
+    const requestGeneration = generation;
+    return () => requestGeneration !== generation;
+  }
   /**
    * This function returns a three component array, which contains
    * [totalsize, totalLoaded and errorDownload] of all the downloads happening
@@ -62,7 +85,9 @@ const SceneLoader = function (sceneIn) {
   }
 
   this.onError = finishCallback => {
+    const isStale = createStaleCheck();
     return xhr => {
+      if (isStale()) return;
       this.toBeDownloaded = this.toBeDownloaded - 1;
       errorDownload = true;
       console.error(`There is an issue with external resource ${xhr?.responseURL ? ": " +  xhr?.responseURL: ""}.`);
@@ -116,6 +141,7 @@ const SceneLoader = function (sceneIn) {
   this.loadViewURL = (url, finishCallback) => {
     this.toBeDownloaded += 1;
     const requestURL = url;
+    const isStale = createStaleCheck();
     fetch(requestURL)
       .then((response) => {
         if (!response.ok) {
@@ -124,6 +150,7 @@ const SceneLoader = function (sceneIn) {
         return response.json();
       })
       .then((viewData) => {
+        if (isStale()) return;
         scene.setupMultipleViews("default", { "default" : viewData });
         scene.resetView();
         viewLoaded = true;
@@ -176,6 +203,7 @@ const SceneLoader = function (sceneIn) {
    */
   this.loadFromViewURL = (targetRegion, jsonFilePrefix, finishCallback) => {
     const requestURL = jsonFilePrefix + "_view.json";
+    const isStale = createStaleCheck();
     fetch(requestURL)
     .then((response) => {
       if (!response.ok) {
@@ -184,6 +212,7 @@ const SceneLoader = function (sceneIn) {
       return response.json();
     })
     .then((viewData) => {
+      if (isStale()) return;
       scene.loadView(viewData);
       const urls = [];
       const filename_prefix = jsonFilePrefix + "_";
@@ -209,7 +238,12 @@ const SceneLoader = function (sceneIn) {
   //Internal loader for a regular zinc geometry.
   const linesloader = (region, localTimeEnabled, localMorphColour, groupName,
     anatomicalId, renderOrder, lod, tubeLines, finishCallback) => {
+      const isStale = createStaleCheck();
       return (geometry, materials) => {
+      if (isStale()) {
+        geometry.dispose();
+        return;
+      }
       const newLines = tubeLines ? new TubeLines() : new Lines();
       let material = undefined;
       if (materials && materials[0]) {
@@ -276,7 +310,9 @@ const SceneLoader = function (sceneIn) {
   }
 
   const glyphsetloader = (region, glyphurl, groupName, finishCallback, options) => {
+    const isStale = createStaleCheck();
     return (data) => {
+      if (isStale()) return;
       let glyphsetData = data;
       if (typeof glyphsetData === 'string' || glyphsetData instanceof String) {
         glyphsetData = JSON.parse(data);
@@ -292,6 +328,7 @@ const SceneLoader = function (sceneIn) {
       newGlyphset.setDuration(scene.getDuration());
       newGlyphset.groupName = groupName;
       let myCallback = () => {
+        if (isStale()) return;
         --this.toBeDownloaded;
         if (finishCallback != undefined && (typeof finishCallback == 'function'))
           finishCallback(newGlyphset);
@@ -358,7 +395,12 @@ const SceneLoader = function (sceneIn) {
 
   //Internal loader for zinc pointset.
   const pointsetloader = (region, localTimeEnabled, localMorphColour, groupName, anatomicalId, renderOrder, finishCallback) => {
+    const isStale = createStaleCheck();
     return (geometry, materials) => {
+      if (isStale()) {
+        geometry.dispose();
+        return;
+      }
       const newPointset = new Pointset();
       let material = new THREE.PointsMaterial(
         {
@@ -554,7 +596,12 @@ const SceneLoader = function (sceneIn) {
       }
       if (newTexture) {
         newTexture.groupName = groupName;
+        const isStale = createStaleCheck();
         let myCallback = () => {
+          if (isStale()) {
+            newTexture.dispose();
+            return;
+          }
           //Add zincObject after it has sort out all the required download
           region.addZincObject(newTexture);
           --this.toBeDownloaded;
@@ -582,6 +629,7 @@ const SceneLoader = function (sceneIn) {
       loadTexture(region, undefined, url, groupName, finishCallback, options);
     } else {
       const requestURL = url;
+      const isStale = createStaleCheck();
       fetch(requestURL)
       .then((response) => {
         if (!response.ok) {
@@ -591,6 +639,7 @@ const SceneLoader = function (sceneIn) {
         return response.json().then((textureData) => ({ textureData, referenceURL }));
       })
       .then(({textureData, referenceURL}) => {
+        if (isStale()) return;
         loadTexture(region, referenceURL, textureData, groupName, finishCallback, options);
       })
       .catch((error) => {
@@ -662,7 +711,12 @@ const SceneLoader = function (sceneIn) {
     options,
     finishCallback
   ) => {
+    const isStale = createStaleCheck();
     return (geometry, materials) => {
+      if (isStale()) {
+        geometry.dispose();
+        return;
+      }
       let material = undefined;
       if (materials && materials[0]) {
         material = materials[0];
@@ -831,7 +885,8 @@ const SceneLoader = function (sceneIn) {
    */
   this.loadGLTF = (region, url, finishCallback, allCompletedCallback, options) => {
     const loader = new GLTFToZincJSLoader();
-    loader.load(scene, region, url, finishCallback, allCompletedCallback, options);
+    loader.load(scene, region, url, finishCallback, allCompletedCallback, options,
+      createStaleCheck());
   }
 
   let loadRegions = (currentRegion, referenceURL, regions, callback) => {
@@ -993,6 +1048,7 @@ const SceneLoader = function (sceneIn) {
     */
   this.loadMetadataURL = (targetRegion, url, finishCallback, allCompletedCallback, options) => {
     const requestURL = url;
+    const isStale = createStaleCheck();
     fetch(requestURL)
       .then((response) => {
         if (!response.ok) {
@@ -1002,6 +1058,7 @@ const SceneLoader = function (sceneIn) {
         return response.json().then((metadata) => ({ metadata, referenceURL }));
       })
       .then(({metadata, referenceURL}) => {
+        if (isStale()) return;
         scene.resetMetadata();
         scene.resetDuration();
         viewLoaded = false;

package/src/texture/texture.js

@@ -70,6 +70,16 @@ Texture.prototype.loadFromImages = async function (srcArrays) {
   return
 }
 
+/**
+ * Free the memory allocated for this texture.
+ */
+Texture.prototype.dispose = function () {
+  if (this.impl) {
+    this.impl.dispose();
+    this.impl = undefined;
+  }
+}
+
 /**
  * Return true if the texture is ready for consumption.
  *

package/src/texture/textureArray.js

@@ -121,4 +121,13 @@ const TextureArray = function () {
 }
 
 TextureArray.prototype = Object.create(Texture.prototype);
+
+/**
+ * Free the memory allocated for this texture array.
+ */
+TextureArray.prototype.dispose = function () {
+  Texture.prototype.dispose.call(this);
+  this.imageData = undefined;
+}
+
 export { TextureArray };

package/src/tsl/glyphRenderMaterial.js

@@ -0,0 +1,53 @@
+import * as THREE from 'three/webgpu';
+import { Fn, instanceIndex, positionGeometry, materialColor, materialOpacity, vec4 } from 'three/tsl';
+import { NODE_MATERIAL_CLASSES } from './morphColorMaterial';
+
+/**
+ * Builds a NodeMaterial that renders each glyph instance's transform and
+ * colour read directly from a glyphCompute's (see ../tsl/glyphTransform.js)
+ * GPU output buffers, via a custom positionNode/colorNode - i.e. no
+ * instanceMatrix/instanceColor CPU sync is involved in producing what gets
+ * drawn. This is what lets Glyphset render every frame of an animation
+ * straight from the compute pass's output with zero GPU->CPU readback.
+ *
+ * Per NodeMaterial.setupPosition(), setting `positionNode` fully replaces
+ * (not composes with) the automatic per-instance instanceMatrix transform a
+ * stock THREE.InstancedMesh would otherwise apply - so instanceMatrix is
+ * simply irrelevant to rendering once this is set, no double-transform risk.
+ * (instanceMatrix is still kept in sync separately, when paused, purely so
+ * Glyphset's existing bounding-box/raycast code - which does need a
+ * CPU-side transform to read - keeps working unmodified.)
+ *
+ * @param {THREE.Material} sourceMaterial - the material JSONLoader produced
+ *   for this glyph geometry; converted to its NodeMaterial equivalent.
+ * @param {Object} glyphCompute - return value of createGlyphTransformCompute().
+ * @returns {THREE.NodeMaterial}
+ */
+function createGlyphInstancedMaterial(sourceMaterial, glyphCompute) {
+  let material = sourceMaterial;
+  if (!material || !material.isNodeMaterial) {
+    const NodeMaterialClass = (sourceMaterial && NODE_MATERIAL_CLASSES[sourceMaterial.type]) || THREE.MeshPhongNodeMaterial;
+    material = new NodeMaterialClass();
+    if (sourceMaterial) material.copy(sourceMaterial);
+  }
+
+  const { position, axis1, axis2, axis3, color } = glyphCompute.outputs;
+
+  material.positionNode = Fn(() => {
+    const idx = instanceIndex;
+    return position.element(idx)
+      .add(axis1.element(idx).mul(positionGeometry.x))
+      .add(axis2.element(idx).mul(positionGeometry.y))
+      .add(axis3.element(idx).mul(positionGeometry.z));
+  })();
+
+  if (color) {
+    material.colorNode = Fn(() => {
+      return vec4(color.element(instanceIndex).mul(materialColor), materialOpacity);
+    })();
+  }
+
+  return material;
+}
+
+export { createGlyphInstancedMaterial };