webgl_videotest/index.html - external/github.com/BinomialLLC/basis_universal - Git at Google

 <html>
 <head>
 <script src="basis.js"></script>
 <script src="renderer.js"></script>
 <script src="dxt-to-rgb565.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);
 }

 // 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;
 COMPRESSED_RGBA_BPTC_UNORM = 0x8E8C;

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

 BASIS_DEBUG_FLAGS = {
 	DEBUG_FLAG_VIS_CR: 1,
 	DEBUG_FLAG_VIS_SELS: 2,
   	DEBUG_FLAG_VIS_ENDPOINTS: 4
 };

 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 dxtSupported = true;
 var bc7Supported = false;
 var drawMode = 0;

 var basisHandle = 0, src = 0, srcSize = 0;
 var tex = 0, width = 0, height = 0, images = 0, levels = 0, have_alpha = false, alignedWidth = 0, alignedHeight = 0, format;
 var curImageIndex = 0;

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

   if (dxtSupported)
   {
 	  renderer.drawTexture(tex, alignedWidth, alignedHeight, drawMode);
   }
   else if (format == BASIS_FORMAT.cTFBC1)
   {
 	  renderer.drawTexture(tex, alignedWidth, alignedHeight, drawMode);
   }
   else
   {
   	 log('TODO: Implement BC3->RGBA conversion for browsers that don\'t support BC3');
   }
 }

 function transcodeFrame()
 {
   if (basisHandle == 0)
   	return;

   var dstSize = Module._basis_get_image_transcoded_size_in_bytes(basisHandle, 0, 0, format);
   var dst = Module._malloc(dstSize);

   if (!Module._basis_transcode_image(basisHandle, dst, dstSize, curImageIndex, 0, format, 1, 0))
   {
 	  Module._basis_close(basisHandle); basisHandle = 0;
 	  Module._free(src); src = 0;
 	  Module._free(dst);
 	  width = 0;

  	  log('basis_transcode_image() failed!');
  	  return;
   }

   var dxtData = new Uint8Array(Module.HEAPU8.buffer, dst, dstSize);

   if (tex != 0)
   {
   	renderer.destroyTexture(tex);
   	tex = 0;
   }

   if (dxtSupported)
   {
 	  tex = renderer.createDxtTexture(dxtData, alignedWidth, alignedHeight, DXT_FORMAT_MAP[format]);
   }
   else if (format == BASIS_FORMAT.cTFBC1)
   {
   	  var rgb565Data = dxtToRgb565(Module.HEAPU16, dst / 2, alignedWidth, alignedHeight);

 	  tex = renderer.createRgb565Texture(rgb565Data, alignedWidth, alignedHeight);
   }

   Module._free(dst);
 }

 var then = 0;
 var timeSinceLastFrame = 0;
 var g_framerateLimit = true;
 var g_paused = false;
 var g_Framerate = 24.0;
 var g_targetFrame = 0.0;

 var g_dataLoadedCountDown;
 var g_receivedData;
 var forceBC1 = 0;

 function frame(now)
 {
    if (g_dataLoadedCountDown > 0)
    {
       g_dataLoadedCountDown = g_dataLoadedCountDown - 1;
       if (g_dataLoadedCountDown == 0)
       {
          if (g_receivedData)
          {
             transcode(g_receivedData);
             g_receivedData = 0;
          }
       }
    }


 	now *= 0.001;  // convert to seconds
     const deltaTime = now - then;
     then = now;

 	if (basisHandle != 0)
 	{
 		transcodeFrame();

   		redraw()

 		if (g_targetFrame >= 0)
 		{
 			timeSinceLastFrame = 0;

 			if (curImageIndex >= g_targetFrame)
 				g_targetFrame = -1;
 		    else
 				curImageIndex++;
 		}
 		else if (g_paused)
 		{
 			timeSinceLastFrame = 0;
 		}
 		else if (!g_framerateLimit)
 		{
 			timeSinceLastFrame = 0;
 			curImageIndex++;
 		}
 		else
 		{
 			timeSinceLastFrame += deltaTime;
 			if (timeSinceLastFrame > 1.0/g_Framerate)
 			{
 				timeSinceLastFrame -= 1.0/g_Framerate;

 				curImageIndex++;
 			}
 		}

 		if (curImageIndex == images)
 			curImageIndex = 0;
 	}

 	requestAnimationFrame(frame);

 //	log('Here!');
 }

 function transcode(data)
 {
   Module._basis_init();

   if (basisHandle != 0)
   {
   	Module._basis_close(basisHandle);
   	basisHandle = 0;
   }

   if (src != 0)
   {
     src = 0;
   	Module._free(src);
   }

   srcSize = data.byteLength;
   var bytes = new Uint8Array(data);
   src = Module._malloc(srcSize);
   arrayBufferCopy(bytes, Module.HEAPU8, src, srcSize);

   basisHandle = Module._basis_open(src, srcSize);
   if (!basisHandle)
   {
 	log('Failed opening basis file!');
 	Module._free(src); src = 0;
 	width = 0;
     return;
   }

   width = Module._basis_get_image_width(basisHandle, 0, 0);
   height = Module._basis_get_image_height(basisHandle, 0, 0);
   images = Module._basis_get_num_images(basisHandle, 0);
   levels = Module._basis_get_num_levels(basisHandle, 0);
   has_alpha = Module._basis_get_has_alpha(basisHandle);

   if (!width || !height || !images || !levels)
   {
   	Module._basis_close(basisHandle); basisHandle = 0;
 	Module._free(src); src = 0;
 	width = 0;

 	log('Failed getting info from basis file!');
     return;
   }

   if ((bc7Supported) && (forceBC1 == 0))
   {
      format = BASIS_FORMAT.cTFBC7;
      log('Decoding .basis data to BC7/BPTC');
   }
   else
   {
      format = BASIS_FORMAT.cTFBC1;
      if (has_alpha)
      {
   	   format = BASIS_FORMAT.cTFBC3;

       log('Decoding .basis data to BC3');
      }
      else
      {
   	   log('Decoding .basis data to BC1');
      }
    }

   log('.basis file size: ' + srcSize);
   if (levels == 1)
   	log('average bits/texel: ' + ((srcSize * 8.0) / (width * height * images)));
   log('width: ' + width);
   log('height: ' + height);
   log('images: ' + images);
   log('first image mipmap levels: ' + levels);
   log('has_alpha: ' + has_alpha);

   alignedWidth = (width + 3) & ~3;
   alignedHeight = (height + 3) & ~3;

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

   var status = Module._basis_start_transcoding(basisHandle);
   if (!status)
   {
 	Module._basis_close(basisHandle); basisHandle = 0;
 	Module._free(src); src = 0;
 	width = 0;

     log('basis_start_transcoding() failed!');
     return;
   }

   curImageIndex = 0;
 }

 function dataLoaded(data)
 {
   log('Done loading .basis file');

   if (bc7Supported)
     log('EXT_texture_compression_bptc is supported!')
   else
     log('EXT_texture_compression_bptc is NOT supported!')

   g_dataLoadedCountDown=50;
   g_receivedData=data;
 }

 /**
  * @param {Uint8Array} src
  * @param {Uint8Array} dst
  */
 function arrayBufferCopy(src, dst, dstByteOffset, numBytes) {
   dst32Offset = dstByteOffset / 4;
   var tail = (numBytes % 4);
   var src32 = new Uint32Array(src.buffer, 0, (numBytes - tail) / 4);
   var dst32 = new Uint32Array(dst.buffer);
   for (var i = 0; i < src32.length; i++) {
     dst32[dst32Offset + i] = src32[i];
   }
   for (var i = numBytes - tail; i < numBytes; i++) {
     dst[dstByteOffset + i] = src[i];
   }
 }


 function run() {
   elem('logger').innerHTML = '';
   loadArrayBuffer(elem('file').value, dataLoaded);

   requestAnimationFrame(frame);
 }


 function initialize() {
   var gl = elem('canvas').getContext('experimental-webgl');

   // Load the DXT extension, and verify it exists.

   if (!gl.getExtension('WEBKIT_WEBGL_compressed_texture_s3tc') && !gl.getExtension('WEBGL_compressed_texture_s3tc')) {
     dxtSupported = false;
     elem('nodxt').style.display = 'block';
   }

   if (gl.getExtension('EXT_texture_compression_bptc'))
     bc7Supported = true;
   else
     bc7Supported = false;

   window.renderer = new Renderer(gl);

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

   run();
 }

 function alphaBlend() { drawMode = 0; redraw(); }
 function viewRGB() { drawMode = 1; redraw(); }
 function viewAlpha() { drawMode = 2; redraw(); }
 function forceBC1Func() { forceBC1 = 1 - forceBC1; run(); }

 function visCR()
 {
     var i = Module._basis_get_debug_flags();
 	i = i ^ BASIS_DEBUG_FLAGS.DEBUG_FLAG_VIS_CR;
 	Module._basis_set_debug_flags(i);
 }

 function visSels()
 {
     var i = Module._basis_get_debug_flags();
 	i = i ^ BASIS_DEBUG_FLAGS.DEBUG_FLAG_VIS_SELS;
 	Module._basis_set_debug_flags(i);
 }

 function visEndpoints()
 {
     var i = Module._basis_get_debug_flags();
 	i ^= BASIS_DEBUG_FLAGS.DEBUG_FLAG_VIS_ENDPOINTS;
 	Module._basis_set_debug_flags(i);
 }

 function togglePause()
 {
 	g_paused = !g_paused;
 }

 function toggleFramerateLimit()
 {
 	g_framerateLimit = !g_framerateLimit;
 }

 function restart()
 {
 	curImageIndex = 0;
 }

 function slow()
 {
 	if (g_Framerate >= 20.0)
 		g_Framerate = 5.0;
 	else
 		g_Framerate = 20.0;
 }

 function rewind()
 {
 	if (g_targetFrame < 0)
 	{
 		g_targetFrame = curImageIndex;
 		if (g_targetFrame > 10)
 			g_targetFrame -= 10;
 		else
 			g_targetFrame = 0;
 		curImageIndex = 0;
 	}
 }

 </script>
 </head>
 <body onload="initialize()">
   <br>
   <div style="font-size: 24pt; font-weight: bold">
     Basis Universal GPU Texture Video UASTC->BC7 Transcoding Test
   </div>

   <div style="font-size: 8pt;">
   <br>This demo uses the <a href="https://github.com/BinomialLLC/basis_universal">Basis C++ transcoder</a> (compiled to Javascript using Emscripten) to transcode a .basis Universal Texture Video file directly to GPU texture data, with no intermediate recompression step.
   <br>.basis universal GPU texture files can be quickly transcoded directly to any other GPU texture format with little to no quality loss.
   <br>Thanks to Evan Parker for providing <a href="https://github.com/toji/webgl-texture-utils">webgl-texture-utils</a> and this test bed.
   </div>
   <br>
   <br>
       .basis file:
       <input id="file" type="text" size=30 value="kodim01.basis"></input>
       <input type="button" value="Run!" onclick="run()"></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>
      <input type="button" value="Force BC1" onclick="forceBC1Func()"></input>
   <br>
   <br>
 	  <input type="button" value="Visualize CR's" onclick="visCR()"></input>
 	  <input type="button" value="Visualize Selectors" onclick="visSels()"></input>
 	  <input type="button" value="Visualize Endpoints" onclick="visEndpoints()"></input>
   <br>
   <br>
 	  <input type="button" value="No Framerate Limit" onclick="toggleFramerateLimit()"></input>
   	  <input type="button" value="Pause" onclick="togglePause()"></input>
 	  <input type="button" value="Restart" onclick="restart()"></input>
   	  <input type="button" value="Toggle Slow Speed" onclick="slow()"></input>
       <input type="button" value="Rewind" onclick="rewind()"></input>

   <div style="position:absolute; left: 525px; top:130px; font-size: 20pt; font-weight: bold; color: red">
     <div id="nodxt" style="display: none; width: 768px; font-size: 20pt; font-weight: bold; color: red">
       NOTE: Your browser does not support DXT, so using RGB565
       for the texture below.  To get DXT, try Chrome 19+
       (beta channel as of 2012-04-20; graphics card DXT support also required).
     </div>
     <canvas id='canvas'></canvas>
   </div>
   <br><br>
   <div id='logger'></div>
 </body>
 </html>
	<html>
	<head>
	<script src="basis.js"></script>
	<script src="renderer.js"></script>
	<script src="dxt-to-rgb565.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);
	}

	// 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;
	COMPRESSED_RGBA_BPTC_UNORM = 0x8E8C;

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

	BASIS_DEBUG_FLAGS = {
	DEBUG_FLAG_VIS_CR: 1,
	DEBUG_FLAG_VIS_SELS: 2,
	DEBUG_FLAG_VIS_ENDPOINTS: 4
	};

	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 dxtSupported = true;
	var bc7Supported = false;
	var drawMode = 0;

	var basisHandle = 0, src = 0, srcSize = 0;
	var tex = 0, width = 0, height = 0, images = 0, levels = 0, have_alpha = false, alignedWidth = 0, alignedHeight = 0, format;
	var curImageIndex = 0;

	function redraw()
	{
	if ((!width) \|\| (!tex))
	return;

	if (dxtSupported)
	{
	renderer.drawTexture(tex, alignedWidth, alignedHeight, drawMode);
	}
	else if (format == BASIS_FORMAT.cTFBC1)
	{
	renderer.drawTexture(tex, alignedWidth, alignedHeight, drawMode);
	}
	else
	{
	log('TODO: Implement BC3->RGBA conversion for browsers that don\'t support BC3');
	}
	}

	function transcodeFrame()
	{
	if (basisHandle == 0)
	return;

	var dstSize = Module._basis_get_image_transcoded_size_in_bytes(basisHandle, 0, 0, format);
	var dst = Module._malloc(dstSize);

	if (!Module._basis_transcode_image(basisHandle, dst, dstSize, curImageIndex, 0, format, 1, 0))
	{
	Module._basis_close(basisHandle); basisHandle = 0;
	Module._free(src); src = 0;
	Module._free(dst);
	width = 0;

	log('basis_transcode_image() failed!');
	return;
	}

	var dxtData = new Uint8Array(Module.HEAPU8.buffer, dst, dstSize);

	if (tex != 0)
	{
	renderer.destroyTexture(tex);
	tex = 0;
	}

	if (dxtSupported)
	{
	tex = renderer.createDxtTexture(dxtData, alignedWidth, alignedHeight, DXT_FORMAT_MAP[format]);
	}
	else if (format == BASIS_FORMAT.cTFBC1)
	{
	var rgb565Data = dxtToRgb565(Module.HEAPU16, dst / 2, alignedWidth, alignedHeight);

	tex = renderer.createRgb565Texture(rgb565Data, alignedWidth, alignedHeight);
	}

	Module._free(dst);
	}

	var then = 0;
	var timeSinceLastFrame = 0;
	var g_framerateLimit = true;
	var g_paused = false;
	var g_Framerate = 24.0;
	var g_targetFrame = 0.0;

	var g_dataLoadedCountDown;
	var g_receivedData;
	var forceBC1 = 0;

	function frame(now)
	{
	if (g_dataLoadedCountDown > 0)
	{
	g_dataLoadedCountDown = g_dataLoadedCountDown - 1;
	if (g_dataLoadedCountDown == 0)
	{
	if (g_receivedData)
	{
	transcode(g_receivedData);
	g_receivedData = 0;
	}
	}
	}


	now *= 0.001; // convert to seconds
	const deltaTime = now - then;
	then = now;

	if (basisHandle != 0)
	{
	transcodeFrame();

	redraw()

	if (g_targetFrame >= 0)
	{
	timeSinceLastFrame = 0;

	if (curImageIndex >= g_targetFrame)
	g_targetFrame = -1;
	else
	curImageIndex++;
	}
	else if (g_paused)
	{
	timeSinceLastFrame = 0;
	}
	else if (!g_framerateLimit)
	{
	timeSinceLastFrame = 0;
	curImageIndex++;
	}
	else
	{
	timeSinceLastFrame += deltaTime;
	if (timeSinceLastFrame > 1.0/g_Framerate)
	{
	timeSinceLastFrame -= 1.0/g_Framerate;

	curImageIndex++;
	}
	}

	if (curImageIndex == images)
	curImageIndex = 0;
	}

	requestAnimationFrame(frame);

	// log('Here!');
	}

	function transcode(data)
	{
	Module._basis_init();

	if (basisHandle != 0)
	{
	Module._basis_close(basisHandle);
	basisHandle = 0;
	}

	if (src != 0)
	{
	src = 0;
	Module._free(src);
	}

	srcSize = data.byteLength;
	var bytes = new Uint8Array(data);
	src = Module._malloc(srcSize);
	arrayBufferCopy(bytes, Module.HEAPU8, src, srcSize);

	basisHandle = Module._basis_open(src, srcSize);
	if (!basisHandle)
	{
	log('Failed opening basis file!');
	Module._free(src); src = 0;
	width = 0;
	return;
	}

	width = Module._basis_get_image_width(basisHandle, 0, 0);
	height = Module._basis_get_image_height(basisHandle, 0, 0);
	images = Module._basis_get_num_images(basisHandle, 0);
	levels = Module._basis_get_num_levels(basisHandle, 0);
	has_alpha = Module._basis_get_has_alpha(basisHandle);

	if (!width \|\| !height \|\| !images \|\| !levels)
	{
	Module._basis_close(basisHandle); basisHandle = 0;
	Module._free(src); src = 0;
	width = 0;

	log('Failed getting info from basis file!');
	return;
	}

	if ((bc7Supported) && (forceBC1 == 0))
	{
	format = BASIS_FORMAT.cTFBC7;
	log('Decoding .basis data to BC7/BPTC');
	}
	else
	{
	format = BASIS_FORMAT.cTFBC1;
	if (has_alpha)
	{
	format = BASIS_FORMAT.cTFBC3;

	log('Decoding .basis data to BC3');
	}
	else
	{
	log('Decoding .basis data to BC1');
	}
	}

	log('.basis file size: ' + srcSize);
	if (levels == 1)
	log('average bits/texel: ' + ((srcSize * 8.0) / (width * height * images)));
	log('width: ' + width);
	log('height: ' + height);
	log('images: ' + images);
	log('first image mipmap levels: ' + levels);
	log('has_alpha: ' + has_alpha);

	alignedWidth = (width + 3) & ~3;
	alignedHeight = (height + 3) & ~3;

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

	var status = Module._basis_start_transcoding(basisHandle);
	if (!status)
	{
	Module._basis_close(basisHandle); basisHandle = 0;
	Module._free(src); src = 0;
	width = 0;

	log('basis_start_transcoding() failed!');
	return;
	}

	curImageIndex = 0;
	}

	function dataLoaded(data)
	{
	log('Done loading .basis file');

	if (bc7Supported)
	log('EXT_texture_compression_bptc is supported!')
	else
	log('EXT_texture_compression_bptc is NOT supported!')

	g_dataLoadedCountDown=50;
	g_receivedData=data;
	}

	/**
	* @param {Uint8Array} src
	* @param {Uint8Array} dst
	*/
	function arrayBufferCopy(src, dst, dstByteOffset, numBytes) {
	dst32Offset = dstByteOffset / 4;
	var tail = (numBytes % 4);
	var src32 = new Uint32Array(src.buffer, 0, (numBytes - tail) / 4);
	var dst32 = new Uint32Array(dst.buffer);
	for (var i = 0; i < src32.length; i++) {
	dst32[dst32Offset + i] = src32[i];
	}
	for (var i = numBytes - tail; i < numBytes; i++) {
	dst[dstByteOffset + i] = src[i];
	}
	}


	function run() {
	elem('logger').innerHTML = '';
	loadArrayBuffer(elem('file').value, dataLoaded);

	requestAnimationFrame(frame);
	}


	function initialize() {
	var gl = elem('canvas').getContext('experimental-webgl');

	// Load the DXT extension, and verify it exists.

	if (!gl.getExtension('WEBKIT_WEBGL_compressed_texture_s3tc') && !gl.getExtension('WEBGL_compressed_texture_s3tc')) {
	dxtSupported = false;
	elem('nodxt').style.display = 'block';
	}

	if (gl.getExtension('EXT_texture_compression_bptc'))
	bc7Supported = true;
	else
	bc7Supported = false;

	window.renderer = new Renderer(gl);

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

	run();
	}

	function alphaBlend() { drawMode = 0; redraw(); }
	function viewRGB() { drawMode = 1; redraw(); }
	function viewAlpha() { drawMode = 2; redraw(); }
	function forceBC1Func() { forceBC1 = 1 - forceBC1; run(); }

	function visCR()
	{
	var i = Module._basis_get_debug_flags();
	i = i ^ BASIS_DEBUG_FLAGS.DEBUG_FLAG_VIS_CR;
	Module._basis_set_debug_flags(i);
	}

	function visSels()
	{
	var i = Module._basis_get_debug_flags();
	i = i ^ BASIS_DEBUG_FLAGS.DEBUG_FLAG_VIS_SELS;
	Module._basis_set_debug_flags(i);
	}

	function visEndpoints()
	{
	var i = Module._basis_get_debug_flags();
	i ^= BASIS_DEBUG_FLAGS.DEBUG_FLAG_VIS_ENDPOINTS;
	Module._basis_set_debug_flags(i);
	}

	function togglePause()
	{
	g_paused = !g_paused;
	}

	function toggleFramerateLimit()
	{
	g_framerateLimit = !g_framerateLimit;
	}

	function restart()
	{
	curImageIndex = 0;
	}

	function slow()
	{
	if (g_Framerate >= 20.0)
	g_Framerate = 5.0;
	else
	g_Framerate = 20.0;
	}

	function rewind()
	{
	if (g_targetFrame < 0)
	{
	g_targetFrame = curImageIndex;
	if (g_targetFrame > 10)
	g_targetFrame -= 10;
	else
	g_targetFrame = 0;
	curImageIndex = 0;
	}
	}

	</script>
	</head>
	<body onload="initialize()">
	<br>
	<div style="font-size: 24pt; font-weight: bold">
	Basis Universal GPU Texture Video UASTC->BC7 Transcoding Test
	</div>

	<div style="font-size: 8pt;">
	<br>This demo uses the <a href="https://github.com/BinomialLLC/basis_universal">Basis C++ transcoder</a> (compiled to Javascript using Emscripten) to transcode a .basis Universal Texture Video file directly to GPU texture data, with no intermediate recompression step.
	<br>.basis universal GPU texture files can be quickly transcoded directly to any other GPU texture format with little to no quality loss.
	<br>Thanks to Evan Parker for providing <a href="https://github.com/toji/webgl-texture-utils">webgl-texture-utils</a> and this test bed.
	</div>
	<br>
	<br>
	.basis file:
	<input id="file" type="text" size=30 value="kodim01.basis"></input>
	<input type="button" value="Run!" onclick="run()"></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>
	<input type="button" value="Force BC1" onclick="forceBC1Func()"></input>
	<br>
	<br>
	<input type="button" value="Visualize CR's" onclick="visCR()"></input>
	<input type="button" value="Visualize Selectors" onclick="visSels()"></input>
	<input type="button" value="Visualize Endpoints" onclick="visEndpoints()"></input>
	<br>
	<br>
	<input type="button" value="No Framerate Limit" onclick="toggleFramerateLimit()"></input>
	<input type="button" value="Pause" onclick="togglePause()"></input>
	<input type="button" value="Restart" onclick="restart()"></input>
	<input type="button" value="Toggle Slow Speed" onclick="slow()"></input>
	<input type="button" value="Rewind" onclick="rewind()"></input>

	<div style="position:absolute; left: 525px; top:130px; font-size: 20pt; font-weight: bold; color: red">
	<div id="nodxt" style="display: none; width: 768px; font-size: 20pt; font-weight: bold; color: red">
	NOTE: Your browser does not support DXT, so using RGB565
	for the texture below. To get DXT, try Chrome 19+
	(beta channel as of 2012-04-20; graphics card DXT support also required).
	</div>
	<canvas id='canvas'></canvas>
	</div>
	<br><br>
	<div id='logger'></div>
	</body>
	</html>