@shapediver/viewer.data-engine.geometry-engine 1.13.10 → 1.14.2

package/dist/gltfv2/GLTFLoader.js

@@ -13,37 +13,52 @@ exports.GLTFLoader = exports.GLTF_EXTENSIONS = void 0;
 const viewer_shared_node_tree_1 = require("@shapediver/viewer.shared.node-tree");
 const viewer_shared_services_1 = require("@shapediver/viewer.shared.services");
 const tsyringe_1 = require("tsyringe");
-const viewer_data_engine_shared_types_1 = require("@shapediver/viewer.data-engine.shared-types");
 const gl_matrix_1 = require("gl-matrix");
 const viewer_shared_types_1 = require("@shapediver/viewer.shared.types");
-const viewer_data_engine_material_engine_1 = require("@shapediver/viewer.data-engine.material-engine");
+const viewer_rendering_engine_camera_engine_1 = require("@shapediver/viewer.rendering-engine.camera-engine");
+const viewer_rendering_engine_light_engine_1 = require("@shapediver/viewer.rendering-engine.light-engine");
+const BufferLoader_1 = require("./loaders/BufferLoader");
+const BufferViewLoader_1 = require("./loaders/BufferViewLoader");
+const AccessorLoader_1 = require("./loaders/AccessorLoader");
+const TextureLoader_1 = require("./loaders/TextureLoader");
+const MaterialLoader_1 = require("./loaders/MaterialLoader");
+const GeometryLoader_1 = require("./loaders/GeometryLoader");
 var GLTF_EXTENSIONS;
 (function (GLTF_EXTENSIONS) {
     GLTF_EXTENSIONS["KHR_BINARY_GLTF"] = "KHR_binary_glTF";
+    GLTF_EXTENSIONS["KHR_DRACO_MESH_COMPRESSION"] = "KHR_draco_mesh_compression";
+    GLTF_EXTENSIONS["KHR_LIGHTS_PUNCTUAL"] = "KHR_lights_punctual";
+    GLTF_EXTENSIONS["KHR_MATERIALS_CLEARCOAT"] = "KHR_materials_clearcoat";
+    GLTF_EXTENSIONS["KHR_MATERIALS_IOR"] = "KHR_materials_ior";
     GLTF_EXTENSIONS["KHR_MATERIALS_PBRSPECULARGLOSSINESS"] = "KHR_materials_pbrSpecularGlossiness";
+    GLTF_EXTENSIONS["KHR_MATERIALS_SHEEN"] = "KHR_materials_sheen";
+    GLTF_EXTENSIONS["KHR_MATERIALS_SPECULAR"] = "KHR_materials_specular";
+    GLTF_EXTENSIONS["KHR_MATERIALS_TRANSMISSION"] = "KHR_materials_transmission";
     GLTF_EXTENSIONS["KHR_MATERIALS_UNLIT"] = "KHR_materials_unlit";
+    GLTF_EXTENSIONS["KHR_MATERIALS_VARIANTS"] = "KHR_materials_variants";
+    GLTF_EXTENSIONS["KHR_MATERIALS_VOLUME"] = "KHR_materials_volume";
+    GLTF_EXTENSIONS["KHR_MESH_QUANTIZATION"] = "KHR_mesh_quantization";
+    GLTF_EXTENSIONS["KHR_TEXTURE_TRANSFORM"] = "KHR_texture_transform";
     GLTF_EXTENSIONS["SHAPEDIVER_MATERIALS_PRESET"] = "SHAPEDIVER_materials_preset";
 })(GLTF_EXTENSIONS = exports.GLTF_EXTENSIONS || (exports.GLTF_EXTENSIONS = {}));
+const DRACO = require('./draco/draco_decoder.js');
 class GLTFLoader {
     constructor() {
-        // #region Properties (6)
+        // #region Properties (17)
         this.BINARY_EXTENSION_HEADER_LENGTH = 20;
+        this._converter = tsyringe_1.container.resolve(viewer_shared_services_1.Converter);
+        this._globalTransformation = gl_matrix_1.mat4.fromValues(1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1);
         this._httpClient = tsyringe_1.container.resolve(viewer_shared_services_1.HttpClient);
-        this._materialEngine = tsyringe_1.container.resolve(viewer_data_engine_material_engine_1.MaterialEngine);
-        this._uuidGenerator = tsyringe_1.container.resolve(viewer_shared_services_1.UuidGenerator);
         this._logger = tsyringe_1.container.resolve(viewer_shared_services_1.Logger);
-        this._globalTransformation = gl_matrix_1.mat4.fromValues(1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1);
-        this._converter = tsyringe_1.container.resolve(viewer_shared_services_1.Converter);
         this._performanceEvaluator = tsyringe_1.container.resolve(viewer_shared_services_1.PerformanceEvaluator);
-        this._loaded = {};
-        this._loadData = this._httpClient.loadData.bind(this._httpClient);
+        this._uuidGenerator = tsyringe_1.container.resolve(viewer_shared_services_1.UuidGenerator);
         this._nodes = {};
-        // #endregion Private Methods (9)
+        // #endregion Private Methods (7)
     }
-    // #endregion Properties (6)
-    // #region Public Methods (1)
+    // #endregion Properties (17)
+    // #region Public Methods (2)
     load(content, gltfBinary, gltfHeader, baseUri) {
-        var _a;
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
             this._baseUri = baseUri;
             if (gltfBinary && gltfHeader)
@@ -51,10 +66,59 @@ class GLTFLoader {
             this._content = content;
             try {
                 this.validateVersionAndExtensions();
-                const node = yield this.loadScene();
+                const dracoModule = yield new DRACO();
+                this._bufferLoader = new BufferLoader_1.BufferLoader(this._content, this._body, this._baseUri);
+                yield this._bufferLoader.load();
+                this._bufferViewLoader = new BufferViewLoader_1.BufferViewLoader(this._content, this._bufferLoader);
+                this._bufferViewLoader.load();
+                this._accessorLoader = new AccessorLoader_1.AccessorLoader(this._content, this._bufferViewLoader);
+                this._accessorLoader.load();
+                this._textureLoader = new TextureLoader_1.TextureLoader(this._content, this._bufferViewLoader, this._baseUri);
+                yield this._textureLoader.load();
+                this._materialLoader = new MaterialLoader_1.MaterialLoader(this._content, this._textureLoader);
+                yield this._materialLoader.load();
+                this._geometryLoader = new GeometryLoader_1.GeometryLoader(this._content, this._accessorLoader, this._bufferViewLoader, this._materialLoader, dracoModule);
+                const node = this.loadScene();
+                if (this._content.extensions && this._content.extensions[GLTF_EXTENSIONS.KHR_MATERIALS_VARIANTS]) {
+                    const variants = this._content.extensions[GLTF_EXTENSIONS.KHR_MATERIALS_VARIANTS].variants;
+                    for (let i = 0; i < variants.length; i++)
+                        this._geometryLoader.materialVariantsData.variants.push(variants[i].name);
+                    this._geometryLoader.materialVariantsData.variantIndex = 0;
+                    node.data.push(this._geometryLoader.materialVariantsData);
+                }
+                if (this._content.skins !== undefined && this._content.nodes !== undefined) {
+                    for (let i = 0; i < ((_a = this._content.nodes) === null || _a === void 0 ? void 0 : _a.length); i++) {
+                        if (this._content.nodes[i].skin !== undefined) {
+                            const skinDef = this.loadSkin(this._content.nodes[i].skin);
+                            const skinNode = this._nodes[i];
+                            const bones = [];
+                            const boneInverses = [];
+                            for (let j = 0; j < skinDef.joints.length; j++) {
+                                this._nodes[skinDef.joints[j]].bone = true;
+                                bones.push(this._nodes[skinDef.joints[j]]);
+                                let mat = gl_matrix_1.mat4.create();
+                                if (skinDef.inverseBindMatrices !== undefined) {
+                                    const matricesArray = skinDef.inverseBindMatrices.array;
+                                    mat = gl_matrix_1.mat4.fromValues(matricesArray[j * 16 + 0], matricesArray[j * 16 + 1], matricesArray[j * 16 + 2], matricesArray[j * 16 + 3], matricesArray[j * 16 + 4], matricesArray[j * 16 + 5], matricesArray[j * 16 + 6], matricesArray[j * 16 + 7], matricesArray[j * 16 + 8], matricesArray[j * 16 + 9], matricesArray[j * 16 + 10], matricesArray[j * 16 + 11], matricesArray[j * 16 + 12], matricesArray[j * 16 + 13], matricesArray[j * 16 + 14], matricesArray[j * 16 + 15]);
+                                }
+                                boneInverses.push(mat);
+                            }
+                            const addBones = (node) => {
+                                for (let j = 0; j < node.data.length; j++)
+                                    if (node.data[j] instanceof viewer_shared_types_1.GeometryData) {
+                                        node.data[j].bones = bones;
+                                        node.data[j].boneInverses = boneInverses;
+                                    }
+                                for (let l = 0; l < node.children.length; l++)
+                                    addBones(node.children[l]);
+                            };
+                            addBones(skinNode);
+                        }
+                    }
+                }
                 if (this._content.animations)
-                    for (let i = 0; i < ((_a = this._content.animations) === null || _a === void 0 ? void 0 : _a.length); i++)
-                        node.data.push(yield this.loadAnimation(i));
+                    for (let i = 0; i < ((_b = this._content.animations) === null || _b === void 0 ? void 0 : _b.length); i++)
+                        node.data.push(this.loadAnimation(i));
                 return node;
             }
             catch (e) {
@@ -76,405 +140,263 @@ class GLTFLoader {
             catch (e) {
                 throw this._logger.handleError(viewer_shared_services_1.LOGGINGTOPIC.DATA_PROCESSING, `GLTFLoader.load`, e);
             }
+            let gltfContent, gltfBinary, gltfBaseUrl, gltfHeader;
             const magic = new TextDecoder().decode(new Uint8Array(axiosResponse.data, 0, 4));
             const isBinary = magic === 'glTF' || (axiosResponse.headers['content-type'] &&
                 (axiosResponse.headers['content-type'] === 'model/gltf-binary' ||
                     axiosResponse.headers['content-type'] === 'application/octet-stream' ||
                     axiosResponse.headers['content-type'] === 'model/gltf.binary'));
             if (isBinary) {
-                const binaryGeometry = axiosResponse.data;
+                gltfBinary = axiosResponse.data;
                 // create header data
-                const headerDataView = new DataView(binaryGeometry, 0, this.BINARY_EXTENSION_HEADER_LENGTH);
-                const header = {
+                const headerDataView = new DataView(gltfBinary, 0, this.BINARY_EXTENSION_HEADER_LENGTH);
+                gltfHeader = {
                     magic: magic,
                     version: headerDataView.getUint32(4, true),
                     length: headerDataView.getUint32(8, true),
                     contentLength: headerDataView.getUint32(12, true),
                     contentFormat: headerDataView.getUint32(16, true)
                 };
-                if (header.magic != 'glTF') {
+                if (gltfHeader.magic != 'glTF') {
                     const error = new viewer_shared_services_1.ShapeDiverViewerDataProcessingError('GLTFLoader.load: Invalid data: sdgTF magic wrong.');
                     throw this._logger.handleError(viewer_shared_services_1.LOGGINGTOPIC.DATA_PROCESSING, `GLTFLoader.load`, error);
                 }
                 // create content
-                const contentDataView = new DataView(binaryGeometry, this.BINARY_EXTENSION_HEADER_LENGTH, header.contentLength);
+                const contentDataView = new DataView(gltfBinary, this.BINARY_EXTENSION_HEADER_LENGTH, gltfHeader.contentLength);
                 const contentDecoded = new TextDecoder().decode(contentDataView);
-                this._content = JSON.parse(contentDecoded);
+                gltfContent = JSON.parse(contentDecoded);
                 // create body
-                this._body = binaryGeometry.slice(this.BINARY_EXTENSION_HEADER_LENGTH + header.contentLength + 8, header.length);
+                this._body = gltfBinary.slice(this.BINARY_EXTENSION_HEADER_LENGTH + gltfHeader.contentLength + 8, gltfHeader.length);
             }
             else {
-                this._content = JSON.parse(new TextDecoder().decode(axiosResponse.data));
+                gltfContent = JSON.parse(new TextDecoder().decode(axiosResponse.data));
                 const removeLastDirectoryPartOf = (the_url) => {
                     const dir_char = the_url.includes("/") ? "/" : "\\";
                     const the_arr = the_url.split(dir_char);
                     the_arr.pop();
                     return the_arr.join(dir_char);
                 };
-                this._baseUri = removeLastDirectoryPartOf(url);
-                if (!this._baseUri && window && window.location && window.location.href)
-                    this._baseUri = removeLastDirectoryPartOf(window.location.href);
-            }
-            try {
-                this.validateVersionAndExtensions();
-                const node = yield this.loadScene();
-                this._performanceEvaluator.endSection('gltfProcessing.' + url);
-                return node;
-            }
-            catch (e) {
-                throw this._logger.handleError(viewer_shared_services_1.LOGGINGTOPIC.DATA_PROCESSING, `GLTFLoader.load`, e);
-            }
-        });
-    }
-    // #endregion Public Methods (1)
-    // #region Private Methods (9)
-    loadAccessor(accessorId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this._content.accessors)
-                throw new Error('Accessors not available.');
-            if (!this._content.accessors[accessorId])
-                throw new Error('Accessor not available.');
-            const accessor = this._content.accessors[accessorId];
-            if (this._loaded['accessor'] && this._loaded['accessor'][accessorId])
-                return this._loaded['accessor'][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).
-                return Promise.resolve(null);
-            }
-            const arrayBuffer = yield this.loadBufferView(accessor.bufferView);
-            const itemSize = viewer_data_engine_shared_types_1.ACCESSORTYPE_V2[accessor.type];
-            if (accessor.componentType === 5124)
-                this._logger.warn(viewer_shared_services_1.LOGGINGTOPIC.DATA_PROCESSING, 'GLTFLoader.loadAccessor: The componentType for this accessor is 5124, which is not allowed. Trying to load it anyway.');
-            const ArrayType = viewer_data_engine_shared_types_1.ACCESSORCOMPONENTTYPE_V2[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);
-                }
+                gltfBaseUrl = removeLastDirectoryPartOf(url);
+                if (!gltfBaseUrl && window && window.location && window.location.href)
+                    gltfBaseUrl = removeLastDirectoryPartOf(window.location.href);
             }
-            if (accessor.sparse !== undefined) {
-                const itemSizeIndices = viewer_data_engine_shared_types_1.ACCESSORTYPE_V2.SCALAR;
-                const IndicesArrayType = viewer_data_engine_shared_types_1.ACCESSORCOMPONENTTYPE_V2[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(yield this.loadBufferView(accessor.sparse.indices.bufferView), byteOffsetIndices, accessor.sparse.count * itemSizeIndices);
-                const sparseValues = new ArrayType(yield this.loadBufferView(accessor.sparse.values.bufferView), byteOffsetValues, accessor.sparse.count * itemSize);
-                if (!this._loaded['accessor'])
-                    this._loaded['accessor'] = {};
-                this._loaded['accessor'][accessorId] = new viewer_shared_types_1.AttributeData(array, itemSize, itemBytes, byteOffset, elementBytes, normalized, accessor.count, accessor.min, accessor.max, byteStride, true, sparseIndices, sparseValues);
-                return this._loaded['accessor'][accessorId];
-            }
-            if (!this._loaded['accessor'])
-                this._loaded['accessor'] = {};
-            this._loaded['accessor'][accessorId] = new viewer_shared_types_1.AttributeData(array, itemSize, itemBytes, byteOffset, elementBytes, normalized, accessor.count, accessor.min, accessor.max, byteStride);
-            return this._loaded['accessor'][accessorId];
+            return yield this.load(gltfContent, gltfBinary, gltfHeader, gltfBaseUrl);
         });
     }
-    loadBuffer(bufferId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this._content.buffers)
-                throw new Error('Buffers not available.');
-            if (!this._content.buffers[bufferId])
-                throw new Error('Buffer not available.');
-            const buffer = this._content.buffers[bufferId];
-            if (this._loaded['buffer'] && this._loaded['buffer'][bufferId])
-                return this._loaded['buffer'][bufferId];
-            if (buffer.type && buffer.type !== 'arraybuffer') {
-                throw new Error(`GLTFLoader.loadBuffer: ${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(`GLTFLoader.loadBuffer: Buffer not available.`);
-                return Promise.resolve(this._body);
-            }
-            const dataUriRegex = /^data:(.*?)(;base64)?,(.*)$/;
-            const dataUriRegexResult = buffer.uri.match(dataUriRegex);
-            let result;
-            // 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);
-                }
-                result = view.buffer;
-            }
-            else {
-                let httpResult = yield this._httpClient.get(this._baseUri + '/' + buffer.uri, {
-                    responseType: 'arraybuffer'
-                });
-                result = (httpResult.data);
-            }
-            if (!this._loaded['buffer'])
-                this._loaded['buffer'] = {};
-            this._loaded['buffer'][bufferId] = result;
-            return this._loaded['buffer'][bufferId];
-        });
-    }
-    loadBufferView(bufferViewId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this._content.bufferViews)
-                throw new Error('BufferViews not available.');
-            if (!this._content.bufferViews[bufferViewId])
-                throw new Error('BufferView not available.');
-            const bufferView = this._content.bufferViews[bufferViewId];
-            if (this._loaded['bufferView'] && this._loaded['bufferView'][bufferViewId])
-                return this._loaded['bufferView'][bufferViewId];
-            const byteLength = bufferView.byteLength || 0;
-            const byteOffset = bufferView.byteOffset || 0;
-            if (bufferView.buffer === undefined)
-                throw new Error('BufferView has no buffer defined.');
-            const buffer = yield this.loadBuffer(bufferView.buffer);
-            const result = buffer.slice(byteOffset, byteOffset + byteLength);
-            if (!this._loaded['bufferView'])
-                this._loaded['bufferView'] = {};
-            this._loaded['bufferView'][bufferViewId] = result;
-            return this._loaded['bufferView'][bufferViewId];
-        });
-    }
-    loadMap(textureId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this._content.textures)
-                throw new Error('Textures not available.');
-            const texture = this._content.textures[textureId];
-            if (this._loaded['texture'] && this._loaded['texture'][textureId])
-                return this._loaded['texture'][textureId].clone();
-            if (!this._content.images)
-                throw new Error('Images not available.');
-            const image = this._content.images[texture.source];
-            const sampler = this._content.samplers && texture.sampler && this._content.samplers[texture.sampler] ? this._content.samplers[texture.sampler] : {};
-            const DATA_URI_REGEX = /^data:(.*?)(;base64)?,(.*)$/;
-            const HTTPS_URI_REGEX = /^https:\/\//;
-            let mapData;
-            if (image.bufferView !== undefined) {
-                const bufferView = yield this.loadBufferView(image.bufferView);
-                const dataView = new DataView(bufferView);
-                const array = [];
-                for (let i = 0; i < dataView.byteLength; i += 1)
-                    array[i] = dataView.getUint8(i);
-                const blob = new Blob([new Uint8Array(array)], { type: image.mimeType });
-                const dataUri = window.URL.createObjectURL(blob);
-                mapData = new viewer_shared_types_1.MapData(yield this._converter.responseToImage(yield this._loadData(dataUri)), sampler.wrapS, sampler.wrapT, sampler.minFilter, sampler.magFilter, undefined, undefined, undefined, undefined, undefined, false);
-            }
-            else {
-                const url = DATA_URI_REGEX.test(image.uri) || HTTPS_URI_REGEX.test(image.uri) ? image.uri : `${this._baseUri}/${image.uri}`;
-                mapData = new viewer_shared_types_1.MapData(yield this._converter.responseToImage(yield this._loadData(url)), sampler.wrapS, sampler.wrapT, sampler.minFilter, sampler.magFilter, undefined, undefined, undefined, undefined, undefined, false);
-            }
-            if (!this._loaded['texture'])
-                this._loaded['texture'] = {};
-            this._loaded['texture'][textureId] = mapData;
-            return this._loaded['texture'][textureId].clone();
-        });
+    // #endregion Public Methods (2)
+    // #region Private Methods (7)
+    /**
+         * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#animations
+         * @param {number} animationIndex
+         * @return {Promise<AnimationClip>}
+         */
+    loadAnimation(animationId) {
+        if (!this._content.animations)
+            throw new Error('Animations not available.');
+        if (!this._content.animations[animationId])
+            throw new Error('Animations not available.');
+        const animationDef = this._content.animations[animationId];
+        const animationTracks = [];
+        let min = Infinity, max = -Infinity;
+        for (let i = 0; i < animationDef.channels.length; i++) {
+            const channel = animationDef.channels[i];
+            const sampler = animationDef.samplers[channel.sampler];
+            const target = channel.target;
+            const path = target.path;
+            const node = this._nodes[target.node];
+            if (node === undefined)
+                throw new Error('Animation node not available.');
+            const input = this._accessorLoader.getAccessor(sampler.input);
+            min = Math.min(min, input.min[0]);
+            max = Math.max(max, input.max[0]);
+            const output = this._accessorLoader.getAccessor(sampler.output);
+            let interpolation = sampler.interpolation;
+            if (interpolation === 'CUBICSPLINE') {
+                this._logger.warn(viewer_shared_services_1.LOGGINGTOPIC.DATA_PROCESSING, 'Animation with CUBICSPLINE interpolation is currently not supported. Assigning linear interpolation instead.');
+                interpolation = 'linear';
+            }
+            animationTracks.push({
+                node,
+                times: input.array,
+                values: output.array,
+                path: path,
+                interpolation: interpolation === null || interpolation === void 0 ? void 0 : interpolation.toLowerCase()
+            });
+        }
+        return new viewer_shared_types_1.AnimationData(animationDef.name || 'gltf_animation_' + animationId, animationTracks, min, max - min);
     }
-    loadMaterial(materialId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this._content.materials)
-                throw new Error('Materials not available.');
-            const material = this._content.materials[materialId];
-            const materialData = new viewer_shared_types_1.MaterialData();
-            if (material.name !== undefined)
-                materialData.name = material.name;
-            if (material.extensions && material.extensions.SHAPEDIVER_materials_preset) {
-                const materialPreset = material.extensions.SHAPEDIVER_materials_preset;
-                yield this._materialEngine.loadPresetMaterial(materialPreset.materialpreset, materialData);
-                materialData.color = this._converter.toColor(materialPreset.color);
-                return materialData;
-            }
-            if (material.extensions && material.extensions.KHR_materials_pbrSpecularGlossiness) {
-                const pbrSpecularGlossiness = material.extensions.KHR_materials_pbrSpecularGlossiness;
-                materialData.KHR_materials_pbrSpecularGlossiness = true;
-                materialData.color = '#ffffff';
-                materialData.opacity = 1.0;
-                if (pbrSpecularGlossiness.diffuseFactor !== undefined) {
-                    materialData.color = this._converter.toColor([pbrSpecularGlossiness.diffuseFactor[0] * 255, pbrSpecularGlossiness.diffuseFactor[1] * 255, pbrSpecularGlossiness.diffuseFactor[2] * 255]);
-                    materialData.opacity = pbrSpecularGlossiness.diffuseFactor[3];
-                }
-                if (pbrSpecularGlossiness.diffuseTexture !== undefined)
-                    materialData.map = yield this.loadMap(pbrSpecularGlossiness.diffuseTexture.index);
-                materialData.emissiveness = '#000000';
-                materialData.glossiness = pbrSpecularGlossiness.glossinessFactor !== undefined ? pbrSpecularGlossiness.glossinessFactor : 1.0;
-                materialData.specular = '#ffffff';
-                if (pbrSpecularGlossiness.specularFactor !== undefined) {
-                    materialData.specular = this._converter.toColor([pbrSpecularGlossiness.specularFactor[0] * 255, pbrSpecularGlossiness.specularFactor[1] * 255, pbrSpecularGlossiness.specularFactor[2] * 255]);
-                }
-                if (pbrSpecularGlossiness.specularGlossinessTexture !== undefined) {
-                    materialData.specularGlossinessMap = yield this.loadMap(pbrSpecularGlossiness.specularGlossinessTexture.index);
-                }
-            }
-            else if (material.extensions && material.extensions.KHR_materials_unlit) {
-                materialData.KHR_materials_unlit = true;
-                materialData.color = '#ffffff';
-                materialData.opacity = 1.0;
-                if (material.pbrMetallicRoughness !== undefined) {
-                    if (material.pbrMetallicRoughness.baseColorFactor !== undefined) {
-                        materialData.color = this._converter.toColor([material.pbrMetallicRoughness.baseColorFactor[0] * 255, material.pbrMetallicRoughness.baseColorFactor[1] * 255, material.pbrMetallicRoughness.baseColorFactor[2] * 255]);
-                        materialData.opacity = material.pbrMetallicRoughness.baseColorFactor[3];
-                    }
-                    if (material.pbrMetallicRoughness.baseColorTexture !== undefined) {
-                        materialData.map = yield this.loadMap(material.pbrMetallicRoughness.baseColorTexture.index);
-                    }
-                }
-            }
-            else {
-                if (material.pbrMetallicRoughness !== undefined) {
-                    materialData.color = '#ffffff';
-                    if (material.pbrMetallicRoughness.baseColorFactor !== undefined) {
-                        materialData.color = this._converter.toColor([material.pbrMetallicRoughness.baseColorFactor[0] * 255, material.pbrMetallicRoughness.baseColorFactor[1] * 255, material.pbrMetallicRoughness.baseColorFactor[2] * 255]);
-                        materialData.opacity = material.pbrMetallicRoughness.baseColorFactor[3];
-                    }
-                    if (material.pbrMetallicRoughness.baseColorTexture !== undefined) {
-                        materialData.map = yield this.loadMap(material.pbrMetallicRoughness.baseColorTexture.index);
-                    }
-                    if (material.pbrMetallicRoughness.metallicFactor !== undefined) {
-                        materialData.metalness = material.pbrMetallicRoughness.metallicFactor;
-                    }
-                    if (material.pbrMetallicRoughness.roughnessFactor !== undefined) {
-                        materialData.roughness = material.pbrMetallicRoughness.roughnessFactor;
-                    }
-                    if (material.pbrMetallicRoughness.metallicRoughnessTexture !== undefined) {
-                        materialData.metalnessRoughnessMap = yield this.loadMap(material.pbrMetallicRoughness.metallicRoughnessTexture.index);
-                    }
-                }
-            }
-            if (material.normalTexture !== undefined) {
-                materialData.normalMap = yield this.loadMap(material.normalTexture.index);
-                materialData.normalScale = 1;
-                if (material.normalTexture.scale !== undefined) {
-                    materialData.normalScale = material.normalTexture.scale;
-                }
-            }
-            if (material.occlusionTexture !== undefined) {
-                materialData.aoMap = yield this.loadMap(material.occlusionTexture.index);
-                if (material.occlusionTexture.strength !== undefined) {
-                    materialData.aoMapIntensity = material.occlusionTexture.strength;
-                }
-            }
-            if (material.emissiveTexture !== undefined) {
-                materialData.emissiveMap = yield this.loadMap(material.emissiveTexture.index);
-            }
-            if (material.emissiveFactor !== undefined) {
-                materialData.emissiveness = this._converter.toColor([material.emissiveFactor[0] * 255, material.emissiveFactor[1] * 255, material.emissiveFactor[2] * 255]);
-            }
-            if (material.alphaMode !== undefined) {
-                materialData.alphaMode = material.alphaMode.toLowerCase() === viewer_shared_types_1.MATERIAL_ALPHA.MASK ? viewer_shared_types_1.MATERIAL_ALPHA.MASK : material.alphaMode.toLowerCase() === viewer_shared_types_1.MATERIAL_ALPHA.BLEND ? viewer_shared_types_1.MATERIAL_ALPHA.BLEND : viewer_shared_types_1.MATERIAL_ALPHA.OPAQUE;
-                if (materialData.alphaMode === viewer_shared_types_1.MATERIAL_ALPHA.MASK) {
-                    materialData.alphaCutoff = material.alphaCutoff !== undefined ? material.alphaCutoff : 0.5;
-                }
-            }
-            if (material.alphaCutoff !== undefined) {
-                materialData.alphaCutoff = material.alphaCutoff;
-            }
-            if (material.doubleSided !== undefined) {
-                materialData.side = material.doubleSided ? viewer_shared_types_1.MATERIAL_SIDE.DOUBLE : viewer_shared_types_1.MATERIAL_SIDE.FRONT;
-            }
-            return materialData;
-        });
+    loadCamera(cameraId) {
+        if (!this._content.cameras)
+            throw new Error('Cameras not available.');
+        if (!this._content.cameras[cameraId])
+            throw new Error('Cameras not available.');
+        const cameraDef = this._content.cameras[cameraId];
+        const cameraNode = new viewer_shared_node_tree_1.TreeNode(cameraDef.name || 'camera_' + cameraId);
+        let cameraData;
+        if (cameraDef.type === 'perspective') {
+            const perspectiveCameraDef = cameraDef.perspective;
+            cameraData = new viewer_rendering_engine_camera_engine_1.PerspectiveCamera(cameraNode.id);
+            cameraNode.data.push(cameraData);
+            cameraData.fov = perspectiveCameraDef.yfov * (180 / Math.PI);
+            cameraData.aspect = perspectiveCameraDef.aspectRatio || 1;
+            cameraData.near = perspectiveCameraDef.znear || 1;
+            cameraData.far = perspectiveCameraDef.zfar || 2e6;
+        }
+        else {
+            const orthographicCameraDef = cameraDef.orthographic;
+            cameraData = new viewer_rendering_engine_camera_engine_1.OrthographicCamera(cameraNode.id);
+            cameraNode.data.push(cameraData);
+            cameraData.left = -orthographicCameraDef.xmag;
+            cameraData.right = orthographicCameraDef.xmag;
+            cameraData.top = -orthographicCameraDef.ymag;
+            cameraData.bottom = orthographicCameraDef.ymag;
+            cameraData.near = orthographicCameraDef.znear || 1;
+            cameraData.far = orthographicCameraDef.zfar || 2e6;
+        }
+        cameraData.useNodeData = true;
+        cameraData.node = cameraNode;
+        return cameraNode;
     }
-    loadMesh(meshId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this._content.meshes)
-                throw new Error('Meshes not available.');
-            if (!this._content.meshes[meshId])
-                throw new Error('Mesh not available.');
-            const mesh = this._content.meshes[meshId];
-            const meshNode = new viewer_shared_node_tree_1.TreeNode(mesh.name || 'mesh_' + meshId);
-            if (mesh.primitives)
-                for (let i = 0, len = mesh.primitives.length; i < len; i++)
-                    meshNode.addChild(yield this.loadPrimitive(mesh.primitives, i));
-            // weights https://shapediver.atlassian.net/browse/SS-2944
-            return meshNode;
-        });
+    loadLights(lightId) {
+        if (!this._content.extensions || !this._content.extensions[GLTF_EXTENSIONS.KHR_LIGHTS_PUNCTUAL] || !this._content.extensions[GLTF_EXTENSIONS.KHR_LIGHTS_PUNCTUAL].lights)
+            throw new Error(`Extension ${GLTF_EXTENSIONS.KHR_LIGHTS_PUNCTUAL} not available.`);
+        if (!this._content.extensions[GLTF_EXTENSIONS.KHR_LIGHTS_PUNCTUAL].lights[lightId])
+            throw new Error('Light not available.');
+        const lightDef = this._content.extensions[GLTF_EXTENSIONS.KHR_LIGHTS_PUNCTUAL].lights[lightId];
+        const lightNode = new viewer_shared_node_tree_1.TreeNode(lightDef.name || 'light_' + lightId);
+        let color = '#ffffffff';
+        if (lightDef.color !== undefined)
+            color = this._converter.toColor([lightDef.color[0] * 255, lightDef.color[1] * 255, lightDef.color[2] * 255]);
+        const range = lightDef.range !== undefined ? lightDef.range : 0;
+        let lightData;
+        if (lightDef.type === 'directional') {
+            lightData = new viewer_rendering_engine_light_engine_1.DirectionalLight({ color });
+            lightNode.data.push(lightData);
+            const directionalLightData = lightData;
+            if (lightDef.intensity !== undefined)
+                directionalLightData.intensity = lightDef.intensity;
+        }
+        else if (lightDef.type === 'point') {
+            lightData = new viewer_rendering_engine_light_engine_1.PointLight({ color });
+            lightNode.data.push(lightData);
+            const pointLightData = lightData;
+            pointLightData.distance = range;
+            pointLightData.decay = 2;
+            if (lightDef.intensity !== undefined)
+                lightData.intensity = lightDef.intensity;
+            pointLightData.position = [0, 0, 0];
+        }
+        else if (lightDef.type === 'spot') {
+            lightData = new viewer_rendering_engine_light_engine_1.SpotLight({ color });
+            lightNode.data.push(lightData);
+            lightDef.spot = lightDef.spot || {};
+            lightDef.spot.innerConeAngle = lightDef.spot.innerConeAngle !== undefined ? lightDef.spot.innerConeAngle : 0;
+            lightDef.spot.outerConeAngle = lightDef.spot.outerConeAngle !== undefined ? lightDef.spot.outerConeAngle : Math.PI / 4.0;
+            const spotLightData = lightData;
+            spotLightData.distance = range;
+            spotLightData.angle = lightDef.spot.outerConeAngle;
+            spotLightData.penumbra = 1.0 - lightDef.spot.innerConeAngle / lightDef.spot.outerConeAngle;
+            spotLightData.decay = 2;
+            if (lightDef.intensity !== undefined)
+                lightData.intensity = lightDef.intensity;
+            spotLightData.position = [0, 0, 0];
+            spotLightData.target = [0, 0, -1];
+        }
+        else {
+            throw new Error('Unexpected light type: ' + lightDef.type);
+        }
+        lightData.useNodeData = true;
+        return lightNode;
     }
     loadNode(nodeId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this._content.nodes)
-                throw new Error('Nodes not available.');
-            if (!this._content.nodes[nodeId])
-                throw new Error('Node not available.');
-            const node = this._content.nodes[nodeId];
-            const nodeDef = new viewer_shared_node_tree_1.TreeNode(node.name || 'node_' + nodeId);
-            this._nodes[nodeId] = nodeDef;
-            if (node.matrix) {
-                nodeDef.transformations.push({
-                    id: 'gltf_matrix',
-                    matrix: gl_matrix_1.mat4.fromValues(node.matrix[0], node.matrix[1], node.matrix[2], node.matrix[3], node.matrix[4], node.matrix[5], node.matrix[6], node.matrix[7], node.matrix[8], node.matrix[9], node.matrix[10], node.matrix[11], node.matrix[12], node.matrix[13], node.matrix[14], node.matrix[15])
-                });
-            }
-            else if (node.translation || node.scale || node.rotation) {
-                const matT = node.translation ? gl_matrix_1.mat4.fromTranslation(gl_matrix_1.mat4.create(), gl_matrix_1.vec3.fromValues(node.translation[0], node.translation[1], node.translation[2])) : gl_matrix_1.mat4.create();
-                const matS = node.scale ? gl_matrix_1.mat4.fromScaling(gl_matrix_1.mat4.create(), gl_matrix_1.vec3.fromValues(node.scale[0], node.scale[1], node.scale[2])) : gl_matrix_1.mat4.create();
-                const matR = node.rotation ? gl_matrix_1.mat4.fromQuat(gl_matrix_1.mat4.create(), gl_matrix_1.vec4.fromValues(node.rotation[0], node.rotation[1], node.rotation[2], node.rotation[3])) : gl_matrix_1.mat4.create();
-                const matrix = gl_matrix_1.mat4.mul(gl_matrix_1.mat4.create(), gl_matrix_1.mat4.mul(gl_matrix_1.mat4.create(), matT, matR), matS);
-                nodeDef.transformations.push({
-                    id: 'gltf_matrix',
-                    matrix: matrix
-                });
-            }
-            if (node.mesh !== undefined)
-                nodeDef.addChild(yield this.loadMesh(node.mesh));
-            if (node.children) {
-                for (let i = 0, len = node.children.length; i < len; i++) {
-                    // got through all children
-                    nodeDef.addChild(yield this.loadNode(node.children[i]));
-                }
+        if (!this._content.nodes)
+            throw new Error('Nodes not available.');
+        if (!this._content.nodes[nodeId])
+            throw new Error('Node not available.');
+        const node = this._content.nodes[nodeId];
+        const nodeDef = new viewer_shared_node_tree_1.TreeNode(node.name || 'node_' + nodeId);
+        this._nodes[nodeId] = nodeDef;
+        if (node.matrix) {
+            nodeDef.transformations.push({
+                id: 'gltf_matrix',
+                matrix: gl_matrix_1.mat4.fromValues(node.matrix[0], node.matrix[1], node.matrix[2], node.matrix[3], node.matrix[4], node.matrix[5], node.matrix[6], node.matrix[7], node.matrix[8], node.matrix[9], node.matrix[10], node.matrix[11], node.matrix[12], node.matrix[13], node.matrix[14], node.matrix[15])
+            });
+            nodeDef.transformations.push({
+                id: 'gltf_matrix_translation',
+                matrix: gl_matrix_1.mat4.create()
+            });
+            nodeDef.transformations.push({
+                id: 'gltf_matrix_rotation',
+                matrix: gl_matrix_1.mat4.create()
+            });
+            nodeDef.transformations.push({
+                id: 'gltf_matrix_scale',
+                matrix: gl_matrix_1.mat4.create()
+            });
+        }
+        else if (node.translation || node.scale || node.rotation) {
+            const matT = node.translation ? gl_matrix_1.mat4.fromTranslation(gl_matrix_1.mat4.create(), gl_matrix_1.vec3.fromValues(node.translation[0], node.translation[1], node.translation[2])) : gl_matrix_1.mat4.create();
+            const matS = node.scale ? gl_matrix_1.mat4.fromScaling(gl_matrix_1.mat4.create(), gl_matrix_1.vec3.fromValues(node.scale[0], node.scale[1], node.scale[2])) : gl_matrix_1.mat4.create();
+            const matR = node.rotation ? gl_matrix_1.mat4.fromQuat(gl_matrix_1.mat4.create(), gl_matrix_1.vec4.fromValues(node.rotation[0], node.rotation[1], node.rotation[2], node.rotation[3])) : gl_matrix_1.mat4.create();
+            nodeDef.transformations.push({
+                id: 'gltf_matrix_translation',
+                matrix: matT
+            });
+            nodeDef.transformations.push({
+                id: 'gltf_matrix_rotation',
+                matrix: matR
+            });
+            nodeDef.transformations.push({
+                id: 'gltf_matrix_scale',
+                matrix: matS
+            });
+        }
+        if (node.mesh !== undefined)
+            nodeDef.addChild(this._geometryLoader.loadMesh(node.mesh, node.weights));
+        if (node.camera !== undefined)
+            nodeDef.addChild(this.loadCamera(node.camera));
+        if (node.extensions && node.extensions[GLTF_EXTENSIONS.KHR_LIGHTS_PUNCTUAL])
+            nodeDef.addChild(this.loadLights(node.extensions[GLTF_EXTENSIONS.KHR_LIGHTS_PUNCTUAL].light));
+        if (node.children) {
+            for (let i = 0, len = node.children.length; i < len; i++) {
+                // got through all children
+                nodeDef.addChild(this.loadNode(node.children[i]));
             }
-            // camera, skin, weights https://shapediver.atlassian.net/browse/SS-2944
-            return nodeDef;
-        });
+        }
+        return nodeDef;
     }
-    loadPrimitive(primitives, index) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const primitive = primitives[index];
-            const primitiveNode = new viewer_shared_node_tree_1.TreeNode('primitive_' + index);
-            const attributes = {};
-            for (let attribute in primitive.attributes) {
-                // attribute name conversion to be consistent witg gltf
-                let attributeName = attribute;
-                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';
-                }
-                attributes[attributeName] = (yield this.loadAccessor(primitive.attributes[attribute]));
-            }
-            let indices = null;
-            if (primitive.indices || primitive.indices === 0)
-                indices = yield this.loadAccessor(primitive.indices);
-            let material = null;
-            if (primitive.material || primitive.material === 0)
-                material = yield this.loadMaterial(primitive.material);
-            primitiveNode.data.push(new viewer_shared_types_1.GeometryData(new viewer_shared_types_1.PrimitiveData(attributes, primitive.mode, indices, material)));
-            // targets https://shapediver.atlassian.net/browse/SS-2944
-            return primitiveNode;
+    loadScene() {
+        if (!this._content.scenes)
+            throw new Error('Scenes not available.');
+        const sceneID = this._content.scene || 0;
+        if (!this._content.scenes[sceneID])
+            throw new Error('Scene not available.');
+        const scene = this._content.scenes[sceneID];
+        const sceneDef = new viewer_shared_node_tree_1.TreeNode(scene.name || 'scene_' + sceneID + '');
+        sceneDef.transformations.push({
+            id: this._uuidGenerator.create(),
+            matrix: this._globalTransformation
         });
+        if (scene.nodes)
+            for (let i = 0, len = scene.nodes.length; i < len; i++)
+                sceneDef.addChild(this.loadNode(scene.nodes[i]));
+        return sceneDef;
+    }
+    loadSkin(skinId) {
+        if (!this._content.skins)
+            throw new Error('Skins not available.');
+        if (!this._content.skins[skinId])
+            throw new Error('Skin not available.');
+        const skinDef = this._content.skins[skinId];
+        const skinEntry = {
+            joints: skinDef.joints,
+            inverseBindMatrices: null
+        };
+        if (skinDef.inverseBindMatrices === undefined) {
+            return skinEntry;
+        }
+        skinEntry.inverseBindMatrices = this._accessorLoader.getAccessor(skinDef.inverseBindMatrices);
+        return skinEntry;
     }
     validateVersionAndExtensions() {
         if (!this._content.asset)
@@ -516,71 +438,6 @@ class GLTFLoader {
             }
         }
     }
-    loadScene() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this._content.scenes)
-                throw new Error('Scenes not available.');
-            const sceneID = this._content.scene || 0;
-            if (!this._content.scenes[sceneID])
-                throw new Error('Scene not available.');
-            const scene = this._content.scenes[sceneID];
-            const sceneDef = new viewer_shared_node_tree_1.TreeNode(scene.name || 'scene_' + sceneID + '');
-            sceneDef.transformations.push({
-                id: this._uuidGenerator.create(),
-                matrix: this._globalTransformation
-            });
-            if (scene.nodes)
-                for (let i = 0, len = scene.nodes.length; i < len; i++)
-                    sceneDef.addChild(yield this.loadNode(scene.nodes[i]));
-            return sceneDef;
-        });
-    }
-    /**
-     * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#animations
-     * @param {number} animationIndex
-     * @return {Promise<AnimationClip>}
-     */
-    loadAnimation(animationId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this._content.animations)
-                throw new Error('Animations not available.');
-            if (!this._content.animations[animationId])
-                throw new Error('Animations not available.');
-            const animationDef = this._content.animations[animationId];
-            const animationTracks = [];
-            let min = Infinity, max = -Infinity;
-            for (let i = 0; i < animationDef.channels.length; i++) {
-                const channel = animationDef.channels[i];
-                const sampler = animationDef.samplers[channel.sampler];
-                const target = channel.target;
-                const path = target.path;
-                const node = this._nodes[target.node];
-                if (node === undefined)
-                    throw new Error('Animation node not available.');
-                const input = yield this.loadAccessor(sampler.input);
-                min = Math.min(min, input.min[0]);
-                max = Math.max(max, input.max[0]);
-                const output = yield this.loadAccessor(sampler.output);
-                let interpolation = sampler.interpolation;
-                if (interpolation === 'CUBICSPLINE') {
-                    this._logger.warn(viewer_shared_services_1.LOGGINGTOPIC.DATA_PROCESSING, 'Animation with CUBICSPLINE interpolation is currently not supported. Assigning linear interpolation instead.');
-                    interpolation = 'linear';
-                }
-                if (target.path === 'weights') {
-                    this._logger.warn(viewer_shared_services_1.LOGGINGTOPIC.DATA_PROCESSING, 'Animation with weights is currently not supported.');
-                    break;
-                }
-                animationTracks.push({
-                    node,
-                    times: input.array,
-                    values: output.array,
-                    path: path,
-                    interpolation: interpolation === null || interpolation === void 0 ? void 0 : interpolation.toLowerCase()
-                });
-            }
-            return new viewer_shared_types_1.AnimationData(animationDef.name || 'gltf_animation_' + animationId, animationTracks, min, max - min);
-        });
-    }
 }
 exports.GLTFLoader = GLTFLoader;
 //# sourceMappingURL=GLTFLoader.js.map