@loaders.gl/tile-converter 3.3.0-alpha.8 → 3.3.0

package/src/i3s-converter/helpers/geometry-converter.ts

@@ -17,12 +17,14 @@ import {DracoWriterWorker} from '@loaders.gl/draco';
 import {assert, encode} from '@loaders.gl/core';
 import {concatenateArrayBuffers, concatenateTypedArrays} from '@loaders.gl/loader-utils';
 import md5 from 'md5';
+import {v4 as uuidv4} from 'uuid';
 import {generateAttributes} from './geometry-attributes';
 import {createBoundingVolumesFromGeometry} from './coordinate-converter';
 import {
   ConvertedAttributes,
   I3SConvertedResources,
   I3SMaterialWithTexture,
+  MergedMaterial,
   SharedResourcesArrays
 } from '../types';
 import {
@@ -68,33 +70,38 @@ let scratchVector = new Vector3();
  *
  * @param tileContent - 3d tile content
  * @param addNodeToNodePage - function to add new node to node pages
+ * @param propertyTable - batch table (corresponding to feature attributes data)
  * @param featuresHashArray - hash array of features that is needed to not to mix up same features in parent and child nodes
  * @param attributeStorageInfo - attributes metadata from 3DSceneLayer json
  * @param draco - is converter should create draco compressed geometry
  * @param generateBoundingVolumes - is converter should create accurate bounding voulmes from geometry attributes
+ * @param shouldMergeMaterials - Try to merge similar materials to be able to merge meshes into one node
  * @param geoidHeightModel - model to convert elevation from elipsoidal to geoid
+ * @param workerSource - source code of used workers
  * @returns Array of node resources to create one or more i3s nodes
  */
 export default async function convertB3dmToI3sGeometry(
   tileContent: B3DMContent,
-  addNodeToNodePage: () => number,
+  addNodeToNodePage: () => Promise<number>,
   propertyTable: FeatureTableJson | null,
   featuresHashArray: string[],
   attributeStorageInfo: AttributeStorageInfo[] | undefined,
   draco: boolean,
   generateBoundingVolumes: boolean,
+  shouldMergeMaterials: boolean,
   geoidHeightModel: Geoid,
   workerSource: {[key: string]: string}
 ): Promise<I3SConvertedResources[] | null> {
   const useCartesianPositions = generateBoundingVolumes;
-  const materialAndTextureList: I3SMaterialWithTexture[] = convertMaterials(
-    tileContent.gltf?.materials
+  const materialAndTextureList: I3SMaterialWithTexture[] = await convertMaterials(
+    tileContent.gltf?.materials,
+    shouldMergeMaterials
   );
 
   const dataForAttributesConversion = prepareDataForAttributesConversion(tileContent);
-
   const convertedAttributesMap: Map<string, ConvertedAttributes> = await convertAttributes(
     dataForAttributesConversion,
+    materialAndTextureList,
     useCartesianPositions
   );
   /** Usage of worker here brings more overhead than advantage */
@@ -110,28 +117,18 @@ export default async function convertB3dmToI3sGeometry(
     _generateBoundingVolumesFromGeometry(convertedAttributesMap, geoidHeightModel);
   }
 
-  if (convertedAttributesMap.has('default')) {
-    materialAndTextureList.push({
-      material: getDefaultMaterial()
-    });
-  }
-
   const result: I3SConvertedResources[] = [];
-  let {materials = []} = tileContent.gltf || {materials: []};
-  if (!materials?.length) {
-    materials.push({id: 'default'});
-  }
-  for (let i = 0; i < materials.length; i++) {
-    const sourceMaterial = materials[i];
-    if (!convertedAttributesMap.has(sourceMaterial.id)) {
+  for (const materialAndTexture of materialAndTextureList) {
+    const originarMaterialId = materialAndTexture.mergedMaterials[0].originalMaterialId;
+    if (!convertedAttributesMap.has(originarMaterialId)) {
       continue; // eslint-disable-line no-continue
     }
-    const convertedAttributes = convertedAttributesMap.get(sourceMaterial.id);
+    const convertedAttributes = convertedAttributesMap.get(originarMaterialId);
     if (!convertedAttributes) {
       continue;
     }
-    const {material, texture} = materialAndTextureList[i];
-    const nodeId = addNodeToNodePage();
+    const {material, texture} = materialAndTexture;
+    const nodeId = await addNodeToNodePage();
     result.push(
       await _makeNodeResources({
         convertedAttributes,
@@ -192,8 +189,10 @@ function _generateBoundingVolumesFromGeometry(
  * @param params.tileContent - B3DM decoded content
  * @param params.nodeId - new node ID
  * @param params.featuresHashArray - hash array of features that is needed to not to mix up same features in parent and child nodes
- * @param params.attributesStorageInfo - attributes metadata from 3DSceneLayer json
+ * @param params.propertyTable - batch table (corresponding to feature attributes data)
+ * @param params.attributeStorageInfo - attributes metadata from 3DSceneLayer json
  * @param params.draco - is converter should create draco compressed geometry
+ * @param params.workerSource - source code of used workers
  * @returns Array of I3S node resources
  */
 async function _makeNodeResources({
@@ -221,7 +220,7 @@ async function _makeNodeResources({
 }): Promise<I3SConvertedResources> {
   const boundingVolumes = convertedAttributes.boundingVolumes;
   const vertexCount = convertedAttributes.positions.length / VALUES_PER_VERTEX;
-  const {faceRange, featureIds, positions, normals, colors, texCoords, featureCount} =
+  const {faceRange, featureIds, positions, normals, colors, uvRegions, texCoords, featureCount} =
     generateAttributes(convertedAttributes);
 
   if (tileContent.batchTableJson) {
@@ -244,6 +243,7 @@ async function _makeNodeResources({
       normals.buffer,
       texture ? texCoords.buffer : new ArrayBuffer(0),
       colors.buffer,
+      uvRegions,
       typedFeatureIds.buffer,
       faceRange.buffer
     )
@@ -257,6 +257,7 @@ async function _makeNodeResources({
           normals,
           texCoords: texture ? texCoords : new Float32Array(0),
           colors,
+          uvRegions,
           featureIds,
           faceRange
         },
@@ -279,6 +280,7 @@ async function _makeNodeResources({
     geometry: fileBuffer,
     compressedGeometry,
     texture,
+    hasUvRegions: Boolean(uvRegions.length),
     sharedResources: getSharedResources(tileContent.gltf?.materials || [], nodeId),
     meshMaterial: material,
     vertexCount,
@@ -290,28 +292,35 @@ async function _makeNodeResources({
 
 /**
  * Convert attributes from the gltf nodes tree to i3s plain geometry
- * @param tileContent - 3d tile content
+ * @param attributesData - geometry attributes from gltf
+ * @param materialAndTextureList - array of data about materials and textures of the content
  * @param useCartesianPositions - convert positions to absolute cartesian coordinates instead of cartographic offsets.
  * Cartesian coordinates will be required for creating bounding voulmest from geometry positions
  * @returns map of converted geometry attributes
  */
 export async function convertAttributes(
   attributesData: B3DMAttributesData,
+  materialAndTextureList: I3SMaterialWithTexture[],
   useCartesianPositions: boolean
 ): Promise<Map<string, ConvertedAttributes>> {
-  const {gltfMaterials, nodes, images, cartographicOrigin, cartesianModelMatrix} = attributesData;
+  const {nodes, images, cartographicOrigin, cartesianModelMatrix} = attributesData;
   const attributesMap = new Map<string, ConvertedAttributes>();
 
-  for (const material of gltfMaterials || [{id: 'default'}]) {
-    attributesMap.set(material.id, {
+  for (const materialAndTexture of materialAndTextureList) {
+    const attributes = {
       positions: new Float32Array(0),
       normals: new Float32Array(0),
       texCoords: new Float32Array(0),
       colors: new Uint8Array(0),
+      uvRegions: new Uint16Array(0),
       featureIndicesGroups: [],
       featureIndices: [],
-      boundingVolumes: null
-    });
+      boundingVolumes: null,
+      mergedMaterials: materialAndTexture.mergedMaterials
+    };
+    for (const mergedMaterial of materialAndTexture.mergedMaterials) {
+      attributesMap.set(mergedMaterial.originalMaterialId, attributes);
+    }
   }
 
   convertNodes(
@@ -348,7 +357,8 @@ export async function convertAttributes(
  *   The goal is applying tranformation matrix for all children. Functions "convertNodes" and "convertNode" work together recursively.
  * @param nodes - gltf nodes array
  * @param images - gltf images array
- * @param tileContent - 3d tile content
+ * @param cartographicOrigin - cartographic origin of bounding volume
+ * @param cartesianModelMatrix - cartesian model matrix to convert coordinates to cartographic
  * @param attributesMap - for recursive concatenation of attributes
  * @param useCartesianPositions - convert positions to absolute cartesian coordinates instead of cartographic offsets.
  * Cartesian coordinates will be required for creating bounding voulmest from geometry positions
@@ -385,7 +395,7 @@ function convertNodes(
  * @param node
  * @param matrix
  */
-function getCompositeTransformationMatrix(node, matrix) {
+function getCompositeTransformationMatrix(node: GLTFNodePostprocessed, matrix: Matrix4) {
   let transformationMatrix = matrix;
 
   const {matrix: nodeMatrix, rotation, scale, translation} = node;
@@ -413,7 +423,8 @@ function getCompositeTransformationMatrix(node, matrix) {
  * Convert all primitives of node and all children nodes
  * @param node - gltf node
  * @param images - gltf images array
- * @param {Object} tileContent - 3d tile content
+ * @param cartographicOrigin - cartographic origin of bounding volume
+ * @param cartesianModelMatrix - cartesian model matrix to convert coordinates to cartographic
  * @param {Map} attributesMap Map<{positions: Float32Array, normals: Float32Array, texCoords: Float32Array, colors: Uint8Array, featureIndices: Array}> - for recursive concatenation of
  *   attributes
  * @param useCartesianPositions - convert positions to absolute cartesian coordinates instead of cartographic offsets.
@@ -457,9 +468,13 @@ function convertNode(
 }
 
 /**
- * Convert all primitives of node and all children nodes
- * @param mesh - gltf node
- * @param content - 3d tile content
+ * Convert all primitives of the mesh
+ * @param mesh - gltf mesh data
+ * @param images - gltf images array
+ * @param cartographicOrigin - cartographic origin of bounding volume
+ * @param cartesianModelMatrix - cartesian model matrix to convert coordinates to cartographic
+ * @param attributesMap Map<{positions: Float32Array, normals: Float32Array, texCoords: Float32Array, colors: Uint8Array, featureIndices: Array}> - for recursive concatenation of
+ *   attributes
  * @param useCartesianPositions - convert positions to absolute cartesian coordinates instead of cartographic offsets. 
  * Cartesian coordinates will be required for creating bounding voulmest from geometry positions
  * @param attributesMap Map<{positions: Float32Array, normals: Float32Array, texCoords: Float32Array, colors: Uint8Array, featureIndices: Array}> - for recursive concatenation of
@@ -478,8 +493,12 @@ function convertMesh(
 ) {
   for (const primitive of mesh.primitives) {
     let outputAttributes: ConvertedAttributes | null | undefined = null;
+    let materialUvRegion: Uint16Array | undefined;
     if (primitive.material) {
-      outputAttributes = attributesMap.get(primitive.material.id);
+      outputAttributes = attributesMap.get(primitive.material.uniqueId);
+      materialUvRegion = outputAttributes?.mergedMaterials.find(
+        ({originalMaterialId}) => originalMaterialId === primitive.material?.uniqueId
+      )?.uvRegion;
     } else if (attributesMap.has('default')) {
       outputAttributes = attributesMap.get('default');
     }
@@ -525,6 +544,13 @@ function convertMesh(
       flattenColors(attributes.COLOR_0, primitive.indices?.value)
     );
 
+    if (materialUvRegion) {
+      outputAttributes.uvRegions = concatenateTypedArrays(
+        outputAttributes.uvRegions,
+        createUvRegion(materialUvRegion, primitive.indices?.value)
+      );
+    }
+
     outputAttributes.featureIndicesGroups = outputAttributes.featureIndicesGroups || [];
     outputAttributes.featureIndicesGroups.push(
       flattenBatchIds(getBatchIds(attributes, primitive, images), primitive.indices?.value)
@@ -675,6 +701,20 @@ function flattenColors(
   return newColors;
 }
 
+/**
+ * Create per-vertex uv-region array
+ * @param materialUvRegion - uv-region fragment for a single vertex
+ * @param indices - geometry indices data
+ * @returns - uv-region array
+ */
+function createUvRegion(materialUvRegion: Uint16Array, indices: Uint8Array): Uint16Array {
+  const result = new Uint16Array(indices.length * 4);
+  for (let i = 0; i < result.length; i += 4) {
+    result.set(materialUvRegion, i);
+  }
+  return result;
+}
+
 /**
  * Flatten batchedIds list based on indices to right ordered array, compatible with i3s
  * @param batchedIds - gltf primitive
@@ -695,9 +735,9 @@ function flattenBatchIds(batchedIds: number[], indices: Uint8Array): number[] {
 
 /**
  * Get batchIds for featureIds creation
- * @param attributes
- * @param primitive
- * @param textures
+ * @param attributes - gltf accessors
+ * @param primitive - gltf primitive data
+ * @param images - gltf texture images
  */
 function getBatchIds(
   attributes: {
@@ -728,18 +768,134 @@ function getBatchIds(
 /**
  * Convert GLTF material to I3S material definitions and textures
  * @param sourceMaterials Source GLTF materials
+ * @param shouldMergeMaterials - if true - the converter will try to merge similar materials
+ *                               to be able to merge primitives having those materials
  * @returns Array of Couples I3SMaterialDefinition + texture content
  */
-function convertMaterials(
-  sourceMaterials: GLTFMaterialPostprocessed[] = []
-): I3SMaterialWithTexture[] {
-  const result: I3SMaterialWithTexture[] = [];
+async function convertMaterials(
+  sourceMaterials: GLTFMaterialPostprocessed[] = [],
+  shouldMergeMaterials: boolean
+): Promise<I3SMaterialWithTexture[]> {
+  let materials: I3SMaterialWithTexture[] = [];
   for (const sourceMaterial of sourceMaterials) {
-    result.push(convertMaterial(sourceMaterial));
+    materials.push(convertMaterial(sourceMaterial));
+  }
+
+  if (shouldMergeMaterials) {
+    materials = await mergeAllMaterials(materials);
+  }
+
+  return materials;
+}
+
+/**
+ * Merge materials when possible
+ * @param materials materials array
+ * @returns merged materials array
+ */
+async function mergeAllMaterials(
+  materials: I3SMaterialWithTexture[]
+): Promise<I3SMaterialWithTexture[]> {
+  const result: I3SMaterialWithTexture[] = [];
+  while (materials.length > 0) {
+    let newMaterial = materials.splice(0, 1)[0];
+    const mergedIndices: number[] = [];
+    for (let i = 0; i < materials.length; i++) {
+      const material = materials[i];
+      if (
+        (newMaterial.texture && material.texture) ||
+        (!newMaterial.texture && !material.texture)
+      ) {
+        newMaterial = await mergeMaterials(newMaterial, material);
+        mergedIndices.push(i);
+      }
+    }
+    if (newMaterial.texture && mergedIndices.length) {
+      const newWidth = newMaterial.mergedMaterials?.reduce(
+        (accum, {textureSize}) => accum + (textureSize?.width || 0),
+        0
+      );
+      const newHeight = newMaterial.mergedMaterials?.reduce(
+        (accum, {textureSize}) => Math.max(accum, textureSize?.height || 0),
+        0
+      );
+      let currentX = -1;
+      for (const aTextureMetadata of newMaterial.mergedMaterials) {
+        if (aTextureMetadata.textureSize) {
+          const newX =
+            currentX +
+            1 +
+            (aTextureMetadata.textureSize.width / newWidth) *
+              2 ** (Uint16Array.BYTES_PER_ELEMENT * 8) -
+            1;
+          aTextureMetadata.uvRegion = new Uint16Array([
+            currentX + 1,
+            0,
+            newX,
+            (aTextureMetadata.textureSize.height / newHeight) *
+              2 ** (Uint16Array.BYTES_PER_ELEMENT * 8) -
+              1
+          ]);
+          currentX = newX;
+        }
+      }
+
+      newMaterial.texture.image.width = newWidth;
+      newMaterial.texture.image.height = newHeight;
+    }
+    for (const index of mergedIndices.reverse()) {
+      materials.splice(index, 1);
+    }
+    result.push(newMaterial);
+  }
+
+  if (!result.length) {
+    result.push({
+      material: getDefaultMaterial(),
+      mergedMaterials: [{originalMaterialId: 'default'}]
+    });
   }
   return result;
 }
 
+/**
+ * Merge 2 materials including texture
+ * @param material1
+ * @param material2
+ * @returns
+ */
+async function mergeMaterials(
+  material1: I3SMaterialWithTexture,
+  material2: I3SMaterialWithTexture
+): Promise<I3SMaterialWithTexture> {
+  if (
+    material1.texture?.bufferView &&
+    material2.texture?.bufferView &&
+    material1.mergedMaterials &&
+    material2.mergedMaterials
+  ) {
+    const buffer1 = Buffer.from(material1.texture.bufferView.data);
+    const buffer2 = Buffer.from(material2.texture.bufferView.data);
+    try {
+      // @ts-ignore
+      const {joinImages} = await import('join-images');
+      const sharpData = await joinImages([buffer1, buffer2], {direction: 'horizontal'});
+      material1.texture.bufferView.data = await sharpData
+        .toFormat(material1.texture.mimeType === 'image/png' ? 'png' : 'jpeg')
+        .toBuffer();
+    } catch (error) {
+      console.log(
+        'Join images into a texture atlas has failed. Consider usage `--split-nodes` option. (See documentation https://loaders.gl/modules/tile-converter/docs/cli-reference/tile-converter)'
+      );
+      throw error;
+    }
+    // @ts-ignore
+    material1.material.pbrMetallicRoughness.baseColorTexture.textureSetDefinitionId = 1;
+  }
+  material1.mergedMaterials = material1.mergedMaterials.concat(material2.mergedMaterials);
+  return material1;
+}
+
 /**
  * Convert texture and material from gltf 2.0 material object
  * @param sourceMaterial - material object
@@ -778,6 +934,9 @@ function convertMaterial(sourceMaterial: GLTFMaterialPostprocessed): I3SMaterial
     };
   }
 
+  const uniqueId = uuidv4();
+  sourceMaterial.uniqueId = uniqueId;
+  let mergedMaterials: MergedMaterial[] = [{originalMaterialId: uniqueId}];
   if (!texture) {
     // Should use default baseColorFactor if it is not present in source material
     // https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#reference-pbrmetallicroughness
@@ -789,9 +948,11 @@ function convertMaterial(sourceMaterial: GLTFMaterialPostprocessed): I3SMaterial
         number,
         number
       ]) || undefined;
+  } else {
+    mergedMaterials[0].textureSize = {width: texture.image.width, height: texture.image.height};
   }
 
-  return {material, texture};
+  return {material, texture, mergedMaterials};
 }
 
 /**
@@ -968,13 +1129,13 @@ function extractSharedResourcesTextureInfo(
 }
 
 /**
- * Formula for counting imageId:
+ * Formula for calculating imageId:
  * https://github.com/Esri/i3s-spec/blob/0a6366a9249b831db8436c322f8d27521e86cf07/format/Indexed%203d%20Scene%20Layer%20Format%20Specification.md#generating-image-ids
  * @param texture - texture image info
  * @param nodeId - I3S node ID
  * @returns calculate image ID according to the spec
  */
-function generateImageId(texture: GLTFTexturePostprocessed, nodeId) {
+function generateImageId(texture: GLTFTexturePostprocessed, nodeId: number) {
   const {width, height} = texture.source?.image;
   const levelCountOfTexture = 1;
   const indexOfLevel = 0;
@@ -1076,8 +1237,8 @@ function replaceIndicesByUnique(indicesArray, featureMap) {
 
 /**
  * Convert property table data to attribute buffers.
- * @param {Object} propertyTable - table with metadata for particular feature.
  * @param {Array} featureIds
+ * @param {Object} propertyTable - table with metadata for particular feature.
  * @param {Array} attributeStorageInfo
  * @returns {Array} - Array of file buffers.
  */
@@ -1227,7 +1388,7 @@ async function generateCompressedGeometry(
   attributes,
   dracoWorkerSoure
 ) {
-  const {positions, normals, texCoords, colors, featureIds, faceRange} = attributes;
+  const {positions, normals, texCoords, colors, uvRegions, featureIds, faceRange} = attributes;
   const indices = new Uint32Array(vertexCount);
 
   for (let index = 0; index < indices.length; index++) {
@@ -1246,6 +1407,7 @@ async function generateCompressedGeometry(
     colors: TypedArray;
     'feature-index': TypedArray;
     texCoords?: TypedArray;
+    'uv-region'?: TypedArray;
   } = {
     positions,
     normals,
@@ -1264,6 +1426,13 @@ async function generateCompressedGeometry(
     }
   };
 
+  if (uvRegions.length) {
+    compressedAttributes['uv-region'] = uvRegions;
+    attributesMetadata['uv-region'] = {
+      'i3s-attribute-type': 'uv-region'
+    };
+  }
+
   return encode({attributes: compressedAttributes, indices}, DracoWriterWorker, {
     ...DracoWriterWorker.options,
     source: dracoWorkerSoure,

package/src/i3s-converter/helpers/gltf-attributes.ts

@@ -28,7 +28,6 @@ function getB3DMAttributesWithoutBufferView(attributes: AttributesObject): Attri
  * @returns
  */
 export function prepareDataForAttributesConversion(tileContent: B3DMContent): B3DMAttributesData {
-  const gltfMaterials = tileContent.gltf?.materials?.map((material) => ({id: material.id}));
   let nodes =
     tileContent.gltf?.scene?.nodes ||
     tileContent.gltf?.scenes?.[0]?.nodes ||
@@ -64,7 +63,6 @@ export function prepareDataForAttributesConversion(tileContent: B3DMContent): B3
   const cartesianModelMatrix = tileContent.cartesianModelMatrix;
 
   return {
-    gltfMaterials,
     nodes,
     images,
     cartographicOrigin,
@@ -90,7 +88,8 @@ function prepareNodes(nodes: GLTFNodePostprocessed[]): void {
             indices: {value: primitive?.indices?.value},
             attributes: getB3DMAttributesWithoutBufferView(primitive.attributes),
             material: {
-              id: primitive?.material?.id
+              id: primitive?.material?.id,
+              uniqueId: primitive?.material?.uniqueId
             }
           }))
         }