Merge a7156e2 into 6f7d6e9

modules/basis/docs/README.md

@@ -0,0 +1,34 @@
+# Overview
+
+The `@loaders.gl/basis` module contains a loader for Basis encoded compressed textures (images).
+
+## Installation
+
+```bash
+npm install @loaders.gl/basis
+npm install @loaders.gl/core
+```
+
+## API
+
+| Loader                                                         | Description |
+| -------------------------------------------------------------- | ----------- |
+| [`BasisLoader`](modules/basis/docs/api-reference/basis-loader) |             |
+
+### Compressed Texture API
+
+A set of functions that can extract information from "unparsed" binary memory representation of certain compressed texture image formats. These functions are intended to be called on raw `ArrayBuffer` data, before the `BasisLoader` parses it and converts it to a parsed image type.
+
+TBA
+
+| Function | Description |
+| -------- | ----------- |
+
+
+## Return Types
+
+The `BasisLoader` returns Array of Array of ArrayBuffer
+
+TODO - Node.js handling - expand to normal image?
+
+See [`BasisLoader`](modules/basis/docs/api-reference/image-loader) for more details on options etc.

modules/basis/docs/api-reference/basis-loader.md

@@ -0,0 +1,33 @@
+# BasisLoader
+
+An image loader that works under both Node.js (requires `@loaders.gl/polyfills`) and the browser.
+
+| Loader         | Characteristic                  |
+| -------------- | ------------------------------- |
+| File Extension | `.basis`                        |
+| File Type      | Binary                          |
+| File Format    | Basis                           |
+| Data Format    | `Array of Array of ArrayBuffer` |
+| Supported APIs | `load`, `parse`                 |
+
+## Usage
+
+```js
+import '@loaders.gl/polyfills'; // only needed if using under Node
+import {ImageLoader} from '@loaders.gl/images';
+import {load} from '@loaders.gl/core';
+
+const image = await load(url, ImageLoader, options);
+```
+
+## Options
+
+| Option       | Type   | Default  | Description                                                                  |
+| ------------ | ------ | -------- | ---------------------------------------------------------------------------- |
+| `basis.type` | String | `'auto'` | Set to `imagebitmap`, `html` or `ndarray` to control type of returned image. |
+| `basis.type` | String | `'auto'` | Set to `imagebitmap`, `html` or `ndarray` to control type of returned image. |
+
+## Remarks
+
+- While generic, the `BasisLoader` is designed with WebGL applications in mind, ensuring that loaded image data can be used to create a `WebGLTexture` both in the browser and in headless gl under Node.js
+- Node.js support requires import `@loaders.gl/polyfills` before installing this module.

modules/basis/test/basis-loader.spec.js

@@ -0,0 +1,107 @@
+import test from 'tape-promise/tape';
+
+import {BasisLoader} from '@loaders.gl/basis';
+
+// import {isBrowser, load} from '@loaders.gl/core';
+// import {TEST_CASES, DATA_URL} from './lib/test-cases';
+// const TEST_URL = '@loaders.gl/images/test/data/img1-preview.png';
+
+test('BasisLoader#imports', t => {
+  t.ok(BasisLoader, 'BasisLoader defined');
+  t.end();
+});
+
+/*
+test('BasisLoader#load(URL)', async t => {
+  const image = await load(TEST_URL, BasisLoader);
+  t.ok(image, 'image loaded successfully from URL');
+  t.end();
+});
+
+test('BasisLoader#load(data URL)', async t => {
+  const image = await load(DATA_URL, BasisLoader);
+  t.ok(image, 'image loaded successfully from data URL');
+
+  t.deepEquals(image.width, 2, 'image width is correct');
+  t.deepEquals(image.height, 2, 'image height is correct');
+  if (!isBrowser) {
+    t.ok(ArrayBuffer.isView(image.data), 'image data is `ArrayBuffer`');
+    t.equals(image.data.byteLength, 16, 'image `data.byteLength` is correct');
+  }
+
+  t.end();
+});
+
+test('BasisLoader#formats', async t => {
+  for (const testCase of TEST_CASES) {
+    await testLoadImage(t, testCase);
+  }
+  t.end();
+});
+
+async function testLoadImage(t, testCase) {
+  const {title, url, width, height, skipUnderNode} = testCase;
+
+  // Skip some test cases under Node.js
+  if (!isBrowser && skipUnderNode) {
+    return;
+  }
+
+  const image = await load(url, BasisLoader);
+  t.ok(image, `${title} loaded ${url.slice(0, 40)}...`);
+  const imageSize = getImageSize(image);
+  t.ok(
+    imageSize.width === width && imageSize.height === height,
+    `${title} image has correct content ${url.slice(0, 30)}`
+  );
+}
+
+/*
+test('loadImage#worker', t => {
+  if (typeof Worker === 'undefined') {
+    t.comment('loadImage only works under browser');
+    t.end();
+    return;
+  }
+
+  const worker = new LoadImageWorker();
+  let testIndex = 0;
+
+  const runTest = index => {
+    const testCase = TEST_CASES[index];
+    if (!testCase) {
+      t.end();
+      return;
+    }
+    if (testCase.worker === false) {
+      // the current loader does not support loading from dataURL in a worker
+      runTest(testIndex++);
+      return;
+    }
+
+    const {title, width, height} = testCase;
+    t.comment(title);
+
+    let {url} = testCase;
+    url = url.startsWith('data:') ? url : resolvePath(CONTENT_BASE + url);
+
+    worker.onmessage = ({data}) => {
+      if (data.error) {
+        t.fail(data.error);
+      } else {
+        t.ok(data.image, 'loadImage loaded data from url');
+        t.ok(
+          data.image.width === width && data.image.height === height,
+          'loaded image has correct content'
+        );
+      }
+
+      runTest(testIndex++);
+    };
+
+    worker.postMessage(url);
+  };
+
+  runTest(testIndex++);
+});
+*/

modules/basis/test/data/README.md

@@ -0,0 +1,4 @@
+# Data Licenses
+
+- `progress` folder images, copied under MIT license from AnthumChris/fetch-progress-indicators.
+- `ibl/papermill`: Papermill textures used under [Apache 2.0](https://github.com/KhronosGroup/glTF-Sample-Viewer/blob/e2d487693fa2e6148bd29d05bc82586f5a002a45/LICENSE.md)

modules/basis/test/index.js

@@ -0,0 +1 @@
+import './basis-loader.spec';

test/aliases.js

@@ -26,6 +26,7 @@ const makeAliases = () => ({
   test: path.resolve(__dirname, '../test'),
   '@loaders.gl/3d-tiles/test': path.resolve(__dirname, '../modules/3d-tiles/test'),
   '@loaders.gl/arrow/test': path.resolve(__dirname, '../modules/arrow/test'),
+  '@loaders.gl/basis/test': path.resolve(__dirname, '../modules/basis/test'),
   '@loaders.gl/core/test': path.resolve(__dirname, '../modules/core/test'),
   '@loaders.gl/csv/test': path.resolve(__dirname, '../modules/csv/test'),
   '@loaders.gl/draco/test': path.resolve(__dirname, '../modules/draco/test'),

test/modules.js

@@ -8,9 +8,12 @@ require('@loaders.gl/polyfills');
 require('@loaders.gl/polyfills/test');
 require('@loaders.gl/core/test');
 require('@loaders.gl/loader-utils/test');
-require('@loaders.gl/images/test');
 require('@loaders.gl/math/test');
 
+// Image Formats
+require('@loaders.gl/images/test');
+require('@loaders.gl/basis/test');
+
 // Pointcloud/Mesh Formats
 require('@loaders.gl/draco/test');
 require('@loaders.gl/las/test');