<!--
    Simple .basis file transcode tester.
    Supports numerous texture formats: ETC1, PVRTC1, BC1-BC7, BC6H, ASTC LDR/HDR, and various uncompressed fallbacks.
    Important note: This sample doesn't support all ASTC/XUASTC LDR block sizes yet, just 4x4. See the "ktx2_encode_test" or "video_test" samples, which do.
-->

<!doctype html>
<html>
<head>
   <script src="renderer.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);
      }

      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;

      // BC6H/BC7 formats, from:
      // https://www.khronos.org/registry/webgl/extensions/EXT_texture_compression_bptc/
      COMPRESSED_RGBA_BPTC_UNORM = 0x8E8C;
      COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT = 0x8E8F;

      // 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;

      // Half float RGBA, from:
      // https://registry.khronos.org/webgl/extensions/OES_texture_half_float/
      HALF_FLOAT_OES = 0x8D61;

      // 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,
         cTFBC6H: 22,
         cTFASTC_HDR_4x4_RGBA: 23,
         cTFRGB_HALF: 24,
         cTFRGBA_HALF: 25,
         cTFRGB_9E5: 26,
         cTFASTC_HDR_6x6_RGBA: 27
      };

      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 bc6hSupported = false;
      var astcHDRSupported = false;
      var rgbaHalfSupported = false;
      var halfFloatWebGLFormat = 0;
      var pvrtcSupported = false;

      var drawMode = 0;
      var drawScale = 1.0;
      var linearToSRGBFlag = false;

      var tex, width, height, images, levels, has_alpha, is_hdr, basisTexFormat;
      var alignedWidth, alignedHeight, format, displayWidth, displayHeight;

      function redraw() {
         if (!width)
            return;

         renderer.drawTexture(tex, displayWidth, displayHeight, drawMode, drawScale, linearToSRGBFlag);
      }

      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;

         drawMode = 0;
         drawScale = 1.0;
         linearToSRGBFlag = false;
         elem('scale-slider').value = 1.0;
         elem('scale-value').textContent = 1;

         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();
         is_hdr = basisFile.isHDR();
         basisTexFormat = basisFile.getBasisTexFormat();

         var srcBlockWidth = basisFile.getBlockWidth();
         var srcBlockHeight = basisFile.getBlockHeight();

         var dstBlockWidth = 4;
         var dstBlockHeight = 4;

         log('isHDR: ' + is_hdr);

         dumpBasisFileDesc(basisFile);

         if (!width || !height || !images || !levels) {
            console.warn('Invalid .basis file');
            basisFile.close();
            basisFile.delete();
            return;
         }

         // Note: If the file is UASTC LDR, the preferred formats are ASTC/BC7. For UASTC HDR, ASTC/BC6H.
         // 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 (is_hdr) {
            if (astcHDRSupported)
            {
               if (basisTexFormat == Module.basis_tex_format.cUASTC_HDR_4x4.value)
               {
                  formatString = 'UASTC HDR 4x4';
                  format = BASIS_FORMAT.cTFASTC_HDR_4x4_RGBA;
               }
               else
               {
                  formatString = 'ASTC HDR 6x6';
                  format = BASIS_FORMAT.cTFASTC_HDR_6x6_RGBA;

                  dstBlockWidth = 6;
                  dstBlockHeight = 6;
               }
            }
            else if (bc6hSupported) {
               formatString = 'BC6H';
               format = BASIS_FORMAT.cTFBC6H;
            }
            else if (rgbaHalfSupported) {
               formatString = 'RGBA_HALF';
               format = BASIS_FORMAT.cTFRGBA_HALF;
            }
            else {
               formatString = '32-bit RGBA';
               format = BASIS_FORMAT.cTFRGBA_HALF;

               log('Decoding .basis data to 32-bit RGBA');
            }
         }
         else 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 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(
                  basisTexFormat,
                  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 = Math.floor((width + dstBlockWidth - 1) / dstBlockWidth) * dstBlockWidth;
         alignedHeight = Math.floor((height + dstBlockHeight - 1) / dstBlockHeight) * dstBlockHeight;

         displayWidth = alignedWidth;
         displayHeight = alignedHeight;

         var canvas = elem('canvas');
         canvas.width = alignedWidth;
         canvas.height = alignedHeight;

         // Create the WebGL texture object.
         if ((format === BASIS_FORMAT.cTFASTC_4x4) || (format === BASIS_FORMAT.cTFASTC_HDR_4x4_RGBA)) {
            tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_4x4_KHR);
         }
         else if (format === BASIS_FORMAT.cTFASTC_HDR_6x6_RGBA) {
            tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGBA_ASTC_6x6_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 if (format === BASIS_FORMAT.cTFBC6H) {
            tex = renderer.createCompressedTexture(dst, alignedWidth, alignedHeight, COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT);
         }
         else if (format == BASIS_FORMAT.cTFRGBA_HALF) {
            canvas.width = width;
            canvas.height = height;
            displayWidth = width;
            displayHeight = height;

            if (rgbaHalfSupported) {
               var numHalfs = dstSize / 2;

               // Create uint16 data from the uint8 data.
               var dstHalfs = new Uint16Array(numHalfs);

               // Convert the array of bytes to an array of uint16's.
               for (var i = 0; i < numHalfs; i++)
                  dstHalfs[i] = dst[2 * i + 0] | (dst[2 * i + 1] << 8);

               tex = renderer.createHalfRGBATexture(dstHalfs, width, height, halfFloatWebGLFormat);
            }
            else {
               // No HDR texture formats are supported (TODO: 9e5?) Fall back to plain 32bpp RGBA, just to do *something*. (Could also convert to RGBM.)
               const dstRGBA = new Uint8Array(width * height * 4);

               // Convert the array of half floats to uint8_t's, clamping as needed.
               var srcOfs = 0, dstOfs = 0;
               for (var y = 0; y < height; y++) {
                  for (var x = 0; x < width; x++) {
                     for (var c = 0; c < 4; c++) {
                        var h = dst[srcOfs] | (dst[srcOfs + 1] << 8);
                        var f = Module.convertHalfToFloat(h);

                        dstRGBA[dstOfs] = Math.min(255, Math.max(0, Math.round(f * 255.0)));

                        srcOfs += 2;
                        dstOfs++;
                     }
                  }
               }

               tex = renderer.createRgbaTexture(dstRGBA, width, height);
            }
         }
         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);
         }

         // Now draw a quad with the texture.
         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(); }
      function linearToSRGB() { linearToSRGBFlag = !linearToSRGBFlag; redraw(); }

      function updateScale(value) {
         document.getElementById('scale-value').textContent = value;
         drawScale = value;
         redraw();
      }

      function checkForGPUFormatSupport(gl) {
         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');

         // Check for BC6H support
         {
            var ext = gl.getExtension('EXT_texture_compression_bptc');
            if (ext) {
               bc6hSupported = !!ext.COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT;
            }
         }

         // Check for ASTC HDR support
         {
            var ext = gl.getExtension('WEBGL_compressed_texture_astc');

            if (ext) {
               var supportedProfiles = ext.getSupportedProfiles();

               var hdrProfiles = supportedProfiles.filter(profile => profile.includes('hdr'));

               if (hdrProfiles.length > 0) {
                  astcHDRSupported = true;
               }
            }
         }

         // Check for half-float texture support.
         {
            var ext = gl.getExtension('OES_texture_half_float');
            if (ext) {
               rgbaHalfSupported = true;
               halfFloatWebGLFormat = ext.HALF_FLOAT_OES;
            }
         }

         // HACK HACK - for testing uncompressed
         //astcSupported = false;
         //etcSupported = false;
         //dxtSupported = false;
         //bc7Supported = false;
         //pvrtcSupported = false;
         //bc6hSupported = false;
         //astcHDRSupported = false;
         //rgbaHalfSupported = false;

         console.log('astcSupported: ' + astcSupported);
         console.log('etcSupported: ' + etcSupported);
         console.log('dxtSupported: ' + dxtSupported);
         console.log('bc7Supported: ' + bc7Supported);
         console.log('pvrtcSupported: ' + pvrtcSupported);
         console.log('bc6hSupported: ' + bc6hSupported);
         console.log('astcHDRSupported: ' + astcHDRSupported);
         console.log('rgbaHalfSupported: ' + rgbaHalfSupported);
      }

   </script>
</head>
<body>
   <br>
   <div style="font-size: 24pt; font-weight: bold">
      .basis->GPU Compressed Texture Transcoder Test
   </div>

   <br>This demo uses the Basis Universal C++ transcoder (compiled to WebAssembly 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. <a href="../index.html">Go back.</a>
   <br>
   <br>
   .basis file:
   <input id="file" type="text" size=30 value="assets/desk.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>
   <input type="button" value="LinearToSRGB" onclick="linearToSRGB()"></input>

   <br>

   <label for="scale-slider">Scale:</label>
   <input type="range" id="scale-slider" min="0" max="16" step=".05" value="1" style="width: 300px;" oninput="updateScale(this.value)">
   <span id="scale-value">1</span>

   <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">
      <canvas id='canvas'></canvas>
   </div>

   <br><br>
   <div id='logger'></div>
</body>
<script>
   BASIS({
      onRuntimeInitialized: () => {
         var gl = elem('canvas').getContext('webgl');

         checkForGPUFormatSupport(gl);

         window.renderer = new Renderer(gl);

         elem('file').addEventListener('keydown', function (e) {
            if (e.keyCode == 13) {
               runLoadFile();
            }
         }, false);

         runLoadFile();
      }
   }).then(module => window.Module = module);
</script>
</html>