@pixagram/renderart 0.4.5 → 1.0.0

package/src/hex-gpu.ts

@@ -0,0 +1,426 @@
+/**
+ * Hexagonal GPU Renderer using WebGL2
+ * 
+ * High-performance hexagonal pixel grid transformation using fragment shaders.
+ */
+
+import type { HexOptions, HexOrientation, ImageInput, ImageOutput, Renderer } from './types';
+
+// Vertex shader
+const VERTEX_SHADER = `#version 300 es
+layout(location = 0) in vec2 position;
+out vec2 vUv;
+
+void main() {
+    vUv = position * 0.5 + 0.5;
+    gl_Position = vec4(position, 0.0, 1.0);
+}`;
+
+// Fragment shader for hexagonal rendering
+const FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+
+uniform sampler2D uTex;
+uniform vec2 uOutputRes;
+uniform vec2 uInputRes;
+uniform float uScale;
+uniform int uOrientation; // 0 = flat-top, 1 = pointy-top
+uniform int uDrawBorders;
+uniform vec4 uBorderColor;
+uniform float uBorderThickness;
+uniform vec4 uBackgroundColor;
+
+in vec2 vUv;
+out vec4 outColor;
+
+const float SQRT3 = 1.732050808;
+const float INV_SQRT3 = 0.577350269;
+
+// Convert output pixel to hex coordinate (flat-top)
+vec2 pixelToHexFlat(vec2 pos, float scale) {
+    float hSpacing = scale * 1.5;
+    float vSpacing = scale * SQRT3;
+    
+    float col = pos.x / hSpacing;
+    int colInt = int(floor(col));
+    
+    // Check if odd column (offset)
+    bool isOffset = (colInt & 1) == 1;
+    float yOffset = isOffset ? vSpacing * 0.5 : 0.0;
+    
+    float row = (pos.y - yOffset) / vSpacing;
+    int rowInt = int(floor(row));
+    
+    // Refine with corner detection
+    float cellX = pos.x - float(colInt) * hSpacing;
+    float cellY = pos.y - float(rowInt) * vSpacing - yOffset;
+    
+    float quarterW = scale * 0.5;
+    float halfH = vSpacing * 0.5;
+    
+    if (cellX < quarterW) {
+        float distFromCenter = abs(cellY - halfH);
+        float edgeX = distFromCenter * INV_SQRT3;
+        
+        if (cellX < quarterW - edgeX) {
+            if (cellY < halfH) {
+                rowInt -= 1;
+            }
+            colInt -= 1;
+        }
+    }
+    
+    return vec2(float(colInt), float(rowInt));
+}
+
+// Convert output pixel to hex coordinate (pointy-top)
+vec2 pixelToHexPointy(vec2 pos, float scale) {
+    float hSpacing = scale * SQRT3;
+    float vSpacing = scale * 1.5;
+    
+    float row = pos.y / vSpacing;
+    int rowInt = int(floor(row));
+    
+    // Check if odd row (offset)
+    bool isOffset = (rowInt & 1) == 1;
+    float xOffset = isOffset ? hSpacing * 0.5 : 0.0;
+    
+    float col = (pos.x - xOffset) / hSpacing;
+    int colInt = int(floor(col));
+    
+    // Refine with corner detection
+    float cellX = pos.x - float(colInt) * hSpacing - xOffset;
+    float cellY = pos.y - float(rowInt) * vSpacing;
+    
+    float halfW = hSpacing * 0.5;
+    float quarterH = scale * 0.5;
+    
+    if (cellY < quarterH) {
+        float distFromCenter = abs(cellX - halfW);
+        float edgeY = distFromCenter * SQRT3;
+        
+        if (cellY < edgeY) {
+            if (cellX < halfW && isOffset) {
+                colInt -= 1;
+            }
+            rowInt -= 1;
+        }
+    }
+    
+    return vec2(float(colInt), float(rowInt));
+}
+
+// Check if pixel is on hex border
+bool isBorderPixel(vec2 pos, float scale, int orientation, float thickness) {
+    for (float dy = -thickness; dy <= thickness; dy += 1.0) {
+        for (float dx = -thickness; dx <= thickness; dx += 1.0) {
+            if (dx == 0.0 && dy == 0.0) continue;
+            
+            vec2 h1 = orientation == 0 
+                ? pixelToHexFlat(pos, scale) 
+                : pixelToHexPointy(pos, scale);
+            vec2 h2 = orientation == 0 
+                ? pixelToHexFlat(pos + vec2(dx, dy), scale) 
+                : pixelToHexPointy(pos + vec2(dx, dy), scale);
+            
+            if (h1 != h2) return true;
+        }
+    }
+    return false;
+}
+
+void main() {
+    vec2 pixelPos = vUv * uOutputRes;
+    
+    // Get hex coordinate
+    vec2 hexCoord = uOrientation == 0 
+        ? pixelToHexFlat(pixelPos, uScale) 
+        : pixelToHexPointy(pixelPos, uScale);
+    
+    // Check bounds
+    if (hexCoord.x < 0.0 || hexCoord.y < 0.0 || 
+        hexCoord.x >= uInputRes.x || hexCoord.y >= uInputRes.y) {
+        outColor = uBackgroundColor;
+        return;
+    }
+    
+    // Check for border
+    if (uDrawBorders == 1 && uBorderThickness > 0.0) {
+        if (isBorderPixel(pixelPos, uScale, uOrientation, uBorderThickness)) {
+            outColor = uBorderColor;
+            return;
+        }
+    }
+    
+    // Sample source pixel (add 0.5 for pixel center)
+    vec2 texCoord = (hexCoord + 0.5) / uInputRes;
+    outColor = texture(uTex, texCoord);
+}`;
+
+/** Parse color from CSS string or number */
+function parseColor(color: string | number | undefined, defaultColor: [number, number, number, number]): [number, number, number, number] {
+  if (color === undefined) return defaultColor;
+  
+  if (typeof color === 'number') {
+    return [
+      ((color >> 24) & 0xFF) / 255,
+      ((color >> 16) & 0xFF) / 255,
+      ((color >> 8) & 0xFF) / 255,
+      (color & 0xFF) / 255,
+    ];
+  }
+  
+  // Parse CSS color
+  if (color === 'transparent') return [0, 0, 0, 0];
+  
+  // Parse hex color
+  if (color.startsWith('#')) {
+    const hex = color.slice(1);
+    if (hex.length === 6) {
+      return [
+        parseInt(hex.slice(0, 2), 16) / 255,
+        parseInt(hex.slice(2, 4), 16) / 255,
+        parseInt(hex.slice(4, 6), 16) / 255,
+        1,
+      ];
+    }
+    if (hex.length === 8) {
+      return [
+        parseInt(hex.slice(0, 2), 16) / 255,
+        parseInt(hex.slice(2, 4), 16) / 255,
+        parseInt(hex.slice(4, 6), 16) / 255,
+        parseInt(hex.slice(6, 8), 16) / 255,
+      ];
+    }
+  }
+  
+  return defaultColor;
+}
+
+/** Calculate output dimensions for hex rendering */
+export function hexGetDimensions(
+  srcWidth: number,
+  srcHeight: number,
+  scale: number,
+  orientation: HexOrientation = 'flat-top'
+): { width: number; height: number } {
+  const SQRT3 = 1.732050808;
+  
+  if (orientation === 'flat-top') {
+    const hSpacing = scale * 1.5;
+    const vSpacing = scale * SQRT3;
+    const cellWidth = scale * 2;
+    const cellHeight = scale * SQRT3;
+    
+    return {
+      width: Math.ceil(srcWidth * hSpacing + cellWidth),
+      height: Math.ceil(srcHeight * vSpacing + cellHeight),
+    };
+  } else {
+    const hSpacing = scale * SQRT3;
+    const vSpacing = scale * 1.5;
+    const cellWidth = scale * SQRT3;
+    const cellHeight = scale * 2;
+    
+    return {
+      width: Math.ceil(srcWidth * hSpacing + cellWidth),
+      height: Math.ceil(srcHeight * vSpacing + cellHeight),
+    };
+  }
+}
+
+/** HEX GPU Renderer */
+export class HexGpuRenderer implements Renderer<HexOptions> {
+  private gl: WebGL2RenderingContext | null = null;
+  private canvas: OffscreenCanvas | null = null;
+  private program: WebGLProgram | null = null;
+  private texture: WebGLTexture | null = null;
+  private uniforms: Record<string, WebGLUniformLocation | null> = {};
+  private initialized = false;
+  private currentCanvasSize = { width: 0, height: 0 };
+  private currentTexSize = { width: 0, height: 0 };
+
+  /** Create a new HEX GPU renderer */
+  static create(): HexGpuRenderer {
+    const renderer = new HexGpuRenderer();
+    renderer.init();
+    return renderer;
+  }
+
+  private init(): void {
+    if (typeof OffscreenCanvas === 'undefined') {
+      throw new Error('OffscreenCanvas not supported');
+    }
+
+    this.canvas = new OffscreenCanvas(1, 1);
+    this.gl = this.canvas.getContext('webgl2', {
+      alpha: true,
+      premultipliedAlpha: false,
+      desynchronized: true,
+      powerPreference: 'high-performance',
+      antialias: false,
+    });
+
+    if (!this.gl) {
+      throw new Error('WebGL2 not supported');
+    }
+
+    const gl = this.gl;
+
+    // Create shaders
+    const vs = this.createShader(gl.VERTEX_SHADER, VERTEX_SHADER);
+    const fs = this.createShader(gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+
+    // Create program
+    this.program = gl.createProgram()!;
+    gl.attachShader(this.program, vs);
+    gl.attachShader(this.program, fs);
+    gl.linkProgram(this.program);
+
+    if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
+      throw new Error('Shader program link failed: ' + gl.getProgramInfoLog(this.program));
+    }
+
+    gl.useProgram(this.program);
+
+    // Get uniform locations
+    this.uniforms = {
+      uTex: gl.getUniformLocation(this.program, 'uTex'),
+      uOutputRes: gl.getUniformLocation(this.program, 'uOutputRes'),
+      uInputRes: gl.getUniformLocation(this.program, 'uInputRes'),
+      uScale: gl.getUniformLocation(this.program, 'uScale'),
+      uOrientation: gl.getUniformLocation(this.program, 'uOrientation'),
+      uDrawBorders: gl.getUniformLocation(this.program, 'uDrawBorders'),
+      uBorderColor: gl.getUniformLocation(this.program, 'uBorderColor'),
+      uBorderThickness: gl.getUniformLocation(this.program, 'uBorderThickness'),
+      uBackgroundColor: gl.getUniformLocation(this.program, 'uBackgroundColor'),
+    };
+
+    gl.uniform1i(this.uniforms.uTex, 0);
+
+    // Setup geometry
+    const buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+
+    // Create texture
+    this.texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+
+    gl.clearColor(0.0, 0.0, 0.0, 0.0);
+
+    this.initialized = true;
+  }
+
+  private createShader(type: number, source: string): WebGLShader {
+    const gl = this.gl!;
+    const shader = gl.createShader(type)!;
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      const info = gl.getShaderInfoLog(shader);
+      gl.deleteShader(shader);
+      throw new Error('Shader compile failed: ' + info);
+    }
+
+    return shader;
+  }
+
+  /** Check if renderer is ready */
+  isReady(): boolean {
+    return this.initialized;
+  }
+
+  /** Render hexagonal effect */
+  render(input: ImageInput | ImageData, options: HexOptions = {}): ImageOutput {
+    if (!this.initialized || !this.gl || !this.canvas) {
+      throw new Error('Renderer not initialized');
+    }
+
+    const gl = this.gl;
+    const data = input instanceof ImageData ? input.data : input.data;
+    const width = input.width;
+    const height = input.height;
+
+    const scale = Math.min(32, Math.max(2, options.scale ?? 16));
+    const orientation: HexOrientation = options.orientation ?? 'flat-top';
+    const { width: outWidth, height: outHeight } = hexGetDimensions(width, height, scale, orientation);
+
+    // Resize canvas if needed
+    if (this.currentCanvasSize.width !== outWidth || this.currentCanvasSize.height !== outHeight) {
+      this.canvas.width = outWidth;
+      this.canvas.height = outHeight;
+      this.currentCanvasSize = { width: outWidth, height: outHeight };
+      gl.viewport(0, 0, outWidth, outHeight);
+    }
+
+    // Update uniforms
+    gl.uniform2f(this.uniforms.uOutputRes, outWidth, outHeight);
+    gl.uniform2f(this.uniforms.uInputRes, width, height);
+    gl.uniform1f(this.uniforms.uScale, scale);
+    gl.uniform1i(this.uniforms.uOrientation, orientation === 'flat-top' ? 0 : 1);
+    gl.uniform1i(this.uniforms.uDrawBorders, options.drawBorders ? 1 : 0);
+    gl.uniform1f(this.uniforms.uBorderThickness, options.borderThickness ?? 1);
+
+    const borderColor = parseColor(options.borderColor, [0.16, 0.16, 0.16, 1]);
+    gl.uniform4f(this.uniforms.uBorderColor, ...borderColor);
+
+    const bgColor = parseColor(options.backgroundColor, [0, 0, 0, 0]);
+    gl.uniform4f(this.uniforms.uBackgroundColor, ...bgColor);
+
+    // Update texture
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    if (this.currentTexSize.width !== width || this.currentTexSize.height !== height) {
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+      this.currentTexSize = { width, height };
+    } else {
+      gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, data);
+    }
+
+    // Render
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+
+    // Read pixels
+    const pixels = new Uint8ClampedArray(outWidth * outHeight * 4);
+    gl.readPixels(0, 0, outWidth, outHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+
+    return {
+      data: pixels,
+      width: outWidth,
+      height: outHeight,
+    };
+  }
+
+  /** Dispose resources */
+  dispose(): void {
+    if (this.gl) {
+      if (this.texture) this.gl.deleteTexture(this.texture);
+      if (this.program) this.gl.deleteProgram(this.program);
+      this.gl = null;
+    }
+    this.canvas = null;
+    this.initialized = false;
+  }
+}
+
+/** HEX presets */
+export const HEX_PRESETS: Record<string, Partial<HexOptions>> = {
+  default: {},
+  bordered: {
+    drawBorders: true,
+    borderColor: '#282828',
+    borderThickness: 1,
+  },
+  pointy: {
+    orientation: 'pointy-top',
+    drawBorders: false,
+  },
+};

package/src/index.ts

@@ -0,0 +1,52 @@
+/**
+ * RenderArt - High-Performance Pixel Art Rendering
+ * 
+ * A collection of GPU-accelerated (WebGL2) and WASM-powered
+ * pixel art upscaling and transformation engines.
+ * 
+ * @packageDocumentation
+ */
+
+// Types
+export type {
+  ImageInput,
+  ImageOutput,
+  Renderer,
+  CrtOptions,
+  HexOptions,
+  HexOrientation,
+  XbrzOptions,
+} from './types';
+
+// CRT Renderer
+export { CrtGpuRenderer, CRT_PRESETS } from './crt-gpu';
+
+// Hexagonal Renderer
+export { HexGpuRenderer, HEX_PRESETS, hexGetDimensions } from './hex-gpu';
+
+// xBRZ Renderer
+export { XbrzGpuRenderer, XBRZ_PRESETS } from './xbrz-gpu';
+
+/** Convenience factory for creating renderers */
+export const createRenderer = {
+  /** Create a CRT effect renderer */
+  crt: () => {
+    const { CrtGpuRenderer } = require('./crt-gpu');
+    return CrtGpuRenderer.create();
+  },
+  /** Create a hexagonal grid renderer */
+  hex: () => {
+    const { HexGpuRenderer } = require('./hex-gpu');
+    return HexGpuRenderer.create();
+  },
+  /** Create an xBRZ upscaling renderer */
+  xbrz: () => {
+    const { XbrzGpuRenderer } = require('./xbrz-gpu');
+    return XbrzGpuRenderer.create();
+  },
+};
+
+/** All available presets */
+export { CRT_PRESETS as crtPresets } from './crt-gpu';
+export { HEX_PRESETS as hexPresets } from './hex-gpu';
+export { XBRZ_PRESETS as xbrzPresets } from './xbrz-gpu';

package/src/types.ts

@@ -0,0 +1,90 @@
+/**
+ * RenderArt Shared Types
+ * 
+ * Common type definitions for all rendering engines.
+ */
+
+/** Input image data */
+export interface ImageInput {
+  /** Raw RGBA pixel data */
+  data: Uint8ClampedArray | Uint8Array;
+  /** Image width in pixels */
+  width: number;
+  /** Image height in pixels */
+  height: number;
+}
+
+/** Output image data */
+export interface ImageOutput {
+  /** Raw RGBA pixel data */
+  data: Uint8ClampedArray;
+  /** Output width in pixels */
+  width: number;
+  /** Output height in pixels */
+  height: number;
+}
+
+/** Base renderer interface */
+export interface Renderer<TOptions = object> {
+  /** Check if renderer is ready for use */
+  isReady(): boolean;
+  /** Render image with given options */
+  render(input: ImageInput | ImageData, options?: TOptions): ImageOutput;
+  /** Dispose of renderer resources */
+  dispose(): void;
+}
+
+/** CRT effect options */
+export interface CrtOptions {
+  /** Output scale factor (2-32, default: 3) */
+  scale?: number;
+  /** Horizontal warp amount (default: 0.015) */
+  warpX?: number;
+  /** Vertical warp amount (default: 0.02) */
+  warpY?: number;
+  /** Scanline hardness, negative values (default: -4.0) */
+  scanHardness?: number;
+  /** Scanline opacity (0-1, default: 0.5) */
+  scanOpacity?: number;
+  /** Shadow mask opacity (0-1, default: 0.3) */
+  maskOpacity?: number;
+  /** Enable barrel distortion (default: true) */
+  enableWarp?: boolean;
+  /** Enable scanline effect (default: true) */
+  enableScanlines?: boolean;
+  /** Enable shadow mask (default: true) */
+  enableMask?: boolean;
+}
+
+/** Hexagonal grid orientation */
+export type HexOrientation = 'flat-top' | 'pointy-top';
+
+/** Hexagonal grid options */
+export interface HexOptions {
+  /** Output scale factor (2-32, default: 16) */
+  scale?: number;
+  /** Hexagon orientation (default: 'flat-top') */
+  orientation?: HexOrientation;
+  /** Draw borders between hexagons (default: false) */
+  drawBorders?: boolean;
+  /** Border color as CSS color string or RGBA number (default: '#282828') */
+  borderColor?: string | number;
+  /** Border thickness in pixels (default: 1) */
+  borderThickness?: number;
+  /** Background color for out-of-bounds areas (default: 'transparent') */
+  backgroundColor?: string | number;
+}
+
+/** xBRZ scaling options */
+export interface XbrzOptions {
+  /** Output scale factor (2-6, default: 2) */
+  scale?: number;
+  /** Luminance weight for color comparison (default: 1.0) */
+  luminanceWeight?: number;
+  /** Color equality tolerance (0-255, default: 30) */
+  equalColorTolerance?: number;
+  /** Steep direction threshold (default: 2.2) */
+  steepDirectionThreshold?: number;
+  /** Dominant direction threshold (default: 3.6) */
+  dominantDirectionThreshold?: number;
+}