perf(GLTFImporter): optimize GLTF loading performance

Author: daker

Sources/IO/Geometry/GLTFImporter/Decoder.js

@@ -8,70 +8,88 @@ import {
 } from 'vtk.js/Sources/IO/Geometry/GLTFImporter/Constants';
 
 function getChunkInfo(headerStart, data) {
+  // Cache array view
   const header = new Uint32Array(data, headerStart, BINARY_CHUNK_HEADER_INTS);
   const chunkStart = headerStart + BINARY_CHUNK_HEADER_INTS * 4;
-  const chunkLength = header[0];
-  const chunkType = header[1];
-  return { start: chunkStart, length: chunkLength, type: chunkType };
+  return {
+    start: chunkStart,
+    length: header[0],
+    type: header[1],
+  };
 }
 
 function getAllChunkInfos(data) {
-  const infos = [];
+  // Pre-calculate array size
+  const maxChunks = Math.floor((data.byteLength - BINARY_HEADER_LENGTH) / 8);
+  const infos = new Array(maxChunks);
   let chunkStart = BINARY_HEADER_INTS * 4;
+  let chunkCount = 0;
+
   while (chunkStart < data.byteLength) {
     const chunkInfo = getChunkInfo(chunkStart, data);
-    infos.push(chunkInfo);
+    infos[chunkCount++] = chunkInfo;
     chunkStart += chunkInfo.length + BINARY_CHUNK_HEADER_INTS * 4;
   }
-  return infos;
+
+  // Trim array to actual size
+  return infos.slice(0, chunkCount);
 }
 
 function getJsonFromChunk(chunkInfo, data) {
-  const chunkLength = chunkInfo.length;
   const jsonStart = (BINARY_HEADER_INTS + BINARY_CHUNK_HEADER_INTS) * 4;
-  const jsonSlice = new Uint8Array(data, jsonStart, chunkLength);
-  const stringBuffer = BinaryHelper.arrayBufferToString(jsonSlice);
-  return JSON.parse(stringBuffer);
+  const jsonView = new Uint8Array(data, jsonStart, chunkInfo.length);
+  const decoder = new TextDecoder('utf-8');
+  const jsonString = decoder.decode(jsonView);
+  return JSON.parse(jsonString);
 }
 
 function getBufferFromChunk(chunkInfo, data) {
   return data.slice(chunkInfo.start, chunkInfo.start + chunkInfo.length);
 }
 
 function parseGLB(data) {
-  let json;
-  const buffers = [];
+  if (data.byteLength < BINARY_HEADER_LENGTH) {
+    throw new Error('Invalid GLB: File too small');
+  }
 
+  // Cache DataView
   const headerView = new DataView(data, 0, BINARY_HEADER_LENGTH);
+  const magic = new Uint8Array(data, 0, 4);
 
   const header = {
-    magic: BinaryHelper.arrayBufferToString(new Uint8Array(data, 0, 4)),
+    magic: BinaryHelper.arrayBufferToString(magic),
     version: headerView.getUint32(4, true),
     length: headerView.getUint32(8, true),
   };
 
   if (header.magic !== BINARY_HEADER_MAGIC) {
     throw new Error('Unsupported glTF-Binary header.');
-  } else if (header.version < 2.0) {
+  }
+  if (header.version < 2.0) {
     throw new Error('Unsupported legacy binary file detected.');
   }
+  if (header.length > data.byteLength) {
+    throw new Error('Invalid GLB: Declared length exceeds file size');
+  }
 
   const chunkInfos = getAllChunkInfos(data);
+  let json = null;
+  const buffers = [];
 
-  chunkInfos.forEach((chunkInfo) => {
+  // Process chunks sequentially
+  for (let i = 0; i < chunkInfos.length; i++) {
+    const chunkInfo = chunkInfos[i];
     if (chunkInfo.type === BINARY_CHUNK_TYPES.JSON && !json) {
       json = getJsonFromChunk(chunkInfo, data);
     } else if (chunkInfo.type === BINARY_CHUNK_TYPES.BIN) {
       buffers.push(getBufferFromChunk(chunkInfo, data));
     }
-  });
+  }
 
   if (!json) {
     throw new Error('glTF-Binary: JSON content not found.');
   }
-  if (!buffers) {
-    throw new Error('glTF-Binary: Binary chunk not found.');
-  }
+
   return { json, buffers };
 }
 

Sources/IO/Geometry/GLTFImporter/ORMTexture.worker.js

@@ -299,30 +299,42 @@ class GLTFParser {
     // WebGLBuffer's using the bufferViews.
     if (accessor.bufferView) {
       const buffer = accessor.bufferView.buffer;
-      const { ArrayType, byteLength } = getAccessorArrayTypeAndLength(
+      const { ArrayType } = getAccessorArrayTypeAndLength(
         accessor,
         accessor.bufferView
       );
-      const byteOffset =
-        (accessor.bufferView.byteOffset || 0) +
-        (accessor.byteOffset || 0) +
-        buffer.byteOffset;
-
-      let slicedBufffer = buffer.arrayBuffer.slice(
-        byteOffset,
-        byteOffset + byteLength
-      );
+      const baseByteOffset =
+        (accessor.bufferView.byteOffset || 0) + buffer.byteOffset;
+      const byteOffset = baseByteOffset + (accessor.byteOffset || 0);
 
+      let arrayBufferView;
       if (accessor.bufferView.byteStride) {
-        slicedBufffer = this.getValueFromInterleavedBuffer(
-          buffer,
+        // Only extract if stride is not equal to element size
+        if (accessor.bufferView.byteStride === accessor.bytesPerElement) {
+          arrayBufferView = new ArrayType(
+            buffer.arrayBuffer,
+            byteOffset,
+            accessor.count * accessor.components
+          );
+        } else {
+          // Interleaved buffer, extract only needed bytes
+          const interleavedBuffer = this.getValueFromInterleavedBuffer(
+            buffer,
+            byteOffset,
+            accessor.bufferView.byteStride,
+            accessor.bytesPerElement,
+            accessor.count
+          );
+          arrayBufferView = new ArrayType(interleavedBuffer);
+        }
+      } else {
+        arrayBufferView = new ArrayType(
+          buffer.arrayBuffer,
           byteOffset,
-          accessor.bufferView.byteStride,
-          accessor.bytesPerElement,
-          accessor.count
+          accessor.count * accessor.components
         );
       }
-      accessor.value = new ArrayType(slicedBufffer);
+      accessor.value = arrayBufferView;
     }
 
     return accessor;

Sources/IO/Geometry/GLTFImporter/Parser.js

@@ -167,6 +167,7 @@ async function createPolyDataFromGLTFMesh(primitive) {
       polyData.setStrips(cells);
       break;
     default:
+      cells.delete();
       vtkWarningMacro('Invalid primitive draw mode. Ignoring connectivity.');
   }
 
@@ -242,14 +243,7 @@ async function createPropertyFromGLTFMaterial(model, material, actor) {
         extensions
       );
 
-      // FIXME: Workaround for textures not showing up in WebGL
-      const viewAPI = model.renderer.getRenderWindow();
-      const isWebGL = viewAPI.getViews()[0].isA('vtkOpenGLRenderWindow');
-      if (isWebGL) {
-        actor.addTexture(diffuseTex);
-      } else {
-        property.setDiffuseTexture(diffuseTex);
-      }
+      property.setDiffuseTexture(diffuseTex);
     }
 
     // Handle metallic-roughness texture (metallicRoughnessTexture)
@@ -271,7 +265,7 @@ async function createPropertyFromGLTFMaterial(model, material, actor) {
       const extensions = material.occlusionTexture.extensions;
       const tex = material.occlusionTexture.texture;
       const sampler = tex.sampler;
-      const aoImage = await loadImage(tex.source, 'r');
+      const aoImage = await loadImage(tex.source);
       const aoTex = createVTKTextureFromGLTFTexture(
         aoImage,
         sampler,
@@ -361,6 +355,8 @@ function handlePrimitiveExtensions(nodeId, extensions, model) {
       case 'KHR_materials_variants':
         model.variantMappings.set(nodeId, extension.mappings);
         break;
+      case 'KHR_draco_mesh_compression':
+        break;
       default:
         vtkWarningMacro(`Unhandled extension: ${extensionName}`);
     }
@@ -376,6 +372,7 @@ async function createActorFromGTLFNode(worldMatrix) {
   const actor = vtkActor.newInstance();
   const mapper = vtkMapper.newInstance();
   mapper.setColorModeToDirectScalars();
+  mapper.setInterpolateScalarsBeforeMapping(true);
   actor.setMapper(mapper);
   actor.setUserMatrix(worldMatrix);
 
@@ -393,6 +390,8 @@ async function createActorFromGTLFPrimitive(model, primitive, worldMatrix) {
   const actor = vtkActor.newInstance();
   const mapper = vtkMapper.newInstance();
   mapper.setColorModeToDirectScalars();
+  mapper.setInterpolateScalarsBeforeMapping(true);
+
   actor.setMapper(mapper);
   actor.setUserMatrix(worldMatrix);
 

Sources/IO/Geometry/GLTFImporter/Reader.js

@@ -1,7 +1,5 @@
-import WebworkerPromise from 'webworker-promise';
 import macro from 'vtk.js/Sources/macros';
 import vtkTexture from 'vtk.js/Sources/Rendering/Core/Texture';
-import Worker from 'vtk.js/Sources/IO/Geometry/GLTFImporter/ORMTexture.worker';
 import {
   BYTES,
   COMPONENTS,
@@ -89,37 +87,16 @@ export function resolveUrl(url, originalPath) {
 /**
  * Loads image from buffer or URI
  * @param {*} image
- * @param {*} channel
  * @returns
  */
-export async function loadImage(image, channel, forceReLoad = false) {
-  // Initialize cache if it doesn't exist
-  if (!image.cache) {
-    image.cache = {};
-  }
-
-  // Return cached result for the channel if available and not forced to reload
-  if (!forceReLoad && image.cache[channel]) {
-    return image.cache[channel];
-  }
-
-  const worker = new WebworkerPromise(new Worker());
-
+export async function loadImage(image) {
   if (image.bufferView) {
-    return worker
-      .postMessage({
-        imageBuffer: image.bufferView.data,
-        mimeType: image.mimeType,
-        channel,
-      })
-      .then((result) => {
-        // Cache the bitmap based on the channel
-        image.cache[channel] = result.bitmap;
-        return result.bitmap;
-      })
-      .finally(() => {
-        worker.terminate();
-      });
+    const blob = new Blob([image.bufferView.data], { type: image.mimeType });
+    const bitmap = await createImageBitmap(blob, {
+      colorSpaceConversion: 'none',
+      imageOrientation: 'flipY',
+    });
+    return bitmap;
   }
 
   if (image.uri) {
@@ -128,7 +105,6 @@ export async function loadImage(image, channel, forceReLoad = false) {
       const img = new Image();
       img.crossOrigin = 'Anonymous';
       img.onload = () => {
-        image.cache[channel] = img; // Cache the loaded image based on the channel
         resolve(img);
       };
       img.onerror = reject;
@@ -189,7 +165,6 @@ export function createVTKTextureFromGLTFTexture(image, sampler, extensions) {
       texture.setEdgeClamp(true);
     }
   }
-
-  texture.setJsImageData(image);
+  texture.setImageBitmap(image);
   return texture;
 }