webgl/texture/index.html

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