@loaders.gl/tile-converter 3.2.12 → 3.3.0-alpha.10

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

@@ -1,3 +1,15 @@
+import type {B3DMContent, FeatureTableJson} from '@loaders.gl/3d-tiles';
+import type {
+  GLTF_EXT_feature_metadata,
+  GLTFAccessorPostprocessed,
+  GLTFMaterialPostprocessed,
+  GLTFNodePostprocessed,
+  GLTFImagePostprocessed,
+  GLTFMeshPrimitivePostprocessed,
+  GLTFMeshPostprocessed,
+  GLTFTexturePostprocessed
+} from '@loaders.gl/gltf';
+
 import {Vector3, Matrix4, Vector4} from '@math.gl/core';
 import {Ellipsoid} from '@math.gl/geospatial';
 
@@ -5,16 +17,16 @@ 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 {B3DMContent} from '@loaders.gl/3d-tiles';
-import {GLTFMaterialPostprocessed, GLTFNodePostprocessed} from '@loaders.gl/gltf';
 import {
   AttributeStorageInfo,
   I3SMaterialDefinition,
@@ -23,13 +35,11 @@ import {
 } from '@loaders.gl/i3s';
 import {TypedArray} from '@loaders.gl/schema';
 import {Geoid} from '@math.gl/geoid';
-import {
-  GLTFAccessorPostprocessed,
-  GLTFMeshPostprocessed,
-  GLTFTexturePostprocessed
-} from 'modules/gltf/src/lib/types/gltf-types';
-import {B3DMAttributesData /*transformI3SAttributesOnWorker */} from '../../i3s-attributes-worker';
+/** Usage of worker here brings more overhead than advantage */
+import {B3DMAttributesData /*, transformI3SAttributesOnWorker*/} from '../../i3s-attributes-worker';
 import {prepareDataForAttributesConversion} from './gltf-attributes';
+import {handleBatchIdsExtensions} from './batch-ids-extensions';
+import {checkPropertiesLength, flattenPropertyTableByFeatureIds} from './feature-attributes';
 
 // Spec - https://github.com/Esri/i3s-spec/blob/master/docs/1.7/pbrMetallicRoughness.cmn.md
 const DEFAULT_ROUGHNESS_FACTOR = 1;
@@ -50,90 +60,89 @@ const OBJECT_ID_TYPE = 'Oid32';
  */
 const BATCHED_ID_POSSIBLE_ATTRIBUTE_NAMES = ['CUSTOM_ATTRIBUTE_2', '_BATCHID', 'BATCHID'];
 
+const EXT_FEATURE_METADATA = 'EXT_feature_metadata';
+const EXT_MESH_FEATURES = 'EXT_mesh_features';
+
 let scratchVector = new Vector3();
 
 /**
  * Convert binary data from b3dm file to i3s resources
  *
  * @param tileContent - 3d tile content
- * @param nodeId - target nodeId. If a few nodes will be created - ids will be nodeId+n where n - index in the resulting array
+ * @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,
-  nodeId: 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
   );
-  // TODO uncomment it when worker will be published on CDN.
-  /*
-  const convertedAttributesMap: Map<string, ConvertedAttributes> =
-    await transformI3SAttributesOnWorker(dataForAttributesConversion, {
-      useCartesianPositions,
-      source: workerSource.I3SAttributes
-    });
-  */
+  /** Usage of worker here brings more overhead than advantage */
+  // const convertedAttributesMap: Map<string, ConvertedAttributes> =
+  //   await transformI3SAttributesOnWorker(dataForAttributesConversion, {
+  //     reuseWorkers: true,
+  //     _nodeWorkers: true,
+  //     useCartesianPositions,
+  //     source: workerSource.I3SAttributes
+  //   });
 
   if (generateBoundingVolumes) {
     _generateBoundingVolumesFromGeometry(convertedAttributesMap, geoidHeightModel);
   }
 
-  if (convertedAttributesMap.has('default')) {
-    materialAndTextureList.push({
-      material: getDefaultMaterial()
-    });
-  }
-
   const result: I3SConvertedResources[] = [];
-  let nodesCounter = nodeId;
-  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 {material, texture} = materialAndTexture;
+    const nodeId = await addNodeToNodePage();
     result.push(
       await _makeNodeResources({
         convertedAttributes,
         material,
         texture,
         tileContent,
-        nodeId: nodesCounter,
+        nodeId,
         featuresHashArray,
+        propertyTable,
         attributeStorageInfo,
         draco,
         workerSource
       })
     );
-    nodesCounter++;
   }
 
   if (!result.length) {
@@ -180,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({
@@ -191,6 +202,7 @@ async function _makeNodeResources({
   tileContent,
   nodeId,
   featuresHashArray,
+  propertyTable,
   attributeStorageInfo,
   draco,
   workerSource
@@ -201,13 +213,14 @@ async function _makeNodeResources({
   tileContent: B3DMContent;
   nodeId: number;
   featuresHashArray: string[];
+  propertyTable: FeatureTableJson | null;
   attributeStorageInfo?: AttributeStorageInfo[];
   draco: boolean;
   workerSource: {[key: string]: string};
 }): 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) {
@@ -230,6 +243,7 @@ async function _makeNodeResources({
       normals.buffer,
       texture ? texCoords.buffer : new ArrayBuffer(0),
       colors.buffer,
+      uvRegions,
       typedFeatureIds.buffer,
       faceRange.buffer
     )
@@ -243,6 +257,7 @@ async function _makeNodeResources({
           normals,
           texCoords: texture ? texCoords : new Float32Array(0),
           colors,
+          uvRegions,
           featureIds,
           faceRange
         },
@@ -250,16 +265,22 @@ async function _makeNodeResources({
       )
     : null;
 
-  const attributes = convertBatchTableToAttributeBuffers(
-    tileContent.batchTableJson,
-    featureIds,
-    attributeStorageInfo
-  );
+  let attributes: ArrayBuffer[] = [];
+
+  if (attributeStorageInfo && propertyTable) {
+    attributes = convertPropertyTableToAttributeBuffers(
+      featureIds,
+      propertyTable,
+      attributeStorageInfo
+    );
+  }
 
   return {
+    nodeId,
     geometry: fileBuffer,
     compressedGeometry,
     texture,
+    hasUvRegions: Boolean(uvRegions.length),
     sharedResources: getSharedResources(tileContent.gltf?.materials || [], nodeId),
     meshMaterial: material,
     vertexCount,
@@ -271,32 +292,40 @@ 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, 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(
     nodes,
+    images,
     cartographicOrigin,
     cartesianModelMatrix,
     attributesMap,
@@ -327,7 +356,9 @@ export async function convertAttributes(
  * Gltf has hierarchical structure of nodes. This function converts nodes starting from those which are in gltf scene object.
  *   The goal is applying tranformation matrix for all children. Functions "convertNodes" and "convertNode" work together recursively.
  * @param nodes - gltf nodes array
- * @param tileContent - 3d tile content
+ * @param images - gltf images array
+ * @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
@@ -336,6 +367,7 @@ export async function convertAttributes(
  */
 function convertNodes(
   nodes: GLTFNodePostprocessed[],
+  images: GLTFImagePostprocessed[],
   cartographicOrigin: Vector3,
   cartesianModelMatrix: Matrix4,
   attributesMap: Map<string, ConvertedAttributes>,
@@ -346,6 +378,7 @@ function convertNodes(
     for (const node of nodes) {
       convertNode(
         node,
+        images,
         cartographicOrigin,
         cartesianModelMatrix,
         attributesMap,
@@ -362,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;
@@ -389,7 +422,9 @@ function getCompositeTransformationMatrix(node, matrix) {
 /**
  * Convert all primitives of node and all children nodes
  * @param node - gltf node
- * @param {Object} tileContent - 3d tile content
+ * @param images - gltf images array
+ * @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.
@@ -398,6 +433,7 @@ function getCompositeTransformationMatrix(node, matrix) {
  */
 function convertNode(
   node: GLTFNodePostprocessed,
+  images: GLTFImagePostprocessed[],
   cartographicOrigin: Vector3,
   cartesianModelMatrix: Matrix4,
   attributesMap: Map<string, ConvertedAttributes>,
@@ -407,9 +443,11 @@ function convertNode(
   const transformationMatrix = getCompositeTransformationMatrix(node, matrix);
 
   const mesh = node.mesh;
+
   if (mesh) {
     convertMesh(
       mesh,
+      images,
       cartographicOrigin,
       cartesianModelMatrix,
       attributesMap,
@@ -420,6 +458,7 @@ function convertNode(
 
   convertNodes(
     node.children || [],
+    images,
     cartographicOrigin,
     cartesianModelMatrix,
     attributesMap,
@@ -429,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
@@ -441,6 +484,7 @@ function convertNode(
  */
 function convertMesh(
   mesh: GLTFMeshPostprocessed,
+  images: GLTFImagePostprocessed[],
   cartographicOrigin: Vector3,
   cartesianModelMatrix: Matrix4,
   attributesMap: Map<string, ConvertedAttributes>,
@@ -449,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');
     }
@@ -496,9 +544,16 @@ 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(getBatchIdsByAttributeName(attributes), primitive.indices?.value)
+      flattenBatchIds(getBatchIds(attributes, primitive, images), primitive.indices?.value)
     );
   }
 }
@@ -646,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
@@ -665,14 +734,23 @@ function flattenBatchIds(batchedIds: number[], indices: Uint8Array): number[] {
 }
 
 /**
- * Return batchIds based on possible attribute names for different kind of maps.
- * @param attributes - the gltf primitive attributes
- * @returns batch ids attribute
+ * Get batchIds for featureIds creation
+ * @param attributes - gltf accessors
+ * @param primitive - gltf primitive data
+ * @param images - gltf texture images
  */
-function getBatchIdsByAttributeName(attributes: {
-  [key: string]: GLTFAccessorPostprocessed;
-}): number[] {
-  let batchIds: number[] = [];
+function getBatchIds(
+  attributes: {
+    [key: string]: GLTFAccessorPostprocessed;
+  },
+  primitive: GLTFMeshPrimitivePostprocessed,
+  images: GLTFImagePostprocessed[]
+): number[] {
+  const batchIds: number[] = handleBatchIdsExtensions(attributes, primitive, images);
+
+  if (batchIds.length) {
+    return batchIds;
+  }
 
   for (let index = 0; index < BATCHED_ID_POSSIBLE_ATTRIBUTE_NAMES.length; index++) {
     const possibleBatchIdAttributeName = BATCHED_ID_POSSIBLE_ATTRIBUTE_NAMES[index];
@@ -680,29 +758,137 @@ function getBatchIdsByAttributeName(attributes: {
       attributes[possibleBatchIdAttributeName] &&
       attributes[possibleBatchIdAttributeName].value
     ) {
-      batchIds = attributes[possibleBatchIdAttributeName].value;
-      break;
+      return attributes[possibleBatchIdAttributeName].value;
     }
   }
 
-  return batchIds;
+  return [];
 }
 
 /**
  * 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);
+    // @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();
+    // @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
@@ -741,6 +927,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
@@ -752,9 +941,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};
 }
 
 /**
@@ -897,7 +1088,9 @@ function extractSharedResourcesMaterialInfo(
   const specular = dielectricSpecular.lerp(dielectricSpecular, baseColorVector, metallicFactor);
   return {
     params: {
+      // @ts-expect-error NumericArray
       diffuse: diffuse.toArray(),
+      // @ts-expect-error NumericArray
       specular: specular.toArray(),
       renderMode: 'solid'
     }
@@ -929,13 +1122,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;
@@ -1036,49 +1229,66 @@ function replaceIndicesByUnique(indicesArray, featureMap) {
 }
 
 /**
- * Convert batch table data to attribute buffers.
- * @param {Object} batchTable - table with metadata for particular feature.
+ * Convert property table data to attribute buffers.
  * @param {Array} featureIds
+ * @param {Object} propertyTable - table with metadata for particular feature.
  * @param {Array} attributeStorageInfo
  * @returns {Array} - Array of file buffers.
  */
-function convertBatchTableToAttributeBuffers(batchTable, featureIds, attributeStorageInfo) {
+function convertPropertyTableToAttributeBuffers(
+  featureIds: number[],
+  propertyTable: FeatureTableJson,
+  attributeStorageInfo: AttributeStorageInfo[]
+) {
   const attributeBuffers: ArrayBuffer[] = [];
 
-  if (batchTable) {
-    const batchTableWithFeatureIds = {
-      OBJECTID: featureIds,
-      ...batchTable
-    };
+  const needFlattenPropertyTable = checkPropertiesLength(featureIds, propertyTable);
+  const properties = needFlattenPropertyTable
+    ? flattenPropertyTableByFeatureIds(featureIds, propertyTable)
+    : propertyTable;
 
-    for (const key in batchTableWithFeatureIds) {
-      const type = getAttributeType(key, attributeStorageInfo);
-
-      let attributeBuffer: ArrayBuffer | null = null;
-
-      switch (type) {
-        case OBJECT_ID_TYPE:
-        case SHORT_INT_TYPE:
-          attributeBuffer = generateShortIntegerAttributeBuffer(batchTableWithFeatureIds[key]);
-          break;
-        case DOUBLE_TYPE:
-          attributeBuffer = generateDoubleAttributeBuffer(batchTableWithFeatureIds[key]);
-          break;
-        case STRING_TYPE:
-          attributeBuffer = generateStringAttributeBuffer(batchTableWithFeatureIds[key]);
-          break;
-        default:
-          attributeBuffer = generateStringAttributeBuffer(batchTableWithFeatureIds[key]);
-      }
+  const propertyTableWithObjectIds = {
+    OBJECTID: featureIds,
+    ...properties
+  };
 
-      if (attributeBuffer) {
-        attributeBuffers.push(attributeBuffer);
-      }
-    }
+  for (const propertyName in propertyTableWithObjectIds) {
+    const type = getAttributeType(propertyName, attributeStorageInfo);
+    const value = propertyTableWithObjectIds[propertyName];
+    const attributeBuffer = generateAttributeBuffer(type, value);
+
+    attributeBuffers.push(attributeBuffer);
   }
 
   return attributeBuffers;
 }
+
+/**
+ * Generates attribute buffer based on attribute type
+ * @param type
+ * @param value
+ */
+function generateAttributeBuffer(type: string, value: any): ArrayBuffer {
+  let attributeBuffer: ArrayBuffer;
+
+  switch (type) {
+    case OBJECT_ID_TYPE:
+    case SHORT_INT_TYPE:
+      attributeBuffer = generateShortIntegerAttributeBuffer(value);
+      break;
+    case DOUBLE_TYPE:
+      attributeBuffer = generateDoubleAttributeBuffer(value);
+      break;
+    case STRING_TYPE:
+      attributeBuffer = generateStringAttributeBuffer(value);
+      break;
+    default:
+      attributeBuffer = generateStringAttributeBuffer(value);
+  }
+
+  return attributeBuffer;
+}
+
 /**
  * Return attribute type.
  * @param {String} key
@@ -1171,7 +1381,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++) {
@@ -1190,6 +1400,7 @@ async function generateCompressedGeometry(
     colors: TypedArray;
     'feature-index': TypedArray;
     texCoords?: TypedArray;
+    'uv-region'?: TypedArray;
   } = {
     positions,
     normals,
@@ -1208,6 +1419,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,
@@ -1242,3 +1460,97 @@ function generateFeatureIndexAttribute(featureIndex, faceRange) {
 
   return orderedFeatureIndices;
 }
+
+/**
+ * Find property table in tile
+ * For example it can be batchTable for b3dm files or property table in gLTF extension.
+ * @param sourceTile
+ * @return batch table from b3dm / feature properties from EXT_FEATURE_METADATA
+ */
+export function getPropertyTable(tileContent: B3DMContent): FeatureTableJson | null {
+  const batchTableJson = tileContent?.batchTableJson;
+
+  if (batchTableJson) {
+    return batchTableJson;
+  }
+
+  const {extensionName, extension} = getPropertyTableExtension(tileContent);
+
+  switch (extensionName) {
+    case EXT_MESH_FEATURES: {
+      console.warn('The I3S converter does not yet support the EXT_mesh_features extension');
+      return null;
+    }
+    case EXT_FEATURE_METADATA: {
+      return getPropertyTableFromExtFeatureMetadata(extension);
+    }
+    default:
+      return null;
+  }
+}
+
+/**
+ * Check extensions which can be with property table inside.
+ * @param sourceTile
+ */
+function getPropertyTableExtension(tileContent: B3DMContent) {
+  const extensionsWithPropertyTables = [EXT_FEATURE_METADATA, EXT_MESH_FEATURES];
+  const extensionsUsed = tileContent?.gltf?.extensionsUsed;
+
+  if (!extensionsUsed) {
+    return {extensionName: null, extension: null};
+  }
+
+  let extensionName: string = '';
+
+  for (const extensionItem of tileContent?.gltf?.extensionsUsed || []) {
+    if (extensionsWithPropertyTables.includes(extensionItem)) {
+      extensionName = extensionItem;
+      break;
+    }
+  }
+
+  const extension = tileContent?.gltf?.extensions?.[extensionName];
+
+  return {extensionName, extension};
+}
+
+/**
+ * Handle EXT_feature_metadata to get property table
+ * @param extension
+ * TODO add EXT_feature_metadata feature textures support.
+ */
+function getPropertyTableFromExtFeatureMetadata(
+  extension: GLTF_EXT_feature_metadata
+): FeatureTableJson | null {
+  if (extension?.featureTextures) {
+    console.warn(
+      'The I3S converter does not yet support the EXT_feature_metadata feature textures'
+    );
+    return null;
+  }
+
+  if (extension?.featureTables) {
+    /**
+     * Take only first feature table to generate attributes storage info object.
+     * TODO: Think about getting data from all feature tables?
+     * It can be tricky just because 3dTiles is able to have multiple featureId attributes and multiple feature tables.
+     * In I3S we should decide which featureIds attribute will be passed to geometry data.
+     */
+    const firstFeatureTableName = Object.keys(extension.featureTables)?.[0];
+
+    if (firstFeatureTableName) {
+      const featureTable = extension?.featureTables[firstFeatureTableName];
+      const propertyTable = {};
+
+      for (const propertyName in featureTable.properties) {
+        propertyTable[propertyName] = featureTable.properties[propertyName].data;
+      }
+
+      return propertyTable;
+    }
+  }
+
+  console.warn("The I3S converter couldn't handle EXT_feature_metadata extension");
+  return null;
+}