@loaders.gl/gltf 3.1.0-alpha.2 → 3.1.0-beta.1

package/src/lib/api/{normalize-gltf-v1.js → normalize-gltf-v1.ts}

@@ -80,22 +80,24 @@ const GLTF_KEYS = {
  * Converts (normalizes) glTF v1 to v2
  */
 class GLTFV1Normalizer {
-  constructor(gltf) {
-    this.idToIndexMap = {
-      animations: {},
-      accessors: {},
-      buffers: {},
-      bufferViews: {},
-      images: {},
-      materials: {},
-      meshes: {},
-      nodes: {},
-      samplers: {},
-      scenes: {},
-      skins: {},
-      textures: {}
-    };
-  }
+  idToIndexMap = {
+    animations: {},
+    accessors: {},
+    buffers: {},
+    bufferViews: {},
+    images: {},
+    materials: {},
+    meshes: {},
+    nodes: {},
+    samplers: {},
+    scenes: {},
+    skins: {},
+    textures: {}
+  };
+
+  json;
+
+  // constructor() {}
 
   /**
    * Convert (normalize) glTF < 2.0 to glTF 2.0
@@ -139,7 +141,8 @@ class GLTFV1Normalizer {
 
     // Extract bufferView indices for images
     // (this extension needs to be invoked early in the normalization process)
-    KHR_binary_glTF.decode(gltf);
+    // TODO can this be handled by standard extension processing instead of called explicitly?
+    KHR_binary_glTF.preprocess(gltf);
 
     // Convert object references from ids to indices
     this._convertObjectIdsToArrayIndices(json);

package/src/lib/api/{post-process-gltf.js → post-process-gltf.ts}

@@ -56,7 +56,7 @@ const DEFAULT_SAMPLER = {
   [GL_SAMPLER.TEXTURE_MAG_FILTER]: GL_SAMPLER.LINEAR,
   [GL_SAMPLER.TEXTURE_MIN_FILTER]: GL_SAMPLER.NEAREST_MIPMAP_LINEAR,
   [GL_SAMPLER.TEXTURE_WRAP_S]: GL_SAMPLER.REPEAT,
-  [GL_SAMPLER.TEXTURE_WRAP_]: GL_SAMPLER.REPEAT
+  [GL_SAMPLER.TEXTURE_WRAP_T]: GL_SAMPLER.REPEAT
 };
 
 function getBytesFromComponentType(componentType) {
@@ -68,6 +68,11 @@ function getSizeFromAccessorType(type) {
 }
 
 class GLTFPostProcessor {
+  baseUri: string = '';
+  json: Record<string, any> = {};
+  buffers: [] = [];
+  images: [] = [];
+
   postProcess(gltf, options = {}) {
     const {json, buffers = [], images = [], baseUri = ''} = gltf;
     assert(json);
@@ -359,7 +364,9 @@ class GLTFPostProcessor {
     const bufferIndex = bufferView.buffer;
     bufferView.buffer = this.buffers[bufferIndex];
 
+    // @ts-expect-error
     const arrayBuffer = this.buffers[bufferIndex].arrayBuffer;
+    // @ts-expect-error
     let byteOffset = this.buffers[bufferIndex].byteOffset || 0;
 
     if ('byteOffset' in bufferView) {

package/src/lib/extensions/EXT_meshopt_compression.ts

@@ -1,19 +1,9 @@
 /* eslint-disable camelcase */
+import type {GLTF, GLTFBufferView, GLTF_EXT_meshopt_compression} from '../types/gltf-types';
 import type {GLTFLoaderOptions} from '../../gltf-loader';
 import GLTFScenegraph from '../api/gltf-scenegraph';
-import {EXT_MESHOPT_COMPRESSION} from '../gltf-utils/gltf-constants';
 import {isMeshoptSupported, meshoptDecodeGltfBuffer} from '../../meshopt/meshopt-decoder';
 
-type GLTF_EXT_meshopt_compression = {
-  buffer: number;
-  byteOffset?: number;
-  byteLength: number;
-  byteStride: number;
-  count: number;
-  mode: 'ATTRIBUTES' | 'TRIANGLES' | 'INDICES';
-  filter?: 'NONE' | 'OCTAHEDRAL' | 'QUATERNION' | 'EXPONENTIAL';
-};
-
 // @ts-ignore
 // eslint-disable-next-line
 const DEFAULT_MESHOPT_OPTIONS = {
@@ -21,34 +11,51 @@ const DEFAULT_MESHOPT_OPTIONS = {
   filter: 'NONE'
 };
 
-// Note: We have a "soft dependency" on DracoWriter to avoid bundling it when not needed
-export async function decode(gltfData, options: GLTFLoaderOptions) {
-  if (!options?.gltf?.decompressMeshes || !isMeshoptSupported()) {
+/** Extension name */
+const EXT_MESHOPT_COMPRESSION = 'EXT_meshopt_compression';
+
+export const name = EXT_MESHOPT_COMPRESSION;
+
+export function preprocess(gltfData: {json: GLTF}) {
+  const scenegraph = new GLTFScenegraph(gltfData);
+  if (
+    scenegraph.getRequiredExtensions().includes(EXT_MESHOPT_COMPRESSION) &&
+    !isMeshoptSupported()
+  ) {
+    throw new Error(`gltf: Required extension ${EXT_MESHOPT_COMPRESSION} not supported by browser`);
+  }
+}
+
+export async function decode(gltfData: {json: GLTF}, options: GLTFLoaderOptions) {
+  const scenegraph = new GLTFScenegraph(gltfData);
+
+  if (!options?.gltf?.decompressMeshes) {
     return;
   }
 
   const promises: Promise<any>[] = [];
   for (const bufferViewIndex of gltfData.json.bufferViews || []) {
-    promises.push(decodeMeshoptBufferView(gltfData.json, bufferViewIndex));
+    promises.push(decodeMeshoptBufferView(scenegraph, bufferViewIndex));
   }
 
   // Decompress meshes in parallel
   await Promise.all(promises);
 
   // We have now decompressed all primitives, so remove the top-level extensions
-  const scenegraph = new GLTFScenegraph(gltfData);
   scenegraph.removeExtension(EXT_MESHOPT_COMPRESSION);
 }
 
 /** Decode one meshopt buffer view */
-async function decodeMeshoptBufferView(json, index: number): Promise<ArrayBuffer | null> {
-  const bufferView = json.bufferViews[index];
-
-  const meshoptExtension =
-    bufferView.extensions &&
-    (bufferView.extensions[EXT_MESHOPT_COMPRESSION] as GLTF_EXT_meshopt_compression);
+async function decodeMeshoptBufferView(
+  scenegraph: GLTFScenegraph,
+  bufferView: GLTFBufferView
+): Promise<ArrayBuffer | null> {
+  const meshoptExtension = scenegraph.getObjectExtension<GLTF_EXT_meshopt_compression>(
+    bufferView,
+    EXT_MESHOPT_COMPRESSION
+  );
   if (meshoptExtension) {
-    const buffer = json.buffers[meshoptExtension.buffer];
+    const buffer = bufferView.buffer;
 
     const {
       byteOffset = 0,
@@ -58,6 +65,8 @@ async function decodeMeshoptBufferView(json, index: number): Promise<ArrayBuffer
       mode,
       filter = 'NONE'
     } = meshoptExtension;
+
+    // @ts-expect-error TODO - fix buffer handling
     const source = new Uint8Array(buffer, byteOffset, byteLength);
     const result = new ArrayBuffer(count * byteStride);
     await meshoptDecodeGltfBuffer(new Uint8Array(result), count, byteStride, source, mode, filter);

package/src/lib/extensions/EXT_texture_webp.ts

@@ -0,0 +1,45 @@
+// GLTF EXTENSION: EXT_TEXTURE_WEBP
+// https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/EXT_TEXTURE_WEBP
+/* eslint-disable camelcase */
+
+import type {GLTF, GLTF_EXT_texture_webp} from '../types/gltf-types';
+import type {GLTFLoaderOptions} from '../../gltf-loader';
+
+import {_isImageFormatSupported} from '@loaders.gl/images';
+import GLTFScenegraph from '../api/gltf-scenegraph';
+
+const EXT_TEXTURE_WEBP = 'EXT_texture_webp';
+
+/** Extension name */
+export const name = EXT_TEXTURE_WEBP;
+
+/**
+ * Replaces a texture source reference with the extension texture
+ * Done in preprocess() to prevent load of default image
+ */
+export function preprocess(gltfData: {json: GLTF}, options: GLTFLoaderOptions): void {
+  const scenegraph = new GLTFScenegraph(gltfData);
+
+  if (!_isImageFormatSupported('image/webp')) {
+    if (scenegraph.getRequiredExtensions().includes(EXT_TEXTURE_WEBP)) {
+      throw new Error(`gltf: Required extension ${EXT_TEXTURE_WEBP} not supported by browser`);
+    }
+    return;
+  }
+
+  const {json} = scenegraph;
+
+  for (const texture of json.textures || []) {
+    const extension = scenegraph.getObjectExtension<GLTF_EXT_texture_webp>(
+      texture,
+      EXT_TEXTURE_WEBP
+    );
+    if (extension) {
+      texture.source = extension.source;
+    }
+    scenegraph.removeObjectExtension(texture, EXT_TEXTURE_WEBP);
+  }
+
+  // Remove the top-level extension
+  scenegraph.removeExtension(EXT_TEXTURE_WEBP);
+}

package/src/lib/extensions/KHR_binary_gltf.ts

@@ -1,12 +1,17 @@
 // GLTF 1.0 EXTENSION: KHR_binary_glTF
 // https://github.com/KhronosGroup/glTF/tree/master/extensions/1.0/Khronos/KHR_binary_glTF
+/* eslint-disable camelcase */
 
-import type {GLTF} from '../types/gltf-types';
+import type {GLTF, GLTF_KHR_binary_glTF} from '../types/gltf-types';
 
 import GLTFScenegraph from '../api/gltf-scenegraph';
-import {KHR_BINARY_GLTF} from '../gltf-utils/gltf-constants';
 
-export function decode(gltfData: {json: GLTF}): void {
+const KHR_BINARY_GLTF = 'KHR_binary_glTF';
+
+/** Extension name */
+export const name = KHR_BINARY_GLTF;
+
+export function preprocess(gltfData: {json: GLTF}): void {
   const gltfScenegraph = new GLTFScenegraph(gltfData);
   const {json} = gltfScenegraph;
 
@@ -15,15 +20,19 @@ export function decode(gltfData: {json: GLTF}): void {
 
   // Image and shader nodes can have the extension
   // https://github.com/KhronosGroup/glTF/blob/master/extensions/1.0/Khronos/KHR_binary_glTF/schema/image.KHR_binary_glTF.schema.json
-  for (const node of json.images || []) {
-    const extension = gltfScenegraph.removeObjectExtension(node, KHR_BINARY_GLTF);
+  for (const image of json.images || []) {
+    const extension = gltfScenegraph.getObjectExtension<GLTF_KHR_binary_glTF>(
+      image,
+      KHR_BINARY_GLTF
+    );
     // The data in the extension is valid as glTF 2.0 data inside the object, so just copy it in
     if (extension) {
-      Object.assign(node, extension);
+      Object.assign(image, extension);
     }
+    gltfScenegraph.removeObjectExtension(image, KHR_BINARY_GLTF);
   }
 
-  // TODO shaders
+  // TODO shaders - At least traverse and throw error if used?
   // https://github.com/KhronosGroup/glTF/blob/master/extensions/1.0/Khronos/KHR_binary_glTF/schema/shader.KHR_binary_glTF.schema.json
 
   // glTF v1 one files have a partially formed URI field that is not expected in (and causes problems in) 2.0
@@ -36,6 +45,6 @@ export function decode(gltfData: {json: GLTF}): void {
 }
 
 // KHR_binary_gltf is a 1.0 extension that is supported natively by 2.0
-export function encode() {
-  throw new Error(KHR_BINARY_GLTF);
-}
+// export function encode() {
+//   throw new Error(KHR_BINARY_GLTF);
+// }

package/src/lib/extensions/KHR_draco_mesh_compression.ts

@@ -1,8 +1,14 @@
 // https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression
 // Only TRIANGLES: 0x0004 and TRIANGLE_STRIP: 0x0005 are supported
+/* eslint-disable camelcase */
 
 /* eslint-disable camelcase */
-import type {GLTF, GLTFAccessor, GLTFMeshPrimitive} from '../types/gltf-types';
+import type {
+  GLTF,
+  GLTFAccessor,
+  GLTFMeshPrimitive,
+  GLTF_KHR_draco_mesh_compression
+} from '../types/gltf-types';
 import type {GLTFLoaderOptions} from '../../gltf-loader';
 
 import type {LoaderContext} from '@loaders.gl/loader-utils';
@@ -10,10 +16,26 @@ import {DracoLoader} from '@loaders.gl/draco';
 import {DracoLoaderOptions, DracoMesh} from '@loaders.gl/draco';
 import {sliceArrayBuffer} from '@loaders.gl/loader-utils';
 import {default as Scenegraph} from '../api/gltf-scenegraph';
-import {KHR_DRACO_MESH_COMPRESSION} from '../gltf-utils/gltf-constants';
 import {getGLTFAccessors, getGLTFAccessor} from '../gltf-utils/gltf-attribute-utils';
 
-// Note: We have a "soft dependency" on DracoWriter to avoid bundling it when not needed
+const KHR_DRACO_MESH_COMPRESSION = 'KHR_draco_mesh_compression';
+
+/** Extension name */
+export const name = KHR_DRACO_MESH_COMPRESSION;
+
+export function preprocess(
+  gltfData: {json: GLTF},
+  options: GLTFLoaderOptions,
+  context: LoaderContext
+): void {
+  const scenegraph = new Scenegraph(gltfData);
+  for (const primitive of makeMeshPrimitiveIterator(scenegraph)) {
+    if (scenegraph.getObjectExtension(primitive, KHR_DRACO_MESH_COMPRESSION)) {
+      // TODO - Remove fallback accessors to make sure we don't load unnecessary buffers
+    }
+  }
+}
+
 export async function decode(
   gltfData: {json: GLTF},
   options: GLTFLoaderOptions,
@@ -64,7 +86,10 @@ async function decompressPrimitive(
   options: GLTFLoaderOptions,
   context: LoaderContext
 ): Promise<void> {
-  const dracoExtension = scenegraph.getObjectExtension(primitive, KHR_DRACO_MESH_COMPRESSION);
+  const dracoExtension = scenegraph.getObjectExtension<GLTF_KHR_draco_mesh_compression>(
+    primitive,
+    KHR_DRACO_MESH_COMPRESSION
+  );
   if (!dracoExtension) {
     return;
   }

package/src/lib/extensions/KHR_texture_basisu.ts

@@ -0,0 +1,36 @@
+// GLTF EXTENSION: KHR_texture_basisu
+// https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_texture_basisu
+/* eslint-disable camelcase */
+
+import type {GLTF, GLTF_KHR_texture_basisu} from '../types/gltf-types';
+import type {GLTFLoaderOptions} from '../../gltf-loader';
+
+import GLTFScenegraph from '../api/gltf-scenegraph';
+
+const KHR_TEXTURE_BASISU = 'KHR_texture_basisu';
+
+/** Extension name */
+export const name = KHR_TEXTURE_BASISU;
+
+/**
+ * Replaces a texture source reference with the extension texture
+ * Done in preprocess() to prevent load of default image
+ */
+export function preprocess(gltfData: {json: GLTF}, options: GLTFLoaderOptions): void {
+  const scene = new GLTFScenegraph(gltfData);
+  const {json} = scene;
+
+  for (const texture of json.textures || []) {
+    const extension = scene.getObjectExtension<GLTF_KHR_texture_basisu>(
+      texture,
+      KHR_TEXTURE_BASISU
+    );
+    if (extension) {
+      texture.source = extension.source;
+    }
+    scene.removeObjectExtension(texture, KHR_TEXTURE_BASISU);
+  }
+
+  // Remove the top-level extension
+  scene.removeExtension(KHR_TEXTURE_BASISU);
+}

package/src/lib/extensions/{KHR_lights_punctual.ts → deprecated/KHR_lights_punctual.ts}

@@ -1,11 +1,14 @@
 // GLTF EXTENSION: KHR_lights_punctual
 // https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_lights_punctual
 
-import type {GLTF} from '../types/gltf-types';
+import type {GLTF} from '../../types/gltf-types';
 
-import {assert} from '../utils/assert';
-import GLTFScenegraph from '../api/gltf-scenegraph';
-import {KHR_LIGHTS_PUNCTUAL} from '../gltf-utils/gltf-constants';
+import {assert} from '../../utils/assert';
+import GLTFScenegraph from '../../api/gltf-scenegraph';
+
+const KHR_LIGHTS_PUNCTUAL = 'KHR_lights_punctual';
+
+export const name = KHR_LIGHTS_PUNCTUAL;
 
 export async function decode(gltfData: {json: GLTF}): Promise<void> {
   const gltfScenegraph = new GLTFScenegraph(gltfData);

package/src/lib/extensions/{KHR_materials_unlit.ts → deprecated/KHR_materials_unlit.ts}

@@ -1,10 +1,13 @@
 // GLTF EXTENSION: KHR_materials_unlit
 // https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_unlit
 
-import type {GLTF} from '../types/gltf-types';
+import type {GLTF} from '../../types/gltf-types';
 
-import GLTFScenegraph from '../api/gltf-scenegraph';
-import {KHR_MATERIALS_UNLIT} from '../gltf-utils/gltf-constants';
+import GLTFScenegraph from '../../api/gltf-scenegraph';
+
+const KHR_MATERIALS_UNLIT = 'KHR_materials_unlit';
+
+export const name = KHR_MATERIALS_UNLIT;
 
 export async function decode(gltfData: {json: GLTF}): Promise<void> {
   const gltfScenegraph = new GLTFScenegraph(gltfData);

package/src/lib/extensions/{KHR_techniques_webgl.ts → deprecated/KHR_techniques_webgl.ts}

@@ -1,10 +1,13 @@
 // GLTF EXTENSION: KHR_techniques_webgl
 // https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_techniques_webgl
 
-import type {GLTF} from '../types/gltf-types';
+import type {GLTF} from '../../types/gltf-types';
 
-import GLTFScenegraph from '../api/gltf-scenegraph';
-import {KHR_TECHNIQUES_WEBGL} from '../gltf-utils/gltf-constants';
+import GLTFScenegraph from '../../api/gltf-scenegraph';
+
+const KHR_TECHNIQUES_WEBGL = 'KHR_techniques_webgl';
+
+export const name = KHR_TECHNIQUES_WEBGL;
 
 export async function decode(gltfData: {json: GLTF}): Promise<void> {
   const gltfScenegraph = new GLTFScenegraph(gltfData);

package/src/lib/gltf-utils/gltf-constants.ts

@@ -1,15 +1,3 @@
-// GLTF 1.0 extensions
-export const KHR_BINARY_GLTF = 'KHR_binary_glTF';
-
-// GLTF 2.0 extensions
-export const KHR_DRACO_MESH_COMPRESSION = 'KHR_draco_mesh_compression';
-export const KHR_LIGHTS_PUNCTUAL = 'KHR_lights_punctual';
-export const KHR_MATERIALS_UNLIT = 'KHR_materials_unlit';
-export const KHR_TECHNIQUES_WEBGL = 'KHR_techniques_webgl';
-
-// External extensions
-export const EXT_MESHOPT_COMPRESSION = 'EXT_meshopt_compression';
-
 const COMPONENTS = {
   SCALAR: 1,
   VEC2: 2,

package/src/lib/parsers/parse-gltf.ts

@@ -1,25 +1,27 @@
 /* eslint-disable camelcase, max-statements, no-restricted-globals */
 import type {LoaderContext} from '@loaders.gl/loader-utils';
+import {BasisLoader, selectSupportedBasisFormat} from '@loaders.gl/textures';
+import type {GLTFLoaderOptions} from '../../gltf-loader';
 import type {GLB} from '../types/glb-types';
-import type {GLBParseOptions} from './parse-glb';
+import type {GLTFWithBuffers} from '../types/gltf-types';
 
 import {ImageLoader} from '@loaders.gl/images';
 import {parseJSON, sliceArrayBuffer} from '@loaders.gl/loader-utils';
 import {assert} from '../utils/assert';
 import {resolveUrl} from '../gltf-utils/resolve-url';
 import {getTypedArrayForBufferView} from '../gltf-utils/get-typed-array';
-import {decodeExtensions} from '../extensions/gltf-extensions';
+import {preprocessExtensions, decodeExtensions} from '../api/gltf-extensions';
 import {normalizeGLTFV1} from '../api/normalize-gltf-v1';
 import {postProcessGLTF} from '../api/post-process-gltf';
 import parseGLBSync, {isGLB} from './parse-glb';
 
 export type GLTFParseOptions = {
-  excludeExtensions?: string[];
-  decompressMeshes?: boolean;
   normalize?: boolean;
-  loadBuffers?: boolean;
   loadImages?: boolean;
+  loadBuffers?: boolean;
+  decompressMeshes?: boolean;
   postProcess?: boolean;
+  excludeExtensions?: string[];
 };
 
 // export type GLTFOptions = {
@@ -32,19 +34,18 @@ export function isGLTF(arrayBuffer, options?): boolean {
 }
 
 export async function parseGLTF(
-  gltf,
+  gltf: GLTFWithBuffers,
   arrayBufferOrString,
   byteOffset = 0,
-  options: {
-    gltf?: GLTFParseOptions;
-    glb?: GLBParseOptions;
-  },
+  options: GLTFLoaderOptions,
   context: LoaderContext
 ) {
   parseGLTFContainerSync(gltf, arrayBufferOrString, byteOffset, options);
 
   normalizeGLTFV1(gltf, {normalize: options?.gltf?.normalize});
 
+  preprocessExtensions(gltf, options, context);
+
   const promises: Promise<any>[] = [];
 
   // Load linked buffers asynchronously and decodes base64 buffers in parallel
@@ -120,10 +121,14 @@ function parseGLTFContainerSync(gltf, data, byteOffset, options) {
   gltf.images = new Array(images.length).fill({});
 }
 
-// Asynchronously fetch and parse buffers, store in buffers array outside of json
-async function loadBuffers(gltf, options, context: LoaderContext) {
-  for (let i = 0; i < gltf.json.buffers.length; ++i) {
-    const buffer = gltf.json.buffers[i];
+/** Asynchronously fetch and parse buffers, store in buffers array outside of json
+ * TODO - traverse gltf and determine which buffers are actually needed
+ */
+async function loadBuffers(gltf: GLTFWithBuffers, options, context: LoaderContext) {
+  // TODO
+  const buffers = gltf.json.buffers || [];
+  for (let i = 0; i < buffers.length; ++i) {
+    const buffer = buffers[i];
     if (buffer.uri) {
       const {fetch} = context;
       assert(fetch);
@@ -143,19 +148,49 @@ async function loadBuffers(gltf, options, context: LoaderContext) {
   }
 }
 
-async function loadImages(gltf, options, context: LoaderContext) {
+/**
+ * Loads all images
+ * TODO - traverse gltf and determine which images are actually needed
+ * @param gltf
+ * @param options
+ * @param context
+ * @returns
+ */
+async function loadImages(gltf: GLTFWithBuffers, options, context: LoaderContext) {
+  const imageIndices = getReferencesImageIndices(gltf);
+
   const images = gltf.json.images || [];
 
   const promises: Promise<any>[] = [];
-  for (let i = 0; i < images.length; ++i) {
-    promises.push(loadImage(gltf, images[i], i, options, context));
+  for (const imageIndex of imageIndices) {
+    promises.push(loadImage(gltf, images[imageIndex], imageIndex, options, context));
   }
 
   return await Promise.all(promises);
 }
 
-// Asynchronously fetches and parses one image, store in images array outside of json
-async function loadImage(gltf, image, index: number, options, context: LoaderContext) {
+/** Make sure we only load images that are actually referenced by textures */
+function getReferencesImageIndices(gltf: GLTFWithBuffers): number[] {
+  const imageIndices = new Set<number>();
+
+  const textures = gltf.json.textures || [];
+  for (const texture of textures) {
+    if (texture.source !== undefined) {
+      imageIndices.add(texture.source);
+    }
+  }
+
+  return Array.from(imageIndices).sort();
+}
+
+/** Asynchronously fetches and parses one image, store in images array outside of json */
+async function loadImage(
+  gltf: GLTFWithBuffers,
+  image,
+  index: number,
+  options,
+  context: LoaderContext
+) {
   const {fetch, parse} = context;
 
   let arrayBuffer;
@@ -174,9 +209,26 @@ async function loadImage(gltf, image, index: number, options, context: LoaderCon
   assert(arrayBuffer, 'glTF image has no data');
 
   // Call `parse`
-  const parsedImage = await parse(arrayBuffer, ImageLoader, {}, context);
+  let parsedImage = await parse(
+    arrayBuffer,
+    [ImageLoader, BasisLoader],
+    {mimeType: image.mimeType, basis: {format: selectSupportedBasisFormat()}},
+    context
+  );
+
+  if (parsedImage && parsedImage[0]) {
+    parsedImage = {
+      compressed: true,
+      mipmaps: false,
+      width: parsedImage[0].width,
+      height: parsedImage[0].height,
+      data: parsedImage
+    };
+  }
   // TODO making sure ImageLoader is overridable by using array of loaders
   // const parsedImage = await parse(arrayBuffer, [ImageLoader]);
 
+  // Store the loaded image
+  gltf.images = gltf.images || [];
   gltf.images[index] = parsedImage;
 }