| <!-- |
| Simple .basis file transcode tester. |
| Supports numerous texture formats: ETC1, PVRTC1, BC1-BC7, BC6H, ASTC LDR/HDR, and various uncompressed fallbacks. |
| --> |
| |
| <!doctype html> |
| <html> |
| <head> |
| <script src="renderer.js"></script> |
| <script src="../transcoder/build/basis_transcoder.js"></script> |
| <script type="text/javascript"> |
| function log(s) { |
| var div = document.createElement('div'); |
| div.innerHTML = s; |
| document.getElementById('logger').appendChild(div); |
| } |
| |
| function logTime(desc, t) { |
| log(t + 'ms ' + desc); |
| } |
| |
| function isDef(v) { |
| return typeof v != 'undefined'; |
| } |
| |
| function elem(id) { |
| return document.getElementById(id); |
| } |
| |
| 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; |
| |
| // 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; |
| var etcSupported = false; |
| var dxtSupported = false; |
| var bc7Supported = false; |
| var bc6hSupported = false; |
| var astcHDRSupported = false; |
| var rgbaHalfSupported = false; |
| var halfFloatWebGLFormat = 0; |
| var pvrtcSupported = false; |
| |
| var drawMode = 0; |
| var drawScale = 1.0; |
| var linearToSRGBFlag = false; |
| |
| var tex, width, height, images, levels, has_alpha, is_hdr, basisTexFormat; |
| var alignedWidth, alignedHeight, format, displayWidth, displayHeight; |
| |
| function redraw() { |
| if (!width) |
| return; |
| |
| renderer.drawTexture(tex, displayWidth, displayHeight, drawMode, drawScale, linearToSRGBFlag); |
| } |
| |
| function dumpBasisFileDesc(basisFile) { |
| var basisFileDesc = basisFile.getFileDesc(); |
| |
| log('------'); |
| log('getFileDesc():'); |
| log('version: ' + basisFileDesc.version); |
| log('us per frame: ' + basisFileDesc.usPerFrame); |
| log('total images: ' + basisFileDesc.totalImages); |
| log('userdata0: ' + basisFileDesc.userdata0 + ' userdata1: ' + basisFileDesc.userdata1); |
| log('texFormat: ' + basisFileDesc.texFormat); |
| log('yFlipped: ' + basisFileDesc.yFlipped + ' hasAlphaSlices: ' + basisFileDesc.hasAlphaSlices); |
| |
| if (basisFileDesc.texFormat == Module.basis_tex_format.cETC1S.value) { |
| log('numEndpoints: ' + basisFileDesc.numEndpoints); |
| log('endpointPaletteOfs: ' + basisFileDesc.endpointPaletteOfs); |
| log('endpointPaletteLen: ' + basisFileDesc.endpointPaletteLen); |
| log('numSelectors: ' + basisFileDesc.numSelectors); |
| log('selectorPaletteOfs: ' + basisFileDesc.selectorPaletteOfs); |
| log('selectorPaletteLen: ' + basisFileDesc.selectorPaletteLen); |
| log('tablesOfs: ' + basisFileDesc.tablesOfs); |
| log('tablesLen: ' + basisFileDesc.tablesLen); |
| } |
| log('------'); |
| log('getImageDesc() for all images:'); |
| var image_index; |
| for (image_index = 0; image_index < basisFileDesc.totalImages; image_index++) { |
| log('image: ' + image_index); |
| |
| var basisImageDesc = basisFile.getImageDesc(image_index); |
| |
| log('origWidth: ' + basisImageDesc.origWidth + ' origWidth: ' + basisImageDesc.origHeight); |
| log('numBlocksX: ' + basisImageDesc.numBlocksX + ' origWidth: ' + basisImageDesc.numBlocksY); |
| log('numLevels: ' + basisImageDesc.numLevels); |
| log('alphaFlag: ' + basisImageDesc.alphaFlag + ' iframeFlag: ' + basisImageDesc.iframeFlag); |
| |
| log('getImageLevelDesc() for all mipmap levels:'); |
| var level_index; |
| for (level_index = 0; level_index < basisImageDesc.numLevels; level_index++) { |
| var basisImageLevelDesc = basisFile.getImageLevelDesc(image_index, level_index); |
| |
| log('level: ' + level_index + |
| ' rgb_file_offset: ' + basisImageLevelDesc.rgbFileOfs + ' rgb_file_len: ' + basisImageLevelDesc.rgbFileLen); |
| |
| if (basisFileDesc.hasAlphaSlices) |
| log('alpha_file_offset: ' + basisImageLevelDesc.alphaFileOfs + ' alpha_file_len: ' + basisImageLevelDesc.alphaFileLen); |
| } |
| } |
| |
| log('------'); |
| } |
| |
| function dataLoaded(data) { |
| log('Done loading .basis file, decoded header:'); |
| |
| const { BasisFile, initializeBasis } = Module; |
| |
| drawMode = 0; |
| drawScale = 1.0; |
| linearToSRGBFlag = false; |
| elem('scale-slider').value = 1.0; |
| elem('scale-value').textContent = 1; |
| |
| 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(); |
| is_hdr = basisFile.isHDR(); |
| basisTexFormat = basisFile.getBasisTexFormat(); |
| |
| var srcBlockWidth = basisFile.getBlockWidth(); |
| var srcBlockHeight = basisFile.getBlockHeight(); |
| |
| var dstBlockWidth = 4; |
| var dstBlockHeight = 4; |
| |
| log('isHDR: ' + is_hdr); |
| |
| dumpBasisFileDesc(basisFile); |
| |
| if (!width || !height || !images || !levels) { |
| console.warn('Invalid .basis file'); |
| basisFile.close(); |
| basisFile.delete(); |
| return; |
| } |
| |
| // Note: If the file is UASTC LDR, the preferred formats are ASTC/BC7. For UASTC HDR, ASTC/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 (astcHDRSupported) |
| { |
| if (basisTexFormat == Module.basis_tex_format.cUASTC_HDR_4x4.value) |
| { |
| formatString = 'UASTC 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 (bc6hSupported) { |
| formatString = 'BC6H'; |
| format = BASIS_FORMAT.cTFBC6H; |
| } |
| else if (rgbaHalfSupported) { |
| formatString = 'RGBA_HALF'; |
| format = BASIS_FORMAT.cTFRGBA_HALF; |
| } |
| else { |
| formatString = '32-bit RGBA'; |
| format = BASIS_FORMAT.cTFRGBA_HALF; |
| |
| log('Decoding .basis data to 32-bit RGBA'); |
| } |
| } |
| else if (astcSupported) { |
| formatString = 'ASTC'; |
| format = BASIS_FORMAT.cTFASTC_4x4; |
| } |
| else if (bc7Supported) { |
| formatString = 'BC7'; |
| format = BASIS_FORMAT.cTFBC7; |
| } |
| else if (dxtSupported) { |
| if (has_alpha) { |
| formatString = 'BC3'; |
| format = BASIS_FORMAT.cTFBC3; |
| } |
| else { |
| formatString = 'BC1'; |
| format = BASIS_FORMAT.cTFBC1; |
| } |
| } |
| else if (pvrtcSupported) { |
| if (has_alpha) { |
| formatString = 'PVRTC1_RGBA'; |
| format = BASIS_FORMAT.cTFPVRTC1_4_RGBA; |
| } |
| else { |
| formatString = 'PVRTC1_RGB'; |
| format = BASIS_FORMAT.cTFPVRTC1_4_RGB; |
| } |
| |
| if ( |
| ((width & (width - 1)) != 0) || ((height & (height - 1)) != 0) |
| ) { |
| log('ERROR: PVRTC1 requires square power of 2 textures'); |
| } |
| if (width != height) { |
| log('ERROR: PVRTC1 requires square power of 2 textures'); |
| } |
| } |
| else if (etcSupported) { |
| formatString = 'ETC1'; |
| format = BASIS_FORMAT.cTFETC1; |
| } |
| else { |
| formatString = 'RGB565'; |
| format = BASIS_FORMAT.cTFRGB565; |
| log('Decoding .basis data to 565'); |
| } |
| |
| elem('format').innerText = formatString; |
| |
| log('format: ' + format); |
| |
| if (!basisFile.startTranscoding()) { |
| log('startTranscoding failed'); |
| console.warn('startTranscoding failed'); |
| basisFile.close(); |
| basisFile.delete(); |
| return; |
| } |
| |
| const isUncompressedFormat = Module.formatIsUncompressed(format); |
| |
| const bytesPerBlockOrPixel = Module.getBytesPerBlockOrPixel(format); |
| log('isUncompressedFormat: ' + isUncompressedFormat + ' bytesPerBlockOrPixel: ' + bytesPerBlockOrPixel); |
| |
| const dstSize = basisFile.getImageTranscodedSizeInBytes(0, 0, format); |
| const dst = new Uint8Array(dstSize); |
| |
| // log('getImageTranscodedSizeInBytes() returned ' + dstSize); |
| |
| // Use the low or high level transcoding API's. The high level API's require .basis files, while the low-level API's just work off blobs of memory and parameters. |
| if (elem('ContainerIndependentTranscoding').checked) { |
| // Always transcode the first image and the first mipmap level |
| const image_index = 0; |
| const level_index = 0; |
| |
| // Get the .basis file description |
| var basisFileDesc = basisFile.getFileDesc(); |
| |
| // Get the description of the file's first image (there could be multiple images, for texture arrays or videos) |
| var basisImageDesc = basisFile.getImageDesc(image_index); |
| |
| // Get the description of this image's mipmap level |
| var basisImageLevelDesc = basisFile.getImageLevelDesc(image_index, level_index); |
| |
| var status = false; |
| |
| // If we're transcoding to ETC1S, use the LowLevelETC1SImageTranscoder class. Otherwise use the transcodeUASTCImage() function. |
| if (basisFileDesc.texFormat == Module.basis_tex_format.cETC1S.value) { |
| // Create an instance of the LowLevelETC1SImageTranscoder class. |
| const etc1s_transcoder = new Module.LowLevelETC1SImageTranscoder(); |
| |
| // Create Uint8Array's pointing into the various bits of the .basis file holding the compressed data for the codebooks and the Huffman tables. |
| var selectorPalette = new Uint8Array(data, basisFileDesc.selectorPaletteOfs, basisFileDesc.selectorPaletteLen); |
| var endpointPalette = new Uint8Array(data, basisFileDesc.endpointPaletteOfs, basisFileDesc.endpointPaletteLen); |
| var tables = new Uint8Array(data, basisFileDesc.tablesOfs, basisFileDesc.tablesLen); |
| |
| // Create a Uint8Array pointing to the image's compressed data. |
| // If it's an opaque .basis file, there will only be RGB data. For transparant .basis files, each RGB slice will be immediately followed by an alpha slice. |
| // Compressed ETC1S alpha data is guaranteed to immediately follow the RGB data (it's always at odd slices in the .basis file). |
| var compData = new Uint8Array(data, basisImageLevelDesc.rgbFileOfs, basisImageLevelDesc.rgbFileLen + basisImageLevelDesc.alphaFileLen); |
| |
| // Decompress the palettes. This only has to be done once for each .basis file. |
| var status = etc1s_transcoder.decodePalettes(basisFileDesc.numEndpoints, endpointPalette, basisFileDesc.numSelectors, selectorPalette); |
| if (status) { |
| // Decompress the Huffman tables. This only has to be done once for each .basis file. |
| status = etc1s_transcoder.decodeTables(tables); |
| if (status) { |
| // Now transcode the image using the container independent transcode API. This API does not interpret any .basis file structures - only the compressed ETC1S data. |
| status = etc1s_transcoder.transcodeImage( |
| format, |
| dst, dstSize / bytesPerBlockOrPixel, |
| compData, |
| basisImageDesc.numBlocksX, basisImageDesc.numBlocksY, basisImageDesc.origWidth, basisImageDesc.origHeight, level_index, |
| 0, basisImageLevelDesc.rgbFileLen, basisFileDesc.hasAlphaSlices ? basisImageLevelDesc.rgbFileLen : 0, basisImageLevelDesc.alphaFileLen, |
| 0, |
| basisFileDesc.hasAlphaSlices, |
| basisFileDesc.isVideo, |
| 0, |
| 0); |
| |
| if (!status) |
| log('transcodeImage() failed'); |
| } |
| else { |
| log('decodeTables() failed'); |
| } |
| } |
| else { |
| log('decodePalettes() failed'); |
| } |
| |
| etc1s_transcoder.delete(); |
| |
| if (!status) { |
| log('etc1s_transcoder failed'); |
| console.warn('etc1s_transcoder failed'); |
| basisFile.close(); |
| basisFile.delete(); |
| return; |
| } |
| else { |
| log('Successfully called etc1s_transcoder.transcodeImage()'); |
| } |
| } |
| else { |
| // Create a Uint8Array pointing to the image's compressed data. |
| var compData = new Uint8Array(data, basisImageLevelDesc.rgbFileOfs, basisImageLevelDesc.rgbFileLen); |
| |
| // Transcode the UASTC texture data to the desired output format. |
| status = Module.transcodeUASTCImage( |
| basisTexFormat, |
| format, |
| dst, dstSize / bytesPerBlockOrPixel, |
| compData, |
| basisImageDesc.numBlocksX, basisImageDesc.numBlocksY, basisImageDesc.origWidth, basisImageDesc.origHeight, level_index, |
| 0, basisImageLevelDesc.rgbFileLen, |
| 0, |
| basisFileDesc.hasAlphaSlices, |
| basisFileDesc.isVideo, |
| 0, |
| 0, |
| -1, -1); |
| |
| if (!status) { |
| log('transcodeUASTCImage() failed'); |
| console.warn('transcodeUASTCImage() failed'); |
| basisFile.close(); |
| basisFile.delete(); |
| return; |
| } |
| else { |
| log('Successfully called transcodeUASTCImage()'); |
| } |
| } |
| } |
| else { |
| // Use the high-level transcode API, which requires a .basis file. |
| if (!basisFile.transcodeImage(dst, 0, 0, format, 0, 0)) { |
| log('basisFile.transcodeImage failed'); |
| console.warn('transcodeImage failed'); |
| basisFile.close(); |
| basisFile.delete(); |
| |
| return; |
| } |
| } |
| |
| const elapsed = performance.now() - startTime; |
| |
| basisFile.close(); |
| basisFile.delete(); |
| |
| log('width: ' + width); |
| log('height: ' + height); |
| log('images: ' + images); |
| log('first image mipmap levels: ' + levels); |
| log('has_alpha: ' + has_alpha); |
| logTime('transcoding time', elapsed.toFixed(2)); |
| |
| alignedWidth = 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; |
| |
| // 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) { |
| canvas.width = width; |
| canvas.height = height; |
| displayWidth = width; |
| displayHeight = height; |
| |
| if (rgbaHalfSupported) { |
| 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); |
| |
| dstRGBA[dstOfs] = Math.min(255, Math.max(0, Math.round(f * 255.0))); |
| |
| srcOfs += 2; |
| dstOfs++; |
| } |
| } |
| } |
| |
| tex = renderer.createRgbaTexture(dstRGBA, width, height); |
| } |
| } |
| 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); |
| } |
| |
| // Now draw a quad with the texture. |
| redraw(); |
| } |
| |
| function runLoadFile() { |
| elem('logger').innerHTML = ''; |
| loadArrayBuffer(elem('file').value, dataLoaded); |
| } |
| |
| function alphaBlend() { drawMode = 0; redraw(); } |
| function viewRGB() { drawMode = 1; redraw(); } |
| function viewAlpha() { drawMode = 2; redraw(); } |
| function linearToSRGB() { linearToSRGBFlag = !linearToSRGBFlag; redraw(); } |
| |
| function updateScale(value) { |
| document.getElementById('scale-value').textContent = value; |
| drawScale = value; |
| redraw(); |
| } |
| |
| 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 |
| //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); |
| } |
| |
| </script> |
| </head> |
| <body> |
| <br> |
| <div style="font-size: 24pt; font-weight: bold"> |
| .basis->GPU Compressed Texture Transcoder Test |
| </div> |
| |
| <br>This demo uses the Basis Universal C++ transcoder (compiled to WebAssembly 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. <a href="../index.html">Go back.</a> |
| <br> |
| <br> |
| .basis file: |
| <input id="file" type="text" size=30 value="assets/desk.basis"></input> |
| <input type="button" value="Run!" onclick="runLoadFile()"></input> |
| <br> |
| <br> |
| <input type="button" value="Alpha blend" onclick="alphaBlend()"></input> |
| <input type="button" value="View RGB" onclick="viewRGB()"></input> |
| <input type="button" value="View Alpha" onclick="viewAlpha()"></input> |
| <input type="button" value="LinearToSRGB" onclick="linearToSRGB()"></input> |
| |
| <br> |
| |
| <label for="scale-slider">Scale:</label> |
| <input type="range" id="scale-slider" min="0" max="16" step=".05" value="1" style="width: 300px;" oninput="updateScale(this.value)"> |
| <span id="scale-value">1</span> |
| |
| <br> |
| <br> |
| Use Container Independent Transcoding API's: |
| <input type="checkbox" id="ContainerIndependentTranscoding"> |
| |
| <div style="position:absolute; left: 525px; top:130px; font-size: 20pt; font-weight: bold; color: red"> |
| <canvas id='canvas'></canvas> |
| </div> |
| |
| <br><br> |
| <div id='logger'></div> |
| </body> |
| <script> |
| BASIS({ |
| onRuntimeInitialized: () => { |
| 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); |
| |
| runLoadFile(); |
| } |
| }).then(module => window.Module = module); |
| </script> |
| </html> |
