abdelrahman/how-to-vulkan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add ktx

Browse Source
This commit is contained in:
Abdelrahman Said
2026-06-14 19:09:18 +01:00
parent 14bd1a9271
commit 13fa90a0e9
3958 changed files with 999286 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ktx/external/basisu/webgl/encode_test/index.html
Vendored
+595
View File
@@ -0,0 +1,595 @@
<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);
const startTime = performance.now();
num_output_bytes = basisEncoder.encode(basisFileData);
const elapsed = performance.now() - startTime;
logTime('encoding time', elapsed.toFixed(2));
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>