| <!-- |
| Simple .KTX2 encode/transcode tester. |
| Supports numerous texture formats: ETC1, PVRTC1, BC1-BC7, BC6H, ASTC LDR/HDR, and various uncompressed fallbacks. |
| Supports loading .PNG, .EXR and .HDR files. |
| --> |
| |
| <!doctype html> |
| <html> |
| <head> |
| <script src="renderer.js"></script> |
| |
| <script type="text/javascript"> |
| |
| const MAX_WORKER_THREADS = 18; |
| |
| function log(s) { |
| var div = document.createElement('div'); |
| div.innerHTML = s; |
| document.getElementById('logger').appendChild(div); |
| } |
| |
| function logClear() { |
| elem('logger').innerHTML = ''; |
| } |
| |
| 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, errorCallback) { |
| log('Loading ' + uri + '...'); |
| |
| var xhr = new XMLHttpRequest(); |
| xhr.responseType = "arraybuffer"; |
| xhr.open('GET', uri, true); |
| |
| xhr.onreadystatechange = function (e) { |
| if (xhr.readyState == 4) { // Request is done |
| if (xhr.status == 200) { |
| // Success, call the callback with the response |
| callback(xhr.response, uri); |
| } else { |
| // Error, call the errorCallback with the status |
| errorCallback('Failed to load file. Status: ' + xhr.status + ' - ' + xhr.statusText); |
| } |
| } |
| }; |
| |
| xhr.onerror = function (e) { |
| // Network error or request couldn't be made |
| errorCallback('Network error or request failed.'); |
| }; |
| |
| xhr.send(null); |
| } |
| |
| // ASTC format, from: |
| // https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_astc/ |
| COMPRESSED_RGBA_ASTC_4x4_KHR = 0x93B0; |
| COMPRESSED_RGBA_ASTC_6x6_KHR = 0x93B4; |
| |
| // 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, etcSupported = false, dxtSupported = false, bc7Supported = false, bc6hSupported = false, astcHDRSupported = false, |
| rgbaHalfSupported = false, halfFloatWebGLFormat = 0, pvrtcSupported = false; |
| |
| var astcDisabled = false, etcDisabled = false, dxtDisabled = false, bc7Disabled = false, bc6hDisabled = false, astcHDRDisabled = false, rgbaHalfDisabled = false, pvrtcDisabled = false; |
| |
| var drawMode = 0; |
| var drawScale = 1.0; |
| var ldrHDRUpconversionScale = 1.0; |
| var linearToSRGBFlag = false; |
| |
| var tex, width, height, is_hdr, layers, levels, faces, has_alpha; |
| var alignedWidth4, alignedHeight4, format, displayWidth, displayHeight; |
| |
| var curLoadedImageData = null, curLoadedImageURI = null; |
| var curLoadedKTX2Data = null, curLoadedKTX2URI = null; |
| |
| function redraw() { |
| if (!width) |
| return; |
| |
| renderer.drawTexture(tex, displayWidth, displayHeight, drawMode, drawScale * ldrHDRUpconversionScale, linearToSRGBFlag); |
| } |
| |
| function dumpKTX2FileDesc(ktx2File) { |
| log('------'); |
| |
| log('Width: ' + ktx2File.getWidth()); |
| log('Height: ' + ktx2File.getHeight()); |
| log('BasisTexFormat: ' + ktx2File.getBasisTexFormat()); |
| log('IsLDR: ' + ktx2File.isLDR()); |
| log('IsHDR: ' + ktx2File.isHDR()); |
| log('IsHDR4x4: ' + ktx2File.isHDR4x4()); |
| log('IsHDR6x6: ' + ktx2File.isHDR6x6()); |
| log('isUASTC: ' + ktx2File.isUASTC()); |
| log('isETC1S: ' + ktx2File.isETC1S()); |
| log('Faces: ' + ktx2File.getFaces()); |
| log('Layers: ' + ktx2File.getLayers()); |
| log('Levels: ' + ktx2File.getLevels()); |
| log('BlockWidth: ' + ktx2File.getBlockWidth()); |
| log('BlockHeight: ' + ktx2File.getBlockHeight()); |
| log('Has alpha: ' + ktx2File.getHasAlpha()); |
| log('Total Keys: ' + ktx2File.getTotalKeys()); |
| log('DFD Size: ' + ktx2File.getDFDSize()); |
| log('DFD Color Model: ' + ktx2File.getDFDColorModel()); |
| log('DFD Color Primaries: ' + ktx2File.getDFDColorPrimaries()); |
| log('DFD Transfer Function: ' + ktx2File.getDFDTransferFunc()); |
| log('DFD Flags: ' + ktx2File.getDFDFlags()); |
| log('DFD Total Samples: ' + ktx2File.getDFDTotalSamples()); |
| log('DFD Channel0: ' + ktx2File.getDFDChannelID0()); |
| log('DFD Channel1: ' + ktx2File.getDFDChannelID1()); |
| log('Is Video: ' + ktx2File.isVideo()); |
| |
| var dfdSize = ktx2File.getDFDSize(); |
| var dvdData = new Uint8Array(dfdSize); |
| ktx2File.getDFD(dvdData); |
| |
| log('DFD bytes:' + dvdData.toString()); |
| log('--'); |
| |
| log('--'); |
| log('Key values:'); |
| var key_index; |
| for (key_index = 0; key_index < ktx2File.getTotalKeys(); key_index++) { |
| var key_name = ktx2File.getKey(key_index); |
| log('Key ' + key_index + ': "' + key_name + '"'); |
| |
| var valSize = ktx2File.getKeyValueSize(key_name); |
| |
| if (valSize != 0) { |
| var val_data = new Uint8Array(valSize); |
| var status = ktx2File.getKeyValue(key_name, val_data); |
| if (!status) |
| log('getKeyValue() failed'); |
| else { |
| log('value size: ' + val_data.length); |
| var i, str = ""; |
| |
| for (i = 0; i < val_data.length; i++) { |
| var c = val_data[i]; |
| str = str + String.fromCharCode(c); |
| } |
| |
| log(str); |
| } |
| |
| } |
| else |
| log('<empty value>'); |
| } |
| |
| log('--'); |
| log('Image level information:'); |
| var level_index; |
| |
| var total_texels = 0; |
| |
| for (level_index = 0; level_index < ktx2File.getLevels(); level_index++) { |
| var layer_index; |
| for (layer_index = 0; layer_index < Math.max(1, ktx2File.getLayers()); layer_index++) { |
| var face_index; |
| for (face_index = 0; face_index < ktx2File.getFaces(); face_index++) { |
| var imageLevelInfo = ktx2File.getImageLevelInfo(level_index, layer_index, face_index); |
| |
| log('level: ' + level_index + ' layer: ' + layer_index + ' face: ' + face_index); |
| |
| log('orig_width: ' + imageLevelInfo.origWidth); |
| log('orig_height: ' + imageLevelInfo.origHeight); |
| log('width: ' + imageLevelInfo.width); |
| log('height: ' + imageLevelInfo.height); |
| log('numBlocksX: ' + imageLevelInfo.numBlocksX); |
| log('numBlocksY: ' + imageLevelInfo.numBlocksY); |
| log('blockWidth: ' + imageLevelInfo.blockWidth); |
| log('blockHeight: ' + imageLevelInfo.blockHeight); |
| log('totalBlocks: ' + imageLevelInfo.totalBlocks); |
| log('alphaFlag: ' + imageLevelInfo.alphaFlag); |
| log('iframeFlag: ' + imageLevelInfo.iframeFlag); |
| if (ktx2File.isETC1S()) |
| log('ETC1S image desc image flags: ' + ktx2File.getETC1SImageDescImageFlags(level_index, layer_index, face_index)); |
| |
| log('--'); |
| |
| total_texels += imageLevelInfo.origWidth * imageLevelInfo.origHeight; |
| } |
| } |
| } |
| log('--'); |
| log('KTX2 header:'); |
| var hdr = ktx2File.getHeader(); |
| |
| log('vkFormat: ' + hdr.vkFormat); |
| log('typeSize: ' + hdr.typeSize); |
| log('pixelWidth: ' + hdr.pixelWidth); |
| log('pixelHeight: ' + hdr.pixelHeight); |
| log('pixelDepth: ' + hdr.pixelDepth); |
| log('layerCount: ' + hdr.layerCount); |
| log('faceCount: ' + hdr.faceCount); |
| log('levelCount: ' + hdr.levelCount); |
| log('superCompressionScheme: ' + hdr.supercompressionScheme); |
| log('dfdByteOffset: ' + hdr.dfdByteOffset); |
| log('dfdByteLength: ' + hdr.dfdByteLength); |
| log('kvdByteOffset: ' + hdr.kvdByteOffset); |
| log('kvdByteLength: ' + hdr.kvdByteLength); |
| log('sgdByteOffset: ' + hdr.sgdByteOffset); |
| log('sgdByteLength: ' + hdr.sgdByteLength); |
| |
| log('------'); |
| |
| return total_texels; |
| } |
| |
| function dataLoaded(data, uri) { |
| |
| updateErrorLine(""); |
| |
| log('Done loading .KTX2 file, decoded header:'); |
| |
| const { KTX2File, initializeBasis, encodeBasisTexture } = Module; |
| |
| resetDrawSettings(); |
| |
| initializeBasis(); |
| |
| const startTime = performance.now(); |
| |
| const ktx2File = new KTX2File(new Uint8Array(data)); |
| |
| if (!ktx2File.isValid()) { |
| updateErrorLine('Invalid or unsupported .ktx2 file'); |
| console.warn('Invalid or unsupported .ktx2 file'); |
| ktx2File.close(); |
| ktx2File.delete(); |
| return; |
| } |
| |
| width = ktx2File.getWidth(); |
| height = ktx2File.getHeight(); |
| var basisTexFormat = ktx2File.getBasisTexFormat(); |
| var is_uastc = ktx2File.isUASTC(); |
| is_hdr = ktx2File.isHDR(); |
| layers = ktx2File.getLayers(); |
| levels = ktx2File.getLevels(); |
| faces = ktx2File.getFaces(); |
| has_alpha = ktx2File.getHasAlpha(); |
| |
| // If a HDR KTX2 file was upconverted from LDR/SDR content by us, it'll have a key indicating the Nit scale that was appplied. |
| // We can use that to make viewing the file work out of the box. |
| var ldrHDRUpconversionNitMultiplier = ktx2File.getLDRHDRUpconversionNitMultiplier(); |
| |
| if (ldrHDRUpconversionNitMultiplier > 0.0) |
| ldrHDRUpconversionScale = 1.0 / ldrHDRUpconversionNitMultiplier; |
| else |
| ldrHDRUpconversionScale = 1.0; |
| |
| var srcBlockWidth = ktx2File.getBlockWidth(); |
| var srcBlockHeight = ktx2File.getBlockHeight(); |
| |
| var dstBlockWidth = 4; |
| var dstBlockHeight = 4; |
| |
| // To transcode to PVRTC1, the texture MUST be square and the dimensions must be a power of 2. |
| var is_square_pow2 = (width == height) && ((width & (width - 1)) == 0); |
| |
| if ((!is_hdr) && (!is_square_pow2)) |
| { |
| if ((pvrtcSupported) && (!pvrtcDisabled)) |
| { |
| updateErrorLine("Note: PVRTC is available but the texture's dimensions are not square/power of 2."); |
| log("Note: PVRTC is available but the texture's dimensions are not square/power of 2."); |
| } |
| } |
| |
| if (!width || !height || !levels) { |
| updateErrorLine('Invalid .ktx2 file'); |
| console.warn('Invalid .ktx2 file'); |
| ktx2File.close(); |
| ktx2File.delete(); |
| return; |
| } |
| |
| // Decide which texture format to transcode to. |
| // Note: If the file is UASTC LDR, the preferred formats are ASTC/BC7. For UASTC HDR, ASTC HDR/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 ((bc6hSupported) && (!bc6hDisabled)) { |
| formatString = 'BC6H'; |
| format = BASIS_FORMAT.cTFBC6H; |
| } |
| else if ((astcHDRSupported) && (!astcHDRDisabled)) { |
| |
| if (basisTexFormat == Module.basis_tex_format.cUASTC_HDR_4x4.value) |
| { |
| formatString = 'ASTC 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 ((rgbaHalfSupported) && (!rgbaHalfDisabled)) { |
| formatString = 'RGBA_HALF'; |
| format = BASIS_FORMAT.cTFRGBA_HALF; |
| } |
| else { |
| formatString = '32-bit RGBA'; |
| format = BASIS_FORMAT.cTFRGBA_HALF; |
| |
| log('Warning: Falling back to decoding texture to uncompressed 32-bit RGBA'); |
| } |
| } |
| else if ((astcSupported) && (!astcDisabled)) { |
| formatString = 'ASTC'; |
| format = BASIS_FORMAT.cTFASTC_4x4; |
| } |
| else if ((bc7Supported) && (!bc7Disabled)) { |
| formatString = 'BC7'; |
| format = BASIS_FORMAT.cTFBC7; |
| } |
| else if ((dxtSupported) && (!dxtDisabled)) { |
| if (has_alpha) { |
| formatString = 'BC3'; |
| format = BASIS_FORMAT.cTFBC3; |
| } |
| else { |
| formatString = 'BC1'; |
| format = BASIS_FORMAT.cTFBC1; |
| } |
| } |
| else if ((pvrtcSupported) && (!pvrtcDisabled) && (is_square_pow2)) { |
| if (has_alpha) { |
| formatString = 'PVRTC1_RGBA'; |
| format = BASIS_FORMAT.cTFPVRTC1_4_RGBA; |
| } |
| else { |
| formatString = 'PVRTC1_RGB'; |
| format = BASIS_FORMAT.cTFPVRTC1_4_RGB; |
| } |
| } |
| else if ((etcSupported) && (!etcDisabled)) { |
| formatString = 'ETC1'; |
| format = BASIS_FORMAT.cTFETC1; |
| } |
| else { |
| formatString = 'RGB565'; |
| format = BASIS_FORMAT.cTFRGB565; |
| log('Warning: Falling back to decoding texture data to uncompressed 16-bit 565'); |
| } |
| |
| var descString = formatString; |
| if (is_hdr) |
| { |
| if (basisTexFormat == Module.basis_tex_format.cUASTC_HDR_4x4.value) |
| descString += ' from UASTC HDR 4x4'; |
| else if (basisTexFormat == Module.basis_tex_format.cASTC_HDR_6x6.value) |
| descString += ' from ASTC HDR 6x6'; |
| else |
| descString += ' from ASTC HDR 6x6 Intermediate'; |
| } |
| else if (is_uastc) |
| descString += ' from UASTC LDR 4x4'; |
| else |
| descString += ' from ETC1S'; |
| |
| var total_texels = dumpKTX2FileDesc(ktx2File); |
| var bpp = (data.byteLength * 8.0) / total_texels; |
| descString += ` (${bpp.toFixed(3)} bits/pixel).`; |
| |
| elem('format').innerText = descString; |
| |
| if (!ktx2File.startTranscoding()) { |
| updateErrorLine('startTranscoding failed'); |
| log('startTranscoding failed'); |
| console.warn('startTranscoding failed'); |
| basisFile.close(); |
| basisFile.delete(); |
| return; |
| } |
| |
| const dstSize = ktx2File.getImageTranscodedSizeInBytes(0, 0, 0, format); |
| const dst = new Uint8Array(dstSize); |
| |
| const levelIndex =0; |
| const layerIndex = 0; |
| const faceIndex = 0; |
| |
| var flags = elem('highquality_transcoding').checked ? Module.basisu_decode_flags.cDecodeFlagsHighQuality.value : 0; |
| if (elem('etc1s_bc7_transcoder_no_chroma_filtering').checked) |
| flags = flags | Module.basisu_decode_flags.cDecodeFlagsNoETC1SChromaFiltering.value; |
| |
| if (!ktx2File.transcodeImageWithFlags(dst, levelIndex, layerIndex, faceIndex, format, flags, -1, -1)) |
| { |
| updateErrorLine('ktx2File.transcodeImage failed'); |
| log('ktx2File.transcodeImage failed'); |
| console.warn('transcodeImage failed'); |
| ktx2File.close(); |
| ktx2File.delete(); |
| |
| return; |
| } |
| |
| const elapsed = performance.now() - startTime; |
| |
| ktx2File.close(); |
| ktx2File.delete(); |
| |
| log('width: ' + width); |
| log('height: ' + height); |
| log('basisTexFormat: ' + basisTexFormat); |
| log('isUASTC: ' + is_uastc); |
| log('isHDR: ' + is_hdr); |
| log('srcBlockWidth: ' + srcBlockWidth); |
| log('srcBlockHeight: ' + srcBlockHeight); |
| log('dstBlockWidth: ' + dstBlockWidth); |
| log('dstBlockHeight: ' + dstBlockHeight); |
| log('levels: ' + levels); |
| log('layers: ' + layers); |
| log('faces: ' + faces); |
| log('has_alpha: ' + has_alpha); |
| log('ldrHDRUpconversionNitMultiplier: ' + ldrHDRUpconversionNitMultiplier); |
| |
| logTime('transcoding time', elapsed.toFixed(3)); |
| |
| 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; |
| |
| // Now 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) { |
| // Uncompressed RGBA HALF or 32bpp (with no block alignment) |
| displayWidth = width; |
| displayHeight = height; |
| canvas.width = width; |
| canvas.height = height; |
| |
| if ((rgbaHalfSupported) && (!rgbaHalfDisabled)) { |
| 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) * ((c == 3) ? 1 : ldrHDRUpconversionScale); |
| |
| dstRGBA[dstOfs] = Math.min(255, Math.max(0, Math.round(f * 255.0))); |
| |
| srcOfs += 2; |
| dstOfs++; |
| } |
| } |
| } |
| |
| tex = renderer.createRgbaTexture(dstRGBA, width, height); |
| |
| // We've applied the LDR->HDR upconversion scale when converting to 32bpp, so don't have the shader do it. |
| ldrHDRUpconversionScale = 1.0; |
| } |
| } |
| else { |
| // Uncompressed 565 (with no block alignment) |
| |
| displayWidth = width; |
| displayHeight = height; |
| canvas.width = width; |
| canvas.height = height; |
| |
| // WebGL requires each row to be aligned on a 4-byte boundary. |
| var widthWordAligned = (width + 1) & ~1; |
| |
| // Create 565 texture. |
| var dstTex = new Uint16Array(widthWordAligned * height); |
| |
| // Convert the array of bytes to an array of uint16's. |
| var pix = 0; |
| for (var y = 0; y < height; y++) |
| { |
| const dstTexRowOfs = y * widthWordAligned; |
| for (var x = 0; x < width; x++, pix++) |
| dstTex[dstTexRowOfs + x] = dst[2 * pix + 0] | (dst[2 * pix + 1] << 8); |
| } |
| |
| tex = renderer.createRgb565Texture(dstTex, width, height); |
| } |
| |
| linearToSRGBFlag = is_hdr; |
| elem('linear_to_srgb').innerText = linearToSRGBFlag ? 'Enabled' : 'Disabled'; |
| |
| redraw(); |
| |
| curLoadedKTX2Data = data; |
| curLoadedKTX2URI = uri; |
| } |
| |
| 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 encodedKTX2File; |
| |
| function resetDrawSettings() { |
| drawMode = 0; |
| |
| linearToSRGBFlag = false; |
| elem('linear_to_srgb').innerText = linearToSRGBFlag ? 'Enabled' : 'Disabled'; |
| |
| // drawScale = 1.0; |
| // elem('scale-slider').value = .5; |
| // elem('scale-value').textContent = 1; |
| |
| ldrHDRUpconversionScale = 1.0; |
| } |
| |
| function getFileExtension(url) { |
| const lastDotIndex = url.lastIndexOf('.'); |
| if (lastDotIndex === -1) |
| return null; // No extension found |
| const extension = url.substring(lastDotIndex + 1); |
| |
| // Remove any query parameters or fragments from the extension and convert to lowercase |
| const cleanExtension = extension.split(/[\?#]/)[0].toLowerCase(); |
| |
| return cleanExtension; |
| } |
| |
| function getETC1SCompLevel() { |
| var slider = document.getElementById('etc1s-comp-level-slider'); // Get the slider element |
| var compLevel = parseInt(slider.value, 10); // Convert the slider value to an integer |
| return compLevel; |
| } |
| |
| function getUASTCHDRQuality() { |
| var slider = document.getElementById('uastc-hdr-quality-slider'); // Get the slider element |
| var qualityLevel = parseInt(slider.value, 10); // Convert the slider value to an integer |
| return qualityLevel; |
| } |
| |
| function getASTCHDR6x6CompLevel() { |
| var slider = document.getElementById('astc-hdr6x6-comp-level-slider'); |
| var compLevel = parseInt(slider.value, 10); // Convert the slider value to an integer |
| return compLevel; |
| } |
| |
| function getUASTCLDRQuality() { |
| var slider = document.getElementById('uastc-ldr-quality-slider'); // Get the slider element |
| var qualityLevel = parseInt(slider.value, 10); // Convert the slider value to an integer |
| return qualityLevel; |
| } |
| |
| function getUASTCLDRRDOQuality() { |
| var rdoSlider = document.getElementById('rdo-quality-slider'); // Get the slider element |
| var rdoQuality = parseFloat(rdoSlider.value); // Convert the slider value to a floating-point number |
| return rdoQuality; // Return the current value |
| } |
| |
| function getNumWorkerThreads() { |
| var slider = document.getElementById('num_worker_threads'); |
| var num = parseInt(slider.value, 10); // Convert the slider value to an integer |
| |
| num = Math.floor(num); |
| |
| if (num < 0) |
| num = 0; |
| else if (num > MAX_WORKER_THREADS) |
| num = MAX_WORKER_THREADS; |
| |
| return num; |
| } |
| |
| function imageFileDataLoaded(data, uri) { |
| |
| updateErrorLine(""); |
| |
| const { BasisFile, BasisEncoder, initializeBasis, encodeBasisTexture } = Module; |
| |
| var extension = getFileExtension(uri); |
| |
| resetDrawSettings(); |
| |
| initializeBasis(); |
| |
| log("imageFileDataLoaded URI: " + uri); |
| |
| curLoadedImageData = data; |
| curLoadedImageURI = uri; |
| |
| // Create a destination buffer to hold the compressed .basis file data. If this buffer isn't large enough compression will fail. |
| var ktx2FileData = new Uint8Array(1024 * 1024 * 24); |
| |
| // Compress using the BasisEncoder class. |
| log('BasisEncoder::encode() started:'); |
| |
| const basisEncoder = new BasisEncoder(); |
| |
| basisEncoder.controlThreading(elem('multithreaded_encoding').checked, MAX_WORKER_THREADS); |
| |
| var desiredBasisTexFormat = getSelectedBasisTexFormat(); |
| |
| const isHDRSourceFile = (extension != null) && (extension === "exr" || extension === "hdr"); |
| |
| if (Module.isBasisTexFormatLDR(desiredBasisTexFormat)) |
| { |
| if (isHDRSourceFile) |
| { |
| log('Image is HDR - must encode to a HDR format. Defaulting to UASTC HDR 4x4.'); |
| desiredBasisTexFormat = Module.basis_tex_format.cUASTC_HDR_4x4.value; |
| |
| setDropdownValue('basis-tex-format', Module.basis_tex_format.cUASTC_HDR_4x4.value); |
| } |
| } |
| |
| basisEncoder.setCreateKTX2File(true); |
| basisEncoder.setKTX2UASTCSupercompression(true); |
| |
| if (!isHDRSourceFile) |
| basisEncoder.setKTX2SRGBTransferFunc(true); |
| |
| if (Module.isBasisTexFormatHDR(desiredBasisTexFormat)) |
| { |
| var img_type = Module.hdr_image_type.cHITPNGImage.value; |
| |
| if (extension != null) |
| { |
| if (extension === "exr") |
| img_type = Module.hdr_image_type.cHITEXRImage.value; |
| else if (extension === "hdr") |
| img_type = Module.hdr_image_type.cHITHDRImage.value; |
| else if ((extension === "jpg") || (extension === "jpeg") || (extension === "jfif")) |
| img_type = Module.hdr_image_type.cHITJPGImage.value; |
| } |
| |
| var ldr_to_hdr_nit_multiplier = getNitMultiplier(); |
| |
| basisEncoder.setSliceSourceImageHDR(0, new Uint8Array(data), 0, 0, img_type, elem('ConvertLDRToLinear').checked, ldr_to_hdr_nit_multiplier); |
| |
| /* |
| // Float image data test |
| const checkerboard = new Float32Array(64); |
| |
| // Fill the checkerboard array as before |
| for (let y = 0; y < 4; y++) { |
| for (let x = 0; x < 4; x++) { |
| const index = (y * 4 + x) * 4; |
| const isWhite = (x + y) % 2 === 0; |
| |
| if (isWhite) { |
| checkerboard[index] = 1.0; |
| checkerboard[index + 1] = 0.0; |
| checkerboard[index + 2] = 1.0; |
| checkerboard[index + 3] = 1.0; |
| } else { |
| checkerboard[index] = 0.0; |
| checkerboard[index + 1] = 0.0; |
| checkerboard[index + 2] = 0.0; |
| checkerboard[index + 3] = 1.0; |
| } |
| } |
| } |
| |
| // Convert Float32Array to Uint8Array by sharing the same buffer |
| const byteArray = new Uint8Array(checkerboard.buffer); |
| |
| basisEncoder.setSliceSourceImageHDR(0, byteArray, 4, 4, Module.hdr_image_type.cHITRGBAFloat.value, elem('ConvertLDRToLinear').checked, 1.0); |
| */ |
| |
| /* |
| // Half float image data test |
| var W = 16; |
| var H = 16; |
| const checkerboard = new Uint16Array(W*H*4); |
| |
| // Values to represent 1.0 and 0 in 16-bit integers |
| const VALUE_ONE = 0x3C00; // FP16 representation of 1.0 |
| const VALUE_ZERO = 0x0000; // FP16 representation of 0.0 |
| |
| // Fill the checkerboard array |
| for (let y = 0; y < H; y++) { |
| for (let x = 0; x < W; x++) { |
| const index = (y * W + x) * 4; |
| const isWhite = (x + y) % 2 === 0; |
| |
| if (isWhite) { |
| checkerboard[index] = VALUE_ONE; // R |
| checkerboard[index + 1] = VALUE_ONE; // G |
| checkerboard[index + 2] = VALUE_ONE; // B |
| checkerboard[index + 3] = VALUE_ONE; // A |
| } else { |
| checkerboard[index] = VALUE_ZERO; // R |
| checkerboard[index + 1] = VALUE_ZERO; // G |
| checkerboard[index + 2] = VALUE_ZERO; // B |
| checkerboard[index + 3] = VALUE_ONE; // A (1.0) |
| } |
| } |
| } |
| |
| // Convert Uint16Array to Uint8Array by sharing the same buffer |
| const byteArray = new Uint8Array(checkerboard.buffer); |
| |
| basisEncoder.setSliceSourceImageHDR(0, byteArray, W, H, Module.hdr_image_type.cHITRGBAHalfFloat.value, elem('ConvertLDRToLinear').checked, 1.0); |
| */ |
| } |
| else |
| { |
| var img_type = Module.ldr_image_type.cPNGImage.value; |
| |
| if (extension != null) |
| { |
| if ((extension === "jpg") || (extension === "jpeg") || (extension === "jfif")) |
| img_type = Module.ldr_image_type.cJPGImage.value; |
| } |
| |
| basisEncoder.setSliceSourceImage(0, new Uint8Array(data), 0, 0, img_type); |
| } |
| |
| basisEncoder.setFormatMode(desiredBasisTexFormat); |
| |
| // Use UASTC HDR quality (0=fastest) |
| basisEncoder.setUASTCHDRQualityLevel(getUASTCHDRQuality()); |
| |
| basisEncoder.setASTC_HDR_6x6_Level(getASTCHDR6x6CompLevel()); |
| basisEncoder.setLambda(getASTC6x6RDOLambda()); |
| basisEncoder.setRec2020(elem('Rec2020').checked); |
| |
| basisEncoder.setDebug(elem('Debug').checked); |
| basisEncoder.setComputeStats(elem('ComputeStats').checked); |
| basisEncoder.setPerceptual(elem('SRGB').checked); |
| basisEncoder.setMipSRGB(elem('SRGB').checked); |
| |
| const etc1SQualityLevel = parseInt(elem('EncodeQuality').value, 10); |
| basisEncoder.setQualityLevel(etc1SQualityLevel); |
| |
| basisEncoder.setRDOUASTC(elem('UASTC_LDR_RDO').checked); |
| basisEncoder.setRDOUASTCQualityScalar(getUASTCLDRRDOQuality()); |
| |
| basisEncoder.setMipGen(elem('Mipmaps').checked); |
| basisEncoder.setCompressionLevel(getETC1SCompLevel()); |
| basisEncoder.setPackUASTCFlags(getUASTCLDRQuality()); |
| |
| if (desiredBasisTexFormat === Module.basis_tex_format.cUASTC_HDR_4x4.value) |
| log('Encoding to UASTC HDR 4x4 quality level ' + getUASTCHDRQuality()); |
| else if (desiredBasisTexFormat === Module.basis_tex_format.cASTC_HDR_6x6.value) |
| log('Encoding to ASTC HDR 6x6'); |
| else if (desiredBasisTexFormat === Module.basis_tex_format.cASTC_HDR_6x6_INTERMEDIATE.value) |
| log('Encoding to ASTC HDR 6x6 Intermediate'); |
| else if (desiredBasisTexFormat === Module.basis_tex_format.cUASTC4x4.value) |
| log('Encoding to UASTC LDR 4x4'); |
| else |
| log('Encoding to ETC1S quality level ' + etc1SQualityLevel); |
| |
| showBusyModal(); |
| |
| requestAnimationFrame(() => { |
| requestAnimationFrame(() => { |
| const startTime = performance.now(); |
| |
| var num_output_bytes = basisEncoder.encode(ktx2FileData); |
| |
| const elapsed = performance.now() - startTime; |
| |
| hideBusyModal(); |
| |
| logTime('encoding time', elapsed.toFixed(2)); |
| |
| var actualKTX2FileData = new Uint8Array(ktx2FileData.buffer, 0, num_output_bytes); |
| |
| basisEncoder.delete(); |
| |
| if (num_output_bytes == 0) { |
| updateErrorLine('encodeBasisTexture() failed! Image may be too large to compress using 32-bit WASM.'); |
| |
| log('encodeBasisTexture() failed!'); |
| } else { |
| log('encodeBasisTexture() succeeded, output size ' + num_output_bytes); |
| |
| encodedKTX2File = actualKTX2FileData; |
| } |
| |
| if (num_output_bytes != 0) { |
| dataLoaded(actualKTX2FileData); |
| } |
| |
| }); |
| }); |
| |
| } |
| |
| function dataLoadError(msg) { |
| updateErrorLine(msg); |
| log(msg); |
| } |
| |
| function runLoadFile() { |
| logClear(); |
| loadArrayBuffer(elem('file').value, dataLoaded, dataLoadError); |
| } |
| |
| function runEncodeImageFile() { |
| logClear(); |
| |
| if ((elem('imagefile').value === '<externally loaded>') && (curLoadedImageData != null)) |
| { |
| //console.log("calling imageFileDataLoaded 1"); |
| |
| imageFileDataLoaded(curLoadedImageData, curLoadedImageURI); |
| } |
| else |
| { |
| //console.log("calling imageFileDataLoaded 4"); |
| |
| loadArrayBuffer(elem('imagefile').value, imageFileDataLoaded, dataLoadError); |
| } |
| } |
| |
| function onFilenameSelect() { |
| // Get the selected value from the drop-down |
| var dropdown = document.getElementById('filename-dropdown'); |
| var selectedFilename = dropdown.value; |
| |
| if (selectedFilename) { |
| elem('imagefile').value = selectedFilename; |
| |
| logClear(); |
| |
| //console.log("calling imageFileDataLoaded 3"); |
| |
| loadArrayBuffer(selectedFilename, imageFileDataLoaded, dataLoadError); |
| } |
| } |
| |
| function alphaBlend() { drawMode = 0; redraw(); } |
| function viewRGB() { drawMode = 1; redraw(); } |
| function viewAlpha() { drawMode = 2; redraw(); } |
| |
| function BC7ChromaFilterClicked() |
| { |
| if (curLoadedKTX2Data != null) |
| { |
| logClear(); |
| dataLoaded(curLoadedKTX2Data, curLoadedKTX2URI); |
| } |
| } |
| |
| function highQualityTranscodingClicked() |
| { |
| // Force retranscoding with the changed flags |
| if (curLoadedKTX2Data != null) { |
| logClear(); |
| dataLoaded(curLoadedKTX2Data, curLoadedKTX2URI); |
| } |
| } |
| |
| function linearToSRGB() { |
| linearToSRGBFlag = !linearToSRGBFlag; |
| elem('linear_to_srgb').innerText = linearToSRGBFlag ? 'Enabled' : 'Disabled'; |
| redraw(); |
| } |
| |
| function lerp(a, b, t) { |
| return a + t * (b - a); |
| } |
| |
| function updateScale(value) { |
| |
| var v = value; |
| if (v < .5) { |
| v = v / .5; |
| v = v ** 3.0; |
| } |
| else { |
| v = (v - .5) / .5; |
| v = lerp(1.0, 32.0, v); |
| } |
| |
| document.getElementById('scale-value').textContent = v.toFixed(4); |
| drawScale = v; |
| redraw(); |
| } |
| |
| function downloadEncodedFile() { |
| if (encodedKTX2File) { |
| if (encodedKTX2File.length) |
| download_file("encoded_file.ktx2", encodedKTX2File); |
| } |
| } |
| |
| function disabledFormatsChanged() { |
| updateSupportedFormats(); |
| updateDisableButtons(); |
| |
| if (curLoadedKTX2Data != null) { |
| logClear(); |
| dataLoaded(curLoadedKTX2Data, curLoadedKTX2URI); |
| } |
| } |
| |
| function disableASTC() { |
| astcDisabled = !astcDisabled; |
| disabledFormatsChanged(); |
| } |
| |
| function disableETC1() { |
| etcDisabled = !etcDisabled; |
| disabledFormatsChanged(); |
| } |
| |
| function disableDXT() { |
| dxtDisabled = !dxtDisabled; |
| disabledFormatsChanged(); |
| } |
| |
| function disablePVRTC() { |
| pvrtcDisabled = !pvrtcDisabled; |
| disabledFormatsChanged(); |
| } |
| |
| function disableBC7() { |
| bc7Disabled = !bc7Disabled; |
| disabledFormatsChanged(); |
| } |
| |
| function disableASTCHDR() |
| { |
| astcHDRDisabled = !astcHDRDisabled; |
| disabledFormatsChanged(); |
| } |
| |
| function disableBC6H() { |
| bc6hDisabled = !bc6hDisabled; |
| disabledFormatsChanged(); |
| } |
| |
| function disableRGBA_HALF() { |
| rgbaHalfDisabled = !rgbaHalfDisabled; |
| disabledFormatsChanged(); |
| } |
| |
| function disableAllFormats() |
| { |
| astcDisabled = true; |
| etcDisabled = true; |
| dxtDisabled = true; |
| pvrtcDisabled = true; |
| bc7Disabled = true; |
| astcHDRDisabled = true; |
| bc6hDisabled = true; |
| rgbaHalfDisabled = true; |
| disabledFormatsChanged(); |
| } |
| |
| function enableAllFormats() |
| { |
| astcDisabled = false; |
| etcDisabled = false; |
| dxtDisabled = false; |
| pvrtcDisabled = false; |
| bc7Disabled = false; |
| astcHDRDisabled = false; |
| bc6hDisabled = false; |
| rgbaHalfDisabled = false; |
| disabledFormatsChanged(); |
| } |
| |
| function updateDisableButtons() { |
| const buttonsDiv = elem('disable-buttons'); |
| buttonsDiv.innerHTML = ''; // Clear any previous buttons |
| |
| let buttonCount = 0; // Keep track of how many buttons are added |
| |
| function addButton(buttonHTML) { |
| if (buttonCount > 0 && buttonCount % 3 === 0) { |
| // Insert a line break after every 3rd button |
| buttonsDiv.innerHTML += '<br>'; |
| } |
| buttonsDiv.innerHTML += buttonHTML; |
| buttonCount++; |
| } |
| |
| if (astcSupported) { |
| if (astcDisabled) |
| addButton('<button onclick="disableASTC()">Enable ASTC LDR</button>'); |
| else |
| addButton('<button onclick="disableASTC()">Disable ASTC LDR</button>'); |
| } |
| if (etcSupported) { |
| if (etcDisabled) |
| addButton('<button onclick="disableETC1()">Enable ETC1</button>'); |
| else |
| addButton('<button onclick="disableETC1()">Disable ETC1</button>'); |
| } |
| if (dxtSupported) { |
| if (dxtDisabled) |
| addButton('<button onclick="disableDXT()">Enable DXT (BC1/BC3)</button>'); |
| else |
| addButton('<button onclick="disableDXT()">Disable DXT (BC1/BC3)</button>'); |
| } |
| if (pvrtcSupported) { |
| if (pvrtcDisabled) |
| addButton('<button onclick="disablePVRTC()">Enable PVRTC</button>'); |
| else |
| addButton('<button onclick="disablePVRTC()">Disable PVRTC</button>'); |
| } |
| if (bc7Supported) { |
| if (bc7Disabled) |
| addButton('<button onclick="disableBC7()">Enable BC7</button>'); |
| else |
| addButton('<button onclick="disableBC7()">Disable BC7</button>'); |
| } |
| if (astcHDRSupported) { |
| if (astcHDRDisabled) |
| addButton('<button onclick="disableASTCHDR()">Enable ASTC HDR</button>'); |
| else |
| addButton('<button onclick="disableASTCHDR()">Disable ASTC HDR</button>'); |
| } |
| if (bc6hSupported) { |
| if (bc6hDisabled) |
| addButton('<button onclick="disableBC6H()">Enable BC6H</button>'); |
| else |
| addButton('<button onclick="disableBC6H()">Disable BC6H</button>'); |
| } |
| if (rgbaHalfSupported) { |
| if (rgbaHalfDisabled) |
| addButton('<button onclick="disableRGBA_HALF()">Enable RGBA_HALF</button>'); |
| else |
| addButton('<button onclick="disableRGBA_HALF()">Disable RGBA_HALF</button>'); |
| } |
| |
| addButton('<button onclick="disableAllFormats()">Disable All</button>'); |
| addButton('<button onclick="enableAllFormats()">Enable All</button>'); |
| } |
| |
| function updateSupportedFormats() { |
| let supportedFormats = []; |
| |
| // Collect all supported formats |
| if (astcSupported && !astcDisabled) supportedFormats.push('ASTC LDR'); |
| if (etcSupported && !etcDisabled) supportedFormats.push('ETC1'); |
| if (dxtSupported && !dxtDisabled) supportedFormats.push('BC1-5'); |
| if (pvrtcSupported && !pvrtcDisabled) supportedFormats.push('PVRTC'); |
| if (bc7Supported && !bc7Disabled) supportedFormats.push('BC7'); |
| if (astcHDRSupported && !astcHDRDisabled) supportedFormats.push('ASTC HDR'); |
| if (bc6hSupported && !bc6hDisabled) supportedFormats.push('BC6H'); |
| if (rgbaHalfSupported && !rgbaHalfDisabled) supportedFormats.push('RGBA_HALF'); |
| |
| // Prepare the display string |
| let supportedString = 'Supported WebGL formats: '; |
| if (supportedFormats.length > 0) { |
| for (let i = 0; i < supportedFormats.length; i++) { |
| supportedString += supportedFormats[i]; |
| // Add a comma after each format except the last |
| if (i < supportedFormats.length - 1) { |
| supportedString += ', '; |
| } |
| // Start a new line after every 4 formats |
| if ((i + 1) % 4 === 0) { |
| supportedString += '<br>'; |
| } |
| } |
| } else { |
| supportedString = 'No WebGL formats detected/enabled; using uncompressed fallback formats.'; |
| } |
| |
| // Update the HTML element |
| elem('supported-formats').innerHTML = supportedString; |
| } |
| |
| 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 fallbacks. |
| //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); |
| |
| updateSupportedFormats(); |
| updateDisableButtons(); |
| } |
| |
| function validateNitMultiplier(input) |
| { |
| const warning = document.getElementById('ldr-to-hdr-warning'); |
| const value = parseFloat(input.value); |
| |
| if (isNaN(value) || value < 0.1 || value > 1000) { |
| // Show warning if value is invalid |
| warning.style.display = 'inline'; |
| } |
| else |
| { |
| // Hide warning if value is valid |
| warning.style.display = 'none'; |
| } |
| } |
| |
| function getNitMultiplier() |
| { |
| const input = document.getElementById('ldr-to-hdr-multiplier'); |
| const value = parseFloat(input.value); |
| |
| if (!isNaN(value) && value >= 0.1 && value <= 1000) |
| { |
| return value; |
| } |
| else |
| { |
| log('Invalid LDR to HDR Nit Multiplier value. Defaulting to 100.0'); |
| return 100.0; // Default value if invalid |
| } |
| } |
| |
| function getSelectedBasisTexFormat() |
| { |
| const selectElem = document.getElementById('basis-tex-format'); |
| const selectedValue = parseInt(selectElem.value, 10); |
| |
| return selectedValue; |
| } |
| |
| function getASTC6x6RDOLambda() |
| { |
| const input = document.getElementById('astc6x6-rdo-lambda'); |
| const value = parseFloat(input.value); |
| |
| if (!isNaN(value) && value >= 0.0 && value <= 1000000) |
| { |
| return value; |
| } |
| else |
| { |
| log('Invalid lambda value. Defaulting to 0.0'); |
| return 0.0; // Default value if invalid |
| } |
| } |
| |
| function showBusyModal() { |
| //console.log("Showing modal"); |
| document.getElementById('busy-modal').style.display = 'flex'; |
| } |
| |
| function hideBusyModal() { |
| //console.log("Hiding modal"); |
| document.getElementById('busy-modal').style.display = 'none'; |
| } |
| |
| function setDropdownValue(selectId, value) { |
| const selectElement = document.getElementById(selectId); |
| if (!selectElement) |
| return; |
| |
| selectElement.value = value; |
| selectElement.dispatchEvent(new Event('change')); |
| } |
| |
| function globalInit() |
| { |
| elem('SRGB').checked = true; |
| |
| 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); |
| |
| elem('imagefile').addEventListener('keydown', function (e) { |
| if (e.keyCode == 13) { |
| runEncodeImageFile(); |
| } |
| }, false); |
| |
| { |
| let etc1SLevelSlider = document.getElementById('etc1s-comp-level-slider'); |
| let etc1sLevelSliderValueDisplay = document.getElementById('etc1s-comp-level-slider-value'); |
| etc1SLevelSlider.oninput = function() { |
| etc1sLevelSliderValueDisplay.textContent = this.value; |
| } |
| } |
| |
| { |
| let uastcHDRSlider = document.getElementById('uastc-hdr-quality-slider'); |
| let qualityHDRValueDisplay = document.getElementById('uastc-hdr-quality-value'); |
| uastcHDRSlider.oninput = function() { |
| qualityHDRValueDisplay.textContent = this.value; |
| } |
| } |
| |
| { |
| let astcHDR6x6Slider = document.getElementById('astc-hdr6x6-comp-level-slider'); |
| let compLevelValueDisplay = document.getElementById('astc-hdr6x6-comp-level-value'); |
| astcHDR6x6Slider.oninput = function() { |
| compLevelValueDisplay.textContent = this.value; |
| } |
| } |
| |
| { |
| let uastcLDRSlider = document.getElementById('uastc-ldr-quality-slider'); |
| let qualityLDRValueDisplay = document.getElementById('uastc-ldr-quality-value'); |
| uastcLDRSlider.oninput = function() { |
| qualityLDRValueDisplay.textContent = this.value; |
| } |
| } |
| |
| { |
| let rdoSlider = document.getElementById('rdo-quality-slider'); |
| let rdoValueDisplay = document.getElementById('rdo-quality-value'); |
| rdoSlider.oninput = function() { |
| rdoValueDisplay.textContent = parseFloat(this.value).toFixed(1); |
| } |
| } |
| |
| { |
| let etc1SQualitySlider = document.getElementById('EncodeQuality'); |
| let etc1SQualitySliderValue = document.getElementById('encode-quality-value'); |
| etc1SQualitySlider.oninput = function() { |
| etc1SQualitySliderValue.textContent = parseFloat(this.value).toFixed(0); |
| } |
| } |
| |
| runLoadFile(); |
| } |
| |
| function updateErrorLine(message) { |
| const errorLine = document.getElementById('error-line'); |
| errorLine.textContent = message; |
| errorLine.style.color = message.trim() ? 'red' : ''; |
| } |
| |
| </script> |
| </head> |
| <body> |
| <br> |
| <div style="font-size: 24pt; font-weight: bold"> |
| Basis Universal Multithreaded .KTX2 Supercompressed GPU Texture Encoding/Transcoding Testbed v0.67 |
| </div> |
| |
| <br>This demo uses the Basis Universal C++ transcoder (compiled to WebAssembly using Emscripten) to transcode a .ktx2 file to <b id='format'>FORMAT</b> |
| <br>It also supports encoding .PNG, .EXR or .HDR files to LDR or HDR .KTX2 files. |
| <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>Enable your browser debug console (F12 on Chrome/Firefox) to see debug output. |
| <br>Note: The largest image resolution that can be compressed in the browser with |
| <br>this library is limited to around 6 megapixels due to 32-bit WASM memory |
| <br>constraints. Larger images risk running out of memory. |
| |
| <br><br> |
| <div id="supported-formats"> |
| Supported WebGL formats: |
| </div> |
| |
| <br> |
| <div id="error-line"> |
| Test |
| </div> |
| |
| <div id="disable-buttons" style="margin-top: 10px;"> |
| <!-- Buttons will be dynamically added here --> |
| </div> |
| |
| <br> |
| <div id="threading-indicator"> </div> |
| <input type="checkbox" id="multithreaded_encoding" checked>Use Multithreading (if available) |
| |
| <br>Additional Worker Threads (Max 18): |
| <input type="text" id="num_worker_threads" value="18" size="18"> |
| <br><br> |
| |
| <br> |
| .ktx2 file: |
| <input id="file" type="text" size=30 value="assets/kodim23.ktx2"></input> |
| <input type="button" value="Transcode!" onclick="runLoadFile()"></input> |
| <br> |
| |
| <br> |
| .png/.jpg/.exr/.hdr file: |
| <input id="imagefile" type="text" size=30 value="assets/desk.exr"></input> |
| <input type="button" value="Encode!" onclick="runEncodeImageFile()"></input> |
| <br> |
| <br> |
| <select id="filename-dropdown" onchange="onFilenameSelect()"> |
| <option value="">--Select Image File--</option> |
| <option value="assets/desk.exr">desk.exr</option> |
| <option value="assets/MtTamWest.exr">MtTamWest.exr</option> |
| <option value="assets/sponza.exr">sponza.exr</option> |
| <option value="assets/CandleGlass.exr">CandleGlass.exr</option> |
| <option value="assets/Flamingo.exr">Flamingo.exr</option> |
| <option value="assets/src_atrium.exr">src_atrium.exr</option> |
| <option value="assets/src_backyard.exr">src_backyard.exr</option> |
| |
| <option value="assets/src_memorial.exr">src_memorial.exr</option> |
| <option value="assets/src_yucca.exr">src_yucca.exr</option> |
| <option value="assets/Tree.exr">Tree.exr</option> |
| |
| <option value="assets/kodim18_512x512.png">kodim18_512x512.png</option> |
| <option value="assets/kodim18_64x64.png">kodim18_64x64.png</option> |
| |
| <option value="assets/kodim01.png">kodim01.png</option> |
| <option value="assets/kodim02.png">kodim02.png</option> |
| <option value="assets/kodim03.png">kodim03.png</option> |
| <option value="assets/kodim04.png">kodim04.png</option> |
| <option value="assets/kodim05.png">kodim05.png</option> |
| <option value="assets/kodim06.png">kodim06.png</option> |
| <option value="assets/kodim07.png">kodim07.png</option> |
| <option value="assets/kodim08.png">kodim08.png</option> |
| <option value="assets/kodim09.png">kodim09.png</option> |
| <option value="assets/kodim10.png">kodim10.png</option> |
| <option value="assets/kodim11.png">kodim11.png</option> |
| <option value="assets/kodim12.png">kodim12.png</option> |
| <option value="assets/kodim13.png">kodim13.png</option> |
| <option value="assets/kodim14.png">kodim14.png</option> |
| <option value="assets/kodim15.png">kodim15.png</option> |
| <option value="assets/kodim16.png">kodim16.png</option> |
| <option value="assets/kodim17.png">kodim17.png</option> |
| <option value="assets/kodim18.png">kodim18.png</option> |
| <option value="assets/kodim19.png">kodim19.png</option> |
| <option value="assets/kodim20.png">kodim20.png</option> |
| <option value="assets/kodim21.png">kodim21.png</option> |
| <option value="assets/kodim22.png">kodim22.png</option> |
| <option value="assets/kodim23.png">kodim23.png</option> |
| |
| <option value="assets/kodim24.png">kodim24.png</option> |
| <option value="assets/kodim25.png">kodim25.png</option> |
| <option value="assets/kodim26.png">kodim26.png</option> |
| |
| <option value="assets/xmen.png">xmen.png</option> |
| <option value="assets/tng.png">tng.png</option> |
| <option value="assets/base.png">base.png</option> |
| |
| </select> |
| |
| <br> |
| |
| <div id="drop-area" style="width: 20%; height: 50px; border: 2px dashed #ccc; display: flex; justify-content: center; align-items: center; margin-top: 20px;"> |
| <p>Drag and drop a PNG/JPG/EXR/HDR file here, or click to select a file.</p> |
| <input type="file" id="file-input" style="display: none;"> |
| </div> |
| <br> |
| |
| <input type="button" value="Download Encoded .KTX2 File" onclick="downloadEncodedFile()"> |
| |
| <hr style="width: 40%; margin: 10px 0; background-color: #ccc; border: none; height: 1px;"> |
| |
| <b>Visualization/Display Options:</b> |
| |
| <br> |
| Disable ETC1S->BC7 Transcoder's Chroma Artifact Filtering: |
| <input type="checkbox" id="etc1s_bc7_transcoder_no_chroma_filtering" onclick="BC7ChromaFilterClicked()"></input> |
| |
| <br> |
| <div id="threading-indicator"> </div> |
| |
| Higher quality ASTC 6x6 HDR->BC6H transcoding: |
| <input type="checkbox" id="highquality_transcoding" checked onclick="highQualityTranscodingClicked()"> |
| |
| <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="LinearToSRGB" onclick="linearToSRGB()"></input> <b id='linear_to_srgb'>Disabled</b> |
| |
| <br> |
| |
| <label for="scale-slider">Exposure:</label> |
| <input type="range" id="scale-slider" min="0" max="1" step=".01" value=".5" style="width: 300px;" oninput="updateScale(this.value)"> |
| <span id="scale-value">1</span> |
| |
| <div style="position:absolute; left: 600px; top:160px; font-size: 20pt; font-weight: bold; color: red"> |
| <canvas id='canvas'></canvas> |
| </div> |
| |
| <br> |
| <hr style="width: 40%; margin: 10px 0; background-color: #ccc; border: none; height: 1px;"> |
| |
| <b>KTX2 Texture Format to Encode:</b> |
| <select id="basis-tex-format"> |
| <option value="0">ETC1S</option> |
| <option value="1">UASTC LDR 4x4</option> |
| <option value="2">UASTC HDR 4x4</option> |
| <option value="3">RDO ASTC HDR 6x6</option> |
| <option value="4">ASTC HDR 6x6 Intermediate</option> |
| </select> |
| <br> |
| |
| <hr style="width: 40%; margin: 10px 0; background-color: #ccc; border: none; height: 1px;"> |
| |
| <b>ETC1S LDR Options:</b> |
| <br> |
| ETC1S Quality: |
| <input type="range" min="1" max="255" value="255" class="slider" id="EncodeQuality" style="width: 300px;"> |
| <span id="encode-quality-value">255</span> |
| |
| <br> |
| <label for="etc1s-comp-level-slider">ETC1S Comp Level:</label> |
| <input type="range" id="etc1s-comp-level-slider" min="0" max="6" step="1" value="2"> |
| <span id="etc1s-comp-level-slider-value">2</span> <!-- Displays the current value --> |
| |
| <hr style="width: 40%; margin: 10px 0; background-color: #ccc; border: none; height: 1px;"> |
| |
| <b>UASTC LDR 4x4 Options:</b> |
| <br> |
| <label for="uastc-ldr-quality-slider">UASTC LDR Quality:</label> |
| <input type="range" id="uastc-ldr-quality-slider" min="0" max="3" step="1" value="1"> |
| <span id="uastc-ldr-quality-value">1</span> <!-- Displays the current value --> |
| |
| <br> |
| |
| UASTC LDR RDO: |
| <input type="checkbox" id="UASTC_LDR_RDO"> |
| |
| <label for="rdo-quality-slider">RDO Quality:</label> |
| <input type="range" id="rdo-quality-slider" min="0.1" max="10" step="0.1" value="1.0"> |
| <span id="rdo-quality-value">1.0</span> <!-- Displays the current value --> |
| |
| <hr style="width: 40%; margin: 10px 0; background-color: #ccc; border: none; height: 1px;"> |
| |
| <b>UASTC HDR 4x4 Options:</b> |
| |
| <br> |
| <label for="uastc-hdr-quality-slider">UASTC HDR Quality:</label> |
| <input type="range" id="uastc-hdr-quality-slider" min="0" max="3" step="1" value="0"> |
| <span id="uastc-hdr-quality-value">0</span> <!-- Displays the current value --> |
| <br> |
| |
| <hr style="width: 40%; margin: 10px 0; background-color: #ccc; border: none; height: 1px;"> |
| |
| <b>ASTC HDR 6x6 Options:</b> |
| <br> |
| |
| <label for="astc-hdr6x6-comp-level-slider">Comp Level:</label> |
| <input type="range" id="astc-hdr6x6-comp-level-slider" min="0" max="12" step="1" value="0"> |
| <span id="astc-hdr6x6-comp-level-value">0</span> <!-- Displays the current value --> |
| <br> |
| |
| RDO Quality (Lambda, 0-50k, try 0-5k, higher=smaller): |
| <input type="text" id="astc6x6-rdo-lambda" value="0.0" size="10"> |
| <br> |
| |
| REC 2020 Colorspace: |
| <input type="checkbox" id="Rec2020"> |
| |
| <hr style="width: 40%; margin: 10px 0; background-color: #ccc; border: none; height: 1px;"> |
| |
| <b>LDR->HDR Upconversion Options:</b> |
| <br> |
| Convert LDR images to linear light: |
| <input type="checkbox" id="ConvertLDRToLinear" checked> |
| |
| <br> |
| LDR to HDR Upconversion Nit Multiplier: |
| <input type="text" id="ldr-to-hdr-multiplier" value="100.0" size="10" |
| oninput="validateNitMultiplier(this)" |
| placeholder="Enter a value between 0.1 and 1000"> |
| <span id="ldr-to-hdr-warning" style="color: red; display: none;">Invalid value!</span> |
| <br> |
| |
| <hr style="width: 40%; margin: 10px 0; background-color: #ccc; border: none; height: 1px;"> |
| |
| <b>Other Options:</b> |
| |
| <br> |
| Use sRGB/perceptual metrics: |
| <input type="checkbox" id="SRGB"> |
| <br> |
| Generate mipmaps: |
| <input type="checkbox" id="Mipmaps"> |
| |
| <br> |
| <br> |
| Debug Output (See Dev Console): |
| <input type="checkbox" id="Debug"> |
| Compute Stats: |
| <input type="checkbox" id="ComputeStats"> |
| |
| <hr style="width: 40%; margin: 10px 0; background-color: #ccc; border: none; height: 1px;"> |
| |
| <b>Log Output:</b> |
| |
| <div id='logger'></div> |
| |
| <div id="busy-modal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 9999; justify-content: center; align-items: center; font-size: 24px; color: white; display: none;"> |
| Encoding... Please wait. |
| </div> |
| |
| </body> |
| |
| <script> |
| // Function to check for WebAssembly threading support |
| function isWasmThreadingSupported() { |
| try { |
| if (typeof WebAssembly === "object" && typeof WebAssembly.Memory === "function") { |
| const testMemory = new WebAssembly.Memory({ |
| initial: 1, |
| maximum: 1, |
| shared: true, |
| }); |
| return testMemory instanceof WebAssembly.Memory; |
| } |
| return false; |
| } catch (e) { |
| return false; |
| } |
| } |
| |
| async function loadBasisModule() { |
| const threadingSupported = isWasmThreadingSupported(); |
| window.isThreaded = threadingSupported; // Set global variable to indicate threading support |
| |
| const scriptSrc = threadingSupported |
| ? "../encoder/build/basis_encoder_threads.js" |
| : "../encoder/build/basis_encoder.js"; |
| |
| const script = document.createElement("script"); |
| script.src = scriptSrc; |
| script.onload = () => { |
| BASIS({ |
| onRuntimeInitialized: () => { |
| |
| console.warn('isThreaded: ' + window.isThreaded); |
| |
| globalInit(); |
| |
| const threadingIndicator = document.getElementById("threading-indicator"); |
| |
| if (!threadingSupported) |
| { |
| threadingIndicator.style.color = "red"; |
| threadingIndicator.innerText = "Multithreading not supported! Running in non-threaded mode."; |
| |
| const threadingCheckbox = document.getElementById("multithreaded_encoding"); |
| threadingCheckbox.checked = false; |
| } |
| else |
| { |
| threadingIndicator.innerText = "Multithreading is supported."; |
| } |
| |
| } |
| }).then(module => { window.Module = module; |
| |
| if (module.initializeBasis) { |
| module.initializeBasis(); |
| console.log("module.initializeBasis() called successfully."); |
| } |
| else { |
| console.error("module.initializeBasis() is not available on the Module object."); |
| } |
| |
| } |
| |
| ); |
| }; |
| |
| script.onerror = () => { |
| console.error("Failed to load the Basis module."); |
| }; |
| |
| document.head.appendChild(script); |
| } |
| |
| document.addEventListener('DOMContentLoaded', loadBasisModule); |
| </script> |
| |
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| const dropArea = document.getElementById('drop-area'); |
| const fileInput = document.getElementById('file-input'); |
| |
| // Prevent default drag behaviors |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| dropArea.addEventListener(eventName, e => e.preventDefault()); |
| dropArea.addEventListener(eventName, e => e.stopPropagation()); |
| }); |
| |
| // Highlight the drop area on dragover |
| dropArea.addEventListener('dragover', () => { |
| dropArea.style.backgroundColor = '#f1f1f1'; |
| }); |
| |
| // Remove highlight on dragleave |
| dropArea.addEventListener('dragleave', () => { |
| dropArea.style.backgroundColor = ''; |
| }); |
| |
| // Handle dropped files |
| dropArea.addEventListener('drop', e => { |
| dropArea.style.backgroundColor = ''; |
| const files = e.dataTransfer.files; |
| if (files.length > 0) { |
| processFile(files[0]); |
| } |
| }); |
| |
| // Open file picker on click |
| dropArea.addEventListener('click', () => { |
| fileInput.click(); |
| }); |
| |
| // Handle file input change |
| fileInput.addEventListener('change', () => { |
| if (fileInput.files.length > 0) { |
| processFile(fileInput.files[0]); |
| } |
| }); |
| |
| // Function to process the file |
| function processFile(file) { |
| if (!file) return; |
| |
| const reader = new FileReader(); |
| |
| reader.onload = function (e) { |
| const arrayBuffer = e.target.result; |
| |
| // Assume you have a function to process the file |
| log(`Loaded file: ${file.name}`); |
| log(`File size: ${file.size} bytes`); |
| |
| //console.log("calling imageFileDataLoaded 2"); |
| |
| imageFileDataLoaded(arrayBuffer, file.name); |
| |
| elem('imagefile').value = '<externally loaded>'; |
| }; |
| |
| reader.onerror = function (e) { |
| log('Error reading file.'); |
| }; |
| |
| reader.readAsArrayBuffer(file); |
| } |
| }); |
| </script> |
| |
| |
| </html> |
