@pixagram/renderart

High-performance pixel art rendering engines with WebGL2 GPU acceleration and WebAssembly support.

Features

• CRT Effect - Authentic CRT display simulation with scanlines, shadow mask, and barrel distortion
• Hexagonal Grid - Transform pixel art into hexagonal pixel representations
• xBRZ Upscaling - Advanced pixel art upscaling algorithm (2x-6x) that preserves sharp edges

All renderers are available in two implementations:

• GPU (WebGL2) - High-performance fragment shader-based rendering
• WASM - Rust-compiled WebAssembly for environments without WebGL2

Installation

npm install @pixagram/renderart

Quick Start

import { CrtGpuRenderer, HexGpuRenderer, XbrzGpuRenderer } from '@pixagram/renderart';

// Create a renderer
const crt = CrtGpuRenderer.create();

// Render an image
const result = crt.render(imageData, {
  scale: 3,
  warpX: 0.015,
  warpY: 0.02,
  scanOpacity: 0.5,
  maskOpacity: 0.3,
});

// Use the result
const outputImageData = new ImageData(result.data, result.width, result.height);

// Clean up when done
crt.dispose();

CRT Renderer

Simulates classic CRT display characteristics including barrel distortion, scanlines, and RGB shadow mask.

import { CrtGpuRenderer, CRT_PRESETS } from '@pixagram/renderart';

const renderer = CrtGpuRenderer.create();

// Use default settings
const output = renderer.render(input, { scale: 3 });

// Or use a preset
const output = renderer.render(input, {
  ...CRT_PRESETS.authentic,
  scale: 4,
});

// Available presets: default, authentic, subtle, flat

CRT Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | scale | number | 3 | Output scale factor (2-32) | | warpX | number | 0.015 | Horizontal barrel distortion | | warpY | number | 0.02 | Vertical barrel distortion | | scanHardness | number | -4.0 | Scanline edge sharpness | | scanOpacity | number | 0.5 | Scanline visibility (0-1) | | maskOpacity | number | 0.3 | Shadow mask visibility (0-1) | | enableWarp | boolean | true | Enable barrel distortion | | enableScanlines | boolean | true | Enable scanline effect | | enableMask | boolean | true | Enable shadow mask |

Hexagonal Renderer

Transforms rectangular pixels into a hexagonal grid pattern.

import { HexGpuRenderer, hexGetDimensions, HEX_PRESETS } from '@pixagram/renderart';

const renderer = HexGpuRenderer.create();

// Get output dimensions before rendering
const dims = hexGetDimensions(inputWidth, inputHeight, 16, 'flat-top');
console.log(`Output: ${dims.width}x${dims.height}`);

// Render
const output = renderer.render(input, {
  scale: 16,
  orientation: 'flat-top',
  drawBorders: true,
  borderColor: '#282828',
});

// Available presets: default, bordered, pointy

Hex Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | scale | number | 16 | Hexagon size (2-32) | | orientation | string | 'flat-top' | 'flat-top' or 'pointy-top' | | drawBorders | boolean | false | Draw borders between hexagons | | borderColor | string/number | '#282828' | Border color | | borderThickness | number | 1 | Border width in pixels | | backgroundColor | string/number | 'transparent' | Background color |

xBRZ Renderer

Implements the xBRZ pixel art upscaling algorithm, which intelligently interpolates edges while preserving pixel art characteristics.

import { XbrzGpuRenderer, XBRZ_PRESETS } from '@pixagram/renderart';

const renderer = XbrzGpuRenderer.create();

// 4x upscale with default settings
const output = renderer.render(input, { scale: 4 });

// Use sharp preset for crisper edges
const output = renderer.render(input, {
  ...XBRZ_PRESETS.sharp,
  scale: 3,
});

// Available presets: default, sharp, smooth, colorful

xBRZ Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | scale | number | 2 | Scale factor (2-6) | | luminanceWeight | number | 1.0 | Weight for luminance in color comparison | | equalColorTolerance | number | 30 | Tolerance for color equality (0-255) | | steepDirectionThreshold | number | 2.2 | Threshold for steep edge detection | | dominantDirectionThreshold | number | 3.6 | Threshold for dominant direction |

WASM Module

For environments without WebGL2 support, use the WASM implementation:

import init, { crt_upscale, hex_upscale, xbrz_upscale, get_memory } from '@pixagram/renderart/wasm';

// Initialize WASM module
await init();

// Convert ImageData to Uint8Array
const inputData = new Uint8Array(imageData.data.buffer);

// Render
const result = crt_upscale(inputData, width, height, scale);

// Read output from WASM memory
const memory = get_memory();
const output = new Uint8ClampedArray(
  memory.buffer,
  result.ptr,
  result.len
);

// Create ImageData
const outputImageData = new ImageData(
  new Uint8ClampedArray(output), // Copy the data
  result.width,
  result.height
);

Building from Source

Prerequisites

• Node.js 18+
• Rust toolchain with wasm32-unknown-unknown target
• wasm-pack

Build

# Install dependencies
npm install

# Build everything (TypeScript + WASM)
npm run build

# Build only TypeScript
npm run build:ts

# Build only WASM
npm run build:wasm

Browser Support

• GPU Renderers: Requires WebGL2 (Chrome 56+, Firefox 51+, Safari 15+, Edge 79+)
• WASM Module: Requires WebAssembly (all modern browsers)

Performance

The GPU renderers leverage fragment shaders for parallel pixel processing:

| Renderer | 256x256 → 3x | 512x512 → 3x | |----------|--------------|--------------| | CRT GPU | ~2ms | ~5ms | | HEX GPU | ~3ms | ~8ms | | xBRZ GPU | ~4ms | ~12ms |

WASM performance is typically 3-5x slower but provides consistent results across all platforms.

License

MIT