@shapediver/viewer.data-engine.geometry-engine 1.15.7 → 2.0.0

package/src/gltfv2/loaders/AccessorLoader.ts

@@ -0,0 +1,139 @@
+import { AttributeData } from '@shapediver/viewer.shared.types'
+import {
+  ACCESSORCOMPONENTTYPE_V2 as ACCESSOR_COMPONENTTYPE,
+  ACCESSORTYPE_V2 as ACCESSORTYPE,
+  IGLTF_v2,
+  IGLTF_v2_Material,
+  IGLTF_v2_Material_KHR_materials_pbrSpecularGlossiness,
+  IGLTF_v2_Primitive,
+  ISHAPEDIVER_materials_preset,
+} from '@shapediver/viewer.data-engine.shared-types'
+import { Logger, LOGGING_TOPIC } from '@shapediver/viewer.shared.services'
+import { container } from 'tsyringe'
+
+import { BufferLoader } from './BufferLoader'
+import { BufferViewLoader } from './BufferViewLoader'
+
+export class AccessorLoader {
+  // #region Properties (2)
+
+  private readonly _logger: Logger = <Logger>container.resolve(Logger);
+
+  private _loaded: {
+        [key: string]: AttributeData | null
+    } = {};
+
+  // #endregion Properties (2)
+
+  // #region Constructors (1)
+
+  constructor(private readonly _content: IGLTF_v2, private readonly _bufferViewLoader: BufferViewLoader) { }
+
+  // #endregion Constructors (1)
+
+  // #region Public Methods (2)
+
+  public getAccessor(accessorId: number): AttributeData | null {
+        if (!this._content.accessors) throw new Error('AccessorLoader.getAccessor: Accessors not available.')
+        if (!this._content.accessors[accessorId]) throw new Error('AccessorLoader.getAccessor: Accessor not available.')
+        if (!this._loaded[accessorId]) throw new Error('AccessorLoader.getAccessor: Accessor not loaded.')
+        return this._loaded[accessorId];
+    }
+
+  public load(): void {
+        if (!this._content.accessors) return;
+        for (let i = 0; i < this._content.accessors.length; i++) {
+            const accessorId = i;
+            if (!this._content.accessors[accessorId]) throw new Error('AccessorLoader.load: BufferView not available.')
+            const accessor = this._content.accessors[accessorId];
+
+            if (accessor.bufferView === undefined) {
+                // Ignore empty accessors, which may be used to declare runtime
+                // information about attributes coming from another source (e.g. Draco
+                // compression extension).
+                this._loaded[accessorId] = null;
+                continue;
+            }
+
+            const arrayBuffer = this._bufferViewLoader.getBufferView(accessor.bufferView!);
+
+            const itemSize = ACCESSORTYPE[<keyof typeof ACCESSORTYPE>accessor.type];
+            if (accessor.componentType === 5124) this._logger.warn(LOGGING_TOPIC.DATA_PROCESSING, 'GLTFLoader.loadAccessor: The componentType for this accessor is 5124, which is not allowed. Trying to load it anyway.');
+            const ArrayType = ACCESSOR_COMPONENTTYPE[<keyof typeof ACCESSOR_COMPONENTTYPE>accessor.componentType];
+
+            const elementBytes = ArrayType.BYTES_PER_ELEMENT;
+            const itemBytes = elementBytes * itemSize;
+            const byteOffset = accessor.byteOffset || 0;
+            const byteStride = accessor.bufferView !== undefined ? this._content.bufferViews ? this._content.bufferViews[accessor.bufferView].byteStride : undefined : undefined;
+            const normalized = accessor.normalized === true;
+            let array;
+
+            if (byteStride && byteStride !== itemBytes) {
+                // Each "slice" of the buffer, as defined by 'count' elements of 'byteStride' bytes, gets its own InterleavedBuffer
+                // This makes sure that IBA.count reflects accessor.count properly
+                const ibSlice = Math.floor(byteOffset / byteStride);
+                array = new ArrayType(arrayBuffer, ibSlice * byteStride, accessor.count * byteStride / elementBytes);
+            } else {
+                if (arrayBuffer === null) {
+                    array = new ArrayType(accessor.count * itemSize);
+                } else {
+                    array = new ArrayType(arrayBuffer, byteOffset, accessor.count * itemSize);
+                }
+            }
+
+            if (normalized) {
+                const scale = this.getNormalizedComponentScale(ArrayType);
+                const scaled = new Float32Array(array.length);
+                for (let j = 0, jl = array.length; j < jl; j++)
+                    scaled[j] = array[j] * scale;
+                array = scaled;
+            }
+
+            if (accessor.sparse !== undefined) {
+                const itemSizeIndices = ACCESSORTYPE.SCALAR;
+                const IndicesArrayType = ACCESSOR_COMPONENTTYPE[<keyof typeof ACCESSOR_COMPONENTTYPE>accessor.sparse.indices.componentType];
+
+                const byteOffsetIndices = accessor.sparse.indices.byteOffset || 0;
+                const byteOffsetValues = accessor.sparse.values.byteOffset || 0;
+
+                if (!accessor.sparse.indices.bufferView || !accessor.sparse.values.bufferView) throw new Error('Sparse Mesh not properly defined.')
+
+                const sparseIndices = new IndicesArrayType(this._bufferViewLoader.getBufferView(accessor.sparse.indices.bufferView!), byteOffsetIndices, accessor.sparse.count * itemSizeIndices);
+                const sparseValues = new ArrayType(this._bufferViewLoader.getBufferView(accessor.sparse.values.bufferView!), byteOffsetValues, accessor.sparse.count * itemSize);
+
+                this._loaded[accessorId] = new AttributeData(array, itemSize, itemBytes, byteOffset, elementBytes, normalized, accessor.count, accessor.min, accessor.max, byteStride, true, sparseIndices, sparseValues);
+                continue;
+            }
+
+            this._loaded[accessorId] = new AttributeData(array, itemSize, itemBytes, byteOffset, elementBytes, normalized, accessor.count, accessor.min, accessor.max, byteStride);
+        }
+    }
+
+  // #endregion Public Methods (2)
+
+  // #region Private Methods (1)
+
+  private getNormalizedComponentScale(constructor: Uint8ArrayConstructor | Int8ArrayConstructor | Int16ArrayConstructor | Uint16ArrayConstructor | Uint32ArrayConstructor | Float32ArrayConstructor) {
+        // Reference:
+        // https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_mesh_quantization#encoding-quantized-data
+
+        switch (constructor) {
+            case Int8Array:
+                return 1 / 127;
+
+            case Uint8Array:
+                return 1 / 255;
+
+            case Int16Array:
+                return 1 / 32767;
+
+            case Uint16Array:
+                return 1 / 65535;
+
+            default:
+                throw new Error('THREE.GLTFLoader: Unsupported normalized accessor component type.');
+        }
+    }
+
+  // #endregion Private Methods (1)
+}

package/src/gltfv2/loaders/BufferLoader.ts

@@ -0,0 +1,77 @@
+import { container } from 'tsyringe'
+import { IGLTF_v2 } from '@shapediver/viewer.data-engine.shared-types'
+import { HttpClient } from '@shapediver/viewer.shared.services'
+
+export class BufferLoader {
+    // #region Properties (2)
+
+    private readonly _httpClient: HttpClient = <HttpClient>container.resolve(HttpClient);
+
+    private _loaded: {
+        [key: string]: ArrayBuffer
+    } = {};
+
+    // #endregion Properties (2)
+
+    // #region Constructors (1)
+
+    constructor(private readonly _content: IGLTF_v2, private _body?: ArrayBuffer, private _baseUri?: string) { }
+
+    // #endregion Constructors (1)
+
+    // #region Public Methods (2)
+
+    public getBuffer(bufferId: number): ArrayBuffer {
+        if (!this._content.buffers) throw new Error('BufferLoader.getBuffer: Buffers not available.')
+        if (!this._content.buffers[bufferId]) throw new Error('BufferLoader.getBuffer: Buffer not available.')
+        if (!this._loaded[bufferId]) throw new Error('BufferLoader.getBuffer: Buffer not loaded.')
+        return this._loaded[bufferId];
+    }
+
+    public async load(): Promise<void> {
+        if (!this._content.buffers) return;
+
+        let promises: Promise<void>[] = [];
+
+        for (let i = 0; i < this._content.buffers.length; i++) {
+            const bufferId = i;
+            const buffer = this._content.buffers[bufferId];
+
+            if (buffer.type && buffer.type !== 'arraybuffer') {
+                throw new Error(`BufferLoader.load: ${buffer.type} is not supported.`);
+            }
+
+            // If present, GLB container is required to be the first buffer.
+            if (buffer.uri === undefined && bufferId === 0) {
+                if (!this._body) throw new Error(`BufferLoader.load: Buffer not available.`);
+                this._loaded[bufferId] = this._body;
+                return;
+            }
+
+            const dataUriRegex = /^data:(.*?)(;base64)?,(.*)$/;
+            const dataUriRegexResult = buffer.uri!.match(dataUriRegex);
+
+            // Safari can not handle Data URIs through XMLHttpRequest so process manually
+            if (dataUriRegexResult) {
+                const isBase64 = !!dataUriRegexResult[2];
+                let data = dataUriRegexResult[3];
+                data = decodeURIComponent(data);
+                if (isBase64) data = atob(data);
+
+                const view = new Uint8Array(data.length);
+                for (let i = 0; i < data.length; i++) {
+                    view[i] = data.charCodeAt(i);
+                }
+                this._loaded[bufferId] = view.buffer;
+            } else {
+                let httpResultPromise = this._httpClient.get(this._baseUri + '/' + buffer.uri!, {
+                    responseType: 'arraybuffer'
+                }).then(response => { this._loaded[bufferId] = response.data; });
+                promises.push(httpResultPromise)
+            }
+        }
+        await Promise.all(promises);
+    }
+
+    // #endregion Public Methods (2)
+}

package/src/gltfv2/loaders/BufferViewLoader.ts

@@ -0,0 +1,48 @@
+import { IGLTF_v2 } from '@shapediver/viewer.data-engine.shared-types'
+
+import { BufferLoader } from './BufferLoader'
+
+export class BufferViewLoader {
+    // #region Properties (1)
+
+    private _loaded: {
+        [key: string]: ArrayBuffer
+    } = {};
+
+    // #endregion Properties (1)
+
+    // #region Constructors (1)
+
+    constructor(private readonly _content: IGLTF_v2, private readonly _bufferLoader: BufferLoader) { }
+
+    // #endregion Constructors (1)
+
+    // #region Public Methods (2)
+
+    public getBufferView(bufferViewId: number): ArrayBuffer {
+        if (!this._content.bufferViews) throw new Error('BufferViewLoader.load: BufferViews not available.')
+        if (!this._content.bufferViews[bufferViewId]) throw new Error('BufferViewLoader.load: BufferView not available.')
+        if (!this._loaded[bufferViewId]) throw new Error('BufferViewLoader.load: BufferView not loaded.')
+        return this._loaded[bufferViewId];
+    }
+
+    public load(): void {
+        if (!this._content.bufferViews) return;
+        for (let i = 0; i < this._content.bufferViews.length; i++) {
+            const bufferViewId = i;
+            if (!this._content.bufferViews[bufferViewId]) throw new Error('BufferViewLoader.load: BufferView not available.')
+            const bufferView = this._content.bufferViews[bufferViewId];
+
+            const byteLength = bufferView.byteLength || 0;
+            const byteOffset = bufferView.byteOffset || 0;
+
+            if (bufferView.buffer === undefined) throw new Error('BufferViewLoader.load: BufferView has no buffer defined.')
+            const buffer = this._bufferLoader.getBuffer(bufferView.buffer!);
+            const result = buffer.slice(byteOffset, byteOffset + byteLength);
+
+            this._loaded[bufferViewId] = result;
+        }
+    }
+
+    // #endregion Public Methods (2)
+}

package/src/gltfv2/loaders/GeometryLoader.ts

@@ -0,0 +1,215 @@
+import { IGLTF_v2, IGLTF_v2_Primitive } from '@shapediver/viewer.data-engine.shared-types'
+import { ITreeNode, TreeNode } from '@shapediver/viewer.shared.node-tree'
+import { AttributeData, GeometryData, MaterialVariantsData, PrimitiveData } from '@shapediver/viewer.shared.types'
+
+import { GLTF_EXTENSIONS } from '../GLTFLoader'
+import { AccessorLoader } from './AccessorLoader'
+import { BufferViewLoader } from './BufferViewLoader'
+import { MaterialLoader } from './MaterialLoader'
+
+export class GeometryLoader {
+    // #region Properties (1)
+
+    private _materialVariantsData = new MaterialVariantsData();
+
+    // #endregion Properties (1)
+
+    // #region Constructors (1)
+
+    constructor(
+        private readonly _content: IGLTF_v2, 
+        private readonly _accessorLoader: AccessorLoader, 
+        private readonly _bufferViewLoader: BufferViewLoader, 
+        private readonly _materialLoader: MaterialLoader,
+        private readonly _dracoModule: any
+    ) {}
+
+    // #endregion Constructors (1)
+
+    // #region Public Accessors (1)
+
+    public get materialVariantsData(): MaterialVariantsData {
+        return this._materialVariantsData;
+    }
+
+    // #endregion Public Accessors (1)
+
+    // #region Public Methods (1)
+
+    public loadMesh(meshId: number, weights?: number[]): ITreeNode {
+        if (!this._content.meshes) throw new Error('GeometryLoader.loadMesh: Meshes not available.')
+        if (!this._content.meshes[meshId]) throw new Error('GeometryLoader.loadMesh: Mesh not available.')
+        const mesh = this._content.meshes[meshId];
+        const meshNode = new TreeNode(mesh.name || 'mesh_' + meshId);
+
+        if (mesh.primitives)
+            for (let i = 0, len = mesh.primitives.length; i < len; i++)
+                meshNode.addChild(this.loadPrimitive(mesh.primitives, i, mesh.weights || weights));
+
+        return meshNode;
+    }
+
+    // #endregion Public Methods (1)
+
+    // #region Private Methods (1)
+
+    private loadPrimitive(primitives: IGLTF_v2_Primitive[], index: number, weights: number[] = []): ITreeNode {
+        const primitive = primitives[index];
+        const primitiveNode = new TreeNode('primitive_' + index);
+
+        const attributes: {
+            [key: string]: AttributeData
+        } = {};
+
+        let indices = null;
+        const convertedNames: { [key: string]: string } = {}
+
+        if (primitive.extensions && primitive.extensions[GLTF_EXTENSIONS.KHR_DRACO_MESH_COMPRESSION]) {
+            const dracoDef = primitive.extensions[GLTF_EXTENSIONS.KHR_DRACO_MESH_COMPRESSION];
+            const arrayBuffer = this._bufferViewLoader.getBufferView(dracoDef.bufferView!);
+
+            const decoder = new this._dracoModule.Decoder();
+            const buffer = new this._dracoModule.DecoderBuffer();
+            buffer.Init(new Int8Array(arrayBuffer), arrayBuffer.byteLength);
+            const geometryType = decoder.GetEncodedGeometryType(buffer);
+
+            let dracoGeometry;
+            if (geometryType === this._dracoModule.TRIANGULAR_MESH) {
+                dracoGeometry = new this._dracoModule.Mesh();
+                decoder.DecodeBufferToMesh(buffer, dracoGeometry);
+            } else if (geometryType === this._dracoModule.POINT_CLOUD) {
+                dracoGeometry = new this._dracoModule.PointCloud();
+                decoder.DecodeBufferToPointCloud(buffer, dracoGeometry);
+            }
+            this._dracoModule.destroy(buffer);
+
+            if (dracoDef.attributes['POSITION'] === undefined) {
+                const errorMsg = "No position attribute found in the mesh.";
+                this._dracoModule.destroy(decoder);
+                this._dracoModule.destroy(dracoGeometry);
+                throw new Error(errorMsg);
+            }
+
+            for (let a in dracoDef.attributes) {
+                const attribute = decoder.GetAttributeByUniqueId(dracoGeometry, dracoDef.attributes[a])
+                const attributeData = new this._dracoModule.DracoFloat32Array();
+                decoder.GetAttributeFloatForAllPoints(dracoGeometry, attribute, attributeData);
+
+                const byteOffset = attribute.byte_offset();
+                const normalized = attribute.normalized();
+                const num_components = attribute.num_components();
+                const count = attributeData.size();
+
+                const array = new Float32Array(count);
+
+                for (let i = 0; i < count; i++) {
+                    for (let a = 0; a < num_components; a++) {
+                        const temp = i * num_components;
+                        const value = attributeData.GetValue(temp + a);
+                        array[temp + a] = value;
+                    }
+                }
+                this._dracoModule.destroy(attributeData);
+
+                attributes[a] = new AttributeData(
+                    array,
+                    num_components, // itemSize
+                    array.BYTES_PER_ELEMENT * num_components, // itemBytes = elementBytes * itemSize
+                    byteOffset, // byteOffset
+                    array.BYTES_PER_ELEMENT, // elementBytes
+                    normalized, // normalized
+                    array.length / num_components
+                );
+            }
+
+            const numFaces = geometryType == this._dracoModule.TRIANGULAR_MESH ? dracoGeometry.num_faces() : 0;
+            const numIndices = numFaces * 3;
+            const indexArray = new Uint32Array(numIndices);
+
+            // For mesh, we need to generate the faces.
+            if (geometryType == this._dracoModule.TRIANGULAR_MESH) {
+                const ia = new this._dracoModule.DracoInt32Array();
+                for (let i = 0; i < numFaces; ++i) {
+                    decoder.GetFaceFromMesh(dracoGeometry, i, ia);
+                    const index = i * 3;
+                    indexArray[index] = ia.GetValue(0);
+                    indexArray[index + 1] = ia.GetValue(1);
+                    indexArray[index + 2] = ia.GetValue(2);
+                }
+                this._dracoModule.destroy(ia);
+            }
+            this._dracoModule.destroy(decoder);
+            this._dracoModule.destroy(dracoGeometry);
+
+            if (geometryType == this._dracoModule.TRIANGULAR_MESH)
+                indices = new AttributeData(
+                    indexArray,
+                    1, // itemSize
+                    indexArray.BYTES_PER_ELEMENT * 1, // itemBytes = elementBytes * itemSize
+                    0, // byteOffset
+                    indexArray.BYTES_PER_ELEMENT, // elementBytes
+                    false, // normalized
+                    indexArray.length // count
+                );
+        }
+
+        for (let attribute in primitive.attributes) {
+            if (attributes[attribute]) {
+                convertedNames[attribute] = attribute;
+                continue;
+            }
+
+            let attributeName = attribute;
+            // attribute name conversion to be consistent with gltf
+            if (/\d/.test(attributeName) && !attributeName.includes('_')) {
+                const index = attributeName.search(/\d/)
+                attributeName = attributeName.substring(0, index) + '_' + attributeName.substring(index, attributeName.length);
+            } else if (attributeName === 'TEXCOORD' || attributeName === 'COLOR' || attributeName === 'JOINTS' || attributeName === 'WEIGHTS') {
+                attributeName += '_0';
+            } else if (attributeName === 'UV') {
+                attributeName = 'TEXCOORD_0';
+            }
+
+            convertedNames[attribute] = attributeName;
+            attributes[attributeName] = (this._accessorLoader.getAccessor(primitive.attributes[attribute]))!;
+        }
+
+        if ((primitive.indices || primitive.indices === 0) && !indices)
+            indices = this._accessorLoader.getAccessor(primitive.indices);
+
+        // reading and assigning morph targets
+        if (primitive.targets) {
+            for (let i = 0; i < primitive.targets.length; i++) {
+                for (let target in primitive.targets[i]) {
+                    if (!attributes[target]) continue;
+                    attributes[convertedNames[target]].morphAttributeData.push((this._accessorLoader.getAccessor(primitive.targets[i][target]))!);
+                }
+            }
+        }
+
+        let material = null;
+        if (primitive.material || primitive.material === 0) 
+            material = this._materialLoader.getMaterial(primitive.material);
+
+        const primitiveData = new PrimitiveData(attributes, primitive.mode, indices, material);
+
+        if (primitive.extensions && primitive.extensions[GLTF_EXTENSIONS.KHR_MATERIALS_VARIANTS]) {
+            this._materialVariantsData.primitiveData.push(primitiveData);
+            const variantsExtension = primitive.extensions[GLTF_EXTENSIONS.KHR_MATERIALS_VARIANTS];
+
+            for (let i = 0; i < variantsExtension.mappings.length; i++) {
+                const mapping = variantsExtension.mappings[i];
+                const material = this._materialLoader.getMaterial(mapping.material);
+                for (let j = 0; j < mapping.variants.length; j++)
+                    primitiveData.materialVariants.push({ variant: mapping.variants[j], material });
+            }
+        }
+
+        const geometryData = new GeometryData(primitiveData);
+        geometryData.morphWeights = weights;
+        primitiveNode.data.push(geometryData);
+        return primitiveNode;
+    }
+
+    // #endregion Private Methods (1)
+}