basis example app decodes reference textures

examples/basis/app.js

@@ -0,0 +1,110 @@
+/* global document, URL */
+import {load} from '@loaders.gl/core';
+import {BasisLoader, BasisFormat} from '@loaders.gl/basis';
+
+const canvas = document.createElement('canvas');
+document.body.appendChild(canvas);
+canvas.width = 768;
+canvas.height = 512;
+canvas.style.display = 'block';
+const gl = canvas.getContext('webgl');
+const dxtSupported = Boolean(gl.getExtension('WEBGL_compressed_texture_s3tc'));
+const loadOptions = {format: BasisFormat.cTFRGB565};
+
+if (dxtSupported) {
+  loadOptions.format = {
+    alpha: BasisFormat.cTFBC3,
+    noAlpha: BasisFormat.cTFBC1
+  };
+}
+
+const vs = `
+precision highp float;
+
+attribute vec2 position;
+varying vec2 uv;
+
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  uv = vec2(position.x * .5, -position.y * .5) + vec2(.5, .5);
+}
+`;
+
+const fs = `
+precision highp float;
+
+uniform sampler2D tex;
+varying vec2 uv;
+
+void main() {
+  gl_FragColor = vec4(texture2D(tex, uv).rgb, 1.);
+}
+`;
+
+const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(vertexShader, vs);
+gl.compileShader(vertexShader);
+
+const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+gl.shaderSource(fragmentShader, fs);
+gl.compileShader(fragmentShader);
+
+const program = gl.createProgram();
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+gl.linkProgram(program);
+
+if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+  // eslint-disable-next-line
+  console.error(gl.getProgramInfoLog(program));
+} else {
+  gl.enableVertexAttribArray(0);
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW);
+  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+
+  gl.useProgram(program);
+}
+
+function renderTexture({width, height, format, decodedData}) {
+  if (!dxtSupported) {
+    // TODO: implement cTFRGB565 support
+    return;
+  }
+
+  const ext = gl.getExtension('WEBGL_compressed_texture_s3tc');
+  const glFormat = {
+    [BasisFormat.cTFBC1]: ext.COMPRESSED_RGB_S3TC_DXT1_EXT,
+    [BasisFormat.cTFBC3]: ext.COMPRESSED_RGBA_S3TC_DXT5_EXT
+  }[format];
+
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.compressedTexImage2D(gl.TEXTURE_2D, 0, glFormat, width, height, 0, decodedData);
+
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+}
+
+const btn = document.createElement('button');
+document.body.appendChild(btn);
+btn.innerText = 'Load Basis File';
+
+btn.addEventListener('click', e => {
+  const el = document.createElement('input');
+  el.type = 'file';
+  el.addEventListener('input', async ev => {
+    const url = URL.createObjectURL(ev.target.files[0]);
+    const result = await load(url, BasisLoader, loadOptions);
+
+    // eslint-disable-next-line
+    console.log(result);
+    renderTexture(result[0][0]);
+  });
+  el.click();
+});

examples/wip/basis/package.json → examples/basis/package.json

@@ -6,10 +6,11 @@
     "start-local": "webpack-dev-server --env.local --progress --hot --open"
   },
   "dependencies": {
-    "@loaders.gl/core": "^2.0.0-alpha.4",
-    "@loaders.gl/basis": "^2.0.0-alpha.4"
+    "@loaders.gl/basis": "^2.0.0-alpha.4",
+    "@loaders.gl/core": "^2.0.0-alpha.4"
   },
   "devDependencies": {
+    "babel-plugin-inline-import": "^3.0.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.3.0",
     "webpack-dev-server": "^3.1.1"

examples/wip/basis/webpack.config.js → examples/basis/webpack.config.js

@@ -17,4 +17,4 @@ const CONFIG = {
 };
 
 // This line enables bundling against src in this repo rather than installed module
-module.exports = env => (env ? require('../../webpack.config.local')(CONFIG)(env) : CONFIG);
+module.exports = env => (env ? require('../webpack.config.local')(CONFIG)(env) : CONFIG);

examples/webpack.config.local.js

@@ -15,8 +15,7 @@ const ALIASES = require('ocular-dev-tools/config/ocular.config')({
 }).aliases;
 
 const ROOT_DIR = resolve(__dirname, '..');
-const PACKAGE_ROOT = resolve('../../../');
-const PACKAGE_INFO = require(resolve(PACKAGE_ROOT, 'package.json'));
+const PACKAGE_INFO = require(resolve(ROOT_DIR, 'package.json'));
 
 const BABEL_CONFIG = {
   presets: ['@babel/env'],

modules/basis/src/basis-loader.js

@@ -24,3 +24,25 @@ export const BasisLoader = {
   ...BasisWorkerLoader,
   parse: parseBasis
 };
+
+export const BasisFormat = {
+  /* eslint-disable camelcase */
+  cTFETC1: 0,
+  cTFETC2: 1,
+  cTFBC1: 2,
+  cTFBC3: 3,
+  cTFBC4: 4,
+  cTFBC5: 5,
+  cTFBC7_M6_OPAQUE_ONLY: 6,
+  cTFBC7_M5: 7,
+  cTFPVRTC1_4_RGB: 8,
+  cTFPVRTC1_4_RGBA: 9,
+  cTFASTC_4x4: 10,
+  cTFATC_RGB: 11,
+  cTFATC_RGBA_INTERPOLATED_ALPHA: 12,
+  cTFRGBA32: 13,
+  cTFRGB565: 14,
+  cTFBGR565: 15,
+  cTFRGBA4444: 16
+  /* eslint-enable camelcase */
+};

modules/basis/src/index.js

@@ -1,2 +1,2 @@
-export {BasisLoader, BasisWorkerLoader} from './basis-loader';
+export {BasisLoader, BasisWorkerLoader, BasisFormat} from './basis-loader';
 export {CompressedTextureLoader as _CompressedTextureLoader} from './compressed-texture-loader';

modules/basis/src/lib/parse-basis.js

@@ -1,8 +1,56 @@
+import {BasisFormat} from '../basis-loader';
 import {loadBasisModule} from './basis-module-loader';
 
+function transcodeImage(basisFile, imageIndex, levelIndex, options) {
+  const width = basisFile.getImageWidth(imageIndex, levelIndex);
+  const height = basisFile.getImageHeight(imageIndex, levelIndex);
+
+  // See https://github.com/BinomialLLC/basis_universal/pull/83
+  const hasAlpha = basisFile.getHasAlpha(/* imageIndex, levelIndex */);
+
+  let format = (options && options.format) || BasisFormat.cTFRGB565;
+  if (typeof format === 'object') {
+    format = hasAlpha ? format.alpha : format.noAlpha;
+  }
+
+  const decodedSize = basisFile.getImageTranscodedSizeInBytes(imageIndex, levelIndex, format);
+  const decodedData = new Uint8Array(decodedSize);
+
+  if (!basisFile.transcodeImage(decodedData, imageIndex, levelIndex, format, 0, 0)) {
+    return null;
+  }
+
+  return {width, height, hasAlpha, format, decodedSize, decodedData};
+}
+
 async function parse(data, options) {
   const {BasisFile} = await loadBasisModule(options);
-  return new BasisFile(new Uint8Array(data));
+  const basisFile = new BasisFile(new Uint8Array(data));
+
+  try {
+    if (!basisFile.startTranscoding()) {
+      return null;
+    }
+
+    const imageCount = basisFile.getNumImages();
+    const images = [];
+
+    for (let imageIndex = 0; imageIndex < imageCount; imageIndex++) {
+      const levelsCount = basisFile.getNumLevels(imageIndex);
+      const levels = [];
+
+      for (let levelIndex = 0; levelIndex < levelsCount; levelIndex++) {
+        levels.push(transcodeImage(basisFile, imageIndex, levelIndex, options));
+      }
+
+      images.push(levels);
+    }
+
+    return images;
+  } finally {
+    basisFile.close();
+    basisFile.delete();
+  }
 }
 
 export default parse;

yarn.lock

@@ -1435,6 +1435,13 @@
     npmlog "^4.1.2"
     write-file-atomic "^2.3.0"
 
+"@loaders.gl/experimental@2.0.0-alpha.4":
+  version "2.0.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/@loaders.gl/experimental/-/experimental-2.0.0-alpha.4.tgz#6a7f373864f19542dc91ad2825cf1d706c65e4bb"
+  integrity sha512-ZA9VDiJfFwEG32dmPnTFTpwJQfCmmrKu87PS8pBuz9U6TrqK4jPGkxpufuMOTYL+bMKbAEdhWux3hbUAdmdGRA==
+  dependencies:
+    "@loaders.gl/core" "2.0.0-alpha.4"
+
 "@luma.gl/constants@7.3.0":
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/@luma.gl/constants/-/constants-7.3.0.tgz#b1c45f22ccdd0f2b7064df3d76c44e30d19e3252"