@shapediver/viewer.data-engine.geometry-engine 2.10.1-rc.0 → 2.12.0

package/src/gltfv2/GLTFLoader.ts

@@ -1,39 +1,39 @@
-import { ITreeNode, TreeNode } from '@shapediver/viewer.shared.node-tree'
+import { ITreeNode, TreeNode } from '@shapediver/viewer.shared.node-tree';
 import {
-  Converter,
-  EventEngine,
-  EVENTTYPE,
-  HttpClient,
-  Logger,
-  PerformanceEvaluator,
-  ShapeDiverViewerDataProcessingError,
-  UuidGenerator,
-} from '@shapediver/viewer.shared.services'
-import { IGLTF_v2 } from '@shapediver/viewer.data-engine.shared-types'
-import { mat4, vec3, vec4 } from 'gl-matrix'
+    EventEngine,
+    EVENTTYPE,
+    HttpClient,
+    HttpResponse,
+    Logger,
+    PerformanceEvaluator,
+    ShapeDiverViewerDataProcessingError,
+    UuidGenerator,
+} from '@shapediver/viewer.shared.services';
+import { IGLTF_v2 } from '@shapediver/viewer.data-engine.shared-types';
+import { mat4, vec3, vec4 } from 'gl-matrix';
 import {
-  AnimationData,
-  IAnimationTrack,
-  AttributeData,
-  BoneData,
-  Color,
-  ITaskEvent,
-  TASK_TYPE
-} from '@shapediver/viewer.shared.types'
-import { OrthographicCamera, PerspectiveCamera } from '@shapediver/viewer.rendering-engine.camera-engine'
+    AnimationData,
+    IAnimationTrack,
+    AttributeData,
+    BoneData,
+    Color,
+    ITaskEvent,
+    TASK_TYPE
+} from '@shapediver/viewer.shared.types';
+import { OrthographicCamera, PerspectiveCamera } from '@shapediver/viewer.rendering-engine.camera-engine';
 import {
-  AbstractLight,
-  DirectionalLight,
-  PointLight,
-  SpotLight,
-} from '@shapediver/viewer.rendering-engine.light-engine'
-
-import { BufferLoader } from './loaders/BufferLoader'
-import { BufferViewLoader } from './loaders/BufferViewLoader'
-import { AccessorLoader } from './loaders/AccessorLoader'
-import { TextureLoader } from './loaders/TextureLoader'
-import { MaterialLoader } from './loaders/MaterialLoader'
-import { GeometryLoader } from './loaders/GeometryLoader'
+    AbstractLight,
+    DirectionalLight,
+    PointLight,
+    SpotLight,
+} from '@shapediver/viewer.rendering-engine.light-engine';
+
+import { BufferLoader } from './loaders/BufferLoader';
+import { BufferViewLoader } from './loaders/BufferViewLoader';
+import { AccessorLoader } from './loaders/AccessorLoader';
+import { TextureLoader } from './loaders/TextureLoader';
+import { MaterialLoader } from './loaders/MaterialLoader';
+import { GeometryLoader } from './loaders/GeometryLoader';
 
 export enum GLTF_EXTENSIONS {
     KHR_BINARY_GLTF = 'KHR_binary_glTF',
@@ -53,10 +53,11 @@ export enum GLTF_EXTENSIONS {
     SHAPEDIVER_MATERIALS_PRESET = 'SHAPEDIVER_materials_preset'
 }
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const DRACO = require('./draco/draco_decoder.js');
 
 export class GLTFLoader {
-    // #region Properties (17)
+    // #region Properties (22)
 
     private readonly BINARY_EXTENSION_HEADER_LENGTH = 20;
     private readonly _eventEngine: EventEngine = EventEngine.instance;
@@ -73,18 +74,18 @@ export class GLTFLoader {
     private _bufferLoader!: BufferLoader;
     private _bufferViewLoader!: BufferViewLoader;
     private _content!: IGLTF_v2;
-    private _eventId: string = "";
+    private _eventId: string = '';
     private _geometryLoader!: GeometryLoader;
     private _materialLoader!: MaterialLoader;
     private _nodes: {
         [key: number]: ITreeNode
     } = {};
-    private _numberOfNodes = 0;
     private _numberOfConvertedNodes = 0;
-    private _textureLoader!: TextureLoader;
+    private _numberOfNodes = 0;
     private _progressTimer = 0;
+    private _textureLoader!: TextureLoader;
 
-    // #endregion Properties (17)
+    // #endregion Properties (22)
 
     // #region Public Methods (2)
 
@@ -92,11 +93,11 @@ export class GLTFLoader {
         this._eventId = taskEventId || this._uuidGenerator.create();
         const eventStart: ITaskEvent = { type: TASK_TYPE.GLTF_CONTENT_LOADING, id: this._eventId, progress: 0, status: 'Starting glTF 2.0 loading.' };
         this._eventEngine.emitEvent(EVENTTYPE.TASK.TASK_START, eventStart);
-        
+
         this._numberOfConvertedNodes = 0;
         this._numberOfNodes = content.nodes ? content.nodes.length : 0;
         this._progressTimer = performance.now();
-        
+
         this._baseUri = baseUri;
         if (gltfBinary && gltfHeader)
             this._body = gltfBinary.slice(this.BINARY_EXTENSION_HEADER_LENGTH + gltfHeader.contentLength + 8, gltfHeader.length);
@@ -128,7 +129,7 @@ export class GLTFLoader {
             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)
+            node.data.push(this._geometryLoader.materialVariantsData);
         }
 
         if (this._content.skins !== undefined && this._content.nodes !== undefined) {
@@ -142,7 +143,7 @@ export class GLTFLoader {
                     const boneInverses: mat4[] = [];
 
                     for (let j = 0; j < skinDef.joints.length; j++) {
-                        this._nodes[skinDef.joints[j]].data.push(new BoneData())
+                        this._nodes[skinDef.joints[j]].data.push(new BoneData());
                         bones.push(this._nodes[skinDef.joints[j]]);
 
                         let mat = mat4.create();
@@ -174,12 +175,11 @@ export class GLTFLoader {
 
     public async loadWithUrl(url?: string | undefined): Promise<ITreeNode> {
         this._performanceEvaluator.startSection('gltfProcessing.' + url);
-        let axiosResponse;
 
         this._performanceEvaluator.startSection('loadGltf.' + url);
-        axiosResponse = await this._httpClient.get(url!, {
+        const axiosResponse = await this._httpClient.get(url!, {
             responseType: 'arraybuffer'
-        });
+        }) as HttpResponse<ArrayBuffer>;
         this._performanceEvaluator.endSection('loadGltf.' + url);
 
         let gltfContent, gltfBinary, gltfBaseUrl, gltfHeader;
@@ -200,8 +200,8 @@ export class GLTFLoader {
                 length: headerDataView.getUint32(8, true),
                 contentLength: headerDataView.getUint32(12, true),
                 contentFormat: headerDataView.getUint32(16, true)
-            }
-            if (gltfHeader.magic != 'glTF') 
+            };
+            if (gltfHeader.magic != 'glTF')
                 throw new ShapeDiverViewerDataProcessingError('GLTFLoader.load: Invalid data: sdgTF magic wrong.');
 
             // create content
@@ -215,11 +215,11 @@ export class GLTFLoader {
             gltfContent = JSON.parse(new TextDecoder().decode(axiosResponse.data));
 
             const removeLastDirectoryPartOf = (the_url: string): string => {
-                const dir_char = the_url.includes("/") ? "/" : "\\";
+                const dir_char = the_url.includes('/') ? '/' : '\\';
                 const the_arr = the_url.split(dir_char);
                 the_arr.pop();
                 return the_arr.join(dir_char);
-            }
+            };
 
             gltfBaseUrl = removeLastDirectoryPartOf(url!);
             if (!gltfBaseUrl && window && window.location && window.location.href)
@@ -239,8 +239,8 @@ export class GLTFLoader {
          * @return {Promise<AnimationClip>}
          */
     private loadAnimation(animationId: number): AnimationData {
-        if (!this._content.animations) throw new Error('Animations not available.')
-        if (!this._content.animations[animationId]) throw new Error('Animations not available.')
+        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: IAnimationTrack[] = [];
         let min = Infinity, max = -Infinity;
@@ -260,7 +260,7 @@ export class GLTFLoader {
             const output = this._accessorLoader.getAccessor(sampler.output);
             let interpolation = sampler.interpolation;
             if (interpolation === 'CUBICSPLINE') {
-                this._logger.warn('Animation with CUBICSPLINE interpolation is currently not supported. Assigning linear interpolation instead.')
+                this._logger.warn('Animation with CUBICSPLINE interpolation is currently not supported. Assigning linear interpolation instead.');
                 interpolation = 'linear';
             }
 
@@ -277,8 +277,8 @@ export class GLTFLoader {
     }
 
     private loadCamera(cameraId: number): ITreeNode {
-        if (!this._content.cameras) throw new Error('Cameras not available.')
-        if (!this._content.cameras[cameraId]) throw new Error('Cameras not available.')
+        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 TreeNode(cameraDef.name || 'camera_' + cameraId);
 
@@ -311,7 +311,7 @@ export class GLTFLoader {
 
     private loadLights(lightId: number): ITreeNode {
         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.')
+        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 TreeNode(lightDef.name || 'light_' + lightId);
 
@@ -366,8 +366,8 @@ export class GLTFLoader {
     }
 
     private async loadNode(nodeId: number): Promise<ITreeNode> {
-        if (!this._content.nodes) throw new Error('Nodes not available.')
-        if (!this._content.nodes[nodeId]) throw new Error('Node not available.')
+        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 TreeNode(node.name || 'node_' + nodeId);
         this._nodes[nodeId] = nodeDef;
@@ -429,7 +429,7 @@ export class GLTFLoader {
         }
 
         this._numberOfConvertedNodes++;
-        if(performance.now() - this._progressTimer > this._progressUpdateLimit) {
+        if (performance.now() - this._progressTimer > this._progressUpdateLimit) {
             this._progressTimer = performance.now();
             const eventProgress: ITaskEvent = { type: TASK_TYPE.GLTF_CONTENT_LOADING, id: this._eventId, progress: (this._numberOfConvertedNodes / this._numberOfNodes) / 2 + 0.1, status: `GlTF conversion progress: ${this._numberOfConvertedNodes}/${this._numberOfNodes} nodes.` };
             this._eventEngine.emitEvent(EVENTTYPE.TASK.TASK_PROCESS, eventProgress);
@@ -440,15 +440,15 @@ export class GLTFLoader {
     }
 
     private async loadScene(): Promise<ITreeNode> {
-        if (!this._content.scenes) throw new Error('Scenes not available.')
+        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.')
+        if (!this._content.scenes[sceneId]) throw new Error('Scene not available.');
         const scene = this._content.scenes[sceneId];
         const sceneDef = new TreeNode(scene.name || 'scene_' + sceneId + '');
         sceneDef.addTransformation({
             id: this._uuidGenerator.create(),
             matrix: this._globalTransformation
-        })
+        });
         if (scene.nodes)
             for (let i = 0, len = scene.nodes.length; i < len; i++)
                 sceneDef.addChild(await this.loadNode(scene.nodes[i]));
@@ -459,8 +459,8 @@ export class GLTFLoader {
         joints: number[],
         inverseBindMatrices: AttributeData | null
     } {
-        if (!this._content.skins) throw new Error('Skins not available.')
-        if (!this._content.skins[skinId]) throw new Error('Skin not available.')
+        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: {
@@ -475,14 +475,14 @@ export class GLTFLoader {
             return skinEntry;
         }
 
-        skinEntry.inverseBindMatrices = this._accessorLoader.getAccessor(skinDef.inverseBindMatrices)
+        skinEntry.inverseBindMatrices = this._accessorLoader.getAccessor(skinDef.inverseBindMatrices);
         return skinEntry;
     }
 
     private validateVersionAndExtensions(): void {
-        if (!this._content.asset) throw new Error('Asset not available.')
+        if (!this._content.asset) throw new Error('Asset not available.');
         const asset = this._content.asset;
-        if (!asset.version) throw new Error('Asset does not have a version.')
+        if (!asset.version) throw new Error('Asset does not have a version.');
         const version: string = asset.minVersion ? asset.minVersion : asset.version;
         if (!version.startsWith('2')) throw new Error('Version of the glTF not supported.');
 

package/src/gltfv2/loaders/BufferLoader.ts

@@ -1,5 +1,5 @@
-import { IGLTF_v2 } from '@shapediver/viewer.data-engine.shared-types'
-import { HttpClient } from '@shapediver/viewer.shared.services'
+import { IGLTF_v2 } from '@shapediver/viewer.data-engine.shared-types';
+import { HttpClient, HttpResponse } from '@shapediver/viewer.shared.services';
 
 export class BufferLoader {
     // #region Properties (2)
@@ -21,16 +21,16 @@ export class BufferLoader {
     // #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.')
+        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>[] = [];
+        const promises: Promise<void>[] = [];
 
         for (let i = 0; i < this._content.buffers.length; i++) {
             const bufferId = i;
@@ -42,7 +42,7 @@ export class BufferLoader {
 
             // 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.`);
+                if (!this._body) throw new Error('BufferLoader.load: Buffer not available.');
                 this._loaded[bufferId] = this._body;
                 return;
             }
@@ -63,10 +63,10 @@ export class BufferLoader {
                 }
                 this._loaded[bufferId] = view.buffer;
             } else {
-                let httpResultPromise = this._httpClient.get(this._baseUri + '/' + buffer.uri!, {
+                const httpResultPromise = (this._httpClient.get(this._baseUri + '/' + buffer.uri!, {
                     responseType: 'arraybuffer'
-                }).then(response => { this._loaded[bufferId] = response.data; });
-                promises.push(httpResultPromise)
+                }) as Promise<HttpResponse<ArrayBuffer>>).then(response => { this._loaded[bufferId] = response.data; });
+                promises.push(httpResultPromise);
             }
         }
         await Promise.all(promises);

package/src/gltfv2/loaders/MaterialLoader.ts

@@ -1,11 +1,11 @@
-import { Converter, HttpClient } from '@shapediver/viewer.shared.services'
+import { Converter, HttpClient } from '@shapediver/viewer.shared.services';
 import {
   IGLTF_v2,
   IGLTF_v2_Material,
   IGLTF_v2_Material_KHR_materials_pbrSpecularGlossiness,
   ISHAPEDIVER_materials_preset,
-} from '@shapediver/viewer.data-engine.shared-types'
-import { vec2 } from 'gl-matrix'
+} from '@shapediver/viewer.data-engine.shared-types';
+import { vec2 } from 'gl-matrix';
 import {
   MATERIAL_ALPHA,
   MATERIAL_SIDE,
@@ -19,11 +19,13 @@ import {
   IMaterialUnlitDataProperties,
   MapData,
   IMapData,
-} from '@shapediver/viewer.shared.types'
-import { MaterialEngine } from '@shapediver/viewer.data-engine.material-engine'
+  TEXTURE_WRAPPING,
+  TEXTURE_FILTERING,
+} from '@shapediver/viewer.shared.types';
+import { MaterialEngine } from '@shapediver/viewer.data-engine.material-engine';
 
-import { GLTF_EXTENSIONS } from '../GLTFLoader'
-import { TextureLoader } from './TextureLoader'
+import { GLTF_EXTENSIONS } from '../GLTFLoader';
+import { TextureLoader } from './TextureLoader';
 
 export class MaterialLoader {
     // #region Properties (4)
@@ -44,9 +46,9 @@ export class MaterialLoader {
     // #region Public Methods (2)
 
     public getMaterial(materialId: number): IMaterialAbstractData {
-        if (!this._content.materials) throw new Error('MaterialLoader.getMaterial: Materials not available.')
-        if (!this._content.materials[materialId]) throw new Error('MaterialLoader.getMaterial: Material not available.')
-        if (!this._loaded[materialId]) throw new Error('MaterialLoader.getMaterial: Material not loaded.')
+        if (!this._content.materials) throw new Error('MaterialLoader.getMaterial: Materials not available.');
+        if (!this._content.materials[materialId]) throw new Error('MaterialLoader.getMaterial: Material not available.');
+        if (!this._loaded[materialId]) throw new Error('MaterialLoader.getMaterial: Material not loaded.');
         return this._loaded[materialId];
     }
 
@@ -54,7 +56,7 @@ export class MaterialLoader {
         this._loaded = {};
         if (!this._content.materials) return;
 
-        let promises: Promise<void>[] = [];
+        const promises: Promise<void>[] = [];
         for (let i = 0; i < this._content.materials.length; i++) {
             const materialId = i;
             const material: IGLTF_v2_Material = this._content.materials[materialId];
@@ -66,18 +68,21 @@ export class MaterialLoader {
             if (materialExtensions[GLTF_EXTENSIONS.SHAPEDIVER_MATERIALS_PRESET]) {
                 const materialPreset: ISHAPEDIVER_materials_preset = materialExtensions[GLTF_EXTENSIONS.SHAPEDIVER_MATERIALS_PRESET];
                 promises.push(
-                    new Promise<void>(async (resolve, reject) => {
+                    new Promise<void>((resolve, reject) => {
                         try {
-                            const materialData = await this._materialEngine.loadPresetMaterial(materialPreset.materialpreset);
-                            materialData.name = material.name;
-                            materialData.color = materialPreset.color;
-                            this._loaded[materialId] = materialData;
-                            resolve();
+                            this._materialEngine.loadPresetMaterial(materialPreset.materialpreset)
+                                .then(materialData => {
+                                    materialData.name = material.name;
+                                    materialData.color = materialPreset.color;
+                                    this._loaded[materialId] = materialData;
+                                    resolve();
+                                })
+                                .catch(reject);
                         } catch (e) {
                             reject(e);
                         }
                     })
-                )
+                );
                 continue;
             }
 
@@ -345,25 +350,26 @@ export class MaterialLoader {
     // #region Private Methods (1)
 
     private loadMap(textureId: number, properties?: { offset?: number[], scale?: number[], rotation?: number, texCoord?: number }): IMapData {
-        if (!this._content.textures) throw new Error('Textures not available.')
+        if (!this._content.textures) throw new Error('Textures not available.');
         const texture = this._content.textures[textureId];
-        if (!this._content.images) throw new Error('Images not available.')
+        if (!this._content.images) throw new Error('Images not available.');
         const sampler = this._content.samplers && texture.sampler && this._content.samplers[texture.sampler] ? this._content.samplers[texture.sampler] : {};
-        const htmlImage = this._textureLoader.getTexture(textureId);
+        const loadedTexture = this._textureLoader.getTexture(textureId);
 
         return new MapData(
-            htmlImage,
-            sampler.wrapS,
-            sampler.wrapT,
-            sampler.minFilter,
-            sampler.magFilter,
-            undefined,
-            undefined,
-            properties && properties.offset ? vec2.fromValues(properties.offset[0], properties.offset[1]) : undefined,
-            properties && properties.scale ? vec2.fromValues(properties.scale[0], properties.scale[1]) : undefined,
-            properties && properties.rotation !== undefined ? properties.rotation : 0,
-            properties?.texCoord,            
-            false
+            loadedTexture.image,
+            {
+                blob: loadedTexture.blob,
+                wrapS: sampler.wrapS as TEXTURE_WRAPPING,
+                wrapT: sampler.wrapT as TEXTURE_WRAPPING,
+                minFilter: sampler.minFilter as TEXTURE_FILTERING,
+                magFilter: sampler.magFilter as TEXTURE_FILTERING,
+                offset: properties && properties.offset ? vec2.fromValues(properties.offset[0], properties.offset[1]) : vec2.create(),
+                repeat: properties && properties.scale ? vec2.fromValues(properties.scale[0], properties.scale[1]) : vec2.fromValues(1, 1),
+                rotation: properties && properties.rotation !== undefined ? properties.rotation : 0,
+                texCoord: properties?.texCoord,            
+                flipY: false
+            }
         );
     }
 

package/src/gltfv2/loaders/TextureLoader.ts

@@ -1,19 +1,22 @@
-import { IGLTF_v2 } from '@shapediver/viewer.data-engine.shared-types'
-import { Converter, HttpClient } from '@shapediver/viewer.shared.services'
+import { IGLTF_v2 } from '@shapediver/viewer.data-engine.shared-types';
+import { Converter, HttpClient } from '@shapediver/viewer.shared.services';
 
-import { BufferViewLoader } from './BufferViewLoader'
+import { BufferViewLoader } from './BufferViewLoader';
 
 export class TextureLoader {
-    // #region Properties (4)
+    // #region Properties (3)
 
     private readonly _converter: Converter = Converter.instance;
     private readonly _httpClient: HttpClient = HttpClient.instance;
 
     private _loaded: {
-        [key: string]: HTMLImageElement
+        [key: string]: {
+            image: HTMLImageElement,
+            blob: Blob
+        }
     } = {};
 
-    // #endregion Properties (4)
+    // #endregion Properties (3)
 
     // #region Constructors (1)
 
@@ -23,59 +26,67 @@ export class TextureLoader {
 
     // #region Public Methods (2)
 
-    public getTexture(textureId: number): HTMLImageElement {
-        if (!this._content.textures) throw new Error('TextureLoader.getTexture: Textures not available.')
-        if (!this._content.textures[textureId]) throw new Error('TextureLoader.getTexture: Texture not available.')
-        if (!this._loaded[textureId]) throw new Error('TextureLoader.getTexture: Texture not loaded.')
+    public getTexture(textureId: number): {
+        image: HTMLImageElement,
+        blob: Blob
+    } {
+        if (!this._content.textures) throw new Error('TextureLoader.getTexture: Textures not available.');
+        if (!this._content.textures[textureId]) throw new Error('TextureLoader.getTexture: Texture not available.');
+        if (!this._loaded[textureId]) throw new Error('TextureLoader.getTexture: Texture not loaded.');
         return this._loaded[textureId];
     }
 
     public async load(): Promise<void> {
         if (!this._content.textures) return;
 
-        let promises: Promise<void>[] = [];
-        for(let i = 0; i < this._content.textures.length; i++) {
+        const promises: Promise<void>[] = [];
+        for (let i = 0; i < this._content.textures.length; i++) {
             const textureId = i;
             const texture = this._content.textures[textureId];
-            if (!this._content.images) throw new Error('TextureLoader.load: Images not available.')
+            if (!this._content.images) throw new Error('TextureLoader.load: Images not available.');
             const image = this._content.images[texture.source];
-    
+
             const DATA_URI_REGEX = /^data:(.*?)(;base64)?,(.*)$/;
             const HTTPS_URI_REGEX = /^https:\/\//;
-    
+
             if (image.bufferView !== undefined) {
                 const bufferView = this._bufferViewLoader.getBufferView(image.bufferView);
                 const dataView = new DataView(bufferView);
                 const array: Array<number> = [];
                 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 = URL.createObjectURL(blob);
-    
+
+                const img = new Image();
+
                 promises.push(
                     new Promise<void>((resolve, reject) => {
-                        this._httpClient.loadTexture(dataUri)
-                            .then(response => {
-                                this._converter.responseToImage(response).then(img => {
-                                    this._loaded[textureId] = img;
-                                    URL.revokeObjectURL(dataUri)
-                                    resolve()
-                                }).catch(e => reject(e));
-                            })
+                        img.onload = () => {
+                            this._loaded[textureId] = {
+                                image: img,
+                                blob
+                            };
+                            URL.revokeObjectURL(dataUri);
+                            resolve();
+                        };
+                        img.onerror = reject;
                     })
                 );
+
+                img.crossOrigin = 'anonymous';
+                img.src = dataUri;
             } else {
                 const url = DATA_URI_REGEX.test(image.uri!) || HTTPS_URI_REGEX.test(image.uri!) ? image.uri : `${this._baseUri}/${image.uri}`;
                 promises.push(
                     new Promise<void>((resolve, reject) => {
                         this._httpClient.loadTexture(url!)
                             .then(response => {
-                                this._converter.responseToImage(response).then(img => {
-                                    this._loaded[textureId] = img;
-                                    resolve()
-                                });
-                            }).catch(e => reject(e));
+                                this._loaded[textureId] = response.data;
+                                resolve();
+                            })
+                            .catch(e => reject(e));
                     })
                 );
             }