new files
diff --git a/webgl/encode_test/assets/kodim03.png b/webgl/encode_test/assets/kodim03.png
new file mode 100644
index 0000000..639a417
--- /dev/null
+++ b/webgl/encode_test/assets/kodim03.png
Binary files differ
diff --git a/webgl/encode_test/assets/kodim18.png b/webgl/encode_test/assets/kodim18.png
new file mode 100644
index 0000000..187fec2
--- /dev/null
+++ b/webgl/encode_test/assets/kodim18.png
Binary files differ
diff --git a/webgl/encode_test/assets/kodim18_64x64.png b/webgl/encode_test/assets/kodim18_64x64.png
new file mode 100644
index 0000000..1166093
--- /dev/null
+++ b/webgl/encode_test/assets/kodim18_64x64.png
Binary files differ
diff --git a/webgl/encode_test/assets/kodim26_uastc_1024.basis b/webgl/encode_test/assets/kodim26_uastc_1024.basis
new file mode 100644
index 0000000..671d188
--- /dev/null
+++ b/webgl/encode_test/assets/kodim26_uastc_1024.basis
Binary files differ
diff --git a/webgl/encode_test/dxt-to-rgb565.js b/webgl/encode_test/dxt-to-rgb565.js
new file mode 100644
index 0000000..8e35be4
--- /dev/null
+++ b/webgl/encode_test/dxt-to-rgb565.js
@@ -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;
+}
+
diff --git a/webgl/encode_test/index.html b/webgl/encode_test/index.html
new file mode 100644
index 0000000..8be010c
--- /dev/null
+++ b/webgl/encode_test/index.html
@@ -0,0 +1,589 @@
+<html>
+<head>
+<script src="renderer.js"></script>
+<script src="dxt-to-rgb565.js"></script>
+<script src="../encoder/build/basis_encoder.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, encodeBasisTexture } = 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;
+
+ if (!basisFile.startTranscoding()) {
+ log('startTranscoding failed');
+ console.warn('startTranscoding failed');
+ basisFile.close();
+ basisFile.delete();
+ return;
+ }
+
+ const dstSize = basisFile.getImageTranscodedSizeInBytes(0, 0, format);
+ const dst = new Uint8Array(dstSize);
+
+ //log(dstSize);
+
+// if (!basisFile.transcodeImage(dst, 0, 0, format, 1, 0)) {
+ 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 download_file(filename, body)
+{
+ var element = document.createElement('a');
+
+ //element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+
+ const blob = new Blob([body]);
+ const url = URL.createObjectURL(blob);
+ element.setAttribute('href', url);
+
+ element.setAttribute('download', filename);
+
+ element.style.display = 'none';
+ document.body.appendChild(element);
+
+ element.click();
+
+ document.body.removeChild(element);
+}
+
+var encodedBasisFile;
+
+function PNGDataLoaded(data)
+{
+ const { BasisFile, BasisEncoder, initializeBasis, encodeBasisTexture } = Module;
+
+ initializeBasis();
+
+ // Create a destination buffer to hold the compressed .basis file data. If this buffer isn't large enough compression will fail.
+ var basisFileData = new Uint8Array(1024*1024*10);
+
+ var num_output_bytes;
+
+ // Compress using the BasisEncoder class.
+ log('BasisEncoder::encode() started:');
+
+ const basisEncoder = new BasisEncoder();
+
+ const qualityLevel = parseInt(elem('EncodeQuality').value, 10);
+ const uastcFlag = elem('EncodeUASTC').checked;
+
+ basisEncoder.setSliceSourceImage(0, new Uint8Array(data), 0, 0, true);
+ basisEncoder.setDebug(elem('Debug').checked);
+ basisEncoder.setComputeStats(elem('ComputeStats').checked);
+ basisEncoder.setPerceptual(elem('SRGB').checked);
+ basisEncoder.setMipSRGB(elem('SRGB').checked);
+ basisEncoder.setQualityLevel(qualityLevel);
+ basisEncoder.setUASTC(uastcFlag);
+ basisEncoder.setMipGen(elem('Mipmaps').checked);
+
+ if (!uastcFlag)
+ log('Encoding at ETC1S quality level ' + qualityLevel);
+
+ num_output_bytes = basisEncoder.encode(basisFileData);
+
+ var actualBasisFileData = new Uint8Array(basisFileData.buffer, 0, num_output_bytes);
+
+ basisEncoder.delete();
+
+ if (num_output_bytes == 0)
+ {
+ log('encodeBasisTexture() failed!');
+ }
+ else
+ {
+ log('encodeBasisTexture() succeeded, output size ' + num_output_bytes);
+
+ encodedBasisFile = actualBasisFileData;
+
+ //download("test.basis", actualBasisFileData);
+ }
+
+ if (num_output_bytes != 0)
+ {
+ dataLoaded(actualBasisFileData);
+ }
+}
+
+function runLoadFile() {
+ elem('logger').innerHTML = '';
+ loadArrayBuffer(elem('file').value, dataLoaded);
+}
+
+function runEncodePNGFile() {
+ elem('logger').innerHTML = '';
+ loadArrayBuffer(elem('pngfile').value, PNGDataLoaded);
+}
+
+function alphaBlend() { drawMode = 0; redraw(); }
+function viewRGB() { drawMode = 1; redraw(); }
+function viewAlpha() { drawMode = 2; redraw(); }
+
+function downloadEncodedFile()
+{
+ if (encodedBasisFile)
+ {
+ if (encodedBasisFile.length)
+ download_file("encoded_file.basis", encodedBasisFile);
+ }
+}
+
+</script>
+</head>
+<body>
+ <br>
+ <div style="font-size: 24pt; font-weight: bold">
+ Basis Universal compressed texture transcoding and encoding 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/kodim26_uastc_1024.basis"></input>
+ <input type="button" value="Transcode!" onclick="runLoadFile()"></input>
+ <br>
+
+ <br>
+ .png file:
+ <input id="pngfile" type="text" size=30 value="assets/kodim18_64x64.png"></input>
+ <input type="button" value="Encode!" onclick="runEncodePNGFile()"></input>
+ <br>
+ <input type="button" value="Download Encoded .basis File" onclick="downloadEncodedFile()">
+ <br>
+ Debug:
+ <input type="checkbox" id="Debug">
+ <br>
+ Compute Stats:
+ <input type="checkbox" id="ComputeStats">
+ <br>
+ sRGB:
+ <input type="checkbox" id="SRGB">
+ <br>
+ Mipmaps:
+ <input type="checkbox" id="Mipmaps">
+ <br>
+ UASTC:
+ <input type="checkbox" id="EncodeUASTC">
+
+
+ <br>
+
+ ETC1S Quality:
+ <input type="range" min="1" max="255" value="10" class="slider" id="EncodeQuality">
+
+ <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>
+
+ <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 : () => {
+
+ elem('SRGB').checked = true;
+
+ 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>
diff --git a/webgl/encode_test/preview.png b/webgl/encode_test/preview.png
new file mode 100644
index 0000000..f1c1a6b
--- /dev/null
+++ b/webgl/encode_test/preview.png
Binary files differ
diff --git a/webgl/encode_test/renderer.js b/webgl/encode_test/renderer.js
new file mode 100644
index 0000000..26f1a65
--- /dev/null
+++ b/webgl/encode_test/renderer.js
@@ -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');
+
diff --git a/webgl/encoder/.gitignore b/webgl/encoder/.gitignore
new file mode 100644
index 0000000..1ab0538
--- /dev/null
+++ b/webgl/encoder/.gitignore
@@ -0,0 +1,4 @@
+build/*
+!build/basis_loader.js
+!build/basis_encoder.js
+!build/basis_encoder.wasm
diff --git a/webgl/encoder/CMakeLists.txt b/webgl/encoder/CMakeLists.txt
new file mode 100644
index 0000000..ed014a0
--- /dev/null
+++ b/webgl/encoder/CMakeLists.txt
@@ -0,0 +1,51 @@
+cmake_minimum_required(VERSION 3.0)
+
+project(basisu_encoder_js)
+
+if (EMSCRIPTEN)
+ set(CMAKE_CXX_STANDARD 11)
+
+ add_executable(basis_encoder.js
+ ../transcoder/basis_wrappers.cpp
+ ../../transcoder/basisu_transcoder.cpp
+ ../../encoder/basisu_backend.cpp
+ ../../encoder/basisu_basis_file.cpp
+ ../../encoder/basisu_comp.cpp
+ ../../encoder/basisu_enc.cpp
+ ../../encoder/basisu_etc.cpp
+ ../../encoder/basisu_frontend.cpp
+ ../../encoder/basisu_global_selector_palette_helpers.cpp
+ ../../encoder/basisu_gpu_texture.cpp
+ ../../encoder/basisu_pvrtc1_4.cpp
+ ../../encoder/basisu_resampler.cpp
+ ../../encoder/basisu_resample_filters.cpp
+ ../../encoder/basisu_ssim.cpp
+ ../../encoder/basisu_astc_decomp.cpp
+ ../../encoder/basisu_uastc_enc.cpp
+ ../../encoder/basisu_bc7enc.cpp
+ ../../encoder/lodepng.cpp
+ ../../encoder/apg_bmp.c
+ ../../encoder/jpgd.cpp
+ )
+
+ #target_compile_definitions(basis_encoder.js PRIVATE NDEBUG BASISD_SUPPORT_UASTC=1 BASISD_SUPPORT_BC7=1 BASISD_SUPPORT_ATC=0 BASISD_SUPPORT_ASTC_HIGHER_OPAQUE_QUALITY=0 BASISD_SUPPORT_PVRTC2=0 BASISD_SUPPORT_FXT1=0 BASISD_SUPPORT_ETC2_EAC_RG11=0 BASISU_SUPPORT_ENCODING=1)
+ #target_compile_options(basis_encoder.js PRIVATE -fno-strict-aliasing -O3)
+
+ #target_compile_definitions(basis_encoder.js PRIVATE DEBUG BASISD_SUPPORT_UASTC=1 BASISD_SUPPORT_BC7=1 BASISD_SUPPORT_ATC=0 BASISD_SUPPORT_ASTC_HIGHER_OPAQUE_QUALITY=0 BASISD_SUPPORT_PVRTC2=0 BASISD_SUPPORT_FXT1=0 BASISD_SUPPORT_ETC2_EAC_RG11=0 BASISU_SUPPORT_ENCODING=1)
+ #target_compile_options(basis_encoder.js PRIVATE -fno-strict-aliasing -g -O1 -fsanitize=undefined -fsanitize=address)
+
+ target_compile_definitions(basis_encoder.js PRIVATE NDEBUG BASISD_SUPPORT_UASTC=1 BASISD_SUPPORT_BC7=1 BASISD_SUPPORT_ATC=0 BASISD_SUPPORT_ASTC_HIGHER_OPAQUE_QUALITY=0 BASISD_SUPPORT_PVRTC2=0 BASISD_SUPPORT_FXT1=0 BASISD_SUPPORT_ETC2_EAC_RG11=0 BASISU_SUPPORT_ENCODING=1)
+ target_compile_options(basis_encoder.js PRIVATE -fno-strict-aliasing -O3)
+
+ target_include_directories(basis_encoder.js PRIVATE ../../transcoder)
+
+ set_target_properties(basis_encoder.js PROPERTIES
+ OUTPUT_NAME "basis_encoder"
+ SUFFIX ".js"
+
+ #LINK_FLAGS "--bind -s ALLOW_MEMORY_GROWTH=1 -O3 -s ASSERTIONS=0 -s MALLOC=emmalloc -s MODULARIZE=1 -s EXPORT_NAME=BASIS ")
+
+ #LINK_FLAGS "--bind -s INITIAL_MEMORY=299958272 -g -s DEMANGLE_SUPPORT=1 -s ALLOW_MEMORY_GROWTH=1 -O1 -s ASSERTIONS=1 -s MALLOC=emmalloc -s MODULARIZE=1 -s EXPORT_NAME=BASIS -fsanitize=undefined -fsanitize=address")
+
+ LINK_FLAGS "--bind -s ALLOW_MEMORY_GROWTH=1 -O3 -s ASSERTIONS=0 -s INITIAL_MEMORY=299958272 -s MALLOC=emmalloc -s MODULARIZE=1 -s EXPORT_NAME=BASIS")
+endif()
diff --git a/webgl/encoder/README.md b/webgl/encoder/README.md
new file mode 100644
index 0000000..2055d02
--- /dev/null
+++ b/webgl/encoder/README.md
@@ -0,0 +1,7 @@
+Prebuilt versions of `basis_encoder.js` and `basis_encoder.wasm` are included in the `build/` folder, and are sufficient for local demos. Note the encoder also includes the transcoder. To build the encoder yourself, first install emscripten ([tutorial](https://webassembly.org/getting-started/developers-guide/)) and cmake ([download](https://cmake.org/download/)). Then run:
+
+```shell
+cd webgl/encoder/build/
+emcmake cmake ../
+make
+```
diff --git a/webgl/texture/assets/kodim01_mipmapped.basis b/webgl/texture/assets/kodim01_mipmapped.basis
new file mode 100644
index 0000000..dfaf2b5
--- /dev/null
+++ b/webgl/texture/assets/kodim01_mipmapped.basis
Binary files differ
diff --git a/webgl_videotest/basis.wasm b/webgl_videotest/basis.wasm
new file mode 100644
index 0000000..4061f92
--- /dev/null
+++ b/webgl_videotest/basis.wasm
Binary files differ
