ASTC Encoder WASM

WebAssembly port of the ARM ASTC Encoder for browser-based texture compression and decompression.

Features

• ✅ Compress RGBA images to ASTC format
• ✅ Decompress ASTC textures to RGBA
• ✅ 24 block sizes - 14 2D formats + 10 3D formats
• ✅ 6 quality presets - from fastest to exhaustive
• ✅ Full TypeScript support with type definitions
• ✅ Zero dependencies
• ✅ Works in browser and Node.js

Installation

npm install astc-encoder-wasm

or

yarn add astc-encoder-wasm

Quick Start

Browser (ES Module)

import createASTCModule from 'astc-encoder-wasm';

const module = await createASTCModule();
console.log(module.getVersion());

// Compress an image
const result = module.compressImage(
  imageData.data,  // Uint8ClampedArray (RGBA)
  width,
  height,
  '6x6',          // Block size
  'medium'        // Quality preset
);

if (result.success) {
  console.log('Compressed size:', result.size);
}

Browser (Script Tag)

<script src="node_modules/astc-encoder-wasm/dist/astcenc.js"></script>
<script>
  createASTCModule().then(module => {
    console.log(module.getVersion());
  });
</script>

Node.js

const createASTCModule = require('astc-encoder-wasm');

(async () => {
  const module = await createASTCModule();
  // Use module...
})();

API Reference

compressImage(imageData, width, height, blockSize, quality)

Compress an RGBA image to ASTC format.

Parameters:

• imageData: Uint8Array | Uint8ClampedArray - RGBA image data
• width: number - Image width in pixels
• height: number - Image height in pixels
• blockSize: BlockSize - Block size (e.g., "6x6", "4x4x4")
• quality: QualityPreset - Quality preset

Returns: CompressResult

{
  success: boolean;
  data?: Uint8Array;      // Compressed data
  size?: number;          // Size in bytes
  error?: string;         // Error message if failed
}

decompressImage(astcData, width, height, blockSize)

Decompress ASTC data to RGBA image.

Parameters:

• astcData: Uint8Array - Compressed ASTC data
• width: number - Image width
• height: number - Image height
• blockSize: BlockSize - Block size

Returns: DecompressResult

{
  success: boolean;
  data?: Uint8Array;      // RGBA image data
  width?: number;
  height?: number;
  error?: string;
}

getCompressedSize(width, height, blockSize)

Calculate expected compressed data size.

Returns: number - Size in bytes

getVersion()

Get version information.

Returns: string - Version string

Block Sizes

2D Formats (14 types)

| Block Size | Bits per Pixel | Compression | |------------|----------------|-------------| | 4x4 | 8.00 bpp | 4:1 | | 5x4 | 6.40 bpp | 5:1 | | 5x5 | 5.12 bpp | 6.25:1 | | 6x5 | 4.27 bpp | 7.5:1 | | 6x6 | 3.56 bpp | 9:1 ⭐ | | 8x5 | 3.20 bpp | 10:1 | | 8x6 | 2.67 bpp | 12:1 | | 8x8 | 2.00 bpp | 16:1 | | 10x5 | 2.56 bpp | 12.5:1 | | 10x6 | 2.13 bpp | 15:1 | | 10x8 | 1.60 bpp | 20:1 | | 10x10 | 1.28 bpp | 25:1 | | 12x10 | 1.07 bpp | 30:1 | | 12x12 | 0.89 bpp | 36:1 |

3D Formats (10 types)

3x3x3, 4x3x3, 4x4x3, 4x4x4, 5x4x4, 5x5x4, 5x5x5, 6x5x5, 6x6x5, 6x6x6

Quality Presets

| Preset | Speed | Quality | Use Case | |----------------|-------|---------|-------------------| | fastest | ⚡⚡⚡⚡⚡ | ⭐ | Real-time preview | | fast | ⚡⚡⚡⚡ | ⭐⭐ | Quick compression | | medium | ⚡⚡⚡ | ⭐⭐⭐ | Recommended ⭐ | | thorough | ⚡⚡ | ⭐⭐⭐⭐ | High quality | | verythorough | ⚡ | ⭐⭐⭐⭐⭐| Very high quality | | exhaustive | 🐌 | ⭐⭐⭐⭐⭐| Maximum quality |

TypeScript Support

Full TypeScript definitions included:

import createASTCModule, {
  ASTCModule,
  BlockSize,
  QualityPreset,
  CompressResult,
  DecompressResult
} from 'astc-encoder-wasm';

const module: ASTCModule = await createASTCModule();
const blockSize: BlockSize = '6x6';
const quality: QualityPreset = 'medium';

Examples

Compress Canvas Image

const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

const module = await createASTCModule();
const result = module.compressImage(
  imageData.data,
  canvas.width,
  canvas.height,
  '6x6',
  'medium'
);

if (result.success) {
  console.log('Original:', imageData.data.length, 'bytes');
  console.log('Compressed:', result.size, 'bytes');
  console.log('Ratio:', (result.size! / imageData.data.length * 100).toFixed(2) + '%');
}

Decompress and Display

const result = module.decompressImage(compressedData, width, height, '6x6');

if (result.success) {
  const canvas = document.createElement('canvas');
  canvas.width = result.width!;
  canvas.height = result.height!;

  const ctx = canvas.getContext('2d')!;
  const imageData = new ImageData(
    new Uint8ClampedArray(result.data!),
    result.width!,
    result.height!
  );

  ctx.putImageData(imageData, 0, 0);
  document.body.appendChild(canvas);
}

Export ASTC File

function exportASTCFile(compressedData: Uint8Array, width: number, height: number, blockSize: string) {
  // Create ASTC file header (16 bytes)
  const header = new Uint8Array(16);
  header[0] = 0x13; header[1] = 0xAB; header[2] = 0xA1; header[3] = 0x5C; // Magic

  const [blockX, blockY, blockZ = 1] = blockSize.split('x').map(Number);
  header[4] = blockX; header[5] = blockY; header[6] = blockZ;

  // Width (3 bytes, little-endian)
  header[7] = width & 0xFF;
  header[8] = (width >> 8) & 0xFF;
  header[9] = (width >> 16) & 0xFF;

  // Height (3 bytes, little-endian)
  header[10] = height & 0xFF;
  header[11] = (height >> 8) & 0xFF;
  header[12] = (height >> 16) & 0xFF;

  header[13] = 1; header[14] = 0; header[15] = 0; // Depth

  // Combine header and data
  const astcFile = new Uint8Array(header.length + compressedData.length);
  astcFile.set(header, 0);
  astcFile.set(compressedData, header.length);

  // Download
  const blob = new Blob([astcFile], { type: 'application/octet-stream' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `texture_${width}x${height}_${blockSize}.astc`;
  a.click();
  URL.revokeObjectURL(url);
}

Browser Compatibility

• Chrome 90+
• Firefox 88+
• Safari 15+
• Edge 90+

Requires WebAssembly support.

Performance

Typical compression times for a 2048×2048 image with 6×6 blocks and medium quality:

• Desktop: 500-1500ms
• Mobile: 2000-5000ms

💡 Tip: For large images or real-time compression, consider using Web Workers to avoid blocking the main thread.

Limitations

• Single-threaded - Compression blocks the main thread
• Memory - Large images may cause out-of-memory errors
• Format - Only LDR sRGB profile (no HDR)
• 2D focus - 3D formats supported but primarily for export

License

Apache 2.0

Based on ARM ASTC Encoder

Links

• GitHub Repository
• ASTC Specification
• ARM ASTC Encoder