bloody-engine 1.0.0

package/dist/node/index-node.js

@@ -0,0 +1,2117 @@
+import sdl from "@kmamal/sdl";
+import fs from "fs";
+import { execSync } from "child_process";
+import path__default from "path";
+import createGL from "gl";
+class Texture {
+  /**
+   * Create a texture from pixel data
+   * @param gl WebGL context
+   * @param width Texture width
+   * @param height Texture height
+   * @param data Pixel data (Uint8Array RGBA)
+   */
+  constructor(gl2, width, height, data) {
+    this.gl = gl2;
+    this.width = width;
+    this.height = height;
+    const tex = gl2.createTexture();
+    if (!tex) {
+      throw new Error("Failed to create texture");
+    }
+    this.texture = tex;
+    gl2.bindTexture(gl2.TEXTURE_2D, this.texture);
+    gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_WRAP_S, gl2.CLAMP_TO_EDGE);
+    gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_WRAP_T, gl2.CLAMP_TO_EDGE);
+    gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_MIN_FILTER, gl2.LINEAR);
+    gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_MAG_FILTER, gl2.LINEAR);
+    if (data) {
+      gl2.texImage2D(
+        gl2.TEXTURE_2D,
+        0,
+        gl2.RGBA,
+        width,
+        height,
+        0,
+        gl2.RGBA,
+        gl2.UNSIGNED_BYTE,
+        data
+      );
+    } else {
+      gl2.texImage2D(
+        gl2.TEXTURE_2D,
+        0,
+        gl2.RGBA,
+        width,
+        height,
+        0,
+        gl2.RGBA,
+        gl2.UNSIGNED_BYTE,
+        null
+      );
+    }
+    gl2.bindTexture(gl2.TEXTURE_2D, null);
+  }
+  /**
+   * Create a solid color texture
+   * @param gl WebGL context
+   * @param width Texture width
+   * @param height Texture height
+   * @param r Red (0-255)
+   * @param g Green (0-255)
+   * @param b Blue (0-255)
+   * @param a Alpha (0-255)
+   */
+  static createSolid(gl2, width, height, r, g, b, a = 255) {
+    const pixelCount = width * height;
+    const data = new Uint8Array(pixelCount * 4);
+    for (let i = 0; i < pixelCount; i++) {
+      const offset = i * 4;
+      data[offset] = r;
+      data[offset + 1] = g;
+      data[offset + 2] = b;
+      data[offset + 3] = a;
+    }
+    return new Texture(gl2, width, height, data);
+  }
+  /**
+   * Create a checkerboard texture
+   * @param gl WebGL context
+   * @param width Texture width
+   * @param height Texture height
+   * @param squareSize Size of each square
+   */
+  static createCheckerboard(gl2, width, height, squareSize = 32) {
+    const data = new Uint8Array(width * height * 4);
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const squareX = Math.floor(x / squareSize);
+        const squareY = Math.floor(y / squareSize);
+        const isWhite = (squareX + squareY) % 2 === 0;
+        const offset = (y * width + x) * 4;
+        const color = isWhite ? 255 : 0;
+        data[offset] = color;
+        data[offset + 1] = color;
+        data[offset + 2] = color;
+        data[offset + 3] = 255;
+      }
+    }
+    return new Texture(gl2, width, height, data);
+  }
+  /**
+   * Create a gradient texture
+   * @param gl WebGL context
+   * @param width Texture width
+   * @param height Texture height
+   */
+  static createGradient(gl2, width, height) {
+    const data = new Uint8Array(width * height * 4);
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const offset = (y * width + x) * 4;
+        data[offset] = Math.floor(x / width * 255);
+        data[offset + 1] = Math.floor(y / height * 255);
+        data[offset + 2] = 128;
+        data[offset + 3] = 255;
+      }
+    }
+    return new Texture(gl2, width, height, data);
+  }
+  /**
+   * Bind this texture to a texture unit
+   * @param unit Texture unit (0-7 typically)
+   */
+  bind(unit = 0) {
+    this.gl.activeTexture(this.gl.TEXTURE0 + unit);
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+  }
+  /**
+   * Unbind texture
+   */
+  unbind() {
+    this.gl.bindTexture(this.gl.TEXTURE_2D, null);
+  }
+  /**
+   * Get the underlying WebGL texture
+   */
+  getHandle() {
+    return this.texture;
+  }
+  /**
+   * Get texture dimensions
+   */
+  getDimensions() {
+    return { width: this.width, height: this.height };
+  }
+  /**
+   * Clean up texture resources
+   */
+  dispose() {
+    this.gl.deleteTexture(this.texture);
+  }
+}
+const texture = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Texture
+}, Symbol.toStringTag, { value: "Module" }));
+class VertexBuffer {
+  constructor(gl2, data, stride = 0) {
+    this.gl = gl2;
+    this.stride = stride;
+    const floatsPerVertex = stride > 0 ? stride / 4 : 3;
+    this.vertexCount = data.length / floatsPerVertex;
+    const buf = gl2.createBuffer();
+    if (!buf) {
+      throw new Error("Failed to create vertex buffer");
+    }
+    this.buffer = buf;
+    gl2.bindBuffer(gl2.ARRAY_BUFFER, this.buffer);
+    gl2.bufferData(gl2.ARRAY_BUFFER, data, gl2.STATIC_DRAW);
+    gl2.bindBuffer(gl2.ARRAY_BUFFER, null);
+  }
+  /**
+   * Bind buffer for rendering
+   */
+  bind() {
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
+  }
+  /**
+   * Unbind buffer
+   */
+  unbind() {
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
+  }
+  /**
+   * Get vertex count
+   */
+  getVertexCount() {
+    return this.vertexCount;
+  }
+  /**
+   * Get stride
+   */
+  getStride() {
+    return this.stride;
+  }
+  /**
+   * Clean up resources
+   */
+  dispose() {
+    this.gl.deleteBuffer(this.buffer);
+  }
+}
+const buffer = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  VertexBuffer
+}, Symbol.toStringTag, { value: "Module" }));
+class SDLWindow {
+  constructor(width, height, title = "Bloody Engine") {
+    this.closed = false;
+    this.width = width;
+    this.height = height;
+    this.title = title;
+    try {
+      this.window = sdl.video.createWindow({
+        width: this.width,
+        height: this.height,
+        title: this.title
+      });
+      if (!this.window) {
+        throw new Error("Failed to create SDL window");
+      }
+      this.window.on("close", () => {
+        this.closed = true;
+      });
+      console.log(`✓ SDL Window created (${width}x${height}): "${title}"`);
+    } catch (error) {
+      this.cleanup();
+      throw new Error(`Window creation failed: ${error}`);
+    }
+  }
+  /**
+   * Get window dimensions
+   */
+  getDimensions() {
+    return { width: this.width, height: this.height };
+  }
+  /**
+   * Display pixel data in the window
+   * @param pixels Uint8Array of RGBA pixel data
+   */
+  updatePixels(pixels) {
+    if (!this.window || this.closed) {
+      return;
+    }
+    try {
+      const buffer2 = Buffer.from(pixels);
+      const stride = this.width * 4;
+      this.window.render(this.width, this.height, stride, "rgba32", buffer2);
+    } catch (error) {
+      console.error("Failed to update pixels:", error);
+    }
+  }
+  /**
+   * Register an event handler
+   */
+  on(eventName, handler) {
+    if (!this.window || this.closed) {
+      return;
+    }
+    try {
+      this.window.on(eventName, (event) => {
+        try {
+          handler(event);
+        } catch (error) {
+          console.error(`Error in ${eventName} handler:`, error);
+        }
+      });
+    } catch (error) {
+      console.error(`Error registering ${eventName} handler:`, error);
+    }
+  }
+  /**
+   * Check if window is still open
+   */
+  isOpen() {
+    return this.window !== null && !this.closed;
+  }
+  /**
+   * Cleanup and close window
+   */
+  cleanup() {
+    if (this.window && !this.closed) {
+      try {
+        this.window.destroy();
+      } catch (error) {
+        console.warn("Error destroying window:", error);
+      }
+      this.window = null;
+      this.closed = true;
+    }
+    console.log("✓ SDL Window cleaned up");
+  }
+  /**
+   * Destroy the window (alias for cleanup)
+   */
+  destroy() {
+    this.cleanup();
+  }
+}
+class ProjectionConfig {
+  // Scale factor for height (vertical exaggeration)
+  constructor(tileWidth = 64, tileHeight = 32, zScale = 1) {
+    this.tileWidth = tileWidth;
+    this.tileHeight = tileHeight;
+    this.zScale = zScale;
+  }
+}
+function gridToScreen(gridCoord, config) {
+  const halfTileWidth = config.tileWidth / 2;
+  const halfTileHeight = config.tileHeight / 2;
+  const xscreen = (gridCoord.xgrid - gridCoord.ygrid) * halfTileWidth;
+  const yscreen = (gridCoord.xgrid + gridCoord.ygrid) * halfTileHeight - gridCoord.zheight * config.zScale;
+  return { xscreen, yscreen };
+}
+function getCellCenterOffset(config) {
+  return {
+    xscreen: 0,
+    yscreen: config.tileHeight / 2
+  };
+}
+function createDefaultProjection() {
+  return new ProjectionConfig(64, 32, 1);
+}
+const SCENE_CONFIG = {
+  width: 800,
+  height: 600,
+  targetFPS: 60
+};
+const PROJECTION_CONFIG = new ProjectionConfig(
+  64,
+  // tileWidth: 64 pixels
+  32,
+  // tileHeight: 32 pixels
+  1
+  // zScale: 1:1 height scale
+);
+const PROJECTION_ENTITIES = [
+  {
+    id: "player",
+    name: "Player",
+    gridPos: { xgrid: 5, ygrid: 5, zheight: 0 },
+    color: [0.2, 1, 0.2],
+    // Green
+    size: 1
+  },
+  {
+    id: "enemy1",
+    name: "Enemy",
+    gridPos: { xgrid: 10, ygrid: 8, zheight: 0 },
+    color: [1, 0.2, 0.2],
+    // Red
+    size: 0.9
+  },
+  {
+    id: "chest",
+    name: "Treasure",
+    gridPos: { xgrid: 8, ygrid: 6, zheight: 0 },
+    color: [1, 1, 0.2],
+    // Yellow
+    size: 0.7
+  },
+  {
+    id: "tower",
+    name: "Tower",
+    gridPos: { xgrid: 12, ygrid: 12, zheight: 3 },
+    color: [0.5, 0.5, 1],
+    // Light Blue
+    size: 0.8
+  },
+  {
+    id: "floating",
+    name: "Floating Object",
+    gridPos: { xgrid: 3, ygrid: 10, zheight: 5 },
+    color: [1, 0.5, 1],
+    // Magenta
+    size: 0.6
+  }
+];
+const GEOMETRY = {
+  quad: {
+    name: "quad",
+    vertices: new Float32Array([
+      // Position               TexCoord
+      -0.5,
+      -0.5,
+      0,
+      0,
+      0,
+      // Bottom-left
+      0.5,
+      -0.5,
+      0,
+      1,
+      0,
+      // Bottom-right
+      0.5,
+      0.5,
+      0,
+      1,
+      1,
+      // Top-right
+      0.5,
+      0.5,
+      0,
+      1,
+      1,
+      // Top-right
+      -0.5,
+      0.5,
+      0,
+      0,
+      1,
+      // Top-left
+      -0.5,
+      -0.5,
+      0,
+      0,
+      0
+      // Bottom-left
+    ]),
+    stride: 5 * 4
+    // 5 floats per vertex × 4 bytes
+  },
+  triangle: {
+    name: "triangle",
+    vertices: new Float32Array([
+      // Position               TexCoord
+      0,
+      0.5,
+      0,
+      0.5,
+      1,
+      // Top
+      -0.5,
+      -0.5,
+      0,
+      0,
+      0,
+      // Bottom-left
+      0.5,
+      -0.5,
+      0,
+      1,
+      0
+      // Bottom-right
+    ]),
+    stride: 5 * 4
+    // 5 floats per vertex × 4 bytes
+  }
+};
+const SHADERS_V2 = {
+  vertex: `
+attribute vec3 aPosition;
+attribute vec2 aTexCoord;
+attribute vec4 aColor;
+attribute float aTexIndex;
+
+varying vec2 vTexCoord;
+varying vec4 vColor;
+varying float vTexIndex;
+
+uniform mat4 uMatrix;
+
+void main() {
+  gl_Position = uMatrix * vec4(aPosition, 1.0);
+  vTexCoord = aTexCoord;
+  vColor = aColor;
+  vTexIndex = aTexIndex;
+}
+`,
+  fragment: `
+precision mediump float;
+
+varying vec2 vTexCoord;
+varying vec4 vColor;
+varying float vTexIndex;
+
+uniform sampler2D uTexture;
+
+void main() {
+  // Sample texture
+  vec4 texColor = texture2D(uTexture, vTexCoord);
+
+  // Apply vertex color tint
+  gl_FragColor = texColor * vColor;
+}
+`
+};
+const TEXTURE_CONFIG = {
+  size: 256,
+  type: "gradient"
+  // gradient, solid, etc.
+};
+const ANIMATION_CONFIG = {
+  background: {
+    offsetR: 0.1,
+    amplitudeR: 0.1,
+    speedR: 1,
+    offsetG: 0.1,
+    amplitudeG: 0.1,
+    speedG: 0.7,
+    offsetB: 0.15,
+    amplitudeB: 0.1,
+    speedB: 0.5
+  },
+  quads: {
+    count: 3,
+    scale: 0.4,
+    baseRadius: 0.5,
+    radiusVariation: 0.2,
+    radiusSpeed: 0.3,
+    orbitalSpeed: 0.5,
+    rotationSpeed: 1,
+    colors: [
+      [1, 0.2, 0.2],
+      // Red
+      [0.2, 1, 0.2],
+      // Green
+      [0.2, 0.2, 1]
+      // Blue
+    ]
+  },
+  triangles: {
+    count: 2,
+    scale: 0.3,
+    baseRadius: 0.3,
+    radiusVariation: 0.15,
+    radiusSpeed: 0.4,
+    orbitalSpeed: 0.7,
+    rotationSpeed: 1.5,
+    rotationDirection: -1,
+    // -1 for reverse
+    colors: [
+      [1, 1, 0.2],
+      // Yellow
+      [0.2, 1, 1]
+      // Cyan
+    ]
+  }
+};
+function getBackgroundColor(elapsedSeconds) {
+  const cfg = ANIMATION_CONFIG.background;
+  return {
+    r: cfg.offsetR + cfg.amplitudeR * Math.sin(elapsedSeconds * cfg.speedR),
+    g: cfg.offsetG + cfg.amplitudeG * Math.cos(elapsedSeconds * cfg.speedG),
+    b: cfg.offsetB + cfg.amplitudeB * Math.sin(elapsedSeconds * cfg.speedB),
+    a: 1
+  };
+}
+function getQuadTransforms(elapsedSeconds) {
+  const cfg = ANIMATION_CONFIG.quads;
+  const transforms = [];
+  for (let i = 0; i < cfg.count; i++) {
+    const angle = i / cfg.count * Math.PI * 2 + elapsedSeconds * cfg.orbitalSpeed;
+    const radius = cfg.baseRadius + cfg.radiusVariation * Math.sin(elapsedSeconds * cfg.radiusSpeed + i);
+    const posX = radius * Math.cos(angle);
+    const posY = radius * Math.sin(angle);
+    const rotation = elapsedSeconds * cfg.rotationSpeed + i * Math.PI * 2 / cfg.count;
+    const cos = Math.cos(rotation);
+    const sin = Math.sin(rotation);
+    const matrix = new Float32Array([
+      cos * cfg.scale,
+      sin * cfg.scale,
+      0,
+      0,
+      -sin * cfg.scale,
+      cos * cfg.scale,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      posX,
+      posY,
+      0,
+      1
+    ]);
+    transforms.push({
+      matrix,
+      color: cfg.colors[i],
+      index: i
+    });
+  }
+  return transforms;
+}
+function getTriangleTransforms(elapsedSeconds) {
+  const cfg = ANIMATION_CONFIG.triangles;
+  const transforms = [];
+  for (let i = 0; i < cfg.count; i++) {
+    const angle = i / cfg.count * Math.PI * 2 + elapsedSeconds * cfg.orbitalSpeed;
+    const radius = cfg.baseRadius + cfg.radiusVariation * Math.cos(elapsedSeconds * cfg.radiusSpeed + i);
+    const posX = radius * Math.cos(angle);
+    const posY = radius * Math.sin(angle);
+    const rotation = cfg.rotationDirection * elapsedSeconds * cfg.rotationSpeed + i * Math.PI * 2 / cfg.count;
+    const cos = Math.cos(rotation);
+    const sin = Math.sin(rotation);
+    const matrix = new Float32Array([
+      cos * cfg.scale,
+      sin * cfg.scale,
+      0,
+      0,
+      -sin * cfg.scale,
+      cos * cfg.scale,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      posX,
+      posY,
+      0,
+      1
+    ]);
+    transforms.push({
+      matrix,
+      color: cfg.colors[i],
+      index: i
+    });
+  }
+  return transforms;
+}
+const scene = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ANIMATION_CONFIG,
+  GEOMETRY,
+  PROJECTION_CONFIG,
+  PROJECTION_ENTITIES,
+  SCENE_CONFIG,
+  SHADERS_V2,
+  TEXTURE_CONFIG,
+  getBackgroundColor,
+  getQuadTransforms,
+  getTriangleTransforms
+}, Symbol.toStringTag, { value: "Module" }));
+function initializeGameProjection() {
+  const projection = createDefaultProjection();
+  console.log("✓ Game projection initialized:");
+  console.log(
+    `  Tile dimensions: ${projection.tileWidth}x${projection.tileHeight}`
+  );
+  console.log(`  Height scale: ${projection.zScale}`);
+  return projection;
+}
+function updateEntityScreenPosition(entity, projection) {
+  const screenPos = gridToScreen(entity.gridPos, projection);
+  const cellCenter = getCellCenterOffset(projection);
+  entity.screenPos = {
+    xscreen: screenPos.xscreen + cellCenter.xscreen,
+    yscreen: screenPos.yscreen + cellCenter.yscreen
+  };
+  console.log(
+    `✓ ${entity.name} at grid (${entity.gridPos.xgrid}, ${entity.gridPos.ygrid}, ${entity.gridPos.zheight}) → screen (${entity.screenPos.xscreen}, ${entity.screenPos.yscreen})`
+  );
+}
+function createEntity(id, name, gridPos, projection) {
+  const entity = { id, name, gridPos };
+  updateEntityScreenPosition(entity, projection);
+  return entity;
+}
+function calculateGridDistance(from, to) {
+  return Math.abs(to.xgrid - from.xgrid) + Math.abs(to.ygrid - from.ygrid);
+}
+function calculate3DDistance(from, to) {
+  const dx = to.xgrid - from.xgrid;
+  const dy = to.ygrid - from.ygrid;
+  const dz = to.zheight - from.zheight;
+  return Math.sqrt(dx * dx + dy * dy + dz * dz);
+}
+function moveEntityTowards(entity, target, projection) {
+  const dx = Math.sign(target.xgrid - entity.gridPos.xgrid);
+  const dy = Math.sign(target.ygrid - entity.gridPos.ygrid);
+  if (dx !== 0) entity.gridPos.xgrid += dx;
+  if (dy !== 0) entity.gridPos.ygrid += dy;
+  updateEntityScreenPosition(entity, projection);
+  const distance = calculateGridDistance(entity.gridPos, target);
+  console.log(`✓ ${entity.name} moved, distance to target: ${distance} cells`);
+}
+function calculateRenderPriority(gridCoord) {
+  return gridCoord.xgrid + gridCoord.ygrid;
+}
+function sortEntitiesByDepth(entities) {
+  return [...entities].sort(
+    (a, b) => calculateRenderPriority(a.gridPos) - calculateRenderPriority(b.gridPos)
+  );
+}
+function createTerrainHeightMap() {
+  return (x, y) => {
+    const centerX = 10;
+    const centerY = 10;
+    const radius = 5;
+    const distance = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
+    if (distance < radius) {
+      return Math.max(0, 5 * (1 - distance / radius));
+    }
+    return 0;
+  };
+}
+function placeEntityOnTerrain(entity, heightMap, projection) {
+  entity.gridPos.zheight = heightMap(
+    entity.gridPos.xgrid,
+    entity.gridPos.ygrid
+  );
+  updateEntityScreenPosition(entity, projection);
+  console.log(
+    `✓ ${entity.name} placed on terrain at height ${entity.gridPos.zheight}`
+  );
+}
+function createCamera(centerGrid, viewWidthPixels, viewHeightPixels, projection) {
+  return {
+    center: centerGrid,
+    viewWidth: viewWidthPixels,
+    viewHeight: viewHeightPixels
+  };
+}
+function isEntityInView(entity, camera, projection, margin = 50) {
+  if (!entity.screenPos) return false;
+  const cameraScreen = gridToScreen(camera.center, projection);
+  const halfWidth = camera.viewWidth / 2 + margin;
+  const halfHeight = camera.viewHeight / 2 + margin;
+  return Math.abs(entity.screenPos.xscreen - cameraScreen.xscreen) < halfWidth && Math.abs(entity.screenPos.yscreen - cameraScreen.yscreen) < halfHeight;
+}
+function runExampleScenario() {
+  console.log("\n" + "=".repeat(60));
+  console.log("🎮 2.5D Projection System - Example Scenario");
+  console.log("=".repeat(60));
+  const projection = initializeGameProjection();
+  console.log("\n📍 Creating game entities:");
+  const player = createEntity(
+    "player",
+    "Player",
+    { xgrid: 5, ygrid: 5, zheight: 0 },
+    projection
+  );
+  const enemy = createEntity(
+    "enemy1",
+    "Enemy",
+    { xgrid: 10, ygrid: 8, zheight: 0 },
+    projection
+  );
+  const chest = createEntity(
+    "chest1",
+    "Treasure Chest",
+    { xgrid: 8, ygrid: 6, zheight: 0 },
+    projection
+  );
+  console.log("\n🚶 Movement example:");
+  for (let i = 0; i < 3; i++) {
+    moveEntityTowards(player, chest.gridPos, projection);
+  }
+  console.log("\n📏 Distance calculations:");
+  const dist = calculateGridDistance(player.gridPos, enemy.gridPos);
+  const dist3d = calculate3DDistance(player.gridPos, enemy.gridPos);
+  console.log(`  Manhattan distance: ${dist} cells`);
+  console.log(`  3D distance: ${dist3d.toFixed(2)} units`);
+  console.log("\n🎨 Render order (depth sorting):");
+  const entities = [player, enemy, chest];
+  const sorted = sortEntitiesByDepth(entities);
+  sorted.forEach((e, i) => {
+    console.log(
+      `  ${i + 1}. ${e.name} (priority: ${calculateRenderPriority(e.gridPos)})`
+    );
+  });
+  console.log("\n🏔️  Terrain integration:");
+  const heightMap = createTerrainHeightMap();
+  placeEntityOnTerrain(enemy, heightMap, projection);
+  console.log("\n📷 Camera example:");
+  const camera = createCamera(player.gridPos, 800, 600);
+  console.log(
+    `  Camera centered at grid (${camera.center.xgrid}, ${camera.center.ygrid})`
+  );
+  console.log(`  View size: ${camera.viewWidth}x${camera.viewHeight} pixels`);
+  console.log(
+    `  Player in view: ${isEntityInView(player, camera, projection)}`
+  );
+  console.log(`  Enemy in view: ${isEntityInView(enemy, camera, projection)}`);
+  console.log("\n" + "=".repeat(60));
+}
+const BASIC_SHADER = {
+  vertex: `
+attribute vec3 aPosition;
+attribute vec2 aTexCoord;
+
+varying vec2 vTexCoord;
+
+uniform mat4 uMatrix;
+
+void main() {
+  gl_Position = uMatrix * vec4(aPosition, 1.0);
+  vTexCoord = aTexCoord;
+}
+`,
+  fragment: `
+varying vec2 vTexCoord;
+uniform sampler2D uTexture;
+uniform vec3 uColor;
+
+void main() {
+  vec4 texColor = texture2D(uTexture, vTexCoord);
+  gl_FragColor = vec4(texColor.rgb * uColor, texColor.a);
+}
+`,
+  uniforms: ["uMatrix", "uTexture", "uColor"],
+  attributes: ["aPosition", "aTexCoord"]
+};
+const GLOW_SHADER = {
+  vertex: `
+attribute vec3 aPosition;
+attribute vec2 aTexCoord;
+
+varying vec2 vTexCoord;
+varying float vDistance;
+
+uniform mat4 uMatrix;
+
+void main() {
+  gl_Position = uMatrix * vec4(aPosition, 1.0);
+  vTexCoord = aTexCoord;
+  // Distance from center for glow falloff
+  vDistance = length(aTexCoord - vec2(0.5, 0.5));
+}
+`,
+  fragment: `
+varying vec2 vTexCoord;
+varying float vDistance;
+uniform sampler2D uTexture;
+uniform vec3 uColor;
+uniform float uGlowIntensity;
+
+void main() {
+  vec4 texColor = texture2D(uTexture, vTexCoord);
+  float glow = 1.0 - vDistance * 2.0;
+  glow = max(0.0, glow);
+  vec3 glowColor = texColor.rgb * uColor * glow * uGlowIntensity;
+  gl_FragColor = vec4(glowColor, texColor.a);
+}
+`,
+  uniforms: ["uMatrix", "uTexture", "uColor", "uGlowIntensity"],
+  attributes: ["aPosition", "aTexCoord"]
+};
+const WAVE_SHADER = {
+  vertex: `
+attribute vec3 aPosition;
+attribute vec2 aTexCoord;
+
+varying vec2 vTexCoord;
+
+uniform mat4 uMatrix;
+uniform float uTime;
+uniform float uWaveAmount;
+
+void main() {
+  vec3 pos = aPosition;
+  // Apply wave deformation
+  pos.y += sin(aPosition.x * 3.14159 + uTime) * uWaveAmount;
+  pos.x += cos(aPosition.y * 3.14159 + uTime * 0.7) * uWaveAmount * 0.5;
+  
+  gl_Position = uMatrix * vec4(pos, 1.0);
+  vTexCoord = aTexCoord;
+}
+`,
+  fragment: `
+varying vec2 vTexCoord;
+uniform sampler2D uTexture;
+uniform vec3 uColor;
+
+void main() {
+  vec4 texColor = texture2D(uTexture, vTexCoord);
+  gl_FragColor = vec4(texColor.rgb * uColor, texColor.a);
+}
+`,
+  uniforms: ["uMatrix", "uTexture", "uColor", "uTime", "uWaveAmount"],
+  attributes: ["aPosition", "aTexCoord"]
+};
+const NEON_SHADER = {
+  vertex: `
+attribute vec3 aPosition;
+attribute vec2 aTexCoord;
+
+varying vec2 vTexCoord;
+varying vec3 vNormal;
+
+uniform mat4 uMatrix;
+
+void main() {
+  gl_Position = uMatrix * vec4(aPosition, 1.0);
+  vTexCoord = aTexCoord;
+  // Simple normal based on position
+  vNormal = normalize(aPosition);
+}
+`,
+  fragment: `
+varying vec2 vTexCoord;
+varying vec3 vNormal;
+uniform sampler2D uTexture;
+uniform vec3 uColor;
+
+void main() {
+  vec4 texColor = texture2D(uTexture, vTexCoord);
+  
+  // High contrast
+  vec3 enhanced = pow(texColor.rgb * uColor, vec3(0.5));
+  
+  // Edge highlight
+  float edge = abs(vNormal.x) + abs(vNormal.y);
+  edge = smoothstep(0.3, 1.0, edge) * 0.5;
+  
+  vec3 neonColor = enhanced + edge * uColor;
+  gl_FragColor = vec4(neonColor, texColor.a);
+}
+`,
+  uniforms: ["uMatrix", "uTexture", "uColor"],
+  attributes: ["aPosition", "aTexCoord"]
+};
+const HOLOGRAM_SHADER = {
+  vertex: `
+attribute vec3 aPosition;
+attribute vec2 aTexCoord;
+
+varying vec2 vTexCoord;
+
+uniform mat4 uMatrix;
+
+void main() {
+  gl_Position = uMatrix * vec4(aPosition, 1.0);
+  vTexCoord = aTexCoord;
+}
+`,
+  fragment: `
+varying vec2 vTexCoord;
+uniform sampler2D uTexture;
+uniform vec3 uColor;
+uniform float uTime;
+
+void main() {
+  vec4 texColor = texture2D(uTexture, vTexCoord);
+  
+  // Scan lines
+  float scanLine = sin(vTexCoord.y * 50.0) * 0.1 + 0.9;
+  
+  // Flicker transparency
+  float flicker = 0.8 + 0.2 * sin(uTime * 5.0 + vTexCoord.x * 10.0);
+  
+  vec3 hologramColor = texColor.rgb * uColor * scanLine;
+  gl_FragColor = vec4(hologramColor, texColor.a * flicker);
+}
+`,
+  uniforms: ["uMatrix", "uTexture", "uColor", "uTime"],
+  attributes: ["aPosition", "aTexCoord"]
+};
+const CHROMATIC_SHADER = {
+  vertex: `
+attribute vec3 aPosition;
+attribute vec2 aTexCoord;
+
+varying vec2 vTexCoord;
+
+uniform mat4 uMatrix;
+
+void main() {
+  gl_Position = uMatrix * vec4(aPosition, 1.0);
+  vTexCoord = aTexCoord;
+}
+`,
+  fragment: `
+varying vec2 vTexCoord;
+uniform sampler2D uTexture;
+uniform vec3 uColor;
+uniform float uAberration;
+
+void main() {
+  float offset = uAberration * 0.01;
+  
+  float r = texture2D(uTexture, vTexCoord + vec2(offset, 0.0)).r;
+  float g = texture2D(uTexture, vTexCoord).g;
+  float b = texture2D(uTexture, vTexCoord - vec2(offset, 0.0)).b;
+  
+  vec3 aberrated = vec3(r, g, b) * uColor;
+  gl_FragColor = vec4(aberrated, 1.0);
+}
+`,
+  uniforms: ["uMatrix", "uTexture", "uColor", "uAberration"],
+  attributes: ["aPosition", "aTexCoord"]
+};
+const PSYCHEDELIC_SHADER = {
+  vertex: `
+attribute vec3 aPosition;
+attribute vec2 aTexCoord;
+
+varying vec2 vTexCoord;
+
+uniform mat4 uMatrix;
+
+void main() {
+  gl_Position = uMatrix * vec4(aPosition, 1.0);
+  vTexCoord = aTexCoord;
+}
+`,
+  fragment: `
+varying vec2 vTexCoord;
+uniform sampler2D uTexture;
+uniform float uTime;
+
+void main() {
+  vec4 texColor = texture2D(uTexture, vTexCoord);
+  
+  // Rainbow shift based on position and time
+  float hue = atan(vTexCoord.y - 0.5, vTexCoord.x - 0.5) / 3.14159;
+  hue += uTime;
+  
+  float r = sin(hue) * 0.5 + 0.5;
+  float g = sin(hue + 2.094) * 0.5 + 0.5;
+  float b = sin(hue + 4.188) * 0.5 + 0.5;
+  
+  vec3 rainbow = vec3(r, g, b);
+  gl_FragColor = vec4(texColor.rgb * rainbow, texColor.a);
+}
+`,
+  uniforms: ["uMatrix", "uTexture", "uTime"],
+  attributes: ["aPosition", "aTexCoord"]
+};
+const SHADER_LIBRARY = {
+  BASIC: BASIC_SHADER,
+  GLOW: GLOW_SHADER,
+  WAVE: WAVE_SHADER,
+  NEON: NEON_SHADER,
+  HOLOGRAM: HOLOGRAM_SHADER,
+  CHROMATIC: CHROMATIC_SHADER,
+  PSYCHEDELIC: PSYCHEDELIC_SHADER
+};
+class BrowserRenderingContext {
+  constructor(options) {
+    this.isBrowser = true;
+    if (!options.canvas) {
+      this.canvas = document.createElement("canvas");
+      document.body.appendChild(this.canvas);
+    } else {
+      this.canvas = options.canvas;
+    }
+    this.width = options.width;
+    this.height = options.height;
+    this.canvas.width = this.width;
+    this.canvas.height = this.height;
+    const contextAttributes = {
+      alpha: false,
+      ...options.contextAttributes
+    };
+    const glContext = this.canvas.getContext("webgl", contextAttributes);
+    if (!glContext) {
+      throw new Error("Failed to initialize WebGL context in browser");
+    }
+    this.glContext = glContext;
+  }
+  resize(width, height) {
+    this.width = width;
+    this.height = height;
+    this.canvas.width = width;
+    this.canvas.height = height;
+    this.glContext.viewport(0, 0, width, height);
+  }
+  getViewport() {
+    return { width: this.width, height: this.height };
+  }
+  clear(color) {
+    if (color) {
+      this.glContext.clearColor(color.r, color.g, color.b, color.a);
+    }
+    this.glContext.clear(
+      this.glContext.COLOR_BUFFER_BIT | this.glContext.DEPTH_BUFFER_BIT
+    );
+  }
+  present() {
+  }
+  dispose() {
+    if (this.canvas.parentElement) {
+      this.canvas.parentElement.removeChild(this.canvas);
+    }
+  }
+  /**
+   * Get the underlying canvas element (browser-specific)
+   */
+  getCanvas() {
+    return this.canvas;
+  }
+}
+class NodeRenderingContext {
+  constructor(options) {
+    this.isBrowser = false;
+    this.width = options.width;
+    this.height = options.height;
+    const glContext = createGL(this.width, this.height, {
+      preserveDrawingBuffer: options.preserveDrawingBuffer ?? true,
+      ...options.contextAttributes
+    });
+    if (!glContext) {
+      throw new Error("Failed to initialize WebGL context in Node.js");
+    }
+    this.glContext = glContext;
+  }
+  resize(width, height) {
+    this.width = width;
+    this.height = height;
+    console.warn(
+      "NodeRenderingContext: Resize requested but not supported. Consider recreating context."
+    );
+  }
+  getViewport() {
+    return { width: this.width, height: this.height };
+  }
+  clear(color) {
+    if (color) {
+      this.glContext.clearColor(color.r, color.g, color.b, color.a);
+    }
+    this.glContext.clear(
+      this.glContext.COLOR_BUFFER_BIT | this.glContext.DEPTH_BUFFER_BIT
+    );
+  }
+  present() {
+    this.glContext.flush();
+  }
+  dispose() {
+    this.glContext.flush();
+  }
+  /**
+   * Read the current framebuffer contents as RGBA pixel data
+   * Used for capturing frames for display or saving
+   */
+  readPixels() {
+    const pixelData = new Uint8Array(this.width * this.height * 4);
+    this.glContext.readPixels(
+      0,
+      0,
+      this.width,
+      this.height,
+      this.glContext.RGBA,
+      this.glContext.UNSIGNED_BYTE,
+      pixelData
+    );
+    return pixelData;
+  }
+}
+class RenderingContextFactory {
+  /**
+   * Detect if running in a browser environment
+   */
+  static isBrowserEnvironment() {
+    return typeof window !== "undefined" && typeof document !== "undefined";
+  }
+  /**
+   * Create a rendering context appropriate for the current environment
+   */
+  static createContext(options) {
+    if (this.isBrowserEnvironment()) {
+      return new BrowserRenderingContext(options);
+    } else {
+      return new NodeRenderingContext(options);
+    }
+  }
+  /**
+   * Create a browser-specific rendering context
+   */
+  static createBrowserContext(options) {
+    return new BrowserRenderingContext(options);
+  }
+  /**
+   * Create a Node.js-specific rendering context
+   */
+  static createNodeContext(options) {
+    return new NodeRenderingContext(options);
+  }
+}
+class Shader {
+  /**
+   * Create a new shader program
+   * @param gl WebGL rendering context
+   * @param vertexSource Raw vertex shader source code
+   * @param fragmentSource Raw fragment shader source code
+   * @param isBrowser Whether running in browser environment (affects precision header)
+   */
+  constructor(gl2, vertexSource, fragmentSource, isBrowser) {
+    this.gl = gl2;
+    const processedVertexSource = this.injectPrecisionHeader(
+      vertexSource,
+      isBrowser
+    );
+    const processedFragmentSource = this.injectPrecisionHeader(
+      fragmentSource,
+      isBrowser
+    );
+    this.vertexShader = this.compileShader(
+      processedVertexSource,
+      gl2.VERTEX_SHADER
+    );
+    this.fragmentShader = this.compileShader(
+      processedFragmentSource,
+      gl2.FRAGMENT_SHADER
+    );
+    this.program = this.linkProgram(this.vertexShader, this.fragmentShader);
+  }
+  /**
+   * Inject precision header for ES and desktop OpenGL differences
+   * @param source Original shader source
+   * @param isBrowser Whether in browser (WebGL ES) or Node (desktop OpenGL)
+   * @returns Processed shader source with precision header
+   */
+  injectPrecisionHeader(source, isBrowser) {
+    if (source.includes("#ifdef GL_ES") || source.includes("precision")) {
+      return source;
+    }
+    if (isBrowser) {
+      const precisionHeader = `#ifdef GL_ES
+precision highp float;
+#endif
+`;
+      return precisionHeader + source;
+    } else {
+      const precisionHeader = `#ifdef GL_ES
+precision highp float;
+#endif
+`;
+      return precisionHeader + source;
+    }
+  }
+  /**
+   * Compile a single shader (vertex or fragment)
+   * @param source Shader source code
+   * @param type gl.VERTEX_SHADER or gl.FRAGMENT_SHADER
+   * @returns Compiled shader
+   */
+  compileShader(source, type) {
+    const shader2 = this.gl.createShader(type);
+    if (!shader2) {
+      throw new Error(`Failed to create shader of type ${type}`);
+    }
+    this.gl.shaderSource(shader2, source);
+    this.gl.compileShader(shader2);
+    const compiled = this.gl.getShaderParameter(shader2, this.gl.COMPILE_STATUS);
+    if (!compiled) {
+      const infoLog = this.gl.getShaderInfoLog(shader2);
+      const shaderType = type === this.gl.VERTEX_SHADER ? "vertex" : "fragment";
+      this.gl.deleteShader(shader2);
+      throw new Error(
+        `Failed to compile ${shaderType} shader:
+${infoLog}
+
+Source:
+${source}`
+      );
+    }
+    return shader2;
+  }
+  /**
+   * Link vertex and fragment shaders into a program
+   * @param vertexShader Compiled vertex shader
+   * @param fragmentShader Compiled fragment shader
+   * @returns Linked shader program
+   */
+  linkProgram(vertexShader, fragmentShader) {
+    const program = this.gl.createProgram();
+    if (!program) {
+      throw new Error("Failed to create shader program");
+    }
+    this.gl.attachShader(program, vertexShader);
+    this.gl.attachShader(program, fragmentShader);
+    this.gl.linkProgram(program);
+    const linked = this.gl.getProgramParameter(program, this.gl.LINK_STATUS);
+    if (!linked) {
+      const infoLog = this.gl.getProgramInfoLog(program);
+      this.gl.deleteProgram(program);
+      this.gl.deleteShader(vertexShader);
+      this.gl.deleteShader(fragmentShader);
+      throw new Error(`Failed to link shader program:
+${infoLog}`);
+    }
+    return program;
+  }
+  /**
+   * Get the compiled shader program
+   */
+  getProgram() {
+    return this.program;
+  }
+  /**
+   * Get uniform location by name
+   * @param name Uniform variable name
+   */
+  getUniformLocation(name) {
+    return this.gl.getUniformLocation(this.program, name);
+  }
+  /**
+   * Get attribute location by name
+   * @param name Attribute variable name
+   */
+  getAttributeLocation(name) {
+    return this.gl.getAttribLocation(this.program, name);
+  }
+  /**
+   * Use this shader program
+   */
+  use() {
+    this.gl.useProgram(this.program);
+  }
+  /**
+   * Clean up shader resources
+   */
+  dispose() {
+    this.gl.deleteProgram(this.program);
+    this.gl.deleteShader(this.vertexShader);
+    this.gl.deleteShader(this.fragmentShader);
+  }
+}
+const shader = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Shader
+}, Symbol.toStringTag, { value: "Module" }));
+class GraphicsDevice {
+  constructor(width, height) {
+    this.context = RenderingContextFactory.createContext({
+      width,
+      height,
+      preserveDrawingBuffer: true
+    });
+  }
+  /**
+   * Get the underlying WebGL rendering context
+   */
+  getGLContext() {
+    return this.context.glContext;
+  }
+  /**
+   * Get the rendering context
+   */
+  getRenderingContext() {
+    return this.context;
+  }
+  /**
+   * Get current width
+   */
+  getWidth() {
+    return this.context.width;
+  }
+  /**
+   * Get current height
+   */
+  getHeight() {
+    return this.context.height;
+  }
+  /**
+   * Get viewport dimensions
+   */
+  getViewport() {
+    return this.context.getViewport();
+  }
+  /**
+   * Check if running in browser
+   */
+  isBrowser() {
+    return this.context.isBrowser;
+  }
+  /**
+   * Resize the graphics device
+   */
+  resize(width, height) {
+    this.context.resize(width, height);
+  }
+  /**
+   * Clear the rendering surface
+   */
+  clear(color) {
+    this.context.clear(color);
+  }
+  /**
+   * Present the rendered frame
+   */
+  present() {
+    this.context.present();
+  }
+  /**
+   * Cleanup and release resources
+   */
+  dispose() {
+    this.context.dispose();
+  }
+  /**
+   * Create a shader program
+   * @param vertexSource Vertex shader source code
+   * @param fragmentSource Fragment shader source code
+   * @returns Compiled and linked shader program
+   */
+  createShader(vertexSource, fragmentSource) {
+    return new Shader(
+      this.context.glContext,
+      vertexSource,
+      fragmentSource,
+      this.context.isBrowser
+    );
+  }
+}
+const grahpicDevice = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  GraphicsDevice
+}, Symbol.toStringTag, { value: "Module" }));
+console.log(
+  "🩸 Bloody Engine - Texture & Shader Demo + Projection Visualization + Resource Loader"
+);
+const WIDTH = SCENE_CONFIG.width;
+const HEIGHT = SCENE_CONFIG.height;
+async function runResourceLoaderDemo() {
+  console.log("\n" + "=".repeat(60));
+  console.log("📦 RESOURCE LOADER DEMO (Node.js)");
+  console.log("=".repeat(60));
+  const { ResourceLoaderFactory, Environment } = await import("./resource-loader-factory-DQ-PAVcN.js");
+  const { createResourcePipeline } = await import("./resource-pipeline-Dac9qRso.js");
+  const { GraphicsDevice: GraphicsDevice2 } = await Promise.resolve().then(() => grahpicDevice);
+  const { Shader: Shader2 } = await Promise.resolve().then(() => shader);
+  const { Texture: Texture2 } = await Promise.resolve().then(() => texture);
+  const { VertexBuffer: VertexBuffer2 } = await Promise.resolve().then(() => buffer);
+  console.log(
+    `✓ Environment detected: ${ResourceLoaderFactory.detectEnvironment()}`
+  );
+  const pipeline = await createResourcePipeline({
+    concurrency: 5,
+    cache: true,
+    baseDir: process.cwd()
+  });
+  console.log("✓ Resource pipeline created for Node.js");
+  const shaders = [
+    {
+      name: "basic",
+      vertex: "resources/shaders/basic.vert",
+      fragment: "resources/shaders/basic.frag"
+    },
+    {
+      name: "glow",
+      vertex: "resources/shaders/glow.vert",
+      fragment: "resources/shaders/glow.frag"
+    }
+  ];
+  console.log(`
+📝 Loading ${shaders.length} shaders from disk...`);
+  const loadedShaders = await pipeline.loadShaders(shaders);
+  for (const shader2 of loadedShaders) {
+    console.log(`  ✓ ${shader2.name}:`);
+    console.log(`    Vertex: ${shader2.vertex.length} chars`);
+    console.log(`    Fragment: ${shader2.fragment.length} chars`);
+  }
+  console.log(`
+💾 Cache size: ${pipeline.getCacheSize()} resources`);
+  const gdevice2 = new GraphicsDevice2(800, 600);
+  const gl2 = gdevice2.getGLContext();
+  console.log(`✓ Graphics device initialized (800x600)`);
+  const glowShader = loadedShaders.find((s) => s.name === "glow");
+  const shader$1 = gdevice2.createShader(glowShader.vertex, glowShader.fragment);
+  console.log("✓ Shader compiled from loaded files");
+  const texture$1 = Texture2.createGradient(gl2, 256, 256);
+  console.log("✓ Gradient texture created");
+  const quadBuffer = new VertexBuffer2(
+    gl2,
+    GEOMETRY.quad.vertices,
+    GEOMETRY.quad.stride
+  );
+  console.log(
+    `✓ Quad buffer created (${quadBuffer.getVertexCount()} vertices)`
+  );
+  shader$1.use();
+  const posAttr = shader$1.getAttributeLocation("aPosition");
+  const texCoordAttr = shader$1.getAttributeLocation("aTexCoord");
+  const textureUniform = shader$1.getUniformLocation("uTexture");
+  const matrixUniform = shader$1.getUniformLocation("uMatrix");
+  const colorUniform = shader$1.getUniformLocation("uColor");
+  const glowIntensityUniform = shader$1.getUniformLocation("uGlowIntensity");
+  quadBuffer.bind();
+  gl2.enableVertexAttribArray(posAttr);
+  gl2.vertexAttribPointer(posAttr, 3, gl2.FLOAT, false, GEOMETRY.quad.stride, 0);
+  gl2.enableVertexAttribArray(texCoordAttr);
+  gl2.vertexAttribPointer(
+    texCoordAttr,
+    2,
+    gl2.FLOAT,
+    false,
+    GEOMETRY.quad.stride,
+    3 * 4
+  );
+  texture$1.bind(0);
+  gl2.uniform1i(textureUniform, 0);
+  gdevice2.clear({ r: 0.1, g: 0.1, b: 0.1, a: 1 });
+  const testQuads = [
+    { x: -0.3, y: 0.3, color: [1, 0.2, 0.2], glow: 1.5 },
+    { x: 0.3, y: 0.3, color: [0.2, 1, 0.2], glow: 1.8 },
+    { x: -0.3, y: -0.3, color: [0.2, 0.5, 1], glow: 2 },
+    { x: 0.3, y: -0.3, color: [1, 1, 0.2], glow: 1.6 }
+  ];
+  for (const quad of testQuads) {
+    const matrix = createIdentityMatrix();
+    translateMatrix(matrix, quad.x, quad.y, 0);
+    scaleMatrix(matrix, 0.4, 0.4, 1);
+    if (matrixUniform) gl2.uniformMatrix4fv(matrixUniform, false, matrix);
+    if (colorUniform)
+      gl2.uniform3f(colorUniform, quad.color[0], quad.color[1], quad.color[2]);
+    if (glowIntensityUniform) gl2.uniform1f(glowIntensityUniform, quad.glow);
+    gl2.drawArrays(gl2.TRIANGLES, 0, quadBuffer.getVertexCount());
+  }
+  const renderingContext2 = gdevice2.getRenderingContext();
+  const pixelData = renderingContext2.readPixels();
+  const ppmPath = "./resource-loader-demo-output.ppm";
+  savePPM(pixelData, 800, 600, ppmPath);
+  console.log(`✓ Test frame rendered and saved to ${ppmPath}`);
+  console.log("✓ Resource loader demo complete!\n");
+  quadBuffer.dispose();
+  texture$1.dispose();
+  shader$1.dispose();
+  gdevice2.dispose();
+}
+function savePPM(pixelData, width, height, outputPath) {
+  const ppmHeader = `P6
+${width} ${height}
+255
+`;
+  const ppmData = Buffer.alloc(3 * width * height);
+  for (let i = 0; i < width * height; i++) {
+    const srcIdx = i * 4;
+    const dstIdx = i * 3;
+    ppmData[dstIdx] = pixelData[srcIdx];
+    ppmData[dstIdx + 1] = pixelData[srcIdx + 1];
+    ppmData[dstIdx + 2] = pixelData[srcIdx + 2];
+  }
+  fs.writeFileSync(outputPath, ppmHeader);
+  fs.appendFileSync(outputPath, ppmData);
+}
+function createIdentityMatrix() {
+  return new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+}
+function translateMatrix(mat, x, y, z) {
+  mat[12] += x;
+  mat[13] += y;
+  mat[14] += z;
+}
+function scaleMatrix(mat, x, y, z) {
+  mat[0] *= x;
+  mat[5] *= y;
+  mat[10] *= z;
+}
+runResourceLoaderDemo().catch((error) => {
+  console.error("❌ Resource loader demo failed:", error);
+});
+const gdevice = new GraphicsDevice(WIDTH, HEIGHT);
+const gl = gdevice.getGLContext();
+const renderingContext = gdevice.getRenderingContext();
+let sdlWindow = null;
+try {
+  sdlWindow = new SDLWindow(WIDTH, HEIGHT, "Bloody Engine - Live Rendering");
+} catch (error) {
+  console.warn("⚠ SDL window creation failed:", error);
+  console.log("Running in headless mode - output will be saved to file only");
+}
+console.log(`✓ Graphics device initialized (${WIDTH}x${HEIGHT})`);
+console.log(
+  `✓ Environment: ${gdevice.isBrowser() ? "Browser (WebGL)" : "Node.js (headless-gl)"}`
+);
+console.log("\n✨ Setting up Projection Visualization System...");
+console.log("\n📊 Running projection example scenario:");
+runExampleScenario();
+const projectionEntities = PROJECTION_ENTITIES.map(
+  (entity) => {
+    const screenPos = gridToScreen(entity.gridPos, PROJECTION_CONFIG);
+    return {
+      gridPos: entity.gridPos,
+      screenPos,
+      color: entity.color,
+      size: entity.size,
+      name: entity.name
+    };
+  }
+);
+console.log(
+  `✓ ${projectionEntities.length} projection entities prepared for visualization`
+);
+console.log("\n📍 Projection Entities:");
+projectionEntities.forEach((entity) => {
+  console.log(
+    `  • ${entity.name} at grid (${entity.gridPos.xgrid}, ${entity.gridPos.ygrid}, ${entity.gridPos.zheight}) → screen (${entity.screenPos.xscreen.toFixed(0)}, ${entity.screenPos.yscreen.toFixed(0)})`
+  );
+});
+const ACTIVE_SHADER = "PSYCHEDELIC";
+const shaderPreset = SHADER_LIBRARY[ACTIVE_SHADER];
+const vertexShaderSource = shaderPreset.vertex;
+const fragmentShaderSource = shaderPreset.fragment;
+async function runSpriteBatchRendererV2Demo() {
+  console.log("\n" + "=".repeat(60));
+  console.log("🎨 SPRITE BATCH RENDERER V2 DEMO (2.5D Sprites)");
+  console.log("=".repeat(60));
+  const { SpriteBatchRenderer } = await import("./batch-renderer-JqZ4TYcL.js");
+  const { Camera } = await import("./camera-A8EGrk7U.js");
+  const gdevice2 = new GraphicsDevice(WIDTH, HEIGHT);
+  const gl2 = gdevice2.getGLContext();
+  const renderingContext2 = gdevice2.getRenderingContext();
+  let sdlWindow2 = null;
+  try {
+    sdlWindow2 = new SDLWindow(WIDTH, HEIGHT, "Bloody Engine - V2 Sprites + Camera");
+  } catch (error) {
+    console.warn("⚠ SDL window creation failed, running in headless mode");
+  }
+  console.log(`✓ Graphics device initialized (${WIDTH}x${HEIGHT})`);
+  const { SHADERS_V2: SHADERS_V22 } = await Promise.resolve().then(() => scene);
+  const shader2 = gdevice2.createShader(SHADERS_V22.vertex, SHADERS_V22.fragment);
+  console.log("✓ V2 Shader compiled (supports color tint and texture index)");
+  const texture2 = Texture.createGradient(gl2, 256, 256);
+  console.log("✓ Gradient texture created");
+  const spriteBatchRenderer = new SpriteBatchRenderer(gl2, shader2, 1e3);
+  spriteBatchRenderer.setTexture(texture2);
+  console.log("✓ Sprite batch renderer created (V2)");
+  const camera = new Camera(0, 0, 1);
+  console.log("✓ Camera created");
+  console.log("\n🎮 Camera Controls:");
+  console.log("  • WASD / Arrow Keys - Move camera");
+  console.log("  • Q / E - Zoom out / in");
+  console.log("  • R - Reset camera");
+  console.log("  • ESC - Exit demo");
+  const keys = /* @__PURE__ */ new Set();
+  const moveSpeed = 0.5;
+  const zoomSpeed = 2;
+  let startTime = Date.now();
+  let frameCount = 0;
+  let lastTime = startTime;
+  if (sdlWindow2) {
+    sdlWindow2.on("keyDown", (event) => {
+      keys.add(event.key.toLowerCase());
+      if (event.key.toLowerCase() === "r") {
+        camera.reset();
+        console.log("📷 Camera reset to default position");
+      }
+    });
+    sdlWindow2.on("keyUp", (event) => {
+      keys.delete(event.key.toLowerCase());
+    });
+  }
+  function getSpriteQuadsForFrame(elapsedSeconds) {
+    const quads = [];
+    const angle1 = elapsedSeconds * 2;
+    quads.push({
+      x: 0,
+      y: 0,
+      z: -0.5,
+      width: 0.3,
+      height: 0.3,
+      rotation: angle1,
+      color: { r: 1, g: 0.2, b: 0.2, a: 0.7 },
+      texIndex: 0
+    });
+    const angle2 = elapsedSeconds * 1.5;
+    const orbitRadius2 = 0.4;
+    quads.push({
+      x: Math.cos(angle2) * orbitRadius2,
+      y: Math.sin(angle2) * orbitRadius2,
+      z: 0,
+      width: 0.25,
+      height: 0.25,
+      rotation: -angle2,
+      color: { r: 0.2, g: 1, b: 0.2, a: 1 },
+      texIndex: 0
+    });
+    const angle3 = elapsedSeconds * 0.8;
+    const orbitRadius3 = 0.5;
+    quads.push({
+      x: Math.cos(angle3 * 2) * orbitRadius3,
+      y: Math.sin(angle3) * orbitRadius3,
+      z: 0.5,
+      width: 0.2,
+      height: 0.2,
+      rotation: angle3 * 3,
+      color: { r: 0.2, g: 0.5, b: 1, a: 0.9 },
+      texIndex: 0
+    });
+    const bounce = 0.3 * Math.sin(elapsedSeconds * 3);
+    quads.push({
+      x: -0.4,
+      y: bounce,
+      z: 0.2,
+      width: 0.2,
+      height: 0.2,
+      rotation: elapsedSeconds * 4,
+      color: { r: 1, g: 1, b: 0.2, a: 1 },
+      uvRect: { uMin: 0, vMin: 0, uMax: 0.5, vMax: 0.5 },
+      texIndex: 0
+    });
+    const pulse = 0.15 + 0.1 * Math.sin(elapsedSeconds * 2.5);
+    const pulseColor = 0.5 + 0.5 * Math.sin(elapsedSeconds * 3);
+    quads.push({
+      x: 0.4,
+      y: 0,
+      z: -0.2,
+      width: pulse,
+      height: pulse,
+      rotation: -elapsedSeconds,
+      color: { r: 0.2, g: pulseColor, b: pulseColor, a: 1 },
+      texIndex: 0
+    });
+    const angle6 = elapsedSeconds * 1.2;
+    const r6 = 0.35 + 0.15 * Math.sin(elapsedSeconds * 2);
+    quads.push({
+      x: Math.cos(angle6) * r6,
+      y: Math.sin(angle6 * 2) * r6,
+      z: 0.3,
+      width: 0.18,
+      height: 0.18,
+      rotation: elapsedSeconds * 2.5,
+      color: { r: 1, g: 0.2, b: 1, a: 0.8 },
+      uvRect: { uMin: 0.5, vMin: 0.5, uMax: 1, vMax: 1 },
+      texIndex: 1
+    });
+    return quads;
+  }
+  function renderFrame() {
+    const now = Date.now();
+    const deltaTime = (now - lastTime) / 1e3;
+    const elapsedSeconds = (now - startTime) / 1e3;
+    lastTime = now;
+    let cameraMoved = false;
+    const moveAmount = moveSpeed * deltaTime;
+    if (keys.has("w") || keys.has("arrowup")) {
+      camera.y += moveAmount;
+      cameraMoved = true;
+    }
+    if (keys.has("s") || keys.has("arrowdown")) {
+      camera.y -= moveAmount;
+      cameraMoved = true;
+    }
+    if (keys.has("a") || keys.has("arrowleft")) {
+      camera.x -= moveAmount;
+      cameraMoved = true;
+    }
+    if (keys.has("d") || keys.has("arrowright")) {
+      camera.x += moveAmount;
+      cameraMoved = true;
+    }
+    const zoomFactor = 1 + (zoomSpeed - 1) * deltaTime;
+    if (keys.has("q")) {
+      camera.zoomBy(1 / zoomFactor);
+      cameraMoved = true;
+    }
+    if (keys.has("e")) {
+      camera.zoomBy(zoomFactor);
+      cameraMoved = true;
+    }
+    if (cameraMoved && frameCount % 30 === 0) {
+      console.log(
+        `📷 Camera: x=${camera.x.toFixed(2)}, y=${camera.y.toFixed(2)}, zoom=${camera.zoom.toFixed(2)}x`
+      );
+    }
+    const quads = getSpriteQuadsForFrame(elapsedSeconds);
+    spriteBatchRenderer.clear();
+    for (const quad of quads) {
+      spriteBatchRenderer.addQuad(quad);
+    }
+    gdevice2.clear({ r: 0.1, g: 0.1, b: 0.12, a: 1 });
+    spriteBatchRenderer.render(camera);
+    gdevice2.present();
+    if (sdlWindow2 && sdlWindow2.isOpen()) {
+      const pixelData = renderingContext2.readPixels();
+      sdlWindow2.updatePixels(pixelData);
+    }
+    frameCount++;
+  }
+  console.log("\n🎬 Starting render loop (press ESC to exit)...");
+  const frames = [];
+  const renderStart = Date.now();
+  let running = true;
+  if (sdlWindow2) {
+    sdlWindow2.on("close", () => {
+      running = false;
+    });
+    sdlWindow2.on("keyDown", (event) => {
+      if (event.key === "escape") {
+        running = false;
+        console.log("\n✓ Exiting demo...");
+      }
+    });
+  }
+  while (running && (!sdlWindow2 || sdlWindow2.isOpen())) {
+    renderFrame();
+    if (frameCount === 1) {
+      const pixelData = renderingContext2.readPixels();
+      frames.push(Buffer.from(pixelData));
+    }
+    await new Promise((resolve) => setTimeout(resolve, 16));
+  }
+  const renderEnd = Date.now();
+  const renderTime = (renderEnd - renderStart) / 1e3;
+  const avgFPS = frameCount / renderTime;
+  console.log(`✓ Rendered ${frameCount} frames in ${renderTime.toFixed(2)}s`);
+  console.log(`✓ Average FPS: ${avgFPS.toFixed(1)}`);
+  console.log(
+    `✓ Sprite batch renderer tested with ${spriteBatchRenderer.getQuadCount()} sprites`
+  );
+  if (frames.length > 0) {
+    const pixelData = frames[0];
+    const ppmHeader = `P6
+${WIDTH} ${HEIGHT}
+255
+`;
+    const ppmData = Buffer.alloc(3 * WIDTH * HEIGHT);
+    for (let i = 0; i < WIDTH * HEIGHT; i++) {
+      const srcIdx = i * 4;
+      const dstIdx = i * 3;
+      ppmData[dstIdx] = pixelData[srcIdx];
+      ppmData[dstIdx + 1] = pixelData[srcIdx + 1];
+      ppmData[dstIdx + 2] = pixelData[srcIdx + 2];
+    }
+    const ppmPath = "./sprite-batch-renderer-v2-demo.ppm";
+    fs.writeFileSync(ppmPath, ppmHeader);
+    fs.appendFileSync(ppmPath, ppmData);
+    console.log(`✓ First frame saved to ${ppmPath}`);
+  }
+  spriteBatchRenderer.dispose();
+  gdevice2.dispose();
+  if (sdlWindow2) {
+    sdlWindow2.cleanup();
+  }
+  console.log("✓ Sprite batch renderer demo complete!\n");
+}
+(async () => {
+  try {
+    console.log("\n--- Setting up Textured Quad ---");
+    const shader2 = gdevice.createShader(
+      vertexShaderSource,
+      fragmentShaderSource
+    );
+    console.log(`✓ Shader compiled and linked (${ACTIVE_SHADER})`);
+    const quadVertices = GEOMETRY.quad.vertices;
+    const vertexBuffer = new VertexBuffer(
+      gl,
+      quadVertices,
+      GEOMETRY.quad.stride
+    );
+    console.log(
+      `✓ Vertex buffer created (${vertexBuffer.getVertexCount()} vertices)`
+    );
+    const triangleVertices = GEOMETRY.triangle.vertices;
+    const triangleBuffer = new VertexBuffer(
+      gl,
+      triangleVertices,
+      GEOMETRY.triangle.stride
+    );
+    console.log(
+      `✓ Triangle buffer created (${triangleBuffer.getVertexCount()} vertices)`
+    );
+    const texture2 = Texture.createGradient(
+      gl,
+      TEXTURE_CONFIG.size,
+      TEXTURE_CONFIG.size
+    );
+    console.log("✓ Gradient texture created (256x256)");
+    const posAttr = shader2.getAttributeLocation("aPosition");
+    const texCoordAttr = shader2.getAttributeLocation("aTexCoord");
+    const textureUniform = shader2.getUniformLocation("uTexture");
+    const matrixUniform = shader2.getUniformLocation("uMatrix");
+    const colorUniform = shader2.getUniformLocation("uColor");
+    const glowIntensityUniform = shader2.getUniformLocation("uGlowIntensity");
+    const timeUniform = shader2.getUniformLocation("uTime");
+    console.log(
+      `✓ Attributes located (position=${posAttr}, texCoord=${texCoordAttr})`
+    );
+    shader2.use();
+    vertexBuffer.bind();
+    gl.enableVertexAttribArray(posAttr);
+    gl.vertexAttribPointer(posAttr, 3, gl.FLOAT, false, 5 * 4, 0);
+    gl.enableVertexAttribArray(texCoordAttr);
+    gl.vertexAttribPointer(texCoordAttr, 2, gl.FLOAT, false, 5 * 4, 3 * 4);
+    console.log("✓ Vertex attributes configured");
+    texture2.bind(0);
+    gl.uniform1i(textureUniform, 0);
+    console.log("✓ Texture bound to unit 0");
+    const identityMatrix = new Float32Array([
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1
+    ]);
+    if (matrixUniform) {
+      gl.uniformMatrix4fv(matrixUniform, false, identityMatrix);
+    }
+    gdevice.clear({ r: 0.2, g: 0.2, b: 0.2, a: 1 });
+    console.log("✓ Screen cleared");
+    gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.getVertexCount());
+    console.log(`✓ Rendered ${vertexBuffer.getVertexCount()} vertices`);
+    gdevice.present();
+    console.log("✓ Frame presented");
+    const pixelData = renderingContext.readPixels();
+    console.log(
+      `✓ Captured frame (${WIDTH}x${HEIGHT}, ${pixelData.length} bytes)`
+    );
+    if (sdlWindow && sdlWindow.isOpen()) {
+      sdlWindow.updatePixels(pixelData);
+    }
+    const ppmHeader = `P6
+${WIDTH} ${HEIGHT}
+255
+`;
+    const ppmData = Buffer.alloc(3 * WIDTH * HEIGHT);
+    for (let i = 0; i < WIDTH * HEIGHT; i++) {
+      const srcIdx = i * 4;
+      const dstIdx = i * 3;
+      ppmData[dstIdx] = pixelData[srcIdx];
+      ppmData[dstIdx + 1] = pixelData[srcIdx + 1];
+      ppmData[dstIdx + 2] = pixelData[srcIdx + 2];
+    }
+    const ppmPath = "./rendered-textured-quad.ppm";
+    fs.writeFileSync(ppmPath, ppmHeader);
+    fs.appendFileSync(ppmPath, ppmData);
+    console.log(`✓ Frame saved to ${ppmPath}`);
+    if (!sdlWindow) {
+      try {
+        const ppmAbsPath = path__default.resolve(ppmPath);
+        if (process.platform === "win32") {
+          execSync(`start "" "${ppmAbsPath}"`);
+        } else if (process.platform === "darwin") {
+          execSync(`open "${ppmAbsPath}"`);
+        } else {
+          execSync(`xdg-open "${ppmAbsPath}"`);
+        }
+        console.log("✓ Image opened in default viewer");
+      } catch (error) {
+        console.warn(
+          "⚠ Could not auto-open image in viewer (no default handler)"
+        );
+      }
+    }
+    console.log(`
+✓ Sample pixels (RGBA):`);
+    for (let i = 0; i < 4; i++) {
+      const offset = i * 4;
+      console.log(
+        `  Pixel ${i}: R=${pixelData[offset]}, G=${pixelData[offset + 1]}, B=${pixelData[offset + 2]}, A=${pixelData[offset + 3]}`
+      );
+    }
+    if (sdlWindow && sdlWindow.isOpen()) {
+      console.log("\n✓ SDL Window open - press ESC or close window to exit");
+      console.log("💡 Window is interactive and rendering at 60 FPS");
+      let frameCount = 0;
+      const startTime = Date.now();
+      const targetFPS = SCENE_CONFIG.targetFPS;
+      const frameTimeMs = 1e3 / targetFPS;
+      let running = true;
+      sdlWindow.on("close", () => {
+        running = false;
+      });
+      sdlWindow.on("keyDown", (event) => {
+        if (event.key === "escape") {
+          running = false;
+          sdlWindow.destroy();
+        }
+      });
+      const renderLoop = () => {
+        if (!running || !sdlWindow.isOpen()) {
+          return;
+        }
+        const frameStartTime = Date.now();
+        const elapsedSeconds = frameCount * frameTimeMs / 1e3;
+        const bgColor = getBackgroundColor(elapsedSeconds);
+        gdevice.clear(bgColor);
+        const quadTransforms = getQuadTransforms(elapsedSeconds);
+        for (const transform of quadTransforms) {
+          const matrixUniform2 = shader2.getUniformLocation("uMatrix");
+          if (matrixUniform2) {
+            gl.uniformMatrix4fv(matrixUniform2, false, transform.matrix);
+          }
+          const colorUniform2 = shader2.getUniformLocation("uColor");
+          if (colorUniform2) {
+            gl.uniform3f(
+              colorUniform2,
+              transform.color[0],
+              transform.color[1],
+              transform.color[2]
+            );
+          }
+          if (glowIntensityUniform) {
+            gl.uniform1f(
+              glowIntensityUniform,
+              1.5 + Math.sin(elapsedSeconds) * 0.5
+            );
+          }
+          if (timeUniform) {
+            gl.uniform1f(timeUniform, elapsedSeconds);
+          }
+          gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.getVertexCount());
+        }
+        const triangleTransforms = getTriangleTransforms(elapsedSeconds);
+        for (const transform of triangleTransforms) {
+          const matrixUniform2 = shader2.getUniformLocation("uMatrix");
+          if (matrixUniform2) {
+            gl.uniformMatrix4fv(matrixUniform2, false, transform.matrix);
+          }
+          const colorUniform2 = shader2.getUniformLocation("uColor");
+          if (colorUniform2) {
+            gl.uniform3f(
+              colorUniform2,
+              transform.color[0],
+              transform.color[1],
+              transform.color[2]
+            );
+          }
+          if (glowIntensityUniform) {
+            gl.uniform1f(
+              glowIntensityUniform,
+              2 + Math.cos(elapsedSeconds * 0.7) * 0.8
+            );
+          }
+          if (timeUniform) {
+            gl.uniform1f(timeUniform, elapsedSeconds);
+          }
+          gl.drawArrays(gl.TRIANGLES, 0, triangleBuffer.getVertexCount());
+        }
+        for (const entity of projectionEntities) {
+          const screenX = entity.screenPos.xscreen / WIDTH * 2 - 1;
+          const screenY = 1 - entity.screenPos.yscreen / HEIGHT * 2;
+          const scale = entity.size * 0.1;
+          const entityMatrix = new Float32Array([
+            scale,
+            0,
+            0,
+            0,
+            0,
+            scale,
+            0,
+            0,
+            0,
+            0,
+            1,
+            0,
+            screenX,
+            screenY,
+            0,
+            1
+          ]);
+          const matrixUniform2 = shader2.getUniformLocation("uMatrix");
+          if (matrixUniform2) {
+            gl.uniformMatrix4fv(matrixUniform2, false, entityMatrix);
+          }
+          const colorUniform2 = shader2.getUniformLocation("uColor");
+          if (colorUniform2) {
+            gl.uniform3f(
+              colorUniform2,
+              entity.color[0],
+              entity.color[1],
+              entity.color[2]
+            );
+          }
+          gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.getVertexCount());
+        }
+        gdevice.present();
+        const framePixels = renderingContext.readPixels();
+        sdlWindow.updatePixels(framePixels);
+        frameCount++;
+        if (frameCount % 60 === 0) {
+          const totalElapsed = Date.now() - startTime;
+          const fps = frameCount / totalElapsed * 1e3;
+          console.log(`FPS: ${fps.toFixed(1)} | Frames: ${frameCount}`);
+        }
+        const elapsed = Date.now() - frameStartTime;
+        const sleepTime = frameTimeMs - elapsed;
+        if (sleepTime > 0) {
+          setTimeout(renderLoop, sleepTime);
+        } else {
+          setImmediate(renderLoop);
+        }
+      };
+      renderLoop();
+      await new Promise((resolve) => {
+        const checkInterval = setInterval(() => {
+          if (!sdlWindow.isOpen() || !running) {
+            clearInterval(checkInterval);
+            resolve(null);
+          }
+        }, 100);
+      });
+      const totalTime = (Date.now() - startTime) / 1e3;
+      console.log(
+        `✓ Rendered ${frameCount} frames in ${totalTime.toFixed(2)}s`
+      );
+    }
+    vertexBuffer.dispose();
+    texture2.dispose();
+    shader2.dispose();
+    console.log("\n✓ Resources cleaned up");
+    if (sdlWindow) {
+      sdlWindow.cleanup();
+    }
+    gdevice.dispose();
+    console.log("✓ Graphics device disposed");
+    console.log("\n=== Rendering Complete ===\n");
+    await runSpriteBatchRendererV2Demo();
+  } catch (error) {
+    console.error("✗ Rendering failed:", error);
+    if (sdlWindow) {
+      try {
+        sdlWindow.cleanup();
+      } catch (e) {
+        console.error("Error cleaning up SDL window:", e);
+      }
+    }
+    gdevice.dispose();
+    process.exit(1);
+  }
+})();