@pixagram/renderart 0.4.5 → 1.0.1

package/package.json

@@ -1,59 +1,71 @@
 {
   "name": "@pixagram/renderart",
-  "version": "0.4.5",
-  "description": "High-performance pixel art rendering engines (CRT, HEX, XBRZ) with GPU and CPU support",
+  "version": "1.0.1",
+  "description": "High-performance pixel art rendering engines with WebGL2 GPU acceleration and WASM support",
+  "keywords": [
+    "pixel-art",
+    "upscaling",
+    "xbrz",
+    "crt",
+    "hexagonal",
+    "webgl",
+    "wasm",
+    "image-processing",
+    "retro",
+    "gamedev"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "type": "module",
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./crt": {
+      "import": "./dist/crt-gpu.js",
+      "types": "./dist/crt-gpu.d.ts"
+    },
+    "./hex": {
+      "import": "./dist/hex-gpu.js",
+      "types": "./dist/hex-gpu.d.ts"
+    },
+    "./xbrz": {
+      "import": "./dist/xbrz-gpu.js",
+      "types": "./dist/xbrz-gpu.d.ts"
     },
     "./wasm": {
-      "import": "./pkg/renderart_wasm.js",
-      "require": "./pkg/renderart_wasm.js"
+      "import": "./dist/wasm/renderart.js",
+      "types": "./dist/wasm/renderart.d.ts"
     }
   },
   "files": [
     "dist",
-    "pkg",
+    "src",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
-    "build:wasm": "wasm-pack build --target bundler --out-dir pkg --release && rm -f pkg/.gitignore pkg/package.json",
-    "build:ts": "tsup",
     "build": "npm run build:wasm && npm run build:ts",
-    "test": "cargo test",
-    "prepublishOnly": "npm run build"
-  },
-  "keywords": [
-    "pixel-art",
-    "upscale",
-    "crt",
-    "hexagon",
-    "xbrz",
-    "webgl",
-    "wasm",
-    "shader",
-    "rendering",
-    "image-processing"
-  ],
-  "author": "Pixagram SA",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/pixagram/renderart.git"
+    "build:ts": "tsc",
+    "build:wasm": "wasm-pack build --target web --out-dir dist/wasm",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run build",
+    "test": "node --test dist/**/*.test.js"
   },
   "devDependencies": {
-    "@types/node": "^20.10.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.3.0"
+    "typescript": "^5.3.0",
+    "wasm-pack": "^0.12.0"
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "sideEffects": false
 }

package/src/crt-gpu.ts

@@ -0,0 +1,313 @@
+/**
+ * CRT GPU Renderer using WebGL2
+ * 
+ * High-performance CRT effect rendering using fragment shaders.
+ */
+
+import type { CrtOptions, ImageInput, ImageOutput, Renderer } from './types.js';
+
+// 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 with configurable CRT effects
+const FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+
+uniform sampler2D uTex;
+uniform vec2 uRes;
+uniform vec2 uWarp;
+uniform float uScanHardness;
+uniform float uScanOpacity;
+uniform float uMaskOpacity;
+uniform int uEnableWarp;
+uniform int uEnableScanlines;
+uniform int uEnableMask;
+
+in vec2 vUv;
+out vec4 outColor;
+
+// Gamma 2.0 approximation
+vec3 toLinear(vec3 c) { return c * c; }
+vec3 toSrgb(vec3 c) { return sqrt(c); }
+
+vec2 warp(vec2 uv) {
+    if (uEnableWarp == 0) return uv;
+    vec2 dc = abs(0.5 - uv);
+    vec2 dc2 = dc * dc;
+    uv.x -= 0.5; uv.x *= 1.0 + (dc2.y * (0.3 * uWarp.x)); uv.x += 0.5;
+    uv.y -= 0.5; uv.y *= 1.0 + (dc2.x * (0.4 * uWarp.y)); uv.y += 0.5;
+    return uv;
+}
+
+float scanline(float y, float sourceHeight) {
+    if (uEnableScanlines == 0) return 1.0;
+    float v = fract(y * sourceHeight);
+    float d = abs(v - 0.5);
+    float line = exp(d * d * uScanHardness);
+    return mix(1.0, line, uScanOpacity);
+}
+
+vec3 mask(vec2 pos) {
+    if (uEnableMask == 0) return vec3(1.0);
+    float x = fract(pos.x / 6.0);
+    vec3 m = vec3(1.0);
+    float step1 = 0.333;
+    float step2 = 0.666;
+    
+    m.r = step(0.0, x) - step(step1, x);
+    m.g = step(step1, x) - step(step2, x);
+    m.b = step(step2, x) - step(1.0, x);
+    
+    return mix(vec3(1.0), m, uMaskOpacity);
+}
+
+void main() {
+    // 1. Geometry
+    vec2 uv = warp(vUv);
+    
+    // 2. Bounds Check
+    if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
+        outColor = vec4(0.0); 
+        return;
+    }
+
+    // 3. Texture Sample
+    vec4 texSample = texture(uTex, uv);
+    
+    if (texSample.a == 0.0) {
+        outColor = vec4(0.0);
+        return;
+    }
+
+    vec3 linearColor = toLinear(texSample.rgb);
+    
+    // 4. CRT Effects
+    ivec2 texSize = textureSize(uTex, 0);
+    
+    // Smart Bloom
+    float luma = dot(linearColor, vec3(0.299, 0.587, 0.114));
+    float bloom = luma * 0.7;
+
+    // Calculate patterns
+    float scan = scanline(uv.y, float(texSize.y));
+    vec3 m = mask(gl_FragCoord.xy);
+    
+    // Apply effects
+    vec3 effects = m * scan;
+    vec3 finalRGB = linearColor * mix(effects, vec3(1.0), bloom);
+
+    // 5. Output
+    outColor = vec4(toSrgb(finalRGB), texSample.a);
+}`;
+
+/** CRT GPU Renderer */
+export class CrtGpuRenderer implements Renderer<CrtOptions> {
+  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 CRT GPU renderer */
+  static create(): CrtGpuRenderer {
+    const renderer = new CrtGpuRenderer();
+    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'),
+      uRes: gl.getUniformLocation(this.program, 'uRes'),
+      uWarp: gl.getUniformLocation(this.program, 'uWarp'),
+      uScanHardness: gl.getUniformLocation(this.program, 'uScanHardness'),
+      uScanOpacity: gl.getUniformLocation(this.program, 'uScanOpacity'),
+      uMaskOpacity: gl.getUniformLocation(this.program, 'uMaskOpacity'),
+      uEnableWarp: gl.getUniformLocation(this.program, 'uEnableWarp'),
+      uEnableScanlines: gl.getUniformLocation(this.program, 'uEnableScanlines'),
+      uEnableMask: gl.getUniformLocation(this.program, 'uEnableMask'),
+    };
+
+    gl.uniform1i(this.uniforms.uTex, 0);
+
+    // Setup geometry (fullscreen triangle)
+    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.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    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 CRT effect */
+  render(input: ImageInput | ImageData, options: CrtOptions = {}): 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 ?? 3));
+    const outWidth = width * scale;
+    const outHeight = height * scale;
+
+    // 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.uRes, outWidth, outHeight);
+    gl.uniform2f(this.uniforms.uWarp, options.warpX ?? 0.015, options.warpY ?? 0.02);
+    gl.uniform1f(this.uniforms.uScanHardness, options.scanHardness ?? -4.0);
+    gl.uniform1f(this.uniforms.uScanOpacity, options.scanOpacity ?? 0.5);
+    gl.uniform1f(this.uniforms.uMaskOpacity, options.maskOpacity ?? 0.3);
+    gl.uniform1i(this.uniforms.uEnableWarp, options.enableWarp !== false ? 1 : 0);
+    gl.uniform1i(this.uniforms.uEnableScanlines, options.enableScanlines !== false ? 1 : 0);
+    gl.uniform1i(this.uniforms.uEnableMask, options.enableMask !== false ? 1 : 0);
+
+    // 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;
+  }
+}
+
+/** CRT presets */
+export const CRT_PRESETS: Record<string, Partial<CrtOptions>> = {
+  default: {},
+  authentic: {
+    warpX: 0.02,
+    warpY: 0.025,
+    scanHardness: -6.0,
+    scanOpacity: 0.6,
+    maskOpacity: 0.4,
+  },
+  subtle: {
+    warpX: 0.008,
+    warpY: 0.01,
+    scanHardness: -3.0,
+    scanOpacity: 0.3,
+    maskOpacity: 0.15,
+  },
+  flat: {
+    warpX: 0,
+    warpY: 0,
+    enableWarp: false,
+    scanHardness: -4.0,
+    scanOpacity: 0.5,
+    maskOpacity: 0.3,
+  },
+};