Skip to content

README.md

Latest commit

 

History

History
137 lines (103 loc) · 3.87 KB

README.md

File metadata and controls

137 lines (103 loc) · 3.87 KB

Vite CDN Example

This example demonstrates how to use texture2ddecoder-wasm with Vite, loading the library from jsDelivr CDN.

Features

  • ⚡ Vite: Lightning-fast development with HMR
  • 📦 CDN Loading: WASM files loaded from jsDelivr CDN
  • 🎨 Interactive Demo: Decode and display real ETC2 RGBA texture
  • 🚀 Zero Config: Minimal setup required
  • 📱 Modern Build: Optimized production builds

Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

How It Works

This example uses Vite as the development server and build tool, while loading the texture2ddecoder-wasm library and WASM files directly from jsDelivr CDN.

Main Features

  1. CDN Import: Library loaded from jsDelivr in src/main.js
  2. Real Texture Decoding: Includes output.bin - a 512x512 ETC2 RGBA compressed PNG
  3. Canvas Display: Decoded images displayed in HTML canvas
  4. Multiple Formats: Test BC1, BC3, ETC1, ASTC decoders

Project Structure

vite-cdn-example/
├── index.html                              # Main HTML file
├── vite.config.js                          # Vite configuration
├── package.json                            # Dependencies
├── public/
│   └── compressed_etc2_rgba_400x400.bin   # ETC2 RGBA compressed texture (400x400 PNG)
└── src/
    ├── main.js                             # Application logic
    └── style.css                           # Styles

Usage Example

// Import from CDN
import {
  initialize,
  decode_etc2a8,
} from "https://cdn.jsdelivr.net/npm/texture2ddecoder-wasm@1.2.1/dist/index.mjs";

// Initialize with CDN path
await initialize({
  wasmPath: "https://cdn.jsdelivr.net/npm/texture2ddecoder-wasm@1.2.1/wasm",
});

// Load and decode texture
const response = await fetch("/compressed_etc2_rgba_400x400.bin");
const data = new Uint8Array(await response.arrayBuffer());
const decoded = await decode_etc2a8(data, 400, 400);

// Display on canvas
const imageData = ctx.createImageData(400, 400);
// Convert BGRA to RGBA for canvas
for (let i = 0; i < decoded.length; i += 4) {
  imageData.data[i] = decoded[i + 2];     // R from B
  imageData.data[i + 1] = decoded[i + 1]; // G
  imageData.data[i + 2] = decoded[i];     // B from R
  imageData.data[i + 3] = decoded[i + 3]; // A
}
ctx.putImageData(imageData, 0, 0);

Benefits of This Approach

Development

  • ⚡ Instant hot module replacement (HMR)
  • 🔍 Better error messages and debugging
  • 🎯 Modern ES modules support
  • 📦 No WASM file copying needed

Production

  • 🚀 Optimized builds with code splitting
  • 📉 Smaller bundle sizes (WASM loaded from CDN)
  • 🌐 Global CDN caching
  • 🔒 Version pinning for stability

CDN vs Local WASM Files

This example uses CDN for both development and production:

CDN Benefits:

  • ✅ No manual file copying
  • ✅ Globally cached by jsDelivr
  • ✅ Faster setup
  • ✅ Automatic updates (or pin to specific version)

When to Use Local Files:

  • Offline development
  • Corporate firewalls
  • Guaranteed availability
  • Custom WASM builds

Included Texture File

The public/compressed_etc2_rgba_400x400.bin file is a real 400x400 PNG image compressed as ETC2 RGBA format:

  • Original: PNG image (400x400)
  • Compressed: ETC2 RGBA (8-bit alpha)
  • Size: ~160KB compressed → 640KB uncompressed (BGRA)

Available Scripts

  • npm run dev - Start Vite development server (http://localhost:3000)
  • npm run build - Build for production
  • npm run preview - Preview production build locally

Requirements

  • Node.js >= 14.0.0
  • Modern browser with WebAssembly support

Next Steps

  • See main README for API documentation
  • Check other examples for different frameworks
  • Try modifying src/main.js to decode different formats