A PNG is compressed on disk but expands to 4 bytes per texel in video memory. KTX2 is Khronos's container for GPU texture data (all mip levels and layers, in any format), and Basis Universal 3,114 is a supercompressed format stored inside it (ETC1S for small files, UASTC for quality) that a WebAssembly transcoder turns into whatever block format the GPU supports, at load time and without a full decode. The tools, not run here:
| Project | Latest release | Licence | Role |
|---|---|---|---|
| KTX-Software 1,367 (https://github.com/KhronosGroup/KTX-Software 1,367 ) | v4.4.2 (Oct 2025); v5.0.0-rc2 | Apache-2.0 | ktx create encoder, libktx, JS binding |
| basis_universal (https://github.com/BinomialLLC/basis_universal 3,114 ) | v2.50 (Aug 2026) | Apache-2.0 | basisu encoder, transcoder |
| Three.js 30,815 KTX2Loader | r186 | MIT | Transcodes in a worker (Three.js) |
The transcode target follows the device's features, which is why Compressed Formats checked texture-compression-bc. Three.js r186's KTX2Loader.detectSupport() asks a WebGPURenderer for texture-compression-astc, -etc2 and -bc, and ranks the targets: UASTC goes to ASTC 4 x 4 first, then BC7; ETC1S goes to ETC2 first, then BC7. On this GTX 1650, which has only the BC family, both would become bc7-rgba-unorm: 8 bits per texel instead of 32, and a small download. Raw WebGPU code does the same with the transcoder directly: create the texture in the chosen block format and writeTexture() each transcoded level, with bytesPerRow counted in blocks.
<!doctype html>
<style>
body { margin: 0; background: #f7f4ee; font: 14px system-ui, sans-serif; }
.stage { position: relative; width: 100%; max-width: 600px; }
.stage canvas { display: block; width: 100%; }
.stage canvas + canvas { position: absolute; inset: 0; pointer-events: none; }
</style>
<div class="stage">
<canvas id="view" width="600" height="360"></canvas>
<canvas id="labels" width="600" height="360"></canvas>
</div>
<script>
const canvas = document.getElementById('view');
const ink = document.getElementById('labels').getContext('2d');
function showMessage(text) { // 2D fallback when WebGPU is missing
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#fbeaea'; ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#8a2b2b'; ctx.font = '18px system-ui, sans-serif'; ctx.textAlign = 'center';
ctx.fillText(text, canvas.width / 2, canvas.height / 2);
}
function label(text, x, y, size = 12, color = '#2b2b2b', align = 'center', weight = '') {
ink.font = `${weight} ${size}px system-ui, sans-serif`; ink.fillStyle = color; ink.textAlign = align; ink.fillText(text, x, y);
}
// Three.js r186's KTX2Loader ranking: UASTC -> ASTC 4x4, then BC7; ETC1S -> ETC2, then BC7.
function pick(features, order) {
for (const [feature, target] of order) if (features.has(feature)) return target;
return 'rgba8unorm (full decode)';
}
async function main() {
const adapter = await navigator.gpu?.requestAdapter();
if (!adapter) return showMessage('WebGPU is not available in this browser');
const device = await adapter.requestDevice();
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format });
const f = adapter.features;
const uastc = pick(f, [['texture-compression-astc', 'astc-4x4-unorm'], ['texture-compression-bc', 'bc7-rgba-unorm']]);
const etc1s = pick(f, [['texture-compression-etc2', 'etc2-rgba8unorm'], ['texture-compression-bc', 'bc7-rgba-unorm']]);
const boxes = [];
const box = (x, y, w, h, c, r = 9) => boxes.push([x, y, w, h, ...c, r]);
const line = (x, y, w, h, c = [0.45, 0.45, 0.45]) => boxes.push([x, y, w, h, ...c, 1]);
box(12, 60, 150, 140, [0.98, 0.93, 0.80]);
box(24, 100, 126, 38, [1, 1, 1]); box(24, 148, 126, 38, [1, 1, 1]);
label('KTX2 container', 87, 80, 13, '#222', 'center', 'bold'); label('all levels and layers', 87, 94, 10.5, '#555');
label('ETC1S: small files', 87, 123, 11.5); label('UASTC: quality', 87, 171, 11.5);
box(206, 92, 150, 76, [0.88, 0.92, 0.99]);
label('Basis transcoder', 281, 120, 13, '#1f4f8a', 'center', 'bold'); label('WebAssembly, in a worker', 281, 138, 10.5, '#444');
label('no full decode', 281, 154, 10.5, '#444');
line(162, 119, 44, 2); line(162, 167, 44, 2);
const targets = ['astc-4x4-unorm', 'bc7-rgba-unorm', 'etc2-rgba8unorm', 'rgba8unorm (full decode)'];
const featureOf = { 'astc-4x4-unorm': 'texture-compression-astc', 'bc7-rgba-unorm': 'texture-compression-bc', 'etc2-rgba8unorm': 'texture-compression-etc2' };
targets.forEach((t, i) => {
const y = 50 + i * 44, chosen = t === uastc || t === etc1s, has = !featureOf[t] || f.has(featureOf[t]);
box(400, y, 188, 36, chosen ? [0.16, 0.56, 0.30] : has ? [1, 1, 1] : [0.90, 0.89, 0.87]);
line(356, 129, 22, 2); line(376, Math.min(129, y + 17), 2, Math.abs(y + 17 - 129) + 2); line(376, y + 17, 24, 2);
label(t, 494, y + 16, 11.5, chosen ? '#fff' : has ? '#222' : '#999', 'center', chosen ? 'bold' : '');
const tags = [t === uastc ? 'UASTC' : '', t === etc1s ? 'ETC1S' : ''].filter(Boolean).join(' + ');
label(chosen ? `chosen for ${tags}` : has ? 'available' : 'not on this GPU', 494, y + 30, 9.5, chosen ? '#dff5e3' : '#777');
});
label('The target follows device features', 494, 36, 11, '#555');
// Video memory per texel: a PNG always expands to 4 bytes; block formats stay compressed.
label('Video memory per texel', 12, 238, 12.5, '#222', 'left', 'bold');
[['PNG / rgba8unorm', 32, [0.75, 0.30, 0.25]], ['BC7, ASTC 4x4, ETC2 RGBA', 8, [0.16, 0.56, 0.30]]].forEach(([name, bits, c], i) => {
box(190, 250 + i * 28, bits * 11, 20, c, 4);
label(`${name}`, 182, 265 + i * 28, 11.5, '#333', 'right');
label(`${bits} bits`, 196 + bits * 11, 265 + i * 28, 11, '#333', 'left');
});
label('Tools: KTX-Software v4.4.2 (ktx create, libktx), basis_universal v2.50, Three.js KTX2Loader r186', 12, 324, 11, '#444', 'left');
label(`This adapter: astc ${f.has('texture-compression-astc') ? 'yes' : 'no'}, bc ${f.has('texture-compression-bc') ? 'yes' : 'no'}, etc2 ${f.has('texture-compression-etc2') ? 'yes' : 'no'}`, 12, 344, 11.5, '#1f4f8a', 'left');
const module = device.createShaderModule({ code: `
struct Box { rect: vec4f, style: vec4f } // style: r, g, b, corner radius
@group(0) @binding(0) var<storage> boxes: array<Box>;
struct Out { @builtin(position) pos: vec4f, @location(0) local: vec2f,
@location(1) @interpolate(flat) i: u32 }
@vertex fn vs(@builtin(vertex_index) v: u32, @builtin(instance_index) i: u32) -> Out {
let corner = vec2f(f32(v & 1), f32(v >> 1)); // triangle-strip corners
let r = boxes[i].rect;
let px = r.xy + corner * r.zw;
return Out(vec4f(px.x / 300 - 1, 1 - px.y / 180, 0, 1), corner * r.zw, i);
}
@fragment fn fs(in: Out) -> @location(0) vec4f {
let b = boxes[in.i];
let half = b.rect.zw / 2;
let q = abs(in.local - half) - half + b.style.w; // signed distance to a rounded box
let d = length(max(q, vec2f(0))) + min(max(q.x, q.y), 0) - b.style.w;
let a = clamp(0.5 - d, 0, 1);
return vec4f(b.style.rgb * a, a); // premultiplied alpha
}` });
const blend = { srcFactor: 'one', dstFactor: 'one-minus-src-alpha' };
const pipeline = device.createRenderPipeline({ layout: 'auto',
vertex: { module }, primitive: { topology: 'triangle-strip' },
fragment: { module, targets: [{ format, blend: { color: blend, alpha: blend } }] } });
const data = new Float32Array(boxes.flat());
const buffer = device.createBuffer({ size: data.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
device.queue.writeBuffer(buffer, 0, data);
const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass({ colorAttachments: [{ view: context.getCurrentTexture().createView(),
clearValue: [0.97, 0.96, 0.93, 1], loadOp: 'clear', storeOp: 'store' }] });
pass.setPipeline(pipeline);
pass.setBindGroup(0, device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [{ binding: 0, resource: { buffer } }] }));
pass.draw(4, boxes.length);
pass.end();
device.queue.submit([encoder.finish()]);
}
main();
</script>