@kitware/vtk.js 34.0.0-beta.1 → 34.0.0

package/IO/Geometry/GLTFImporter/Decoder.js

@@ -1,65 +1,79 @@
 import BinaryHelper from '../../Core/BinaryHelper.js';
-import { BINARY_HEADER_MAGIC, BINARY_CHUNK_TYPES, BINARY_CHUNK_HEADER_INTS, BINARY_HEADER_LENGTH, BINARY_HEADER_INTS } from './Constants.js';
+import { BINARY_HEADER_LENGTH, BINARY_HEADER_MAGIC, BINARY_CHUNK_TYPES, BINARY_CHUNK_HEADER_INTS, BINARY_HEADER_INTS } from './Constants.js';
 
 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
+    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);
-  chunkInfos.forEach(chunkInfo => {
+  let json = null;
+  const buffers = [];
+
+  // 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

package/IO/Geometry/GLTFImporter/Parser.js

@@ -210,15 +210,24 @@ class GLTFParser {
     if (accessor.bufferView) {
       const buffer = accessor.bufferView.buffer;
       const {
-        ArrayType,
-        byteLength
+        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, byteOffset, accessor.bufferView.byteStride, accessor.bytesPerElement, accessor.count);
+        // 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.count * accessor.components);
       }
-      accessor.value = new ArrayType(slicedBufffer);
+      accessor.value = arrayBufferView;
     }
     return accessor;
   }

package/IO/Geometry/GLTFImporter/Reader.js

@@ -149,6 +149,7 @@ async function createPolyDataFromGLTFMesh(primitive) {
       polyData.setStrips(cells);
       break;
     default:
+      cells.delete();
       vtkWarningMacro('Invalid primitive draw mode. Ignoring connectivity.');
   }
   return polyData;
@@ -198,15 +199,7 @@ async function createPropertyFromGLTFMaterial(model, material, actor) {
       const sampler = tex.sampler;
       const image = await loadImage(tex.source);
       const diffuseTex = createVTKTextureFromGLTFTexture(image, sampler);
-
-      // 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)
@@ -224,7 +217,7 @@ async function createPropertyFromGLTFMaterial(model, material, actor) {
       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);
       property.setAmbientOcclusionTexture(aoTex);
     }
@@ -299,6 +292,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}`);
     }
@@ -314,6 +309,7 @@ async function createActorFromGTLFNode(worldMatrix) {
   const actor = vtkActor.newInstance();
   const mapper = vtkMapper.newInstance();
   mapper.setColorModeToDirectScalars();
+  mapper.setInterpolateScalarsBeforeMapping(true);
   actor.setMapper(mapper);
   actor.setUserMatrix(worldMatrix);
   const polydata = vtkPolyData.newInstance();
@@ -330,6 +326,7 @@ 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);
   const polydata = await createPolyDataFromGLTFMesh(primitive);

package/IO/Geometry/GLTFImporter/Utils.js

@@ -1,7 +1,5 @@
-import WebworkerPromise from 'webworker-promise';
 import { m as macro } from '../../../macros2.js';
 import vtkTexture from '../../../Rendering/Core/Texture.js';
-import { W as WorkerFactory } from '../../../_virtual/rollup-plugin-worker-loader__module_Sources/IO/Geometry/GLTFImporter/ORMTexture.worker.js';
 import { ARRAY_TYPES, COMPONENTS, BYTES, GL_SAMPLER } from './Constants.js';
 
 const {
@@ -83,33 +81,18 @@ function resolveUrl(url, originalPath) {
 /**
  * Loads image from buffer or URI
  * @param {*} image
- * @param {*} channel
  * @returns
  */
-async function loadImage(image, channel) {
-  let forceReLoad = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 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 WorkerFactory());
+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) {
     vtkWarningMacro('Falling back to image uri', image.uri);
@@ -117,7 +100,6 @@ async function loadImage(image, channel) {
       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;
@@ -158,7 +140,7 @@ function createVTKTextureFromGLTFTexture(image, sampler, extensions) {
       texture.setEdgeClamp(true);
     }
   }
-  texture.setJsImageData(image);
+  texture.setImageBitmap(image);
   return texture;
 }
 

package/Rendering/Core/Texture.d.ts

@@ -1,4 +1,5 @@
 import { vtkAlgorithm } from './../../interfaces';
+import { Nullable } from './../../types';
 
 /**
  *
@@ -15,67 +16,110 @@ export interface ITextureInitialValues {
 
 export interface vtkTexture extends vtkAlgorithm {
   /**
-   *
+   * Returns the canvas used by the texture.
+   */
+  getCanvas(): Nullable<HTMLCanvasElement>;
+
+  /**
+   * Returns true if the texture is set to repeat at the edges.
    */
   getRepeat(): boolean;
 
   /**
-   *
+   * Returns true if the texture is set to clamp at the edges.
    */
   getEdgeClamp(): boolean;
 
   /**
-   *
+   * Returns true if the texture is set to interpolate between texels.
    */
   getInterpolate(): boolean;
 
   /**
-   *
+   * Returns the image used by the texture.
+   */
+  getImage(): Nullable<HTMLImageElement>;
+
+  /**
+   * Returns an ImageBitmap object.
    */
-  getImage(): any;
+  getImageBitmap(): Nullable<ImageBitmap>;
 
   /**
-   *
+   * Returns true if the image is loaded.
    */
   getImageLoaded(): boolean;
 
   /**
-   *
+   * Returns the input image data object.
+   */
+  getInputAsJsImageData(): Nullable<
+    ImageData | ImageBitmap | HTMLCanvasElement | HTMLImageElement
+  >;
+
+  /**
+   * Returns the current mip level of the texture.
    */
   getMipLevel(): number;
 
   /**
-   *
-   * @param repeat
-   * @default false
+   * Returns true if the texture can be resized at run time.
+   * This is useful for dynamic textures that may change size based on user
+   * interaction or other factors.
    */
-  setRepeat(repeat: boolean): boolean;
+  getResizable(): boolean;
+
+  /**
+   * Returns the canvas used by the texture.
+   */
+  setCanvas(canvas: HTMLCanvasElement): void;
 
   /**
-   *
+   * Sets the texture to clamp at the edges.
    * @param edgeClamp
    * @default false
    */
   setEdgeClamp(edgeClamp: boolean): boolean;
 
   /**
-   *
+   * Sets the texture to interpolate between texels.
    * @param interpolate
    * @default false
    */
   setInterpolate(interpolate: boolean): boolean;
 
   /**
-   *
+   * Sets the image used by the texture.
    * @param image
    * @default null
    */
-  setImage(image: any): void;
+  setImage(image: HTMLImageElement): void;
 
   /**
+   * Sets the image as an ImageBitmap object.
+   * Supported in WebGPU only.
+   * @param imageBitmap
+   */
+  setImageBitmap(imageBitmap: ImageBitmap): void;
+
+  /**
+   * Sets the input image data as a JavaScript ImageData object.
+   * @param imageData
+   */
+  setJsImageData(imageData: ImageData): void;
+
+  /**
+   * Sets the current mip level of the texture.
    * @param level
    */
   setMipLevel(level: number): boolean;
+
+  /**
+   * Sets the texture to repeat at the edges.
+   * @param repeat
+   * @default false
+   */
+  setRepeat(repeat: boolean): boolean;
 }
 
 /**
@@ -98,26 +142,34 @@ export function extend(
 export function newInstance(initialValues?: ITextureInitialValues): vtkTexture;
 
 /**
- * Method used to create mipmaps from given texture data. Works best with textures that have a
- * width and a height that are powers of two.
+ * Generates mipmaps for a given GPU texture using a compute shader.
+ *
+ * This function iteratively generates each mip level for the provided texture,
+ * using a bilinear downsampling compute shader implemented in WGSL. It creates
+ * the necessary pipeline, bind groups, and dispatches compute passes for each
+ * mip level.
  *
- * @param nativeArray the array of data to create mipmaps from.
- * @param width the width of the data
- * @param height the height of the data
- * @param level the level to which additional mipmaps are generated.
+ * @param {GPUDevice} device - The WebGPU device used to create resources and submit commands.
+ * @param {GPUTexture} texture - The GPU texture for which mipmaps will be generated.
+ * @param {number} mipLevelCount - The total number of mip levels to generate (including the base level).
  */
 export function generateMipmaps(
-  nativeArray: any,
-  width: number,
-  height: number,
-  level: number
+  device: any,
+  texture: any,
+  mipLevelCount: number
 ): Array<Uint8ClampedArray>;
 
 /**
- * vtkTexture is an image algorithm that handles loading and binding of texture maps.
- * It obtains its data from an input image data dataset type.
- * Thus you can create visualization pipelines to read, process, and construct textures.
- * Note that textures will only work if texture coordinates are also defined, and if the rendering system supports texture.
+ * vtkTexture is an image algorithm that handles loading and binding of texture
+ * maps. It obtains its data from an input image data dataset type. Thus you can
+ * create visualization pipelines to read, process, and construct textures. Note
+ * that textures will only work if texture coordinates are also defined, and if
+ * the rendering system supports texture.
+ *
+ * This class is used in both WebGL and WebGPU rendering backends, but the
+ * implementation details may vary. In WebGL, it uses HTMLImageElement and
+ * HTMLCanvasElement for textures, while in WebGPU, it uses HTMLImageElement,
+ * HTMLCanvasElement, and ImageBitmap.
  */
 export declare const vtkTexture: {
   newInstance: typeof newInstance;