<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="kodim18.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>