Add ktx

2026-06-14 19:09:18 +01:00
parent 14bd1a9271
commit 13fa90a0e9
3958 changed files with 999286 additions and 4 deletions
@@ -0,0 +1,128 @@
+/**
+ * Transcodes DXT into RGB565.
+ * This is an optimized version of dxtToRgb565Unoptimized() below.
+ * Optimizations:
+ * 1. Use integer math to compute c2 and c3 instead of floating point
+ *    math.  Specifically:
+ *      c2 = 5/8 * c0 + 3/8 * c1
+ *      c3 = 3/8 * c0 + 5/8 * c1
+ *    This is about a 40% performance improvement.  It also appears to
+ *    match what hardware DXT decoders do, as the colors produced
+ *    by this integer math match what hardware produces, while the
+ *    floating point in dxtToRgb565Unoptimized() produce slightly
+ *    different colors (for one GPU this was tested on).
+ * 2. Unroll the inner loop.  Another ~10% improvement.
+ * 3. Compute r0, g0, b0, r1, g1, b1 only once instead of twice.
+ *    Another 10% improvement.
+ * 4. Use a Uint16Array instead of a Uint8Array.  Another 10% improvement.
+ * @param {Uint16Array} src The src DXT bits as a Uint16Array.
+ * @param {number} srcByteOffset
+ * @param {number} width
+ * @param {number} height
+ * @return {Uint16Array} dst
+ */
+function dxtToRgb565(src, src16Offset, width, height) {
+  var c = new Uint16Array(4);
+  var dst = new Uint16Array(width * height);
+  var nWords = (width * height) / 4;
+  var m = 0;
+  var dstI = 0;
+  var i = 0;
+  var r0 = 0, g0 = 0, b0 = 0, r1 = 0, g1 = 0, b1 = 0;
+
+  var blockWidth = width / 4;
+  var blockHeight = height / 4;
+  for (var blockY = 0; blockY < blockHeight; blockY++) {
+    for (var blockX = 0; blockX < blockWidth; blockX++) {
+      i = src16Offset + 4 * (blockY * blockWidth + blockX);
+      c[0] = src[i];
+      c[1] = src[i + 1];
+	  
+      r0 = c[0] & 0x1f;
+      g0 = c[0] & 0x7e0;
+      b0 = c[0] & 0xf800;
+      r1 = c[1] & 0x1f;
+      g1 = c[1] & 0x7e0;
+      b1 = c[1] & 0xf800;
+      // Interpolate between c0 and c1 to get c2 and c3.
+      // Note that we approximate 1/3 as 3/8 and 2/3 as 5/8 for
+      // speed.  This also appears to be what the hardware DXT
+      // decoder in many GPUs does :)
+
+	  // rg FIXME: This is most likely leading to wrong results vs. a GPU
+	  
+      c[2] = ((5 * r0 + 3 * r1) >> 3)
+             | (((5 * g0 + 3 * g1) >> 3) & 0x7e0)
+             | (((5 * b0 + 3 * b1) >> 3) & 0xf800);
+      c[3] = ((5 * r1 + 3 * r0) >> 3)
+             | (((5 * g1 + 3 * g0) >> 3) & 0x7e0)
+             | (((5 * b1 + 3 * b0) >> 3) & 0xf800);
+      m = src[i + 2];
+      dstI = (blockY * 4) * width + blockX * 4;
+      dst[dstI] = c[m & 0x3];
+      dst[dstI + 1] = c[(m >> 2) & 0x3];
+      dst[dstI + 2] = c[(m >> 4) & 0x3];
+      dst[dstI + 3] = c[(m >> 6) & 0x3];
+      dstI += width;
+      dst[dstI] = c[(m >> 8) & 0x3];
+      dst[dstI + 1] = c[(m >> 10) & 0x3];
+      dst[dstI + 2] = c[(m >> 12) & 0x3];
+      dst[dstI + 3] = c[(m >> 14)];
+      m = src[i + 3];
+      dstI += width;
+      dst[dstI] = c[m & 0x3];
+      dst[dstI + 1] = c[(m >> 2) & 0x3];
+      dst[dstI + 2] = c[(m >> 4) & 0x3];
+      dst[dstI + 3] = c[(m >> 6) & 0x3];
+      dstI += width;
+      dst[dstI] = c[(m >> 8) & 0x3];
+      dst[dstI + 1] = c[(m >> 10) & 0x3];
+      dst[dstI + 2] = c[(m >> 12) & 0x3];
+      dst[dstI + 3] = c[(m >> 14)];
+    }
+  }
+  return dst;
+}
+
+
+/**
+ * An unoptimized version of dxtToRgb565.  Also, the floating
+ * point math used to compute the colors actually results in
+ * slightly different colors compared to hardware DXT decoders.
+ * @param {Uint8Array} src
+ * @param {number} srcByteOffset
+ * @param {number} width
+ * @param {number} height
+ * @return {Uint16Array} dst
+ */
+function dxtToRgb565Unoptimized(src, srcByteOffset, width, height) {
+  var c = new Uint16Array(4);
+  var dst = new Uint16Array(width * height);
+  var nWords = (width * height) / 4;
+
+  var blockWidth = width / 4;
+  var blockHeight = height / 4;
+  for (var blockY = 0; blockY < blockHeight; blockY++) {
+    for (var blockX = 0; blockX < blockWidth; blockX++) {
+      var i = srcByteOffset + 8 * (blockY * blockWidth + blockX);
+      c[0] = src[i] | (src[i + 1] << 8);
+      c[1] = src[i + 2] | (src[i + 3] << 8);
+      c[2] = (2 * (c[0] & 0x1f) + 1 * (c[1] & 0x1f)) / 3
+             | (((2 * (c[0] & 0x7e0) + 1 * (c[1] & 0x7e0)) / 3) & 0x7e0)
+             | (((2 * (c[0] & 0xf800) + 1 * (c[1] & 0xf800)) / 3) & 0xf800);
+      c[3] = (2 * (c[1] & 0x1f) + 1 * (c[0] & 0x1f)) / 3
+             | (((2 * (c[1] & 0x7e0) + 1 * (c[0] & 0x7e0)) / 3) & 0x7e0)
+             | (((2 * (c[1] & 0xf800) + 1 * (c[0] & 0xf800)) / 3) & 0xf800);
+      for (var row = 0; row < 4; row++) {
+        var m = src[i + 4 + row];
+        var dstI = (blockY * 4 + row) * width + blockX * 4;
+        dst[dstI++] = c[m & 0x3];
+        dst[dstI++] = c[(m >> 2) & 0x3];
+        dst[dstI++] = c[(m >> 4) & 0x3];
+        dst[dstI++] = c[(m >> 6) & 0x3];
+      }
+    }
+  }
+  return dst;
+}
+
@@ -0,0 +1,596 @@
+<html>
+<head>
+<script src="renderer.js"></script>
+<script src="dxt-to-rgb565.js"></script>
+<script src="../transcoder/build/basis_transcoder.js"></script>
+<script type="text/javascript">
+function log(s) {
+  var div = document.createElement('div');
+  div.innerHTML = s;
+  document.getElementById('logger').appendChild(div);
+}
+
+function logTime(desc, t) {
+  log(t + 'ms ' + desc);
+}
+
+function isDef(v) {
+  return typeof v != 'undefined';
+}
+
+function elem(id) {
+  return document.getElementById(id);
+}
+
+formatTable = function(rows) {
+  var colLengths = [];
+
+  for (var i = 0; i < rows.length; i++) {
+    var row = rows[i];
+    for (var j = 0; j < row.length; j++) {
+      if (colLengths.length <= j) colLengths.push(0);
+      if (colLengths[j] < row[j].length) colLengths[j] = row[j].length;
+    }
+  }
+
+  function formatRow(row) {
+    var parts = [];
+    for (var i = 0; i < colLengths.length; i++) {
+      var s = row.length > i ? row[i] : '';
+      var padding = (new Array(1 + colLengths[i] - s.length)).join(' ');
+      if (s && s[0] >= '0' && s[0] <= '9') {
+        // Right-align numbers.
+        parts.push(padding + s);
+      } else {
+        parts.push(s + padding);
+      }
+    }
+    return parts.join(' | ');
+  }
+
+  var width = 0;
+  for (var i = 0; i < colLengths.length; i++) {
+    width += colLengths[i];
+    // Add another 3 for the separator.
+    if (i != 0) width += 3;
+  }
+
+  var lines = [];
+  lines.push(formatRow(rows[0]));
+  lines.push((new Array(width + 1)).join('-'));
+  for (var i = 1; i < rows.length; i++) {
+    lines.push(formatRow(rows[i]));
+  }
+
+  return lines.join('\n');
+};
+
+
+function loadArrayBuffer(uri, callback) {
+  log('Loading ' + uri + '...');
+  var xhr = new XMLHttpRequest();
+  xhr.responseType = "arraybuffer";
+  xhr.open('GET', uri, true);
+  xhr.onreadystatechange = function(e) {
+    if (xhr.readyState == 4 && xhr.status == 200) {
+      callback(xhr.response);
+    }
+  }
+  xhr.send(null);
+}
+
+// ASTC format, from:
+// https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_astc/
+COMPRESSED_RGBA_ASTC_4x4_KHR = 0x93B0;
+
+// DXT formats, from:
+// http://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_s3tc/
+COMPRESSED_RGB_S3TC_DXT1_EXT  = 0x83F0;
+COMPRESSED_RGBA_S3TC_DXT1_EXT = 0x83F1;
+COMPRESSED_RGBA_S3TC_DXT3_EXT = 0x83F2;
+COMPRESSED_RGBA_S3TC_DXT5_EXT = 0x83F3;
+
+// BC7 format, from:
+// https://www.khronos.org/registry/webgl/extensions/EXT_texture_compression_bptc/
+COMPRESSED_RGBA_BPTC_UNORM = 0x8E8C;
+
+// ETC format, from:
+// https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc1/
+COMPRESSED_RGB_ETC1_WEBGL = 0x8D64;
+
+// PVRTC format, from:
+// https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_pvrtc/
+COMPRESSED_RGB_PVRTC_4BPPV1_IMG = 0x8C00;
+COMPRESSED_RGBA_PVRTC_4BPPV1_IMG = 0x8C02;
+
+// Same as the Module.transcoder_texture_format enum
+BASIS_FORMAT = {
+  cTFETC1: 0,
+  cTFETC2: 1,
+  cTFBC1: 2,
+  cTFBC3: 3,
+  cTFBC4: 4,
+  cTFBC5: 5,
+  cTFBC7: 6,
+  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,
+  cTFFXT1_RGB: 17,
+  cTFPVRTC2_4_RGB: 18,
+  cTFPVRTC2_4_RGBA: 19,
+  cTFETC2_EAC_R11: 20,              
+  cTFETC2_EAC_RG11: 21  
+};
+
+BASIS_FORMAT_NAMES = {};
+for (var name in BASIS_FORMAT) {
+  BASIS_FORMAT_NAMES[BASIS_FORMAT[name]] = name;
+}
+
+DXT_FORMAT_MAP = {};
+DXT_FORMAT_MAP[BASIS_FORMAT.cTFBC1] = COMPRESSED_RGB_S3TC_DXT1_EXT;
+DXT_FORMAT_MAP[BASIS_FORMAT.cTFBC3] = COMPRESSED_RGBA_S3TC_DXT5_EXT;
+DXT_FORMAT_MAP[BASIS_FORMAT.cTFBC7] = COMPRESSED_RGBA_BPTC_UNORM; 
+
+var astcSupported = false;
+var etcSupported = false;
+var dxtSupported = false;
+var bc7Supported = false;
+var pvrtcSupported = false;
+var drawMode = 0;
+
+var tex, width, height, images, levels, have_alpha, alignedWidth, alignedHeight, format, displayWidth, displayHeight;
+
+function redraw()
+{
+  if (!width)
+   return;
+
+  renderer.drawTexture(tex, displayWidth, displayHeight, drawMode);
+}
+
+function dumpBasisFileDesc(basisFile)
+{
+  var basisFileDesc = basisFile.getFileDesc();
+
+  log('------');  
+  log('getFileDesc():');
+  log('version: ' + basisFileDesc.version);
+  log('us per frame: ' + basisFileDesc.usPerFrame);
+  log('total images: ' + basisFileDesc.totalImages);
+  log('userdata0: ' + basisFileDesc.userdata0 + ' userdata1: ' + basisFileDesc.userdata1);
+  log('texFormat: ' + basisFileDesc.texFormat);
+  log('yFlipped: ' + basisFileDesc.yFlipped + ' hasAlphaSlices: ' + basisFileDesc.hasAlphaSlices);
+  
+  if (basisFileDesc.texFormat == Module.basis_tex_format.cETC1S.value)
+  {
+      log('numEndpoints: ' + basisFileDesc.numEndpoints);
+      log('endpointPaletteOfs: ' + basisFileDesc.endpointPaletteOfs);
+      log('endpointPaletteLen: ' + basisFileDesc.endpointPaletteLen);
+      log('numSelectors: ' + basisFileDesc.numSelectors);
+      log('selectorPaletteOfs: ' + basisFileDesc.selectorPaletteOfs);
+      log('selectorPaletteLen: ' + basisFileDesc.selectorPaletteLen);
+      log('tablesOfs: ' + basisFileDesc.tablesOfs);
+      log('tablesLen: ' + basisFileDesc.tablesLen);
+  }
+  log('------');
+  log('getImageDesc() for all images:');
+  var image_index;
+  for (image_index = 0; image_index < basisFileDesc.totalImages; image_index++)
+  {
+     log('image: ' + image_index);
+     
+     var basisImageDesc = basisFile.getImageDesc(image_index);
+     
+     log('origWidth: ' + basisImageDesc.origWidth + ' origWidth: ' + basisImageDesc.origHeight);
+     log('numBlocksX: ' + basisImageDesc.numBlocksX + ' origWidth: ' + basisImageDesc.numBlocksY);
+     log('numLevels: ' + basisImageDesc.numLevels);
+     log('alphaFlag: ' + basisImageDesc.alphaFlag + ' iframeFlag: ' + basisImageDesc.iframeFlag);
+
+     log('getImageLevelDesc() for all mipmap levels:');
+     var level_index;
+     for (level_index = 0; level_index < basisImageDesc.numLevels; level_index++)
+     {
+        var basisImageLevelDesc = basisFile.getImageLevelDesc(image_index, level_index);
+        
+        log('level: ' + level_index + 
+            ' rgb_file_offset: ' + basisImageLevelDesc.rgbFileOfs + ' rgb_file_len: ' + basisImageLevelDesc.rgbFileLen);
+
+        if (basisFileDesc.hasAlphaSlices)           
+            log('alpha_file_offset: ' + basisImageLevelDesc.alphaFileOfs + ' alpha_file_len: ' + basisImageLevelDesc.alphaFileLen);
+     }
+  }
+  
+  log('------');
+}
+
+function dataLoaded(data)
+{
+  log('Done loading .basis file, decoded header:');
+
+  const { BasisFile, initializeBasis } = Module;
+  initializeBasis();
+
+  const startTime = performance.now();
+
+  const basisFile = new BasisFile(new Uint8Array(data));
+
+  width = basisFile.getImageWidth(0, 0);
+  height = basisFile.getImageHeight(0, 0);
+  images = basisFile.getNumImages();
+  levels = basisFile.getNumLevels(0);
+  has_alpha = basisFile.getHasAlpha();
+  
+  dumpBasisFileDesc(basisFile);
+  
+  if (!width || !height || !images || !levels) {
+    console.warn('Invalid .basis file');
+    basisFile.close();
+    basisFile.delete();
+    return;
+  }
+  
+  // Note: If the file is UASTC, the preferred formats are ASTC/BC7.
+  // If the file is ETC1S and doesn't have alpha, the preferred formats are ETC1 and BC1. For alpha, the preferred formats are ETC2, BC3 or BC7. 
+
+  var formatString = 'UNKNOWN';
+  if (astcSupported)
+  {
+    formatString = 'ASTC';
+    format = BASIS_FORMAT.cTFASTC_4x4;
+  }
+  else if (bc7Supported)
+  {
+    formatString = 'BC7';
+    format = BASIS_FORMAT.cTFBC7;
+  }
+  else if (dxtSupported)
+  {
+    if (has_alpha)
+    {
+      formatString = 'BC3';
+      format = BASIS_FORMAT.cTFBC3;
+    }
+    else
+    {
+      formatString = 'BC1';
+      format = BASIS_FORMAT.cTFBC1;
+    }
+  }
+  else if (pvrtcSupported)
+  {
+    if (has_alpha)
+    {
+      formatString = 'PVRTC1_RGBA';
+      format = BASIS_FORMAT.cTFPVRTC1_4_RGBA;
+    }
+    else
+    {
+      formatString = 'PVRTC1_RGB';
+      format = BASIS_FORMAT.cTFPVRTC1_4_RGB;
+    }
+    
+    if (
+         ((width & (width - 1)) != 0) || ((height & (height - 1)) != 0)
+        )
+    {
+      log('ERROR: PVRTC1 requires square power of 2 textures');
+    }
+    if (width != height)
+    {
+      log('ERROR: PVRTC1 requires square power of 2 textures');    
+    }
+  }
+  else if (etcSupported)
+  {
+    formatString = 'ETC1';
+    format = BASIS_FORMAT.cTFETC1;
+  }
+  else
+  {
+    formatString = 'RGB565';
+    format = BASIS_FORMAT.cTFRGB565;
+    log('Decoding .basis data to 565');
+  }
+
+  elem('format').innerText = formatString;
+  
+  log('format: ' + format);
+
+  if (!basisFile.startTranscoding()) {
+    log('startTranscoding failed');
+    console.warn('startTranscoding failed');
+    basisFile.close();
+    basisFile.delete();
+    return;
+  }
+  
+  const isUncompressedFormat = Module.formatIsUncompressed(format);
+  
+  const blockWidth = isUncompressedFormat ? 1 : 4, blockHeight = isUncompressedFormat ? 1 : 4;
+  
+  const bytesPerBlockOrPixel = Module.getBytesPerBlockOrPixel(format);
+  log('isUncompressedFormat: ' + isUncompressedFormat + ' bytesPerBlockOrPixel: ' + bytesPerBlockOrPixel);
+      
+  const dstSize = basisFile.getImageTranscodedSizeInBytes(0, 0, format);
+  const dst = new Uint8Array(dstSize);
+  
+//  log('getImageTranscodedSizeInBytes() returned ' + dstSize);
+
+  // Use the low or high level transcoding API's. The high level API's require .basis files, while the low-level API's just work off blobs of memory and parameters. 
+  if (elem('ContainerIndependentTranscoding').checked)
+  {
+      // Always transcode the first image and the first mipmap level
+      const image_index = 0;
+      const level_index = 0;
+      
+      // Get the .basis file description
+	  var basisFileDesc = basisFile.getFileDesc();
+
+	  // Get the description of the file's first image (there could be multiple images, for texture arrays or videos)
+      var basisImageDesc = basisFile.getImageDesc(image_index);
+
+      // Get the description of this image's mipmap level
+      var basisImageLevelDesc = basisFile.getImageLevelDesc(image_index, level_index);
+      
+      var status = false;
+
+      // If we're transcoding to ETC1S, use the LowLevelETC1SImageTranscoder class. Otherwise use the transcodeUASTCImage() function.
+      if (basisFileDesc.texFormat == Module.basis_tex_format.cETC1S.value)
+      {
+	     // Create an instance of the LowLevelETC1SImageTranscoder class.
+         const etc1s_transcoder = new Module.LowLevelETC1SImageTranscoder();
+
+         // Create Uint8Array's pointing into the various bits of the .basis file holding the compressed data for the codebooks and the Huffman tables.
+         var selectorPalette = new Uint8Array(data, basisFileDesc.selectorPaletteOfs, basisFileDesc.selectorPaletteLen);
+         var endpointPalette = new Uint8Array(data, basisFileDesc.endpointPaletteOfs, basisFileDesc.endpointPaletteLen);
+         var tables = new Uint8Array(data, basisFileDesc.tablesOfs, basisFileDesc.tablesLen);
+
+         // Create a Uint8Array pointing to the image's compressed data. 
+		 // If it's an opaque .basis file, there will only be RGB data. For transparant .basis files, each RGB slice will be immediately followed by an alpha slice.
+		 // Compressed ETC1S alpha data is guaranteed to immediately follow the RGB data (it's always at odd slices in the .basis file).
+         var compData = new Uint8Array(data, basisImageLevelDesc.rgbFileOfs, basisImageLevelDesc.rgbFileLen + basisImageLevelDesc.alphaFileLen);
+
+         // Decompress the palettes. This only has to be done once for each .basis file.
+		 var status = etc1s_transcoder.decodePalettes(basisFileDesc.numEndpoints, endpointPalette, basisFileDesc.numSelectors, selectorPalette);
+         if (status)
+         {
+			 // Decompress the Huffman tables. This only has to be done once for each .basis file.
+             status = etc1s_transcoder.decodeTables(tables);
+             if (status)
+             {
+			    // Now transcode the image using the container independent transcode API. This API does not interpret any .basis file structures - only the compressed ETC1S data.
+                status = etc1s_transcoder.transcodeImage(
+                    format,
+                    dst, dstSize / bytesPerBlockOrPixel,
+                    compData,
+                    basisImageDesc.numBlocksX, basisImageDesc.numBlocksY, basisImageDesc.origWidth, basisImageDesc.origHeight, level_index,
+                    0, basisImageLevelDesc.rgbFileLen, basisFileDesc.hasAlphaSlices ? basisImageLevelDesc.rgbFileLen : 0, basisImageLevelDesc.alphaFileLen,
+                    0,
+                    basisFileDesc.hasAlphaSlices,
+                    basisFileDesc.isVideo,
+                    0,
+                    0);
+                    
+                if (!status)
+                  log('transcodeImage() failed');
+             }
+             else
+             {
+               log('decodeTables() failed');
+             }
+         }
+         else
+         {
+            log('decodePalettes() failed');
+         }
+         
+         etc1s_transcoder.delete();
+         
+         if (!status)
+         {
+            log('etc1s_transcoder failed');
+            console.warn('etc1s_transcoder failed');
+            basisFile.close();
+            basisFile.delete();
+            return;
+         }
+         else
+         {
+            log('Successfully called etc1s_transcoder.transcodeImage()');
+         }
+      }
+      else
+      {
+         // Create a Uint8Array pointing to the image's compressed data. 
+         var compData = new Uint8Array(data, basisImageLevelDesc.rgbFileOfs, basisImageLevelDesc.rgbFileLen);
+
+         // Transcode the UASTC texture data to the desired output format.
+         status = Module.transcodeUASTCImage(
+            format,
+            dst, dstSize / bytesPerBlockOrPixel,
+            compData,
+            basisImageDesc.numBlocksX, basisImageDesc.numBlocksY, basisImageDesc.origWidth, basisImageDesc.origHeight, level_index,
+            0, basisImageLevelDesc.rgbFileLen, 
+            0,
+            basisFileDesc.hasAlphaSlices,
+            basisFileDesc.isVideo,
+            0,
+            0,
+            -1, -1);
+            
+         if (!status)
+         {
+            log('transcodeUASTCImage() failed');
+            console.warn('transcodeUASTCImage() failed');
+            basisFile.close();
+            basisFile.delete();
+            return;
+         }
+         else
+         {
+            log('Successfully called transcodeUASTCImage()');
+         }
+      }
+  }
+  else
+  {
+    // Use the high-level transcode API, which requires a .basis file. 
+    if (!basisFile.transcodeImage(dst, 0, 0, format, 0, 0)) {
+        log('basisFile.transcodeImage failed');
+        console.warn('transcodeImage failed');
+        basisFile.close();
+        basisFile.delete();
+        
+        return;
+    }
+  }
+
+  const elapsed = performance.now() - startTime;
+
+  basisFile.close();
+  basisFile.delete();
+
+  log('width: ' + width);
+  log('height: ' + height);
+  log('images: ' + images);
+  log('first image mipmap levels: ' + levels);
+  log('has_alpha: ' + has_alpha);
+  logTime('transcoding time', elapsed.toFixed(2));
+
+  alignedWidth = (width + 3) & ~3;
+  alignedHeight = (height + 3) & ~3;
+  
+  displayWidth = alignedWidth;
+  displayHeight = alignedHeight;
+
+  var canvas = elem('canvas');
+  canvas.width = alignedWidth;
+  canvas.height = alignedHeight;
+
+  if (format === BASIS_FORMAT.cTFASTC_4x4)
+  {
+    tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_4x4_KHR);
+  }
+  else if ((format === BASIS_FORMAT.cTFBC3) || (format === BASIS_FORMAT.cTFBC1) || (format == BASIS_FORMAT.cTFBC7))
+  {
+     tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, DXT_FORMAT_MAP[format]);
+  }
+  else if (format === BASIS_FORMAT.cTFETC1)
+  {
+    tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGB_ETC1_WEBGL);
+  }
+  else if (format === BASIS_FORMAT.cTFPVRTC1_4_RGB)
+  {
+    tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGB_PVRTC_4BPPV1_IMG);
+  }
+  else if (format === BASIS_FORMAT.cTFPVRTC1_4_RGBA)
+  {
+    tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_PVRTC_4BPPV1_IMG);
+  }
+  else
+  {
+   canvas.width = width;
+   canvas.height = height;
+   displayWidth = width;
+   displayHeight = height;
+
+   // Create 565 texture. 
+   var dstTex = new Uint16Array(width * height);
+   
+   // Convert the array of bytes to an array of uint16's.
+   var pix = 0;
+   for (var y = 0; y < height; y++)
+      for (var x = 0; x < width; x++, pix++)
+         dstTex[pix] = dst[2 * pix + 0] | (dst[2 * pix + 1] << 8);
+
+   tex = renderer.createRgb565Texture(dstTex, width, height);
+  }
+
+  redraw();
+}
+
+function runLoadFile() {
+  elem('logger').innerHTML = '';
+  loadArrayBuffer(elem('file').value, dataLoaded);
+}
+
+function alphaBlend() { drawMode = 0; redraw(); }
+function viewRGB() { drawMode = 1; redraw(); }
+function viewAlpha() { drawMode = 2; redraw(); }
+
+</script>
+</head>
+<body>
+  <br>
+  <div style="font-size: 24pt; font-weight: bold">
+    .basis->Compressed texture transcoder test
+  </div>
+
+  <br>This demo uses the Basis C++ transcoder (compiled to Javascript using Emscripten) to transcode a .basis file to <b id='format'>FORMAT</b>
+  <br>Thanks to Evan Parker for providing <a href="https://github.com/toji/webgl-texture-utils">webgl-texture-utils</a> and this test bed.
+  <br>
+  <br>
+      .basis file:
+      <input id="file" type="text" size=30 value="assets/kodim03.basis"></input>
+      <input type="button" value="Run!" onclick="runLoadFile()"></input>
+  <br>
+  <br>
+      <input type="button" value="Alpha blend" onclick="alphaBlend()"></input>
+      <input type="button" value="View RGB" onclick="viewRGB()"></input>
+     <input type="button" value="View Alpha" onclick="viewAlpha()"></input>
+  
+  <br>
+  <br>
+      Use Container Independent Transcoding API's:
+      <input type="checkbox" id="ContainerIndependentTranscoding">
+
+  <div style="position:absolute; left: 525px; top:130px; font-size: 20pt; font-weight: bold; color: red">
+    <div id="no-compressed-tex" style="display: none; width: 768px; font-size: 20pt; font-weight: bold; color: red">
+      NOTE: Your browser does not support several compressed texture format, so using RGB565.
+    </div>
+    <canvas id='canvas'></canvas>
+  </div>
+  <br><br>
+  <div id='logger'></div>
+</body>
+<script>
+  BASIS({onRuntimeInitialized : () => {
+    var gl = elem('canvas').getContext('webgl');
+    
+    astcSupported = !!gl.getExtension('WEBGL_compressed_texture_astc');
+    etcSupported = !!gl.getExtension('WEBGL_compressed_texture_etc1');
+    dxtSupported = !!gl.getExtension('WEBGL_compressed_texture_s3tc');
+    pvrtcSupported = !!(gl.getExtension('WEBGL_compressed_texture_pvrtc')) || !!(gl.getExtension('WEBKIT_WEBGL_compressed_texture_pvrtc'));
+    bc7Supported = !!gl.getExtension('EXT_texture_compression_bptc');
+    
+   // HACK HACK - for testing uncompressed
+   //astcSupported = false;
+   //etcSupported = false;
+   //dxtSupported = false;
+   //bc7Supported = false;
+   //pvrtcSupported = false;
+
+    window.renderer = new Renderer(gl);
+
+    elem('file').addEventListener('keydown', function(e) {
+      if (e.keyCode == 13) {
+        runLoadFile();
+      }
+    }, false);
+
+    if (!(astcSupported || etcSupported || dxtSupported || pvrtcSupported))
+    {
+//      elem('nodxt').style.display = 'block';
+    }
+
+    runLoadFile();
+  }}).then(module => window.Module = module);
+</script>
+</html>
@@ -0,0 +1,246 @@
+/**
+ * Constructs a renderer object.
+ * @param {WebGLRenderingContext} gl The GL context.
+ * @constructor
+ */
+var Renderer = function(gl) {
+  /**
+   * The GL context.
+   * @type {WebGLRenderingContext}
+   * @private
+   */
+  this.gl_ = gl;
+
+  /**
+   * The WebGLProgram.
+   * @type {WebGLProgram}
+   * @private
+   */
+  this.program_ = gl.createProgram();
+
+  /**
+   * @type {WebGLShader}
+   * @private
+   */
+  this.vertexShader_ = this.compileShader_(
+      Renderer.vertexShaderSource_, gl.VERTEX_SHADER);
+
+  /**
+   * @type {WebGLShader}
+   * @private
+   */
+  this.fragmentShader_ = this.compileShader_(
+      Renderer.fragmentShaderSource_, gl.FRAGMENT_SHADER);
+
+  /**
+   * Cached uniform locations.
+   * @type {Object.<string, WebGLUniformLocation>}
+   * @private
+   */
+  this.uniformLocations_ = {};
+
+  /**
+   * Cached attribute locations.
+   * @type {Object.<string, WebGLActiveInfo>}
+   * @private
+   */
+  this.attribLocations_ = {};
+
+  /**
+   * A vertex buffer containing a single quad with xy coordinates from [-1,-1]
+   * to [1,1] and uv coordinates from [0,0] to [1,1].
+   * @private
+   */
+  this.quadVertexBuffer_ = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, this.quadVertexBuffer_);
+  var vertices = new Float32Array(
+      [-1.0, -1.0, 0.0, 1.0,
+       +1.0, -1.0, 1.0, 1.0,
+       -1.0, +1.0, 0.0, 0.0,
+        1.0, +1.0, 1.0, 0.0]);
+  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+
+
+  // init shaders
+
+  gl.attachShader(this.program_, this.vertexShader_);
+  gl.attachShader(this.program_, this.fragmentShader_);
+  gl.bindAttribLocation(this.program_, 0, 'vert');
+  gl.linkProgram(this.program_);
+  gl.useProgram(this.program_);
+  gl.enableVertexAttribArray(0);
+
+  gl.enable(gl.DEPTH_TEST);
+  gl.disable(gl.CULL_FACE);
+
+  var count = gl.getProgramParameter(this.program_, gl.ACTIVE_UNIFORMS);
+  for (var i = 0; i < /** @type {number} */(count); i++) {
+    var info = gl.getActiveUniform(this.program_, i);
+    var result = gl.getUniformLocation(this.program_, info.name);
+    this.uniformLocations_[info.name] = result;
+  }
+
+  count = gl.getProgramParameter(this.program_, gl.ACTIVE_ATTRIBUTES);
+  for (var i = 0; i < /** @type {number} */(count); i++) {
+    var info = gl.getActiveAttrib(this.program_, i);
+    var result = gl.getAttribLocation(this.program_, info.name);
+    this.attribLocations_[info.name] = result;
+  }
+};
+
+
+Renderer.prototype.finishInit = function() {
+  this.draw();
+};
+
+
+Renderer.prototype.createDxtTexture = function(dxtData, width, height, format) {
+  var gl = this.gl_;
+  var tex = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.compressedTexImage2D(
+      gl.TEXTURE_2D,
+      0,
+      format,
+      width,
+      height,
+      0,
+      dxtData);
+  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.generateMipmap(gl.TEXTURE_2D)
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  return tex;
+};
+
+Renderer.prototype.createCompressedTexture = function(data, width, height, format) {
+  var gl = this.gl_;
+  var tex = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.compressedTexImage2D(
+      gl.TEXTURE_2D,
+      0,
+      format,
+      width,
+      height,
+      0,
+      data);
+  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.generateMipmap(gl.TEXTURE_2D)
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  return tex;
+};
+
+
+Renderer.prototype.createRgb565Texture = function(rgb565Data, width, height) {
+  var gl = this.gl_;
+  var tex = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.texImage2D(
+    gl.TEXTURE_2D,
+    0,
+    gl.RGB,
+    width,
+    height,
+    0,
+    gl.RGB,
+    gl.UNSIGNED_SHORT_5_6_5,
+    rgb565Data);
+  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.generateMipmap(gl.TEXTURE_2D)
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  return tex;
+};
+
+
+Renderer.prototype.drawTexture = function(texture, width, height, mode) {
+  var gl = this.gl_;
+  // draw scene
+  gl.clearColor(0, 0, 0, 1);
+  gl.clearDepth(1.0);
+  gl.viewport(0, 0, width, height);
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
+
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.uniform1i(this.uniformLocations_.texSampler, 0);
+
+  var x = 0.0;
+  var y = 0.0;
+  if (mode == 1)
+  	x = 1.0;
+  else if (mode == 2)
+    y = 1.0;
+	
+  gl.uniform4f(this.uniformLocations_.control, x, y, 0.0, 0.0);
+
+  gl.enableVertexAttribArray(this.attribLocations_.vert);
+  gl.bindBuffer(gl.ARRAY_BUFFER, this.quadVertexBuffer_);
+  gl.vertexAttribPointer(this.attribLocations_.vert, 4, gl.FLOAT,
+      false, 0, 0);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+};
+
+
+/**
+ * Compiles a GLSL shader and returns a WebGLShader.
+ * @param {string} shaderSource The shader source code string.
+ * @param {number} type Either VERTEX_SHADER or FRAGMENT_SHADER.
+ * @return {WebGLShader} The new WebGLShader.
+ * @private
+ */
+Renderer.prototype.compileShader_ = function(shaderSource, type) {
+  var gl = this.gl_;
+  var shader = gl.createShader(type);
+  gl.shaderSource(shader, shaderSource);
+  gl.compileShader(shader);
+  return shader;
+};
+
+
+/**
+ * @type {string}
+ * @private
+ */
+Renderer.vertexShaderSource_ = [
+  'attribute vec4 vert;',
+  'varying vec2 v_texCoord;',
+  'void main() {',
+  '  gl_Position = vec4(vert.xy, 0.0, 1.0);',
+  '  v_texCoord = vert.zw;',
+  '}'
+  ].join('\n');
+
+
+/**
+ * @type {string}
+ * @private '  gl_FragColor = texture2D(texSampler, v_texCoord);',
+ */
+Renderer.fragmentShaderSource_ = [
+  'precision highp float;',
+  'uniform sampler2D texSampler;',
+  'uniform vec4 control;',
+  'varying vec2 v_texCoord;',
+  'void main() {',
+  '  vec4 c;',
+  '  c = texture2D(texSampler, v_texCoord);',
+  '  if (control.x > 0.0)',
+  '  {',
+  '   	c.w = 1.0;',
+  '  }',
+  '	 else if (control.y > 0.0)',
+  '	 {',
+  '   	c.rgb = c.aaa; c.w = 1.0;',
+  '  }',
+  '  gl_FragColor = c;',
+  '}'
+  ].join('\n');
+