@pixagram/renderart 0.2.2 → 0.3.0

package/pkg/README.md

@@ -0,0 +1,223 @@
+# @pixagram/renderart
+
+High-performance pixel art rendering engines with GPU (WebGL2) and CPU (WASM) support.
+
+## Features
+
+- **CRT Effect** (2-32x) - Classic CRT display simulation with barrel distortion, scanlines, and shadow mask
+- **HEX Upscaling** (2-32x) - Transform pixel art into hexagonal grid representations
+- **XBRZ Scaling** (2-6x) - Edge-preserving pixel art scaling algorithm
+
+All engines support:
+- ⚡ **GPU acceleration** via WebGL2 (CRT, HEX)
+- 🦀 **CPU fallback** via Rust/WASM (all engines)
+- 🎨 **Customizable presets** and fine-grained options
+- 🔄 **Auto-initialization** - WASM loads automatically on first use
+
+## Installation
+
+```bash
+npm install @pixagram/renderart
+```
+
+## ⚠️ Building from Source (Required)
+
+The package includes placeholder WASM. You **must** build the actual WASM module:
+
+```bash
+# Prerequisites: Rust + wasm-pack
+# Install wasm-pack: https://rustwasm.github.io/wasm-pack/installer/
+
+cd node_modules/@pixagram/renderart
+npm run build:wasm
+```
+
+Or build everything:
+```bash
+npm run build
+```
+
+## Quick Start
+
+```typescript
+import { RenderArt } from '@pixagram/renderart';
+
+// Create renderer (auto-initializes WASM)
+const renderer = await RenderArt.create();
+
+// Get your image data
+const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+// Apply CRT effect
+const crtResult = await renderer.crt.render(imageData, { scale: 3 });
+
+// Apply HEX effect
+const hexResult = await renderer.hex.render(imageData, { scale: 16 });
+
+// Apply XBRZ scaling
+const xbrzResult = await renderer.xbrz.render(imageData, { scale: 4 });
+
+// Use the result
+ctx.putImageData(new ImageData(crtResult.data, crtResult.width, crtResult.height), 0, 0);
+```
+
+### GPU-Only Mode (Sync, No WASM)
+
+```typescript
+import { RenderArt } from '@pixagram/renderart';
+
+// Create GPU-only renderer (no WASM loading)
+const renderer = RenderArt.createGpuOnly();
+
+// Synchronous rendering
+const result = renderer.crt.renderSync(imageData, { scale: 3 });
+```
+
+### Direct Renderer Usage
+
+```typescript
+import { CrtGpuRenderer } from '@pixagram/renderart';
+
+// Use GPU renderer directly (no WASM needed)
+const crt = CrtGpuRenderer.create();
+const result = crt.render(imageData, { scale: 3 });
+crt.dispose();
+```
+
+## Webpack Configuration
+
+For webpack 5, add to your webpack.config.js:
+
+```javascript
+module.exports = {
+  experiments: {
+    asyncWebAssembly: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.wasm$/,
+        type: 'webassembly/async',
+      },
+    ],
+  },
+};
+```
+
+## API Reference
+
+### RenderArt (Unified API)
+
+```typescript
+// With CPU fallback (auto-loads WASM)
+const renderer = await RenderArt.create();
+
+// GPU-only mode
+const renderer = RenderArt.createGpuOnly();
+
+// Access capabilities
+console.log(renderer.capabilities);
+// { gpu: true, cpu: true, maxTextureSize: 16384, recommendedBackend: 'gpu' }
+
+// Cleanup
+renderer.dispose();
+```
+
+### CRT Engine
+
+```typescript
+// Async with auto backend selection
+const result = await renderer.crt.render(imageData, {
+  scale: 3,              // 2-32 (default: 3)
+  warpX: 0.015,          // Horizontal curvature
+  warpY: 0.02,           // Vertical curvature
+  scanHardness: -4.0,    // Scanline sharpness
+  scanOpacity: 0.5,      // Scanline intensity
+  maskOpacity: 0.3,      // Shadow mask intensity
+  enableWarp: true,
+  enableScanlines: true,
+  enableMask: true,
+  backend: 'auto',       // 'gpu', 'cpu', or 'auto'
+});
+
+// With preset
+const result = await renderer.crt.render(imageData, 'authentic');
+// Presets: 'default', 'authentic', 'subtle', 'flat'
+
+// Sync GPU-only
+const result = renderer.crt.renderSync(imageData, { scale: 3 });
+```
+
+### HEX Engine
+
+```typescript
+const result = await renderer.hex.render(imageData, {
+  scale: 16,                    // 2-32 (default: 16)
+  orientation: 'flat-top',      // 'flat-top' or 'pointy-top'
+  drawBorders: true,
+  borderColor: '#282828',
+  borderThickness: 1,
+  backgroundColor: 'transparent',
+});
+
+// Presets: 'default', 'bordered', 'pointy'
+const result = await renderer.hex.render(imageData, 'bordered');
+
+// Get output dimensions
+const dims = renderer.hex.getDimensions(64, 64, { scale: 16 });
+```
+
+### XBRZ Engine (CPU Only)
+
+```typescript
+const result = await renderer.xbrz.render(imageData, {
+  scale: 4,                          // 2-6 (default: 2)
+  luminanceWeight: 1.0,
+  equalColorTolerance: 30,
+  dominantDirectionThreshold: 4.4,
+  steepDirectionThreshold: 2.2,
+});
+
+// Presets: 'default', 'sharp', 'smooth'
+const result = await renderer.xbrz.render(imageData, 'sharp');
+```
+
+## Backend Support
+
+| Engine | GPU (WebGL2) | CPU (WASM) |
+|--------|--------------|------------|
+| CRT    | ✅ Primary   | ✅ Fallback |
+| HEX    | ✅ Primary   | ✅ Fallback |
+| XBRZ   | ❌ N/A       | ✅ Only     |
+
+## Browser Support
+
+- Chrome 79+
+- Firefox 75+
+- Safari 15+
+- Edge 79+
+
+## Development
+
+```bash
+# Clone and install
+git clone https://github.com/pixagram/renderart.git
+cd renderart
+npm install
+
+# Build WASM (requires Rust + wasm-pack)
+npm run build:wasm
+
+# Build TypeScript
+npm run build:ts
+
+# Full build
+npm run build
+
+# Run tests
+npm test
+```
+
+## License
+
+MIT © Pixagram SA

package/pkg/renderart_wasm.d.ts

@@ -0,0 +1,52 @@
+/* tslint:disable */
+/* eslint-disable */
+
+export class UpscaleResult {
+  private constructor();
+  free(): void;
+  [Symbol.dispose](): void;
+  ptr: number;
+  len: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * CRT upscale with default config
+ */
+export function crt_upscale(data: Uint8Array, width: number, height: number, scale: number): UpscaleResult;
+
+/**
+ * CRT upscale with full config
+ */
+export function crt_upscale_config(data: Uint8Array, width: number, height: number, scale: number, warp_x: number, warp_y: number, scan_hardness: number, scan_opacity: number, mask_opacity: number, enable_warp: boolean, enable_scanlines: boolean, enable_mask: boolean): UpscaleResult;
+
+/**
+ * Get WASM memory for reading output buffers
+ */
+export function get_memory(): any;
+
+/**
+ * Get HEX output dimensions
+ */
+export function hex_get_dimensions(width: number, height: number, scale: number, orientation: number): Uint32Array;
+
+/**
+ * HEX upscale with default config
+ */
+export function hex_upscale(data: Uint8Array, width: number, height: number, scale: number): UpscaleResult;
+
+/**
+ * HEX upscale with full config
+ */
+export function hex_upscale_config(data: Uint8Array, width: number, height: number, scale: number, orientation: number, draw_borders: boolean, border_color: number, border_thickness: number, background_color: number): UpscaleResult;
+
+/**
+ * XBRZ upscale with default config
+ */
+export function xbrz_upscale(data: Uint8Array, width: number, height: number, scale: number): UpscaleResult;
+
+/**
+ * XBRZ upscale with full config
+ */
+export function xbrz_upscale_config(data: Uint8Array, width: number, height: number, scale: number, luminance_weight: number, equal_color_tolerance: number, dominant_direction_threshold: number, steep_direction_threshold: number): UpscaleResult;

package/pkg/renderart_wasm.js

@@ -0,0 +1,5 @@
+import * as wasm from "./renderart_wasm_bg.wasm";
+export * from "./renderart_wasm_bg.js";
+import { __wbg_set_wasm } from "./renderart_wasm_bg.js";
+__wbg_set_wasm(wasm);
+wasm.__wbindgen_start();

package/pkg/renderart_wasm_bg.js

@@ -0,0 +1,283 @@
+let wasm;
+export function __wbg_set_wasm(val) {
+    wasm = val;
+}
+
+function getArrayU32FromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    return getUint32ArrayMemory0().subarray(ptr / 4, ptr / 4 + len);
+}
+
+function getStringFromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    return decodeText(ptr, len);
+}
+
+let cachedUint32ArrayMemory0 = null;
+function getUint32ArrayMemory0() {
+    if (cachedUint32ArrayMemory0 === null || cachedUint32ArrayMemory0.byteLength === 0) {
+        cachedUint32ArrayMemory0 = new Uint32Array(wasm.memory.buffer);
+    }
+    return cachedUint32ArrayMemory0;
+}
+
+let cachedUint8ArrayMemory0 = null;
+function getUint8ArrayMemory0() {
+    if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
+        cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachedUint8ArrayMemory0;
+}
+
+function passArray8ToWasm0(arg, malloc) {
+    const ptr = malloc(arg.length * 1, 1) >>> 0;
+    getUint8ArrayMemory0().set(arg, ptr / 1);
+    WASM_VECTOR_LEN = arg.length;
+    return ptr;
+}
+
+let cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+cachedTextDecoder.decode();
+const MAX_SAFARI_DECODE_BYTES = 2146435072;
+let numBytesDecoded = 0;
+function decodeText(ptr, len) {
+    numBytesDecoded += len;
+    if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
+        cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+        cachedTextDecoder.decode();
+        numBytesDecoded = len;
+    }
+    return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+}
+
+let WASM_VECTOR_LEN = 0;
+
+const UpscaleResultFinalization = (typeof FinalizationRegistry === 'undefined')
+    ? { register: () => {}, unregister: () => {} }
+    : new FinalizationRegistry(ptr => wasm.__wbg_upscaleresult_free(ptr >>> 0, 1));
+
+/**
+ * Result of an upscale operation
+ */
+export class UpscaleResult {
+    static __wrap(ptr) {
+        ptr = ptr >>> 0;
+        const obj = Object.create(UpscaleResult.prototype);
+        obj.__wbg_ptr = ptr;
+        UpscaleResultFinalization.register(obj, obj.__wbg_ptr, obj);
+        return obj;
+    }
+    __destroy_into_raw() {
+        const ptr = this.__wbg_ptr;
+        this.__wbg_ptr = 0;
+        UpscaleResultFinalization.unregister(this);
+        return ptr;
+    }
+    free() {
+        const ptr = this.__destroy_into_raw();
+        wasm.__wbg_upscaleresult_free(ptr, 0);
+    }
+    /**
+     * @returns {number}
+     */
+    get ptr() {
+        const ret = wasm.__wbg_get_upscaleresult_ptr(this.__wbg_ptr);
+        return ret >>> 0;
+    }
+    /**
+     * @param {number} arg0
+     */
+    set ptr(arg0) {
+        wasm.__wbg_set_upscaleresult_ptr(this.__wbg_ptr, arg0);
+    }
+    /**
+     * @returns {number}
+     */
+    get len() {
+        const ret = wasm.__wbg_get_upscaleresult_len(this.__wbg_ptr);
+        return ret >>> 0;
+    }
+    /**
+     * @param {number} arg0
+     */
+    set len(arg0) {
+        wasm.__wbg_set_upscaleresult_len(this.__wbg_ptr, arg0);
+    }
+    /**
+     * @returns {number}
+     */
+    get width() {
+        const ret = wasm.__wbg_get_upscaleresult_width(this.__wbg_ptr);
+        return ret >>> 0;
+    }
+    /**
+     * @param {number} arg0
+     */
+    set width(arg0) {
+        wasm.__wbg_set_upscaleresult_width(this.__wbg_ptr, arg0);
+    }
+    /**
+     * @returns {number}
+     */
+    get height() {
+        const ret = wasm.__wbg_get_upscaleresult_height(this.__wbg_ptr);
+        return ret >>> 0;
+    }
+    /**
+     * @param {number} arg0
+     */
+    set height(arg0) {
+        wasm.__wbg_set_upscaleresult_height(this.__wbg_ptr, arg0);
+    }
+}
+if (Symbol.dispose) UpscaleResult.prototype[Symbol.dispose] = UpscaleResult.prototype.free;
+
+/**
+ * CRT upscale with default config
+ * @param {Uint8Array} data
+ * @param {number} width
+ * @param {number} height
+ * @param {number} scale
+ * @returns {UpscaleResult}
+ */
+export function crt_upscale(data, width, height, scale) {
+    const ptr0 = passArray8ToWasm0(data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.crt_upscale(ptr0, len0, width, height, scale);
+    return UpscaleResult.__wrap(ret);
+}
+
+/**
+ * CRT upscale with full config
+ * @param {Uint8Array} data
+ * @param {number} width
+ * @param {number} height
+ * @param {number} scale
+ * @param {number} warp_x
+ * @param {number} warp_y
+ * @param {number} scan_hardness
+ * @param {number} scan_opacity
+ * @param {number} mask_opacity
+ * @param {boolean} enable_warp
+ * @param {boolean} enable_scanlines
+ * @param {boolean} enable_mask
+ * @returns {UpscaleResult}
+ */
+export function crt_upscale_config(data, width, height, scale, warp_x, warp_y, scan_hardness, scan_opacity, mask_opacity, enable_warp, enable_scanlines, enable_mask) {
+    const ptr0 = passArray8ToWasm0(data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.crt_upscale_config(ptr0, len0, width, height, scale, warp_x, warp_y, scan_hardness, scan_opacity, mask_opacity, enable_warp, enable_scanlines, enable_mask);
+    return UpscaleResult.__wrap(ret);
+}
+
+/**
+ * Get WASM memory for reading output buffers
+ * @returns {any}
+ */
+export function get_memory() {
+    const ret = wasm.get_memory();
+    return ret;
+}
+
+/**
+ * Get HEX output dimensions
+ * @param {number} width
+ * @param {number} height
+ * @param {number} scale
+ * @param {number} orientation
+ * @returns {Uint32Array}
+ */
+export function hex_get_dimensions(width, height, scale, orientation) {
+    const ret = wasm.hex_get_dimensions(width, height, scale, orientation);
+    var v1 = getArrayU32FromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 4, 4);
+    return v1;
+}
+
+/**
+ * HEX upscale with default config
+ * @param {Uint8Array} data
+ * @param {number} width
+ * @param {number} height
+ * @param {number} scale
+ * @returns {UpscaleResult}
+ */
+export function hex_upscale(data, width, height, scale) {
+    const ptr0 = passArray8ToWasm0(data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.hex_upscale(ptr0, len0, width, height, scale);
+    return UpscaleResult.__wrap(ret);
+}
+
+/**
+ * HEX upscale with full config
+ * @param {Uint8Array} data
+ * @param {number} width
+ * @param {number} height
+ * @param {number} scale
+ * @param {number} orientation
+ * @param {boolean} draw_borders
+ * @param {number} border_color
+ * @param {number} border_thickness
+ * @param {number} background_color
+ * @returns {UpscaleResult}
+ */
+export function hex_upscale_config(data, width, height, scale, orientation, draw_borders, border_color, border_thickness, background_color) {
+    const ptr0 = passArray8ToWasm0(data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.hex_upscale_config(ptr0, len0, width, height, scale, orientation, draw_borders, border_color, border_thickness, background_color);
+    return UpscaleResult.__wrap(ret);
+}
+
+/**
+ * XBRZ upscale with default config
+ * @param {Uint8Array} data
+ * @param {number} width
+ * @param {number} height
+ * @param {number} scale
+ * @returns {UpscaleResult}
+ */
+export function xbrz_upscale(data, width, height, scale) {
+    const ptr0 = passArray8ToWasm0(data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.xbrz_upscale(ptr0, len0, width, height, scale);
+    return UpscaleResult.__wrap(ret);
+}
+
+/**
+ * XBRZ upscale with full config
+ * @param {Uint8Array} data
+ * @param {number} width
+ * @param {number} height
+ * @param {number} scale
+ * @param {number} luminance_weight
+ * @param {number} equal_color_tolerance
+ * @param {number} dominant_direction_threshold
+ * @param {number} steep_direction_threshold
+ * @returns {UpscaleResult}
+ */
+export function xbrz_upscale_config(data, width, height, scale, luminance_weight, equal_color_tolerance, dominant_direction_threshold, steep_direction_threshold) {
+    const ptr0 = passArray8ToWasm0(data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.xbrz_upscale_config(ptr0, len0, width, height, scale, luminance_weight, equal_color_tolerance, dominant_direction_threshold, steep_direction_threshold);
+    return UpscaleResult.__wrap(ret);
+}
+
+export function __wbg___wbindgen_memory_a342e963fbcabd68() {
+    const ret = wasm.memory;
+    return ret;
+};
+
+export function __wbg___wbindgen_throw_dd24417ed36fc46e(arg0, arg1) {
+    throw new Error(getStringFromWasm0(arg0, arg1));
+};
+
+export function __wbindgen_init_externref_table() {
+    const table = wasm.__wbindgen_externrefs;
+    const offset = table.grow(4);
+    table.set(0, undefined);
+    table.set(offset + 0, undefined);
+    table.set(offset + 1, null);
+    table.set(offset + 2, true);
+    table.set(offset + 3, false);
+};

package/pkg/renderart_wasm_bg.wasm.d.ts

@@ -0,0 +1,24 @@
+/* tslint:disable */
+/* eslint-disable */
+export const memory: WebAssembly.Memory;
+export const __wbg_upscaleresult_free: (a: number, b: number) => void;
+export const __wbg_get_upscaleresult_ptr: (a: number) => number;
+export const __wbg_set_upscaleresult_ptr: (a: number, b: number) => void;
+export const __wbg_get_upscaleresult_len: (a: number) => number;
+export const __wbg_set_upscaleresult_len: (a: number, b: number) => void;
+export const __wbg_get_upscaleresult_width: (a: number) => number;
+export const __wbg_set_upscaleresult_width: (a: number, b: number) => void;
+export const __wbg_get_upscaleresult_height: (a: number) => number;
+export const __wbg_set_upscaleresult_height: (a: number, b: number) => void;
+export const get_memory: () => any;
+export const crt_upscale: (a: number, b: number, c: number, d: number, e: number) => number;
+export const crt_upscale_config: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number) => number;
+export const hex_upscale: (a: number, b: number, c: number, d: number, e: number) => number;
+export const hex_upscale_config: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number) => number;
+export const hex_get_dimensions: (a: number, b: number, c: number, d: number) => [number, number];
+export const xbrz_upscale: (a: number, b: number, c: number, d: number, e: number) => number;
+export const xbrz_upscale_config: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number) => number;
+export const __wbindgen_externrefs: WebAssembly.Table;
+export const __wbindgen_malloc: (a: number, b: number) => number;
+export const __wbindgen_free: (a: number, b: number, c: number) => void;
+export const __wbindgen_start: () => void;