.glb imports now load bundled textures

loc/en_GB.ts

@@ -36,6 +36,7 @@ export const en_GB = {
             missing_normals: 'Some vertices do not have their normals defined, this may cause voxels to be aligned incorrectly',
             failed_to_parse_line: 'Failed attempt to parse "{{line}}", because "{{error}}"',
             gltf_experimental: 'The GLTF importer is experimental and may produce unexpected results',
+            unsupported_image_type: 'Cannot read \'{{file_name}}\', unsupported file type \'{{file_type}}\'',
             components: {
                 input: '3D Model (.obj, .glb)',
                 rotation: 'Rotation',

src/importers/gltf_loader.ts

@@ -6,6 +6,7 @@ import { LOC } from '../localiser';
 import { MaterialMap, MaterialType, Mesh, Tri } from '../mesh';
 import { StatusHandler } from '../status';
 import { UV } from '../util';
+import { AppError } from '../util/error_util';
 import { Vector3 } from '../vector';
 import { IImporter } from './base_importer';
 
@@ -14,7 +15,7 @@ export class GltfLoader extends IImporter {
         StatusHandler.warning(LOC('import.gltf_experimental'));
 
         return new Promise<Mesh>((resolve, reject) => {
-            parse(file, GLTFLoader, { limit: 0 })
+            parse(file, GLTFLoader, { loadImages: true })
                 .then((gltf: any) => {
                     resolve(this._handleGLTF(gltf));
                 })
@@ -82,12 +83,43 @@ export class GltfLoader extends IImporter {
                         if (pbr !== undefined) {
                             const diffuseTexture = pbr.baseColorTexture;
                             if (diffuseTexture !== undefined) {
+                                const imageData: Uint8Array = diffuseTexture.texture.source.bufferView.data;
+                                const mimeType: string = diffuseTexture.texture.source.mimeType;
+
+                                try {
+                                    if (mimeType !== 'image/png' && mimeType !== 'image/jpeg') {
+                                        StatusHandler.warning(LOC('import.unsupported_image_type', { file_name: diffuseTexture.texture.source.id, file_type: mimeType }));
+                                        throw new Error('Unsupported image type');
+                                    }
+
+                                    const base64 = btoa(
+                                        imageData.reduce((data, byte) => data + String.fromCharCode(byte), ''),
+                                    );
+
+                                    meshMaterials.set(materialName, {
+                                        type: MaterialType.textured,
+                                        diffuse: {
+                                            filetype: mimeType === 'image/jpeg' ? 'jpg' : 'png',
+                                            raw: (mimeType === 'image/jpeg' ? 'data:image/jpeg;base64,' : 'data:image/png;base64,') + base64,
+                                        },
+                                        extension: 'clamp',
+                                        interpolation: 'linear',
+                                        needsAttention: false,
+                                        transparency: { type: 'None' },
+                                    });
+                                } catch {
                                     meshMaterials.set(materialName, {
                                         type: MaterialType.solid,
                                         colour: RGBAUtil.copy(RGBAColours.WHITE),
                                         needsAttention: false,
                                         canBeTextured: true,
                                     });
+                                }
+
+
+                                /*
+
+                                */
 
                                 materialNameToUse = materialName;
                                 materialMade = true;

src/ui/components/image.ts

@@ -1,8 +1,8 @@
+import { LOC } from '../../localiser';
 import { TImageRawWrap } from '../../texture';
 import { getRandomID } from '../../util';
 import { ASSERT } from '../../util/error_util';
 import { UIUtil } from '../../util/ui_util';
-import { LOC } from '../../localiser';
 import { AppIcons } from '../icons';
 import { ConfigComponent } from './config';
 import { ToolbarItemComponent } from './toolbar_item';
@@ -60,6 +60,8 @@ export class ImageComponent extends ConfigComponent<Promise<TImageRawWrap>, HTML
                     const fileReader = new FileReader();
                     fileReader.onload = function () {
                         if (typeof fileReader.result === 'string') {
+                            // convert image file to base64 string
+                            console.log('base64 png', fileReader.result);
                             res({ filetype: file.type === 'image/jpeg' ? 'jpg' : 'png', raw: fileReader.result });
                         } else {
                             rej(Error());